Cool Flash Tutorials Epekto!

Buod ng

Sa tutorial na ito ay ninyong malaman kung paano lumikha ng isang kubo epekto sa paglipat ng mouse rollover.

Narito ang huling resulta:

Pangangailangan

Flash CS3 o Flash CS4.

Tandaan: Ang screenshot sa tutorial na ito ay ginawa sa Flash CS3. Ito ay gumagana nang eksakto ang parehong sa Flash CS4.

Hakbang 1 - I-install ang epekto bahagi

Bumili ng mga Epekto kubo Transition dito. Mangyaring sundin ang i-install ang mga tagubilin at i-drag ang bahagi mula sa panel ng mga sangkap sa aklatan ng iyong. Fla file.

Hakbang 2 - Lumikha ng isang bagong layer

Upang panatilihing malinis ng mga bagay na dapat mong lumikha ng isang bagong layer sa main timeline at bigyan ito ng pangalan. Huwag na ito tulad ng ipinapakita sa screenshot sa ibaba.

Hakbang 3 - Lumikha ng background

Ngayon ikaw ay gumawa ng background na may isang greydyent. Kahit na ito ay hindi kinakailangan upang gawin ang mga epekto ng trabaho ito ay nagpapakita na ang epekto din sa mga gawa na may transparent na nilalaman (more on na mamaya).

Piliin ang unang frame sa "bg" layer at gumuhit ng isang hugis na may rektanggulo kasangkapan sa tolda. Piliin ang rektanggulo at ayusin ang mga setting ng kulay na magkaroon ng isang magandang greydyent (Maaari mo ring gamitin ang anumang iba pang kulay).

Hakbang 4 - Lumikha ng pindutan

Ang mga kubo epekto ay dapat na tumugon sa mga dynamic na ang mga gumagamit ng estado mouse (rollover / rollout). Ito ay mahusay na kasanayan HINDI idagdag ang mga kaganapan sa mga tagapakinig ang epekto sa sarili at sa halip ay gamitin ang isang "walang laman" na button.

I-click ang unang frame sa layer "btn" at gumuhit ng isang parihaba na may sukat ng kuwadro (kulay ay hindi mater dahil ang pindutan ay hindi nakikita). Piliin ang rektanggulo at i-convert ito sa isang Pindutan ng [F8 pindutin] o karapatang mag-click sa MovieClip -> "convert sa Simbolo ...".

Itakda ang pangalan ng button sa "btn" at siguraduhin na ang uri ay "Button".

Double-click ang pindutan. Ngayon, i-drag ang unang keyframe "Up" sa huling frame "Hit". Ito ay sigurado, na ang pindutan ay interactive ngunit hindi nakikita.

Kumuha ng bumalik sa main timeline at itakda ang mga halimbawa ng mga pangalan ang button sa "btn".

Hakbang 5 - Gumawa ng simulan Movieclip

Ang epekto ng mga pangangailangan ng may dalawang Movieclip kung saan ang mga visual na informations ay kinuha mula sa. Ikaw ngayon ay lumikha ng Movieclip paglipat ay magsisimula na may.

I-click ang unang frame sa layer "img1". Import ng isang imahe na may sukat ng kuwadro sa pamamagitan ng pagpindot [pindutin ang Ctrl-R] o "File" -> "import" -> "import sa Stage ...".

Ngayon-convert ang larawan na ito sa isang Movieclip at pangalan ito "img1".

Itakda ang halimbawa pangalan ng nilikha Movieclip sa "img1".

Hakbang 6 - Lumikha ng End Movieclip

Ang Katapusan Movieclip ay naglalaman ng teksto sa halip ng isang imahe. Ang makamit ito kailangan mo ng isang bahagyang iba't-ibang paraan.

Piliin ang unang frame ng layer "img2" (ok, masama ang pagbibigay ng pangalan, mag-atubili na tama na ) At gumuhit ng isang parihaba na may sukat ng kuwadro. Gusto mong tiyakin na ang mga End Movieclip ay may parehong sukat ng Start Movieclip. Atipan ng pawid kung bakit mo munang gumuhit ng isang hugis na hindi nakikita sa parehong sukat ng Start Movieclip.

Piliin ang hugis at itakda ang alpha na halaga sa mga 0 (ang hugis ay mayroon pa rin ngunit hindi nakikita).

Convert ang hugis sa isang Movieclip pindutin ang [F8] o karapatang mag-click sa MovieClip -> "convert sa Simbolo ..." at ang pangalan ng ito "img2".

Double-click ang nilikha Movieclip, lumikha ng isang bagong layer walang laman at maglagay ng ilang teksto na sa bagong likhang layer.

Tumungo sa likod sa main timeline at itakda ang halimbawa pangalan ng Movieclip sa "img2".

Hakbang 7 - Magdagdag ng rollover ActionScript

Piliin ang layer "script" at buksan ang "Aksyon" window sa "Windows" -> "Aksyon" o [pindutin F9].

Kung ikaw lang ang nais na magkaroon ng isang transition sa rollover (at walang back-transition sa rollout) kopyahin ang mga sumusunod na linya sa window ng code.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

Sa unang linya idagdag mo ang rollover tagapakinig kaganapan sa button. Sa mga function "_onOver" (linya 3) una mong lumikha ng isang halimbawa ng CubeTransitionEffectAS3 bago mo i-disable ang mouse sa interactivity ng mga sangkap (linya 4 at 5). Tandaan, ang pindutan ng nilikha mo ang mas maaga ay alaga ang mga epekto ng mouse at hindi mo gusto ang epekto sa makagambala sa mga iyon.

Sa linya ng 9 sa wakas magpasimula mo ang epekto (babasahin ng mga parameter na dito). Ang mahalagang bahagi ay ang unang dalawang parameter. Tutukuyin mo na ang paglipat ay nagsisimula sa "img1" at nagtatapos sa "img2".

Fla-export ang iyong mga file. Tulad nang nakikita mo, ang epekto ng sangkap na gumagana ganap na ganap na may transparent na background ng "img2".

Hakbang 8 - Higit pang mga kumplikadong ActionScript

OK, sa nakaraang mga code rollover ang gawa lamang ng multa. Ngunit ano kung ikaw din ang nais na magkaroon ng isang rollout function na reverses ang paglipat mula sa "img2" sa "img1"? Upang makamit na kailangan mo ng isang mas kumplikadong code. Tanggalin ang script at isingit ang mga sumusunod:

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

 var tumatakbo = false;
 var goIn = false;
 var goOut = false;

 function _onOver (e: MouseEvent) (
  kung (! tumatakbo) (
  _createAnimation ( "sa");
  tumatakbo = true;
  ) sino pa ang paririto (
  goIn = false;
  goOut = true;
  )
 )

 function _onOut (e: MouseEvent) (
  kung (! tumatakbo) (
  _createAnimation ( "out");
  tumatakbo = true;
  ) sino pa ang paririto (
  goIn = true;
  goOut = false;
  )
 )

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

  kung (goIn) (
  _createAnimation ( "out");
  ) sino pa ang paririto (
  tumatakbo = false;
  goOut = false;
  )
 )

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

  kung (goOut) (
  _createAnimation ( "sa");
  ) sino pa ang paririto (
  tumatakbo = false;
  goIn = false;
  )
 )

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

  kung (dir == "sa") (
  myFilter.init (img1, img2, 24, "l-> r", 2, "easeInOutCubic", hindi totoo);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) sino pa ang paririto kung (dir == "out") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", hindi totoo);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Mahalaga na malaman, na maaari mong HINDI baligtarin ang mga direksyon ng mga transition sa panahon ng epekto ay tumatakbo. Sa halip na maaari mong "tandaan" ang mga aksyon ng user, maghintay hanggang epekto ay tapos na at mag-aplay ang revers paglipat.

Ang variable na "goIn" at "goOut" (linya 5 at 6) ay ginagamit para sa layunin. Mong itakda ang mga ito kapag ang mga function na "_onOver" at "_onOut" (linya 8 at 18) ay naisakatuparan. Pero kung ang var tumatakbo ay totoo, kung ito ay huwad (linya 9 at 19), simulan ang paglipat kaagad (linya 10 at 20).

Ang function na "_createAnimation" (linya 52) ay ang inyong lingkod ang function simulan ang animation depende sa direksyon "dir" ikaw lumipas na parameter.

Notice na pagkatapos ng pagtawag ng "removeFilter" paraan (linya 29 at 41) sa parehong Movieclip Simula at ang Wakas Movieclip ay naka-set sa nakikita (sa labas ng epekto). Atipan ng pawid kung bakit mo i-set ang Movieclip visibility - ang paglipat na nagsimula sa - upang huwad (linya 30 at 42).

Download

Mag-click dito upang i-download ang fla ng tutorial. Tandaan: Ang. Fla ay hindi kabilang ang mga epekto ng sangkap. Upang gawin ang fla trabaho, kailangan mong bumili ng Epekto kubo Transition dito.

Dito maaari mong mahanap ang isang video tutorial kung paano ipatupad ang iba't ibang epekto.