Cool Efectul Flash Tutoriale!

Rezumat

În acest tutorial veţi învăţa cum să creeze un efect de tranziţie cub pe rollover mouse-ului.

Aici Rezultatul final:

Cerinţe

Flash CS3 sau Flash CS4.

Notă: screenshot din acest tutorial este făcută în Flash CS3. Acesta funcţionează exact la fel în Flash CS4.

Pasul 1 - Instalarea efectului componentei

Cumparare efect de tranziţie Cube aici . Vă rugăm să urmaţi instrucţiunile de instalare şi trageţi componentei de la panoul de componenta în biblioteca dumneavoastră. FLA fişier.

Pasul 2 - Creaţi un nou strat

Pentru a păstra lucrurile ordonat tu ar trebui să creeze un nou strat pe cronologie principale şi a da it un nume. Face acest lucru după cum se arată în imaginea de mai jos.

Pasul 3 - Crearea de fundal

Acum puteţi crea un fundal cu un gradient. Deşi acest lucru nu este necesar să se facă de lucru efectul pe care îl arată că efectul, de asemenea, funcţionează cu un conţinut transparent (mai mult pe aceasta mai târziu).

Selectaţi primul cadru în "BG" strat şi trage o forma cu unealta dreptunghi pe panza. Selectaţi dreptunghiul şi ajustaţi setările de culoare pentru a avea un gradient de la Nisa (puteţi utiliza, de asemenea, orice altă culoare).

Pasul 4 - Creaţi butonul

Efectul de cub ar trebui să reacţioneze dinamic la starea mouse-ului utilizatorilor (rollover / rollout). Este de cele mai bune practici să nu adăugaţi ascultător eveniment la efectul în sine şi de a folosi în schimb, un "gol" nasture.

Faceţi clic pe primul frame din stratul "btn" şi desenaţi un dreptunghi cu dimensiunea de panza (de culoare nu Mater, deoarece buton nu va fi vizibil). Selectaţi dreptunghiul şi convertizor it la spre un buton cu [apăsaţi F8] sau click dreapta pe MovieClip -> "Convert to Symbol ...".

Setaţi numele butonul "btn" şi asiguraţi-vă că este de tip "buton".

Dublu-clic pe buton. Acum, glisaţi primul keyframe "Up" la ultimul cadru "hit". Acest lucru face sigur, că butonul va fi interactiv dar nu sunt vizibile.

Du-te înapoi la cronologie principale şi a seta numele instanţă butonul "btn".

Pasul 5 - Creaţi începe MovieClip

Efectul trebuie să aibă două MovieClip în cazul în care informatiile vizuale sunt preluate din. Veţi crea acum MovieClip tranziţia va începe cu.

Click pe primul cadru de pe stratul "img1". Import o imagine cu dimensiunea de panza apăsând [apasati Ctrl-R] sau "File" -> "de import" -> "de import pe scena ...".

Acum, această imagine converti la un MovieClip şi nume it "img1".

Setaţi numele instanţă a creat doar pentru a MovieClip "img1".

Pasul 6 - Crearea MovieClip End

MovieClip End va conţine text în loc de o imagine. Realiza acest lucru veţi avea nevoie de o abordare uşor diferită.

Selectaţi primul cadru al stratului "img2" (ok, numirea rău, nu ezitaţi să se corecteze ) Şi a desena un dreptunghi cu dimensiunea de panza. Doriţi să vă asiguraţi că MovieClip Sfârşitul are aceleaşi dimensiuni ca MovieClip Start. Thats de ce prima tragere o formă invizibilă cu aceeaşi dimensiune ca MovieClip Start.

Selectaţi forma şi setaţi valoarea alfa la 0 (forma este încă acolo, dar invizibile).

Conversia la o forma] MovieClip [apăsaţi F8 sau click dreapta pe MovieClip -> "Convert to Symbol ..." şi nume it "img2".

Faceţi dublu clic pe MovieClip chiar a crea, a crea un nou layer gol şi a pus un text pe care stratul nou create.

Capul înapoi la cronologie principale şi a seta numele instanţă a MovieClip la "img2".

Pasul 7 - Adăugaţi rollover ActionScript

Selecteaza layer "script" şi deschideţi "Acţiuni" fereastra cu "Windows" -> "Acţiuni" sau [] apăsaţi F9.

Dacă doriţi pur şi simplu să aibă o tranziţie pe rollover (şi nu înapoi de tranziţie pe rollout) copie următoarele linii în fereastra de cod.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 _onOver funcţie (e: MouseEvent) (
  myFilter var: CubeTransitionEffectAS3 CubeTransitionEffectAS3 = new Date ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

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

În primul rând trebuie să adăugaţi ascultător eveniment rollover butonul. În funcţia de "_onOver" (linia 3) vă creaţi mai întâi o instanţă a CubeTransitionEffectAS3 înainte de a fi de acord interactivitatea mouse-ul componentei (linia 4 şi 5). Amintiţi-vă, butonul aţi creat mai devreme se ocupa de efectele mouse-ului şi nu doriţi efectul de a interveni în acest sens.

În cele din urmă linia de 9 vă iniţializa efect ( documentaţia parametru aici ). Parte importantă sunt primele doua parametru. Vă definiţi că tranziţia începe cu "img1" şi se termină cu "img2".

Export fişierul FLA. După cum vedeţi, componenta efectul functioneaza perfect cu fundal transparent de "img2".

Pasul 8 - mai complexe ActionScript

OK, cu codul precedent rollover works chiar fin. Dar dacă ai dori, de asemenea să aibă o funcţie rollout care inversează tranziţia de la "img2" la "img1"? Pentru a realiza că aveţi nevoie de un cod mai complex. Ştergeţi script-ul şi introduceţi următoarele:

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

 rulează var = false;
 Goin var = false;
 goOut var = false;

 _onOver funcţie (e: MouseEvent) (
  dacă (de funcţionare)! (
  _createAnimation ("în");
  rulează = true;
  ) Else (
  merge = false;
  goOut = true;
  )
 )

 _onOut funcţie (e: MouseEvent) (
  dacă (de funcţionare)! (
  _createAnimation ("out");
  rulează = true;
  ) Else (
  merge = true;
  goOut = false;
  )
 )

 _inAnimationDone funcţie (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  în cazul în care (merge) (
  _createAnimation ("out");
  ) Else (
  rulează = false;
  goOut = false;
  )
 )

 _outAnimationDone funcţie (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  în cazul în care (goOut) (
  _createAnimation ("în");
  ) Else (
  rulează = false;
  merge = false;
  )
 )

 _createAnimation funcţie (dir: string) (
  myFilter var: CubeTransitionEffectAS3 CubeTransitionEffectAS3 = new Date ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  în cazul în care (dir == "în") (
  r myFilter.init (img1, img2, 24, "L->", 2 ", easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) Else if (dir == "out") (
  L myFilter.init (img2, img1, 24, "R->", 2 ", easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Este important să ştiţi, că puteţi inversa nu direcţia de tranziţie pe parcursul efectul este de rulare. În schimb puteţi "amintesc" de acţiune al utilizatorului, aşteptaţi până când efectul este de făcut şi se aplică de tranziţie Revers.

Variabilele "merge" şi "goOut" (linia 5 şi 6) sunt utilizate în acest scop. Le-aţi stabilit atunci când funcţiile "_onOver" şi "_onOut" (linia 8 şi 18) sunt executate. Dar numai în cazul în care var de rulare este adevărat, dacă este falsă (linia de 9 şi 19), va începe imediat de tranziţie (linia 10 şi 20).

Funcţia "_createAnimation" (linia 52) este funcţia ajutor începe animatie in functie de directia "dir", ai trecut ca parametru.

Observaţi că după asteptare removeFilter "metoda" (linia 29 şi 41) atât MovieClip Start şi End MovieClip sunt setate pentru a vizibile (din efect). Thats de ce aţi stabilit vizibilitatea MovieClip - de tranziţie a inceput cu - pentru fals (linia 30 şi 42).

Descărcaţi

Click aici pentru a descarca FLA din acest tutorial. Notă:. FLA nu include componenta de efect. În scopul de a face ca munca FLA, va trebui sa achizitionati efect de tranziţie Cube aici .

Aici puteţi găsi un tutorial video despre cum să pună în aplicare un efect diferit .