Como criar e testar animações no Fireworks CS5

A criação de imagens é um processo simples em Adobe Fireworks Creative Suite 5. Criação de imagens para animações também é simples, mas um pouco diferente, em que as imagens são criadas a partir de vários estados que desempenham um após o outro para criar a ilusão de movimento.

Criar uma animação

Para criar uma imagem para animação, siga estes passos:

  1. Crie ou abra o objeto que você deseja animar.

    Para este exemplo, criar um círculo com a ferramenta Ellipse.

  2. Com a ferramenta Ponteiro, selecione o círculo.

  3. Escolha Janela-Membros.

    O painel Unidos será exibido, listando um estado.

    image0.jpg
  4. A partir do menu do painel no canto superior direito, escolha Duplicar estado.

    A caixa de diálogo Duplicar estado aparece.

  5. Use o controle deslizante Número de acrescentar três novos estados.

  6. Na seção de Insert New Unidos, selecione o botão de rádio Depois de estado atual e clique em OK.

    Porque todos os estados são idênticos, você não vê nenhuma mudança. Os objectos são posicionados em cima um do outro.

    image1.jpg

Use papel de transparência para obter um bom fluxo

O papel de transparência pode ser uma grande ajuda quando você está tentando criar um bom fluxo para uma animação. O papel de transparência dá-lhe a oportunidade de editar o estado selecionado, mas view (em uma visão escurecida) os estados que vêm antes e após o estado selecionado.

image2.jpg

Para usar o papel de transparência em uma animação, siga estes passos:

  1. Selecione a linha 2 de estado no painel Estados.

  2. Clique no botão Onion Skinning no canto inferior esquerdo do painel.

    A lista drop-down é exibida.

  3. Selecione Mostrar todos os estados para mostrar um estado antes e um após o estado selecionado.

Faça o movimento animação

Criando a animação real certamente não é ciência de foguetes, mas você precisa prestar atenção para o estado que você selecionar antes de fazer a sua jogada.

Para colocar sua animação em movimento, siga estes passos:

  1. Selecione Estado 2 no painel Estados para ver o círculo estado 2.

  2. Usando a ferramenta Ponteiro, arraste o círculo ligeiramente para cima e para a direita.

  3. Selecione Estado 3 para ver o círculo estado 3.

  4. Arraste o círculo abaixo e à direita do círculo estado 2.

  5. Selecione Estado 4 para visualizar o círculo estado 4.

  6. Arraste o círculo acima e à direita do círculo estado 3.

    Você deverá ver um fluxo que - de uma forma primitiva - representa uma bola quicando.

    image3.jpg

Teste a animação

Você pode testar uma animação diretamente na prancheta de-artifício ou na web.

Teste no Fireworks

O Fireworks oferece vários controles de reprodução no lado direito da janela de prancheta. Para usar esses controles para testar uma animação no Fireworks, siga estes passos:

  1. Clique no botão Play para iniciar a animação.

    Observe que o botão PLAY muda para o botão Parar.

  2. Depois de jogar a animação, clique no botão Parar para parar a animação.

Teste na web

O recurso Visualizar no navegador lhe dá uma idéia mais precisa de como a animação aparece para o telespectador. Este procedimento é tão fácil que há etapas são necessárias: Escolha Arquivo-Visualizar no navegador e selecione o navegador em que você deseja visualizar a animação.

Se a animação não funciona no seu navegador, certifique-se que você tenha GIF selecionado como o formato de exportação do arquivo no painel Otimizar no Fireworks.

menu