Cool Flash Effect Tutorials!

Santrauka

Šiuo samouczku jūs išmoksite kaip sukurti kubo perėjimo poveikis pelės apsivertus transporto priemonei.

Čia galutinis rezultatas:

Reikalavimai

Flash CS3 "arba" Flash CS4 ".

Pastaba: šiame samouczku Screenshot padaryta Flash CS3. Jis veikia lygiai taip pat "Flash CS4".

Žingsnis 1 - Install poveikio komponentas

Pirkimo Cube perėjimo efektą čia . Prašome laikytis įdiegti instrukcijas ir vilkite komponento sudėtinės plokštės į biblioteką Jūsų. Fla.

Žingsnis 2 - Sukurkite naują sluoksnį

Norėdami išlaikyti viskas tvarkinga turėtumėte sukurti naują sluoksnį ant pagrindinės laiko ir suteikia jai pavadinimą. Ar tai, kaip parodyta paveiksle žemiau.

3 žingsnis - Sukurti fone

Dabar kuriate su gradientas fone. Nors tai ir nėra būtina atlikti poveikio jo darbas rodo, kad poveikis taip pat dirba su skaidriais turinį (daugiau apie tai vėliau).

Pasirinkite pirmąjį grafiką "BG" sluoksniu ir nubrėžti stačiakampį, įrankis ant drobės forma. Pasirinkite stačiakampio ir reguliuoti spalvų nustatymus turėti gražią gradientą (taip pat galite naudoti bet kokią kitą spalvą).

4 žingsnis - Sukurti nuorodą

Kubas poveikis turėtų reaguoti dinamiškai vartotojams pele valstybės (virtimo / diegimo). Geriausia praktika nebuvo įtraukti atveju klausytojas poveikis pats ir vietoj jų "tuščią" mygtuką.

Spustelėkite pirmą rėmo sluoksnis "btn" ir parengti su sienų dekoras drobė (spalva neturi Mater nuo mygtukas nebus matomas dydžio vienetas). Pasirinkite stačiakampio ir konvertuoti jį į mygtukas su [paspauskite F8] arba paspauskite dešiniuoju pelės klavišu MovieClip -> "Konvertuoti į Muzikiniai ...".

Nustatykite mygtuką "btn" ir įsitikinkite, kad tipo "pavadinimas mygtukas".

Dukart spustelėkite mygtuką. Dabar perkelkite pirmą keyframe "Aukštyn" iki paskutinio kadro "Hit". Tai užtikrina, kad mygtukas bus interaktyvus, bet nematoma.

Grįžkite į pagrindinį laiko ir nustatyti Pavyzdžiui, pavadinimas mygtuką "btn".

5 žingsnis - Sukurti pradėti Movieclip

Poveikis poreikių du Movieclip kur regėjimo informacija yra paimta iš. Jūs dabar sukurti Movieclip perėjimą prasidės.

Spustelėkite pirmą rėmelį sluoksnis "img1". Importo vaizdas su Canvas Size, paspausdami [paspauskite Ctrl-R] arba "File" -> "Import" -> "Import scenoje ...".

Dabar konvertuoti šį vaizdą Movieclip ir pavadinkite ją "img1".

Nustatyti Pavyzdžiui, pavadinimas tik sukurtos Movieclip į "img1".

6 žingsnis - Sukurti Pabaigos Movieclip

Pabaigos Movieclip kurioje bus tekstas, o ne įvaizdį. Pasiekti šį tikslą, jums reikės šiek tiek kitoks požiūris.

Pažymėkite pirmą rėmo sluoksnis "img2" (Gerai, blogai pavadinimų, nedvejodami pataisyti, kad ) Ir parengti su sienų dekoras drobė Dydis stačiakampis. Jūs norite įsitikinti, kad galutinis Movieclip turi tą patį matmenų Start Movieclip. Thats why pirmą kartą atkreipti nematomas formos, tokio pat dydžio kaip Pradėti Movieclip.

Pasirinkite formos ir nustatyti alfa vertę 0 (forma vis dar egzistuoja, bet nematomas).

Konvertuoti formos, Movieclip [paspauskite F8] arba paspauskite dešiniuoju pelės klavišu MovieClip -> "Konvertuoti į Muzikiniai ..." ir pavadinkite ją "img2".

Dukart spustelėkite ką tik sukurtą Movieclip, sukurkite naują tuščią sluoksnį ir ją šiek tiek teksto, kad naujai sukurtas sluoksnis.

Eik atgal į pagrindinės laiko ir nustatyti Pavyzdžiui, pavadinimas Movieclip į "img2".

7 žingsnis - Pridėkite virtimo ActionScript

Pasirinkite sluoksnį "scenarijus" ir atidarykite "Akcijos" lango "Windows" -> "veiksmai" ar [paspausti F9].

Jei tiesiog norite išsakyti savo nuomonę apie virtimo perėjimą (o ne atgal perėjimo į diegimo) kopija šias eilutes į kodo langas.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 funkcija _onOver (e: MouseEvent) (
  var MyFilter: CubeTransitionEffectAS3 = nauji CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  ADDCHILD (MyFilter);

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

Pirmoje eilutėje įrašote apsivertus klausytojų mygtuką. Jei funkcija "_onOver" (3 punktas) pirmą kartą kuriate iš CubeTransitionEffectAS3 instancija išjungti pelės interaktyvumo komponentas (linija 4 ir 5). Nepamirškite, kad mygtukas kurį sukūrėte anksčiau yra rūpintis pelės poveikis ir nenorite poveikis kištis į tai.

Pagal 9 pagaliau jūs inicijuoti poveikis ( dokumentai parametras čia ). Svarbi yra pirmųjų dviejų parametrų. Norėdami nustatyti, kad perėjimas prasideda "img1" ir baigiasi "img2".

Eksporto savo Fla. Kaip matote, poveikio komponentas veikia puikiai su skaidriu fone iš "img2".

8 etapas - Sudėtingesnes ActionScript

Gerai, su ankstesne kodas virtimo pavyks gerai. Bet kas, jei jūs taip pat norite turėti diegimo funkcija panaikina perėjimą nuo "img2" iki "img1"? Siekiant, kad jums reikia daugiau sudėtingų kodas. Pašalinti scenarijų ir įtraukti šie:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver); btn.addEventListener (MouseEvent.ROLL_OUT, _onOut); var veikia = false; var Goin = false; var goOut = false; funkcija _onOver (e: MouseEvent) (if (! veikia) (_createAnimation ("in"); rodyti = true;) else (Goin = false; goOut = true;)) funkcija _onOut (e: MouseEvent) (if (! veikia) (_createAnimation ("out"); rodyti = true; ) else (Goin = true; goOut = false;)) funkcija _inAnimationDone (e: Event) (e.target.removeFilter (); img1.visible = false if (Goin) (_createAnimation ("out");) else ( veikia = false; goOut = false;)) funkcija _outAnimationDone (e: Event) (e.target.removeFilter (); img2.visible = false if (goOut) (_createAnimation ("in");) else (veikia = false ; Goin = false;)) funkcija _createAnimation (dir: String) (var MyFilter: CubeTransitionEffectAS3 = nauji CubeTransitionEffectAS3 (); myFilter.mouseEnabled = false; myFilter.mouseChildren = false; ADDCHILD (MyFilter); if (dir == "į" ) (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);)) 

Svarbu žinoti, kad jūs negalite pakeisti perėjimo kryptimi per efektas veikia. Vietoj to jums gali "prisiminti" vartotojo veiksmai, palaukite, kol poveikis yra padaryta, ir kreiptis atlapas perėjimas.

Kintamųjų "Goin" ir "goOut" (linija 5 ir 6) yra naudojama šiuo tikslu. Jūs nustatote juos funkcijos "_onOver" ir "_onOut" (linija 8 ir 18) yra įvykdytas. Bet tik tada, kai var veikia, tiesa, jei ji klaidinga (linija 9 ir 19), pradėdami perėjimą iš karto (atitinka 10 ir 20).

Funkcija "_createAnimation" (eilutė 52) yra jūsų pagalbininkas funkcija pradėti animacija, priklausomai nuo krypties "dir" jūs praėjote kaip parametras.

Atkreipkite dėmesį, kad po šaukimo "removeFilter" metodą (eilutė 29 ir 41) abu Pradėti Movieclip ir pabaiga Movieclip nustatomi matomi (iš efektas). Thats why jūs nustatote Movieclip matomumas - perėjimas prasidėjo - false (eilutė 30 ir 42).

Parsisiųsti

Spauskite čia norėdami parsisiųsti pamoka fla apie tai. Pastaba:. Fla nėra įtraukti poveikio komponentas. Kad fla darbą, reikia pirkti Kubo perėjimo efektą čia .

Čia galite rasti vaizdo samouczku kaip įgyvendinti skirtingą poveikį .