Cool Flash Effect tutorials!

Overzicht

In deze tutorial leer je hoe je een kubus transitie effect op de muis rollover te maken.

Hier het eindresultaat:

Eisen

Flash CS3 of Flash CS4.

Opmerking: De screenshot in deze tutorial is gemaakt in Flash CS3. Het werkt precies hetzelfde in Flash CS4.

Stap 1 - Installeer de component ingang

Aankoop van de Cube Transition Effect hier . Volg de installatie-instructies en sleept u het onderdeel van de samenstellende paneel in de bibliotheek van uw. FLA-bestand.

Stap 2 - Maak een nieuwe laag

Om de zaak netjes moet u een nieuwe laag over de belangrijkste tijdlijn maken en deze een naam te geven. Doe dit zoals op de screenshot hieronder.

Stap 3 - Maak de achtergrond

Nu creëer je een achtergrond met een kleurverloop. Hoewel dit niet noodzakelijk is om het effect te laten werken het blijkt dat het effect werkt ook met transparante inhoud (daarover later meer).

Selecteer het eerste frame in de "BG" laag en teken een vorm met het gereedschap Rechthoek op het doek. Selecteer de rechthoek en aanpassen van de kleurinstellingen om zo een mooie gradiënt (u kunt ook gebruik maken van een andere kleur hebben).

Stap 4 - knop Maken

De kubus effect moet dynamisch reageren op de gebruikers muis staat (rollover / rollout). Het is best practice om luisteraar NIET het evenement toe te voegen om het effect op zich en in plaats daarvan gebruik van een "blanco"-knop.

Klik op het eerste frame in de laag "btn" en teken een rechthoek met de grootte van het doek (kleur niet mater, omdat de knop niet zichtbaar). Selecteer de rechthoek en te converteren naar een button met [druk op F8] of klik met de rechtermuisknop op de MovieClip -> "Convert to Symbol ...".

Zet de naam van de knop om "btn" en zorg ervoor dat het type is "Button".

Dubbelklik op de knop. Sleep nu het eerste keyframe "Up" om de laatste frame 'Hit'. Dit zorgt ervoor dat de knop wordt interactief, maar niet zichtbaar.

Ga terug naar de belangrijkste tijdlijn en zet de naam van bijvoorbeeld de knop om "btn".

Stap 5 - Maak start Filmpje

Het effect behoeften van de twee Filmpje waar de visuele informatie zijn ontleend. U zult nu de Filmpje van de overgang zal beginnen.

Klik op de eerste frame op de layer "img1". Importeer een afbeelding met de grootte van het doek door te drukken op [Ctrl-R] of "File" -> "Import" -> "Import ... on Stage".

Nu zetten deze afbeelding naar een movieclip en noem deze "img1".

Stel bijvoorbeeld de naam van de zojuist aangemaakte Filmpje op "img1".

Stap 6 - Einde Filmpje

The End Filmpje bevat tekst in plaats van een afbeelding. De verwezenlijking van deze zult u een iets andere aanpak nodig.

Selecteer het eerste frame van de laag "img2" (ok, slechte naamgeving, voel je vrij om juist dat ) En teken een rechthoek met de grootte van het doek. U wilt er zeker van dat het einde Filmpje dezelfde afmetingen als de Start Filmpje heeft. Dat is waarom je eerste trekking een onzichtbare vorm met dezelfde grootte als de Start Filmpje.

Selecteer de vorm en zet de alpha waarde op 0 (de vorm is er nog steeds, maar onzichtbaar).

Zet de vorm in een Filmpje [druk op F8] of klik met de rechtermuisknop op de MovieClip -> "Convert to Symbol ..." en noem deze "img2".

Dubbelklik op de zojuist aangemaakte Filmpje, maak een nieuwe lege laag en leg een stukje tekst op die nieuwe laag.

Ga terug naar de belangrijkste tijdlijn en zet de naam van bijvoorbeeld de movieclip naar "img2".

Stap 7 - toevoegen rollover ActionScript

Selecteer de laag "script" en open de "Acties" venster met "Windows" -> "Acties" of [F9].

Als je gewoon wilt een overgang op de rollover hebben (en geen back-overgang op rollout) kopieer de volgende regels in de code-venster.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 functie _onOver (e: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 CubeTransitionEffectAS3 = new ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  myFilter.init (img1, img2, 75, 'l-> r ", 2," easeInOutCubic ", false);
 )

In de eerste regel voegt u het rollover-gebeurtenis luisteraar aan de knop. In de functie "_onOver" (lijn 3), maak je eerst een voorbeeld van de CubeTransitionEffectAS3 uit te schakelen voordat u met de muis interactiviteit van het onderdeel (lijn 4 en 5). Vergeet niet, de knop die u eerder heeft gemaakt is het verzorgen van de muis-effecten en u niet wilt dat het effect in te grijpen op die.

In lijn 9 tenslotte kan je het effect initialiseren ( documentatie van de parameter hier ). Het belangrijke deel zijn de eerste twee parameter. U bepaalt dat de overgang begint met "img1" en eindigt met "img2".

Exporteer uw FLA-bestand. Zoals je ziet, is het effect component werkt perfect met de transparante achtergrond van "img2".

Stap 8 - Meer complexe ActionScript

OK, met de vorige code de rollover werkt prima. Maar wat als je wil ook een roll-out functie die de overgang omkeert van "img2" naar "img1" hebben? Om dit te bereiken dat je een meer complexe code nodig. Verwijder het script en voeg de volgende:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver); btn.addEventListener (MouseEvent.ROLL_OUT, _onOut); var draaien = false; var goin = false; var goOut = false; functie _onOver (e: MouseEvent) (if (! lopen) (_createAnimation ("in"); draait = true;) else (goin = false; goOut = true;)) function _onOut (e: MouseEvent) (if (! rennen) (_createAnimation ("out"); draait = true; else () goin = true; goOut = false;)) function _inAnimationDone (e: Event) (e.target.removeFilter (); img1.visible = false; if (goin) (_createAnimation ("out");) else ( lopen = false; goOut = false;)) function _outAnimationDone (e: Event) (e.target.removeFilter (); img2.visible = false; if (goOut) (_createAnimation ("in");) else (draaien = false ; goin = false;)) function _createAnimation (dir: String) (var myFilter: CubeTransitionEffectAS3 CubeTransitionEffectAS3 = new (); myFilter.mouseEnabled = false; myFilter.mouseChildren = false; addChild (myFilter); if (dir == "in" ) (myFilter.init (img1, img2, 24, 'l-> r ", 2," easeInOutCubic ", false); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);) else if (dir ==" out ") (myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", false); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);)) 

Het is belangrijk om te weten, dat kan je niet de overgang omgekeerde richting van de loop van het effect wordt uitgevoerd. In plaats daarvan kunt u "onthouden" de actie van de gebruiker, wacht totdat het effect is gedaan en de revers overgang toe te passen.

De variabelen 'goin' en 'goOut "(lijn 5 en 6) zijn voor dat doel gebruikt. Je zet ze bij de functies "_onOver" en "_onOut" (lijn 8 en 18) worden uitgevoerd. Maar alleen als de var lopen waar is, als het valse (lijn 9 en 19), begin je meteen de overgang (lijn 10 en 20).

De functie "_createAnimation" (lijn 52) is uw helper 'functie het begin van de animatie, afhankelijk van de richting "dir" je bent geslaagd als parameter.

Merk op dat na het aanroepen van de "removeFilter" methode (lijn 29 en 41) zowel de start en het einde Filmpje Filmpje zijn ingesteld op zichtbaar zijn (van het effect). Dat is waarom u de zichtbaarheid Filmpje set - de overgang begon met - om valse (lijn 30 en 42).

Download

Klik hier om tutorial download de fla van deze. Opmerking: De. Fla niet het effect component. Om werk te maken van de FLA, moet u de aankoop Cube Transition Effect hier .

Hier vindt u een video-tutorial over hoe een ander effect te voeren .