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
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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.
Desenho, animação e interacção com o Macromedia Flash
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
Recommended