Criar animações no Adobe Fireworks

COMO CRIAR ANIMAÇÕES NO FIREWORKS?

Este programa permite criar um website onde podemos trabalhar animações de estados pré-definidos em botões e animações. Vamos testar estas animações através de GIF´s animados e a navegação entre páginas no navegador.

1 – CRIAR UMA HIPERLIGAÇÃO:

Desenhamos um documento simples e criamos um hotspot (zona quente) com a ferramenta Slice (Fatia) K.

Com o hotspot selecionado, inserimos na barra de propriedades os textos nos campos:

·         Vínculo: indicação do URL de destino;

·         Texto Alternativo: texto que aparece caso a imagem não apareça.

·         Destino: forma de abertura da nova página.

               
Exportamos o documento com o formato .pdf e visualizamos a hiperligação.

2 – ADICIONAR INTERATIVIDADE AO BOTÃO:

Desenhamos um retângulo arredondado na página e convertemos o objeto para símbolo F8 no tipo de Botão.

Escolhemos a opção Botão e atribuímos um nome. Este símbolo será visualizado na biblioteca do documento.

Pressionamos duas vezes para entrar no símbolo e escrevemos o nome do primeiro estado, que aparece na barra de propriedades, com a ferramenta de texto.

Selecionamos o segundo estado na barra de propriedades e pressionamos no botão “Copiar gráfico acima” para aparecer o botão criado anteriormente.

Alteramos o texto e aparece a mensagem para atualizar o texto nos outros estados do botão. Indicamos a opção Não.

Fazemos a mesma operação para os restantes estados.

Alteramos o aspeto de todos os botões na barra de propriedades.

Saímos de dentro do símbolo e carregamos no “Visualizar”.

3 – CRIAR PÁGINA NOVA E PÁGINA-MESTRE:

Duplicamos a página existente através das opções no menu Páginas.

Alteramos o nome das páginas e deixamos apenas os elementos referentes a cada uma das páginas. Na página Template irá conter todos os elementos que são visualizados nas restantes.

A página Início irá conter apenas os elementos que pertencem à página sem os que aparecem no Template.

Criamos uma segunda página Final a partir da página Início. Esta nova página irá conter apenas os elementos que pertencem à página e arrastamos o botão para o lado direito.

Selecionamos a página Template e nas opções escolhemos Definir como página-mestre.

Selecionamos as restantes páginas e nas opções escolhemos Vincular à página-mestre.

Na página Inicio vamos selecionar o botão e indicar no painel de propriedades o:

·         Vínculo: final.html

·         Texto Alternativo: texto…..

·         Destino: _self

Na página Final vamos selecionar o botão e indicar no painel de propriedades o:

·         Vínculo: inicio.html

·         Texto Alternativo: texto…..

·         Destino: _self

Para testarmos no navegador estes botões de navegação entre páginas, vamos a Arquivo | Exportar o projeto com todas as páginas para HTML.

4 – ANIMAR OBJETOS NOS ESTADOS MANUALMENTE:

Criamos um novo documento ou utilizamos a página Inicio onde desenhamos um retângulo que vamos animar.

Abrimos o painel Estados e escolhemos a opção Duplicar estado onde indicamos o número de 3 duplicações após o estado atual.

Fazemos as alterações que pretendemos nas propriedades do retângulo em cada um dos restantes estados.

Para testar a animação acedemos ao menu Arquivo | Salvar como onde escolhemos a opção GIF animado.

Para visualizar, abrimos o ficheiro salvo dentro do navegador.

5 – ANIMAR OBJETOS NOS ESTADOS AUTOMÁTICO:

Selecionamos o retângulo e acedemos ao menu Modificar | Animação | Animar seleção.

No quadro aparecem as opções de criar os estados, o movimento, a direção, a dimensão, opacidade e rotação.

Após pressionarmos OK aparece a mensagem a indicar que novos estados vão ser criados. 

Para testar a animação acedemos ao menu Arquivo | Salvar como onde escolhemos a opção GIF animado.

Para visualizar, abrimos o ficheiro salvo dentro do navegador.

CONCLUSÃO:
Este programa permite criar protótipos de sites ou aplicações com recurso a botões animados com estados alterados, páginas-mestre e animação nos objetos.