Cool Flash Effect Tutorials!

Resumé

I denne tutorial vil du lære hvordan du opretter en kube overgang effekt på mus rollover.

Her endelige resultat:

Krav

Flash CS3 eller Flash CS4.

Bemærk: Skærmbilledet i denne tutorial er lavet i Flash CS3. Det fungerer nøjagtig det samme i Flash CS4.

Trin 1 - Installer virkning komponent

Køb Cube Transition Effect her . Følg installere instruktioner og træk komponent fra den del panel i bibliotek på din. FLA-fil.

Trin 2 - Opret et nyt lag

At holde orden, bør du oprette et nyt lag på de vigtigste tidslinjen og give den et navn. Gør dette som vist på skærmbilledet nedenfor.

Trin 3 - Opret baggrunden

Nu skal du oprette en baggrund med et forløb. Selv om det ikke er nødvendigt at gøre virkningen arbejde, det viser, at effekten virker også med transparent indhold (mere om det senere).

Vælg den første frame i "bg" lag og tegn en figur med rektangelværktøjet på lærredet. Vælg rektangel og justere farveindstillingerne for at have en pæn stigning (du kan også benytte andre farver).

Trin 4 - knappen Opret

Terningen effekt bør reagere dynamisk på brugerne musen state (rollover / udbygningen). Det er bedst praksis ikke at føje begivenheden lytteren om, selv og i stedet bruge en "tom"-knappen.

Klik på det første frame i laget "btn" og tegne et rektangel med størrelsen af lærredet (farve ikke mater, da knappen vil ikke være synlig). Vælg rektangel og omdanner det til en knap med [trykke F8] eller højreklikke på MovieClip -> "Konverter til Symbol ...".

Indstil navnet på den knap til "btn", og sørg for, at den type er "Button".

Dobbeltklik på knappen. Træk nu den første keyframe "Up" til det sidste frame "Hit". Dette sikrer, at knap vil være interaktivt, men ikke synlige.

Kom tilbage til de vigtigste tidslinjen og placere den instans navnet på knappen til "btn".

Trin 5 - Opret start MovieClip

Effekten har brug for to MovieClip hvor de visuelle informationer er taget fra. Du skal nu oprette MovieClip overgangen vil starte med.

Klik på det første frame på laget "img1". Import af et billede med størrelsen af lærredet ved at trykke [trykke Ctrl-R] eller "File" -> "Import" -> "Importer on Stage ...".

Nu konvertere dette billede til en MovieClip og navngive den "img1".

Sæt eksempel navnet på den netop oprettede MovieClip til "img1".

Trin 6 - Opret End MovieClip

The End MovieClip vil indeholde tekst i stedet for et billede. De opnå dette skal du bruge en lidt anden tilgang.

Vælg den første ramme af det lag, "img2" (ok, dårlig navngivning, er du velkommen til at rette denne ) Og tegne et rektangel med størrelsen af lærredet. Du ønsker at sikre, at End MovieClip har samme dimensioner som Start MovieClip. Thats hvorfor du først tegne en usynlig form med samme størrelse som det Start MovieClip.

Vælg form og sætte alpha værdien til 0 (formen stadig er der, men usynlig).

Konverter form til et MovieClip [trykke F8] eller højreklikke på MovieClip -> "Konverter til Symbol ..." og navngiv den "img2".

Dobbeltklik på lige har oprettet MovieClip, skal du oprette en ny tom lag og sætte noget tekst på denne nyoprettede lag.

Gå tilbage til de vigtigste tidslinjen og sæt den instans navnet på MovieClip til "img2".

Trin 7 - Tilføj rollover ActionScript

Vælg lag "script" og åben "Actions" vinduet med "Windows" -> "Actions" eller [tryk F9].

Hvis du blot ønsker at have en overgang på rollover (og ingen back-overgangen på udbygningen) kopiere følgende linjer ind i koden vinduet.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

I den første linje du tilføje rollover begivenhed lytteren til knappen. I funktionen "_onOver" (linje 3) skal du først oprette en forekomst af CubeTransitionEffectAS3 før du deaktiverer musen interaktivitet komponenten (linje 4 og 5). Husk, den knap, du oprettede tidligere, er at tage sig af musen effekter, og du ikke ønsker, at virkningen at blande på.

På linje 9 endelig du initialisere virkning ( dokumentation for den parameter her ). De vigtige del er de to første parameter. Du definerer, at overgangen starter med "img1" og slutter med "img2".

Eksporter dine FLA fil. Som du kan se, er virkningen komponent fungerer upåklageligt med gennemsigtig baggrund af "img2".

Trin 8 - Mere komplekse ActionScript

OK, med den tidligere kode rollover virker fint. Men hvad nu, hvis du også ønsker at have en udrulningen funktion, vender overgangen fra "img2" til "img1"? For at opnå dette skal du bruge en mere kompleks kode. Slet script og indsætte følgende:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);
 btn.addEventListener (MouseEvent.ROLL_OUT, _onOut);

 var kørende = false;
 var Goin = false;
 var goOut = false;

 funktion _onOver (e: MouseEvent) (
  if (! kører) (
  _createAnimation ("in");
  kører = true;
  ) Else (
  Goin = false;
  goOut = true;
  )
 )

 funktion _onOut (e: MouseEvent) (
  if (! kører) (
  _createAnimation ("out");
  kører = true;
  ) Else (
  Goin = true;
  goOut = false;
  )
 )

 funktion _inAnimationDone (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  if (goin) (
  _createAnimation ("out");
  ) Else (
  kører = false;
  goOut = false;
  )
 )

 funktion _outAnimationDone (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goOut) (
  _createAnimation ("in");
  ) Else (
  kører = false;
  Goin = false;
  )
 )

 funktion _createAnimation (dir: String) (
  var myFilter: CubeTransitionEffectAS3 = new 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 == "out") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Det er vigtigt at vide, at du kan IKKE vende retningen af overgangen i retning kører. I stedet kan du "huske" aktionen for brugeren, skal du vente, indtil effekten er gjort, og anvende revers overgangen.

Variablerne "Goin" og "goOut" (linje 5 og 6) anvendes til dette formål. Du sætter dem, når de funktioner "_onOver" og "_onOut" (linje 8 og 18) er gennemført. Men kun hvis var kører, er sandt, hvis det er falsk (linje 9 og 19), begynder du at overgangen til højre væk (linje 10 og 20).

Funktionen "_createAnimation" (linje 52), er din hjælper funktion starten animationen afhængigt af retningen "dir" du har bestået som parameter.

Bemærk, at efter kalder "removeFilter"-metoden (linje 29 og 41) både Start MovieClip og End MovieClip er sat til synlig (ud af kraft). Thats hvorfor du indstille MovieClip synlighed - overgangen begyndte med - til falsk (linje 30 og 42).

Download

Klik her for at downloade fla af denne tutorial. Bemærk:. Fla ikke omfatter virkningen komponent. For at gøre det fla arbejde, skal du købe Cube Transition Effect her .

Her kan du finde en video tutorial, hvordan man gennemfører en anden virkning .