Curso Profissional Técnico de Multimédia

Formação Técnica 1

2º ano – Módulo IV Animação 2D

Ficha de Trabalho nº1

Objetivo: Criar uma animação básica com Flash

Introdução
Esta ficha vai-te ajudar a compreender os princípios básicos do Flash - tal como layers, tweens,
cores, texto, linhas e formas.

Configurar o Movie
Vamos começar por configurar as propriedades do filme. Nem todos os filmes são criados
da mesma forma, existem diversos fatores que podem variar tal como cores de fundo, largura,
altura, frames por segundo, etc.
Nos próximos passos vamos explicar como configurar o filme para criar a animação.

1. Cria um novo documento no Flash. Escolhe menu File - comando New. Um novo documento
em branco é exibido. Primeiro começamos por definir as propriedades do filme. Cor de fundo,
dimensões e velocidade.

2. No painel Properties pressiona o botão Size 550x400 pixels e a caixa de diálogo Document
Properties é exibida. Nos campos width e height introduz os valores 300 e 200,
respetivamente.

3. A seguir pressiona no quadrado Background Color e escolhe como cor de fundo laranja a
partir da paleta de cores.

4. O último passo é definir a velocidade do filme em frames por segundo (fps). Quanto maior for
o valor (fps) mais rápido o filme é reproduzido. Neste caso vamos usar 20 (fps).

5. Pressiona o botão OK para fechar a caixa de diálogo. O filme vai refletir as alterações
efetuadas.

Iniciar criação de objtetos

Recomendamos que graves com frequência o teu trabalho. Por vezes ocorrem erros que
provocam que o Flash se feche sem nos dar a possibilidade de gravar o que estávamos a fazer.
Agora que o filme está configurado, vamos acrescentar texto, linhas e formas (shapes) na
área de trabalho.
Antes de criarmos animações, precisamos de criar objetos. Objetos no Flash podem ser
qualquer coisa, desde uma linha, até textos ou imagens. Podemos converter os objetos em botões,
gráficos ou movie clips.
Para já, vamos criar uma caixa e um texto.

1. Seleciona a ferramenta Text na caixa de ferramentas que está normalmente no lado direito
do ambiente de trabalho.

Projeto nº POCH-_________________________________________
 2. Depois dá um clique na área de trabalho e escreve a palavra Flash.

3. A seguir escolhe a ferramenta Selection Tool(V) e seleciona a caixa de texto que acabaste
de criar.

4. No painel Properties faz as seguintes alterações:

Escolhe a fonte Verdana; altera o tamanho para 25; negrito e a cor para branco.
À medida que efetuas as alterações, o texto é atualizado em tempo real na área de trabalho.
Completamos a fase de criar o nosso texto. É altura de lhe dar uma animação.

Animação
Com o texto criado e formatado, vamos animá-lo. Os próximos passos vão ajudar-nos a criar uma
animação para o texto Flash que acabamos de criar.

1. Seleciona o texto e arrasta-o para fora do palco, para o lado esquerdo. Por outras palavras
assegura-te que o texto fica fora do palco em cima do fundo cinzento. Clica no palco para
desselecionar o texto.

2. Acede à Timeline. A Timeline é o painel que está normalmente no fundo do ambiente do

Flash. A Timeline é a área onde montámos o nosso filme de Flash. É como se fosse uma
película de um filme e o Stage o ecrã que exibe cada frame da película. Em consequência e
porque podemos criar interatividade num filme de Flash, podemos permitir ao utilizador
selecionar qual a parte do filme que pretende ver.

3. Na Timeline seleciona a frame 25 e pressiona a tecla (F6) ou com o botão direito do rato
escolhe o comando “Insert Keyframe”. Depois de termos escolhido o comando “Insert
Keyframe”, vamos ver um pequeno ponto negro dentro da frame 25. Este ponto chama-se
Keyframe.

4. Selecione o ponto negro “keyframe” na frame 25. Repara que o texto fica automaticamente
selecionado.

5. Com as teclas de direção mova o texto para a direita. Se pressionares a tecla [Shift] em
simultâneo o texto movimenta-se mais rapidamente. Para assim que o texto estiver fora do
palco mas desta vez à direita.

6. Agora estamos prontos para criar a animação. Na Timeline posiciona o cursor do rato entre
a frame 1 e a frame 25 e dá um duplo clique.

7. Com o botão direito do rato escolhe o comando “Create Classic Tween”: Acabamos de
criar a nossa animação. É altura de gravar o filme e visualizar a animação.

8. Grave o filme com o nome Animação1.fla.

Projeto nº POCH-_________________________________________
 9. Pressiona as teclas Ctrl+Enter ou escolhe o menu Control – comando Test Movie. Vamos
ver a animação a correr da esquerda para a direita.

Ainda não acabamos esta ficha. Vamos acrescentar um background e utilizar alguns
layers/camadas. Vamos utilizar layers/camadas para criar um background na animação. Mas antes
de continuarmos vamos aprender um pouco sobre layers/camadas.

Layers
O Flash usa layers/camadas para organizar os vários objetos de uma animação. Na
realidade estivemos sempre a utilizar layers/camadas. Se olharmos para a Timeline vemos algo
que diz Layer 1. Esta é a layer/camada que utilizamos na animação do texto Flash.
Deves ter reparado que a frase Flash está dentro de uma layer/camada chamada Layer 1.
É altura de renomearmos esta layer/camada com um nome mais intuitivo.

1. Dá um duplo clique sobre a Layer 1 na Timeline. Nesta altura o nome do Layer 1 fica
editável e podemos escrever um novo nome.

2. Renomeia a Layer 1 para Texto.

3. Agora vamos criar uma nova layer/camada para desenharmos um background. Dá um

clique com o botão direito do rato sobre a camada Texto e escolhe o comando Insert
Layer. Uma nova layer/camada é criada com o nome Layer 2

4. Renomeia a layer/camada para Background.

Neste momento temos duas layers/camadas na Timeline; uma chamada Background que é
onde vamos criar um fundo e outra chamada Texto que contêm a animação que criamos a pouco.
Uma coisa que devemos saber sobre as layers/camadas é que as layers/camadas são como
os andares de um edifício. O telhado tapa o andar de cima que por sua vez tapa o andar de baixo.
Nas layers/camadas o princípio é o mesmo, se colocarmos uma layer/camada em cima de
outra e o preenchermos com qualquer coisa, não vamos conseguir ver o que está na layer/camada
de baixo.

5. Neste caso, pretendemos criar um background para complementar a animação que

criamos, logo a layer/camada Background deve ficar por baixo da layer/camada Texto.
Para alteramos a ordem das layers/camadas damos um clique sobre a layer/camada
Background e arrastamo-la para baixo. A layer/camada Background passou para baixo.

Acrescentar um background
1. Seleciona a primeira frame vazia da layer/camada Background.

2. A partir da caixa de ferramentas escolhe a ferramenta Oval. O painel Properties em baixo

reflete as opções disponíveis para esta ferramenta tais como cor do contorno Stroke color,
cor do preenchimento Fill color, espessura da linha Stroke size e estilo da linha Stroke
Style.

Projeto nº POCH-_________________________________________
 3. Clica no 1º quadrado colorido referente à cor do contorno Stroke color, escolhe a opção
sem cor da paleta de cores exibida. A opção sem cor No color da paleta é aquela que tem
um traço vermelho na diagonal.

4. Clica no 2º quadrado colorido referente à cor do preenchimento Fill color. Escolhe um

laranja claro da paleta de cores exibida.

5. Agora é altura de desenharmos alguns círculos para o background da nossa animação. Clica
no palco e arrasta o rato até termos criado um círculo com o tamanho que desejamos.

6. Repete o passo de cima até termos vários círculos a preencher o fundo ou seleciona o
círculo e copia-o.

7. Grava o ficheiro e a seguir pressiona as teclas Ctrl+Enter ou escolhe o menu Control –

comando Test Movie para visualizarmos a animação.

Acabaste de criar uma pequena animação no Flash. Ao completares esta ficha foste capaz
de trabalhar com texto, layers, e animações.

Projeto nº POCH-_________________________________________