Cool Flash Effect Tutorials!

Shrnutí

V tomto tutoriálu se naučíte, jak vytvořit krychli efekt přechodu na myši převrácení.

Zde konečný výsledek:

Požadavky na

Flash CS3 nebo Flash CS4.

Poznámka: screenshot v tomto tutoriálu se provádí v programu Flash CS3. Funguje to naprosto totožný ve Flash CS4.

Krok 1 - Instalace účinek složky

Zakoupení Transition Effect Cube zde. Řiďte se pokyny pro instalaci a přetáhněte ze složky Ovládací panel do vaší knihovny. Fla soubor.

Krok 2 - Vytvoření nové vrstvy

Chcete-li zachovat pořádek věcí, měli byste vytvořit novou vrstvu na hlavní časové ose a dejte mu jméno. Udělej to, jak je uvedeno na obrázku níže.

Krok 3 - Vytvoření pozadí

Nyní můžete vytvořit pozadí s gradientem. I když to není nutné, aby se efekt práce ukazuje, že efekt funguje také s transparentním obsahu (více o tom později).

Vyberte první snímek v "bg" vrstvu a nakreslete tvar obdélníku nástroj na plátně. Vyberte obdélníku a upravit nastavení barev mají pěkné gradient (můžete použít i jiné barvy).

Krok 4 - tlačítko Vytvořit

Kostka efekt by měl reagovat na dynamicky uživatele myš stav (převrácení / zavádění). To je nejlepší postupy, které nejsou pro přidání události posluchače o tom sám a místo toho využít "prázdné" tlačítko.

Klepněte na první rámeček ve vrstvě "btn" a nakreslete obdélník s velikostí plátna (barva není mater, protože tlačítko nebude viditelné). Vyberte obdélníku a přeměnit jej na tlačítko s [stiskněte klávesu F8] nebo klikněte pravým tlačítkem myši na MovieClip -> "Převést na symbol ...".

Nastavit název tlačítka "btn" a ujistěte se, že druh je "Button".

Double-klikněte na tlačítko. Nyní přetáhněte první klíčový snímek "Up" na poslední snímek "Hit". Tím zajistíte, že tlačítko bude interaktivní, ale nejsou vidět.

Vraťte se na hlavní časovou osu a nastavit například název tlačítka "btn".

Krok 5 - Vytvoření start MovieClip

Účinek musí mít dvě MovieClip, kde jsou vizuální informace převzaté z. Nyní budete vytvořit MovieClip přechod bude začínat.

Klikněte na první snímek na vrstvu "img1". Import obrázku s velikostí plátna stiskem [stiskněte Ctrl-R], nebo "Soubor" -> "Import" -> "Import na jevišti ...".

Nyní převést tento obraz na MovieClip a pojmenuje ho "img1".

Nastavit například název právě vytvořený MovieClip na "img1".

Krok 6 - Vytvoření Konec MovieClip

Konec MovieClip bude obsahovat text místo obrazu. Dosažení tohoto cíle, které budete potřebovat trochu jiný přístup.

Vyberte první snímek vrstvy "img2" (ok, špatné pojmenování, nebojte se, že správná ) A nakreslete obdélník s velikostí plátna. Chcete, aby se ujistil, že konec MovieClip má stejné rozměry jako Start MovieClip. To je důvod, proč byste nejprve nakreslit tvar s neviditelným stejné velikosti jako Start MovieClip.

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

Převést na tvar MovieClip [stiskněte klávesu F8] nebo klikněte pravým tlačítkem myši na MovieClip -> "Převést na symbol ..." a pojmenuje ho "img2".

Double-klikněte na právě vytvořený MovieClip, vytvořte novou prázdnou vrstvu a dát nějaký text k této nově vytvořené vrstvy.

Vraťte se na hlavní časové ose a nastavit například název MovieClip na "img2".

Krok 7 - Přidat překlopení ActionScript

Vybrat vrstvu "skript" a otevřete "Akce" okno s "Windows" -> "Akce" nebo [stiskněte F9].

Pokud si prostě chcete mít přechod na převrácení (a ne zpět-přechod na zavádění), zkopírujte následující řádky do kódu okna.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 Funkce _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 prvním řádku přidáte událost převrácení posluchače na tlačítko. Ve funkci "_onOver" (řádek 3) nejprve vytvořit instanci CubeTransitionEffectAS3 před myší interaktivita komponenty (položka 4 a 5). Pamatujte si, že tlačítko, které jste vytvořili dříve, je starat se o myši účinků a nechcete zasahovat vliv na to.

V řádku 9 nakonec byste jí inicializovat efekt (dokumentace parametru zde). Důležitou součástí jsou první dva parametry. Určíte, že přechod začíná s "img1" a končí "img2".

Export vašeho fla soubor. Jak vidíte, v důsledku konstrukční práce dokonale s průhledným pozadím "img2".

Krok 8 - Složitější ActionScript

OK, s předchozím kódem převrácení works just fine. Ale co když chcete také mít zavádění funkce, která obrátí přechod z "img2" na "img1"? K dosažení tohoto potřebujete složitější kód. Odstranit skript a vložte následující:

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

 var běží = false;
 var Goin = false;
 var goOut = false;

 Funkce _onOver (e: Event) (
  if (! běh) (
  _createAnimation ( "in");
  běžící = true;
  else ()
  Goin = false;
  goOut = true;
  )
 )

 Funkce _onOut (e: Event) (
  if (! běh) (
  _createAnimation ( "out");
  běžící = true;
  else ()
  Goin = true;
  goOut = false;
  )
 )

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

  if (Goin) (
  _createAnimation ( "out");
  else ()
  běžící = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "in");
  else ()
  běžící = false;
  Goin = false;
  )
 )

 Funkce _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é vědět, že nemůžete změnit směr přechodu při účinek je spuštěn. Místo toho si může "vzpomenout" akce uživatele, vyčkejte, dokud se efekt dělá a platí revers přechodu.

Proměnné "děje" a "goOut" (řádek 5 a 6) se používají k tomuto účelu. Nastavíte-li je funkce "_onOver" a "_onOut" (linky 8 a 18) jsou prováděny. Ale pouze v případě, var běží, je to pravda, jestli je to false (linky 9 a 19), můžete začít rovnou přechod (řádek 10 a 20).

Funkce "_createAnimation" (řádek 52) je vaše pomocná funkce na začátku animace v závislosti na směru "dir" si prošel jako parametr.

Všimněte si, že volání po "removeFilter" metoda (linky 29 a 41), obě MovieClip Začátek a konec MovieClip jsou nastaveny na viditelné (z efekt). To je důvod, proč si nastavit viditelnost MovieClip - přechod začala - na false (linky 30 a 42).

Stáhnout

Klikněte zde pro stažení fla tohoto návodu. Poznámka:. Fla není zahrnuje vliv složku. , Aby fla práci, musíte zakoupit přechodu Cube Effect zde.

Zde najdete video tutorial, jak zavést odlišný vliv.