[Tutorial][Intermediário] Botão Animado

por **Kira™** Qui Mar 22, 2012 7:13 pm

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Introdução

Vamos neste tutorial criar um botão que quando o rato passa por cima inicia uma animação e quando sai pára a mesma.

Há muitas hipóteses de fazer isto, está será talvez a mais fácil. O funcionamento é muito simples, temos um botão (Symbol Button) e uma animação (Symbol Movie Clip), com isto feito basta inserir o Symbol Movie Clip dentro da Timeline do Symbol Button nas frames Over e Down numa layer diferente aquela que tem o botão em si. A Timeline de um Button é especial, é dividida em quatro frames referentes aos 3 estados possíveis (Up, Down, Over) e à zona sensível
do botão.

Tutorial

Começa por criar um Symbol Button e um MovieClip. Para criar um Symbol tens dois métodos:

1ª método - Cria primeiro o elemento gráfico, com o elemento seleccionado selecciona o menu Insert / Convert to Symbol, aparece a caixa de diálogo "Symbol Properties" , dá o nome, escolhe o beahvior que pretendes e {click} no botão "ok"

2ª método - Selecciona o menu Insert / New Symbol, aparece a caixa de diálogo "Symbol Properties"
, dá o nome, escolhe o beahvior que pretendes, {click} no botão "ok" e é lançado o "stage" (área
de trabalho do Flash) do "Symbol" que criás-te.

Agora que já sabes criar "Symbols" vamos começar.

1.Cria os dois elementos gráficos. Como, por exemplo,
os seguintes:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Converte a esfera num "Symbol Button" através do 1º método. Dá o nome "botão". Selecciona as
duas setas e faz o mesmo, mas agora dá o nome "gráfico setas" e escolhe o beahvior Movie Clip.

2. Cria um novo "Movie Clip" usando o 2º método. Dá ao Symbol o nome "filme setas" e {click} "ok". Estás agora no "Stage" do Movie Clip "filme setas". Identificas em qual "stage" é que estás a trabalhar através dos "tab" activo que aparece por cima das layers.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

3. Arrasta a partir da "Library" o Symbol Graphic gráfico "filme setas" para a frame #1 e coloca-o ao centro
do "Stage"

4. Na mesma layer onde colocás-te o objecto insere uma "keyframe" na frame #15. Fazes isto seleccionando a frame
#15 e {click} [F6]

5. Lança a caixa de diálogo "Frame" seleccionando o menu Windows / Panels / Frame. Selecciona a frame #1 e selecciona "Motion" na Combo box "Tweening". Na combo box "Rotate" muda para "CCW" ( Sentido inverso aos ponteiros do relógio) e em "times" muda o valor de 0
para 1.
Vê a seguinte imagem:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

6. Depois disto a "Timeline" deverá ter uma seta da frame #1 á #15 e todas as frames a azul. Isto indica a animação "Motion Tween" que fizeste ao dizer para o objecto rodar 1 vez nas 15 frames.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

7. Agora na "Library" (Windows / Library) {duplo click} no "Symbol button" para o editar. Já deves ter
a frame "Up" com uma "Keyframe" com o elemento gráfico que criás-te para o botão. Vai a cada estado e insere uma "Keyframe" {click}[F6]. Desenha os vários estados do
botão do género do mostrado abaixo.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

8. Agora cria uma nova layer dentro do teu botão abaixo da layer esfera. No estado "Over" insere uma "keyframe" e coloca aí o Movie Clip "filme setas". Coloca-o de forma a ficar bem centrado com a esfera. Por defeito o Movie Clip vai estar na frame "Hit" mas não deve estar. Isto porque esta a
frame é que vai detectar o rato e só queremos que o seja
a esfera a faze-lo.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

É isto, vai para a "Timeline" principal
arrasta o teu botão para o "Stage" e teste-o.

por **nYPdR-** Sex Mar 23, 2012 8:27 am

Ótimo,
vou fazer um tutorial com interpolação classica!
Que é bem mais facil doque ir fazendo click por click!
Abraço

[Tutorial][Intermediário] Botão Animado

[Tutorial][Intermediário] Botão Animado

Re: [Tutorial][Intermediário] Botão Animado