Cool Flash Effect Tutorials!

Kokkuvõte

Sel juhendaja õpid, kuidas luua kuutiosiirros mõju hiire ümbermineku korral.

Siin lõpptulemus:

Nõuded

Flash CS3 või Flash CS4.

Märkus: pildil käesolevas õpetamisel tehakse Flash CS3. See toimib täpselt sama Flash CS4.

Samm 1 - Install mõju komponendi

Ostu- Cube siirrostehoste siin . Palun järgige paigaldamise juhis ja lohista komponendist osa paneel raamatukogu oma. FLA faili.

Aste 2 - luua uus kiht

Et hoida asju korrastada peate looma uue kihi peamiste ajaskaala ja anda sellele nime. Tehke seda, nagu on näidatud allpool oleval pildil.

Aste 3 - Loo taust

Nüüd loote taustal kalle. Kuigi seda ei ole vaja teha mõju töö see näitab, et toime töötab ka läbipaistev sisu (rohkem sellest hiljem).

Valige esimene raam "BG" kiht ning teha kuju ristküliku tööriist lõuendile. Valige ristkülik ja reguleerida värvi seadeid on kena gradient (võid kasutada ka mõnda teist värvi).

Aste 4 - Loo nuppu

Kuubik mõju peaks reageerima dünaamiliselt kasutajad hiire seisund (ümbermineku / levikuga). See on hea tava mitte lisada juhul kuulaja toime ise ja selle asemel kasutada "tühja" nuppu.

Klõpsake esimese raami kiht btn "ja Ristküliku joonistamiseks lõuendi suuruse (värvi ei Mater sest nupp ei ole nähtav). Valige ristkülik ja teisendab selle Button koos [vajutage F8] või paremale klõpsa MovieClip -> "Convert to Symbol ...".

Määra nimi nuppu "btn" ja veenduge, et tüüp on "Button".

Topeltklõpsake nuppu. Nüüd tõmmake esimene keyframe "Up" viimasel raam "Hit". See tagab, et nupp on interaktiivsed, kuid mitte nähtav.

Saa taas põhitabelisse ajaskaala ja määrata näiteks nime nuppu "btn".

Aste 5 - Loo algus Movieclip

Mõju vajadustele on kaks Movieclip kus visuaalne informations on võetud. Nüüd saate luua Movieclip üleminek algab.

Kliki esimese raami kiht img1 ". Import pildi suurus lõuend, vajutades [Ctrl-R] või "File" -> "Import" -> "Import on Stage ...".

Nüüd muuta see pildi Movieclip ja nime "img1".

Set näiteks nimi äsjaloodud Movieclip to "img1".

Samm 6 - Loo lõpp Movieclip

End Movieclip sisaldab teksti asemel pilti. Selle saavutamiseks vajate te pisut teistsugust lähenemist.

Valige esimene kaader kiht img2 "(ok, halb moment julgelt tõele, et ) Ja Ristküliku joonistamiseks lõuendi suuruse. Sa tahad teha kindel, et lõpp Movieclip on samade mõõtmetega nagu Start Movieclip. Thats miks te esmalt koostama nähtamatu kuju sama suur kui Start Movieclip.

Valige kuju ja määrata alfa väärtuseks 0 (kuju on ikka veel olemas, kuid nähtamatu).

Konverteeri kuju Movieclip [vajutage F8] või paremale klõpsa MovieClip -> "Convert to Symbol ..." ja nime "img2".

Topeltklõpsake äsjaloodud Movieclip, luua uus tühi kiht ja pane natuke teksti kohta, et äsja loodud kiht.

Head taas põhitabelisse ajaskaala ja määrata näiteks nime Movieclip to "img2".

Samm 7 - Lisa ümbermineku ActionScript

Valige kiht "skript" ja avatud "Meetmed" akna "Windows" -> "Meetmed" või [vajutage F9].

Kui soovite lihtsalt on ülemineku kohta ümbermineku (ja back-ülemineku kohta levikuga) koopia järgmised read arvesse koodi aken.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 funktsiooni _onOver (e: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 = uus CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

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

Esimesel real lisate ümbermineku korral kuulaja nuppu. Kui funktsioon "_onOver" (rida 3) loote astme CubeTransitionEffectAS3 enne jätad hiire interaktiivsust osa (rida 4 ja 5). Pea meeles, et nupu varem loodud hoolitseb hiire mõju ja te ei taha mõju häirida sellest.

Kooskõlas 9 Lõpuks sa initsialiseerida mõju ( dokumentatsioon parameeter siin ). Oluliseks osaks on kaks esimest parameetrit. Saate määrata, et üleminek algab "img1" ja lõpeb "img2".

Viige FLA faili. Nagu näete, mõju komponent töötab ideaalselt läbipaistev taust "img2".

Aste 8 - Keerulisemate ActionScript

OK, eelmise koodi ümbermineku töötab just fine. Aga kui sa ka tahtnud levikuga funktsioon, mis kattub üleminek "img2" kuni "img1"? Et seda saavutada, pead keerukam koodi. Kustuta skript ja lisada järgmine:

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

 var töötab = false;
 var lähed = false;
 var goOut = false;

 funktsiooni _onOver (e: MouseEvent) (
  if (! töötab) (
  _createAnimation ("in");
  jooksvate = true;
  ) Else (
  lähed = false;
  goOut = true;
  )
 )

 funktsiooni _onOut (e: MouseEvent) (
  if (! töötab) (
  _createAnimation ("out");
  jooksvate = true;
  ) Else (
  lähed = true;
  goOut = false;
  )
 )

 funktsiooni _inAnimationDone (e: Sündmus) (
  e.target.removeFilter ();
  img1.visible = false;

  if (lähed) (
  _createAnimation ("out");
  ) Else (
  jooksvate = false;
  goOut = false;
  )
 )

 funktsiooni _outAnimationDone (e: Sündmus) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goOut) (
  _createAnimation ("in");
  ) Else (
  jooksvate = false;
  lähed = false;
  )
 )

 funktsiooni _createAnimation (rež: String) (
  var myFilter: CubeTransitionEffectAS3 = uus 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);
  )
 )

Oluline on teada, et te ei saa vastupidises suunas ülemineku ajal toime töötab. Selle asemel saate "mäleta" meetme kasutaja, oodake, kuni efekt on tehtud ja kohaldada revers üleminekut.

Muutujad "lähed" ja "goOut" (rida 5 ja 6) on sel eesmärgil kasutada. Sa valid neid, kui normaalsed "_onOver" ja "_onOut" (rida 8 ja 18) on teostatud. Aga ainult siis, kui var töötab on tõsi, kui see on vale (liin 9 ja 19), hakkate üleminek kohe (rida 10 ja 20).

Funktsiooni "_createAnimation" (rida 52) on oma abilise funktsiooni käivitamiseks animatsiooni olenevalt suunas "dir" te möödunud parameetrit.

Pange tähele, et pärast kutsudes "removeFilter" meetod (rida 29 ja 41) nii Start Movieclip ja End Movieclip on seatud nähtav (välja efekt). Thats miks seate Movieclip nähtavus - üleminek algas - false (rida 30 ja 42).

Lae

Vajuta siia , et laadida FLA käesoleva õpetamisel. Märkus:. FLA ei hõlmab mõju komponenti. Et teha FLA töö, pead ostma Cube siirrostehoste siin .

Siit leiad video tutorial, kuidas rakendada erinevat mõju .