Transizzjoni Cube dwar estensjoni tal-ġurdien

Sommarju

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

Hawnhekk l-riżultat finali:

Rekwiżiti

Flash CS3 jew Flash CS4.

Nota: Il-screenshot f'din tutorja hi magħmula fil Flash CS3. Huwa jaħdem eżatt l-istess fil Flash CS4.

Pass 1 - Installa l-komponent effett

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

Stadju 2 - Toħloq saff ġdid

Biex iżommu affarijiet puliti għandek toħloq saff ġdid dwar il-preżentazzjoni kronoliġika prinċipali u tagħtih l-isem. Agħmel dan kif muri fuq il-screenshot hawn taħt.

Stadju 3 - Create isfond

Issa inti toħloq sfond ma 'pendil. Għalkemm dan mhux meħtieġ biex tagħmel ix-xogħol effett li juri li l-effett taħdem ukoll b'kontenut trasparenti (aktar fuq dan aktar tard).

Agħżel l-ewwel fil-qafas bg "saff u jiġbed forma ma 'l-għodda rettangolu fuq il-kanvas. Agħżel l-rettangolu u aġġusta l-settings tal-kulur li jkollu xaqliba sympathique (tista 'wkoll juża kull kulur ieħor).

Pass 4 - Toħloq buttuna

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

Ikklikkja l-qafas l-ewwel fis-saff "btn" u jiġbed rettangolu mad-daqs tal-kanvas (kulur ma mater peress li l-buttuna mhux se jkun viżibbli). Agħżel l-rettangolu u jaqilbu għal Button ma F8 agħfas [] dritt jew ikklikkja fuq il-MovieClip -> "Ikkonverti l Simbolu ...".

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

Double-ikklikkja l-buttuna. Issa drag keyframe l-ewwel "Up" mal-frame-aħħar "Hit". Dan jagħmel żgur, li l-buttuna tkun interattiva iżda mhux viżibbli.

Get lura lejn il-preżentazzjoni kronoliġika prinċipali u stabbiliti l-isem istanza tal-buttuna li "btn".

Pass 5 - Toħloq bidu Movieclip

L-effett il-ħtiġijiet għandhom żewġ Movieclip fejn il informations viżwali huma meħuda mil. Int ser ikollok issa toħloq il-Movieclip it-transiżjoni se jibdew.

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

Issa jikkonvertu dan il immaġini għal Movieclip u l-isem li bih "img1".

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

Pass 6 - Toħloq Tmiem Movieclip

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 l-qafas ta 'l-ewwel saff "img2" (ok, ismijiet ħażin, tħossok liberu li jikkoreġu din ) U jiġbed rettangolu mad-daqs tal-kanvas. Inti tixtieq tagħmel ċert li l-Movieclip Tmiem għandu l-istess dimensjonijiet bħal tal-Movieclip Bidu. Thats għaliex inti ewwel jhejju forma inviżibbli bl-istess qies bħall-Movieclip Bidu.

Agħżel il-forma u jiffissa l-valur alpha għal 0 (l-għamla għadu hemm iżda inviżibbli).

Ikkonverti l-forma lil F8 Movieclip agħfas [] dritt jew ikklikkja fuq il-MovieClip -> "Ikkonverti l Simbolu ..." u l-isem li bih "img2".

Double-click l-Movieclip biss ħolqu, joħolqu saff vojta ġdid u mpoġġija xi test fuq dan il-saff maħluqin ġodda.

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

Stadju 7 - Żid rollover ActionScript

Agħżel il-saff "iskrittura" miftuħa u l-Azzjonijiet "tieqa mal-" Windows "->" Azzjonijiet "jew F9 agħfas [].

Jekk inti tixtieq sempliċement li jkollhom tranżizzjoni fuq kontra l-qlib (u l-ebda back-tranżizzjoni 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);

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

Fl-ewwel linja inti żid-semmiegħ każ kontra l-qlib li l-buttuna. Fil-funzjoni "_onOver" (linja 3) inti toħloq l-ewwel istanza ta 'l-CubeTransitionEffectAS3 qabel ma jiskonnettja l-interattività ġurdien tal-komponent (linja 4 u 5). Ftakar, il-buttuna inti maħluqa preċedenti hi tieħu ħsieb ta 'l-effetti tal-ġrieden u ma tridu tibdew l-effett li jinterferixxi fuq dan.

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

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

Pass 8 - Aktar kumpless ActionScript

OK, bil-kodiċi ta 'qabel l-estensjoni tax-xogħlijiet biss multa. Imma x'jiġri jekk inti tixtieq ukoll li jkollhom funzjoni tnedija li jreġġa 'lura t-transizzjoni minn "img2" sa "img1"? Biex jintlaħaq dak jkollok bżonn ta 'kodiċi aktar kumplessa. Ħassar l-iskript u daħħal dan li ġej:

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

 var running = foloz;
 goin var = foloz;
 goOut var = foloz;

 _onOver funzjoni (e: MouseEvent) (
  jekk (! running) (
  _createAnimation ( "in");
  running = vera;
  else ()
  goin = foloz;
  goOut = vera;
  )
 )

 _onOut funzjoni (e: MouseEvent) (
  jekk (! running) (
  _createAnimation ( "out");
  running = vera;
  else ()
  goin = vera;
  goOut = foloz;
  )
 )

 _inAnimationDone funzjoni (e: Avveniment) (
  e.target.removeFilter ();
  img1.visible = foloz;

  jekk (goin) (
  _createAnimation ( "out");
  else ()
  running = foloz;
  goOut = foloz;
  )
 )

 _outAnimationDone funzjoni (e: Avveniment) (
  e.target.removeFilter ();
  img2.visible = foloz;

  jekk (goOut) (
  _createAnimation ( "in");
  else ()
  running = foloz;
  goin = foloz;
  )
 )

 _createAnimation funzjoni (dir: String) (
  myFilter var: CubeTransitionEffectAS3 = CubeTransitionEffectAS3 ġodda ();
  myFilter.mouseEnabled = foloz;
  myFilter.mouseChildren = foloz;
  addChild (myFilter);

  jekk (dir == "in") (
  myFilter.init (img1, img2, 24, "l-> r", 2, "easeInOutCubic", falza);
  (myFilter.addEventListener CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) inkella jekk (dir == "out") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", falza);
  (myFilter.addEventListener CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Huwa importanti li tkun taf, li inti tista MHUX lura d-direzzjoni ta 'tranżizzjoni li matulu 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. You iffisat lilhom meta l-funzjonijiet "_onOver" u "_onOut" (linja 8 u 18) huma eżegwiti. Imma biss jekk it-tmexxija var huwa veru, jekk huwa falz (linja 9 u 19), tibda l-tranżizzjoni dritt bogħod (linja 10 u 20).

Il-funzjoni "_createAnimation" (linja 52) hija funzjoni tal-helper tieghek il-bidu skond l-animazzjoni ta 'l-direzzjoni "dir" inti tgħaddi bħala parametru.

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

Iddawnlowdja

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

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

Kessaħ Effett Tutorials Flash!

Write Comment April 8, 2009