Cool Flash Effect Tutorials!

Povzetek

V tem vadnico se boste naučili, kako ustvariti učinek prehoda na kocko prevračanjem miško.

Tu končni rezultat:

Zahteve

Flash CS3 ali CS4 Flash.

Opomba: screenshot v tem Tutorial je izdelan v Flash CS3. Deluje popolnoma enak v Flash CS4.

Korak 1 - Namestite učinek komponente

Nakup Transition Effect Cube tukaj . Sledite navodilom namestite in povlecite komponento iz komponente plošči v knjižnico vaše. fla datoteko.

2. korak - Ustvarite novo plast

Če želite, da stvari urejene, morate ustvariti nov sloj na glavni časovni in ji dati ime. Ali to, kot je prikazano na sliki spodaj.

Korak 3 - Ustvarjanje ozadja

Sedaj ustvarite ozadju gradient. Čeprav to ni potrebno, da bo učinek dela, kaže, da je učinek deluje tudi s pregledno vsebino (več o tem kasneje).

Izberite prvi okvir, v "BG" plasti in sestavi oblike z pravokotnika orodje na platnu. Izberite pravokotnik in prilagodi nastavitve barv, da imajo lepo gradient (lahko uporabite tudi druge barve).

Korak 4 - Ustvari gumb

Kocka namen bi bilo dinamično odzove na stanje uporabnikov miško (rollover / zagona). To je najboljše prakse NE dodati dogodek poslušalca tako, sam in raje uporabljajo "prazno" popek.

Kliknite prvi okvir, v plasti "btn" in narišite pravokotnik z velikostjo platna (barva ne mater, ker gumb ne bo viden). Izberite pravokotnik in ga pretvoriti v Button s [pritisnite F8] ali desni klik na MovieClip -> "Convert do Symbol ...".

Nastavite ime gumb "btn" in se prepričajte, da je tip "Button".

Dvokliknite gumb. Sedaj povlecite prvi Glavni okvir "Do" zadnji okvir "Hit". To zagotavlja, da se bo gumb interaktivna, vendar ni vidna.

Pojdi nazaj na glavno časovni in nastavite na primer ime gumb "btn".

Korak 5 - Ustvarjanje začetek Movieclip

Učinek potrebuje dve Movieclip, kjer so vidne informacije vzeta iz. Zdaj boste ustvarili Movieclip prehod se bo začela s.

Kliknite na prvi posnetek na sloj "img1". Import slike z velikostjo platna s pritiskom na [časnikarstvo Ctrl-R] ali "File" -> "Import" -> "Import na odru ...".

Zdaj spremeniti to sliko na Movieclip in jo poimenujte "img1".

Nastavite primer ime pravkar ustvarili Movieclip na "img1".

Korak 6 - Ustvarjanje End Movieclip

Konec Movieclip bo vseboval besedilo namesto slike. Dosego tega boste potrebovali malce drugačen pristop.

Izberite prvi okvir plasti "img2" (ok, slabo poimenovanje, vas prosimo, da popravi, da ) In narišite pravokotnik z velikostjo platna. Hočeš, da poskrbite, da End Movieclip je iste velikosti kot Start Movieclip. Thats, zakaj si najprej pripravi nevidne oblike z iste velikosti kot Start Movieclip.

Izberite obliko in iz alfa vrednost 0 (oblika je še vedno tam, a nevidne).

Pretvarjanje obliko Movieclip pritisnite tipko [F8] ali desni klik na MovieClip -> "Convert do Symbol ..." in jo poimenujte "img2".

Dvokliknite pravkar ustvarili Movieclip, ustvarite novo prazno plasti in dal nekaj besedila o tem novonastala plast.

Vodja nazaj na glavni časovni in nastavite na primer ime Movieclip na "img2".

Korak 7 - Dodaj rollover ActionScript

Izberite plast "scenarij" in odprt "ukrepi" okno s "okno" -> "ukrepi" ali [] F9 pritisnite.

Če ste preprosto želite imeti prehod na rollover (in ne nazaj prehod na širitev) kopijo naslednje vrstice v kodo okno.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 Funkcija _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);
 )

V prvi vrstici dodate poslušalca prevračanjem dogodek na gumb. V funkciji "_onOver" (vrstica 3) prvič ustvarite primerek CubeTransitionEffectAS3 preden onesposobiti miš interaktivnost komponente (vrstica 4 in 5). Ne pozabite, gumb ste jo ustvarili prej skrbi miške učinkov in ne želite, učinek posega na to.

V skladu 9 končno ste inicializirati učinek ( dokumentacijo o parameter tukaj ). Pomemben del sta prva dva parametra. Vi določite, da prehod se začne z "img1" in konča z "img2".

Izvoz vaš fla datoteko. Kot vidite, je učinek komponenta tovarna popolno s pregledno ozadja "img2".

Korak 8 - Bolj zapletena ActionScript

OK, s prejšnjo oznako prevračanjem tovarna šele lep. Kaj pa, če tudi vi želite imeti širitev funkcijo, ki obrne prehod iz "img2" v "img1"? Da bi dosegli, da morate bolj zapleteno kodo. Izbriši skript in vstavi naslednje:

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

 var vožnjo = false;
 var dogaja = false;
 var goOut = false;

 Funkcija _onOver (e: MouseEvent) (
  if (! tek) (
  _createAnimation ("v");
  tekmovanje v teku = true;
  ) Else (
  dogaja = false;
  goOut = true;
  )
 )

 Funkcija _onOut (e: MouseEvent) (
  if (! tek) (
  _createAnimation ("out");
  tekmovanje v teku = true;
  ) Else (
  dogaja = true;
  goOut = false;
  )
 )

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

  if (Goin) (
  _createAnimation ("out");
  ) Else (
  tekmovanje v teku = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ("v");
  ) Else (
  tekmovanje v teku = false;
  dogaja = false;
  )
 )

 Funkcija _createAnimation (dir: String) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  if (dir == "v") (
  myFilter.init (img1, img2, 24, "l-> r", 2 "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) Else if (rez == "out") (
  myFilter.init (img2, img1, 24, "r-> l", 2 "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Pomembno je vedeti, da lahko ne spremenijo smer prehoda med učinek je tekmovanje v teku. Namesto tega si lahko "zapomni" delovanje uporabnika, počakajte, da se učinek je storiti in uporabiti revers prehod.

Spremenljivke "dogaja" in "goOut" (vrstica 5 in 6) se uporabljajo za ta namen. Nastavite njimi, ko funkcije "_onOver" in "_onOut" (vrstica 8 in 18) se izvajajo. Vendar le, če je var teče res, če je napačen (vrstica 9 in 19), začnete prehod takoj (vrstica 10 in 20).

Funkcija "_createAnimation" (vrstica 52) je vaš pomočnik funkcija začetek animacije odvisno od smeri "dir" si opravil, kot parameter.

Opazili, da so po klicu "removeFilter" metoda (vrstica 29 in 41) sta Start Movieclip in End Movieclip nastavljena na vidno (od učinka). Thats zakaj nastavite vidnost Movieclip - prehod začeli z - do napačne (vrstica 30 in 42).

Download

Kliknite tukaj za download fla tega Tutorial. Opomba:. Fla ne vključuje učinek komponento. Da bi fla delo, morate kupiti Effect Transition Cube tukaj .

Tu lahko najdete video tutorial, kako izvajati drugačen učinek .