Hoe bouw je een geanimeerde knop met behulp van Flash

Share

|

Tijd: 15 Minutes.
Moeilijkheidsgraad: Intermediair
Vereisten: Flash 8
Veronderstelde Kennis: Basic ActionScript, met behulp van de acties venster, met behulp van variabelen, het creëren van symbolen.

Doel:
Ik wilde altijd al aan een knop van ActionScript animeren en houd mijn tijdlijn duidelijk, maar het was een beetje moeilijk, tot ik stuitte op deze Tweening Engine uit te breiden. Deze handleiding maakt gebruik van de Tweening Engine aan een knop animeren. Het is inderdaad een geweldig hulpmiddel, en ik zeg dit omdat het met mij heeft heel weinig tijd om een animatie te maken.

Samples & Inleiding
U kunt op de knop animatie hier, zoals je zou willen zien in actie. Eerlijk gezegd, stuitte ik op een knop met animeren soort elke keer moest ik een website te bouwen, als gevolg van deze uitbreiding is nu een van de tools die ik kan vertrouwen op bij het starten van een nieuw project.

Voordat je begint:

Download de bronbestanden: Animated_Button.fla en TweeningEngine.mxp.

Behulp van de Tweening Motor:

Voor starters, installeert u de "TweeningEngine.mxp" extensie (je hoeft alleen te dubbelklikken op het en het zal u leiden tot de Extension Manager). Je moet open / heropenen Flash.

Maak een nieuw document. Zet de frame rate tot 35.
Maak een filmclip met een rechthoek met afgeronde hoeken, een andere kleinere als hoogte en met een lichtere kleur op boven de eerste en alfa ingesteld op 50 en voeg dan de tekst voor de knop.
Naam hen en ook de naam van de gevallen. (Ik heb backofbutton, frontofbutton met hun overeenkomstige gevallen: BoB en FOB).
Maak een filmclip te bevatten alle van de bovengenoemde film clips en tekst. Naam zij MyButton - bijvoorbeeld naam: MYB.

Vanaf nu zal er slechts een beetje van codering te doen, maar je moet geen zorgen, zal het eindigen met een mooie animatie na precies 6 regels.

De eerste twee worden gebruikt om de tweening klassen en de flitser overgang / versoepeling klasse importeren en ze moet worden opgenomen in het Acties-venster van het eerste frame binnen 'MyButton "movie clip.

import xtd.tweening .*;
import mx.transitions.easing .*;
import flash.filters.DropShadowFilter;

We hebben op het deel wanneer we moeten animeren op de knop. De code balg gaat naar FOB schaal om het te krimpen, zal de textColoring verandert de kleur van die tekst en de BackShadow zal de knop slagschaduw.

var StripShrink = new Tween (FOB, "_yscale", Bounce.easeOut, 95, 0, 10, false);
var textColoring = new ColorTween (TextLine, Strong.easeOut, "huidige", "663300", 8, false);
var BackShadow = new FilterTween (Bob, nieuwe DropShadowFilter (1, 90, 0x000000, .5, 5, 5, 1, 3), "afstand", Strong.easeOut, "huidige", 10,20, false);

Zoals u kunt zien is er werden gebruikt drie soorten Tweens elke zeer eenvoudig te begrijpen dat u de aanleg van de film noemen clip wordt verwezen naar de eigendom van de tween zal veranderen, de versoepeling van het type, de beginwaarde, de eindwaarde, de duur en als de tween automatisch gestart of niet.

Zoals we hebben gekozen "false" voor de "autostart" eigendom, de tweens zal beginnen wanneer met de muis over: this.onRollOver = function () (StripShrink.start (); BackShadow.start (); textColoring.start (); );

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

Als de muis niet meer op onze knop tweens zal worden teruggedraaid versoepeling met verschillende functies.

Sluiting

Om samen te vatten alles wat ik heb bereikt door middel van deze eenvoudige animatie zou ik beginnen met u eraan te herinneren dat met 6 regels code in 15 minuten of minder, zonder enige wijziging tijdlijn was er een knop gemaakt animatie.

Bedankt voor het lezen van deze tutorial en hopen dat u nuttig zullen vinden deze tutorial, en het hulpmiddel dat ik heb gebruikt om de geanimeerde knop te maken.

---