Como construir uma tecla animated usando o flash

Share

|

Tempo: 15 minutos.
Dificuldade Em nível: Intermediário
Exigências: Flash 8
Conhecimento Suposto: Actionscripting básico, usando a janela das ações, usando as variáveis, criando símbolos.

Finalidade:
Eu quis sempre animate uma tecla de ActionScript e manter meu espaço livre do timeline mas foi tipo de duramente, até que eu tropecei em cima deste motor de Tweening de estendesse. Este tutorial emprega o motor de Tweening para animate uma tecla. É certamente uma ferramenta grande, e eu digo aquele porque com ele me fêz exame de completamente pouco tempo para fazer um animation.

Amostras & Introdução
Você pode verificar para fora do animation da tecla dentro aqui, como você pôde querer o ver na ação. Frankly, eu vim transversalmente com animating um tipo da tecla de cada vez que eu tive que construir um Web site; em conseqüência esta extensão é agora uma das ferramentas que eu posso confiar sobre ao começar um projeto novo.

Antes de você comece:

Download por favor as limas de fonte: Animated_Button.fla e TweeningEngine.mxp.

Usando o motor de Tweening:

Para os acionadores de partida, instalam “a extensão” de TweeningEngine.mxp (você tem que apenas dobro-clique nele e conduzir-lhe-á ao gerente da extensão). Você tem que flash de open/reopen.

Críe um original novo. Ajuste a taxa do frame a 35.
Faça um grampo do filme que contem um retângulo com cantos arredondados, outro menor como a altura e com uma cor mais clara no alto o primeiros esse e alfa se ajustou a 50, adicionam então o texto para a tecla.
Nomeie-os e nomeie-o também os exemplos. (eu tenho o backofbutton, frontofbutton com seus exemplos correspondentes: BoB e foB).
Faça um outro grampo do filme para conter todo o grampos e texto acima mencionados do filme. Nomeie-o nome – do exemplo de MyButton: MyB.

De agora sobre haverá somente um pouco de coding a ser feito, mas você preocupação’do shouldn t, ele terminará com um animation fino após exatamente 6 linhas.

Os primeiros dois são usados importar as classes tweening e a classe e do flash transition/easing devem ser introduzidas na janela das ações do primeiro frame dentro “do grampo” do filme de MyButton.

importação xtd.tweening. *;
importação mx.transitions.easing. *;
importação flash.filters.DropShadowFilter;

Nós começamos à peça quando nós devemos animate a tecla. O bellow do código está indo escalá-la foB a respeito do shrink, textColoring mudará a cor para fora do texto e o BackShadow fará a tecla deixar cair a sombra.

var StripShrink = Tween(FoB novo, "_ yscale", Bounce.easeOut, 95, 0, 10, falsos);
var que textColoring = ColorTween(TextLine novo, Strong.easeOut, "corrente", "663300", 8, falsos);
var BackShadow = FilterTween(BoB novo, DropShadowFilter(1 novo, 90, 0x000000, 5, 5, 5, 1, 3), "distance",Strong.easeOut, "current",10,20,false);

Como você pode ver que estêve usado três tipos de tweens cada um muito simples compreender ter que mencionar o exemplo do grampo que do filme consulta a, a propriedade o tween mudará, o tipo facilitando, o valor começar, o valor do ending, a duração e se o tween começar automaticamente ou não.

Porque nós escolhemos “falso” para “a propriedade”  do 
autostart, os tweens começarão ao ter o excesso do rato:           this.onRollOver = function() 
{            StripShrink.start();            BackShadow.start();            textColoring.start(); };

   this.onRollOut = function() 
{            StripShrink.reverse(Regular.easeIn);            BackShadow.reverse(Regular.easeOut);            textColoring.reverse(Regular.easeOut); };

Quando o rato é não mais longo em nossa tecla os tweens estarão invertidos com funções facilitando diferentes.

Fechamento

Sumariar todo que eu consegui com este animation que simples eu devo começar lembrando o que com as 6 linhas de código em 15 minutos ou menos, sem nenhuma modificação do timeline lá foi criado um animation da tecla.

Obrigado lendo este tutorial e espere-o que você encontre útil este tutorial, e o ve da ferramenta’I usado fazer a tecla animated.