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 Básicos

Ficha Técnica
Autor: Flash Web Training
Versão: Flash MX
Dificuldade: Básico
Data de Publicação: 15/09/2003


Introdução

Pretendemos dar a conhecer como se cria facilmente botões e se os anima. Vamos criar um simples botão e depois anima-lo, de maneira a que consigamos dar a entender que não só os gráficos se pode animar no Flash.

Ficheiro Swf


Downloads:

Flash Player icon Ficheiro Fla Tutorial em PDF

Primeiro Passo: Criar o botão

1. Criem um gráfico ou escrevam algum texto que gostariam que aparece-se no botão;

2. Seleccionem a vossa criação e carreguem em F8. Após terem feito isto, voltem a seleccionar a opção de button, e cliquem em OK (Figura 1).


 

Segundo Passo: Aplicar as acções ao botão

1. Seleccionem o botão;

2. Abram o painel de Actions;

3. Apliquem o seguinte código ao botão em Expert Mode:

on (rollover) {
stop ( );
}
on (rollout) {
play ( );
}
on (release) {
getURL {“http://www.Flashwebtraining.com”, “_blank”);
}

O que estamos a definir neste código, é para parar, quando o rato está por cima do botão. Quando o rato, sai de cima do botão, definimos que o botão deve continuar em andamento (neste caso). E como prometemos ao utilizador que daremos um prémio, caso ele consiga apanhar o rato, nós incluímos um prémio especial: Um link de primeira classe para o nosso Sitio!

Terceiro Passo: Criar a animação do botão

1. Colocar o rato, na frame 1, e criar uma keyframe (caso esta ainda não exista);

2. Vamos criar 41 frames, clicando na frame 41 da layer do rato e de seguida arrastando-a para layer debaixo. Para a layer BG. Desta forma seleccionamos o mesmo número de frames para ambas as layers;

3. Vamos criar as frames, pressionando a tecla F5;

4. Na layer do rato, posicionem o rato na frame 20. Pressionem a tecla F6, para criar uma Keyframe;

5. Clicando na frame 20 da layer do rato, arrastem-na 1 frame para direita;

6. Criem uma nova KeyFrame na frame 21;

7. Vamos mudar neste caso a orientação do rato. Para tal vamos fazer um Flip Horizontal. Assim sendo, clicamos no menu Modify > Transform > Flip Horizontal;

8. Na frame 41 vamos criar mais uma KeyFrame;

9. Com o rato a clicar na frame 41, arrastem-no para o vosso lado esquerdo totalmente;

10. Com este projecto já quase todo pronto, falta-nos criar o primeiro Motion Tween. Entre a frame 1 e 20, cliquem com o botão direito do rato, e escolham a opção de Create Motion Tween.

11. De igual modo, criem outro Create Motion Tween, mas desta vez entre as frames 21 e 41 (Figura 2).

 

 

Quarto Passo: Testar o Filme

Agora só nos resta testar o filme que criamos. Boa Sorte!

 
Esperamos que este tutorial, vos tenha ajudado a melhorar os vossos projectos. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.
 
Bons trabalhos!
Pedro Teixeira
pedro.teixeira@flashwebtraining.com
 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados