Cool Flash Vaikutus Tutorials!

Yhteenveto

Tässä opetusohjelmassa opit miten luoda kuutio siirtymisen vaikutus hiiren rollover.

Tässä lopputulos:

Vaatimukset

Flash CS3 tai Flash CS4.

Huom: screenshot tässä opetusohjelmassa on tehty Flash CS3. Se toimii täsmälleen sama Flash CS4.

Vaihe 1 - Asenna vaikutus komponentin

Ostaa Cube siirtymisen vaikutus täällä . Seuraa asennusohje ja vedä komponentin osa elementti kirjaston sinun. FLA tiedosto.

Vaihe 2 - Luo uusi kerros

Pitää asiat siisti voit luoda uuden kerroksen tärkeimmät aikajanalla ja antaa sille nimi. Tee tämä näkyy kuvakaappaus alla.

Vaihe 3 - Luo tausta

Nyt voit luoda tausta kaltevuus. Vaikka tämä ei ole tarpeen tehosteen työtä se osoittaa, että vaikutus toimii myös avoimia sisällöstä (lisää siitä myöhemmin).

Valitse ensimmäinen runko "BG" kerros ja piirtää muodon suorakulmio työkalu kankaalle. Valitse suorakulmio ja säätää väriasetuksia on mukava kaltevuus (voit käyttää myös mitä tahansa muuta väriä).

Vaihe 4 - Luo-painikkeen

Kuutio vaikutus pitäisi reagoida dynaamisesti käyttäjien hiiren tila (rollover / käyttöönotossa). Se ei kannata lisätä tapahtuman kuulijan vaikutus itse ja sen sijaan käyttää "tyhjä"-painiketta.

Valitse ensimmäinen runko kerros "BTN" ja piirtää suorakulmion koko kangas (väri ei mater jälkeen painike ei ole näkyvissä). Valitse suorakulmio ja muuntaa sen Button kanssa [paina F8] tai oikealle klikkaa MovieClip -> "Convert to Symbol ...".

Aseta nimi painiketta "BTN" ja varmista, että tyyppi on "Button".

Kaksoisnapsauta painiketta. Nyt vedä ensimmäinen keyframe "Up" on viimeinen kehys "Hit". Tämä varmistaa, että painike on interaktiivinen, mutta ei näy.

Palata tärkeimmät aikajanalla ja asettaa esimerkiksi nimi painiketta "BTN".

Vaihe 5 - Luo aloittaa movieclip

Vaikutus on kaksi movieclip jossa visuaalinen informations otetaan. Voit nyt luoda movieclip siirtyminen käynnistyy.

Klikkaa ensimmäistä kuvaa on kerros "img1". Tuo kuva koko kankaalle painamalla [Ctrl-R] tai "File" -> "Tuo" -> "Tuo vaihe ...".

Nyt muuntaa tämän kuvan movieclip ja anna sille nimeksi "img1".

Aseta esimerkiksi nimi luomasi movieclip jotta "img1".

Vaihe 6 - Luo End movieclip

Loppu movieclip sisältää tekstin sijasta kuva. Tämän saavuttamiseksi tarvitaan hieman erilaista lähestymistapaa.

Valitse ensimmäinen kuva kerros "img2" (ok, huono nimeäminen, voit korjata että ) Ja piirtää suorakulmion koko kankaalle. Haluat varmistaa, että End movieclip on saman kokoinen kuin Start movieclip. Että miksi ensin tehdä näkymätön muotoinen samankokoinen kuin Start movieclip.

Valitse muoto ja asettaa alpha arvo on 0 (muoto on edelleen olemassa, mutta näkymätön).

Muuntaa muodon movieclip [paina F8] tai oikealle klikkaa MovieClip -> "Convert to Symbol ..." ja anna sille nimeksi "img2".

Kaksoisnapsauta juuri luomaasi movieclip, luo uusi tyhjä taso ja laittaa tekstiä että uusille kerros.

Mene takaisin päävalikkoon aikajanalle ja asettaa esimerkiksi nimi movieclip on "img2".

Vaihe 7 - Lisää rollover ActionScript

Valitse kerros "script" ja avaa Actions ikkunan "Windows" -> "Toimet" tai [paina F9].

Jos haluat vain olla ylimenokauden kaatuessa (eikä takaisin-siirtymätalouden mukaa) kopioi seuraavat rivit koodi-ikkunassa.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

Ensimmäiselle riville lisäät rollover-tapahtuman kuulijan painiketta. Kun toiminto "_onOver" (rivi 3) luo ensin esimerkki CubeTransitionEffectAS3 ennen poistat hiiri interaktiivisuuden osan (rivi 4 ja 5). Muista, painikkeen aiemmin luomasi on huolehtii hiiren vaikutuksista ja et halua vaikutus puuttua tähän.

Yhdenmukaisesti 9 Lopuksi voit alustaa vaikutus ( asiakirjat parametrin täällä ). Tärkeä osa ovat kaksi ensimmäistä parametria. Voit määritellä, että siirtyminen alkaa "img1" ja päättyy "img2".

Vie FLA tiedosto. Kuten huomaatte, vaikutus komponentti toimii täydellisesti läpinäkyvä tausta "img2".

Vaihe 8 - Monimutkaiset ActionScript

OK, joiden edellinen koodi saamien toimii hienosti. Mutta entä jos haluaa saada mukaa toiminnon kääntää siirtyminen "img2" ja "img1"? Saavuttamiseksi tarvitaan monimutkaisempi koodi. Poista kirjoitus ja lisätään seuraava:

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

 var käynnissä = false;
 var menossa = false;
 var goOut = false;

 toiminto _onOver (e: MouseEvent) (
  if (! käynnissä) (
  _createAnimation ("in");
  käynnissä = true;
  ) Else (
  menossa = false;
  goOut = true;
  )
 )

 toiminto _onOut (e: MouseEvent) (
  if (! käynnissä) (
  _createAnimation ("out");
  käynnissä = true;
  ) Else (
  menossa = true;
  goOut = false;
  )
 )

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

  jos (menossa) (
  _createAnimation ("out");
  ) Else (
  käynnissä = false;
  goOut = false;
  )
 )

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

  jos (goOut) (
  _createAnimation ("in");
  ) Else (
  käynnissä = false;
  menossa = false;
  )
 )

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

  if (dir == "in") (
  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);
  )
 )

On tärkeää tietää, että et voi kääntää suunnan siirtymisen aikana vaikutus on käynnissä. Sen sijaan voit "muistaa" toiminta käyttäjä, odota kunnes vaikutus on tehty ja soveltaa käänne siirtymistä.

Muuttujat "menossa" ja "goOut" (rivi 5 ja 6) käytetään tähän tarkoitukseen. Asetat ne kun toimintoja "_onOver" ja "_onOut" (rivi 8 ja 18) toteutetaan. Mutta vain jos var käynnissä on totta, jos se on väärä (linja 9 ja 19), voit aloittaa siirtyminen heti (rivi 10 ja 20).

Toiminto "_createAnimation" (rivi 52) on sinun apulainen toiminta alkaa animaatio riippuen suuntaan dir "sinä välitetään parametri.

Huomaa, että kun vaaditaan "removeFilter" menetelmä (rivi 29 ja 41) sekä Start movieclip ja End movieclip asetetaan näkyviin (pois vaikutuksesta). Että miksi asetat movieclip näkyvyys - siirtyminen alkoi - vääriä (rivi 30 ja 42).

Lataa

Klikkaa tästä ladataksesi aro tämän opetusohjelman. Huom:. Aro ei sisältää vaikutus komponentti. Jotta aro työtä, sinun täytyy ostaa Cube siirtymisen vaikutus täällä .

Täältä löydät opetusvideota, miten toteuttaa eri vaikutus .