PESQUISA: 

 

Fórum de Flash
Fórum de discussão sobre Flash moderados por especialistas.

tutoriais
Os melhores tutoriais de Flash escritos em Português.

open sources
Milhares de "open sources" devidamente catalogadas e classificadas.

jogos
Centenas de viciantes jogos desenvolvidos em Flash.

websites
Selecção dos melhores websites em Flash.

bibliotecas
Bibliotecas de software, componentes, fontes e sons para Flash.

artigos
Artigos técnicos indispensáveis para profissionais em Flash.

Newsletter
Receba todos os dias a newsletter do Flash Web Training com as principais notícias sobre tecnologia e informática.
 
Curso Online
Curso de Flash 5 e MX com acompanhamento de formadores especializados.
 
flash shopping
Online Store com os melhores produtos dedicados ao Flash.
 
conferências
Principais conferências e eventos sobre Internet e Novas Tecnologias.
 
job opportunities
Anúncios de emprego para empresas que procuram profissionais de Flash.
 
suporte técnico
Caso tenha alguma dificuldade, contacte o nosso suporte técnico.

 

 
Homepage Tutoriais Intermédios
Ficha Técnica
Autor: Flash Web Training
Versão: Flash MX 2004
Dificuldade: Intermédio
Data de Publicação: 31/03/2004

Introdução

Uma das evoluções que se denotam logo à partida no Flash MX 2004, são os efeitos da timeline. Os efeitos da timeline são uma colecção de efeitos especiais que podem ser personalizados e aplicados a um objectos na nossa stage como a um Movie Clip, Graficos, etc.

Se alguma vez utilizaram programas como o Wildform’s Wild FX ou o Red Giant Software’s Text FX, devem ter visto como poderiam facilmente adicionar efeitos de texto com um simples clique de um rato. Os efeitos da timeline do Flash MX 2004 podem ser conseguidos de forma semelhante, mas estes efeitos não são limitados apenas ao texto. Poderemos aplicar os efeitos da timeline a qualquer objecto.

A animação que se segue dá a conhecer um exemplo de quatro tipos de efeitos da timeline que já vêm com o Flash MX 2004. Cliquem sobre cada um dos efeitos que se encontram na animação, para poderem testá-los antes de começarmos a criá-los.

Ficheiro Swf

Clique com o botão direito do rato sobre o filme para visualizar o menu de opções

Downloads:

Flash Player icon Ficheiro Fla Tutorial em PDF

Este tutorial irá explicar a maneira de aplicar estes efeitos da timeline.

1. Criem um novo documento no Flash MX 2004. Atribuam as dimensões do filme, Width e Height para 300 e 200.

2. Uma vez terminado, desenhem um circulo na vossa stage usando a ferramenta de circulo Oval, existente na vossa caixa de ferramentas.

3. Agora, seleccionem o circulo que desenharam e pressionem a tecla de F8. Irá surgir a vossa caixa de diálogo de Convert to Symbol. Seleccionem a opção de Graphic e pressionem a tecla de OK.

4. Um vez terminado, deveremos gravar o nosso ficheiro. Para tal vamos ao menu File e de seguida escolhemos a opção de Save. Gravem este ficheiro como timeline effects. Iremos usar este circulo convertido para gráfico para cada um dos efeitos da timeline. Não gravem por cima este ficheiro.

Blur Effect

O primeiro efeito que vamos explicar é o efeito Blur. Seleccionem o vosso circulo e dirijam-se ao menu Insert. De seguida escolham as opções de Timeline Effects/Effects/Blur. Uma janela de edição do efeito Blur deverá surgir de seguida. Deveremos ver uma pequena animação do vosso circulo já com o efeito Blur, onde poderemos ver algumas opções e a maneira de como personaliza-las.

Vamos explicar o que cada uma das opções pretende fazer na animação:

· Effect Duration

Especifiquem o número de frames que querem para que o efeito de blur continue. Para um efeito rápido de blur insiram um valor reduzido. Para um efeito maior, devem introduzir um número mais elevado.

· Resolução

Especifiquem o número individual de cópias do vosso objecto que será usado para criar o efeito blur. O efeito blur basicamente copia o vosso objecto e redimensiona-o enquanto vai desaparecendo ao mesmo tempo. Quanto maior for o valor atribuído, maior numero de objectos serão dimensionados e esvanecendo durante a duração que especificaram.

· Tamanho

Especifiquem o valor do tamanho para cada cópia do vosso objecto que foi criado para simular o efeito de blur.

· Permitir o Horizontal Blur e permitir Vertical Blur

Especificar se queremos que o efeito de blur ocorra somente numa direcção. Notem que ao activar ou desactivar essas opções, poderemos ajustar a direcção na qual o efeito de blur irá ocorrer.

· Direcção do Movimento

As nove setas poderão ajudar-vos a definir a direcção do efeito blur do movimento.

Quando activamos as opções para permitir o efeito Horizontal Blur e para permitir o efeito Vertical Blur, o efeito é orientado a partir do centro como demonstrado do rectângulo verde. Se pressionarmos ambos os botões como o topo direito, iremos ver que a animação irá deslocar-se no sentido do topo direito.

Se activarmos somente o efeito de Vertical Blur, seremos somente capazes de ajustar o movimento no sentido vertical. O oposto é igual se activarmos somente a opção do efeito Horizontal.

Podem neste momento pressionar a opção de Update Preview para verem como está a animação neste momento. Para finalizar este efeito, pressionem OK, e façam preview à vossa animação, pressionando as teclas de Ctrl+Enter ou vejam através da janela do browser.

Gravem este ficheiro com qualquer nome, porque é aconselhável que não re-escrevam a timeline original com os efeitos, criados anteriormente num ficheiro .fla . Iremos utilizar este ficheiro para os outros três efeitos que pretendemos criar.

Shadow Effect

Abram a timeline com os efeitos que criaram anteriormente. Este filme não deve conter quaisquer efeitos, ou alguma coisa previamente feita. Deve somente conter o circulo gráfico que fizeram anteriormente. Seleccionem o seu circulo gráfico e dirijam-se ao menu de Insert. Escolham as opções de Timeline Effects/Effects/Drop Shadow.

Algumas explicações sobre as propriedades deste efeito:

· Cor

Nesta opção poderemos activar qual a cor que desejamos que a nossa animação tenha. Cliquem sobre a opção da cor, e irá surgir uma palete de cores para que possam escolher livremente.

· Alpha Transparency

Esta opção especifica a transparência da vossa sombra. Um número bastante elevado tornará a vossa sombra bastante opaca – mas não transparente na sua totalidade. Um número baixo irá tornar a vossa sombra bastante transparente.

· Shadow Offset

Quando olhamos para a nossa sombra na área de preview na nossa direita, iremos notar que a nossa sombra está localizada alguns pixels abaixo e à direita do nosso gráfico original. Nas caixas de X e Y, deveremos especificar o número de pixels para a nossa sombra que irá partir através do nosso gráfico original.

Não estamos limitados somente a valores positivos. Poderemos introduzir valores negativos para que a nossa sombra se dirija para o topo, topo-esquerda, ou para a esquerda no nosso gráfico original.

Como sempre, poderemos pressionar o botão de Update Preview para podermos ver de que forma está a nossa sombra depois da personalização que fizemos. Gravem esta animação com o nome de drop shadow e abram a vossa timeline de efeitos original, criada anteriormente.

Expand Effect

Abram a vossa timeline com os efeitos que criaram anteriormente. Este filme deve não deve conter quaisquer efeitos ou qualquer coisa semelhante. Deve somente conter o vosso círculo gráfico. Seleccionem o vosso circulo gráfico e dirijam-se ao menu Insert. Escolham a opção de Timeline Effects/Effects/Expand.

A personalização deste efeito é um pouco complicada, mas o seu efeito poderá tornar-se bastante agradável à nossa vista.

Vamos tentar de seguida explicar cada uma das opções deste efeito:

· Effect Duration

Estas definições especificam o número de frames que o nosso efeito irá percorrer.

· Expand/Squeeze/Both

O efeito de expand pode não somente expandir, mas pode igualmente apertar ou fazer ambos os efeitos se assim forem especificadas as definições.

· Direction of Movement

Em que direcção deverá o nosso círculo gráfico mover-se enquanto se expande/aperta/ou ambos os casos? Poderemos aqui especificar qual a direcção que queremos que o efeito tome.

· Shift Group Center By

Os números que aqui forem introduzidos vão especificar onde será o centro da animação enquanto o efeito decorre.

· Fragment Offset

Esta é uma opção semelhante à Shift Group.

· Change fragment size by

Aqui é onde vamos especificar o quanto o nosso objecto irá expandir-se/apertar.

A última definição – Change fragment size – é provavelmente uma das mais importantes definições deste efeito. Se ignorarmos todas as outras opções e centralizarmo-nos mais sobre este efeito teremos a nossa animação quase completa.

Gravem este ficheiro com o nome de expand effect.

Explode Effect

Abram a vossa timeline com os efeitos que criaram anteriormente. Este filme deve não deve conter quaisquer efeitos ou qualquer coisa semelhante. Deve somente conter o vosso circulo gráfico. Seleccionem o vosso circulo gráfico e dirijam-se ao menu Insert. Escolham a opção de Timeline Effects/Effects/Explode.

Heis uma breve explicação das definições que constam para criar este efeito:

· Effect of Duration

Estas definições especificam o numero de frames que o efeito irá percorrer. Quando mais elevado for o número, o resultado será uma explosão mais prolongada. Um número mais reduzido irá resultar numa explosão rápida.

· Direction of Explosion

Esta definição especifica a direcção na qual os fragmentos da explosão irão se dirigir.

· Arc Size

A trajectória dos vossos fragmentos será curvada. Poderemos todavia especificar vários detalhes para a curva, nesta opção.

· Rotate fragments by

Esta definição específica em quantos graus das partículas individualmente da nossa explosão irão rodar em si.

· Change fragments size by

Poderemos fazer com que os nossos fragmentos se expandam ou se contraiam. O número que aqui for inserido vai decidir se isto acontece ou não.

· Final Alpha

Esta opção especifica no final, quando o nível de transparência que os fragmentos irão tomar. Um valor de 0 irá assegurar que os nossos fragmentos irão desaparecer por completo.

 

Esperamos que este trabalho vos tenha sido de alguma ajuda para os vossos trabalhos futuros. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.

Bons trabalhos!
Pedro Teixeira

 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados