Cool Flash Effect Tutorials!

Zhrnutie

V tomto tutoriálu sa naučíte, ako vytvoriť kocke efekt prechodu na myši prevrátení.

Tu konečný výsledok:

Požiadavky na

Flash CS3 alebo Flash CS4.

Poznámka: screenshot v tomto tutoriálu sa vykonáva v programe Flash CS3. Funguje to úplne totožný vo Flash CS4.

Krok 1 - Inštalácia účinok zložky

Zakúpenie Transition Effect Cube tu. Riaďte sa pokynmi pre inštaláciu a pretiahnite z priečinka Ovládací panel do vašej knižnice. Fla súbor.

Krok 2 - Vytvorenie novej vrstvy

Ak chcete zachovať poriadok vecí, mali by ste vytvoriť novú vrstvu na hlavnej časovej osi a dajte mu meno. Urob to, ako je uvedené na obrázku nižšie.

Krok 3 - Vytvorenie pozadia

Teraz môžete vytvoriť pozadia s gradientu. I keď to nie je potrebné, aby sa efekt práce ukazuje, že efekt funguje aj s transparentným obsahu (viac o tom neskôr).

Vyberte prvú snímku v "bg" vrstvu a nakreslite tvar obdĺžnika nástroj na plátne. Vyberte obdĺžnika a upraviť nastavenie farieb majú pekné gradient (môžete použiť aj iné farby).

Krok 4 - tlačidlo Vytvoriť

Kocka efekt by mal reagovať na dynamicky užívateľa myš stav (prevrátení / zavádzanie). To je najlepšie postupy, ktoré nie sú pre pridanie udalosti poslucháčov o tom sám a namiesto toho využiť "prázdne" tlačidlo.

Kliknite na prvý rámik vo vrstve "btn" a nakreslite obdĺžnik s veľkosťou plátna (farba nie je mater, pretože tlačidlo nebude viditeľné). Vyberte obdĺžnika a premeniť ho na tlačidlo s [stlačte kláves F8] alebo kliknite pravým tlačidlom myši na MovieClip -> "Konvertovať na symbol ...".

Nastaviť názov tlačidla "btn" a uistite sa, že druh je "Button".

Double-kliknite na tlačidlo. Teraz pretiahnite prvý kľúčový snímka "Up" na poslednú snímku "Hit". Tým zabezpečíte, že tlačidlo bude interaktívne, ale nie sú vidieť.

Vráťte sa na hlavnú časovú os a nastaviť napríklad názov tlačidla "btn".

Krok 5 - Vytvorenie štart MovieClip

Účinok musí mať dve MovieClip, kde sú vizuálne informácie prevzaté z. Teraz budete vytvoriť MovieClip prechod bude začínať.

Kliknite na prvú snímku na vrstvu "img1". Import obrázku s veľkosťou plátna stlačením [stlačte Ctrl-R], alebo "Súbor" -> "Import" -> "Import na javisku ...".

Teraz previesť tento obraz na MovieClip a pomenuje ho "img1".

Nastaviť napríklad názov práve vytvorený MovieClip na "img1".

Krok 6 - Vytvorenie Koniec MovieClip

Koniec MovieClip bude obsahovať text miesto obrazu. Dosiahnutie tohto cieľa, ktoré budete potrebovať trochu iný prístup.

Vyberte prvý snímka vrstvy "img2" (ok, zlé pomenovanie, nebojte sa, že správna ) A nakreslite obdĺžnik s veľkosťou plátna. Chcete, aby sa ubezpečil, že koniec MovieClip má rovnaké rozmery ako Štart MovieClip. To je dôvod, prečo by ste najprv nakresliť tvar s neviditeľným rovnakej veľkosti ako Štart MovieClip.

Vyberte tvar a nastavte alfa hodnotu 0 (tvar je stále existuje, ale neviditeľný).

Konvertovať na tvar MovieClip [stlačte kláves F8] alebo kliknite pravým tlačidlom myši na MovieClip -> "Konvertovať na symbol ..." a pomenuje ho "img2".

Double-kliknite na práve vytvorený MovieClip, vytvorte novú prázdnu vrstvu a dať nejaký text k tejto novo vytvorenej vrstvy.

Vráťte sa na hlavnej časovej osi a nastaviť napríklad názov MovieClip na "img2".

Krok 7 - Pridať preklopenie ActionScript

Vybrať vrstvu "skript" a otvorte "Akcia" okno s "Windows" -> "Akcia" alebo [stlačte F9].

Ak si proste chcete mať prechod na prevrátení (a nie späť-prechod na zavádzanie), skopírujte nasledujúce riadky do kódu okna.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 Funkcia _onOver (e: Event) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

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

V prvom riadku pridáte udalosť prevrátení poslucháčov na tlačidlo. Vo funkcii "_onOver" (riadok 3) najprv vytvoriť inštanciu CubeTransitionEffectAS3 pred myšou interaktivita komponenty (položka 4 a 5). Pamätajte si, že tlačidlo, ktoré ste vytvorili predtým, je starať sa o myši účinkov a nechcete zasahovať vplyv na to.

V riadku 9 nakoniec byste ju inicializovať efekt (dokumentácia parametra tu). Dôležitou súčasťou sú prvé dva parametre. Určíte, že prechod začína s "img1" a končí "img2".

Export vášho fla súbor. Ako vidíte, v dôsledku konštrukčné práce dokonale s priehľadným pozadím "img2".

Krok 8 - Zložitejšie ActionScript

OK, s predchádzajúcim kódom prevrátení works just fine. Ale čo keď chcete tiež mať zavedenie funkcie, ktorá obráti prechod z "img2" na "img1"? Na dosiahnutie tohto potrebujete zložitejšie kód. Odstrániť skript a vložte nasledovné:

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

 var beží = false;
 var Goin = false;
 var goOut = false;

 Funkcia _onOver (e: Event) (
  if (! beh) (
  _createAnimation ( "in");
  bežiaci = true;
  else ()
  Goin = false;
  goOut = true;
  )
 )

 Funkcia _onOut (e: Event) (
  if (! beh) (
  _createAnimation ( "out");
  bežiaci = true;
  else ()
  Goin = true;
  goOut = false;
  )
 )

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

  if (Goin) (
  _createAnimation ( "out");
  else ()
  bežiaci = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "in");
  else ()
  bežiaci = false;
  Goin = false;
  )
 )

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

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

Je dôležité vedieť, že nemôžete zmeniť smer prechodu pri účinok je spustený. Namiesto toho si môže "spomenúť" akcie užívateľa, počkajte, kým sa efekt robí a platí revers prechodu.

Premennej "deje" a "goOut" (riadok 5 a 6) sa používajú na tento účel. Nastavíte-li je funkcia "_onOver" a "_onOut" (linky 8 a 18) sú vykonávané. Ale iba v prípade, var beží, je to pravda, jestli je to false (linky 9 a 19), môžete začať rovno prechod (riadok 10 a 20).

Funkcia "_createAnimation" (riadok 52) je vaša pomocné funkcie na začiatku animácie v závislosti na smere "dir" si prešiel ako parameter.

Všimnite si, že volanie po "removeFilter" metóda (linky 29 a 41), obe MovieClip Začiatok a koniec MovieClip sú nastavené na viditeľné (z efekt). To je dôvod, prečo si nastaviť viditeľnosť MovieClip - prechod začala - na false (linky 30 a 42).

Stiahnuť

Kliknite tu pre stiahnutie fla tohto návodu. Poznámka:. Fla nie zahŕňa vplyv zložku. , Aby FLA prácu, musíte zakúpiť prechodu Cube Effect tu.

Tu nájdete video tutorial, ako zaviesť odlišný vplyv.