Flash Tutorials Efekti Cool!

Përmbledhje

Në këtë tutorial do të mësoni se si të krijoni një efekt të tranzicionit kubike në 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. It works të njëjtë në Flash CS4.

komponent Hapi 1 - Instalo efekt

Blerje Efekti Tranzicionit Cube këtu . Ju lutemi ndiqni udhëzimet e instaloni dhe terhiq komponent nga paneli komponent në bibliotekën e juaj. fla file.

Hapi 2 - Krijimi i një shtresë të re

Për të mbajtur gjërat e pastra, ju duhet të krijoni një shtresë të re në afatin kohor kryesore dhe t'i jepte një emër. A këtë siç tregohet në screenshot më poshtë.

Hapi 3 - Krijo sfond

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

Zgjidhni kuadër të parë në "shtresa bg" dhe vizatoni një formë me të mjet drejtkendesh ne hapesiren. Zgjidhni drejtkëndësh dhe rregulluar parametrat ngjyra të ketë një gradient bukur (ju gjithashtu mund të përdorni ndonjë ngjyrë tjetër).

Hapi 4 - butonin Krijo

Efekti kubike duhet të reagojnë në mënyrë dinamike ndaj shtetit përdoruesit miut (rollover / rollout). Kjo është praktika më e mirë për të shtuar NUK dëgjues rast për efekt vetë dhe në vend të përdorin një "bosh" button.

Klikoni kuadër të parë në shtresa "btn" dhe vizatoni një drejtkëndësh me madhësinë e hapesiren e (ngjyrë nuk Mater që butonin nuk do të jetë i dukshëm). Zgjidhni drejtkëndësh dhe kthyer atë në një Button me [shtyp F8] ose të drejtë të klikoni në MovieClip -> "Convert simboli ...".

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

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

Kthehet në afatin kohor kryesore dhe vendosur emrin shembull i buton për të "btn".

Hapi 5 - filloni Krijo MovieClip

Efekti duhet të ketë dy MovieClip ku informatat merren nga vizuale. Ju tani do të krijojë MovieClip tranzicionit do të fillojë me.

Kliko në kuadrin i parë në shtresa "img1". Importi një imazh me madhësinë e hapesiren e duke shtypur [Ctrl-R shtypni] ose "File" -> "Import" -> "Importi në skenë ...".

Tani kthyer këtë imazh të një MovieClip dhe emri i tij "img1".

Vendos emrin shembull i krijuar vetëm MovieClip të "img1".

Hapi 6 - Krijo MovieClip Fund

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

Zgjidhni kuadrin e parë e shtresës "img2" (ok, emërtimin e keqe, të ndjehen të lirë për të korrigjuar atë ) Dhe vizatoni një drejtkëndësh me madhësinë e kanavacë. Ju dëshironi që të sigurohet se MovieClip Fundi i ka të njëjtat dimensione si MovieClip Start. Thats pse keni nxjerrë një formë të padukshme me të njëjtën madhësi si MovieClip Start.

Zgjidhni formën dhe vendosur vlera alfa në 0 (formë është ende atje, por të padukshme).

Convert formë të një [F8] MovieClip shtyp ose drejtë të klikoni në MovieClip -> "Convert simboli ..." dhe emrin ajo "img2".

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

Shef përsëri në afatin kohor kryesore dhe vendosur emrin shembull i MovieClip për "img2".

Hapi 7 - Shto rollover ActionScript

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

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

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

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

Eksporti dosjen tuaj fla. Siç e shihni, komponenti efekt punon përkryer me ngjyrë të tejdukshme të "img2".

Hapi 8 - Më shumë komplekse ActionScript

OK, me kodin e mëparshëm rollover punon vetëm gjobë. Por, çfarë nëse doni të kenë një funksion rollout që shfuqizon kalimi nga "img2" për "img1"? Për të arritur që keni nevojë për një kod më të ndërlikuar. Fshije shkrimit dhe futur në vijim:

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

 drejtimin var = false;
 goin var = false;
 goOut var = false;

 _onOver funksion (e: MouseEvent) (
  në qoftë se (! running) (
  _createAnimation ("në");
  drejtimin e = e vërtetë;
  () Tjetër
  goin = false;
  goOut = e vërtetë;
  )
 )

 _onOut funksion (e: MouseEvent) (
  në qoftë se (! running) (
  _createAnimation ("nga");
  drejtimin e = e vërtetë;
  () Tjetër
  goin = e vërtetë;
  goOut = false;
  )
 )

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

  nëse (goin) (
  _createAnimation ("nga");
  () Tjetër
  drejtimin = false;
  goOut = false;
  )
 )

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

  nëse (goOut) (
  _createAnimation ("në");
  () Tjetër
  drejtimin = false;
  goin = false;
  )
 )

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

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

Është e rëndësishme 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 zbatuar tranzicionit revers.

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

Funksioni "_createAnimation" (line 52) është funksion juaj ndihmëtar fillimin animacion në varësi të drejtimit "dir" ju keni kaluar, si parametër.

Vini re që pas duke e quajtur removeFilter "" metodë (linja 29 dhe 41) të dy MovieClip Fillimi dhe Fundi MovieClip janë të vendosur të dukshme (nga efekt). Thats pse keni vendosur të shikimit MovieClip - tranzicion filloi me - të rreme line (30 dhe 42).

Shkarko

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

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