Hoje no Info Dúvida vou explicar-vos com pode fazer animações interativas de uma forma muito simples em Flash. As animações flash podem ser muito úteis quando querem fazer um site com unidades interativas, em apresentações, etc. O Adobe Flash CS6 é uma ferramenta muito poderosa para a produção de animações flash, contudo um pouco complexa. Então, fica aqui um tutorial de como fazer uma animação muito simples.
Vamos fazer uma animação para aprofundar conhecimentos acerca da célula animal.
Design
1. Preparar todas as imagens que vamos precisar num programa de edição de imagem.
2. Abrir o Adobe Flash (CS6) e escolher “ActionScript 3.0”.
3. Personalizar o tamanho da animação. Para isso deverão ir a “Modify”>”Document…” e alterar as dimensões para os valores pretendidos.
4. Fazem “OK” e importam as vossas imagens para a “Library”. Para isso podem arrastar as imagens para o painel lateral ou então “File”>”Import”>”Import to Library” onde deverão escolher as imagens que irão usar na animação e fazer “Open”. Feito isto, as imagens deverão aparecer no painel “Library” do lado direito.
5. Para inserir as imagens para a área da animação basta arrastar o ficheiro da “Library” para a área respectiva. Pode fazer as edições que achar pertinentes, como redimensionar (Clique com o botão direito do rato>”Free Transform” e ajustar as dimensões da imagem), posicionar (deverá estar a usar a ferramenta “Selection Tool” (pode ativar clicando em “V”)), entre outras operações simples. A inserção de texto é também bastante simples, bastante clicar em “Text Tool” ou pressionando “T”. Poderá escolher tamanha, cor e tipo de letra no painel “Properties” da selecção.
Os aspecto final da montagem deverá ser o seguinte…
6. Este será o slide de abertura. Agora vamos criar um outro que será ativado pelo clique em um determinado local. Vamos definir o Núcleo da Célula. Para isso voltamos ao separador “Library”, clicamos com o botão direito do rato e depois em “New Symbol…” Damos um nome ao botão, escolhemos o “Type” igual a “Button” e faz-se “OK”. Irá aparecer um novo painel de edição do botão. Aí deverá desenhar uma forma oval, neste caso, com a ferramenta “Oval Tool” que pode ser ativada pela tecla O. O botão não deverá ter cor de fundo e linha, a menos que assim seja pretendido. Finalizada a construção do botão deverá clicar em “Scene 1” (canto superior esquerdo da área de trabalho. Arrasta o botão para a zona pretendida a ajusta-o da melhor forma, como se de uma imagem se tratasse.
7. Criar um novo slide com informações sobre o núcleo, neste caso uma imagem do núcleo da célula. Para isso deverá clicar no frame imediatamente a seguir ao atual.
Clicar com o botão direito do rato no segundo Frame e em seguida em “Insert Blank Keyframe”.
8. Construir o novo slide da mesma forma que o primeiro. Deverá ficar mais ou menos assim…
Programação
1. Agora chegou a parte de programar as acções. Vamos voltar ao primeiro “Frame”, clicando sobre esse “Frame” no painel de rodapé. Clicar em “Code Snippets”>”Timeline Navigation” e faça duplo clique em “Click to Go to Frame and Stop”.
Irá aparecer uma painel em linha de código ao qual deverá acrescentar na primeira linha
stop()
E depois substituir o 5 que vem pré-definido no código “gotoAndStop(5);” pelo Frame pretendido, neste caso o 2.
Agora basta fechar a ferramenta de código.
Selecionar o “Frame” 2 e fazer clique sobre o butão “Home” adicionado no canto superior esquerdo e repetir o mesmo procedimento de Programação, mas remetendo para o “Frame” 1.
A interactividade está agora concluída, para pré-visualizar o seu funcionamento deverá ir a “Debug”>”Debug Movie”> “Debug”.
Quando terminar a tarefa, basta exportar o documento em .swf através do comando “File”> “Publish”.
O resultado final é este.