Desenho, animao e interaco com o Macromedia Flash

M Rosrio Rodrigues

Desenho, animao e interaco com o Macromedia Flash

Sumrio 1. 2. 3. 4. 5. Introduo............................................................................................................... 3 Apresentao geral................................................................................................. 4 Barras de ferramentas ............................................................................................ 5 Timeline .................................................................................................................. 6 Antes de iniciar uma aplicao ............................................................................... 7 5.1 5.2 5.3 5.4 6. 6.1 6.2 6.3 7. 8. 9. Fill e Stroke ..................................................................................................... 7 Sobreposio de formas ................................................................................. 7 O lpis............................................................................................................. 8 Alterao de formas ........................................................................................ 8 Animao por alterao de forma (shape tweening) ...................................... 9 Animao por movimento (motion tweening)................................................ 11 Movimento segundo um percurso (tweening motion along a path) .............. 14

Animao................................................................................................................ 9

Gravao e publicao ......................................................................................... 15 Mscaras .............................................................................................................. 16 Botes................................................................................................................... 17 9.1 9.2 Botes com som ........................................................................................... 18 Atribuio de funes aos botes................................................................. 19

10. Ligaes Internet ............................................................................................... 22 11. Som ...................................................................................................................... 23

Escola Superior de Educao de Setbal

Desenho, animao e interaco com o Macromedia Flash

1.

Introduo

O Macromedia Flash a evoluo de um programa de criao e de animao vectorial (Future Splash Animator). Actualmente uma ferramenta autor que inclui um conjunto de funcionalidades com as quais se podem produzir totalmente sites web, com contedos atractivos e dinmicos. Muitos webmasters recorrem tambm a este programa para criar pequenas animaes que so colocadas nos seus sites, produzindo mensagens com bastante impacto para os leitores. No necessrio que todo o site esteja construdo exclusivamente com esta ferramenta. Reala-se o facto do Flash permitir uma distribuio eficiente atravs da Internet, uma vez que as animaes criadas poderem ser relativamente pequenas no que respeita ao tamanho dos ficheiros. Apesar da sua aplicao ser maioritariamente ao nvel da Internet, tambm possvel criar aplicaes autnomas cuja distribuio seja efectuada por CD-ROM. Uma das razes para o sucesso do Flash reside no facto de incluir potencialidades de tratamento de imagem vectorial. Existem dois modos de definir as imagens digitais: mapa de pontos (bitmap) e vector. No primeiro modo, o mapa de pontos, a imagem apresentada pelo computador definida como um conjunto de pontos individuais, que esto organizados segundo uma matriz de linhas e colunas. Cada clula desta matriz corresponde a um ponto no ecr.

Figura 1 Mapa de pontos

No segundo modo, representao vectorial, um conjunto de descries que permite ao computador fazer a representao visual da imagem. Esta definio atravs de expresses permite ficheiros mais pequenos e, por outro lado, a qualidade da imagem mantm-se quando se alteram as suas dimenses, ao contrrio do que sucede com as imagens definidas por mapas de pontos.

Escola Superior de Educao de Setbal

Desenho, animao e interaco com o Macromedia Flash

Elipse 200px 100px Cor da linha: preto Cor do fundo: branco Elipse 400px 200px Cor da linha: preto Cor do fundo: branco
Figura 2 Redimensionamento de imagens vectoriais

Outra razo para o sucesso do Flash reside na simplicidade com que se podem criar animaes dos objectos grficos. De facto, so disponibilizadas aos utilizadores bastantes ferramentas cuja utilizao eficiente permitir alcanar resultados visualmente atractivos. A boa organizao dos elementos multimdia tambm um factor que favorece este programa. Note-se ainda que no necessrio criar com o Flash todos os elementos de informao que se pretendem incluir no trabalho final. Eles podem ser obtidos a partir de textos, imagens sons e vdeos j existentes, criados propositadamente para esse fim ou reutilizados a partir de outros trabalhos. possvel recorrer a digitalizadores de imagem (scanners) ou a cmaras de fotografia digital para obter os ficheiros de imagens que em seguida sero colocados numa biblioteca de smbolos da animao Flash.

2.

Apresentao geral

O Macromedia Flash possui uma interface complexa com um conjunto de painis para os diferentes recursos. Cada utilizador poder personalizar o ambiente de trabalho, escolhendo os painis que devem estar visveis no incio da sesso, tornando o trabalho mais produtivo. Numa fase inicial, possvel escolher um dos modelos que so fornecidos, como seja o Training Layout, adequado aprendizagem com os documentos fornecidos pelo fabricante. Sugere-se que nesta aco seja utilizado o modelo de base. Para tal, depois de entrar no programa, escolha Panel Sets no menu Window, seleccionando em seguida a opo Default Layout. O ecr principal como o que a seguir se apresenta.

Escola Superior de Educao de Setbal

Desenho, animao e interaco com o Macromedia Flash

Barra de ferramentas Linha de tempo Camadas Palco

Ferramentas de desenho e pintura Painis

Propriedades dos objectos

Figura 3 Interface do Flash

3.

Barras de ferramentas

A partir do menu Window possvel apresentar ou esconder barras do Flash. No total h quatro barras: Main, Controller, Edit bar e Tools.

Figura 4 Barras do Flash

Escola Superior de Educao de Setbal

Desenho, animao e interaco com o Macromedia Flash

4.

Timeline

A Timeline (linha do tempo) permite organizar e controlar os acontecimentos que ocorrem no palco, ao longo do tempo.

As layers podem ser comparadas a transparncias que, colocadas umas sobre as outras, permitem uma imagem final que composio de todas as imagens nelas inscritas. Em cada frame de cada layer deve ser colocada a informao que se pretende visualizar naquele momento. O aspecto das frames diversificado de acordo com a informao que possui.

Escola Superior de Educao de Setbal

Desenho, animao e interaco com o Macromedia Flash

5.

Antes de iniciar uma aplicao

No menu escolha Modify > Document e ter acesso seguinte caixa de dilogo onde poder formatar as dimenses da sua aplicao. Esta operao dever ser efectuada sempre que se inicia uma nova aplicao.

Em Background Color poder escolher a cor do fundo da aplicao e em Dimensions a dimenso que o palco ter. A unidade em que esta dimenso estar representada depende da escolha efectuada em Ruler Units.

5.1

Fill e Stroke

Quando desenha uma forma no Flash o seu interior (Fill) e o contorno (Stroke) so objectos diferentes pelo que, se arrastar o interior do objecto, ele desmancha-se.

Para evitar isto deve seleccionar o objecto com duplo click antes de o movimentar.

5.2

Sobreposio de formas

Quando utiliza as ferramentas de desenho para criar uma linha que se sobrepe a outra linha ou forma, estas so divididas em segmentos pelos pontos de intercepo.

Escola Superior de Educao de Setbal

Desenho, animao e interaco com o Macromedia Flash

Quando se sobrepem formas de cores diferentes a forma que foi desenhada em primeiro lugar ser cortada por aquela que a ela se sobrepe.

5.3

O lpis

Quando se utiliza a ferramenta de desenho Lpis opes desta ferramenta.

tem vrias

alternativas para ajustar o seu desenho. Experimente-as nas

5.4

Alterao de formas
e e que se encontram lado a

Existem duas setas que permitem alterar formas: lado na barra de tools. Com a primeira destas setas (

) pode fazer deformaes como se apresentam na

figura abaixo, tendo sempre em ateno que o tipo de deformao sempre representado junto base da seta do rato.

Escola Superior de Educao de Setbal

Desenho, animao e interaco com o Macromedia Flash

Com a segunda das setas (

) faa um click sobre o

contorno da forma e aparecer um conjunto de pontos, representados por pequenos rectngulos, sobre o referido contorno.

Faa agora um click sobre um dos pontos e aparecero novos pontos, representados por pequenos crculos, que no esto sobre o contorno da forma.

Se movimentar um destes pontos representado com um crculo poder modificar a forma.

6.

Animao

As animaes do flash so obtidas por alterao de contedo que pode ser efectuado por: movimentao no palco, aumento ou diminuio do tamanho, rotao, alterao de cor, fade in fade out ou alterao de forma. Algumas destas alteraes podem ser simultneas. As animaes do flash podem ser obtidas por dois mtodos: frame a frame ou tween. Na animao frame a frame criam-se vrios objectos, um em cada frame, e a visualizao sucessiva de todos os frames d-nos a ideia de animao. Na animao tween s criamos o objecto inicial e o final sendo o flash a criar as imagens intermdias que permitam a animao.

6.1

Animao por alterao de forma (shape tweening)

Este tipo de animao permite iniciar numa determinada forma e terminar noutra. S necessrio definir a forma inicial e a final e o Flash encarregar-se- de gerar todas as formas intermdias que permitam visualizar a animao.
Escola Superior de Educao de Setbal 9

Desenho, animao e interaco com o Macromedia Flash

Faa um click na Layer onde pretende a animao e na frame correspondente ao seu incio.

Crie a imagem inicial da animao.

Por exemplo no frame 15 insira uma Keyframe em branco. Isto significar que a animao vai decorrer desde a frame inicial (no nosso exemplo a 1) at agora escolhida.

A linha de tempo da layer ficar com o aspecto semelhante a este.

Escola Superior de Educao de Setbal

10

Desenho, animao e interaco com o Macromedia Flash

Desenhe o objecto final da animao.

Faa um click numa das frames intermdias e nas propriedades escolha Tween > Shape. Este o aspecto final com que ficaro as frames que contm a animao. Para visualizar a animao bastar fazer um click na frame inicial e carregar na tecla Enter. Procure fazer algo semelhante mas utilizando texto, tentando, por exemplo, que uma palavra se transforme numa outra. O processo em tudo semelhante mas dever, sobre cada uma das palavras, escolher a opo Modify > Break Apart duas vezes. A primeira vez permitir separar todas as letras da palavra e a segunda transformar cada uma das letras num objecto grfico sobre o qual possvel este tipo de animao.

6.2

Animao por movimento (motion tweening)

A maior diferena entre este tipo de animao e o anterior que no Motion Tween todos os objectos so previamente transformados em Symbol. Desenhe uma forma, por exemplo, um quadrado com um crculo parcialmente sobreposto.

Escola Superior de Educao de Setbal

11

Desenho, animao e interaco com o Macromedia Flash

Marque a forma e transforme-a num smbolo, escolhendo Modify > Symbol. Na caixa de dilogo Convert to Symbol escolha Behaviour > Movie Clip e atribua o nome primeiro ao Symbol. O smbolo primeiro agora criado ficou envolvido por uma linha azulada e passou a pertencer Library. Se a Library no estiver visvel pode v-la escolhendo: Window > Library. Se tentar agora alterar a cor do Symbol ver que tal no possvel directamente. necessrio fazer duplo click sobre ele passando assim ao estado de edio da forma. Uma vez terminada a alterao bastar passar cena em construo fazendo um click em Scene 1 (no nosso exemplo). Observe efectuadas na Library. Uma vez criado o symbol pode fazer-se a animao. Insira um Keyframe na posio 15. Na posio 15 altere a localizao do symbol no palco.
Escola Superior de Educao de Setbal 12

que se

as

alteraes no

reflectiram

Symbol e portanto tambm existem

Desenho, animao e interaco com o Macromedia Flash

Faa um click numa das frames intermdias (por exemplo 10) e altere, nas propriedades, o Tween para Motion. Com as ferramentas Free Transform e Fill Transform utilizar as opes de Rotate do Motion Tween. pode alterar o

aspecto do Symbol na posio final (no nosso exemplo a frame 15). Tente ainda

Escola Superior de Educao de Setbal

13

Desenho, animao e interaco com o Macromedia Flash

6.3

Movimento segundo um percurso (tweening motion along

a path)
Este mtodo de animao permite desenhar um determinado percurso e fazer um objecto segui-lo. Neste exemplo utilizaremos duas layers, uma para desenhar o percurso e outra para o objecto que vai descrever esse percurso. Crie uma animao Tweening Motion como indicado em 5.2. Escolha Insert > Timeline > Motion Guide.

Aparecer ento uma nova layer designada Guide: Layer1.

Vamos agora desenhar o percurso. Para isso faa um click em Add Motion Guide um boto que se encontra na base da janela Timeline. Desenhe o percurso com a ferramenta Lpis .

Faa um click sobre a posio inicial do Motion Tween, coloque o centro da forma junto do ponto inicial do percurso. Proceda de modo semelhante para a posio final e corra a sua animao. Pode ainda esconder a linha do percurso com um click no local que se indica.

Escola Superior de Educao de Setbal

14

Desenho, animao e interaco com o Macromedia Flash

7.

Gravao e publicao

A publicao de um documento flash efectuada em duas etapas. Numa primeira necessrio definir todos os requisitos da publicao e numa segunda proceder efectivamente respectiva publicao. Escolha File > Publishing Setting e ter acesso seguinte caixa de dilogo.

O cone guardado.

permite alterar a pasta em que cada um dos tipos de ficheiro ser

Opes possveis e respectivos significados: Flash (.swf) Ficheiro que pode ser integrado numa pgina da Web e visualizado com o Flash Player Pgina html de suporte ao filme.

HTML (.html) GIF Image (.gif) JPEG Image (.jpg) PNG Image (.png) Windows Projector (.exe)

Imagem, para o caso do flash player no estar disponvel.

Ficheiros cujos filmes correm sozinhos, em diversos

Escola Superior de Educao de Setbal

15

Desenho, animao e interaco com o Macromedia Flash

Macintosh Projector Quick Time (.mov)

formatos.

Uma vez escolhidas as opes pretendidas dever utilizar o boto gerar os respectivos ficheiros nas pastas indicadas.

para

8.
Path.

Mscaras

As mscaras podem ser utilizadas com qualquer tipo de animao excepto Motion

Numa Layer escreva um texto.

Insira uma nova Layer, acima da actual, utilizando o cone parcialmente sobreposta ao texto.

Nessa nova Layer (layer2) desenhe, com as ferramentas de desenho, uma bola

Para definir a mscara escolha, no menu local a opo Mask. As mscaras funcionam sempre com duas layers que tm que estar consecutivas.
Escola Superior de Educao de Setbal 16

Desenho, animao e interaco com o Macromedia Flash

Para proceder animao da mscara deve desbloquear a Layer 2 (a da mscara) e aplicar, por exemplo a tcnica de animao de Motion Shape. A mscara s ficar com visualizao correcta de a tornar a bloquear.

9.

Botes
ou

Os botes em Flash so compostos de quatro frames interactivas. Pode criar um boto conjugando um texto sobre um rectngulo colorido qualquer outra forma. Uma vez criada a forma deve converte-la em Symbol > Button, escolhendo Modify > Convert to Symbol e atribua-lhe o nome boto.

Este smbolo automaticamente colocado na Library e s pode ser modificado se sobre ele se fizer um duplo click. Ao modificar o boto percebemos a existncia das quatro frames interactivas, correspondendo cada uma delas possibilidade de uma forma diferente para o boto.

Up Over Down Hit

Aspecto sem actividade sobre o boto Quando o cursor est sobre o boto Quando se faz um click sobre o boto Definio da rea de click, que invisvel no filme.

Escola Superior de Educao de Setbal

17

Desenho, animao e interaco com o Macromedia Flash

Assumamos a forma j desenhada para a frame Up. Para alterar as outras proceda do seguinte modo. Seleccione a frame a alterar e escolha Insert > Keyframe. Altere a forma inicial do boto, por exemplo ponto o texto a cinzento ou o contorno a preto. Teste o funcionamento do boto optando por Control > Test Movie ou conjugando as teclas Ctrl e Enter.

9.1

Botes com som

O primeiro passo dever ser a importao do som para a Library para o que dever escolher File > Import > Import to Library.

E o som ficar disponvel na janela da Library. (pode, a ttulo de exemplo, utilizar os sons do Windows em Windows\Media). Se pretender que o som seja audvel quando se faz um click sobre o boto bastar alterar a frame Down e, nas propriedades escolher o som j importado para a Library.

Escola Superior de Educao de Setbal

18

Desenho, animao e interaco com o Macromedia Flash

9.2

Atribuio de funes aos botes

Tentemos construir o seguinte exemplo:

O ttulo e os dois botes representados esquerda so constantes ao longo de todo o tempo da aplicao, pelo que podemos coloc-los numa mesma layer, que designaremos botes. Utilize as tcnicas descritas nos pontos 8 e 8.1 para construir essa layer. Pode sempre ver o resultado da construo escolhendo as opes Control > Test Movie. Insira uma nova layer, acima desta, onde ir colocar a imagem. Importe a imagem para a biblioteca utilizando File > Import > Import to Library e escolha o ficheiro correspondente. Coloque a imagem no palco e torne-a visvel durante 25 frames fazendo um Insert Frame na frame 25 da layer correspondente.
Escola Superior de Educao de Setbal 19

Desenho, animao e interaco com o Macromedia Flash

Obter um resultado do seguinte tipo:

Se correr o seu filme reparar que na frame 1 esto visveis os botes e a imagem, o que no se pretende, pois essa frame corresponder ao local onde se escolher ver a imagem ou o texto. Faa um click na frame 1 da layer imagem e arraste-a para a frame 2. Isto permitir limpar a frame 1 desta layer.

Insira agora um campo de texto numa nova layer, designada texto e visvel da frame 26 35. Como a layer dos botes deve estar visvel durante todo o tempo, vamos estend-la at frame 35. Para o conseguir basta efectuar um Insert Frame na frame 35 da layer botes.

Por fim, para terminar o aspecto grfico da aplicao, basta inserir uma nova frame com o boto de regresso pgina de escolha que est visvel em todas as frames, excepto a primeira. Decididos os tempos de exposio de cada um dos objectos necessrio incluir as paragens necessrias para que as escolhas de menu possam ser efectuadas e incluir as ordens nos botes. Vamos comear por inserir uma nova layer, designada ordens, onde sero colocadas algumas dessas ordens

Escola Superior de Educao de Setbal

20

Desenho, animao e interaco com o Macromedia Flash

A primeira ordem ser a incluso de uma paragem na fame 1. Seleccione a frame 1 da layer ordem, onde ser colocada a ordem de paragem. Utilize o smbolo da Action Frame e escolha Global Functions

> Timeline Control > Stop.

A frame 1 da layer ordens deve ficar com o seguinte aspecto.

Por outro lado, na janela Action Frame deve constar:

Experimente testar a sua aplicao e ver que ela pra na frame 1. A aplicao deve ainda parar nas frames 25 e 35 que correspondem ao final da imagem e do texto respectivamente. Dever proceder de modo semelhante para estas frames, mas previamente necessrio inclui Keyframes em cada uma delas. Vamos agora atribuir funes aos botes. Para o boto imagem pretende-se que, ao fazer sobre ele um click, a aplicao v para a frame 2 que corresponde ao incio da imagem e corra a partir da. Para o conseguir marque o boto imagem e escolha na Action Button (note que no caso das aces para botes a action passa a designar-se Button) seguinte sequencia de ordens: Global Functions > Movie Clip Control > On. Na caixa de dilogo seguinte escolha release.

Escola Superior de Educao de Setbal

21

Desenho, animao e interaco com o Macromedia Flash

Coloque o cursor na liga seguinte das ordens imadiatamente antes do }.

E escolha agora Global Functions > Timeline Control> gotoAndPlay e entre os parntesis escreva 2 que corresponde frame onde se pretende reiniciar a aplicao, por ser a frame inicial da imagem.

Proceda de modo semelhante para os outros dois botes da aplicao, tendo sempre em conta as frames para onde cada um deles deve enviar.

10. Ligaes Internet

As ligaes a outros sites da Internet podem ser efectuadas sobre botes ou sobre campos de texto. Para efectuar uma ligao a partir de um campo de texto, ou uma parte dele, marqueo e, nas propriedades do campo de texto escreva o endereo de destino em nova janela. . Se,

na caixa de dilogo Target, escolher _blank o endereo da Internet ser aberto numa

Escola Superior de Educao de Setbal

22

Desenho, animao e interaco com o Macromedia Flash

Se pretender uma ligao a partir de um boto dever escolher Global Functions > Movie Clip Control > On e na caixa de dilogo seguinte escolha release. Seguidamente opte por

E dentro dos parntesis dever escrever o endereo de destino e, eventualmente _ blank se pretender que o site seja apresentado numa nova janela. O resultado final do procedimento ser

Note que quer o endereo quer o parmetro _blank devem ser escritos entre aspas.

11. Som
Todos os sons devem ser previamente importados para a Library (ver ponto 8.1). Podemos aceder s propriedades do som fazer sobre ele um duplo click.

Escola Superior de Educao de Setbal

23

Desenho, animao e interaco com o Macromedia Flash

Aqui pode alterar o mtodo de compresso. Aconselha-se o mtodo MP3 mas, se alterar alguma caracterstica do som deve fazer-lhe o Update, ainda nesta caixa de dilogo. Ainda aqui possvel testar o som para verificar a sua qualidade. Se colocar o som no palco repare no aspecto com que ele fica representado na frame respectiva.

Nas propriedades do som pode ainda alterar os efeitos, na caixa Effect, colocando, por exemplo, Fade In.

Ainda nas propriedades pode alterqar o campo Sync que indica o modo como o som vai ser reproduzido.

Escola Superior de Educao de Setbal

24

Desenho, animao e interaco com o Macromedia Flash

Event

Uma nova instncia do som iniciada sempre que o filme passa pelo seu incio. Pode original sobreposio de sons se iniciarmos uma audio sem ter terminado a anterior.

Start

Semelhante anterior mas s inicia uma nova instncia do som quando a anterior j tiver terminado.

Stop Stream

Pra a instncia que est a tocar. Sincroniza o som com a animao

Escola Superior de Educao de Setbal

25