Effett tutorials Kessaħ Flash!

Sommarju

F'dan il-tutorja inti se jitgħallmu kif jinħoloq effett ta 'transizzjoni kubu fuq qlib ġrieden.

Hawnhekk il-finali riżultat:

Rekwiżiti

Flash CS3 jew Flash CS4.

Nota: Il-screenshot f'dan tutorja qed issir fil CS3 Flash. Huwa jaħdem eżatt l-istess fil Flash CS4.

Pass 1 - Installa l-effett komponent

Jixtru l- Effett ta 'Tranżizzjoni Cube hawn . Jekk jogħġbok segwi l -istruzzjonijiet jinstallaw u drag-komponent mill-bord komponent fil-librerija ta 'tiegħek. fajl FLA.

Stadju 2 - Toħloq saff ġdid

Li żżomm affarijiet puliti inti għandek toħloq saff ġdid dwar il-preżentazzjoni kronoliġika prinċipali u jagħtiha l-isem. Agħmel dan kif muri fuq il-screenshot hawn taħt.

Stadju 3 - Toħloq isfond

Issa inti toħloq sfond bi gradjent. Għalkemm dan mhux meħtieġ biex jagħmel ix-xogħol effett li juri li l-effett taħdem ukoll mal-kontenut trasparenti (aktar fuq li aktar tard).

Agħżel il-qafas ewwel "BG" saff u jiġbed għamla ma 'l-għodda rettangolu fuq it-tila. Agħżel l-rettangolu u aġġusta l-settings kulur li jkollu xaqliba sbieħ (inti tista 'wkoll juża kwalunkwe kulur ieħor).

Pass 4 - Toħloq buttuna

L-effett kubu għandha tirreaġixxi b'mod dinamiku l-istat ġurdien utenti (estensjoni / tnedija). Huwa aħjar prattika MHUX li jżidu l-semmiegħ każ l-effett stess u minflok jużaw "vojt" buttuna.

Ikklikkja fuq il-qafas ewwel saff "btn" u jiġbed rettangolu bl-daqs tal-kanvas (kulur ma mater peress li l-buttuna mhux se jkun viżibbli). Agħżel l-rettangolu u jikkonvertu lill Buttuna ma [istampa F8] dritt jew ikklikkja fuq il-MovieClip -> "Ikkonverti biex Simbolu ...".

Issettja l-isem tal-buttuna li "btn" u kun żgur li t-tip hija "Button".

Double-ikklikkja l-buttuna. Issa drag-keyframe ewwel "Sa" mal-qafas aħħar "Hits". Dan jagħmel żgur, li l-buttuna tkun interattivi iżda mhux viżibbli.

Terġa 'lura għall-preżentazzjoni kronoliġika prinċipali u stabbiliti l-isem istanza tal-buttuna li "btn".

Pass 5 - bidu Oħloq Movieclip

L-effett ħtiġijiet tal-jkollha żewġ Movieclip fejn il informations viżwali huma meħuda minn. Int ser ikollok issa toħloq il-Movieclip-transizzjoni ser jibda mal.

Ikklikkja fuq il-qafas ewwel darba fis-saff "img1". Importazzjoni ta 'immaġni mad-daqs tal-kanvas billi tagħfas [agħfas Ctrl-R] jew "File" -> "Importazzjoni" -> "Importazzjoni dwar l-Istadju ...".

Issa jikkonvertu din id-dehra għal Movieclip u isem "img1".

Issettja l-isem ta 'l-istanza biss maħluqa Movieclip għal "img1".

Pass 6 - Toħloq Movieclip Tmiem

Il-Movieclip Tmiem se jkun fih it-test minflok ta 'immaġni. Il-jinkiseb dan, ser ikollok bżonn ta 'approċċ ftit differenti.

Agħżel il-qafas ewwel tas-saff ta "img2" (ok, ismijiet ħażin, tħossok liberu li jikkoreġi dik ) U jiġbed rettangolu bl-daqs tal-kanvas. Inti tixtieq li tagħmel ċert li l-Movieclip Tmiem għandu l-istess qisien ta 'l-Movieclip Bidu. Thats għaliex inti ewwel jhejju forma inviżibbli ma 'l-istess daqs bħal-Movieclip Bidu.

Agħżel l-forma u jiffissa l-valur alfa biex 0 (l-għamla għadha hemm, iżda inviżibbli).

Ikkonverti l-forma lil Movieclip F8 istampa] [dritt jew ikklikkja fuq il-MovieClip -> "Ikkonverti biex Simbolu ..." u l-isem huwa "img2".

Ikklikkja darbtejn fuq il Movieclip biss maħluqa, joħolqu saff vojta ġdid u jqajjem xi test fuq dik saff maħluqa mill-ġdid.

Kap lura għall-preżentazzjoni kronoliġika prinċipali u stabbiliti l-isem ta 'l-istanza Movieclip għal "img2".

Stadju 7 - Żid qlib ActionScript

Agħżel il-saff "iskrittura" u tiftaħ il-"Azzjonijiet" tieqa ma '"Windows" -> "Azzjonijiet" jew agħfas [F9].

Jekk inti tixtieq sempliċiment li jkollhom transizzjoni fuq qlib (u mhux back-transizzjoni fuq tnedija) kopja tal-linji li ġejjin fis-tieqa tal-kodiċi.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 _onOver funzjoni (e: MouseEvent) (
  myFilter var: CubeTransitionEffectAS3 = CubeTransitionEffectAS3 ġodda ();
  myFilter.mouseEnabled = foloz;
  myFilter.mouseChildren = foloz;
  addChild (myFilter);

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

Fl-ewwel linja inti żid l-semmiegħ avveniment qlib li l-buttuna. Fil-funzjoni ta '"_onOver" (punt 3) inti l-ewwel jinħoloq istanza ta' l-CubeTransitionEffectAS3 qabel ma jiskonnettja l-interattività ġurdien tal-komponent (linja 4 u 5). Ftakar, il-buttuna inti maħluqa preċedenti hija tieħu ħsieb ta 'l-effetti maws u inti ma tridx l-effett li jinterferixxi fuq dan.

B'konformità 9 finalment inti initialize l-effett ( dokumentazzjoni tal-parametru hawn ). Il-parti importanti huma l-ewwel żewġ parametru. Inti tiddefinixxi li t-transizzjoni tibda bi "img1" u tispiċċa b '"img2".

Esportazzjoni fajl FLA tiegħek. Kif qed taraw, il-komponent effett jaħdem perfettament ma 'l-isfond trasparenti ta' "img2".

Pass 8 - kumpless Aktar ActionScript

OK, bil-kodiċi ta 'qabel l-estensjoni tax-xogħlijiet biss multa. Imma x'jiġri jekk inti tixtieq ukoll li jkollha funzjoni tnedija li jaqleb it-transizzjoni minn "img2" għal "img1"? Biex jinkiseb dan għandek bżonn kodiċi aktar kumplessi. Ħassar l-iskript u daħħal dan li ġej:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver); btn.addEventListener (MouseEvent.ROLL_OUT, _onOut); foloz var tmexxija =; goin var = foloz; goOut var = foloz; _onOver funzjoni (e: MouseEvent) (jekk (! tħaddim) (_createAnimation ("fi"); tmexxija = vera;) inkella (goin = foloz; goOut = vera;) _onOut funzjoni) (e: MouseEvent) (jekk (!) tmexxija (_createAnimation ("barra"); tmexxija = vera; ) inkella (goin = vera; goOut = foloz;)) _inAnimationDone funzjoni (e: Avveniment) (e.target.removeFilter (); img1.visible = foloz; jekk (goin) (_createAnimation ("barra");) inkella ( tmexxija = foloz; goOut = foloz;)) _outAnimationDone funzjoni (e: Avveniment) (e.target.removeFilter (); img2.visible = foloz; jekk (goOut) (_createAnimation ("fi");) (inkella taħdem = foloz ; goin = foloz;)) funzjoni _createAnimation (dir: String) (myFilter var: CubeTransitionEffectAS3 = CubeTransitionEffectAS3 ġodda (); myFilter.mouseEnabled = foloz; myFilter.mouseChildren = foloz; addChild (myFilter); jekk (Dir == "fi" ) (myFilter.init (img1, img2, 24, "-> r l", 2, "easeInOutCubic", falz); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);) inkella jekk (dir == "barra") (myFilter.init (img2, img1, 24, "-> l r", 2, "easeInOutCubic", falz); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);)) 

Huwa importanti li tkun taf, li inti tista MHUX reverse-direzzjoni tat-transizzjoni matul l-effett qed taħdem. Minflok inti tista "tiftakar" l-azzjoni ta 'l-utent, stenna sakemm l-effett isir u japplikaw il-tranżizzjoni revers.

Il-varjabbli "goin" u "goOut" (linja 5 u 6) huma użati għal dak il-għan. Inti iffisat lilhom meta l-funzjonijiet "_onOver" u "_onOut" (linja 8 u 18) huma eżegwiti. Iżda biss jekk il var ġiri hu veru, jekk huwa falz (linja 9 u 19), tibda l-tranżizzjoni dritt bogħod (linja 10 u 20).

Il-funzjoni "_createAnimation" (linja 52) huwa helper funzjoni tiegħek il-bidu l-animazzjoni jiddependi tad-direzzjoni "dir" inti tgħaddi bħala parametru.

Avviż li wara li jissejħu l removeFilter "metodu (linja 29 u 41) kemm il-Movieclip Bidu u l-Movieclip Tmiem huma stabbiliti biex viżibbli (minn l-effett). Thats għaliex tissettja l-viżibilità Movieclip - it-transizzjoni beda - biex falza (linja 30 u 42).

Download

Ikklikkja hawn biex tniżżel l-FLA ta 'dan tutorja. Nota: Il-. FLA ma jinkludi l-komponent effett. Sabiex jagħmel ix-xogħol FLA, inti għandek bżonn biex jixtru l- Effett ta 'Tranżizzjoni Cube hawn .

Hawnhekk tista 'ssib video tutorja ta 'kif għandhom jiġu implimentati effett differenti .