Multimédia e diferentes tipos de Media

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.

Animação de objetos no Adobe Animate

COMO ANIMAR UM OBJETO NO ANIMATE CC?

O velhinho Flash alterou o nome para Animate. Vamos ver como criar uma animação utilizando os três tipos de interpolação disponíveis (clássica, movimento e forma).

Este será o resultado final:

1 - CRIAR UM NOVO DOCUMENTO E DESENHAR OBJETOS:

Quando aparece o painel inicial, escolhemos ActionScript 3.0 com as medidas de 550 X 400px.

No caso de não aparecer o painel, acedemos ao Arquivo | Novo (Ctrl+N) para criar um novo documento em branco e colocamos as medidas no painel das Propriedades. Salvamos o documento e atribuímos o nome Animacao.fla.

2 - ANIMAÇÃO CLÁSSICA COM NUVENS E AVIÃO:

Criamos a camada Cenário e desenhamos o céu e as montanhas com as ferramentas primitivas e a caneta.

Bloqueamos a camada Cenário e na nova camada Nuvens vamos utilizar a ferramenta Caneta (P) para desenhar as nuvens.

Selecionando as nuvens, vamos salvar este objeto como símbolo de clipe de filme (F8) ou através do Modificar | Converter em símbolo com o nome de nuvem. Depois de pressionar o OK podemos verificar que o símbolo está criado na biblioteca.

Para animar a nuvem, entramos dentro do símbolo de clipe de filme nuvem através de dois cliques e criamos um fotograma chave (F6) nos 20 fps.

Com este fotograma selecionado alteramos a posição da nuvem para a direita.

Para atribuir o movimento, posicionamos a cabeça de leitura antes do frame 20 e acedemos ao menu Inserir | Interpolação clássica.

Saímos do objeto nuvem pressionando na Cena1 ou clicando duas vezes fora do palco.

3 - ANIMAÇÃO DE MOVIMENTO COM BONECO:

Criamos uma nova camada Boneco e vamos desenhar um boneco criando as várias partes do corpo dentro de camadas com o respetivo nome para depois salvando todo o boneco como clipe de filme. Podes verificar o nome das camadas do clipe boneco mais adiante quando formos animar os braços e pernas

Desbloqueamos as outras camadas e selecionamos o quadro 40 de todas as camadas para inserir quadros repetidos (F5).

Selecionamos o quadro 40 da camada Boneco e escolhemos o menu | Inserir | Interpolação de movimento. Arrastamos o boneco para a direita e ajustamos o tracejado do caminho com a ferramenta de seleção (V).

Podemos movimentar a cabeça de leitura e verificar que o boneco t em movimento

Vamos agora atribuir movimento aos braços e pernas. Para isso, entramos dentro do símbolo boneco através de dois cliques e adicionamos quadros (F5) até ao quadro 10 em todas as camadas.

Selecionamos cada uma das camadas, à exceção da camada corpo, e na linha do tempo atribuímos interpolação de movimento.

Selecionamos a camada Braço direito e com a ferramenta de transformação livre (Q) ajustamos o ponto branco no local central onde se realiza a rotação.

Nesta mesma camada, inserimos um fotograma chave (F6) no quadro 10 e colocamos a cabeça de leitura no quadro 5 para inserirmos outro quadro-chave (F6). Nesta posição do quadro 5 selecionada, rodamos para o lado oposto com a ferramenta de transformação livre.

Fazemos estes passos de ajustar o ponto branco de rotação e de inserção de fotogramas chave nas camadas do outro braço e pernas. Salvamos o ficheiro e pressionando no botão Ctrl+Enter podemos verificar a animação a acontecer.

 

4 - ANIMAÇÃO DE FORMA COM NUVENS:

Entramos no símbolo nuvem até editarmos e copiamos a sua forma.

Apagamos a nuvem no palco e desenhamos outra na camada Nuvens. Com a camada da nuvem selecionada, criamos um clipe de filme (F8).

Pressionamos duas vezes em cima da nuvem entramos no objeto.

Inserimos um quadro chave no quadro 80, alteramos o posicionamento, a forma da nuvem e a transparência no canal alfa do Painel de Cor.

Selecionamos um dos quadros antes do 80 na linha do tempo e inserimos a interpolação de forma.

.

5 - PUBLICAR:

Acedemos ao menu Arquivo | Configurações de publicação. Escrevemos o nome e escolhemos 
o formato de ficheiro a publicar. Pressionamos Publicar e OK.

 CONCLUSÃO: 

Apesar do Flash ter alterado o seu nome e ter ficado mais potente, as ferramentas e método de trabalho mantém-se idênticos. Este tutorial serve para comprovar e explicar de forma simples os três tipos de interpolação existentes no novo Animate. Se pretendermos animações pré-definidas, o programa oferece um painel “Predefinições de movimento” prontas a utilizar.