Cool Flash Effect oktatóanyagok!

Összefoglalót

Ez a bemutató megtanulod, hogyan lehet létrehozni egy kocka átmenet hatása egér átütemezés.

Itt a végeredmény:

Követelményeinek

Flash CS3 vagy Flash CS4.

Megjegyzés: A screenshot a bemutató készült a Flash CS3. Úgy működik, pontosan ugyanaz a Flash CS4.

1. lépés - a hatás komponens telepítése

Vásárolja meg a Cube Átmeneti hatás van. Kérjük, kövesse az utasításokat telepíteni, és húzza az alkatrész az alkatrész-testület a könyvtárba a. Fla fájlt.

2. lépés - Hozzon létre egy új réteget

Annak érdekében, hogy a dolgok rendben akkor létre kell hozni egy új réteget a fő timeline és adja meg a nevét. Ehhez ahogy a screenshot alább.

3. lépés - Create háttér

Most hozunk létre a háttérben egy lejtőn. Bár ez nem szükséges, hogy a hatás működését a jelentés azt mutatja, hogy a hatás is működik átlátható tartalom (bővebben később).

Válasszuk ki az első képkocka a "bg" réteget, és rajzoljon egy téglalap alakú eszközt a vásznon. Válasszuk ki a téglalap és állítsuk be a szín beállításokat, hogy egy szép gradiens (tudod is használ bármilyen más színű).

4. lépés - Create gombra

A kocka hatás dinamikusan reagálnak a felhasználók az egeret állam (rollover / rollout). Ez a legjobb gyakorlat, hogy ne adjon az esemény hallgató abban az értelemben is, és helyette egy "üres" gombra.

Jelölje meg az első keretben lévő réteg "btn", és rajzoljon egy téglalapot a méret a vászon (szín nem mater, mivel a gomb nem lesz látható). Válasszuk ki a téglalap és megtérít ez-hoz egy gomb [sajtó F8], vagy jobb kattintás a MovieClip -> "Konvertálás Symbol ...".

Állítsa be a nevét a gombot, hogy "btn", és győződjön meg arról, hogy a típus a "gomb".

Kattintson duplán a gombra. Most húzza az első keyframe "Fel", hogy az utolsó képkocka "Hit". Ezzel biztosítható, hogy a gomb lesz interaktív, de nem látható.

Menj vissza a fő timeline és állítsa be a nevét például a gomb, hogy "btn".

5. lépés - a start Movieclip

A hatás szüksége van a két Movieclip, ahol a vizuális információk származnak. Fogsz most megteremtése Movieclip az átmenet veszi kezdetét.

Kattints az első képkocka a réteg "img1". Behoz egy képet a méretét vászon megnyomásával [Ctrl-R] vagy a "Fájl" -> "Importálás" -> "Importálás Stage ...".

Most már meg ezt a képet egy Movieclip, és nevezd el "img1".

Állítsa be a nevét például a frissen létrehozott Movieclip a "img1".

Step 6 - Create End Movieclip

The End Movieclip tartalmaz szöveget helyett egy kép. Az ennek elérése szüksége lesz egy kicsit más megközelítést.

Válasszuk ki az első képkocka a réteg "img2" (ok, rossz névre, nyugodtan, hogy a helyes ), És rajzoljon egy téglalapot a méret a vásznon. Azt akarod, hogy megbizonyosodjon arról, hogy a vége Movieclip ugyanolyan méretű, mint a Start Movieclip. Amit az első, miért készít egy láthatatlan alak, akkora, mint a Start Movieclip.

Válassza ki a forma és állítsa be a alfa-érték 0-ra (a forma még mindig ott van, de nem látható).

Konvertálni alakja egy Movieclip [sajtó F8] vagy jobb kattintás a MovieClip -> "Konvertálás Symbol ...", és nevezd el "img2".

Kattintson duplán az imént létrehozott Movieclip, hozzon létre egy új, üres réteget, és egy kis szöveget, hogy az újonnan létrehozott réteg.

Menj vissza a fő timeline és állítsa be a példány nevét a Movieclip a "img2".

Step 7 - Add átütemezés ActionScript

Válassza ki a réteg "script" és nyissa meg a "Actions" ablakban a "Windows" -> "Actions" vagy az [sajtó F9].

Ha csak azt kívánja, hogy egy átmenet, borulás (és nem a back-átmenet terjedése) példányát a következő sorokat a kód ablakot.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 function _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);
 )

Az első sorban adja hozzá a felborulás esetén a hallgató a gombot. A funkció "_onOver" (3. sor), akkor előbb készíts egy példányát a CubeTransitionEffectAS3 mielőtt letiltja az egeret interaktivitás a komponens (a 4. és 5. sor). Ne feledje, hogy a gomb korábban létrehozott ügyelve az egér hatások és nem szeretné, hogy a hatás beavatkozni rajta.

Összhangban 9 végül akkor inicializálni a hatás (a dokumentáció a paraméter van). A fontos része az első két paraméter. Határozná meg, hogy az átmenet kezdődik: "img1" és végződik "img2".

Exportálja a fla fájlt. Amint látod, a hatás-alkatrész tökéletesen működik az átlátszó háttér a "img2".

8. lépés - Az összetettebb ActionScript

OK, az előző kódot az átütemezés szerkezet csak finom. De mi van, ha azt is szeretnénk, hogy a kínálatból funkciója, hogy megfordítja az átmenetet a "img2"-ről "img1"? Elérése, hogy szüksége van egy bonyolultabb kódot. Törlés a forgatókönyvet, és helyezze be a következőket:

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

 var fut = false;
 var goin = false;
 var goOut = false;

 function _onOver (e: MouseEvent) (
  if (! fut) (
  _createAnimation ( "in");
  fut = true;
  ) else (
  Goin = false;
  goOut = true;
  )
 )

 function _onOut (e: MouseEvent) (
  if (! fut) (
  _createAnimation ( "out");
  fut = true;
  ) else (
  megyek = true;
  goOut = false;
  )
 )

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

  if (goin) (
  _createAnimation ( "out");
  ) else (
  fut = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "in");
  ) else (
  fut = false;
  Goin = false;
  )
 )

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

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

Nagyon fontos tudni, hogy nem fordított irányban az átmenet során a hatás fut. Helyette is "emlékszik" a cselekvés a felhasználó, várjon, amíg a hatás nem történik meg és alkalmazzák a revers átmenetet.

A változók "folyik" és a "goOut" (line 5 és 6) használják erre a célra. Te meg őket, amikor a funkciók "_onOver" és a "_onOut" (8. és 18. sor) a végrehajtásra. De csak akkor, ha a var futás igaz, ha ez hamis (9. és 19. sor), akkor az átmenet kezdete azonnal (vonal 10 és 20).

A funkció "_createAnimation" (line 52) a te segítő funkció kezdetét az animáció függően az irányba "dir" akkor telt el, mint paraméter.

Figyeljük meg, hogy hívás után a "removeFilter" módszer (29 és 41 tétel) mind a Start Movieclip és a vég Movieclip beállítása látható (ki a hatás). Amit miért beállítása Movieclip látótávolság - az átmenet kezdődött - a hamis (30. és 42. sor).

Letöltés

Kattintson ide, hogy töltse le a fla e konzultáció. Megjegyzés: A. Fla nem tartozik a hatás komponenst. Annak érdekében, hogy a fla munka, meg kell vásárolnia a Cube Átmeneti hatás van.

Itt lehet találni video konzultáció hogy hogyan hajtható végre egy másik hatás.