Cool Effect Flash Tutoriali!

Sažetak

In this tutorial ćete naučiti kako stvoriti efekt kocke prijelaza na miša rollover.

Ovdje konačan rezultat:

Zahtjevi

Flash CS3 ili CS4 Flash.

Napomena: screenshot u ovom tutorial je napravljen u Flash CS3. Ona radi točno isto u Flash CS4.

Korak 1 - Instalirajte komponentu efekt

Kupnja Tranzicija efekt Cube ovdje . Molimo slijedite upute za instalaciju i povucite komponente iz komponente ploči u biblioteku svog. FLA datoteku.

Korak 2 - Napravite novi layer

Da bismo sve to uredno trebali biste stvoriti novi layer na glavnom vremenskoj i dati mu ime. Učinite to kao što je prikazano na slici ispod.

Korak 3 - Kreiranje pozadini

Sada ste stvorili pozadina sa gradijenta. Iako to nije potrebno da bi učinak rada pokazuje da je efekt također radi s transparentnim sadržaj (više o tome kasnije).

Odaberite prvi kadar u "BG" layer i nacrtati oblik s pravokutnika alat na platnu. Odaberite pravokutnik i podesite postavke boje da imaju lijep gradijent (možete koristiti i bilo koje druge boje).

Korak 4 - Kreiranje gumba

Kocka efekt trebao reagirati dinamički državi korisnici mišem (rollover / rollout). To je najbolje ne dodajte događaj slušatelja u sebi snagu i umjesto toga koristite "praznu" gumb.

Kliknite prvog kadra u sloju "btn" i nacrtati pravokutnik veličine platna (boja ne mater budući gumb neće biti vidljiv). Odaberite pravokutnik i pretvoriti ga u gumb sa [pritisnite F8] ili pravo kliknite na MovieClip -> "Pretvoriti to stranica ...".

Postavite naziv gumb "btn" i osigurati taj tip je "Button".

Dvaput kliknite gumb. Sada povucite prvi kljucni okvir "gore" do zadnjeg okvira "Hit". To osigurava da će biti interaktivan gumb, ali nisu vidljive.

Dobiti natrag na glavnu vremenskoj i postavili primjer naziv gumb "btn".

Korak 5 - Napravite početak MovieClip

Efekt treba imati dva movieclip gdje vizualne informacije su preuzete iz. Sada ćete stvoriti movieclip prijelaz će početi sa.

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

Sada pretvoriti ovu sliku na movieclip i naziv je "img1".

Zalazak primjer ime upravo stvorili movieclip na "img1".

Korak 6 - Kreiranje Kraj MovieClip

Kraj MovieClip će sadržavati tekst umjesto slika. Postigli, trebat će vam malo drugačiji pristup.

Odaberite prvi kadar sloj "img2" (ok, loša imenovanja, slobodno se točno da ) I nacrtati pravokutnik s veličinom platna. Vi želite biti sigurni da je kraj MovieClip ima iste dimenzije kao i Start movieclip. Taj zašto prvo nacrtati nevidljivi oblik s iste veličine kao Start movieclip.

Odaberite oblik i zalazak vrijednost to 0 alfa (oblik je još uvijek tamo, ali nevidljivo).

Pretvorite oblik MovieClip [pritisnite F8] ili pravo kliknite na MovieClip -> "Pretvoriti to Symbol ..." i ime ga "img2".

Dvaput kliknite MovieClip upravo stvorili, stvorili novi prazan sloj i staviti neki tekst na taj novostvoreni sloj.

Voditelj povratak na glavnu vremenskoj i postavili primjer ime movieclip na "img2".

Korak 7 - Dodaj rollover ActionScript

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

Ako jednostavno želite imati tranziciju na rollover (i ne-povratak tranzicije na rollout) kopirajte sljedeće linije koda na prozor.

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

U prvom retku te dodati slušatelj rollover događaj na gumb. U funkciji "_onOver" (redak 3), prvo stvoriti instancu CubeTransitionEffectAS3 prije nego što onesposobiti miš interaktivnost komponente (linije 4 i 5). Zapamtite, gumb ste stvorili ranije brine o miš efekata i ne želite miješati učinak na to.

U skladu 9 napokon te inicijalizacija efekt ( dokumentacija parametra ovdje ). Važan dio su prva dva parametra. Možete odrediti da je prijelazno počinje sa "img1", a završava s "img2".

Izvoz svoj fla datoteku. Kao što vidite, učinak komponenta radi savršeno sa transparentnu pozadinu "img2".

Korak 8 - ActionScript Složenije

U redu, uz prethodnu kod rollover utvrde pravedan prekid. Ali što ako se žele i rollout funkciju koja obrće prijelaz iz "img2" na "img1"? Da bi se postigao taj trebate složeniji kod. Brisanje original i ubacite sljedeće:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver); btn.addEventListener (MouseEvent.ROLL_OUT, _onOut); var trčanje = false; var goin = false; var goOut = false; _onOver funkciju (e: MouseEvent) (if (! trčanje) (_createAnimation ("u"); trčanje = true;) else (goin = false; goOut = true;)) _onOut funkciju (e: MouseEvent) (if (! trčanje) (_createAnimation ("out"); trčanje = true; else () goin = true; goOut = false;)) _inAnimationDone funkciju (e: Event) (e.target.removeFilter (); img1.visible = false; ako (odlazeći) (_createAnimation ("out");) else ( trčanje = false; goOut = false;)) _outAnimationDone funkciju (e: Event) (e.target.removeFilter (); img2.visible = false; ako (goOut) (_createAnimation ("u");) else (trčanje = false ; Goin = false;)) function _createAnimation (dir: String) (var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 (); myFilter.mouseEnabled = false; myFilter.mouseChildren = false; addChild (myFilter); if (dir == "u" ) (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 obrnutom smjeru tijekom tranzicije efekt radi. Umjesto toga možete "sjetiti" akciju korisnika, pričekajte efekt je učinio i primijeniti Revers tranzicije.

Varijable "Goin" i "goOut" (linija 5 i 6) se koriste za tu svrhu. Postavljate ih kada je 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 tranzicije odmah (linija 10 i 20).

Funkcija "_createAnimation" (linija 52) je svoju funkciju pomagača započeti animaciju, ovisno o smjeru "dir" ste prošli kao parametar.

Uočite da su, nakon poziva "removeFilter" metoda (linija 29 i 41) i Start movieclip i kraj MovieClip postavljen na vidljivom (od učinka). Taj zašto ste postavili MovieClip vidljivost - tranzicija započela sa - lažnim (linija 30 i 42).

Preuzmite

Kliknite ovdje za download fla ovog tutorial. Napomena:. FLA ne uključuje efekt komponentu. Kako bi fla funkcionirati, te potreba za kupovina Tranzicija efekt Cube ovdje .

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