Cool Flash Effect Tutorials!

Sammendrag

I denne opplæringen vil du lære hvordan du oppretter en terning overgang effekt på mus rollover.

Her det endelige resultatet:

Krav

Flash CS3 eller Flash CS4.

Merk: Skjermbildet i denne opplæringen er laget i Flash CS3. Det fungerer akkurat det samme i Flash CS4.

Trinn 1 - Installer effekten komponenten

Kjøp Cube Transition Effect her . Følg instruksjonene installere og dra komponenten fra komponenten panelet inn i biblioteket på. FLA-fil.

Trinn 2 - Opprett et nytt lag

For å holde ting ryddig bør du lage eit nytt lag på hovedtidslinjen og gi den et navn. Gjør dette som vist på skjermbildet nedenfor.

Trinn 3 - Lag bakgrunn

Nå kan du lage en bakgrunn med en gradient. Selv om dette er ikke nødvendig å gjøre effekten arbeidet viser at effekten også fungerer med gjennomsiktige innhold (mer om det senere).

Velg det første bildet i "bg" laget og tegne en figur med rektangelet verktøyet på lerretet. Velg rektangel og justere fargeinnstillingene å ha en fin stigning (du kan også bruke andre farger).

Steg 4 - Opprette knappen

Terningen effekt bør reagere dynamisk til brukerne musen staten (rollover / utrulling). Det er best ikke å legge hendelsen lytteren til effekten selv og i stedet bruke en "blank"-knappen.

Klikk på første bildet i laget "btn" og tegne en firkant med størrelsen på lerretet (fargen ikke mater siden knappen vil ikke være synlig). Velg rektangel og konvertere den til en knapp med [trykk F8] eller høyreklikk på MovieClip -> "Convert to Symbol ...".

Angi navnet på knappen for å "btn" og sørg for at den typen er "Button".

Dobbeltklikk på knappen. Nå drar de første nøkkelbilde "Up" til det siste ramme "Hit". Dette sikrer, at knappen vil bli interaktive, men ikke synlig.

Kom tilbake til hovedsiden tidslinje og sette forekomsten navnet på knappen for å "btn".

Trinn 5 - Lag start MovieClip

Effekten må ha to MovieClip der visuelle opplysninger er hentet fra. Du vil nå opprette MovieClip overgangen vil starte med.

Klikk på den første rammen på laget "img1". Importer et bilde med størrelsen på lerretet ved å trykke [Ctrl-R] eller "Fil" -> "Import" -> "Importer på Stage ...".

Nå konvertere dette bildet til et videoklipp og gi den navnet "img1".

Angi forekomsten navnet på nettopp opprettet MovieClip å "img1".

Trinn 6 - Opprett End MovieClip

The End MovieClip vil inneholde tekst i stedet for et bilde. Den klare dette trenger du en litt annen tilnærming.

Velg det første bildet av laget "img2" (ok, dårlig navnsetting, gjerne riktig at ) Og tegner en firkant med størrelsen på lerretet. Du ønsker å sikre at End MovieClip har samme dimensjoner som Start MovieClip. Dvs hvorfor du først tegner en usynlig form med samme størrelse som på Start MovieClip.

Velg form og sett alpha verdien til 0 (formen er fortsatt der, men usynlig).

Konverter form til en MovieClip [trykke F8] eller høyreklikk på MovieClip -> "Convert to Symbol ..." og gi den navnet "img2".

Dobbeltklikk på nettopp opprettet MovieClip, opprette en ny tomt lag og legge litt tekst på det nyopprettede laget.

Head tilbake til hovedsiden tidslinje og sette forekomsten navnet på MovieClip til "img2".

Trinn 7 - Legg rollover ActionScript

Merk laget "script" og åpne "Handlinger" vindu med "Windows" -> "Actions" eller trykk [F9].

Hvis du bare vil ha en overgang på rollover (og ingen back-overgangen på utrullingen) kopiere følgende linjer i koden vinduet.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

I den første linjen legger du til rollover hendelse lytteren til knappen. I funksjonen "_onOver" (linje 3) du først opprette en forekomst av CubeTransitionEffectAS3 før du deaktivere musen interaktivitet på komponenten (linje 4 og 5). Husk at knappen du opprettet tidligere tar vare på musen effekter og du ikke vil effekten å gripe inn på det.

I tråd ni endelig starte du effekten ( dokumentasjon på parameteren her ). Den viktigste delen er de to første parameter. Du definerer at overgangen starter med "img1" og slutter med "img2".

Eksporter FLA filen. Som du ser, virker effekten komponenten perfekt med transparent bakgrunn av "img2".

Trinn 8 - Mer komplekse ActionScript

OK, med den forrige koden på rollover fungerer helt fint. Men hva om du også vil ha en lansering funksjon som reverserer overgangen fra "img2" til "img1"? For å oppnå at du trenger en mer kompleks kode. Slett skriptet og sette inn følgende:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver); btn.addEventListener (MouseEvent.ROLL_OUT, _onOut), var å kjøre = false; var Goin = false; var goOut = false; funksjon _onOver (e: MouseEvent) (if (! kjører) (_createAnimation ("in"), som kjører = true;) else (Goin = false; goOut = true;)) funksjon _onOut (e: MouseEvent) (if (! kjører) (_createAnimation ("ut"); kjører = true; ) else (Goin = true; goOut = false;)) funksjon _inAnimationDone (e: Event) (e.target.removeFilter (); img1.visible = false; if (Goin) (_createAnimation ("ut");) else ( kjører = false; goOut = false;)) funksjon _outAnimationDone (e: Event) (e.target.removeFilter (); img2.visible = false; if (goOut) (_createAnimation ("in");) else (kjører = false ; Goin = false;)) funksjon _createAnimation (dir: String) (var myFilter: CubeTransitionEffectAS3 = ny CubeTransitionEffectAS3 (); myFilter.mouseEnabled = false; myFilter.mouseChildren = false; addChild (myFilter); if (dir == "i" ) (myFilter.init (img1, img2, 24, "l-> r", 2, "easeInOutCubic", false); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);) else if (dir == "ut") (myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", false); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);)) 

Det er viktig å vite at du ikke kan reversere retning på overgangen under effekten er i gang. I stedet kan du "husker" handlingen for brukeren, vent til effekten er gjort og bruke revers overgangen.

Variablene "Goin" og "goOut" (linje 5 og 6) blir brukt til det formålet. Du setter dem når de funksjonene "_onOver" og "_onOut" (linje 8 og 18) er henrettet. Men bare hvis var kjører er sann, hvis den er falsk (linje 9 og 19), starter du overgangen med en gang (linje 10 og 20).

Funksjonen "_createAnimation" (linje 52) er din hjelper funksjon start animasjonen avhengig av retningen "dir" du har bestått som parameter.

Legg merke til at etter å kalle det "removeFilter"-metoden (linje 29 og 41) både Start MovieClip og End MovieClip er satt til synlig (av effekten). Dvs hvorfor du setter MovieClip synlighet - overgangen i gang med - til false (linje 30 og 42).

Last ned

Klikk her for å laste ned FLA av denne opplæringen. Merk:. FLA ikke inkluderer effekten komponenten. For å få FLA-arbeidet, må du kjøpe Cube Transition Effect her .

Her finner du en video tutorial på hvordan å gjennomføre en annen effekt .