Cool Flash Effect Oppaat!

Tiivistelmän

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

Tässä lopputulos:

Vaatimukset

Flash CS3 ja Flash CS4.

Huom: varjostin tässä opetusohjelmassa tehdään Flash CS3. Se toimii aivan Flash CS4.

Vaihe 1 - Asenna vaikutus komponentin

Ostavat Cube Siirtymistehoste täällä. Muista seurata asennusohje ja vedä komponentin osa paneelin osaksi kirjaston sinun. FLA-tiedoston.

Vaihe 2 - Luo uusi kerros

Pitää asiat siistinä sinun tulee luoda uusi kerros tärkeimmistä aikajanalla ja antaa sille nimen. Älä tämä näkyy varjostin alapuolella.

Vaihe 3 - Luo taustaa

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

Valitse ensimmäinen kehyksessä "BG" kerros ja piirtää muodon kanssa suorakulmion avulla kankaalle. Valitse suorakulmio ja muuttaa väriä asetukset on mukava gradientin (voit käyttää myös mitä tahansa muuta väriä).

Vaihe 4 - Luo-painiketta

Kuutio vaikutuksen pitäisi reagoida dynaamisesti käyttäjien hiiren valtion (rollover / käyttöönotossa). Se on parhaita käytäntöjä ei lisätä tapahtuman kuulijan vaikutuksen itse ja sen sijaan käyttää "tyhjä"-painiketta.

Napsauta ensimmäinen kehyksessä kerros "BTN" ja piirtää suorakulmion koko kangas (väri ei mater koska 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. Vetää ensimmäinen keyframe "Up" on viimeinen kehys "Hit". Tämä varmistaa, että painike on interaktiivinen, mutta ei näy.

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

Vaihe 5 - Uusi alku MovieClip

Vaikutus on kaksi MovieClip kun visuaalinen Tiedot ovat peräisin. Voit nyt luoda MovieClip siirtyminen käynnistyy.

Klikkaa ensimmäinen kehyksessä kerros "img1". Tuo kuvaa koko kangas painamalla [Paina Ctrl-R] tai "Tiedosto" -> "Tuo" -> "Tuo vaihe ...".

Nyt muuntaa tämän kuvan MovieClip ja nimeä se "img1".

Aseta esimerkiksi nimi juuri luotu MovieClip on "img1".

Vaihe 6 - End MovieClip

End MovieClip sisältää tekstin sijaan kuvan. Saavuttamiseksi tarvitset hieman erilaista lähestymistapaa.

Valitse ensimmäisen kuvan kerroksen "img2" (ok, huono nimeäminen, voit korjata että ) Ja piirrä suorakulmio koon kankaalle. Haluat varmistaa, että loppu MovieClip on samat mitat kuin Start MovieClip. Että miksi ensin tehdä näkymätön muodon kanssa saman kokoinen kuin Käynnistä MovieClip.

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

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

Kaksoisnapsauta juuri luotu MovieClip, luo uusi tyhjä taso ja esittää joitakin tekstin että uusille kerros.

Mene takaisin tärkeimmät aikajanalle ja asettaa esimerkiksi nimi MovieClip on "img2".

Vaihe 7 - Lisää rollover ActionScript

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

Jos haluat vain olla Siirtymä kaatuessa (ja no Back-Siirtymä käyttöönotossa) kopioi seuraavat rivit osaksi 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äisellä rivillä lisäät rollover-tapahtuman kuulijan painiketta. Kun toiminto "_onOver" (rivi 3) luot esimerkki CubeTransitionEffectAS3 ennen kuin poistat hiiren vuorovaikutteisuutta komponentin (rivi 4 ja 5). Muista, painike aiemmin luomasi on huolehtinut hiiren vaikutuksista ja et halua vaikuttaa puuttua tähän.

Vastaa 9 Lopuksi voit alustaa vaikutus (asiakirjat parametrin täältä). Tärkeä osa on kaksi ensimmäistä parametria. Voit määrittää, että siirtyminen alkaa "img1" ja päättyy sanoihin "img2".

Vie FLA-tiedoston. Kuten näette, vaikutus komponentti toimii täydellisesti läpinäkyvä tausta "img2".

Vaihe 8 - Monimutkaiset ActionScript

OK, edellisen koodin rollover toimii hienosti. Mutta entä jos haluat myös olla käyttöönotossa toiminto, joka kumoaa siirtyminen "img2" ja "img1"? Saavuttamiseksi tarvitaan monimutkaisempaa koodia. Poista käsikirjoituksen ja lisätään seuraavaa:

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

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

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

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

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

  jos (Goin) (
  _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;
  Goin = 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ää suuntaa siirtymäkauden aikana vaikutus on käynnissä. Sen sijaan voit "muistaa" toimia käyttäjän, odota, kunnes vaikutus tapahtuu 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) on suoritettu. Mutta vain, jos var käynnissä on totta, jos se on väärä (linja 9 ja 19), voit aloittaa siirtyminen heti (linja 10 ja 20).

Toiminto "_createAnimation" (rivi 52) on sinun apulainen toiminto aloittaa animaatio riippuen suunnasta "dir" olet välitetään parametrina.

Huomaa, että kun vaaditaan "removeFilter"-menetelmä (rivi 29 ja 41) sekä Käynnistä MovieClip ja loppu MovieClip on asetettu näkyviin (pois vaikutus). Että miksi olet asettanut MovieClip näkyvyys - siirtyminen alkoi - vääriä (linja 30 ja 42).

Ladata

Klikkaa tästä ladataksesi FLA tässä opetusohjelmassa. Huom:. FLA ei kuuluu vaikutusta komponentti. Jotta FLA työtä, sinun täytyy ostaa Cube Siirtymistehoste täällä.

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