Cool Flash Tutorials Effect!

Sažetak

In this tutorial naučit ćete kako stvoriti efekt kocka prijelaz na rollover miša.

Ovdje konačni rezultat:

Zahtjevi

Flash CS3 i Flash CS4.

Napomena: screenshot u ovaj tutorial je napravljen u Flash CS3. To radi točno isto u Flash-u CS4.

1. korak - Instalacija učinak komponente

Kupnja Učinak Cube Prijelaz ovdje. Molimo slijedite upute za instalaciju i povucite komponente od komponente na ploči biblioteka tvoj. FLA file.

2. korak - Kreirajte novi layer

Kako bi se stvari pospremiti trebali biste stvoriti novi sloj na glavnom vremenskoj i dati mu ime. Učinite to kao što je prikazano na slici ispod.

Korak 3 - Stvaranje pozadina

Sada možete stvoriti pozadina sa gradijenta. Iako to nije potrebno da bi efekt rad pokazuje da je efekt također radi s transparentnim sadržaj (više o tome kasnije).

Odaberite prvi kadar u "bg" layer i nacrtajte oblik pravokutnika s alatom na platnu. Odaberite pravokutnik i podesite postavke boja imati lijep gradijent (također možete koristiti bilo koje druge boje).

4. korak - Kreirajte gumb

Efekt kocka trebala reagirati dinamički stanje korisnicima miš (rollover / Primjena). To je najbolje ne dodati događaj slušatelj se učinak samo umjesto toga koristiti i "prazna" gumb.

Kliknite na prvi kadar u sloju "BTN" i nacrtati pravokutnik s veličinom platna (boja ne mater jer gumb neće biti vidljiv). Odaberite pravokutnik i pretvoriti ga u gumba s [pritisnite F8] ili pravo kliknite na MovieClip -> "Convert to Symbol ...".

Postavite ime gumb "BTN" i uvjerite se da je tip "Gumb".

Dvaput kliknite gumb. Sada povuci prvi kljucni okvir "Gore" u posljednji okvir "Hit". To osigurava da će gumb biti interaktivan, ali nije vidljivo.

Vratite se u glavni vremenski i postaviti primjer naziv gumb "BTN".

Korak 5 - Stvaranje početak MovieClip

Efekt treba imati dva MovieClip gdje su uzeti podaci od vizualne. Sada ćete stvoriti MovieClip tranzicija će početi sa.

Kliknite na prvi kadar na layer "img1". Uvoz slike s veličinom platna pritiskom [pritisnite Ctrl-R] ili "File" -> "Import" -> "Import na pozornici ...".

Sada to pretvoriti predodžba to MovieClip i to ime "img1".

Zalazak primjer naziv upravo stvorili MovieClip na "img1".

6. korak - Kreirajte End MovieClip

End MovieClip će sadržavati tekst umjesto slika. Bi se postigao ovaj, trebat će vam malo drugačiji pristup.

Odaberite prvu sličicu sloja "img2" (ok, loš imenovanje, slobodno ispraviti taj ) I nacrtati pravokutnik s veličinom platna. Vi želite da provjerite da kraj MovieClip ima iste dimenzije kao i Start MovieClip. Taj zašto prvo privući nevidljivih oblika sa iste veličine kao Start MovieClip.

Odaberite oblik alfa i postavite vrijednost na 0 (oblik je još uvijek tamo, ali nevidljiv).

Pretvorba oblika u MovieClip [pritisnite F8] ili pravo kliknite na MovieClip -> "Convert to Symbol ..." i to ime "img2".

Dvokliknite upravo stvorili MovieClip, stvoriti novi prazan sloj i staviti neki tekst o tome nedavno stvorili sloj.

Voditelj povratak na glavnu vremenski i postaviti primjer ime MovieClip na "img2".

Korak 7 - Add rollover ActionScript

Odaberite layer "original" i otvorite "Actions" prozor sa "Windows" -> "Actions" ili [pritisnite F9].

Ako jednostavno želite imati prijelaz na rollover (i ne-leđa o tranziciji Primjena) kopirajte sljedeće linije koda u prozor.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 _onOver function (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);
 )

U prvom retku dodate slušatelja rollover događaj na dugme. U funkciji "_onOver" (redak 3) najprije stvoriti instancu CubeTransitionEffectAS3 prije nego što možete onemogućiti miš interaktivnost komponente (linija 4 i 5). Zapamtite, ranije gumb ste stvorili se brine za miša efekata i ne želite se miješati utjecaj na to.

U skladu 9 napokon se inicijalizirati učinak (dokumentaciju parametra ovdje). Važan dio su prva dva parametra. Možete odrediti da tranzicija započinje sa "img1" i završava s "img2".

Izvoz svoju FLA file. Kao što vidite, efekt komponenta radi savršeno sa transparentnim pozadini "img2".

Korak 8 - Složenije ActionScript

U redu, uz prethodni broj rollover utvrde pravedan prekid. Ali, što ako također želite imati Primjena funkciju koja obrće prijelaz iz "img2" do "img1"? Da bi se postigao taj trebate složeniji kod. Brisanje original i umetnite sljedeću:

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

 var trčanje = false;
 var Goin = false;
 var goOut = false;

 _onOver function (e: MouseEvent) (
  if (! trčanje) (
  _createAnimation ( "u");
  trčanje = true;
  ) else (
  Goin = false;
  goOut = true;
  )
 )

 _onOut function (e: MouseEvent) (
  if (! trčanje) (
  _createAnimation ( "out");
  trčanje = true;
  ) else (
  Goin = true;
  goOut = false;
  )
 )

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

  if (Goin) (
  _createAnimation ( "out");
  ) else (
  trčanje = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "u");
  ) else (
  trčanje = false;
  Goin = false;
  )
 )

 funkcija _createAnimation (dir: String) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  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);
  )
 )

To je važno znati, da ne možete preokrenuti smjer tranzicije tijekom efekt radi. Umjesto toga, možete "sjetiti" akciju korisnika, čekajte učinak je učinio i primjenjivati Revers tranzicije.

Varijable "Goin" i "goOut" (linija 5 i 6) se koriste za tu svrhu. Možete ih postaviti kada se funkcija "_onOver" i "_onOut" (linija 8 i 18) se izvršavaju. Ali samo ako var trčanje je istina, ako je neistinit (linije 9 i 19), te početak prijelaza odmah (linija 10 i 20).

Funkcija "_createAnimation" (linija 52) je vaš pomagač funkcija početak animaciju, ovisno o smjeru "dir" ste prošli kao parametar.

Uočite da se nakon poziva "removeFilter" metodom (linija 29 i 41) iu MovieClip Start i End MovieClip postavljen na vidljivom (iz efekta). Taj zašto ste postavili MovieClip vidljivost - tranzicija započela - to lažni (linija 30 i 42).

Preuzimanje

Kliknite ovdje za download FLA za ovaj udžbenik. Napomena:. FLA ne uključuje efekt komponentu. Kako bi FLA posao, trebate kupovina Effect Cube Prijelaz ovdje.

Ovdje možete pronaći video tutorial o tome kako implementirati drugačiji efekt.