Tutorial Flash

Introduo ao Flash
Tutorial constitudo por 3 lies para introduzir o flash no desenvolvimento de aplicaes.
Carla Teixeira Lopes

http://www.carlalopes.com
Dezembro de 2006
S U M R I O
INTRODUOAOFLASH ........................................................................................ 6
CRIAODEUMDOCUMENTOFLASH ................................................................... 6
Mudaraspropriedadesdodocumento ...................................................................................................8
Desenharumcrculo......................................................................................................................................8
Criarumsmbolo.......................................................................................................................................... 10
Animarocrculo ........................................................................................................................................... 11
PUBLICAODEUMDOCUMENTOFLASH ........................................................... 12
COLOCAODOSFICHEIROSHTMLESWFNAWEB ............................................. 14
UTILIZAODOPAINELDEFERRAMENTAS(TOOLSPANEL).................................. 20
CRIAODEUMAAPLICAOFLASHPARTEI ................................................... 24
UTILIZAODOTIMELINE.................................................................................... 26
Layers............................................................................................................................................................... 26
FrameseKeyframes.................................................................................................................................... 27
CRIAODEUMAAPLICAOFLASHPARTEII .................................................. 28
UTILIZAODABIBLIOTECA................................................................................. 32
Smbolos.......................................................................................................................................................... 32
Importaodeobjectos.............................................................................................................................. 33
CRIAODEUMAAPLICAOFLASHPARTEIII ................................................. 34
POSICIONAMENTOEALINHAMENTODOSOBJECTOSNOPALCO.......................... 39
Posicionamento ............................................................................................................................................ 39
Alinhamento .................................................................................................................................................. 41
CriaodeumaaplicaoFlashparteIV .......................................................................................... 42
CriaodeumaaplicaoFlashparteV ............................................................................................ 44
INTRODUOAOACTIONSCRIPT ......................................................................... 49
Movimentaoentreframes .................................................................................................................... 49
CRIAODEBOTES ........................................................................................... 51
Criaodeanimaonosbotes............................................................................................................. 56
INSERODEUDIONODOCUMENTOFLASH..................................................... 62
Importaodeudio................................................................................................................................... 62
Associaodeudioaoeventoreleasedeumboto........................................................................ 63
Associaodeudioaestadosdebotes............................................................................................. 68
DRAGANDDROPNOFLASH................................................................................. 72
Lio 1
Introduo
R E S U M O
Esta lio pretende introduzir os alunos ao ambiente da aplicao Flash e criao e

publicao de um documento simples.
Tempo necessrio: 1 hora
Introduo ao Flash
Viso geral do Flash e das suas principais componentes.
Criao de um documento Flash
Comece a utilizar o Flash na criao de um simples documento. Conhea as principais reas
da interface do Flash, mude as propriedades do documento, desenhe um elemento, crie um
smbolo e crie uma simples animao.
Publicao de um documento Flash
Compreenda a utilidade da funcionalidade de publicao existente no Flash e, passo a passo,
publique o documento criado anteriormente.
Colocao dos ficheiros HTML e SWF na Web
Para que o seu trabalho possa ficar disponvel na Web, ainda necessrio colocar os ficheiros
resultantes da publicao num servidor Web. Aprenda como o fazer utilizando o servidor
Web da ESTSP.
A N T E S
D E
C O M E A R
Instalar o Flash 8 Professional no computador. Se no tiver acesso ao programa, pode

descarregar uma verso de teste em http://store1.adobe.com/go/tryflash.
O
Q U E
N E C E S S R I O
Nome de utilizador e palavra passe de acesso conta no servidor Web da ESTSP.

Possuir um navegador com Flash Player instalado no seu computador para poder visualizar o
seu trabalho.
O B J E C T I V O S
Conhecer a interface do Flash
Criar um documento em Flash
Criar um crculo
Criar e entender o conceito de smbolo
Criar uma pequena animao
Publicar um documento em Flash
Colocar um documento Flash disponvel na Web
LICO 1
Introduo ao Flash
O Flash uma ferramenta utilizada para criar apresentaes, animaes, jogos, interfaces,
aplicaes e outros contedos que permitam interaco com o utilizador. As aplicaes
desenvolvidas em Flash podem incluir imagens, som, vdeo e efeitos especiais.
Graas utilizao de imagens vectoriais, os ficheiros Flash ficam com um tamanho reduzido,
pelo que os contedos gerados com esta ferramenta se integram bem num meio como a Web.
As imagens vectoriais necessitam de menos memria e capacidade de armazenamento porque
so representados atravs de frmulas matemticas.
Para criar uma aplicao em Flash trabalha-se num documento Flash que um ficheiro com a
extenso .fla (FLA). Neste documento podem ser criados grficos utilizando as ferramentas
de desenho disponveis e podem ser importados elementos externos. Depois define-se como
e quando necessrio utilizar cada um dos elementos para desenvolver a aplicao desejada.
Um documento Flash tem 4 componentes principais:
Stage onde as imagens, vdeos, botes e outros elementos aparecem na reproduo da

aplicao.
Timeline onde se indica quando que elementos do projecto devem aparecer. Tambm
utilizado para a ordem de sobreposio dos elementos no palco. Os elementos em
nveis mais altos aparecem frente de elementos em nveis mais baixos.
Library onde so listados todos os elementos do documento Flash.
ActionScript cdigo que permite adicionar interactividade aos elementos do

documento. Por exemplo, pode-se adicionar cdigo que faa com que um clique num
boto faa aparecer uma imagem diferente. O Flash possui componentes de ActionScript
j implementados, fceis de incluir no documento Flash.
Depois de concludo o desenvolvimento da aplicao, deve-se proceder sua publicao, que

cria uma verso comprimida do ficheiro com a extenso .swf (SWF). Este ficheiro pode
depois ser executado como uma aplicao isolada ou num navegador com o Flash Player (de
descarregamento gratuito).
Criao de um documento Flash

Atravs dos passos indicados nesta seco ir criar um simples documento Flash.
1.
Abra o Adobe Macromedia Flash 8.
2.
O primeiro ecr que surge uma pgina comum a muitas aplicaes Macromedia
e, se quiser desactiv-la, basta clicar na caixa de seleco Dont show again no
canto inferior esquerdo. Se quiser voltar a reactiv-la, seleccione
Edit>Preferences e clique no tabulador General. Seleccione Show Start
Page e a pgina abaixo ir aparecer cada vez que o Flash arranca.
LICO 1
3.
Seleccione Create New>Flash Document na pgina inicial para abrir a

interface Flash. Se o Flash no apresentar a pgina inicial, seleccionar File > New
do menu para criar um novo documento. Surgir um ecr semelhante a:
Menus
Timeline
Painis
Stage
Tools
Propertyinspector
Como pode verificar a interface dividida em diversas reas:
LICO 1
Main Menu
A barra de menu o centro de controle da interface Flash. Aqui pode manipular

os ficheiros Flash e configurar o ambiente de trabalho.
Stage
Esta a rea em que o utilizador v o filme Flash em aco. Contm todos os

elementos visveis e, por vezes, elementos invisveis.
Timeline
Contm as frames que integram um filme Flash.

Painis
Do acesso a uma vasta gama de ferramentas. Podem ser abertos, fechados,

reorganizados e agrupados.
Tools
Ferramentas de desenho e texto. Quando uma ferramenta seleccionada, o

Property Inspector apresentar as propriedades associadas ferramenta.
Property inspector
Painel que possibilita a modificao de documentos e objectos. sensvel ao

contexto, ou seja, o seu contedo reflecte o elemento seleccionado no momento.
4.
Seleccionar File>Save do menu principal para gravar o documento. Nomeie o

ficheiro de primeiro.fla e grave-o num directrio especfico para este projecto.
Mudar as propriedades do documento

5.
No Property Inspector, o boto Size apresenta o tamanho actual do Stage (550 x

400 pixis). A cor de fundo (background) est definida como branco. Mude a cor
de fundo para #FF00FF.
Desenhar um crculo
6.
Para desenhar um crculo no ecr, comece por seleccionar a ferramenta Oval no

painel Tools.
LICO 1
7.
No Property Inspector, seleccione a opo No Color no seleccionador da cor do

limite (Stroke Color).
8.
Seleccione a cor #0000FF no seleccionador da cor de preenchimento (Fill

Color). Desenhe um crculo no Stage seleccionando a Oval Tool e a tecla Shift e
arrastando o rato no Stage. A utilizao da tecla Shift restringe o desenho a um
crculo.
LICO 1
Criar um smbolo
Pode converter o objecto que acabou de criar num elemento reutilizvel, convertendo-o num
smbolo Flash. Sempre que planear reutilizar um elemento na sua aplicao deve torn-la um
smbolo e inserir instncias deste smbolo sempre que necessrio. Para criar um smbolo:
9.
Seleccione a ferramenta de Seleco no painel Tools.
10. Clique no crculo que est no Stage para o seleccionar.
11. Com o crculo seleccionado, seleccione Modify >Convert to Symbol.

12. Na janela que surge, escreva meu_circulo na caixa de texto do Name.
13. Clique OK. O crculo passa a estar rodeado por um quadrado.
14. O
novo smbolo passa a aparecer no painel Library. Se este painel no estiver

aberto, seleccione Window>Library.
10
LICO 1
Animar o crculo
15. Arraste o crculo para o lado esquerdo da rea do Stage.
16. Clique na Frame 20 do Layer 1 do Timeline.
17. Seleccione
Insert>Timeline>Frame. O Flash adiciona frames at Frame 20,

que continua seleccionada.
18. .Com
a frame 20 seleccionada, seleccione Insert>Timeline>Keyframe.

adicionada uma keyframe Frame 20. Uma keyframe uma frame em que alguma
propriedade de um elemento modificada. Nesta keyframe, ir alterar a posio do
crculo.
11
LICO 1
19. .Com
a frame 20 ainda seleccionada no Timeline, arraste o crculo para o lado

direito da rea do Stage.
20.
Seleccione a frame 1 do Layer 1 no Timeline.
21. No Property Inspector, seleccione Motion na caixa de seleco Tween.
Aparecer uma seta no Layer 1 do Timeline entre as Frames 1 e 20.
Este passo cria uma animao de transio do crculo da posio da frame 1 para
a posio da frame 20.
22. No
Timeline, arraste a cabea de leitura vermelha para trs e para a frente entre a
Frame 1 e a Frame 20 para visualizar a animao.
23. Seleccione Control>Test Movie para testar o documento FLA.

24. Feche a janela Test Movie.
25. Seleccionar File>Save
do menu principal para gravar o documento.
Publicao de um documento Flash

Para os utilizadores poderem interagir com a aplicao que acabou de desenvolver, os
ficheiros com extenso FLA precisam de ser transformados em ficheiros SWF (de
Small Web Format). A estes ficheiros comum chamar-se aplicaes Flash ou filmes
porque originalmente o Flash era para criar animaes web designadas de filmes.
possvel executar um filme em Flash de vrias formas:
12
LICO 1
Num navegador que possua o Flash player, introduzindo o endereo da

pgina HTML que contem embebido o ficheiro SWF.
Pressionando as teclas Control e Enter ou atravs do menu Control > Test

Movie directamente a partir do Flash.
Abrir o ficheiro SWF directamente, num computador que possua o Flash

Player. A ltima verso do Flash Player poder ser descarregada de
http://www.macromedia.com/downloads/.
Publicar o ficheiro FLA como Windows Projector, o que resultar num

ficheiro com a extenso exe que poder ser executado independentemente do
computador ter ou no o Flash Player.
Para ser possvel visualizar o ficheiro SWF atravs do navegador necessrio inseri-lo
numa pgina web. A funcionalidade Publish do Flash gera automaticamente o
ficheiro HTML com as marcas necessrias para a incluso do ficheiro SWF.
Para publicar o ficheiro FLA criado anteriormente, siga os seguintes passos:
1.
Seleccione File > Publish Settings.
2.
Na janela que surge, seleccione o tabulador Formats e verifique que apenas as

opes Flash e HTML esto seleccionadas. Desta forma, o Flash gerar dois
ficheiros, um com extenso HTML e outro com extenso SWF. O ficheiro
HTML utilizado para apresentar o ficheiro SWF num navegador.
13
LICO 1
3.
Ainda na janela Publish Settings, seleccione o tabulador HTML e verifique

que no campo Template est seleccionada a opo Flash Only.
4.
Clique OK..
5.
Seleccione File > Publish. Os ficheiros gerados sero gravados na pasta

onde estava guardado o ficheiro FLA com o mesmo nome que o ficheiro
FLA. Neste caso chamar-se-o primeiro.swf e primeiro.html.
6.
Faa um duplo-clique no ficheiro HTML gerado para o abrir no navegador

(Firefox ou Internet Explorer). Tambm poder abrir previamente o
navegador e depois fazer File > Open no prprio navegador para abrir o
ficheiro HTML gerado.
Colocao dos ficheiros HTML e SWF na Web

Caso pretenda colocar o seu trabalho disponvel na Web, acessvel a qualquer pessoa que
possua uma ligao Internet, ter ainda de colocar os ficheiros HTML e SWF num servidor
web. A ESTSP possui um servidor web que os alunos podem utilizar para alojamento de
pginas web.
Para tornar o seu primeiro trabalho em Flash na Web siga os seguintes passos:
1.
Abra uma janela do Internet Explorer.
14
LICO 1
2.
Na caixa endereo, escreva: ftp://www.estsp.pt.
3.
Introduza o nome de utilizador e palavra passe que lhe foram fornecidos para
o endereo de correio electrnico na janela que lhe ser apresentada.
4.
Depois da autenticao ser-lhe- apresentada a sua rea pessoal no servidor.
15
LICO 1
5.
Dever copiar ambos os ficheiros (primeiro.html e primeiro.swf) para a

pasta web. No apague o ficheiro j existente nesta pasta (index.html).
6.
Para visualizar na Web o documento Flash que colocou no servidor web,

dever agora aceder ao endereo:
http://www.estsp.pt/~nome_de_utilizador/nome_ficheiro_html
em que nome_de_utilizador deve ser substitudo pelo seu nome de utilizador e
nome_ficheiro_html deve ser substitudo pelo nome e extenso do ficheiro
HTML (neste caso primeiro.html). Por exemplo, para o aluno com nome de
utilizador to10000177, o endereo a aceder :
http://www.estsp.pt/~to10000177/primeiro.html
16
LICO 1
7.
Poder agora aceder ao seu trabalho a partir de qualquer computador ligado

Internet.
17
Lio 2
Ambiente de trabalho do
Flash
R E S U M O
Esta lio pretende introduzir os alunos ao ambiente de trabalho da aplicao Flash s suas
principais componentes. Sero aqui descritas as funcionalidades mais relevantes, que sero
simultaneamente aplicadas no incio do desenvolvimento de uma aplicao.
Tempo necessrio: 4 horas
Utilizao do painel de ferramentas (Tools Panel)
Aqui sero apresentadas as ferramentas existentes no painel de ferramentas.
Utilizao do Timeline
introduzido o conceito de Timeline, tal como de layers, frames e keyframes, essenciais no
desenvolvimento de uma aplicao multimdia.
Utilizao da Biblioteca (Library)
Aqui descrita a biblioteca de objectos, o painel da biblioteca que permite fazer a gesto dos
objectos nela existentes. introduzido o conceito de smbolo e so descritos os 3 grandes
tipos de smbolos. tambm explicado o processo de importao de objectos.
Posicionamento e alinhamento dos objectos no Palco
De grande utilidade no posicionamento e alinhamento dos objectos no palco so as rguas,
grelha, guias e o painel de alinhamento. Estas 4 funcionalidades do Flash so descritas nesta
Seco.
A N T E S
D E
C O M E A R

O
Q U E
N E C E S S R I O

Possuir um navegador com Flash Player instalado no seu computador para poder visualizar o
seu trabalho.
18
O B J E C T I V O S
Conhecer a interface do Flash.
Saber utilizar as ferramentas do painel de ferramentas.
Saber utilizar o timeline.
Compreender os conceitos de frame, keyframe e layer.
Compreender a necessidade de smbolos.
Criar smbolos.
Conhecer os vrios tipos de smbolos.
Alinhar objectos no palco e entre si.
Comear a desenvolver os ecrs de uma pequena aplicao.
19
LICO 2
Utilizao do painel de ferramentas (Tools Panel)

O painel de ferramentas contem um nmero de ferramentas utilizadas para criar texto,
desenhos vectoriais e manipular o contedo no palco (stage). Quando seleccionada uma das
ferramentas, as propriedades associadas ferramenta sero apresentadas no Property
Inspector.
As ferramentas podem ser seleccionadas com o rato ou utilizando o teclado. Para saber qual a
tecla associada a cada ferramenta, basta passar o rato por cima da ferramenta e visualizar a
letra que est entre parnteses. Na figura abaixo podemos verificar que a tecla a utilizar para
seleccionar a ferramenta Lasso Tool a tecla da letra L.
As ferramentas podem ser agrupadas em 3 grandes grupos: de seleco, desenho e

transformao. Algumas das ferramentas que sero mais utilizadas so descritas de seguida.
Pretende-se que medida que vai lendo a descrio associada a cada ferramenta, a v
experimentando.
Seleco
Selection Tool
Permite seleccionar objectos inteiros ou grupos de objectos atravs de um clique no

objecto ou atravs do desenho de um rectngulo volta do(s) objecto(s) que se
pretende seleccionar.
o
Subselection Tool
Permite seleccionar partes de objectos atravs de um clique ou atravs do desenho de

um rectngulo volta da seleco pretendida.
o
Lasso Tool
Permite seleccionar partes de objectos atravs de um clique ou atravs do desenho de

uma forma qualquer volta da seleco pretendida.
Independentemente da ferramenta de seleco escolhida, quando um objecto est
seleccionado, aparece um rectngulo volta do objecto e possvel clicar e arrast-lo para
20
LICO 2
outra posio no palco, tal como mudar as suas propriedades (p.ex. cor de preenchimento
(Fill Color) no Property Inspector).
Desenho
Line Tool
T
h
e
Permite desenhar linhas. Com a ferramenta seleccionada dever clicar no Stage (ponto
inicial da linha) e arrastar o rato at ao ponto final da linha.
o
Pen Tool
T
he
i
m
ag
Permite desenhar caminhos curvos e rectilneos. Os caminhos so desenhados,

definindo no palco os pontos de interseco, que depois so interligados por linhas
rectas ou curvas.
Para desenhar caminhos rectilneos, basta clicar no palco para definir o ponto inicial,
depois voltar a clicar para definir o prximo ponto. O Flash automaticamente une os
dois pontos atravs de uma recta. Se desejar interligar mais segmentos de recta, basta
voltar a clicar no palco para definir os prximos pontos. Quando j tiver terminado,
basta fazer um duplo-clique no ltimo ponto. Se o objecto for fechado, o Flash
preenche o objecto com a cor de preenchimento (Fill Color) definida.
Desenhar caminhos curvos um pouco mais complicado. Primeiro necessrio
posicionar o ponteiro do rato no ponto inicial da curva. Depois preciso arrastar o rato
na direco da curva. Ser desenhada uma tangente curva. Depois, dever posicionar
o rato no ponto onde a curva dever terminar e arrastar o rato para a posio contrria
( medida que o vai fazendo o Flash vai desenhando a curva, pelo que poder verificar
se a curva est a ficar como se pretende).
o
Oval Tool
Para desenhar crculos e elipses no palco. Para desenhar crculos, clique na tecla Shift ao
mesmo tempo que desenha o crculo no palco.
o
Text Tool
Permite inserir texto no palco. Quando se clica no palco com esta ferramenta activa, o
Property Inspector altera-se de forma a permitir definir as propriedades do texto como:
tipo de letra (Font), tamanho da letra (Font Size), cor (Fill Color), entre outras.
21
LICO 2
o
Rectangle Tool
Para desenhar quadrados e rectngulos no palco. Para desenhar quadrados, clique na

tecla Shift ao mesmo tempo que desenha o quadrado no palco. Se pretender desenhar
rectngulos com os vrtices arredondados, dever fazer um duplo-clique na ferramenta
e definir o arredondamento.
Para aceder a esta janela de configurao poder utilizar tambm o modificador

disponvel na zona de opes do painel de ferramentas.
Pencil Tool
T
h
e
Permite desenhar linhas e polgonos diferentes de crculos e rectngulos. Repare como

o Flash automaticamente endireita a linha. Este comportamento pode ser controlado
utilizando as opes apresentadas na zona Options do painel de ferramentas.
Aqui possvel optar por um de trs modos de desenho: Straighten (tenta

automaticamente converter o desenho para uma forma geomtrica), Smooth (permite
suavizar as curvas desenhadas) e Ink (para que no seja aplicada nenhuma modificao
ao desenho).
o
Brush Tool
Permite desenhar pinceladas no palco. Atravs das opes existentes na zona de

opes poder definir o tamanho (Brush Size), forma (Brush Shape) e modo (Brush
Mode) da pincelada.
22
LICO 2
Entre os diversos modos existem o Paint Normal (pinta sobre tudo o que est no
palco), Paint Fills (restringe as pinceladas a reas de preenchimento e reas vazias
deixando as linhas inalteradas), Paint Behind (restringe as pinceladas a uma rea vazia
por detrs dos objectos j existentes que ficam inalterados), Paint Selection (restringe
as pinceladas aos objectos seleccionados no momento) e Paint Inside (restringe
parte interior do objecto em que se comear a pincelada).
Transformao
Free Transform Tool
Permite distorcer ou redimensionar um objecto no palco. Dependendo do objecto que

est seleccionado, permite rodar, enviesar, escalar ou distorcer atravs das opes
existentes no painel de ferramentas.
o
Ink Bottle Tool

T
h
e
Permite definir as caractersticas do contorno de um objecto. Atravs do Property

Inspector possvel alterar tambm a cor (Stroke color), altura (Stroke height) e estilo
(Stroke style). Depois de seleccionadas as caractersticas pretendidas, basta clicar no
objecto onde estas se querem aplicar.
o
Paint Bucket Tool

T
h
e
Permite preencher os objectos seleccionados com a cor de preenchimento. Para tal,

necessrio comear por seleccionar a ferramenta Paint Bucket Tool, definir a cor de
preenchimento em
pretende preencher.
no Property Inspector e depois clicar no objecto que se
Pode tambm utilizar os preenchimentos gradientes de cor existentes na janela de

seleco de cores de preenchimento. Experimente clicar em diferentes zonas do
objecto para ver como o Flash muda o ngulo do gradiente consoante o local onde se
clica.
23
LICO 2
o
Gradient Transform Tool
Permite modificar os preenchimentos gradientes de cor. Para a experimentar, comece

por criar um objecto cujo preenchimento seja de cor graduada e s depois clique nesta
ferramenta para modificar o preenchimento.
o
Eraser Tool
T
h
e
Permite apagar parte ou a totalidade de elementos existentes no palco. Possui muitas

das opes da Brush Tool permite apagar tudo (Erase Normal), dentro de
preenchimentos (Erase Fills) ou linhas (Erase Lines), objectos seleccionados (Erase
Selected Fills) e dentro dos objectos onde se comea a apagar (Erase Inside),
deixando os restantes elementos do palco inalterados. Para apagar, basta arrastar o rato
na zona do palco que se pretende apagar.
tambm possvel seleccionar o tamanho da borracha atravs da opo existente na
zona Options do painel de ferramentas. Existe ainda a opo Faucet que permite
apagar tudo que est numa determinada rea com um nico clique.
No se esquea tambm que o Flash possui a funcionalidade de Undo (Edit > Undo), que
permite desfazer o que se fez previamente e voltar verso anterior do documento.
Criao de uma aplicao Flash parte I

Para o desenvolvimento das competncias prticas no Flash, iremos pouco a pouco
desenvolver uma pequena aplicao multimdia. O desenvolvimento desta aplicao
acompanhar os conceitos e funcionalidades descritas ao longo deste tutorial. No se esquea
de ir gravando o seu projecto sempre que possvel.
Iremos comear pela criao de um primeiro ecr da aplicao.
26. Abra o Adobe Macromedia Flash 8.
27. Seleccione
Create New>Flash Document na pgina inicial para abrir a

interface Flash. Se o Flash no apresentar a pgina inicial, seleccionar File > New
do menu para criar um novo documento.
28. Seleccionar
File>Save do menu principal para gravar o documento. Nomeie o

ficheiro de aplicacao.fla e grave-o num directrio especfico para este projecto.
29. No
Property Inspector, o boto Size apresenta o tamanho actual do Stage (550 x

400 pixis). Se no for apresentado este boto no Property Inspector, seleccione a
Selection Tool (
) e clique no palco. O Property Inspector j apresenta as
24
LICO 2
propriedades da aplicao. A cor de fundo (background) est definida como

branco. Mude a cor de fundo para #666600.
30. Atravs
da Text Tool (
), escreva no palco a frase: Jogos de Associao.
No Property Inspector, altere o tipo de letra (Font) para Trebuchet MS, o
tamanho da letra (Font Size) para 32, a cor (Text color) para branco e defina o estilo
de letra como negrito (Bold style).
31. Atravs
da Text Tool (
), escreva no palco a frase: Se estiver pronto para
os desafios que se seguem, clique no boto Iniciar. No Property Inspector,
altere o tipo de letra (Font) para Trebuchet MS, o tamanho da letra (Font Size) para
15, a cor (Text color) para branco e defina o estilo de letra como negrito (Bold style).
32.
Atravs da Rectangle Tool ( ), desenhe no palco um rectngulo com os

vrtices arredondados em 5 pontos de raio. No Property Inspector, defina a cor da
linha como invisvel (
), a cor de fundo como branco, a largura (W de width)
como 90 px e a altura (H de height) como 30 px.
33. Atravs
da Text Tool (
), escreva em cima do rectngulo que desenhou no
passo anterior, a palavra Iniciar. No Property Inspector, altere o tipo de letra
(Font) para Trebuchet MS, o tamanho da letra (Font Size) para 17, a cor (Text color)
para #666600 e defina o estilo de letra como negrito (Bold style).
25
LICO 2
34. Seleccionar
File>Save As do menu principal para gravar o documento com o

nome aplicacao_1.fla.
Utilizao do Timeline
Uma animao uma sequncia de imagens estticas apresentadas em rpida sucesso. Uma
apresentao suficientemente rpida ilude o olho humano e cria a iluso de movimento. Uma
animao em Flash funciona aproximadamente da mesma forma e a sua manipulao feita
atravs do Timeline. Este um dos componentes mais utilizados no ambiente Flash e o local
de organizao e controlo temporal de todos os elementos integrantes da aplicao a
desenvolver.
Est localizado acima do palco e contem layers e frames.

Os layers correspondem s linhas e so camadas que podem conter imagens, texto ou
animaes e que se sobrepem umas s outras.
As frames correspondem s colunas e so os elementos que permitem o controlo temporal da
aplicao. Por omisso, a aplicao executada com a frequncia de 12 frames por segundo. A
caixa rectangular vermelha a cabea de leitura que se pode movimentar para visualizar as
mudanas no palco.
Os 2 botes no canto superior direito do timeline permitem editar a cena ou editar um dos
smbolos existentes na biblioteca.
Layers
Os layers so uma forma de organizao dos elementos. Cada layer pode ser eliminado e
manipulado de forma independente dos outros layers. Um ficheiro FLA acabado de criar
contm um nico layer, mas possvel adicionar tantos layers quanto os desejados (atravs do
boto
que est por baixo da lista de layers). tambm possvel:
mover os layers de posio - basta arrastar o layer para uma posio superior ou inferior
26
LICO 2
renomear (duplo clique em cima do nome do layer)
apagar (clique no layer e arraste para o caixote do lixo que est por baixo da lista de layers
ou clique com o boto direito no layer e escolha a opo Delete Layer)
Para modificar um layer, necessrio activ-lo primeiro, atravs de um clique. Quando o layer
estiver activo aparecer um lpis logo aps o nome do layer. Mal um layer esteja activo
possvel manipular os objectos que nele existam, bem como inserir novos objectos.
Os layers so transparentes por omisso e possvel utilizar os trs botes de controlo em
cada layer para:
alterar a visibilidade,
prender o layer para prevenir alteraes indesejadas
apresentar apenas os limites dos objectos do layer (em vez de os apresentar com o
preenchimento).
Os layers superior tm prioridade em termos de visibilidade em relao aos layers inferiores, o

que significa que se os objectos se sobrepuserem os elementos do layer superior prevalecero
em termos de visibilidade.
uma boa prtica colocar cada objecto numa layer diferente de modo a facilitar a
manipulao e edio dos objectos existentes em dada frame.
Frames e Keyframes
Cada layer composto de uma ou mais frames. Existem dois tipos de frames, as
normais e as keyframes. Uma keyframe uma frame em que ocorre uma mudana na
animao (p.ex. alterao da posio de um elemento lembra-se da alterao da
posio do crculo na lio 1?). Deve-se inserir uma keyframe sempre que se quer
iniciar ou terminar uma mudana. Deve-se pensar nas frames como os limites das
mudanas.
possvel distinguir as frames das keyframes no Timeline atravs da bola preta que aparece no
fundo de cada keyfraime.
27
LICO 2
As keyframes so adicionadas atravs de Insert > Timeline > Keyframe ou clicando com o
boto direito na frame onde se pretende inserir a keyframe e escolhendo a opo Insert
Keyframe. As frames que seguem a keyframe sero iguais keyframe.
Tal como acontece com os layers, tambm possvel copiar, mover e apagar frames e keyframes.
tambm possvel converter uma keyframe para uma frame normal atravs da opo Clear
Keyframe acessvel atravs do boto direito do rato.
Criao de uma aplicao Flash parte II

Nesta seco iremos continuar a desenvolver a aplicao que inicimos na parte I. Iremos
agora desenhar o segundo ecr da aplicao.
1.
Se ainda no tiver o Adobe Macromedia Flash 8 aberto, abra-o.
2.
Abra o documento Flash aplicacao_1.fla criado anteriormente.
3.
Clique com o boto direito em cima da frame 5 e seleccione a opo Insert Blank
Keyframe. O timeline e o palco ficaro semelhantes a:
4.
Atravs da Text Tool (

), escreva no palco a frase: Desafio 1. No Property
Inspector, altere o tipo de letra (Font) para Trebuchet MS, o tamanho da letra
(Font Size) para 32, a cor (Text color) para branco e defina o estilo de letra como
negrito (Bold style).
28
LICO 2
5.

), escreva no palco a frase: Clique no elemento do
grupo 2 que faz parte do grupo 1. No Property Inspector, altere o tipo de letra
(Font) para Trebuchet MS, o tamanho da letra (Font Size) para 15, a cor (Text color)
para branco e defina o estilo de letra como negrito (Bold style).
6.
D um duplo clique no nome do layer onde est a trabalhar (Layer 1) e mude-lhe

o nome para Cabecalho.
7.
Atravs do boto Insert Layer ( ), adicione um novo layer. Atravs de um duplo

clique, d-lhe o nome de Conteudo.
8.
Clique com o boto direito em cima da frame 5 desta nova layer e seleccione a
opo Insert Blank Keyframe.
9.
Desenhe um rectngulo branco no ecr com 450 px de largura e 300 px de altura.

Este rectngulo deve ter o vrtice inferior esquerdo alinhado com o vrtice
inferior esquerdo do ecr. No deve ter os vrtices arredondados.
10. Posicione-se
na frame 1 e garanta que est a visualizar um ecr semelhante ao que

que desenvolveu na primeira parte deste tutorial.
29
LICO 2
11. Volte a posicionar-se na frame 5.

12. Atravs do boto Insert Layer (
), adicione um novo layer. Atravs de um duplo

clique, d-lhe o nome de Grupo1. Clique com o boto direito em cima da frame 5
desta nova layer e seleccione a opo Insert Blank Keyframe.
13. .Desenhe um rectngulo no palco com os limites de cor #666600 e o interior sem
cor. A espessura da linha (Stroke height) deve ser de 3 px.
14. .Atravs
da ferramenta de seleco (
), seleccione as 4 arestas do rectngulo
que acabou de desenhar. Depois de seleccionar a primeira, seleccione as restantes
utilizando a tecla Shift enquanto pressiona nas restantes arestas. Esta tecla
permite adicionar um objecto seleco (se no for utilizada a seleco anterior
eliminada, dando lugar nova seleco). No menu principal seleccione a opo
Modify>Group. Esta operao permitiu agrupar as 4 linhas num nico elemento
para que as operaes a efectuar ao rectngulo sejam feitas de forma agregada a
todas as arestas.
15. Atravs da ferramenta de seleco (
), clique numa aresta do rectngulo para

seleccionar a totalidade do rectngulo. No Property Inspector, altere as
dimenses do rectngulo para 350 px de largura e 100 px de altura.
30
LICO 2
16. Desenhe
um rectngulo no palco com os limites sem cor e o interior de cor

#666600 com 70 px de largura e 20 px de altura.
17. Posicione-o alinhado com o canto superior esquerdo do rectngulo que desenhou
no passo 13. Verifique a figura abaixo. Se necessitar pode fazer zoom in na zona
onde feito o alinhamento. Para tal, seleccione a opo View>Zoom In no
menu principal.
18. De
forma semelhante ao que fez no passo 14, seleccione o rectngulo que

desenhou no passo 13 e o rectngulo que desenhou no passo 6 e agrupe-os
(Modify>Group).
19. Atravs
da Text Tool (
), escreva por cima do rectngulo que desenhou no
passo 16 a frase: Grupo 1. No Property Inspector, altere o tipo de letra (Font)
para Trebuchet MS, o tamanho da letra (Font Size) para 14, a cor (Text color) para
branco e defina o estilo de letra como negrito (Bold style).

clique, d-lhe o nome de Elemento1. Clique com o boto direito em cima da
frame 5 desta nova layer e seleccione a opo Insert Blank Keyframe.
21. Desenhe um quadrado no palco com 60 px de largura e 60 px de altura. Utilize a
tecla Shift enquanto arrasta o rato a desenhar para garantir que o objecto final
31
LICO 2
um quadrado e no um rectngulo. Os limites no devem ter cor e o interior deve

ser da cor #D5D7E2.
22. Seleccionar

Utilizao da biblioteca
A biblioteca (Library panel) o local onde so armazenados os smbolos criados no Flash, tal
como ficheiros importados como imagens, sons e vdeos. Neste painel possvel organizar os
diversos itens em pastas, ver quantas vezes um objecto utilizado no documento, organizar
os elementos de acordo com o seu tipo, ver a data de edio do smbolo, o seu nome e tipo.
As bibliotecas podem ser partilhadas entre diferentes aplicaes Flash. No Flash existem
tambm algumas bibliotecas pr-construdas que contm smbolos utilizados frequentemente.
Smbolos
Smbolos so os blocos de construo das aplicaes Flash. So objectos que podem ser
reutilizados em vrios pontos da aplicao. Sempre que um smbolo est no palco designa-se
por instncia, que no mais do que uma cpia do objecto original que est armazenado na
biblioteca. A manipulao de uma instncia independente do objecto original e das outras
instncias desse mesmo smbolo. No entanto, as mudanas feitas aos smbolos iro afectar
todas as instncias filhas.
32
LICO 2
A grande vantagem da utilizao de smbolos est relacionada com o tamanho do ficheiro

SWF que no cresce por se estarem a usar cpias de um mesmo smbolo. Por este motivo, os
smbolos devem ser utilizados sempre que um objecto seja utilizado mais do que uma vez
numa determinada aplicao.
Existem 3 tipos de smbolos: graphic, button e movie clip. Os smbolos grficos contm
normalmente uma imagem que possvel de desenhar no palco. Os botes so movie clips
de 4 frames que controlam o aspecto e funcionamento do boto. Os botes permitem a
criao de interactividade com o utilizador. Um movie clip o tipo de smbolo mais
utilizado. uma miniatura de um documento Flash que pode incluir tudo o que um
documento Flash pode ter, inclusive outros smbolos.
Uma forma de verificar se uma imagem um smbolo verificar se existe um pequeno crculo
no meio do objecto quando este est seleccionado.
Importao de objectos
Ao desenvolver uma aplicao em Flash frequente a necessidade de importar objectos que
possam ser utilizados. O Flash possui uma funcionalidade que permite importar vrios tipos
como sons, vdeos e imagens de vrios formatos (PNG, JPEG, entre outros). Para importar
um objecto seleccione File > Import to Library, pesquise o ficheiro que tem o objecto a
importar e seleccione-o.
importante que antes de importar uma imagem para o Flash, diminua ao mximo o
tamanho que os seus ficheiros ocupam. Poder reduzir o tamanho das suas imagens de duas
grandes formas:
se nem toda a rea da imagem relevante, seleccione apenas a rea relevante e guarde essa
rea como uma nova imagem
comprima a imagem (por exemplo para os formatos PNG, JPEG ou GIF). Se utilizar o
Photoshop utilize a funcionalidade Save for Web. Se as imagens forem fotografias dever
utilizar o formato JPEG, se forem imagens com poucas cores e poucas formas dever
utilizar os formatos PNG ou GIF.
Ao no reduzir o tamanho da imagem, o tamanho do ficheiro SWF crescer.
33
LICO 2
Criao de uma aplicao Flash parte III

Nesta seco iremos continuar a desenvolver o segundo ecr da aplicao.
1.
2.
3.
Posicione-se na frame 5 da layer Elemento1. No palco dever aparecer:
4.
Como iremos utilizar vrias vezes o quadrado que crimos no passo 21 da parte
II do tutorial, iremos transform-lo num smbolo. Clique com o boto direito em
cima do quadrado e escolha a opo Convert to symbol.
5.
Na janela que surge d o nome ao smbolo (quadradoazul) e indique o seu tipo

(Graphic).
Na biblioteca ir aparecer um elemento com o nome que acabmos de dar ao

smbolo.
34
LICO 2
6.

), escreva por cima do quadrado qe acabou de
transformar em smbolo a letra minscula u. No Property Inspector, altere o tipo
de letra (Font) para Trebuchet MS, o tamanho da letra (Font Size) para 73, a cor
(Text color) para #666600 e defina o estilo de letra como negrito (Bold style).
7.
Seleccione o quadrado e a letra que escreveu no passo anterior e agrupe-os num

nico elemento (Modify>Group).
8.
Atravs do boto Insert Layer ( ), adicione um novo layer. Atravs de um duplo

frame 5 deste novo layer e seleccione a opo Insert Blank Keyframe.
9.
Vamos criar um segundo elemento que vai integrar o Grupo 1. Como vamos
necessitar de um quadrado azul semelhante ao que utilizmos para a criao da
primeira imagem, vamos inserir uma instncia do smbolo que crimos nos
passos 4 e 5. Arraste o smbolo que est na biblioteca para o palco.
automaticamente criada uma instncia do smbolo.
10.

), escreva por cima do quadrado que acabou de
transformar em smbolo a letra minscula e. No Property Inspector, altere o tipo
de letra (Font) para Trebuchet MS, o tamanho da letra (Font Size) para 73, a cor
(Text color) para #666600 e defina o estilo de letra como negrito (Bold style).
35
LICO 2
11. Seleccione
o quadrado e a letra que escreveu no passo anterior e agrupe-os num

nico elemento (Modify>Group).

13. Para
criar o terceiro e ltimo elemento do Grupo 1, ir repetir os passos 9, 10 e

11 e criar uma imagem com um ?. O tamanho da letra deve ser 65 e no 73 como
no passo 10. Visualize o resultado final na imagem seguinte.
14. .Atravs
do boto Insert Layer ( ), adicione um novo layer. Atravs de um

duplo clique, d-lhe o nome de Grupo2. Clique com o boto direito em cima da
36
LICO 2
15. No
passo 19 da parte II deste tutorial tinha acabado de criar a caixa que envolve
os elementos do grupo 1. Como vamos necessitar de utilizar essa mesma caixa,
vamos torn-la num smbolo. Clique com o boto direito em cima da caixa e
seleccione a opo Convert to Symbol. Este smbolo deve-se chamar
caixagrupo e ser do tipo Graphic.
Se com a converso a frase Grupo 1 desaparecer, basta clicar com o boto direito na
caixa e seleccionar a opo Arrange>Send Backward.
16. Arraste
o smbolo caixagrupo que est na biblioteca para o palco.

automaticamente criada uma instncia do smbolo.
17. Copie
a caixa de texto que tem escrito Grupo 1 e volte a colar. Altere o seu
contedo para Grupo 2 e posicione-a de forma semelhante ao que fez para o
Grupo 1.
18. De forma semelhante ao que fez para os elementos do Grupo 1 (passos 8, 9, 10 e
11) ir criar 3 elementos para o Grupo 2 com as letras: c, a e b. Os novos layers

devem chamar-se Elemento4, Elemento5 e Elemento6.
37
LICO 2

clique, d-lhe o nome de Navegacao. Clique com o boto direito em cima da
20. Como
vamos necessitar de utilizar um boto com uma imagem semelhante ao

rectngulo Iniciar que desenhamos na primeira frame da aplicao, iremos tornar
esse rectngulo um smbolo. Posicione-se na frame 1. Clique com o boto direito
do rato no rectngulo branco e escolha a opo Convert to Symbol. Este
smbolo ser do tipo Graphic e chamar-se- rectangulobotao.
21.
Volte a posicionar-se na frame 5 do layer Navegacao.
22. Arraste
do ecr.
por duas vezes o smbolo rectangulobotao para o canto inferior direito
38
LICO 2
23. Atravs
da Text Tool (
), escreva em cima das instncias do rectngulo
branco que inseriu no passo anterior, a palavra Incio e Fim. No Property
Inspector, altere o tipo de letra (Font) para Trebuchet MS, o tamanho da letra
(Font Size) para 17, a cor (Text color) para #666600 e defina o estilo de letra
como negrito (Bold style).
24. Seleccionar

Posicionamento e alinhamento dos objectos no palco

Posicionamento
O Flash possui 3 ferramentas que so teis no posicionamento dos objectos no palco: rguas
(rulers), grelha (grid) e guias (guides). As guias so muito teis no posicionamento preciso dos
objectos.
Para activar as rguas, dever seleccionar View > Rulers.
39
LICO 2
O palco passar de:
a:
Para activar a grelha dever seleccionar View > Grid.

O palco passar de:
a:
40
LICO 2
As guias so linhas horizontais e verticais teis no posicionamento e alinhamento dos

objectos no palco. Para desenhar uma guia horizontal deve clicar na rgua horizontal e
arrastar o rato para baixo. Para desenhar uma guia vertical deve clicar na rgua vertical e
arrastar o rato para a direita. Para o funcionamento das guias necessrio que as rguas
estejam activas. Na figura seguinte possvel visualizar-se duas guias horizontais e uma guia
vertical.
Para mudar a cor das guias seleccionar View > Edit Guides e alterar a cor seleccionada. Para
remover as guias, basta clicar nelas e arrast-las em direco s rguas.
Tambm teis no posicionamento so as coordenadas X e Y de cada objecto que so visveis
na janela Property Inspector:
Alinhamento
Para alm das ferramentas descritas na seco anterior, existe tambm um painel de
alinhamento (Align panel) que permite alinhar objectos entre si ou alinhar objectos com o
palco. Para abrir este painel dever seleccionar Window > Align.
41
LICO 2
Estepainelpermitealinharobjectosseleccionadosdeacordocomumeixoverticale
horizontal.Verticalmentepossvelalinharpelaarestaesquerda,centroouaresta
direitadosobjectosseleccionados.Horizontalmentepossvelalinharpelaaresta
superior,centroouarestainferiordosobjectosseleccionados.Asarestasso
determinadaspelascaixasqueenvolvemcadaobjectoseleccionado.
Tambmpossvelnestepainel,distribuirobjectosparaqueosseuscentrosou
arestasestejamespaadosdeigualdistncia.Existetambmumaopopara
redimensionartodososobjectosseleccionadosparaqueassuasdimensesverticais
ouhorizontaisigualemadomaiorobjecto.tambmpossvelalinharosobjectos
seleccionadosaopalcoeaplicarmaisdoqueumaopodealinhamentoaosobjectos
seleccionados.
Criao de uma aplicao Flash parte IV
Nesta parte do tutorial ir verificar e ajustar o alinhamento dado aos objectos j criados para
os dois primeiros ecrs da aplicao.
1.
2.
3.
Posicione-se na frame 1 do layer Cabecalho.
4.
Agrupe o rectngulo branco e a caixa de texto Iniciar.
5.
Seleccione a caixa de texto Jogos de Associao e no Property Inspector defina a

coordenada x como 100.
6.
Repita o processo do passo 5 para os outros dois elementos existentes nesta frame
(a outra caixa de texto e o grupo que se assemelha a um boto) para que fiquem
todos na coordenada X=100.
7.
Posicione-se na frame 5 de qualquer layer.
42
LICO 2
8.
Para alinhar esquerda as duas caixas de texto existentes no cabealho e as caixas

do Grupo 1 e 2 poder fazer o mesmo que fez no passo 5 e 6 ou poder utilizar o
painel de alinhamento. Para abrir este painel dever seleccionar Window >
Align.
9.
Seleccione todos os elementos que esto nos layers Cabecalho, Grupo1 e

Grupo2, ou seja, as duas caixas de texto do cabealho, as duas caixas verdes que
abrangem os elementos dos grupos e as duas caixas de texto que dizem Grupo 1
e Grupo 2. Poder faz-lo facilmente pressionando o rato no nome de um dos
layers (que automaticamente selecciona todos os objectos nesse layer) e repetindo o
processo para os outros layers enquanto pressiona a tecla Ctrl. Esta tecla permite
adicionar seleco elementos no contguos (a utilizao da tecla tecla Shift
acrescentaria todos os layers entre o primeiro e o segundo layer seleccionados).
10. No
painel de alinhamento seleccione a opo Align left edge. Esta opo ir

alinhar todos os elementos pela aresta mais esquerda.
11. Agrupe o rectngulo branco e a caixa de texto Incio.

12. Agrupe o rectngulo branco e a caixa de texto Fim.
13. Seleccione
os dois agrupamentos que fez no passo 11 e 12 e, no painel de

alinhamento, seleccione a opo Align horizontal center. Esta opo ir alinhar
os dois objectos pela coordenada X mdia entre a aresta mais esquerda dos dois
elementos e a aresta mais direita dos dois elementos. Garanta que ficam ambos
os botes dentro da rea do palco.
43
LICO 2
14. Seleccione
o agrupamento que fez no passo 12 e a caixa verde que abrange os

elementos do grupo 2. No painel de alinhamento seleccione a opo Align
bottom edge. Esta opo ir alinhar os dois objectos pela aresta mais inferior
dos dois elementos.
15. Seleccione a caixa que contm a letra u e a caixa que contm a letra c e escolha a
opo Align horizontal center do painel de alinhamento. Repita o processo para

as letras e e a e para as letras ? e b.
16. Seleccione
o elemento 4, 5 e 6 (caixas com letras c, a e b) e escolha a opo

Distribute left edge. As opes Distribute s funcionam quando se selecciona
3 ou mais elementos e esta opo em particular distribui os elementos de forma a
existir o mesmo espaamento vertical entre eles (nesta caso calculado a partir da
aresta da esquerda).
17. Para
fazer a verificao final dos alinhamentos active as rguas (View>Rulers).

Clicando na rgua vertical arraste uma guia para a direita. Verifique se os
alinhamentos esto bem feitos.
18. Seleccionar

nome aplicacao_4.fla
Criao de uma aplicao Flash parte V

Para praticar o que foi apresentado nesta lio, ir elaborar mais 2 ecrs da aplicao.
1.
2.
3.
Clique com o boto direito na frame 10 do layer Cabecalho e seleccione a opo

Insert Keyframe. Repare que esta opo diferente da utilizada anteriormente
(Insert Blank Keyframe). Com esta opo inserida uma keyframe, mas o
contedo da ltima keyframe permanece. Repita este processo para todos os layers.
44
LICO 2
4.
Tendo o cuidado de estar posicionado na frame 10, altere o contedo de forma a

obter o ecr seguinte. Tenha ateno disposio correcta dos elementos nos
layers (ver indicaes depois da imagem).
O rectngulo com a palavra Prximo deve estar no layer Navegacao e a caixa de texto
existente no rectngulo Razo deve estar inserida no layer Elemento4. A caixa de texto
Soluo deve estar no layer Grupo1 e a caixa de texto Razo deve estar no layer Grupo2.
Os layers Elemento5 e Elemento6 ficam vazios.
5.
Clique com o boto direito na frame 100 do layer Cabecalho e seleccione a opo
Insert Blank Keyframe. Repita este processo para todos os layers.
6.
Posicione-se na frame 1 e seleccione todos os objectos. No menu principal

seleccione a opo Edit>Copy.
7.
Posicione-se na frame 100 do layer Cabecalho e no menu principal seleccione a

opo Edit > Paste in Place. Altere a segunda caixa de texto para conter a
seguinte frase: Obrigado por participar neste desafio. Se desejar voltar a
comear, clique no boto Iniciar. O ecr dever ficar semelhante a:
45
LICO 2
8.
No final deve verificar se o contedo das frames 1, 5, 10 e 100 so iguais a:
9.
Seleccionar File>Save As do menu principal para gravar o documento com o

46
Lio 3
Criao de
interactividade
R E S U M O
No Flash no se est limitado a executar cada frame de forma sequencial. possvel controlar
a execuo das frames e o comportamento de determinados elementos existentes no palco.
Esta lio pretende introduzir os alunos algumas formas de criao de interactividade no
Flash.
Tempo necessrio: 4 horas
Introduo ao ActionScript
Nesta seco feita uma introduo linguagem de programao existente no Flash e
explicada a forma de controlar a execuo de frames no timeline.
Criao de botes
Nesta seco so apresentados os passos que permitem criar botes ou zonas com as quais os
utilizadores podero interagir. tambm descrita a utilizao dos vrios estados associados a
um boto que, entre outros, permitem criar animaes.
Insero de udio no documento Flash
Aqui so apresentadas formas de insero de udio em documentos Flash. descrita a forma
de importao de ficheiros deste tipo e a sua associao a eventos e a estados de botes.
Drag and Drop no Flash
A ltima forma de interactividade abordada neste tutorial a tcnica de Drag and Drop. Aqui
explicada a sua forma de implementao.
A N T E S
D E
C O M E A R

47
Q U E
N E C E S S R I O

Descarregar o conjunto de ficheiros (licao3.zip) que contm ficheiros (gromb.mp3,
sucesso.mp3, a.mp3, comsom.jpg e semsom.jpg) que necessitar de importar para o
documento Flash.
O B J E C T I V O S
Compreender a utilidade do ActionScript.
Escrever simples blocos de instruo em ActionScript.
Compreender simples blocos de instruo em ActionScript.
Criar botes.
Associar aces a botes.
Mudar o aspecto de botes consoante o seu estado.
Importar ficheiros de udio para um documento Flash.
Importar imagens externas para um documento Flash.
Associar udio a eventos num boto.
Associar udio a estados de um boto.
Criar um objecto que possa estar sujeito a Drag and Drop no palco.
Detectar se um objecto foi arrastado para cima de um determinado objecto e, em caso

positivo, actualizar as suas coordenadas.
Detectar se todos os objectos foram deslocados para os locais pretendidos e efectuar a

aco desejada.
48
LICO 3
Introduo ao ActionScript
ActionScript uma linguagem de programao utilizada para adicionar interactividade s
aplicaes Flash. No Flash 8 Professional utilizado o ActionScript 2.0.
Sendo uma linguagem de programao, muito haveria a dizer sobre o ActionScript. No entanto,
tendo em conta o contexto em que este tutorial se insere, sero apenas retratadas as funes
essenciais para a insero de interactividade numa aplicao para o desempenho perceptivocognitivo.
O cdigo ActionScript pode ser adicionado s frames no timeline ou a objectos do palco como
botes e vdeos.
Movimentao entre frames
Apesar de as frames no timeline estarem organizadas de forma sequencial, no necessitam de ser
executadas de forma sequencial.
Aps a concluso da lio 2 deste tutorial, a sua aplicao possui 4 ecrs. Nesta lio iremos
adicionar interactividade movimentao entre frames.
10. Se ainda no tiver o Adobe Macromedia Flash 8 aberto, abra-o.
11. Abra o documento Flash aplicacao_5.fla criado anteriormente.
12. Seleccione Control > Test Movie para ver a execuo sequencial das vrias cenas.
13. Posicione-se na frame 1.
Conforme pode deduzir pelo contedo desta frame, apenas se pretende que a aplicao
passe para a prxima frame (neste caso, a frame 5) quando o utilizador clicar no boto
Iniciar. Para evitarmos que a execuo salte para a prxima frame, iremos adicionar
cdigo actionscript frame 1 para indicar que a execuo deve parar.
14. Atravs
do boto Insert Layer ( ), adicione um novo layer. Atravs de um duplo

clique, d-lhe o nome de ActionScript. Todo o cdigo ActionScript dever estar
neste layer.
49
LICO 3
15. Clique
com o boto direito na frame 1 do layer ActionScript e escolha a opo

Actions. O palco ser substitudo pela janela de Aces (Actions).
Barrade
ferramentas
Painel
de
aces
Painelde
cdigo
Painelde
scripts
Esta janela tambm pode ser aberta atravs do comando Window > Actions. Est dividida
em 4 seces:
16.
painel de cdigo local onde escrito o cdigo ActionScript.
painel de aces um dicionrio de ActionScript. Contm uma srie de livros que

podem ser abertos com um clique. Quando um livro est aberto so apresentadas as suas
funes. Com um duplo clique num deles, este inserido no painel de cdigo.
painel de scripts permite rapidamente visualizar e modificar os outros pedaos de

cdigo existentes na aplicao.
barra de ferramentas contm botes que permitem escolher a verso do ActionScript,

abrir o Assistente de Scripts (Script Assist), etc.
Com um clique no painel de aces abra o livro Global Functions.
17. Com um clique no painel de aces abra o livro Timeline Control.
50
LICO 3
18. Com um duplo clique em stop, insira esta funo no painel de cdigo.
Esta funo far com que a execuo da aplicao pare nesta frame at que outro evento seja
desencadeado.
19. .Feche a janela de Aces atravs de Window>Actions.
20. Seleccione
Control > Test Movie para ver a execuo da aplicao. Agora a

aplicao no passa desta primeira frame.
aplicacao_6.fla.
As do menu principal para gravar o documento com o nome
Criao de botes
Os botes so simplesmente elementos (movie clips com 4 frames) em que os utilizadores podem
clicar para determinada aco ser desencadeada. Para tornar um boto interactivo, basta inserir
uma instncia de um smbolo do tipo boto no palco e atribuir aces instncia do boto.
Na Seco anterior j indicamos que a execuo da aplicao deve parar na frame 1 e esperar que
outro evento seja desencadeado e permita que a execuo prossiga. Esse evento ser o clicar do
utilizador no boto Iniciar. Nos prximos passos iremos adicionar interactividade imagem j
existente na frame 1.
1.
2.
3.
Posicione-se numa layer qualquer da frame 1.
51
LICO 3
4.
Se o rectngulo branco e a palavra Iniciar no forem um grupo, dever agrup-los

(Modify > Group).
5.
Clique com o boto direito no agrupamento (rectngulo branco + Iniciar) e

seleccione a opo Convert to Symbol. Na janela que surge defina o nome do
boto (bt_iniciar) e o tipo (Button). Na biblioteca ir surgir o novo smbolo.
6.
Clique com o boto direito do rato no boto Iniciar e seleccione a opo Actions. O
palco ser substitudo pela janela de Aces (Actions).
7.
O cdigo a adicionar permitir definir o comportamento do boto. Com um clique

no painel de aces abra o livro Global Functions.
8.
Com um clique no painel de aces abra o livro Movie Clip Control.
52
LICO 3
9.
Com um duplo clique em on, insira esta funo no painel de cdigo. No painel de
cdigo aparece uma caixa de seleco conforme figura abaixo.
10. Nesta
caixa de seleco deve escolher o evento que pretende detectar no boto, ou

seja, o evento que ao acontecer desencadear uma aco (p.ex. mudana de frame).
Seleccione release. Esta escolha significa que a aco ser desencadeada quando o
utilizador est a largar (release) o boto do rato, aps ter pressionado o boto.
11. Entre as duas chavetas necessrio indicar a aco a desencadear quando acontece o
libertar do boto do rato, que neste caso corresponde a ir para a frame 5. Coloque o
rato aps a primeira chaveta e carregue no enter. Clique na segunda linha.
12. Com um clique no painel de aces abra o livro Timeline Control.
53
LICO 3
13. Com um duplo clique em gotoAndStop, insira esta funo no painel de cdigo.
14. Esta
uma funo que pode ter um ou dois argumentos. Vamos utilizar apenas um
argumento que o nmero da frame para onde queremos que a aplicao v. Quando
o boto pressionado queremos que a aplicao v para o primeiro desafio, que est
na frame 5. Desta forma, iremos escrever o nmero 5 como argumento da funo
gotoAndStop.

23. Seleccione
Control > Test Movie para ver a execuo da aplicao. Experimente

pressionar o boto Iniciar.
aplicacao_7.fla.
25. .Posicione-se na frame 5.
Neste ecr existem 5 elementos que podem ser pressionados: a letra c, letra a, letra b, o
rectngulo Incio e o rectngulo Fim.
26. .
Se o quadrado azul e a letra a no forem um grupo, dever agrup-los (Modify >

Group).
27. Clique com o boto direito no agrupamento e seleccione a opo Convert to Symbol.
Na janela que surge defina o nome do boto (bt_a) e o tipo (Button).
28. Clique
com o boto direito do rato no boto com a letra a e seleccione a opo

Actions. O palco ser substitudo pela janela de Aces (Actions).
54
LICO 3
29. O
cdigo a adicionar permitir definir o comportamento do boto. Com um clique

no painel de aces abra o livro Global Functions e depois o livro Movie Clip
Control. Com um duplo clique em on, insira esta funo no painel de cdigo. Nesta
caixa de seleco escolha release. Esta escolha significa que a aco ser
desencadeada quando o utilizador est a largar (release) o boto do rato, aps ter
pressionado o boto.
30. Aps
ter colocado o rato entre na linha intermdia s duas chavetas, abra o livro
Timeline Control e com um duplo clique em gotoAndStop, insira esta funo no
painel de cdigo.
31. Quando
o utilizador pressiona a letra a, consegue completar com sucesso o desafio.

Desta forma, dever passar para a frame 10. Tal como fizemos no passo 14
poderamos indicar a frame 10 como argumento da funo gotoAndStop. No
entanto, como pretendemos que este cdigo possa ser reutilizado, podemos utilizar
uma varivel que contm o nmero da frame actual. Essa varivel chama-se
_currentFrame. O argumento da funo gotoAndStop dever ser
_currentFrame+5. Desta forma, ser possvel reutilizar este cdigo noutros botes
cuja aco seja avanar 5 frames (se no utilizssemos uma varivel em cada boto
teramos de fazer os clculos manualmente e alterar o cdigo).

33. Seleccione

aplicacao_8.fla.
35. Volte
a repetir o processo dos passos 18 a 24 para os outros 4 elementos que

necessitam de interactividade. Na letra c e b, a funo on (release) no tem qualquer
cdigo dentro das chavetas, j que o utilizador pressiona a opo errada e como tal
55
LICO 3
deve ficar na mesma frame para voltar a tentar. No boto Incio, o utilizador deve ser
direccionado para a frame 1 e no boto Fim deve ser direccionado para a frame 100.
36. Seleccione

aplicacao_9.fla.
O Flash tem tambm uma biblioteca de botes que pode utilizar no seu documento Flash.
Para visualizar esta biblioteca, depois de terminar esta lio, seleccione Window > Common
Libraries e seleccione a biblioteca dos botes.
Criao de animao nos botes
Quando se cria um smbolo do tipo boto, o Flash cria uma timeline para o boto com quatro
frames. Cada uma tem uma funo especfica:
A primeira frame corresponde ao estado Up, ou seja, o boto quando o ponteiro do rato no
est sobre ele.
A segunda frame corresponde ao estado Over, ou seja, o boto quando o ponteiro do rato
est sobre ele.
A terceira frame corresponde ao estado Down, ou seja, o boto quando est a ser
pressionado pelo rato.
A quarta frame corresponde ao estado Hit, ou seja, define a rea activa do boto, rea que
responde ao pressionar do rato. Esta rea invisvel.
O timeline dos botes no executado da mesma forma que o timeline da aplicao Flash,
simplesmente reage ao movimento e aces do ponteiro do rato, saltando para as frames
apropriadas.
Nesta seco do tutorial iremos alterar o estado Over dos botes criados anteriormente, para criar
a sensao de se estar a pressionar um boto.
1.
2.
3.
Posicione-se na frame 5.
56
LICO 3
4.
Antes de editar os vrios estados dos botes, iremos criar um novo smbolo com base
no smbolo criado anteriormente chamado quadradoazul. Na biblioteca carregue
com o boto direito do rato no smbolo quadradoazul (que deve ser do tipo Graphic
conforme criao no passo 5 da parte III da Lio 2) e seleccione a opo Duplicate.
Nomeie o novo smbolo de quadradoverde.
5.
Na biblioteca, clique com o boto direito em cima do smbolo quadradoverde e

seleccione a opo Edit. O palco substitudo pelo espao de edio deste smbolo.
Repare durante a edio do smbolo, o timeline apresenta aps o Scene 1 o nome do
smbolo em edio.
6.
Altere a cor do quadrado para #666600.
7.
Para terminar a edio do smbolo quadradoverde, clique em Scene 1 existente no

Timeline.
8.
D um duplo clique no boto c. O timeline da aplicao substitudo pelo timeline

do boto e so apresentados os quatro estados do boto.
9.
Clique com o boto direito do rato na frame do estado Over e seleccione a opo
Insert Keyframe. O contedo da frame Up ser copiado para a frame Over.
10. .Seleccione
o boto e no menu principal escolha a opo Modify > Ungroup. Esta

operao permitir desagrupar o texto do quadrado, para os podermos alterar
separadamente.
57
LICO 3
11. Seleccione a caixa de texto e altere a cor do texto para #D5D7E2.
12. Clique
com o boto direito no quadrado de forma a seleccion-lo e escolha a opo

Swap Symbol. Escolha ento o smbolo quadradoverde.
13. Para terminar a edio do boto, clique em Scene 1 existente no Timeline.

14. Seleccione Control > Test Movie para ver a execuo da aplicao. Passe o rato por
cima do boto c.
aplicacao_10.fla.
16. Repita os passos 8 a 13 para o boto a.

cima do boto c.
aplicacao_11.fla.
19. Caso
ainda no tenha criado o boto, a insero de um boto com mais do que um

estado mais simples do que criar o boto e executar os passos 8 a 13. Para
simularmos esta situao, iremos apagar o boto b e cri-lo de raiz tendo em conta
que queremos que o estado Over seja diferente do estado Up. Seleccione o boto b e
apague-o.
20. Apague da biblioteca o smbolo bt_b.

21. Para criar um boto de raiz, seleccione Insert>New Symbol. Este novo smbolo deve
ser do tipo Button e deve chamar-se bt_b. automaticamente aberto o timeline

associado ao boto e o palco substitudo por uma rea com a cor de fundo do palco
para edio do boto.
58
LICO 3
22. Seleccione
a frame do estado Up. Insira uma instncia do smbolo quadradoazul,

arrastando-o desde a biblioteca at ao palco. Coloque-a na posio X=0, Y=0.
23. Atravs
da Text Tool (
), escreva por cima do quadrado que acabou de
transformar em smbolo a letra minscula b. No Property Inspector, altere o tipo de
letra (Font) para Trebuchet MS, o tamanho da letra (Font Size) para 73, a cor (Text color)
para #666600 e defina o estilo de letra como negrito (Bold style). Posicione a letra na
posio X=7, Y=-11.
59
LICO 3
24. Clique
com o boto direito na frame do estado Over e escolha a opo Insert

Kkeyframe. O contedo da frame do estado Up copiado para a frame do estado
Over.
25. Seleccione a caixa de texto e altere a cor do texto para #D5D7E2.
60
LICO 3
26. Clique
com o boto direito no quadrado de forma a seleccion-lo e escolha a opo

Swap Symbol. Escolha ento o smbolo quadradoverde.
61
LICO 3
28. Insira uma instncia do smbolo bt_b no palco. Tenha o cuidado de a inserir na frame
5 e no layer Elemento6. Alinhe-a horizontalmente com os botes c e a e

verticalmente com a imagem ?.
29. Como
criamos este boto de raz, necessrio definir as aces que lhe esto
associadas de forma similar ao que foi feito no passo 20 da seco anterior designada
Criao de botes (a funo on (release) fica sem cdigo dentro das chavetas porque
a opo b uma opo errada).
30. Depois
de ter inserido as aces respectivas, seleccione Control > Test Movie para
ver a execuo da aplicao.
aplicacao_12.fla.
Insero de udio no documento Flash

O Flash 8 possui vrias formas de integrao de udio. possvel inserir udio que toca
continuamente, independentemente do timeline, ou inserir udio sincronizado com a animao.
Neste tutorial vamos descrever a forma de importao de udio para o Flash e a associao de
udio ao documento Flash e a botes.
Importao de udio
Para a utilizao de udio, necessrio importar previamente os ficheiros respectivos para a
bibliof. Sem o QuickTime instalado no computador possvel importar os seguintes formatos de
ficheiros de udio para o Flash: WAV (s Windows), AIFF (s Macintosh) e MP3 (Windows e
Macintosh).
62
LICO 3
O Flash armazena os objectos udio na biblioteca juntamente com os outros smbolos. Tal como
os outros smbolos, basta uma cpia do ficheiro de udio para o usar vrias vezes no documento.
Os ficheiros de udio podem exigir grande espao em disco e memria do computador. Por este
motivo prefervel utilizar ficheiros MP3, por ser um formato comprimido e portanto mais
pequeno que o formato WAV e AIFF.
Existem muitos ficheiros MP3 disponveis na Web e poder fazer os seus prprios ficheiros MP3
utilizando a aplicao Audacity (http://audacity.sourceforge.net/).
Associao de udio ao evento release de um boto
Na aplicao que tem vindo a ser desenvolvida, podemos tirar partido do som para avisar o
utilizador se acertou ou falhou na sua escolha em cada desafio. Nesta parte do tutorial iremos
associar udio ao evento release de um boto, ou seja, desencadear a execuo do udio sempre
que o utilizador acabou de clicar no boto (largou o boto do rato).
Esta associao pode ser feita atravs dos designados Behaviors ou atravs da escrita directa do
cdigo em ActionScript. Iremos de seguida abordar estas duas formas de associao de udio. Os
passos iniciais so necessrios em qualquer um dos mtodos pelo que sero indicados desde j.
1.
2.
Abra o documento Flash aplicacao_12.fla.
3.
Para importar o ficheiro de udio seleccione File > Import > Import to Library.
atravs desta funcionalidade que possvel importar imagens para a biblioteca e
utiliz-las quando necessrio.
4.
Na janela que surge, navegue at ao directrio que contm o ficheiro udio. Neste
caso dever importar o ficheiro gromb.mp3 (disponibilizado para esta sesso atravs
do Moodle). A biblioteca passa a integrar este ficheiro udio.
63
LICO 3
5.
Para podermos utilizar esse ficheiro em cdigo ActionScript necessitamos de lhe

atribuir um linkage ID, ou seja, um identificador. Para o fazer dever clicar com o
boto direito do rato no ficheiro udio que est na biblioteca e seleccionar Linkage.
Surge-lhe a seguinte janela.
6.
Dever seleccionar a opo Export for ActionScript.
7.
Na caixa Identifier, que entretanto ficou activa, aparece o nome do ficheiro com a
extenso. Deixe apenas ficar o nome do ficheiro (sem o ponto e a extenso), ou seja,
gromb. importante que tenha o cuidado de no utilizar pontos para poder tirar
partido dos behaviors do Flash. Os behaviors so comportamentos pr-definidos,
desenvolvidos em ActionScript, que podem ser aplicados s instncias sem o esforo
da programao em ActionScript.
64
LICO 3
8.
Clique em OK.
Associao atravs de Behaviors
Behaviors so componentes de cdigo ActionScript j escritos que podem ser associados a um

documento Flash. Estes componentes so teis para os iniciados no Flash e ActionScript.
9.
Seleccione o boto c.
10. Seleccione Window > Behaviors.
11. Clique no boto +.
12. Seleccione Sound > Load Sound from Library.
65
LICO 3
13. Na
janela que surge, escreva o nome do linkage ID que atribuiu anteriormente

(gromb). Escreva este mesmo nome na segunda caixa de texto.
14. Seleccione

clicar na tecla c.
aplicacao_13.fla.
Associao atravs de programao directa em ActionScript
A associao atravs de Behaviors foi uma forma de associar cdigo ActionScript ao boto sem o
estar a escrever. Para utilizadores um pouco mais experientes em ActionScript possvel escrever
o cdigo directamente em ActionScript. Para demonstrar este tipo de associao, iremos utiliz-la
na associao do mesmo udio ao boto b.
16. Clique com o boto direito no boto b e seleccione a opo Actions.
66
LICO 3
17. Dentro da funo on(release) escreva o seguinte cdigo:

som = new Sound(this);
som.attachSound("gromb");
som.start();
Este cdigo cria uma varivel chamada som, associa-a ao ficheiro de udio existente
na biblioteca e d incio execuo desse ficheiro de udio.
18. Seleccione
Control > Test Movie para ver a execuo da aplicao.

Experimente clicar na tecla b.
19. Seleccionar

20. Utilizando o mtodo que prefere (passos 1 a 13 ou passos 1 a 8 + passos 16 a 17),
associe o ficheiro de udio sucesso.mp3 ao boto a.
21. Seleccione Control > Test Movie para ver a execuo da aplicao.
67
LICO 3
22. Seleccionar

Associao de udio a estados de botes

Na aplicao a desenvolver pode tambm ser necessrio a execuo de um ficheiro udio sempre
que o utilizador passa com o rato por cima de um boto. Poder, por exemplo, ser interessante
complementar uma imagem com um som, ou mesmo apresentar apenas um som e pedir ao
utilizador para fazer a associao desse som com uma imagem.
Nesta parte do tutorial iremos criar um novo desafio na frame 15 em que o utilizador a partir de
um som deve identificar a letra que lhe corresponde.
1.
2.
Insero de aces nos botes da aplicao
3.
Na frame 10, no layer Navegacao, adicione as aces necessrias aos botes existentes:
Prximo, Incio e Fim, ou seja, que os redireccione para as frames 15
(_CurrentFrame + 5), 1 e 100, respectivamente. Se estes botes ainda no tiverem o
seu contedo agrupado, deve agrupar o rectngulo e a caixa de texto. Tm de os
converter para smbolos do tipo Button, cujos nomes devem ser bt_proximo,
bt_inicio e bt_fim.
4.
Como ainda no tnhamos feito o mesmo no boto Incio e Fim da frame 5, iremos
aproveitar os smbolos criados no passo 3. Estando posicionada na frame 10, clique
com o boto direito em cima do boto Incio e seleccione a opo Copy.
5.
Posicionando-se na frame 5, layer Navegacao, apague a caixa relativa ao boto Incio.
6.
Seleccione do menu principal a opo Edit > Paste in Place.
7.
Repita os passos 4 a 6 para o boto Fim.
8.
Copie o boto Iniciar existente na frame 1, layer Cabecalho e cole-o (atravs do

comando Paste in Place) na frame 100 do mesmo layer.
Criao do contedo da frame do segundo desafio
9.
Clique com o boto direito do rato na frame 15 do layer Cabecalho e seleccione Insert
Blank Keyframe. Repita o passo para todos os outros layers, com excepo do layer
ActionScript.
68
LICO 3
10. Como
a estrutura da frame associada a este desafio no difere do primeiro desafio,

vamos aproveitar o que j foi feito na frame 5. Com o boto direito do rato clique na
frame 5 do layer Cabecalho e seleccione Copy Frames.
11. Clique
com o boto direito do rato na frame 15 do layer Cabecalho e seleccione Paste

Frames.
12. Repita
os passos 10 e 11 para os layers Conteudo, Grupo1, Grupo2, Elemento4,

Elemento5, Elemento6 e Navegacao. No iremos copiar os layers Elemento1,
Elemento2 e Elemento3 porque vamos querer que o Grupo 1 tenha elementos
diferentes.
13. Altere
o texto existente no Cabealho para Desafio 2 e Clique no elemento do

grupo 2 que corresponde ao som do do grupo 1. Para ouvir passe o rato por
cima do elemento do grupo 1.
69
LICO 3
14. No
grupo 1 iremos inserir uma imagem que funcionar como um pseudo-boto, ou

seja, permitir associar eventos imagem, mas se o utilizador clicar na imagem no
acontecer nada. Para importar a imagem para a biblioteca, seleccione File > Iimport
to Library e escolha o ficheiro semsom.jpg. O ficheiro passar a constar na
biblioteca.
15. Repita o passo 14 para o ficheiro comsom.jpg.

16. Clique na frame 15 do layer Elemento2 e arraste o smbolo semsom.jpg. Alinhe o seu
centro horizontal com o da letra a.
17. Clique
com o boto direito em cima da imagem que acabou de colocar no palco e

seleccione Convert to Symbol. D-lhe o nome de bt_som_a. Este smbolo deve ser
do tipo Button.
Mudana de imagem no estado Over do novo boto
18. D um duplo clique em cima do novo boto para que seja possvel edit-lo.
70
LICO 3
19. Clique com o boto direito na frame do estado Over e seleccione Insert Keyframe.
20. Estando na frame do estado Over, clique com o boto direito em cima da imagem do
boto e escolha Swap Bitmap. Escolha a imagem comsom.jpg.

cima do boto que acabou de criar.
aplicacao_16.fla.
Insero de som no estado Over
24. Importe o ficheiro de udio a.mp3. Atribua-lhe o linkage ID a.

25. D um duplo clique em cima do novo boto para que seja possvel edit-lo.
71
LICO 3
26. Posicione-se na frame Over. O Property Inspector fica como a imagem seguinte.
27. Na caixa de seleco Sound do Property Inspector, seleccione o ficheiro a.mp3.

cima do boto que acabou de criar.
aplicacao_17.fla.
Drag and Drop no Flash

Outra interactividade que pode ser necessria, especialmente nos desafios que envolvam
ordenao de elementos, a possibilidade do utilizador clicar num elemento, arrast-lo e larg-lo
noutro local do palco. A este comportamento chama-se Drag and Drop (Arrasta e Larga).
Nesta seco, iremos criar um novo desafio (o terceiro), em que o utilizador ter de ordenar 3
elementos. Inicialmente iremos criar ecrs que so necessrios para que esta pequena aplicao
funcione de forma integrada. Comearemos por construir o ecr de resposta ao desafio 2 e o ecr
do desafio 3. Apenas nas seces Insero da interactividade Drag and Drop e Passagem
para a frame de resposta ao desafio, sero apresentadas as tcnicas especficas para
implementao de Drag and Drop. No entanto, necessrio salientar, que mesmo nestas seces,
muitos dos passos existem porque estamos a utilizar elementos que j foram utilizados
previamente e necessitam de ser convertidos. Para a implementao de Drag and Drop apenas
72
LICO 3
necessrio compreender os passos 26 e 40, onde apresentado o cdigo ActionScript que o

implementa Alm disso necessrio que os dois elementos envolvidos (o que se move e aquele
que deve receber o objecto que se move) devem ser do tipo Movie.
1.
2.
Criao de ecr de resposta ao desafio criado na etapa anterior
3.
Clique com o boto direito do rato na frame 20 do layer Cabecalho e seleccione

Insert Blank Keyframe. Repita o passo para todos os outros layers, com excepo do
layer ActionScript.
4.
Como a estrutura da frame associada a esta resposta no difere da resposta ao primeiro

desafio, vamos aproveitar o que j foi feito na frame 10. Com o boto direito do rato
clique na frame 10 do layer Cabecalho e seleccione Copy Frames.
5.
Clique com o boto direito do rato na frame 20 do layer Cabecalho e seleccione Paste
Frames.
6.
Repita os passos 4 e 5 para os layers Conteudo, Grupo1, Grupo2, Elemento3,

Elemento4 e Navegacao.
73
LICO 3
7.
Altere a caixa de texto do layer Cabecalho para Desafio 2. Altere a posio da letra a
para as coordenadas x=170 e y=155. Altere tambm o contedo da caixa de texto
que est no layer Elemento4 para O som que ouviu realmente o som associado
vogal a.
8.
Seleccione Control > Test Movie para ver a execuo da aplicao.
9.
Seleccionar File>Save As do menu principal para gravar o documento com o nome

aplicacao_18.fla.
Criao do ecr do Desafio 3
10. Clique
com o boto direito do rato na frame 25 do layer Cabecalho e seleccione

layer ActionScript.
11. Como
a estrutura da frame associada a este desafio no difere do primeiro desafio,

vamos aproveitar o que j foi feito na frame 5. Com o boto direito do rato clique na
frame 5 do layer Cabecalho e seleccione Copy Frames.
74
LICO 3
12. Clique com o boto direito do rato na frame 25 do layer Cabecalho e seleccione Paste
Frames.
13. Repita
os passos 11 e 12 para os layers Conteudo, Grupo1, Grupo2, Elemento4,

Elemento5, Elemento6 e Navegacao.
14. Altere as caixas de texto do layer Cabecalho para Desafio 3 e Ordene os elementos
do Grupo 2, colocando-os no Grupo 1.
15. Insira 3 vezes o elemento quadradoazul da biblioteca na caixa associada ao Grupo 1.
75
LICO 3
16. Seleccione Control > Test Movie para ver a execuo da aplicao.
aplicacao_19.fla.
Insero da interactividade Drag and Drop
18. Seleccione
o quadradoazul que pertence ao layer Elemento1 e no Property Inspector

altere o seu tipo para Movie Clip e d um nome instncia: fr25_caixa1.
19. Repita
o passo 18 para os quadrados dos layers Elemento2 e Elemento3. Os nomes

das instncias devem ser respectivamente fr25_caixa2 e fr25_caixa3.
20. Clique
com o boto direito no boto da letra c que pertence ao layer Elemento4 e

seleccione Duplicate Symbol. O nome do novo smbolo dever ser mv_c.
21. Clique
com o boto direito no smbolo mv_c na biblioteca e seleccione Type >

Movie Clip.
22. Clique com o boto direito no smbolo mv_c na biblioteca e seleccione Edit.
23. Clique com o boto direito na frame 2 do timeline do filme mv_c e seleccione Remove
Frames. Esta operao ir permitir eliminar a animao que tnhamos colocado no

desafio 1.
24. No timeline, clique em Scene 1 para voltar ao timeline principal.

25. Seleccione a instncia do boto mv_c e, no Property Inspector, mude o tipo da instncia
para Movie Clip. Ir aparecer uma janela de aviso (que o cdigo de ActionScript j
definido ir ser eliminado) qual dever responder ok.
26. Clique
com o boto direito em cima da instncia do smbolo mv_c e seleccione

Actions. Na janela das aces insira o seguinte cdigo:
76
LICO 3
Este cdigo que permitir que o smbolo mv_c se possa arrastar e, caso esteja
dentro do objecto chamado fr25_caixa3, seja inserido neste ltimo. importante
que o compreenda. Vamos analis-lo passo a passo.
O primeiro bloco de instrues:
on(press) {
startDrag(this);
}
diz que, quando este objecto (mv_c, ou seja o objecto ao qual estamos a adicionar as
aces) for pressionado (on(press)), o Flash deve permitir arrast-lo
(startDrag(this)). O this um termo que permite identificar o objecto ao qual
se esto a adicionar as aces.
O segundo bloco de instrues:
on(release) {
stopDrag();
if (this._droptarget == "/fr25_caixa3") {
this._x = _root.fr25_caixa3._x;
this._y = _root.fr25_caixa3._y-20;
}
else{
this._x = 50;
this._y = 285.1;
}
}
d indicaes sobre o que fazer quando se larga (on(release)) o boto do rato do

objecto (mv_c). A primeira instruo (stopDrag()), indica que o Flash dever parar
de arrastar o objecto.
77
LICO 3
A segunda instruo uma estrutura condicional, ou seja, o Flash ter de verificar se

a condio this._droptarget == "/fr25_caixa3" verdadeira ou no. Esta
instruo de ActionScript permite verificar se o objecto foi largado em cima do
objecto com o nome fr25_caixa3.
Caso esta condio seja verdade, so executadas as seguintes instrues:
Estas instrues indicam ao Flash que coloque o objecto mv_c nas coordenadas do
elemento com o nome fr25_caixa3. ainda necessrio explicar a razo da
subtraco de 20 coordenada y do objecto fr25_caixa23. Foi necessrio recorrer a
esta artimanha para se conseguir que o objecto mv_c ficasse exactamente por cima
do objecto fr25_caixa3 porque, devido existncia de letras no objecto mv_c, a sua
altura superior altura do objecto fr25_caixa3. Repare na diferena de altura na
figura abaixo.
No seu caso, a compensao em termos de altura poder ser diferente de 20. Ter de
fazer alguns testes para acertar com a compensao a efectuar.
Caso a condio (this._droptarget == "/fr25_caixa3" ) no seja verdade
(else), so executadas as seguintes instrues:
this._x = 50;
this._y = 285.1;
Estas instrues indicam ao Flash que coloque o objecto nas coordenadas onde
estava inicialmente. Antes de escrever este cdigo, necessrio determinar as
coordenadas onde se pretende colocar o objecto, caso o utilizador falhe a coloc-lo
na ordem correcta. Em princpio ser a posio que ele ocupava antes de o utilizador
lhe ter tocado pela primeira vez.
27. Repita
os passos 20 a 26 para as letras a e b. No se esquea de fazer as alteraes

respectivas ao cdigo (substituir fr25_caixa3 pelo nome do elemento onde a letra
dever estar associada e alterar as coordenadas da posio inicial das letras). Os nomes
dos novos smbolos devem ser mv_a e mv_b. Tambm poder ter de fazer alguns
ajustes posio final do elemento quando a opo est correcta.
28. Seleccione

clicar e arrastar os elementos do Grupo 2.
aplicacao_20.fla.
78
LICO 3
Criao do ecr de resposta ao desafio
30. Clique
com o boto direito do rato na frame 30 do layer Cabecalho e seleccione

layer ActionScript.
31. Como a estrutura da frame associada a esta resposta no difere da resposta ao primeiro
desafio, vamos aproveitar o que j foi feito na frame 10. Com o boto direito do rato
clique na frame 10 do layer Cabecalho e seleccione Copy Frames.
32. Clique
com o boto direito do rato na frame 30 do layer Cabecalho e seleccione Paste

Frames.
33. Repita
os passos 31 e 32 para os layers Conteudo, Grupo1, Grupo2, Elemento4 e

Navegacao.
34. Altere
a caixa de texto do layer Cabecalho para Desafio 3. Altere tambm o

contedo da caixa de texto que est no layer Elemento4 para De acordo com o
abecedrio, a sequncia correcta a, b, c.
79
LICO 3
35. Posicione-se na frame 25 e copie o quadradoazul com a letra a.

36. Posicione-se na frame 30, layer Elemento1 e cole o quadradoazul com a letra Coloque-
o no primeiro lugar da sequncia da Soluo.
37. Com
o quadradoazul da letra a seleccionado, mude o tipo de instncia para Graphic

no Property Inspector. Dever responder OK a mensagem de aviso de eliminao do
cdigo de ActionScript.
38. Repita os passos 35 a 37 para os quadrados azuis com as letras b e c. Estes quadrados
devem ser inserido nos layers Elemento2 e Elemento3.
aplicacao_21.fla.
80
LICO 3
Passagem para a frame de resposta ao desafio
Aps ter implementado o Drag and Drop, necessrio detectar quando que o utilizador
completou correctamente o desafio, ou seja, completou a sequncia de elementos. Neste
momento o utilizador direccionado para o ecr que apresenta a explicao da soluo. Enquanto
no o conseguir, dever continuar a tentar.
Caso no existisse a verificao que se ir implementar nesta etapa do tutorial, o utilizador no
sairia mais deste ecr, a no ser que carregasse no boto Incio ou Fim.
40. De
forma semelhante ao que fez nos passos 18 e 19, atribua nomes aos quadrados
com as letras c, a e b (dos layers 4,5 e 6 respectivamente). Os nomes das instncias
devem ser respectivamente fr25_obj3, fr25_obj1 e fr25_obj2. Estes nomes
foram definidos em funo do nmero da caixa de destino correcta.
41. Clique
com o boto direito no quadrado azul com a letra c e seleccione Actions. Ao

cdigo j associado, ter de acrescentar o que est a negrito no cdigo abaixo.
on(press) {
startDrag(this);
}
on(release) {
stopDrag();
if (this._droptarget == "/fr25_caixa3") {
if (_root.fr25_obj1._x == _root.fr25_caixa1._x
_root.fr25_obj1._y
==
_root.fr25_caixa1._y-20
_root.fr25_obj2._x
==
_root.fr25_caixa2._x
_root.fr25_obj2._y
==
_root.fr25_caixa2._y
_root.fr25_obj3._x
==
_root.fr25_caixa3._x
_root.fr25_obj3._y == _root.fr25_caixa3._y-20){
_root.gotoAndStop (_root._currentFrame + 5);
}
}
else{
this._x = 50;
this._y = 285.1;
}
}
&&
&&
&&
&&
&&
Esta nova condio verifica se quando o objecto (neste caso mv_c) largado, as coordenadas x e
y de todos os objectos do Grupo 2 coincidem com as coordenadas das posies finais (ou seja,
por cima dos objectos fr25_caixa1, fr25_caixa2 e fr25_caixa3). Se isto for verdade, o
Flash dever direccionar o utilizador para a frame que est associada ao ecr de resultado
(_root.gotoAndStop (_root._currentFrame + 5)).
42. Repita o passo 40 para os outros dois elementos (a e b) do Grupo 2.
43. Seleccione

clicar e arrastar todos os elementos do Grupo 2 para a sequncia correcta.
81
LICO 3
aplicacao_22.fla.
45. Colocar
o documento disponvel na sua rea do servidor Web da ESTSP. Se for

necessrio consulte a lio 1.
46. A
sua
aplicao
dever
ser
semelhante
existente
http://www.estsp.pt/~ctl/docencia/20072008/1sem/tato/tutoriais/aplicacao_final.html
em
82

Tutorial Flash

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial Flash

Enviado por

Direitos autorais:

Formatos disponíveis

Introduo ao Flash

Tutorial constitudo por 3 lies para introduzir o flash no desenvolvimento de aplicaes.

Carla Teixeira Lopes

Carla Teixeira Lopes

Carla Teixeira Lopes

Esta lio pretende introduzir os alunos ao ambiente da aplicao Flash e criao e

Instalar o Flash 8 Professional no computador. Se no tiver acesso ao programa, pode

Nome de utilizador e palavra passe de acesso conta no servidor Web da ESTSP.

Conhecer a interface do Flash

Carla Teixeira Lopes

Criar um documento em Flash

Criar e entender o conceito de smbolo

Criar uma pequena animao

Publicar um documento em Flash

Colocar um documento Flash disponvel na Web

Carla Teixeira Lopes

Stage onde as imagens, vdeos, botes e outros elementos aparecem na reproduo da

Library onde so listados todos os elementos do documento Flash.

ActionScript cdigo que permite adicionar interactividade aos elementos do

Depois de concludo o desenvolvimento da aplicao, deve-se proceder sua publicao, que

Criao de um documento Flash

Abra o Adobe Macromedia Flash 8.

Carla Teixeira Lopes

Seleccione Create New>Flash Document na pgina inicial para abrir a

Como pode verificar a interface dividida em diversas reas:

Carla Teixeira Lopes

A barra de menu o centro de controle da interface Flash. Aqui pode manipular

Esta a rea em que o utilizador v o filme Flash em aco. Contm todos os

Contm as frames que integram um filme Flash.

Do acesso a uma vasta gama de ferramentas. Podem ser abertos, fechados,

Ferramentas de desenho e texto. Quando uma ferramenta seleccionada, o

Painel que possibilita a modificao de documentos e objectos. sensvel ao

Seleccionar File>Save do menu principal para gravar o documento. Nomeie o

Mudar as propriedades do documento

No Property Inspector, o boto Size apresenta o tamanho actual do Stage (550 x

Para desenhar um crculo no ecr, comece por seleccionar a ferramenta Oval no

Carla Teixeira Lopes

No Property Inspector, seleccione a opo No Color no seleccionador da cor do

Seleccione a cor #0000FF no seleccionador da cor de preenchimento (Fill

Carla Teixeira Lopes

Seleccione a ferramenta de Seleco no painel Tools.

10. Clique no crculo que est no Stage para o seleccionar.

11. Com o crculo seleccionado, seleccione Modify >Convert to Symbol.

13. Clique OK. O crculo passa a estar rodeado por um quadrado.

novo smbolo passa a aparecer no painel Library. Se este painel no estiver

Carla Teixeira Lopes

16. Clique na Frame 20 do Layer 1 do Timeline.

Insert>Timeline>Frame. O Flash adiciona frames at Frame 20,

a frame 20 seleccionada, seleccione Insert>Timeline>Keyframe.

Carla Teixeira Lopes

a frame 20 ainda seleccionada no Timeline, arraste o crculo para o lado

Seleccione a frame 1 do Layer 1 no Timeline.

21. No Property Inspector, seleccione Motion na caixa de seleco Tween.

Aparecer uma seta no Layer 1 do Timeline entre as Frames 1 e 20.

23. Seleccione Control>Test Movie para testar o documento FLA.

do menu principal para gravar o documento.

Publicao de um documento Flash

Num navegador que possua o Flash player, introduzindo o endereo da

Pressionando as teclas Control e Enter ou atravs do menu Control > Test

Abrir o ficheiro SWF directamente, num computador que possua o Flash

Publicar o ficheiro FLA como Windows Projector, o que resultar num

Seleccione File > Publish Settings.

Na janela que surge, seleccione o tabulador Formats e verifique que apenas as