Cool Effect Návody Flash!

Přehled

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

Zde konečný výsledek:

Požadavky

Flash CS3 nebo Flash CS4.

Poznámka: screenshot v tomto tutoriálu je v CS3 Flash. Funguje to přesně stejné ve Flash CS4.

Krok 1 - Instalace účinek složky

Nákup Přechod Cube Effect zde . Řiďte se pokyny pro instalaci a přetáhnout složku z jednotlivých složek panel do knihovny svého. fla soubor.

Krok 2 - Vytvořit novou vrstvu

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

Krok 3 - Vytvoření pozadí

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

Vyberte první snímek v "BG" vrstvy a nakreslit tvar obdélníku s nástrojem na plátně. Vyberte obdélník a upravte nastavení barev, že mají hezké gradient (můžete použít i jiné barvy).

Krok 4 - tlačítko Vytvořit

Kostka efekt by měl reagovat dynamicky, aby uživatelé myš státu (převrácení / rollout). To je nejlepší postup, který není pro přidání události posluchače o tom sám a místo toho používat "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 nebudou viditelné). Vyberte obdélník 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 -> "Konvertovat do Symbol ...".

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

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

Vraťte se na hlavní časovou osu a nastavit instance název tlačítka "BTN".

Krok 5 - Vytvořit start MovieClip

Účinek musí mít dva MovieClip, kde jsou vizuální informace převzaté z. Budete nyní vytvořit MovieClip přechod začne se.

Klikněte na první snímek ve vrstvě "img1". Import image s velikostí plátna stisknutím [stisknutím Ctrl-R] nebo "Soubor" -> "Import" -> "Import na etapy ...".

Nyní převést tento obraz na MovieClip a pojmenujte jej "img1".

Nastavení instance název právě vytvořený MovieClip do "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í, neváhejte a správné, že ) 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 neviditelné tvar stejné velikosti jako Start MovieClip.

Vyberte tvar a nastavení alfa hodnotu 0 (tvar je stále tam, ale neviditelný).

Převést tvar MovieClip F8 stiskněte [] nebo klikněte pravým tlačítkem myši na MovieClip -> "Konvertovat do Symbol ..." a pojmenujte ho "img2".

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

Vedoucí zpět na hlavní časové ose a nastavit instance název MovieClip na "img2".

Krok 7 - Přidat překlopení ActionScript

Vyberte vrstvu "skript" a otevřete "Akce" okno s "Windows" -> "Akce" nebo [Tisková F9].

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

V řádku 9 nakonec vám inicializovat efekt ( dokumentace parametru zde ). Důležitou součástí jsou první dvě parametr. Můžete definovat, že přechod začíná s "img1" a končí "img2".

Export vašich fla soubor. Jak vidíte, efekt složka funguje perfektně s průhledným pozadím "img2".

Krok 8 - složitější ActionScript

OK, s předchozím kódem překlopení funguje v pohodě. Ale co když chcete také mít zavádění funkce, která převrací přechod z "img2" na "img1"? Pro dosažení tohoto cíle je třeba složitější kód. Odstranit skript a vložit následující:

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

 var běh = false;
 var jede = false;
 var goOut = false;

 Funkce _onOver (e: MouseEvent) (
  if (! běh) (
  _createAnimation ("in");
  běh = true;
  Else ()
  jede = false;
  goOut = true;
  )
 )

 Funkce _onOut (e: MouseEvent) (
  if (! běh) (
  _createAnimation ("out");
  běh = true;
  Else ()
  jede = true;
  goOut = false;
  )
 )

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

  if (jede) (
  _createAnimation ("out");
  Else ()
  běh = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ("in");
  Else ()
  běh = false;
  jede = false;
  )
 )

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

Proměnné "jede" a "goOut" (řádek 5 a 6) jsou použity pro tento účel. Můžete nastavit, když funkce "_onOver" a "_onOut" (řádek 8 a 18) jsou provedeny. Ale jen v případě, že var běh je pravda, jestli je to falešný (linka 9 a 19), začnete přechod hned (řádek 10 a 20).

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

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

Stáhnout

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

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