Cool Flash Epekto Tutorials!

Buod

Sa ganitong tutorial ikaw ay malaman kung paano lumikha ng isang kubo epekto sa paglipat mouse rollover.

Narito ang huling resulta:

Pangangailangan

Flash CS3 o CS4 Flash.

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 sangkap

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

Hakbang 2 - Lumikha ng isang bagong layer

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

Hakbang 3 - Lumikha ng background

Ngayon gumawa ka ng isang background na may isang greydyent. Kahit na ito ay hindi kailangan upang gawin ang mga epekto ng trabaho ito ay nagpapakita na ang epekto ay gumagana rin sa transparent na nilalaman (more on na mamaya).

Piliin ang unang frame sa "bg" layer at gumuhit ng isang hugis na may rectangle tool 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 mga kulay).

Hakbang 4 - Gumawa ng pindutan

Ang kubo na epekto ay dapat na gumanti sa magilas na ang mga gumagamit ng estado mouse (rollover / rollout). Ito ay pinakamahusay na pagsasanay HINDI upang idagdag ang mga kaganapan tagapakinig sa ang epekto sarili at sa halip na gumamit ng isang "blangko" na button.

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

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

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

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

Hakbang 5 - Gumawa ng simulan Movieclip

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

Mag-click sa unang frame sa layer "img1". I-import ang isang imahe na may sukat ng lona sa pamamagitan ng pagpindot sa [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 mga halimbawa ng pangalan ang nilikha Movieclip sa "img1".

Hakbang 6 - Lumikha ng End Movieclip

Ang End 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, masamang pagbibigay ng pangalan, huwag mag-atubili na tama na ) At maglabas ng isang rektanggulo sa ang sukat ng lona. Gusto mong tiyakin na ang End Movieclip ay may parehong sukat ng bilang ang Start Movieclip. Atipan ng pawid kung bakit mo munang gumuhit ng isang hugis na hindi nakikita sa parehong laki bilang ang Start Movieclip.

Piliin ang mga hugis at itakda ang alpha halaga sa 0 (mga hugis ay pa rin doon pero hindi nakikita).

Convert ang mga hugis sa isang Movieclip [] pindutin F8 o karapatang i-click ang MovieClip -> "convert sa Symbol ..." at pangalan ito "img2".

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

Tumungo sa likod sa main timeline at itakda ang mga halimbawa ng pangalan ang 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);

 _onOver function (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 ng kaganapan upang ang button. Sa function "_onOver" (linya 3) mo munang gumawa ng isang halimbawa ng CubeTransitionEffectAS3 bago i-disable mo ang mouse sa interactivity sa mga sangkap (linya ng 4 at 5). Tandaan, ang pindutan ng nilikha mo ay mas maaga alaga ang mga epekto mouse at hindi mo nais ang epekto sa makagambala sa na.

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

I-export ang iyong fla file. Bilang na nakikita mo, ang epekto sangkap na gumagana ganap na ganap na may transparent background ng "img2".

Hakbang 8 - Higit pang mga komplikadong ActionScript

OK, sa mga nakaraang code rollover ang gumagana lamang pagmultahin. Ngunit ano kung ka ring nais na magkaroon ng isang function rollout na reverses ang paglipat mula sa "img2" sa "img1"? Upang makamit na kailangan mo ng isang mas kumplikadong code. Tanggalin ang script at ipasok ang mga sumusunod:

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

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

 _onOver function (e: MouseEvent) (
  kung (! tumatakbo) (
  _createAnimation ("sa");
  tumatakbo = true;
  ) Else (
  goIn = false;
  goOut = true;
  )
 )

 _onOut function (e: MouseEvent) (
  kung (! tumatakbo) (
  _createAnimation ("out");
  tumatakbo = true;
  ) Else (
  goIn = true;
  goOut = false;
  )
 )

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

  kung (goIn) (
  _createAnimation ("out");
  ) Else (
  tumatakbo = false;
  goOut = false;
  )
 )

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

  kung (goOut) (
  _createAnimation ("sa");
  ) Else (
  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);
  ) Else kung (dir == "out") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", hindi totoo);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Ito ay mahalaga na malaman, na maaari mong HINDI reverse ang direksyon ng paglipat sa panahon ng epekto ay tumatakbo. Sa halip na maaari mong "tandaan" ang aksyon ng user, maghintay hanggang ang mga 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 na. Mong itakda ang mga ito kapag ang mga function "_onOver" at "_onOut" (linya 8 at 18) ay executed. Ngunit lamang kung ang var tumatakbo ay totoo, kung ito ay maling (linya 9 at 19), simulan ang paglipat kaagad (linya 10 at 20).

Ang function ng "_createAnimation" (linya 52) ay ang iyong helper function ang simulan ang animation depende sa direksyon "dir" mo lumipas bilang parameter.

Paunawa na pagkatapos ng pagtawag ng "removeFilter" paraan (linya 29 at 41) pareho ang Start Movieclip at ang End Movieclip ay naka-set na 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 ito tutorial. Tandaan: Ang. Fla ay hindi kabilang ang mga bahagi na epekto. Upang gumawa ng fla trabaho, kailangan mong bumili ng Transition Epekto Cube dito .

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