Përmbledhje

Në këtë tutorial do të mësoni se si të krijoni një efekt tranzicion kubike më mouse rollover.

Ja rezultati final:


Kërkesat

Flash CS3 ose Flash CS4.

Shënim: screenshot në këtë tutorial është bërë në Flash CS3. Ajo punon pikërisht njëjtë në Flash CS4.

Hapi 1 - Instalo komponentin efekt

Blerje Efekti Tranzicionit Cube këtu. Ju lutem ndiqni udhëzimet e instaluar dhe terhiq përbërës nga pjesë në panelin e bibliotekës së. Dosjen tuaj fla.

Drag komponent në bibliotekë

Hapi 2 - Krijoni një shtresë të re

Për të mbajtur pastër gjërat që ju duhet të krijoni një shtresë të re në afatin kohor kryesore dhe t'i jepte një emër. A kjo tregohet si më poshtë screenshot.

Krijo shtresa më afat kohor kryesore

Hapi 3 - Create background

Tani keni krijuar një sfond me një gradient. Edhe pse kjo nuk është e nevojshme për të bërë punë efekt ajo tregon se efekt edhe punon me përmbajtje transparente (më shumë se më vonë).

Zgjidhni kuadër të parë në bg "shtresë dhe vizatoni një formë me mjet drejtkëndësh mbi kanavacë. Zgjidhni drejtkëndësh dhe të rregullojë parametrat ngjyra të ketë një gradient nice (ju gjithashtu mund të përdorni ndonjë ngjyrë tjetër).

Krijo formë background

Settings Color gradient

Hapi 4 - Krijoni button

Fuqi kubike duhet të reagojnë në mënyrë dinamike të shtetit përdoruesit e miut (rollover / rollout). Ajo nuk është praktikë e mirë për të shtuar, përgjuesit e ngjarjes për efekt vetë dhe në vend të përdorni një "bosh" button.

Kliko kuadër të parë në shtresa "btn" dhe vizatoni një drejtkëndësh me madhësinë e kanavacë (ngjyra nuk butonin Mater që nuk do të jetë i dukshëm). Zgjidhni drejtkëndësh dhe kthyer atë në një Button me [F8 shtyp] ose right click mbi MovieClip -> "Convert low ...".

Formë Convert button

Set emrin e buton për të "btn" dhe sigurohuni që lloji është "Button".

Set emrin e button

Double-klikoni butonin. Tani keyframe drag parë "Up" në kuadrin e fundit "Hit". Kjo e bën të sigurt, që do të jetë interaktive butonin por jo të dukshme.

Ndryshimi brenda butonin keyframe

Get back to kohor kryesore dhe vendosur emrin shembull i butonin "btn".

Emri Set shembull i buton

Hapi 5 - Create fillim Movieclip

Efekt ka nevojë të ketë dy Movieclip ku informatat merren nga vizual. Ju tani do të krijojë Movieclip tranzicionit do të fillojë me.

Klikoni në kuadrin i parë në shtresën "img1". Importi një imazh me madhësinë e kanavacë duke shtypur [shtypni Ctrl-R] ose "File" -> "Importi" -> "Importi në skenë ...".

Image Import

Tani convert këtë imazh të një Movieclip dhe emri atë "img1".

Image Convert Movieclip

Emri sërë Movieclip

Set emrin shembull e krijuar vetëm për të Movieclip "img1".

Emri Set shembull

Hapi 6 - Create Fund Movieclip

Movieclip Fundi do të përmbajë tekst në vend të një imazhi. Të arritur këtë ju duhet një qasje pak të ndryshme.

Zgjidhni kuadër shtresa e parë e "img2" (ok, emërtimin e keqe, të ndjehen të lirë për të saktë se :) ) Dhe vizatoni një drejtkëndësh me madhësinë e kanavacë. Ju dëshironi të bëni të sigurtë që në fund ka Movieclip njëjtat dimensione si Movieclip Start. Thats pse keni nxjerrë një formë të padukshme me të njëjtën madhësi si Movieclip Start.

Formë Draw

Zgjidhni formën dhe vlerën e vendosur për të alfa 0 (formë është ende atje, por të padukshme).

Alfa sërë formë

Convert formë të një F8 [Movieclip shtyp] ose right click mbi MovieClip -> "Convert low ..." dhe emri atë "img2".

Convert Movieclip

Double-click Movieclip krijuar vetëm, të krijojnë një shtresë të re bosh dhe vendos disa tekst në atë shtresë të sapo-krijuar.

Shto tekst të Movieclip

Shefi kthehet kohor kryesore dhe vendosur emrin shembull i Movieclip të "img2".

Emri Set shembull

Hapi 7 - Shto rollover ActionScript

Zgjidhni shtresa e "shkrimit" dhe të hapur "Veprimet" dritare me "Windows" -> "Veprimet" ose [F9 shtyp].

Hapur dritarja ActionScript

Nëse ju doni thjesht të ketë një tranzicion të rollover (dhe jo prapa-tranzicion më rollout) kopje në linjat e mëposhtme kodin dritare. 

 (btn.addEventListener MouseEvent.ROLL_OVER, _onOver);

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

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

Në rreshtin e parë shtoni dëgjues ngjarje të rollover button. Në funksion "_onOver" (linjë 3) keni krijuar një shembull i CubeTransitionEffectAS3 para se të çaktivizoni interaktive miu i komponentit (line 4 dhe 5). Mos harroni, butonin e keni krijuar më parë është duke u kujdesur për efektet e miut dhe ju nuk dëshironi fuqi për të ndërhyrë në këtë.

Në linjë 9 fund ju inicializoj efekt (dokumentacionin e parametri këtu). Pjesë të rëndësishme janë parë dy parametër. Ju define se tranzicionit fillon me "img1" dhe mbaron me "img2".

Fla file Export tuaj. Siç e shihni, komponenti efekt works perfectly me transparent background e "img2".

Hapi 8 - Më shumë kompleks ActionScript

OK, me kodin e mëparshëm rollover works just fine. Por, çfarë nëse ju duan gjithashtu të kenë një funksion rollout që shfuqizon tranzicion nga "img2" në "img1"? Për të arritur këtë ju duhet një kod më komplekse. Delete shkrimit dhe futur në vijim: 

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

 var running = false;
 Goin var = false;
 goOut var = false;

 _onOver function (e: MouseEvent) (
  if (! running) (
  _createAnimation ( "në");
  running = true;
  ) else (
  Goin = false;
  goOut = true;
  )
 )

 _onOut function (e: MouseEvent) (
  if (! running) (
  _createAnimation ( "nga");
  running = true;
  ) else (
  Goin = true;
  goOut = false;
  )
 )

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

  if (goin) (
  _createAnimation ( "nga");
  ) else (
  running = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "në");
  ) else (
  running = false;
  Goin = false;
  )
 )

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

  if (dir == "në") (
  myFilter.init (img1, img2, 24, "L-> r", 2, "easeInOutCubic", false);
  (myFilter.addEventListener CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) else if (dir == "jashtë") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", false);
  (myFilter.addEventListener CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Është e rëndësishme që të dini, se ju nuk mund të ndryshojë drejtimin e tranzicionit gjatë efekt po kandidon. Në vend të kësaj ju mund të "kujtohet" veprimin e përdoruesit, prisni deri sa efekti është bërë dhe të aplikojnë tranzicionit revers.

Variables "goin" dhe "goOut" (linjë 5 dhe 6) janë përdorur për këtë qëllim. Ju vendosur ata kur funksionet _onOver "dhe" _onOut "(linjë 8 dhe 18) janë ekzekutuar. Por vetëm nëse running var është e vërtetë, nëse është e rreme (line 9 dhe 19), ju filloni menjëherë tranzicion (line 10 dhe 20).

Funksioni "_createAnimation" (line 52) është funksion juaj ndihmës fillim animacion në varësi të drejtimit "dir" ju keni kaluar si parameter.

Vini re që pas duke e quajtur removeFilter "" metodë (line 29 dhe 41) si Movieclip Fillim dhe Fund Movieclip janë të vendosur të dukshme (nga efekt). Thats pse keni vendosur dukshmërinë Movieclip - tranzicion filloi me - të rreme Line (30 dhe 42).

Rezultat përfundimtar

Shkarkimi

Kliko këtu për të shkarkuar fla të këtij tutorial. Shënim:. Fla nuk përfshin komponentin efekt. Në mënyrë që të bëjë punë fla, ju duhet të blini Efekti Tranzicionit Cube këtu.

Këtu ju mund të gjeni nje video tutorial se si të zbatojnë një efekt të ndryshme.

  • Share / Bookmark