Escolar Documentos
Profissional Documentos
Cultura Documentos
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
D E
C O M E A R
Q U E
N E C E S S R I O
Criar um crculo
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:
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.
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.
Menus
Timeline
Painis
Stage
Tools
Propertyinspector
LICO 1
Main Menu
Desenhar um crculo
6.
LICO 1
7.
8.
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.
14. O
10
LICO 1
Animar o crculo
15. Arraste o crculo para o lado esquerdo da rea do Stage.
17. Seleccione
18. .Com
11
LICO 1
19. .Com
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.
12
LICO 1
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.
2.
13
LICO 1
3.
4.
Clique OK..
5.
6.
14
LICO 1
2.
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.
15
LICO 1
5.
6.
16
LICO 1
7.
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
Q U E
N E C E S S R I O
18
O B J E C T I V O S
Criar smbolos.
19
LICO 2
Selection Tool
Subselection Tool
Lasso Tool
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
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.
Carla Teixeira Lopes
21
LICO 2
o
Rectangle Tool
Pencil Tool
T
h
e
Brush Tool
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
23
LICO 2
o
Eraser Tool
T
h
e
28. Seleccionar
29. No
24
LICO 2
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.
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
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.
mover os layers de posio - basta arrastar o layer para uma posio superior ou inferior
26
LICO 2
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,
apresentar apenas os limites dos objectos do layer (em vez de os apresentar com o
preenchimento).
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.
2.
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.
28
LICO 2
5.
6.
7.
8.
Clique com o boto direito em cima da frame 5 desta nova layer e seleccione a
opo Insert Blank Keyframe.
9.
10. Posicione-se
29
LICO 2
13. .Desenhe um rectngulo no palco com os limites de cor #666600 e o interior sem
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.
30
LICO 2
16. Desenhe
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
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).
tecla Shift enquanto arrasta o rato a desenhar para garantir que o objecto final
31
LICO 2
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
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.
33
LICO 2
2.
3.
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.
34
LICO 2
6.
7.
8.
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.
35
LICO 2
11. Seleccione
13. Para
14. .Atravs
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
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.
37
LICO 2
20. Como
21.
22. Arraste
do ecr.
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
39
LICO 2
a:
a:
40
LICO 2
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.
4.
5.
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.
42
LICO 2
8.
9.
10. No
43
LICO 2
14. Seleccione
15. Seleccione a caixa que contm a letra u e a caixa que contm a letra c e escolha a
16. Seleccione
17. Para
18. Seleccionar
2.
3.
44
LICO 2
4.
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.
7.
45
LICO 2
8.
9.
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
Criar botes.
Criar um objecto que possa estar sujeito a Drag and Drop no palco.
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
49
LICO 3
15. Clique
Painel
de
aces
Painelde
cdigo
Painelde
scripts
Esta janela tambm pode ser aberta atravs do comando Window > Actions. Est dividida
em 4 seces:
16.
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
aplicacao_6.fla.
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.
51
LICO 3
4.
5.
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.
8.
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
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.
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.
aplicacao_7.fla.
Neste ecr existem 5 elementos que podem ser pressionados: a letra c, letra a, letra b, o
rectngulo Incio e o rectngulo Fim.
26. .
27. Clique com o boto direito no agrupamento e seleccione a opo Convert to Symbol.
28. Clique
54
LICO 3
29. O
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
aplicacao_8.fla.
35. Volte
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.
6.
7.
8.
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
57
LICO 3
11. Seleccione a caixa de texto e altere a cor do texto para #D5D7E2.
12. Clique
cima do boto c.
aplicacao_10.fla.
cima do boto c.
aplicacao_11.fla.
19. Caso
58
LICO 3
22. Seleccione
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
60
LICO 3
26. Clique
61
LICO 3
28. Insira uma instncia do smbolo bt_b no palco. Tenha o cuidado de a inserir na frame
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.
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.
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.
6.
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.
Seleccione o boto c.
65
LICO 3
13. Na
14. Seleccione
aplicacao_13.fla.
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
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
19. Seleccionar
21. Seleccione Control > Test Movie para ver a execuo da aplicao.
67
LICO 3
22. Seleccionar
2.
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.
6.
7.
8.
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
11. Clique
12. Repita
13. Altere
69
LICO 3
14. No
17. Clique
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
aplicacao_16.fla.
71
LICO 3
26. Posicione-se na frame Over. O Property Inspector fica como a imagem seguinte.
aplicacao_17.fla.
72
LICO 3
2.
3.
4.
5.
Clique com o boto direito do rato na frame 20 do layer Cabecalho e seleccione Paste
Frames.
6.
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.
9.
10. Clique
11. Como
74
LICO 3
12. Clique com o boto direito do rato na frame 25 do layer Cabecalho e seleccione Paste
Frames.
13. Repita
14. Altere as caixas de texto do layer Cabecalho para Desafio 3 e Ordene os elementos
75
LICO 3
16. Seleccione Control > Test Movie para ver a execuo da aplicao.
17. Seleccionar File>Save
aplicacao_19.fla.
18. Seleccione
19. Repita
20. Clique
21. Clique
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
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
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;
}
}
77
LICO 3
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
28. Seleccione
aplicacao_20.fla.
78
LICO 3
Criao do ecr de resposta ao desafio
30. Clique
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
33. Repita
34. Altere
79
LICO 3
37. Com
38. Repita os passos 35 a 37 para os quadrados azuis com as letras b e c. Estes quadrados
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
&&
&&
&&
&&
&&
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
81
LICO 3
44. Seleccionar File>Save
aplicacao_22.fla.
45. Colocar
46. A
sua
aplicao
dever
ser
semelhante
existente
http://www.estsp.pt/~ctl/docencia/20072008/1sem/tato/tutoriais/aplicacao_final.html
em
82