Olá Convidado
Bem vindo (a) ao fórum MasterCheats, Registre-se agora para ter diversos benefícios como:

• Livre acesso a tutoriais, recursos, ferramentas e cheats.
• Interagir e criar novas amizades
• Deixe sua opinião ser lida por todos! Você pode enviar, responder, e partilhar o que está em sua mente.
• Aprenda tudo sobre os diversos assuntos relacionados a Designer
• Tutoriais exclusivos sobre C++/Delphi/VB e mais

Registre-se e tenha todos esses privilégios!


Participe do fórum, é rápido e fácil

Olá Convidado
Bem vindo (a) ao fórum MasterCheats, Registre-se agora para ter diversos benefícios como:

• Livre acesso a tutoriais, recursos, ferramentas e cheats.
• Interagir e criar novas amizades
• Deixe sua opinião ser lida por todos! Você pode enviar, responder, e partilhar o que está em sua mente.
• Aprenda tudo sobre os diversos assuntos relacionados a Designer
• Tutoriais exclusivos sobre C++/Delphi/VB e mais

Registre-se e tenha todos esses privilégios!
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

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

2 participantes

Ir para baixo

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

Mensagem 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:

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"

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.



Kira™
Kira™
Silver Member
Silver Member

Posts : 543
Data de Ingresso : 26/01/2012

Idade : 31

https://www.facebook.com/FoxLooz

Ir para o topo Ir para baixo

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

Mensagem 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
nYPdR-
nYPdR-
Silver Member
Silver Member

Posts : 344
Data de Ingresso : 03/01/2012


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos