Cool Effect Návody Flash!

Prehľad

V tomto tutoriále sa naučíte, ako vytvoriť kocku prechod vplyv na myši prevrátení.

Tu konečný výsledok:

Požiadavky

Flash CS3 alebo Flash CS4.

Poznámka: screenshot v tomto tutoriále je v CS3 Flash. Funguje to presne rovnaké vo Flash CS4.

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

Nákup Prechod Cube Effect tu . Riaďte sa pokynmi pre inštaláciu a pretiahnuť zložku z jednotlivých zložiek panel do knižnice svojho. fla súbor.

Krok 2 - Vytvoriť novú vrstvu

Ak chcete zachovať poriadok vecí, mali by ste vytvoriť novú vrstvu na hlavnú časovej osi a dať mu meno. Urobte to, ako je znázornené na obrázku nižšie.

Krok 3 - Vytvorenie pozadia

Teraz môžete vytvoriť pozadie s prechodom. I keď to nie je nutné, aby sa vplyv práce sa ukazuje, že efekt funguje aj s priehľadným obsahom (o tom viac neskôr).

Vyberte prvú snímku v "BG" vrstvy a nakresliť tvar obdĺžnika s nástrojom na plátne. Vyberte obdĺžnik a upravte nastavenia farieb, že majú pekné gradient (môžete použiť aj iné farby).

Krok 4 - tlačidlo Vytvoriť

Kocka efekt by mal reagovať dynamicky, aby užívatelia myš štátu (prevrátení / rollout). To je najlepší postup, ktorý nie je pre pridanie udalosti poslucháčov o tom sám a namiesto toho používať "prázdny" 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 nebudú viditeľné). Vyberte obdĺžnik a premeniť ho na tlačidlo s [stlačte kláves F8] alebo kliknite pravým tlačidlom myši na MovieClip -> "Konvertovať do Symbol ...".

Nastaviť názov tlačidla "BTN" a uistite sa, že druh je "Tlačidlo".

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

Vráťte sa na hlavnú časovú os a nastaviť inštancie názov tlačidla "BTN".

Krok 5 - Vytvoriť štart MovieClip

Účinok musí mať dva MovieClip, kde sú vizuálne informácie prevzaté z. Budete teraz vytvoriť MovieClip prechod začne sa.

Kliknite na prvú snímku vo vrstve "img1". Import image s veľkosťou plátna stlačením [stlačením Ctrl-R] alebo "Súbor" -> "Import" -> "Import na etapy ...".

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

Nastavenie inštancie názov práve vytvorený MovieClip do "img1".

Krok 6 - Vytvorenie Koniec MovieClip

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

Vyberte prvú snímku vrstvy "img2" (ok, zlé pomenovanie, neváhajte a správne, že ) 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ť neviditeľné tvar rovnakej veľkosti ako Štart MovieClip.

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

Premeniť tvar MovieClip F8 stlačte [] alebo kliknite pravým tlačidlom myši na MovieClip -> "Konvertovať do Symbol ..." a pomenujte ho "img2".

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

Vedúci späť na hlavnú časovej osi a nastaviť inštancie názov MovieClip na "img2".

Krok 7 - Pridať preklopeniu ActionScript

Vyberte vrstvu "skript" a otvorte "Akcia" okno s "Windows" -> "Akcia" alebo [Tlačová F9].

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 Funkcia _onOver (e: MouseEvent) (
  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áča tlačidlo. Vo funkcii "_onOver" (riadok 3) najprv vytvoriť inštanciu CubeTransitionEffectAS3 Pred vypnutím myš interaktivitu zložky (riadok 4 a 5). Pamätajte si, že tlačidlo, ktoré ste vytvorili skôr, je starostlivosť o myši účinkov a nechcete účinok zasahovať na to.

V riadku 9 nakoniec vám inicializovať efekt ( dokumentácia parametra tu ). Dôležitou súčasťou sú prvé dve parameter. Môžete definovať, že prechod začína s "img1" a končí "img2".

Export vašich fla súbor. Ako vidíte, efekt zložka funguje perfektne s priehľadným pozadím "img2".

Krok 8 - zložitejšie ActionScript

OK, s predchádzajúcim kódom preklopeniu funguje v pohode. Ale čo keď chcete tiež mať zavedenie funkcie, ktorá prevracia prechod z "img2" na "img1"? Na dosiahnutie tohto cieľa je potrebné zložitejšie kód. Odstrániť skript a vložiť nasledujúce:

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

 var beh = false;
 var jede = false;
 var goOut = false;

 Funkcia _onOver (e: MouseEvent) (
  if (! beh) (
  _createAnimation ("in");
  Beh = true;
  Else ()
  jede = false;
  goOut = true;
  )
 )

 Funkcia _onOut (e: MouseEvent) (
  if (! beh) (
  _createAnimation ("out");
  Beh = true;
  Else ()
  jede = true;
  goOut = false;
  )
 )

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

  if (jede) (
  _createAnimation ("out");
  Else ()
  Beh = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ("in");
  Else ()
  tečúcou = false;
  jede = false;
  )
 )

 Funkcia _createAnimation (dir: String) (
  var myFilter: CubeTransitionEffectAS3 = new 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);
  )
 )

Je dôležité vedieť, že nemôžete zmeniť smer prechodu počas efekt je spustený. Miesto toho si "pamätať" akcie užívateľa, vyčkajte, kým sa účinok ich platia a platiť reverz prechodu.

Premennej "jede" a "goOut" (riadok 5 a 6) sú použité na tento účel. Môžete nastaviť, keď funkcia "_onOver" a "_onOut" (riadok 8 a 18) sú vykonané. Ale len v prípade, že var beh je pravda, jestli je to falošný (linka 9 a 19), začnete prechod hneď (riadok 10 a 20).

Funkcia "_createAnimation" (riadok 52) je vaša pomocná funkcia štart animácie v závislosti na smere "dir" ste prešiel ako parameter.

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

Stiahnuť

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

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