Manualflash

Desenho, animação e interacção

com o Macromedia Flash

Hugo Farinha

Desenho, animação e interacção com o Macromedia Flash

2

Sumário

1. Introdução............................................................................................................... 3

2. Apresentação geral................................................................................................. 4

3. Barras de ferramentas ............................................................................................ 5

4. Timeline .................................................................................................................. 6

5. Antes de iniciar uma aplicação ............................................................................... 7

5.1 Fill e Stroke ..................................................................................................... 7

5.2 Sobreposição de formas ................................................................................. 7

5.3 O lápis............................................................................................................. 8

5.4 Alteração de formas........................................................................................ 8

6. Animação................................................................................................................ 9

6.1 Animação por alteração de forma (shape tweening) ...................................... 9

6.2 Animação por movimento (motion tweening)................................................ 11

6.3 Movimento segundo um percurso (tweening motion along a path) .............. 14

7. Gravação e publicação ......................................................................................... 15

8. Máscaras .............................................................................................................. 16

9. Botões................................................................................................................... 17

9.1 Botões com som ........................................................................................... 18

9.2 Atribuição de funções aos botões................................................................. 19

10. Ligações à Internet ............................................................................................... 22

11. Som ...................................................................................................................... 23


3

1. Introdução

O Macromedia Flash é a evolução de um programa de criação e de animação vectorial

(Future Splash Animator). Actualmente é uma ferramenta autor que inclui um conjunto

de funcionalidades com as quais se podem produzir totalmente sites web, com

conteúdos atractivos e dinâmicos. Muitos webmasters recorrem também a este

programa para criar pequenas animações que são colocadas nos seus sites,

produzindo mensagens com bastante impacto para os leitores. Não é necessário que

todo o site esteja construído exclusivamente com esta ferramenta. Realça-se o facto

do Flash permitir uma distribuição eficiente através da Internet, uma vez que as

animações criadas poderem ser relativamente pequenas no que respeita ao tamanho

dos ficheiros.

Apesar da sua aplicação ser maioritariamente ao nível da Internet, é também possível

criar aplicações autónomas cuja distribuição seja efectuada por CD-ROM.

Uma das razões 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 estão organizados segundo uma

matriz de linhas e colunas. Cada célula desta matriz corresponde a um ponto no ecrã.

Figura 1 – Mapa de pontos

No segundo modo, representação vectorial, é um conjunto de descrições que permite

ao computador fazer a representação visual da imagem. Esta definição através de

expressões permite ficheiros mais pequenos e, por outro lado, a qualidade da imagem

mantém-se quando se alteram as suas dimensões, ao contrário do que sucede com as

imagens definidas por mapas de pontos.


4

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 razão para o sucesso do Flash reside na simplicidade com que se podem criar

animações dos objectos gráficos. De facto, são disponibilizadas aos utilizadores

bastantes ferramentas cuja utilização eficiente permitirá alcançar resultados

visualmente atractivos. A boa organização dos elementos multimédia também é um

factor que favorece este programa. Note-se ainda que não é necessário criar com o

Flash todos os elementos de informação que se pretendem incluir no trabalho final.

Eles podem ser obtidos a partir de textos, imagens sons e vídeos já existentes, criados

propositadamente para esse fim ou reutilizados a partir de outros trabalhos. É possível

recorrer a digitalizadores de imagem (scanners) ou a câmaras de fotografia digital para

obter os ficheiros de imagens que em seguida serão colocados numa biblioteca de

símbolos da animação Flash.

2. Apresentação geralO Macromedia Flash possui uma interface complexa com um conjunto de painéis para

os diferentes recursos.

Cada utilizador poderá personalizar o ambiente de trabalho, escolhendo os painéis

que devem estar visíveis no início da sessão, tornando o trabalho mais produtivo.

Numa fase inicial, é possível escolher um dos modelos que são fornecidos, como seja

o Training Layout, adequado à aprendizagem com os documentos fornecidos pelo

fabricante.

Sugere-se que nesta acção seja utilizado o modelo de base. Para tal, depois de entrar

no programa, escolha Panel Sets no menu Window, seleccionando em seguida a

opção Default Layout.

O ecrã principal é como o que a seguir se apresenta.


5

Figura 3 – Interface do Flash

3. Barras de ferramentasA partir do menu Window é possível apresentar ou esconder barras do Flash. No total

há quatro barras: Main, Controller, Edit bar e Tools.

Figura 4 – Barras do Flash

Painéis

Palco

Camadas

Linha de tempo

Barra de ferramentas

Ferramentas de desenho e pintura

Propriedades dos objectos


6

4. TimelineA Timeline (linha do tempo) permite organizar e controlar os acontecimentos que

ocorrem no palco, ao longo do tempo.

As layers podem ser comparadas a transparências que, colocadas umas sobre as

outras, permitem uma imagem final que é composição de todas as imagens nelas

inscritas.

Em cada frame de cada layer deve ser colocada a informação que se pretende

visualizar naquele momento. O aspecto das frames é diversificado de acordo com a

informação que possui.


7

5. Antes de iniciar uma aplicaçãoNo menu escolha Modify > Document e terá acesso à seguinte caixa de diálogo onde

poderá formatar as dimensões da sua aplicação. Esta operação deverá ser efectuada

sempre que se inicia uma nova aplicação.

Em Background Color poderá escolher a cor do fundo da aplicação e em Dimensions a

dimensão que o palco terá. A unidade em que esta dimensão 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) são

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 Sobreposição de formas

Quando utiliza as ferramentas de desenho para criar uma linha que se sobrepõe a

outra linha ou forma, estas são divididas em segmentos pelos pontos de intercepção.


8

Quando se sobrepõem formas de cores diferentes a forma que foi desenhada em

primeiro lugar será cortada por aquela que a ela se sobrepõe.

5.3 O lápis

Quando se utiliza a ferramenta de desenho Lápis tem várias

alternativas para ajustar o seu desenho. Experimente-as nas

opções desta ferramenta.

5.4 Alteração de formas

Existem duas setas que permitem alterar formas: e e que se encontram lado a

lado na barra de tools.

Com a primeira destas setas ( ) pode fazer deformações como se apresentam na

figura abaixo, tendo sempre em atenção que o tipo de deformação é sempre

representado junto à base da seta do rato.


9

Com a segunda das setas ( ) faça um click sobre o

contorno da forma e aparecerá um conjunto de pontos,

representados por pequenos rectângulos, sobre o referido

contorno.

Faça agora um click sobre um dos pontos e aparecerão novos

pontos, representados por pequenos círculos, que não estão

sobre o contorno da forma.

Se movimentar um destes pontos representado com um círculo

poderá modificar a forma.

6. AnimaçãoAs animações do flash são obtidas por alteração de conteúdo que pode ser efectuado

por: movimentação no palco, aumento ou diminuição do tamanho, rotação, alteração

de cor, fade in fade out ou alteração de forma. Algumas destas alterações podem ser

simultâneas.

As animações do flash podem ser obtidas por dois métodos: frame a frame ou tween.

Na animação frame a frame criam-se vários objectos, um em cada frame, e a

visualização sucessiva de todos os frames dá-nos a ideia de animação. Na animação

tween só criamos o objecto inicial e o final sendo o flash a criar as imagens

intermédias que permitam a animação.

6.1 Animação por alteração de forma (shape tweening)

Este tipo de animação permite iniciar numa determinada forma e terminar noutra. Só é

necessário definir a forma inicial e a final e o Flash encarregar-se-á de gerar todas as

formas intermédias que permitam visualizar a animação.


10

Faça um click na Layer onde

pretende a animação e na

frame correspondente ao seu

início.

Crie a imagem inicial da

animação.

Por exemplo no frame 15

insira uma Keyframe em

branco. Isto significará que a

animação 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.


11

Desenhe o objecto final da

animação.

Faça um click numa das

frames intermédias e nas

propriedades escolha Tween

> Shape.

Este é o aspecto final com

que ficarão as frames que

contêm a animação.

Para visualizar a animação 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 opção 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 gráfico sobre o qual é possível este tipo de

animação.

6.2 Animação por movimento (motion tweening)

A maior diferença entre este tipo de animação e o anterior é que no Motion Tween

todos os objectos são previamente transformados em Symbol.

Desenhe uma forma, por exemplo,

um quadrado com um círculo

parcialmente sobreposto.


12

Marque a forma e transforme-a

num símbolo, escolhendo Modify >

Symbol.

Na caixa de diálogo Convert to

Symbol escolha Behaviour > Movie

Clip e atribua o nome primeiro ao

Symbol.

O símbolo primeiro agora criado

ficou envolvido por uma linha

azulada e passou a pertencer à

Library.

Se a Library não estiver visível

pode vê-la escolhendo: Window >

Library.

Se tentar agora alterar a cor do

Symbol verá que tal não é possível

directamente.

É necessário fazer duplo click

sobre ele passando assim ao

estado de edição da forma.

Uma vez terminada a alteração

bastará passar à cena em

construção fazendo um click em

Scene 1 (no nosso exemplo).

Observe que as alterações

efectuadas se reflectiram no

Symbol e portanto também existem

na Library.

Uma vez criado o symbol pode

fazer-se a animação.

Insira um Keyframe na posição 15.

Na posição 15 altere a localização

do symbol no palco.


13

Faça um click numa das frames

intermédias (por exemplo 10) e

altere, nas propriedades, o Tween

para Motion.

Com as ferramentas Free Transform e Fill Transform pode alterar o

aspecto do Symbol na posição final (no nosso exemplo a frame 15). Tente ainda

utilizar as opções de Rotate do Motion Tween.


14

6.3 Movimento segundo um percurso (tweening motion along

a path)

Este método de animação 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 animação Tweening Motion como indicado em 5.2.

Escolha Insert > Timeline > Motion Guide.

Aparecerá então uma nova layer designada Guide: Layer1.

Vamos agora desenhar o percurso. Para isso faça um click em Add Motion Guide ,

um botão que se encontra na base da janela Timeline.

Desenhe o percurso com a ferramenta Lápis .

Faça um click sobre a posição inicial do Motion Tween, coloque o centro da forma

junto do ponto inicial do percurso. Proceda de modo semelhante para a posição final e

corra a sua animação.

Pode ainda esconder a linha do percurso com um click no local que se indica.


15

7. Gravação e publicaçãoA publicação de um documento flash é efectuada em duas etapas. Numa primeira é

necessário definir todos os requisitos da publicação e numa segunda proceder

efectivamente à respectiva publicação.

Escolha File > Publishing Setting e terá acesso à seguinte caixa de diálogo.

O ícone permite alterar a pasta em que cada um dos tipos de ficheiro será

guardado.

Opções possíveis e respectivos significados:

Flash (.swf)Ficheiro que pode ser integrado numa página da Web e

visualizado com o Flash Player

HTML (.html) Página html de suporte ao filme.

GIF Image (.gif)

JPEG Image (.jpg)

PNG Image (.png)

Imagem, para o caso do flash player não estar

disponível.

Windows Projector (.exe) Ficheiros cujos filmes correm sozinhos, em diversos


16

Macintosh Projector

Quick Time (.mov)

formatos.

Uma vez escolhidas as opções pretendidas deverá utilizar o botão para

gerar os respectivos ficheiros nas pastas indicadas.

8. MáscarasAs máscaras podem ser utilizadas com qualquer tipo de animação excepto Motion

Path.

Numa Layer escreva um texto.

Insira uma nova Layer, acima da actual, utilizando o ícone .

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

parcialmente sobreposta ao texto.

Para definir a máscara escolha, no menu local a opção Mask. As máscaras funcionam

sempre com duas layers que têm que estar consecutivas.


17

Para proceder à animação da máscara deve desbloquear a Layer 2 (a da máscara) e

aplicar, por exemplo a técnica de animação de Motion Shape. A máscara só ficará

com visualização correcta de a tornar a bloquear.

9. BotõesOs botões em Flash são compostos de quatro frames interactivas.

Pode criar um botão conjugando um texto sobre um rectângulo colorido ou

qualquer outra forma.

Uma vez criada a forma deve converte-la em Symbol > Button, escolhendo Modify >

Convert to Symbol e atribua-lhe o nome botão.

Este símbolo é automaticamente colocado na Library e só pode ser modificado se

sobre ele se fizer um duplo click.

Ao modificar o botão percebemos a existência das quatro frames interactivas,

correspondendo cada uma delas à possibilidade de uma forma diferente para o botão.

Up Aspecto sem actividade sobre o botão

Over Quando o cursor está sobre o botão

Down Quando se faz um click sobre o botão

Hit Definição da área de click, que é invisível no filme.


18

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 botão, por exemplo ponto o texto a cinzento ou o contorno a preto.

Teste o funcionamento do botão optando por Control > Test Movie ou conjugando as

teclas Ctrl e Enter.

9.1 Botões com som

O primeiro passo deverá ser a importação do som para a Library para o que deverá

escolher File > Import > Import to Library.

E o som ficará disponível na janela da Library. (pode, a título de exemplo, utilizar os

sons do Windows em Windows\Media).

Se pretender que o som seja audível quando se faz um click sobre o botão bastará

alterar a frame Down e, nas propriedades escolher o som já importado para a Library.


19

9.2 Atribuição de funções aos botões

Tentemos construir o seguinte exemplo:

O título e os dois botões representados à esquerda são constantes ao longo de todo o

tempo da aplicação, pelo que podemos colocá-los numa mesma layer, que

designaremos botões. Utilize as técnicas descritas nos pontos 8 e 8.1 para construir

essa layer.

Pode sempre ver o resultado da construção escolhendo as opções 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 visível durante 25 frames fazendo um Insert

Frame na frame 25 da layer correspondente.


20

Obterá um resultado do seguinte tipo:

Se correr o seu filme reparará que na frame 1 estão visíveis os botões e a imagem, o

que não se pretende, pois essa frame corresponderá ao local onde se escolher ver a

imagem ou o texto.

Faça 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 visível da frame

26 à 35.

Como a layer dos botões deve estar visível durante todo o tempo, vamos estendê-la

até à frame 35. Para o conseguir basta efectuar um Insert Frame na frame 35 da layer

botões.

Por fim, para terminar o aspecto gráfico da aplicação, basta inserir uma nova frame

com o botão de regresso à página de escolha que está visível em todas as frames,

excepto a primeira.

Decididos os tempos de exposição de cada um dos objectos é necessário incluir as

paragens necessárias para que as escolhas de menu possam ser efectuadas e incluir

as ordens nos botões.

Vamos começar por inserir uma nova layer, designada ordens, onde serão colocadas

algumas dessas ordens


21

A primeira ordem será a inclusão de uma paragem na fame 1. Seleccione a frame 1 da

layer ordem, onde será colocada a ordem de paragem.

Utilize o símbolo 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 aplicação e verá que ela pára na frame 1.

A aplicação 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 é necessário inclui Keyframes em cada uma delas.

Vamos agora atribuir funções aos botões.

Para o botão imagem pretende-se que, ao fazer sobre ele um click, a aplicação vá

para a frame 2 que corresponde ao início da imagem e corra a partir daí.

Para o conseguir marque o botão imagem e escolha na Action Button (note que no

caso das acções para botões a action passa a designar-se Button) seguinte sequencia

de ordens: Global Functions > Movie Clip Control > On. Na caixa de diálogo seguinte

escolha release.


22

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

E escolha agora Global Functions > Timeline Control> gotoAndPlay e entre os

parêntesis escreva 2 que corresponde à frame onde se pretende reiniciar a aplicação,

por ser a frame inicial da imagem.

Proceda de modo semelhante para os outros dois botões da aplicação, tendo sempre

em conta as frames para onde cada um deles deve enviar.

10. Ligações à InternetAs ligações a outros sites da Internet podem ser efectuadas sobre botões ou sobre

campos de texto.

Para efectuar uma ligação a partir de um campo de texto, ou uma parte dele, marque-

o e, nas propriedades do campo de texto escreva o endereço de destino em . Se,

na caixa de diálogo Target, escolher _blank o endereço da Internet será aberto numa

nova janela.


23

Se pretender uma ligação a partir de um botão deverá escolher Global Functions >

Movie Clip Control > On e na caixa de diálogo seguinte escolha release.

Seguidamente opte por

E dentro dos parêntesis deverá escrever o endereço 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 endereço quer o parâmetro _blank devem ser escritos entre aspas.

11. SomTodos 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.


24

Aqui pode alterar o método de compressão. Aconselha-se o método MP3 mas, se

alterar alguma característica do som deve fazer-lhe o Update, ainda nesta caixa de

diálogo. Ainda aqui é possível 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.


25

Event Uma nova instância do som é iniciada

sempre que o filme passa pelo seu início.

Pode original sobreposição de sons se

iniciarmos uma audição sem ter

terminado a anterior.

Start Semelhante à anterior mas só inicia uma

nova instância do som quando a anterior

já tiver terminado.

Stop Pára a instância que está a tocar.

Stream Sincroniza o som com a animação

Software

Manualflash