Cool Flash Effect Tutorials!

Resumé

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

Her er det 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øbe Cube Transition Effect her. Følg venligst installere vejledningen og trække den del fra den komponent, panel i biblioteket for din. Fla-fil.

Trin 2 - Opret et nyt lag

At holde orden, skal du oprette et nyt lag på de vigtigste tidslinjen og give den et navn. Gør dette som vist på skærme nedenstående.

Trin 3 - Opret baggrund

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

Vælg det første billede i "bg" lag og tegne en figur med rektangelværktøjet på lærredet. Vælg rektangel og justere farven indstillinger for at få en pæn stigning (du kan også bruge en anden farve).

Trin 4 - Opret knap

Terningen virkning bør reagere dynamisk på brugerne musen tilstand (rollover / udrulningen). Det er bedste praksis ikke at tilføje begivenheden lytteren med virkning i sig selv og i stedet anvende en "blind"-knappen.

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

Angiv navnet på knappen "btn" og sørg for, at den type er "Button".

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

Kom tilbage til de vigtigste tidslinjen og indstille eksempel navnet på knappen "btn".

Trin 5 - Opret start MovieClip

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

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

Nu konvertere dette billede til et MovieClip og navngiv 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 det første billede af det lag "img2" (ok, dårlig navngivning, er du velkommen til at rette, at ) Og tegne et rektangel med størrelsen på lærredet. Du vil være sikker på, at End MovieClip har samme dimensioner som Start MovieClip. Thats hvorfor du først tegne en usynlig form med samme størrelse som Start MovieClip.

Vælg den form og sæt den alfa værdien til 0 (formen er der stadig, men usynlige).

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

Dobbeltklik på den netop oprettede MovieClip, oprette et nyt tomt lag og sætte noget tekst på, at nyoprettede lag.

Hoved tilbage til de vigtigste tidslinjen og indstille eksempel navnet på MovieClip til "img2".

Trin 7 - Tilføj rollover ActionScript

Vælg det lag "script" og åbn "Handlinger" vinduet med "Windows" -> "Actions" eller [trykke på F9].

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 function _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 linje, du tilføje rollover-hændelse lytteren til knappen. I funktionen "_onOver" (linje 3) skal du først oprette en instans af CubeTransitionEffectAS3 før du deaktivere musen interaktivitet af komponenten (linje 4 og 5). Husk, at den knap, du oprettede tidligere, er at tage sig af musen effekter, og du ikke vil have den virkning, at blande sig på dette.

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

Eksportere din fla fil. Som du kan se, den virkning komponent fungerer perfekt med gennemsigtig baggrund af "img2".

Trin 8 - Mere komplekse ActionScript

OK, med den foregående kode rollover fungerer fint. Men hvad nu, hvis du også ønsker at have en udbygningsplan, funktion, som vender overgangen fra "img2" til "img1"? For at opnå, at du har brug for en mere kompleks kode. Slet scriptet og indsæt følgende:

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

 var løb = false;
 var Goin = false;
 var goOut = false;

 function _onOver (e: MouseEvent) (
  if (! kører) (
  _createAnimation ( "i");
  kører = true;
  ) else (
  Goin = false;
  goOut = true;
  )
 )

 function _onOut (e: MouseEvent) (
  if (! kører) (
  _createAnimation ( "ud");
  kører = true;
  ) else (
  Goin = true;
  goOut = false;
  )
 )

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

  if (goin) (
  _createAnimation ( "ud");
  ) else (
  kører = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "i");
  ) else (
  kører = false;
  Goin = false;
  )
 )

 function _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 == "ud") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Det er vigtigt at vide, at du ikke kan vende retningen af overgangen i retning kører. I stedet kan du "huske" virkningen af den bruger, skal du vente, indtil effekten er gjort, og anvende revers overgangen.

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

Funktionen "_createAnimation" (linje 52) er hjælperen funktion start animationen, afhængigt af den retning "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 indstillet til synlige (ud af kraft). Thats hvorfor du indstille MovieClip synlighed - overgangen begyndte med - til false (linie 30 og 42).

Downloade

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

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