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 movese 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:
X
Y
Rotation
Alpha
Width
Height
scaleX
scaleY
Visible
name

Propriedades do clipe de filme

Posio horizontal em pixis (Number data)
Posio vertical em pixis (Number data)
ngulo em graus, rotao de relgio desde a vertical
(Number data)
Transparncia desde 0 at 1 (Number data)
Comprimento em pixis (Number data)
Altura em pixis (Number data)
Percentagem da escala horizontal de 1 a 100% (Number
data)
Percentagem da escala vertical de 1 a 100% (Number data)
Visibilidade onde false=invisvel e true=visvel (Boolena
data)
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
Var
Var
Var
Var
Var

xmax:Number
xmin:Number
ymax:Number
ymin:Number
xrange:Number
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);
}