Efect Cool Tutoriale Flash!

Rezumatul

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

Aici rezultatul final:

Necesitati

Flash CS3 sau Flash CS4.

Notă: Captura de ecran din acest tutorial se face in Flash CS3. Acesta funcţionează exact la fel în Flash CS4.

Pasul 1 - Instalaţi efectul componentei

Cumparare Efect de tranziţie Cube aici. Vă rugăm să urmaţi instrucţiunile de instalare şi trageţi componenta de la panoul de componenta in biblioteca de fişier dvs. fla..

Pasul 2 - Creaţi un nou strat

Pentru a menţine lucrurile ordonat ar trebui să creaţi un nou strat de pe cronologie principale şi dea un nume. Faceţi acest lucru aşa cum se arată pe ecran de mai jos.

Pasul 3 - Crearea de fond

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

Selectaţi primul cadru, în BG "" strat şi întocmeşte o formă cu instrumentul dreptunghiul de pe panza. Selectaţi dreptunghiul şi ajustaţi setările de culoare pentru a avea o pantă de la Nisa (puteţi utiliza, de asemenea, alte culori).

Pasul 4 - butonul Creare

Efectul de cub ar trebui să reacţioneze dinamic la starea utilizatorilor mouse-ului (rollover / dezvoltarea internetului). Este mai bine să nu practică pentru a adăuga ascultator eveniment la efectul de sine şi în loc să utilizeze un "martor" nasture.

Faceţi clic pe primul cadru în stratul "btn" şi desenaţi un dreptunghi cu dimensiunea de panza (culoarea nu Mater, deoarece butonul nu vor fi vizibile). Selectaţi dreptunghiul şi ao transforma într-un buton cu apăsaţi F8 [] sau click dreapta pe MovieClip -> "Convert to Symbol ...".

Setaţi numele pe buton pentru a "btn" şi asiguraţi-vă că tipul este "buton".

Faceţi dublu-clic pe buton. Acum, glisaţi keyframe primul "Up" pentru a ultimului 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ţă a butonului de "btn".

Pasul 5 - Creaţi începe MovieClip

Efectul are nevoie de au 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 pe stratul "img1". Import o imagine cu dimensiunea de panza prin apăsarea [apăsaţi CTRL-R] sau "File" -> "Import" -> "de import pe scena ...".

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

Setaţi numele de instanţă a chiar a crea MovieClip la "img1".

Pasul 6 - Creeaza-End MovieClip

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

Selectaţi primul cadru al stratului de "img2" (OK, naming rău, nu ezitaţi să se corecteze ), Precum şi a desena un dreptunghi cu dimensiunea de panza. Pe care doriţi să vă asiguraţi că MovieClip End are aceleaşi dimensiuni ca MovieClip Start. Thats de ce tu primul desena o formă invizibilă cu aceeaşi dimensiune ca MovieClip Start.

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

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

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

Şeful înapoi la cronologie principale şi a stabilit numele instanţă a MovieClip la "img2".

Pasul 7 - Adauga rollover ActionScript

Selectaţi stratul de "Script" şi deschideţi Acţiuni "" fereastra cu "Windows" -> "Acţiuni" sau [apăsaţi F9].

Dacă doriţi pur şi simplu pentru a avea o tranziţie pe rollover (şi nu de back-tranziţia de la intrarea în fază) copie urmatoarele linii în fereastra de cod.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

În prima linie când adăugaţi ascultatorul rollover eveniment pentru a butonul. În funcţia de "_onOver" (linia 3), mai întâi crea o instanţă a CubeTransitionEffectAS3 înainte de a fi de acord interactivitatea mouse-ul a componentei (linia 4 şi 5). Amintiţi-vă, butonul aţi creat este mai devreme, având grijă de a efectelor mouse-ului şi nu doriţi efectul de a interveni pe asta.

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

Fişierul dvs. de export fla. După cum vedeţi, componenta efectul funcţionează perfect cu transparent background de "img2".

Pasul 8 - mai complex, ActionScript

OK, cu codul anterior rollover works chiar fin. Dar dacă ai nevoie, de asemenea, să aibă o funcţie rollout care răstoarnă tranziţia de la "img2" la "img1"? Pentru a atinge acest 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);

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

 _onOver funcţie (e: MouseEvent) (
  if (! de rulare) (
  _createAnimation ( "in");
  running = true;
  ) else (
  Goin = false;
  goOut = true;
  )
 )

 _onOut funcţie (e: MouseEvent) (
  if (! de rulare) (
  _createAnimation ( "out");
  running = true;
  ) else (
  Goin = true;
  goOut = false;
  )
 )

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

  în cazul în care (goin) (
  _createAnimation ( "out");
  ) else (
  running = false;
  goOut = false;
  )
 )

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

  în cazul în care (goOut) (
  _createAnimation ( "in");
  ) else (
  running = false;
  Goin = false;
  )
 )

 _createAnimation funcţie (dir: String) (
  myFilter var: CubeTransitionEffectAS3 = CubeTransitionEffectAS3 nou ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

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

Este important de ştiut, pe care le poate inversa NU direcţia de tranziţie în timpul efectul este în execuţie. În schimb puteţi "Remember" de acţiune al utilizatorului, aşteptaţi până când efectul este făcut şi se aplică Revers de tranziţie.

Variabilele "se întâmplă" şi "goOut" (linia 5 şi 6) sunt utilizate în acest scop. Ai stabilire a acestora, atunci când funcţiile "_onOver" şi "_onOut" (linia 8 şi 18) sunt executate. Dar numai în cazul în care rulează var este adevarat, daca este falsă (linia de 9 şi 19), de a începe să tranziţie imediat (linia 10 şi 20).

Funcţia de "_createAnimation" (linia 52) este funcţia dumneavoastră ajutor începe de animaţie, în funcţie de direcţia "dir", ai trecut ca parametru.

Observaţi că, după apel removeFilter "metodei" (linia 29 şi 41), atât Start MovieClip şi MovieClip End sunt setate la vizibile (din efect). Thats de ce ai seta vizibilitatea MovieClip - de tranziţie a inceput cu - pentru a false (linia 30 şi 42).

Descărca

Click aici pentru a descărca FLA din acest tutorial. Notă: fla. Nu include componenta de efect. În scopul de a face munca FLA, aveţi nevoie la spre purchase Efect de tranziţie Cube aici.

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