Flash interface com explicao bsica do programa.

V01- Introduo
Criar cdigo em AS3 utilizando interatividade para criar jogos e aplicaes.

V02- Criar um filme

Selecionar AS3.0 onde abre o palco.

IMG

Vamos falar sobre movie clips e como eles comunicam entre si.

Criar uma forma oval e atribuir cor. Ateno barra de propriedades

IMG

Converter forma para movie clip atravs do F8 e atribuir nome sem espaos podendo utilizar
letras maisculas para demarcar nome. A registration indica a posio do movie clip e
mantemos a meio.

IMG

Ao pressionarmos duas vezes entramos dentro do movie clip.

Na linha de tempo principal arrastamos da biblioteca para o palco a forma oval e a alteramos a
sua cor e tamanho. Selecionando um podemos alterar as suas propriedades na barra de
propriedades para diferenciar dos restantes.

IMG

V03- Aplicar AS
Podemos ajustar cada propriedade individual dos movie clips atravs da barra de propriedades
ou atravs de AS.

Seleciona o primeiro movie clip e atribui-lhe um nome de instncia com nome diferente do
clipe de filme. Fazemos o mesmo aos restantes movie clipes.

IMG

Inserimos outra camada e nomeamos com actions para receber o cdigo AS3. Para
verificarmos as aes pressionamos no painel Windows | Actions (F9).

Podemos utilizar neste painel o Script Assist e comeamos a introduzir cdigo.

Escolhemos o nome da instncia do movie clipe e escrevemos:

Circle1_mc.alpha=.3;

V04- Utilizar alpha

No AS3 utilizamos o alfa channel com valores de 0 a 1, anteriormente no AS2 utilizavamos
valores de 0 a 100%.

Se pressionarmos no F1 aparece as propriedades do canal alfa para ajudar a perceber as suas

funcionalidades.

Escrevemos outra instancia com valores de transparncia:

Circle1_mc.alpha=.3;

Circle2_mc.alpha=.5;

Circle3_mc.alpha=.7;

Podemos verificar o filme testanto.

V05- Variveis
Desenhar uma caixa vazia com o lpis e indicar que a varivel como uma caixa vazia.

Escrever nomes ao lado da caixa e podemos incluir vrias variveis dentro da caixa com
diferentes propriedades. A varivel fica populada.

Local variable: ser destruda depois de ser utilizada

Global variable: ir manter o seu valor depois de ser utilizada.

IMG - explicao do significado de varivel

V06- Strings
Abre uma nova janela e escrevemos o nome da varivel e o seu tipo nas actions:

Var userName: String = qualquer nome;

Esta varivel uma string definida com aspas.

V07- Trace
Temos a possibilidade de procurar um comando e verificar se essa linha de cdigo funciona
corretamente.

Antigamente com vrias linhas de cdigo o flash no indicava qual o erro e desta forma temos
uma forma de verificar onde o programa poder conter erros.
Escreve:

Trace(userName);

No esquecer que o AS3 case sensitive.

Se testarmos a aplicao ele indica no output que temos uma varivel vazia. Se alterarmos o
nome da varivel podemos verificar o erro que aparece no output.

Se colocarmos uma string ele indica que o cdigo estar a resultar at esse numero de linhas.

V08- Aplicar comentrios

Como comentar o cdigo. Acedemos s actions e utilizamos o cdigo anterior. No flash
qualquer palavra em verde considerada como uma string. Neste cdigo temos duas strings e
dois traces:

Var userName: String = qualquer nome;

Var multimediaMsc: String = Universidade;

Trace(userName);

Trace(multimediaMsc);

Podemos selecionar uma das variveis e colocar // para comentar o cdigo. O texto ir ficar a
cinzento quando estiver comentado.

Para criarmos mltiplos comentrios podemos selecionar um bloco e utilizar /* cdigo

comentado */ . No importa onde colocamos o cdigo que ele ir funcionar.

V09- Compreender funes

Uma funo um pedao de cdigo que podemos reutilizar. Por exemplo, podemos utilizar a
mesma funo vrias vezes apenas escrevendo uma vez.

A vantagem a utilizao de pouco cdigo e de evitar erros.

V10- Funes bsicas

Vamos criar uma animao para a forma oval que foi transformada para movie clipe.

Criamos uma animao tipo shape e testamos.

Inserimos uma nova camada e escrevemos actions.

No ultimo frame da animao na camada das actions e escrevemos:

Stop();

gotoAndStop(10);

Esta a ideia bsica sobre funes dentro do flash.

V11- Escrever funes

No mesmo palco, desenhamos uma forma de polgono e convertemos para um movie clipe e
atribumos um nome de instancia Poly_mc.

Agora na camada actions no ultimo frame escrevemos:

Function myMove (): void {

Poly_mc.x=50;

Poly_mc.rotation=70;

Entre os parenteses introduzimos o cdigo para a funo. Para utilizarmos este cdigo apenas
temos de escrever o nome da funo:

myMove();

V12- Funes modulares

Fazer as funes reutilizveis. Temos movie clipes com vrias cores.

Abrimos o painel de aoes e alteramos o cdigo:

Function myMove (shape:MovieClip): void {

shape.x=50;

shape.y=-50;

shape.alpha=.5;

shape.rotation=70;

myMove(poly1_mc);

myMove(poly2_mc);

myMove(poly3_mc);
IMG

Podemos verificar que todas as formas comportam-se de forma igual.

O melhor desta funo que no n ecessitamos de falar diretamente com a funo.

Esta uma funo modular que podemos reutilizar sempre que pretendermos.

V13- Event Listeners

Existem dois tipos de elementos. Um que transmite a informao e outro que est espera de
receber esse evento.

Eventos so aoes que ocorrem enquanto os event listeners so quem est espera de ouvir
essas aoes.

V14- Adicionar event Listeners

O handler o tipo que manuseia esse tipo de ao. Arrastamos uma instancia para o palco e
criamos uma nova camada.

Abrimos o painel actions e escrevemos:

Square_mc.addEventListener (MouseEvent.CLICK, onClick);

//handler para manusear a funo

Function onClick (event:MouseEvent):void {

Trace(hello world!);

CTRL + Enter para testar o filme e verificamos se o cdigo contm erros na seta de visto.

IMG

Aparecer a imagem do trace do hello world a indicar que est tudo a funcionar.

Square_mc.buttonMode=true;

Este cdigo ir fazer com que o cursor mude para um cursor de boto.

No local do trace podemos substituir por:

Square_mc.x=50;

Ir saltar mais 50px para posicionar corretamente quando pressionamos no boto.

V15- Cdigo utilizavel
Square_mc.addEventListener (MouseEvent.CLICK, onClick);

Function onClick (event:MouseEvent):void {

Square_mc.y-=30;

Square_mc.rotation+=25;

Trace(helloooooo);

Square_mc.buttonMode=true;

Este cdigo altera a posio sempre que pressionamos no rato em cima do movie clip.

Para alterarmos o cdigo quando temos vrias instncias podemos utilizar:

Square_mc.addEventListener (MouseEvent.CLICK, onClick);

Function onClick (event:MouseEvent):void {

Event.target.y-=30;

Event.target.rotation+=25;

Trace(helloooooo);

Square_mc.buttonMode=true;

Continua a funcionar corretamente no entanto quando utilizamos vrias instancias este cdigo
funciona melhor por utilizar o target como referencia.

V16- Roll_over
Vamos continuar a construir os botes utilizando event listeners.

Vamos ao cdigo e selecionamos a primeira linha e copiamos.

Square_mc.addEventListener (MouseEvent.CLICK, onClick);

Square_mc.addEventListener (MouseEvent.ROLL_OVER, squareOver);

Function squareOver (event:MouseEvent):void {

Event.target.alpha-=.4;
}

Function onClick (event:MouseEvent):void {

Event.target.y-=30;

Event.target.rotation+=25;

Trace(helloooooo);

Square_mc.buttonMode=true;

Agora sempre que fazemos o rool over ele ir ficar mais transparente.

V17- Roll_out
Vamos criar um evento para voltar ao estado anterior. Adicionamos as linhas:

Square_mc.addEventListener (MouseEvent.ROLL_OUT, squareOut);

Function squareOut (event:MouseEvent):void {

Event.target.alpha-=1;

V18- Eventos de keyboard

Vamos utilizar o cdigo anterior e adicionamos um evento de teclado no final.

No vamos especificar um evento sobre os objetos, este funciona diferente sobre o palco e
no sobre os objetos.

stage.addEventListener (KeyboardEvent.KEY_UP, moveUp);

Function moveUp (event:KeyboardEvent):void {

event.target.Y-=.30;

Quando pressionamos na tecla para cima do teclado o objeto move-se para cima.

V19- Ligao ao website

Vamos criar um link para o website criando funes em AS3. Vasmo converter o simbolo para
movie clipe e atribumos o nome da instancia.
Abrimos nova camada para as actions e escrevemos:

Var link:URLRequest = new URLRequest (http://www.masterd.pt);

Btn_mc.addEventLister (MouseEvent.CLICK, onClick);

Function onClick (event:MouseEvent):void {

NavigateToURL (link);

Bt_mc.buttonMode=true;

Podemos testar o cdigo e verificar o vdeo da criao de um link para um site

IMG

V20- Funo frame

Utilizando o mesmo cdigo, inclumos mais umas linhas.

stage.addEventListener (KeyboardEvent.KEY_DOWN, moveDown);

stage.addEventListener (Event.ENTER_FRAME, spin);

Function moveDown (event:KeyboardEvent):void {

Sq_mc.Y+=10;

Stage.addEventListener (KeyboarEvent.KEY_DOWN, moveDown);

Function spin (event:Event):void {

Sq_mc.rotation+=45;

Esta ultima funo entra em rotao sempre que entramos no frame.

Ao colocarmos este cdigo dentro da funo spin ele ir mover-se para a direita.

Sq_mc.x+=5;

Esta uma forma de criar animaes sem utilizar a linha do tempo apenas utilizando AS3.

V21- Funo timer

Vamos utilizar o timer que faz com que a animao execute num devido perodo de tempo.

parecido com o enterframe no entanto podemos controlar o tempo.

Adicionamos uma nova camada actions e na primeira frame do movie clipe escrevemos:

Stop();

Na linha de tempo principal adicionamos uma nova camada e escrevemos:

Var timerJump:Timer = new Timer (3000);

timerJump.addEventListener (TimerEvent.TIMER, jump);

function jump (event:TimerEvent):void {

ball_mc.play();

timerJump.start();

Verificamos a sintaxe e corremos o vdeo CTRL+Enter. A bola para de saltar aps 3 segundos.

IMG bola a saltar

V01- Vdeo no AS3

Vamos utilizar vdeo para as mais diferentes utilidades.

V02- Interactive vdeo development

Convm ter uma noo do AS3 seno poders voltar atrs para rever estes conceitos.

Como importar vdeo para o AS3 sem grandes programaes.

V03- Vantagens
Eficiente e quick delivery
Integrao em qq aplicao.
Interativo
Combinado com animao

V04- Ficheiros FLV

O formato nativo o .flv;
apresesntado com um ficheiro swf;
 Pode integrar-se dentro da linha do tempo
Pode ser controlado atravs de AS.

simbolizado por este simbolo:

IMG

utilizado atravs do swf para o flash player.

V05- Problemas com verses

Flash player 6 foi o primeiro programa a apresentar vdeo;
95% dos utilizadores utilizam o flash player.
Possibilidade de verificar a verso.

V06- Detetar a verso

File | Publish settings e escolhemos flash e html selecionado.

Na aba flash escolhemos a verso de flash player 9 com AS3. O jpeg quality colocamos no
mximo.

Na aba html escolhemos no template para verificar a verso.

V07- Formatos de vdeo

Para capturar e editar os vdeos podemos utilizar um dos seguintes formatos:

QuickTime (.mov)
Motion Picture Experts Group (.mpg)
Digital Video (.dv)
Audio Video Interleaved (.avi)
Windows Media (.wmv) Windows

O flash consegue converter qualquer um destes formatos para flv.

V08- Identificar frame rate

Antes de codificar o flv precisamos de identificar duas cenas para o filme original:

1. Tamanho
2. Frame rate
Podemos fazer de vrias formas. Vamos abrir a pasta e podemos verificar nas propriedades do
vdeo para detalhes e verificamos o tamanho e frame rate do vdeo. Tambem podemos
importat para o premire e verificar as caractersticas do vdeo.

Antes da codificao devemos manter o vdeo original.

V09- Download progressivo

Vamos importar o vdeo dentro de um novo documento. A partir dos publish/settings temos
acesso a verificar a verso do vdeo.

Vamos selecionar File | Import | Import vdeo e escolhemos o ficheiro do vdeo que iremos
trabalhar. Na aba seguinte temos seis opes para selecionar a forma como queremos que o
vdeo seja descarregado.

A primeira opo utilizada para visualizar o vdeo enquanto est a descarregar utilizando o
formato flv.

Pressiona next para escolher a codificao.

V10- Tipos de codificao

Temos vrias definies que podemos escolher que codifica o vdeo por ns.

A escolha recais sobre o tamanho e a qualidade do vdeo.

IMG encoding profiles

Evita os ltimos dois e utilizamos mais o flash player 8 com 400kbs.

V11- Escolher a compresso

O flash escolheu a compresso entre Soreson spark no flash 7 enquanto no 8 ser o VP6 que
melhor na reduo do tamanho mantendo a qualidade.

Na aba vdeo o codec est escolhido o VP6 no flash 8. Selecionamos o encode alfa channel
para codificar as transparncias do vdeo.

No frame rate est a 25 fps e podemos escolher para a web a utilizao de 15 fps.

Na aba udio est selecionado mpeg3 porque o vdeo no contm udio. Se tiver udio
utilizamos no data rate 128kbs para a maioria das musicas no vdeo. Se o vdeo tiver uma
narrao ou efeitos baixamos para 16.

Pressionamos no boto next.

V12- Pontos de sinalizao
So marcadores do vdeo que podemos adicionar que podem desativar eventos ou atribuir
interao.

Vamos pressionar o sinal + para adicionar pontos de sinalizao e atribumos o nome a cada
um deles.

Queremos que estes pontos sejam associados navegao e escolhemos o type Navigation.

Pressionamos no boto Next.

V13- Selecionar controles de vdeo

Crop and resize onde podemos cortar o vdeo e atribuir um novo tamanho.

Escolhemos a skin para ser o suporte de reproduo do vdeo.

Temos o over e o under para definir a posio da barra de controlos.

Podemos customizar a skin como desejarmos e escolhemos next.

V14- Codificar o vdeo

Ao selecionarmos next ele ir codificar o video.

IMG

Convm termos o video salvo seno o programa ir perguntar para salvar.

V15- Ficheiros Play back

Depois de codificado, vamos a Control e test movie para verificar o vdeo.

Na biblioteca existe um vdeo dentro do flash.

Depois do ficheiro estar salvo, vamos pasta e verificamos o flv e o vdeo codificado dentro de
um ficheiro flash. O ficheiro swf que apresentam so para representarem a skin e os controlos.

Precisamos sempre destes 3 ficheiros para apresentar um video dentro do flash.

V16- Controles flv customs

Utiliza e customiza os componentes
Customiza o aspeto do skin
Cria e programa os controlos custom atravs de AS.
V17- Criar controles flv customs
Como customizar os nossos flv controlos.

O programa permite alterar os controles atravs de ficheiro FLA.

Acede a program files ou Application dentro da pasta do programa.

Dentro da pasta configuration encontramos a pasta FLV Playback Skins e acedemos pasta FLA
e escolhemos AS3.0 e copiamos a primeira SkinOverAll.

Andamos para trs e colamos dentro de uma nova pasta que criamos chamada custom.

V18- Criar controles flv customs2

Colamos o ficheiro e alteramos o seu nome. Temos que indicar ao programa para carregar esse
video.

Abrimos o ficheiro e verificamos o seu contedo de objetos.

Podemos alterar o contedo e aspeto dos botes entrando no simbolo dos botes.

IMG alterar cores dos componentes da skin

Podemos salvar e fechar e verificamos na pasta que foi criada uma skin.

Acemos ao ficheiro SWF e dentro da pasta AS3 e colcamos a skin swf que criamos agora.

Selecionamos o video e dentro dos parmetros escolhemos a skin que colcamos agora na
pasta das skins swf.

V19- Criar mais controles flv customs

Vamos criar um skin sem ter todos os controlos. Vamos utilizar os componentes que o
programa oferece.

Escolhemos a skin none e os controlos desaparecem. Acede ao componente inspector e

acedemos ao Video components onde escolhemos o PlayPayseButtons e a seek bar arrastando
para o palco.

Fechamos o composer componentes e alinhamos os elementos.

Para comunicar os componentes com o video, necessitamos de indicar a instancia do video e

dos seus componentes.

Criamos outra camada actions e escrevemos:

Vid.playPauseButton = play_pause;
Vid.seekBar = timer;

V20- Criar componentes customs

Criar novas funes para diferentes instncias.

Seleciona o video e copia e cola esse video ao lado. Atribuimos uma instancia ao segundo
video.

Insere uma nova camada de actions e escrevemos:

Vid1.playPauseButton = play_pause;

Vid1.seekBar = timer;

Vid.pause();

Vid1.pause();

Isto ir parar o vdeo antes de efetuarmos qualquer ao.

V21- Customs cores

Continuando com este exemplo, vamos aceder ao componente e alteramos as cores.

IMG alterar as cores do componente do skin

Esta outra forma de customizar os controlos.

V22- Final
Vdeo playback utilizando flv atravs de controlos que comandam o vdeo.

6 Criar navegao interativa 40H

Abrimos o ficheiro 06Start.fla.

A interao da animao altera consoante a ao tomada pelo utilizador. Quando o utilizador

carrega no boto apresentado um grfico diferente. A interao pode ser simples como um
boto ou complexa recebendo inputs de vrias fontes como o movimento do rato ou teclado.

No Flash utilizamos AS para obter maior interatividade. AS disponibiliza instrues para indicar
a cada boto o que fazer quando o utilizador pressiona.

Criar botes
So um tipo de smbolo que possuem quatro estados ou fotogramas chave que determinam a
aparncia do boto.

Up state: apresenta o boto quando o rato no est a interagir.

Over state: apresenta o boto quando o rato est por cima.

Down state: apresenta o boto quando o rato est a pression-lo.

Hit state: indica a rea pressionvel do boto.

Nomear instncias de botes

Para referenciarmos os botes atravs de AS, temos que indicar o nome da instncia para cada
boto. No painel de propriedades alteramos o nome da instncia. Estas seguem as seguintes
regras:

No utiliza espaos ou pontuao especial. Underscore podemos utilizar.

No comear o nome por um nmero.
O AS case-sensitive, devemos ter ateno a minsculas e maisculas.
Termina o nome da instncia com _btn para ajudar na identificao.
No utilizar palavras reservadas a comandos AS.

Compreender AS3.0
O Flash utiliza o AS3.0 como linguagem de script para aumentar as suas funcionalidades.
Apesar do AS3.0 ser intimidante para quem nunca programou, atribui grandes resultados com
scripts muito simples. Como em qualquer linguagem, o melhor comear por entender a
sintaxe da linguagem e a terminologia bsica.

Sobre AS
Esta linguagem semelhante ao JavaScript e permite adicionar interatividade s animaes
Flash. Vamos utilizar o AS para fazer tarefas simples como parar a animao.

No necessitas ser um especialista para utilizar o AS3, at podes copiar cdigo j utilizado por
outros utilizadores e reutiliz-lo em outros ficheiros.

Compreender a terminologia do script

Muitos destes termos so semelhantes em outras linguagens.

Varivel:

A varivel representa uma pea especfica de informao que ajuda a manter o controlo. Por
exemplo, podemos utilizar as variveis para controlar o resultado de um jogo ou os clique que
o utilizador efetua com o rato. Quando criamos ou declaramos a varivel, atribudo um tipo
de dado que determina o que a varivel ir representar. Por exemplo, uma varivel de String
contm qualquer string de caracteres alfanumricos e uma varivel de Number contm um
nmero.

Keyword:

Em AS, uma keyword uma palavra reservada utilizada para tarefas especficas. Por exemplo,
var uma palavra utilizada para criar a varivel. Podes encontrar uma lista completa de
palavras reservadas na Ajuda do Flash. Como essas palavras so reservadas, podes utiliz-las
como variveis de nome ou de outras formas. Quando inserimos essa palavra no painel de AS,
a sua cor ir ser diferente como forma de compreender melhor o cdigo. Esta uma excelente
forma de conhecer as palavras reservadas do cdigo AS.

Argumentos

o valor frequentemente referenciado entre parenteses () na linha de cdigo e fornece

detalhes especficos para um comando em particular. Por exemplo, no cdigo gotoAndPlay (3);
o argumento instrui o script para ir para o fotograma 3.

Funo

Um grupo de funo relata linhas de cdigo que podemos referir por nome. Utilizando as
funes torna possvel correr as mesmas declaraes sem ter que digitar novamente.

Objetos

Trabalhamos com objetos para nos ajudar em determinadas tarefas. Um objeto de Sound
ajuda a controlar o som e um objeto Data ajuda a manipular a informao relacionada com
datas de calendrio. Os botes de smbolo tambm so objetos denominados de objetos
SimpleButton.

Os botes criados no ambiente grfico, em oposto aos criados por cdigo, podem ser
referenciados por AS apenas se tiverem um nome de instncia nico. Os botes no palco so
referenciados como instncias, ou seja instncias e objetos so sinnimos.

Mtodos

Os mtodos so comandos que resultam em aes. Estes mtodos so os dadores de AS e

cada tipo de objeto tem o seu prprio conjunto de mtodos. Compreender o AS envolve
aprender os mtodos para cada tipo de objeto. Por exemplo, dois mtodos associados a um
objeto MovieClip so stop() e gotoAndPlay().

Propriedades

As propriedades descrevem o objeto. Por exemplo, as propriedades num clipe de filme inclui a
altura e largura, as coordenadas dos eixos do x e do y e a escala horizontal e vertical. Muitas
das propriedades podem ser alteradas enquanto outras propriedades apenas podem ser lidas,
significando que apenas podem descrever o objeto.

Utilizando a sintaxe prpria

Se no ests familiarizado com o cdigo do programa, poders achar desafiador decifr-lo.
Assim que compreendas a gramtica e pontuao da linguagem, ser mais simples conseguir
seguir o script.

O ponto e vrgula no final, indica ao AS que essa linha chegou ao fim.

Como em Ingls, todo o parenteses abertos devero ter uma correspondncia de
fecho, ou seja quando abrimos alguma coisa esta dever ser fechada.
O operador de ponto (.) oferece uma forma de aceder s propriedades e mtodos de
um objeto. Escreve o nome da instncia seguido de um ponto e depois insere o nome
da propriedade ou mtodo. Podes pensar nos pontos como forma de separao dos
objetos, mtodos e propriedades.
Quando inseres uma string utiliza as aspas.
Podes adicionar comentrios para lembrar o que pretendes atingir com essas partes
do cdigo. Para adicionar um comentrio de uma linha simples, comea com as duas
barras (//). Para comentares mltiplas linhas, inicia a linha com /* e termina com */.
Os comentrios sero ignorados pelo Flash e no influenciam o cdigo.

O Flash ajuda na escrita do cdigo das seguintes formas:

- Palavras que possuem um significado especial em AS, como palavras reservadas e

declaraes, aparecem a azul assim que as digitamos no painel de Aes. As palavras que no
so reservadas pelo AS, como variveis aparecem a preto. As strings aparecem a verde e os
comentrios ignorados aparecem a cinza.

- medida que digitamos as palavras no painel de Aes, o programa deteta a ao que est a
ser introduzida e apresenta uma dica de cdigo. Existem dois tipos de dicas: uma dica de
ferramentas que contm a sintaxe completa para essa ao e um menu popup que lista os
elementos possveis de AS.

- Assim que o painel se enche de cdigo, podemos colapsar grupos de cdigo para facilitar a
leitura. Quando temos blocos de cdigo relacionados (agrupados por parenteses), pressiona
no smbolo menos na margem do cdigo para os colapsar e no sinal mais para os expandir.

Navegar no painel de Ao
neste painel que vamos escrever o cdigo. Temos a possibilidade de escrever, editar e
visualizar o cdigo.

Est dividido em duas partes, direita est o script para escrever cdigo. Na esquerda est o
script navigator que ajuda quando temos cdigo espalhado em vrios fotogramas-chave ou
linhas de tempo.

No final apresentado o nmero da linha e coluna.

Na parte de cima direita encontramos opes de pesquisa, substituio e insero de cdigo.

Preparar a linha do tempo (timeline)
Qualquer projeto Flash iniciado com um simples fotograma. Para criar espao na Linha do
Tempo para adicionar mais contedo, temos que adicionar mais fotogramas em pelo menos
uma camada.

1. Seleciona um fotograma na posio 50 da Linha do tempo.

2. Escolhe Insert | Timeline | Frame (F5) ou atravs do boto das opes e escolhe inserir
fotograma.
3. Seleciona o fotograma 50 nas restantes camadas e insere fotogramas.

Adicionar uma ao para parar (Stop)

Agora que temos fotogramas na Linha do tempo, o filme ir ser apresentado linearmente
desde o fotograma 1 at ao 50. Contudo, com esta interatividade, pretendemos que s
utilizadores escolham qual a ordem do restaurante a visualizar. Para isso iremos necessitar de
criar um boto para a Pausa no filme no incio de cada fotograma. Uma ao de stop apenas
para o filme de continuar a correr na linha de tempo.

1. Insere uma nova camada no topo e atribui o nome para actions.

2. Escolhe o primeiro fotograma da camada aes e abre o painel Aes. Dentro do Script
Pane, escreve stop ();

O cdigo aparece no Script Pane e um caracter a aparece no primeiro fotograma da camada

aes a indicar que contm cdigo. O filme agora ir parar no primeiro fotograma.

Criando Event Handlers para os botes

Os eventos so ocorrncias que ocorrem em ambiente flash e que o programa deteta e
responde. Por exemplo, quando pressionamos o rato, um movimento, o pressionar de um
boto no teclado, todos estes so eventos. Estes eventos so produzidos pelo utilizador, mas
alguns podem acontecer independentemente do utilizador como o carregamento com sucesso
de uma parte da informao ou o terminar de um som. Com AS, podemos escrever cdigo que
deteta eventos e responde a eles com o event handler.

O primeiro passo no event handling criar um listener que detete esse evento:

Wheretolisten.addEventListener(whatevent, responsetoevent);

O comando atual addEventListener(). Por outras palavras, so contentores para objetos e

parmetros. Wheretolisten o objeto onde o evento ocorre (normalmente no boto),
whatevent a especificao do tipo de evento (normalmente um clique no rato), e
responsetoevent o nome da funo que despoleta quando o evento acontece. Ento se
pretendemos estar espera do clique do rato sobre um boto chamado btn1_btn, e a resposta
para despoletar uma funo chamada showimage1, o cdigo ir ser o seguinte:

Btn1_btn.addEventListener(MouseEvent.CLICK, showimage1);

O prximo passo criar uma funo que responda ao evento, neste caso a funo
showimage1. Uma funo simplesmente agrupa vrias aes, podemos despoletar essa funo
referenciando o seu nome:

Function showimage1 (myEvent:MouseEvent){ };

Funes com nomes como botes so de escolha livre. Podemos nomear funes que nos
faam sentido. Neste exemplo o nome da funo showimage1. Recebe um parmetro
(dentro de parenteses) chamada myEvent, que ir invocar o listener. O item depois dos dois
pontos inica o tipo de objeto. Se um evento despoleta esta funo, o programa executa todas
as funes dentro dos parenteses.

Adicionando o event listener e funo

Iremos adicionar cdigo AS para esperar por um clique no rato em cada boto. A resposta ir
fazer o programa ir a um fotograma especfico na linha do tempo para mostrar contedo
diferente.

1. Seleciona o primeiro fotograma da camada aes.

2. Abre o painel Aes
3. Dentro do Script pane no painel das Aes, comea na segunda linha e escreve:
gabelloffel_btn.addEventListener(MouseEvent.CLICK, restaurant1);
O listener ir estar escuta de um clique no rato sobre o objeto gabelloffel_btn no
palco. Se o evento acontecer, disparada a funo chamada restaurant1.
4. Na prxima linha escreve:
Function restaurante1(event:MouseEvent):void { gotoAndStop(10); }

A funo chamada restaurant1 contm instrues para ir at ao fotograma 10 e parar. O

cdigo para o boto est completo.

Eventos do rato

A seguinte lista contm os cdigos AS para os eventos do rato mais comuns. Utiliza esse cdigo
quando criares o listener. Para a maioria dos projetos o primeiro evento (MouseEvent.CLICK)
ser suficiente. Esse evento acontece quando um utilizador pressiona e solta o boto do rato.

MouseEvent.CLICK
MouseEvent.MOUSE_MOVE
MouseEvent.MOUSE_DOWN
 MouseEvent.MOUSE_UP
MouseEvent.MOUSE_OVER
MouseEvent.MOUSE_OUT

Para uma lista complete de eventos disponveis para os botes, verifica a ajuda do programa e
pesquisa por events de classe SimpleButton.

5 - Na prxima linha do Script pane, escreve o cdigo adicional para os restantes trs
botes.
Stop ();
Garygari_btn.addEventListener(MouseEvent.CLICK, restaurant2);
Function restaurant2(event:MouseEvent):void { gotoAndStop(20); }

Comandos AS para navegao na linha do tempo

A seguinte lista contm cdigos AS para comandos de navegao. Utiliza esses cdigos quando
criares botes para parar a cabea de reproduo, iniciar, ou mover para uma diferente
localizao na linha do tempo.

Os comandos gotoAndStop e gotoAndPlay necessitam de informao adiciona ou argumentos

dentro dos parenteses como indicado:

Stop();
Play();
gotoAndStop(framenumber ou framelabel);
gotoAndPlay(framenumber ou framelabel);
nextFrame();
prevFrame();

Verificando erros
A depurao um processo necessrio mesmo para veteranos no AS. Mesmo com muito
cuidado os erros podem arruinar o cdigo. Felizmente o Flash alerta para erros de sintaxe no
painel Compiler Errors, indicando a informao sobre a natureza do erro e a sua localizao no
painel Aes.

1. Testa o filme escolhendo Control | Test Movie | In Flash professional

Se no existirem erros, o programa apresenta o ficheiro SWF numa janela separada. Se
detetar algum erro, o compilador aparece automaticamente Window | Compiler errors
com a descrio do erro e localizao. Nada do cdigo funcionar se existirem erros no
compilador.

2. Pressiona no erro duas vezes para o programa apresentar a linha de cdigo com erro.
Criar fotogramas de destino
Quando um utilizador pressiona em cada boto, o flash movimenta a cabea de reproduo
para um novo local na linha do tempo de acordo com as instrues AS programadas.

Criando fotogramas com diferentes contedos

Vamos criar 4 fotogramas chave numa nova camada e inserir informao sobre cada
restaurante.

1. Insere uma nova camada no topo em baixo das actions e nomeia para conteudo.
2. Seleciona o fotograma 10 na camada contedo.
3. Insere um novo fotograma chave no fotograma 10 (F6).
4. Insere 3 novos fotogramas chave nos fotogramas 20, 30 e 40. A linha do tempo fica
com 4 fotogramas chave vazios.
5. Seleciona o fotograma chave 10.
6. No painel Library, expande a pasta e arrasta o smbolo para o palco. O smbolo um
clipe de filme que contem fotos, grficos e texto sobre o restaurante.
7. No painel inspetor de propriedades, indica o valor de X para 60 e Y para 150. A
informao sobre o restaurante centrada no palco e cobre todos os botes.

Utilizando Labels nos fotogramas

O cdigo AS indica ao programa para ir para um fotograma diferente quando o utilizador
pressiona cada um dos botes. Contudo, se pretendermos editar a linha do tempo e adicionar
ou apagar novos fotogramas, necessitamos de voltar ao AS e alterar o cdigo.

Uma forma simples de evitar este problema utilizar labels em vez dos nmeros fixos dos
fotogramas. Labels nos fotogramas so nomes atribudos em substituio dos nmeros
atribudos nos fotogramas.

Para referenciarmos os labels dos fotogramas no AS, temos que colocar entre aspas. O
comando gotoAndStop(label1) indica cabea de reproduo para retornar ao fotogramas
com a label de nome label1.

1. Seleciona o fotograma 10.

2. No inspetor de propriedades, escreve label1 no campo do nome do label.
Ir surgir uma bandeirita a vermelho indicando que o fotograma contm uma label.
3. Seleciona o primeiro fotograma da camada Aes e abre o painel Aes.
4. No cdigo AS, altera cada numero de fotograma para os comandos correspondentes
das labels.
gotoAndStop(10); altera para gotoAndStop(label1);
Agora o AS direciona a cabea de reproduao para um label em particular em
substituio de um nmero de fotograma.
5. Testa o filme escolhendo Control | Test Movie | In flash professional
Criar um boto Home com o Code Snippets
Um boto home indica cabea de reproduo para retornar ao primeiro fotograma na linha
de tempo, menu principal, ou um fotograma onde so apresentadas opes para o utilizador.

Vamos adicionar outro boto para o palco com o nome da instncia.

Abrimos o painel Code Snippets para adicionar AS. Este painel providencia cdigo AS que
facilita a adio de interatividade ao projeto e simplifica o processo. Podemos salvar, importar
e partilhar cdigo entre a equipa de desenvolvimento.

Ao abrirmos o painel Code Snippets, este apresenta-se organizado por pastas que descrevem
as suas funes. Expande a pasta chamada Timeline Navigation e pressiona Click Go to frame
and stop.

Aparecer o cdigo e podemos alterar.

PERGUNTAS:

Como e onde podemos adicionar cdigo AS?

Como atribuir nome s instancias e qual a sua necessidade?

Como colocar labels nos fotogramas e qual a sua utilidade?

O que uma funo?

O que um evento? O que um event listener?

Como criamos animaes?

Trabalhar com som e vdeo

Podemos importar vrios formatos de udio para o flash. Este suporta ficheiros MP3 e WAV
que so importados para o painel biblioteca. Podemos arrastar o som da biblioteca para o
palco em diferentes pontos da linha de tempo e sincronizar esses sons com qualquer coisa que
esteja a acontecer no palco.

Para importar udio para a biblioteca escolhemos: File | Import | Import to library.

Colocar udio na linha do tempo:

Arrastamos o udio para cima da linha de tempo e escolhemos a opo Sync | Stream para
longas passagens de msica ou narraes ao longo da linha do tempo.

Adicionar fotogramas linha de tempo

O prximo passo ser estender a linha do tempo para que todo o udio seja audvel antes da
ao stop. Para isso utilizamos o menu Inserir | Timeline | Frame ou pressionando o F5.
Cortar o final do udio

O clipe de udio importado maior que o necessrio. Vamos diminuir o udio e inserir um
efeito de fade out.

1. Selecionamos o primeiro fotograma da camada udio.

2. Nas propriedades pressionamos no boto Pencil para aparecer a waveform do udio.
3. Arrasta o final para os 45 frames na linha do tempo para cortar o clipe de udio.

Alterar o volume do udio

1. Seleciona o primeiro fotograma do udio.

2. Pressiona o boto Pencil para aparecer o waveform.
3. Pressiona na linha horizontal de topo para criar um fotograma-chave e novamente no
final para arrastar o udio para baixo.
4. Faz o mesmo processo para o canal direito de udio.

Alterar a qualidade de udio

Podemos controlar qual a qualidade que pretendemos no final da compresso do vdeo.

Quanto maior a compresso menor a qualidade e tamanho do udio.

1. Selecionamos o Ficheiro | Publish setting.

2. Alteramos o Audio stream e o udio event para 64 kbps e retiramos a seleo na
opo Convert stereo to mono.
3. Seleciona a opo override sound settings.

Adicionar udio a botes

Vamos adicionar udio aos botes para serem audveis quando o utilizador pressionar no
boto.

1. Na biblioteca pressionamos no smbolo do boto para entrar em modo de edio.

2. Insere uma nova camada com o nome de udio.
3. Seleciona o estado Down e insere um fotograma F5.
4. Arrasta o udio da pasta dos sons para o palco.
5. No painel propriedades escolhe Start nas opes Sync para disparar o udio quando a
cabea de reproduo entrar naquele fotograma.

As opes Sync so quatro e representam:

Stream: junta o udio linha de tempo para facilmente sincronizar os elementos

animados com o udio.
Event e Start: utilizados para disparar um som com um evento especfico como um
clique de boto. A nica diferena entre estas opes que o Start no dispara o udio
se este j estiver a tocar.
Stop: utilizado para parar o udio, no entanto se pretendermos parar o udio com o
Stream sync podemos inserir um fotograma em branco.
Entender o vdeo no Flash

Existem duas opes para apresentar vdeo no Flash. A primeira manter o vdeo separado do
ficheiro do Flash e utiliza-lo como um componente externo. A segunda opo embeber o
vdeo pequeno dentro do ficheiro Flash.

Ambas as opes requerem que o formato do vdeo seja o correto. O formato de vdeo
apropriado para o Flash utiliza a extenso .flv e f4v que suporta o vdeo codec H.264.

Utilizando o Media Encoder

Podemos converter um ficheiro de vdeo para o formato correto de FLV ou F4V utilizando o
Media Encoder. Este programa permite converter um ou vrios ficheiros (batch) para facilitar o
processo de converso.

Adicionar um ficheiro de vdeo ao Media Encoder

1. Abrir o programa Adobe Media Encoder.

IMAGEM PROGRAMA COM (QUEUE, ENCODING PANEL, PRESET BROWSER, WATCH
FOLDERS)
2. Escolher Arquivo | Adicionar origem ou pressiona o boto + no painel Fila.
3. Selecionar o formato do vdeo para F4V (maior qualidade) ou FLV (menor qualidade). A
Adobe recomenda a utilizao do formato H.264 visto ser superior aos anteriores.
4. Nos presets (predefinies) escolher as dimenses para o vdeo.
5. Pressiona no ficheiro Output e salva o ficheiro numa localizao diferente.
6. Pressiona no boto Iniciar no canto superior direito.

No painel Fila podemos selecionar a predefinio do vdeo para acedermos s configuraes

de exportao. Neste painel temos acesso a vrias opes de configurao, corte do tamanho
e corte na durao do vdeo.

A utilizao de Cue Points para cortar a durao do vdeo permite atravs de AS aceder a esses
Cue Points e transformar um vdeo linear numa experiencia interativa. Aprende mais sobre
Cue Points nas referncias do Flash Help.

Abrir um vdeo externo

Depois de converter os vdeos, podemos inserir estes vdeos no projeto atravs de

carregamento externo.

Seleciona o Label (Rtulo) e escolhe File | Import | Import Video.

Selecionamos a origem do arquivo de vdeo com carregamento externo.

Pressionamos avanar e selecionamos a skin (capa) do reprodutor de vdeo.

Controlar a visualizao do vdeo

Vrias opes para controlar o vdeo podem ser acedidas atravs dos parmetros de
componentes.

AutoPlay: Inicia automaticamente o vdeo.

SkinAutoHide: Esconde os controlos do vdeo e aparecem quando passamos o rato por
cima.
Skin: Altera a aparncia do skin.
SkinBackgroundAlpha: Altera a transparncia do skin.
SkinBackgroundColor: Altera a cor do skin.
Source: Altera a fonte do vdeo.

Trabalhar com transparncias de vdeos

As transparncias de vdeo (alfa channels) so suportadas em formato FLV utilizando o codec

On2 VP6. Quando exportamos um vdeo com transparncia do Media Encoder devemos ter a
opo Enconde Alpha Channel selecionada.

Vdeos embebidos no Flash

Embeber os vdeos no projeto apenas possvel com as verses a partir do Flash6. Tem em
ateno que a sincronizao do udio com o vdeo no mantida aps os 120 segundos. O
tamanho mximo da linha do tempo para embeber o vdeo de16000 fotogramas. Outra
desvantagem dos vdeos embebidos o aumento do tamanho do ficheiro.

Devemos ter em ateno o frame rate do vdeo no Media Encoder ser igual ao representado
no ficheiro do Flash.

Retiramos a opo do Exportar udio e do resize vdeo.

A partir daqui apenas temos de importar o vdeo para a linha do tempo.

Utilizando vdeo embebido

conveniente pensar no vdeo embebido como um smbolo com vrios fotogramas idntico a
um smbolo com uma animao. Podemos converter um vdeo embebido para um smbolo de
clipe de filme e depois aplicar efeitos.

Vamos aplicar um fade out no vdeo.

Com o vdeo inserido na linha do tempo, selecionamos e escolhemos criar uma Motion
Tween.
Convertemos o vdeo para um smbolo e com um fotograma-chave no final, alteramos
o alfa channel.

No final podemos exportar o vdeo para vrios formatos e dispositivos utilizando o Adobe
Media Encoder.
8 - Carregar e apresentar contedos externos
Para carregar ficheiros externos utilizamos os objetos de AS chamados ProLoader e o
URLRequest.

1. Abre o painel de aes e escreve as seguintes linhas:

Import fl.display.ProLoader;

Var myProLoader:ProLoader=new ProLoader();

Este primeiro cdigo importa o cdigo necessrio para a classe ProLoader e depois cria um
novo objeto com o nome de myProLoader.

2. Na prxima linha escrevemos o seguinte:

Page1_mc.addEventListener(MouseEvent.CLICK, page1content);

Function page1content(e:MouseEvent):void {

Var myURL:URLRequest=new URLRequest(page1.swf);

myProLoader.load(myURL);

addChild(myProLoader);

Foi criado um listener que deteta o evento de clique no rato no objeto chamado de page1_mc.
Em resposta ao clique, o programa executa a funo chamada de page1content. Esta funo
cria um objeto URLRequest que referencia o nome do ficheiro que queremos carregar e passa
esse objeto para o mtodo de carregamento do objeto ProLoader. No final, adiciona o objeto
ProLoader no palco para o conseguirmos visualizar.

3. No painel do inspetor de propriedades atribumos o nome de page1_mc.

O cdigo AS referencia o objeto page1_mc e colocamos esse nome no clipe de vdeo
no palco.
4. Copia e cola o event listener e a funo para ficar com 4 listener diferentes para cada
clipe de vdeo no palco. Altera cada um dos seus nomes de instncias no painel do
inspetor de propriedades.

Utilizando o painel Snippets de cdigo

Este painel permite facilitar a introduo de cdigo de forma a poupar esforo e tempo, no
entanto para compreender o cdigo conveniente introduzi-lo manualmente.

1. Escolhe Window | Code Snippets no painel de aes e pressiona o boto no topo

direito para abrir o Code Snippets. Estes cdigos esto organizados por pastas com
descrio da sua funo.
2. Expande a pasta com o nome Load and Unload.
 3. Seleciona o clipe de filme no palco que pretendes carregar a funo.
4. Escolhe o snippet Click to Load/Unload SWF or Image e pressiona no boto Add to
current frame ou simplesmente clica duas vezes no snippet.
O programa adiciona o snippet de cdigo ao fotograma corrente. Se no existe o nome
da instncia atribudo, o programa ir apresentar uma caixa de dilogo para inserir o
nome.
5. Abre o painel da Aes e verifica o cdigo.

O cdigo inclui uma referncia a uma imagem JPG e a funcionalidade toogle que permite ao
utilizador clicar para carregar o SWF e carregar novamente para descarregar o SWG. No
entanto o ficheiro externo SWF ocupa todo o palco e o ficheiro original escondido e
inacessvel para clicar. Utiliza este snippet de cdigo se o layout permitir que o boto ou o clipe
de filem que dispara a funo fiquem visveis no palco.

Posio do contedo carregado

Podemos posicionar o objeto ProLoader onde desejarmos. Podemos definir um novo valor de
X e Y para o objeto ProLoader atravs de AS. Fazemos o seguinte, dentro do painel de aes
introduzimos o nome para o objeto ProLoader seguido de um ponto para a propriedade X ou Y
e depois inserimos o smbolo = e o novo valor.

myProLoader.x = 200;

myProLoader.y = 100;

Remover o contedo externo

Aps o ficheiro externo ser carregado podemos descarrega-lo atravs do comando unload().

1. Seleciona o primeiro fotograma da camada AS e abre o painel de aes.

2. Adiciona as seguintes linhas de cdigo no painel de script:
myProLoader.addEventListener(MouseEvent.CLICK, unloadcontent);

Function unloadcontent(e:MouseEvent):void {

myProLoader.unload();

Este cdigo adiciona um event listener ao objeto ProLoader chamado myProLoader. Quando
pressionamos no objeto ProLoader a funo chamada o unloadcontent. Esta funo apenas
efetua uma ao, remove qualquer contedo carregado do objeto ProLoader.

Para remover definitivamente o objeto ProLoader do palco podemos utilizar o

removeChild(myProLoader).

Se mesmo depois de efetuar o unload o vdeo e udio continuarem, podemos usar o comando
unloadAndStop() para extinguir o SWF e o udio.
Controlar clipes de filme

Para carregar o primeiro vdeo clipe podemos fazer da seguinte forma:

Selecionar o primeiro frame da camada AS e abre o painel actions.

Adiciona o comando s funes unloadcontent para ficar como:

Function unloadcontent(e:MouseEvent):void {

myProloader.unload();

page1_mc.gotoAndPlay(1);

page2_mc.gotoAndPlay(1);

page3_mc.gotoAndPlay(1);

page4_mc.gotoAndPlay(1);

Nesta funo, o que executado quando o utilizador clica no objeto ProLoader, este objeto
removido do palco e a cabea de reproduo move-se para o primeiro fotograma.

Vrios ProLoaders

Podemos ter vrios proloaders dentro do palco onde os ltimos aparecem em frente dos
primeiros. Segue um exemplo:

Import fl.display.ProLoader;

Var myProLoader1:ProLoader= new ProLoader();

Var myProLoader2:ProLoader= new ProLoader();

Var myURL1:URLRequest=new URLRequest(dog.jpg);

Var myURL2:URLRequest=new URLRequest(cat.jpg);

myProLoader1.load(myURL1);

myProLoader2.load(myURL2);

addChild(myProLoader1);

addChild(myProLoader2);

Se pretendes trocar os dois objetos ProLoader, podes fazer de vrias formas. Podemos utilizar
o comando addChildAt() que recebe dois argumentos dentro dos seus parenteses. O primeiro
argumento o objeto que pretendemos inserir e o segundo o ndex na Display List. Podemos
escrever o seguinte argumento para colocar a imagem do cat por cima do dog:
 addChildAt(myProLoader2, 0);

Esta declarao adiciona o objeto myProLoader2 no ndex=0 que aparece no final da Display
List. Se o objeto est na Display List podemos utilizar o comando setChildIndex(myProLoader2,
0);

Outra forma de alterar os nveis dos objetos utilizando o swapChildren(). Indica dois objetos
como argumento e o flash altera a sua ordem no Display List. Por exemplo,
swapChildren(myProLoader1, myProLoader2) altera a sua posio das imagens do dog e cat.

9 UTILIZANDO VARIVEIS PARA CONTROLAR AS

PROPRIEDADES VISUAIS
Vamos adicionar AS para criar interatividade atravs de interao do rato sobre os elementos.
Aprenderemos a criar eventlistener para os eventos do rato.

Compreendendo o ficheiro do projeto

O palco tem de medidas 800x600px e est a branco. A parte de cima est colocada numa
camada com o nome de banner.

Os textos e imagens foram importados para a biblioteca e o contedo convertido para clipes
de filme.

Compondo texto e grficos

Colocamos o cone pequeno da camara e o sumrio da informao no lado esquerdo do palco
enquanto que a informao detalhada ir ser visualizada no centro.

1. Cria uma camada com o nome de Thumbnail.

2. Arrasta o clipe de filme imagem_thumbnail da biblioteca para o palco para aparecer
uma instncia do clipe de filme.
3. No painel inspetor de propriedades, insere a posio da instncia para x=25 e y=115.
4. Cria uma camada com o nome de txt_sumario e arrasta o simbolo txt_sumario da
biblioteca para o palco para aparecer uma instncia do clipe de filme.
5. No painel inspetor de propriedades, insere a posio da instncia para x=25 e y=290.
6. Cria uma nova camada com o nome de txt_detalhes e arrasta o clipe de filme
txt_detalhes da biblioteca para o palco para aparecer uma instncia do clipe de
filme.
7. No painel inspetor de propriedades, insere a posio da instncia para x=225 e y=115.
8. Agora ficamos com quatro camadas, cada uma contendo um clipe de filme.

Criando a mscara para os detalhes da camara

A imagem maior da camara que aparece sobre a mscara ir apenas apresentar uma pequena
parte retangular dessa imagem.

1. Cria uma nova camada com o nome de mascara.

2. Seleciona o ferramenta retngulo e escolhe a cor de preenchimento e nenhuma cor
para os traos.
 3. Cria um retngulo no palco na camada mascara.
4. No painel inspetor de propriedades, modifica o retngulo para 550x450px e posiciona-
o no x=225 e y=115. Este retngulo ser uma poro que revela a imagem maior da
camara.
5. D um duplo clique no cone perto do nome da camada ou seleciona a camada
mascara e escolhe Modify | Timeline | Layer properties. Escolhe o Tipo para Mask e
pressiona OK para transformar a camada numa mscara.
6. Cria uma nova camada com o nome de imagem grande e arrasta-a para baixo da
camada mascara. A imagem grande ir tornar-se numa camada de mscara e
qualquer contedo nesta camada ir ser influenciada pelo retngulo da mscara que
est sobre este.
7. Arrasta o clipe de filme imagem_grande que est na biblioteca para o palco com a
camada imagem grande.
8. No painel do inspetor de propriedades, posiciona a instncia da imagem_grande
para x=225 e y=115 utilizando as mesmas coordenadas que o retngulo da camada
mscara.
9. Bloqueia a mscara e a camada mascarada para verificares os seus efeitos.
10. Se necessrio, reorganiza as camadas para que o texto de detalhes fique posicionado
por baixo da camada mscara.

Propriedades visuais do clipe de filme

Podemos alterar as propriedades visuais do objeto atravs de cdigo para atingir maior
interatividade.

Para alterar a aparncia de uma instncia de um clipe de filme com AS, primeiro colocamos o
nome do objeto seguido de um ponto e escrevendo a propriedade com um sinal de igual e o
seu valor. Por exemplo:

Thumbnail.rotation=45;

Nesta declarao o objeto thumbnail o alvo e a rotao a propriedade com um valor de 45.
Algumas propriedades aceitam valores de graus enquanto outras pixis, strings ou booleanos.

A seguinte lista apresenta as propriedades do clipe de filme com os respetivos tipos de valores
que devemos saber:

Propriedades do clipe de filme

X Posio horizontal em pixis (Number data)
Y Posio vertical em pixis (Number data)
Rotation ngulo em graus, rotao de relgio desde a vertical (Number data)
Alpha Transparncia desde 0 at 1 (Number data)
Width Comprimento em pixis (Number data)
Height Altura em pixis (Number data)
scaleX Percentagem da escala horizontal de 1 a 100% (Number data)
scaleY Percentagem da escala vertical de 1 a 100% (Number data)
Visible Visibilidade onde false=invisvel e true=visvel (Boolena data)
name Nome da instncia (String data)
Nome da instncia do clipe de filme
Antes de alterar a aparncia da instncia do clipe de filme com cdigo, devemos atribuir-lhe
um nome.

1. Desbloqueia a camada mascarada mas continua com o bloqueio na camada mascara

e escolhe a imagem grande no palco.
2. No painel do inspetor de propriedades, coloca o nome da instncia para
grande_imagem.

Imagem grande a ficar visvel

A primeira coisa a fazer esconder a imagem grande da camara quando o projeto aberto. Os
detalhes da camara apenas aparecem quando o utilizador passa o rato sobre o thumbnail.

Para esconder a imagem da camara, alteramos a propriedade visible. Esta propriedade

determina se o objeto aparecer visvel atribuindo um valor de verdadeiro ou falso.

1. Cria uma nova camada com o nome actions.

2. Seleciona o primeiro fotograma e abre o painel Aes para introduzir o seguinte
cdigo:
largeimage.visible=false;

A imagem ir aparecer no programa mas no aparece no ficheiro SWF.

Para alm do clique no rato

Vamos adicionar eventlisteners para os eventos do rato mouseover e mouseolut.

Adicionando event listeners para o mouseover e mouseout

Adiciona o evento mouseover imagem thumbnail para aparecer a imagem grande da camara
e o mouseout para esconder.

1. Seleciona a imagem thumbnail da camara no palco e nas propriedades escreve

thumbnail para o nome da instncia.
2. Seleciona o primeiro fotograma na camada das aes e abre o painel Aes.
3. Na linha seguinte escreve:
Thumbnail.addEventListener(MouseEvent.MOUSE_OVER, showlarge);
MouseEvent.MOUSE_OVER a palavra para o evento mouseover do rato. Quando
este evento detetado, o programa executa a funo chamada showlarge que ainda
no est escrita.
4. Na linha seguinte escreve:
Thumbnail.addEventListener(MouseEvent.MOUSE_OUT, hidelarge);

Aparecendo e escondendo a imagem grande

Agora vamos escrever as funes showlarge e hidelarge.

1. Na linha seguinte escreve:

Function showlarge(e:MouseEvent):void {
Largeimage.visible=true;
 }
2. Na linha seguinte escreve:
Function hidelarge(e:MouseEvent):void {
Largeimage.visible=false;
}

Mapeando o movimento do rato para atribuir mudanas visuais

A imagem aparece mas apenas visualizamos o seu topo esquerdo. A ideia essencial mapear a
interatividade atravs de conjunto de valores da posio do rato.

Para este projeto, primeiro devemos identificar a posio do cursor do rato sobre o thumbnail.
Utilizamos as propriedades mouseX e mouseY para receber a posio do eixo do x e do y do
cursor do rato.

Depois de termos estas posies, fazemos o clculo que traduza os valores para a posio da
imagem. Pra efetuar estes clculos, conveniente utilizar variveis para guardar a informao.

Utilizando variveis para guardar a informao

Variveis so objetos criados para ajudar a guardar, modificar e testar informao. Uma
varivel simplesmente um contentor que contm um nome e est onde colocamos esse tipo
de informao.

Criando variveis
Para criar ou declarar uma varivel, utilizamos a palavra reservada var. Vamos utilizar
variveis para guardar a informao sobre a posio do rato e da imagem grande no palco.

1. Seleciona o primeiro fotograma da camada actions e abre o painel Aes.

2. Adiciona o seguinte cdigo nas linhas iniciais, indicando qual o tipo de contedo que a
varivel ir conter:
Var xpos:Number
Var ypos:Number

Os principais tipos de contedos que a varivel pode conter so do tipo Number, String e
Boolean.

Atribuindo um valor varivel

Utilizamos o sinal de igual = para atribuir um valor a uma varivel. Desta forma, utilizamos a
xpos e ypos para guardar a informao sobre a posio do rato sobre a imagem thumbnail.

Recorda que a posio do rato encontra-se nas propriedades mouseX e mouseY e para
capturar a posio recente devemos utilizar o evento MOUSE_MOVE para detetar o
movimento do rato.

1. Aps os outros eventlisteners, introduz o seguinte cdigo:

Thumbnail.addEventListener(MouseEvent.MOUSE_MOVE, showbigger);
 Esta declarao verifica qualquer movimento no rato sobre a imagem thumbnail e
despoleta a funo chamada de showbigger.

2. Escreve o cdigo para a funo showbigger.

Function showbigger(e:MouseEvent):void{
xpos=(mouseX-thumbnail.x)/thumbnail.width;
ypos=(mouseY-thumbnail.y)/thumbnail.height;
}
Esta funo coloca a informao das propriedades do mouseX e mouseY para a
varivel xpos e ypos para colocar a posio relativa da imagem do thumbnail.

Verificando variveis no painel Output

A declarao trace() utilizada para enviar informao para o painel Output quando testamos
o filme.

Dentro da funo showbigger, adiciona a declarao trace() para enviar uma mensagem para o
painel Output.

Trace(xpos,ypos);

Enquanto movimentamos o rato os valores da localizao do rato iram aparecer no Output.

Criar mais variveis para a posio da imagem grande

Vamos utilizar a informao dentro das variveis xpos e ypos para posicionar a imagem grande
proporcionalmente sobre a mscara.

A prxima tarefa criar variveis para indicar a posio da imagem grande.

1. Selecionar a forma do retngulo da mscara e transformar num smbolo.

2. Nomeia o smbolo e escolhe clipe de filme. O ponto de registo deste smbolo deve
estar no canto superior esquerdo.
3. No painel de propriedades, adiciona o nome da instncia para mymask.
4. Seleciona o primeiro fotograma da camada Aes e abre o painel das aes.
No incio do cdigo aps declarao das variveis xpos e ypos, introduz o seguinte
cdigo para adicionar 6 variveis com informao numrica:
Var xmax:Number
Var xmin:Number
Var ymax:Number
Var ymin:Number
Var xrange:Number
Var yrange:Number
5. Na prxima linha adiciona o seguinte cdigo:
Xmax = mymask.x;
Xmin = mymask.x+mymask.width-largeimage.width;
Xrange = xmax-xmin;
Este cdigo cria os limites para as posies da imagem grande sobre a mscara. A
primeira linha estabelece o mximo valor para X da imagem grande. A segunda linha
 estabelece o mnimo valor de X para a imagem grande. A varivel xrange apenas
guarda os valores possveis.
6. Adiciona as seguintes linhas de cdigo para os limites da altura da imagem grande
sobre a mscara utilizando a mesma lgica que a anterior:
ymax = mymask.y;
ymin = mymask.y+mymask.height-largeimage.height;
yrange = ymax-ymin;

Alterar a posio da imagem grande

Para a ultima parte desta interatividade, devemos atribuir os novos valores para o X e Y para a
imagem grande alterar a sua posio.

No painel de aes, adiciona o seguinte cdigo para a funo showbigger:

Largeimage.x=mymask.x-(xpos*xrange);

Largeimage.y=mymask.y-(ypos*yrange);

Assim que movimentamos o rato sobre a imagem thumbnail, a imagem grande sobre a
mscara move-se proporcionalmente.

Criar um cursor customizado

Quando movimentamos o cursor sobre a imagem thumbnail ele continua um pointer.
Podemos utilizar um cursor que altere consoante as aes efetuadas.

Fazer com que o cursor siga o rato

O simbolo do cone de magnificao est criado na biblioteca. Vamos atribuir o valor do

mouseX para a propriedade x-property do cone e o valor do mouseY para a propriedade y-
property para posicionar o cone na mesma localizao que o cursor do rato.

1. Criar uma nova camada e atribuir o nome de curstom cone.

2. Arrastar o smbolo clipe de filme chamado cursor da biblioteca para o palco.
3. No painel do inspetor de propriedades atribuir o nome da instncia do cursor.
4. Selecionar o primeiro fotograma da camada aes e escreve no painel das aes
dentro da funo showbigger:
Cursor.x=mouseX;
Cursor.y=mouseY;
Podemos verificar que a imagem segue o movimento do rato. Agora apenas
necessitamos de esconder a imagem quando o cursor sai da imagem thumbnail.
5. No princpio do bloco de cdigo, adiciona a seguinte declarao para esconder a
imagem quando o projeto iniciado:
Cursor.visible=false;
6. Dentro da funo com o nome showlarge, adiciona a seguinte declarao:
Cursor.visible=true;
7. Dentro da funo com o nome hidelarge, adiciona a seguinte declarao:
Cursor.visible=false;
Escondendo e mostrando o cursor do rato

O programa ainda mostra o ponteiro por defeito, por isso precisamos esconde-lo quando
passamos por cima da imagem. Esta visibilidade +e controlada por mouse.hide() e
mouse.show().

1. Dentro da funo showlarge, escrevemos o seguinte cdigo:

Mouse.hide();
2. Dentro da funo hidelarge, escrevemos o seguinte cdigo:
Mouse.show();

Desabilitando o input para o cone

Para prevenir que a imagem do cone interfira com os eventos do rato, podemos atribuir a
propriedade mouseEnabled para falso de forma a desabilitar a receo de interatividade.

No incio do cdigo escrevemos a seguinte declarao:

Cursor.mouseEnabled=false;

O cdigo completo dever ser o seguinte:

Var xmax:Number
Var xmin:Number
Var ymax:Number
Var ymin:Number
Var xrange:Number
Var yrange:Number

Xmax = mymask.x;
Xmin = mymask.x+mymask.width-largeimage.width;
Xrange = xmax-xmin;
ymax = mymask.y;
ymin = mymask.y+mymask.height-largeimage.height;
yrange = ymax-ymin;

largeimage.visible=false;
cursor.visible=false;
cursor.mouseEnabled=false;

thumbnail.addEventListener(MouseEvent.MOUSE_OVER, showlarge);
thumbnail.addEventListener(MouseEvent.MOUSE_OUT, hidelarge);
thumbnail.addEventListener(MouseEvent.MOUSE_MOVE, showbigger);

Function showlarge(e:MouseEvent):void {
 Largeimage.visible=true;
Cursor.visible=true;
Mouse.hide();
}
Function hidelarge(e:MouseEvent):void {
Largeimage.visible=false;
Cursor.visible=false;
Mouse.show();
}
Function showbigger(e:MouseEvent):void {
xpos=(mouseX-thumbnail.x)/thumbnail.width;
ypos=(mouseY-thumbnail.y)/thumbnail.height;
trace(xpo, ypos);

Largeimage.x=mymask.x-(xpos*xrange);
Largeimage.y=mymask.y-(ypos*yrange);

Cursor.x=mouseX;
Cursor.y=mouseY;
}

10 Publicar para HTML5

Uma forma de publicar documentos flash para html5 utilizando o Toolkit para CreateJS. O
seu output ir utilizar as bibliotecas:

EaselJS permite trabalhar com objetos no canvas do browser.

TweenJS biblioteca que disponibiliza as propriedades para a animao.

SoundJS disponibiliza funcionalidades para reproduzir udio no browser.

Exportar para HTML5

O Toolkit para o painel CreateJS, acessvel do menu Window e contm todas as definies
para publicao:

1. Escolhe Window | Toolkit for CreateJS (Shift+F9) para aparecer as definies de

publicao de HTML5.
2. Verifica que a opo Preview e Loop esto ativas.
3. Pressiona Publish ou escolhe Command | Publish for CreateJS.

Compreendendo os ficheiros Output

O flash exporta a animao para HTML e ficheiros JS para serem visualizados no browser.

So criados dois ficheiros, um ficheiro JS que contm o cdigo que efetua a animao e um
ficheiro HTML que apresenta a animao no browser.
Abre o ficheiro HTML num editor de texto e verifica que o ficheiro faz o requerimento das
bibliotecas JS. Este ficheiro inicializado e apresentada a animao no canvas do HTML5.

Abre o ficheiro JS num editor de texto e verifica que o cdigo contm toda a informao para
criar os grficos e movimento.

Inserindo JS

Outra forma opcional de mtodo de trabalho utilizar o Toolkit para CreateJS como forma de
criar outputs animados do flash e depois integrar interatividade adicional com JS.

possvel adicionar JS diretamente na linha do tempo do flash que exportado para os

ficheiros JS publicados.

No painel das aes utilizamos o /* js para comear o bloco de cdigo e o */ para terminar.

Parar a cabea de reproduo

Agora temos o bico do pssaro a abrir e fechar enquanto voa. Vamos adicionar JS linha do
tempo para manter o bico fechado at que o utilizador pressione nele. Vamos atribuir um
nome para a instncia no palco e um comando stop.

1. Seleciona a instncia do clipe de filme do pssaro no palco.

2. No painel do inspetor de propriedades escreve redrobin para o nome da instncia.
3. Faz duplo clique na instncia redrobin para entrar no modo editvel.
4. Seleciona o bico e no painel inspetor de propriedades escreve beak para o nome da
instncia.
5. Adiciona uma nova camada de aes na linha do tempo e seleciona o primeiro
fotograma.
6. Escreve o seguinte cdigo nas aes:
/* js
This.redrobin.beak.stop();
*/
7. Pressiona Publish e escolhe Command | Publish for CreateJS.

Adicionar uma resposta ao clique do rato

Vamos adicionar um event listener para o clique do rato e mover a cabea de reproduo na
linha do tempo para apresentar uma mensagem.

1. Seleciona o primeiro fotograma nas camadas das aes e abre o painel das aes.
2. Adiciona o seguinte cdigo aps o anterior:
This.onClick = function() {
This.redrobin.beak.gotoAndStop(open);
}

Esta declarao resulta no movimento da cabea de reproduo at etiqueta open.

 1. Faz um duplo clique no smbolo de clipe de filme do beak dentro da biblioteca para
entrares no modo editvel.
2. Insere uma nova camada e nomei-a de labels.
3. Insere um fotograma-chave (F6) no fotograma 10 e no painel do inspetor de
propriedades escreve open como uma etiqueta.
4. Insere uma nova camada e atribui o nome de message.
5. Insere um fotograma-chave no fotograma 10 e arrasta o smbolo message da
biblioteca para o palco.
6. Pressiona Publish e escolhe Command | Publish for CreateJS.

AS e JS

Como o JS est inserido na linha do tempo dentro de comentrios multilinha, o painel das
aes pode conter AS e JS. O flash ignora o JS quando compila para SWF e ignora o AS quando
exporta o ficheiro para CreateJS.

11 Publicar documentos Flash

O primeiro projeto um banner animado para publicar para desktop browser.

/* js

This.redrobin.beak.stop();
This.onClick = function() {
This.redrobin.beak.gotoAndStop(open);
}

*/

Import flash.events.MouseEvent;

Redrobin.beak.stop();

Stage.addEventListener(MouseEvent.CLICK, openmouth);

Function opnemouth(e:MouseEvent):void{

Redrobin.beak.gotoAndStop(open);