Cool Flash Effect oktatóanyagok!

Összefoglalás

A bemutató megtanulod, hogyan kell létrehozni egy kockát átmeneti hatása egér átütemezés.

Itt a végeredmény:

Követelmények

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 - Helyezze a hatás komponens

Vásárolja meg a Cube átmeneti hatása van . Kérjük, kövesse az utasításokat telepíteni , és húzza az alkatrész az alkatrész panel a könyvtárba a. fla fájlba.

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

Annak érdekében, hogy a dolgok rendben érdemes létrehozni egy új réteget a fő idővonalon, és adja meg a nevét. Ehhez, ahogy az az alábbi screenshot.

3. lépés - Új háttér

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

Válassza ki az első képkocka a "bg" layer, és felhívni a forma, a téglalap eszközt a vásznon. Válassza ki a téglalapot, és állítsuk be a szín beállításokat, hogy egy szép gradiens (is használható 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 az állami (átütemezés / kiépítése). Ez a legjobb gyakorlat szerint nem adja hozzá a rendezvény hallgató abban az értelemben is, és helyette egy "üres" gombra.

Kattintson az első képkocka a réteg "BTN", és rajzoljon egy téglalapot a méret a vászon (szín nem számít, mivel a gomb nem lesz látható). Válassza ki a téglalap és megtérít ez-hoz egy gomb a [sajtó F8], vagy jobb kattintás a MovieClip -> "Konvertálás Symbol ...".

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

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

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

5. lépés - létrehozása kezdete Movieclip

A hatás szüksége van a két Movieclip, ahol a vizuális információk is származnak. Akkor most létre a Movieclip az átmenet kezdődik.

Kattintson az első képkocka a réteg "img1". Import a kép méretét a vászon megnyomásával [Ctrl-R] vagy a "File" -> "Importálás" -> "Importálás Stage ...".

Most már ezt a képet egy Movieclip és nevezzük el "img1".

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

6. lépés - létrehozása vége Movieclip

A vége Movieclip tartalmaz szöveget, hanem a kép. Az ehhez szüksége lesz egy kissé eltérő megközelítést.

Válassza ki az első képkocka a réteg "img2" (ok, rossz elnevezés, nyugodtan helyes, hogy ), És rajzoljon egy téglalapot a méret a vászon. Szeretne meggyőződni arról, hogy a vége Movieclip ugyanolyan méretű, mint a Start Movieclip. Amit miért először húz egy láthatatlan alak, akkora, mint a Start Movieclip.

Válassza ki az alakzatot, és állítsa az alpha érték 0 (a forma még mindig ott van, de láthatatlan).

Átalakítani az alakzatot 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.

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

7. lépés - Add átütemezés ActionScript

Válassza ki a réteg "forgatókönyvet" és nyissa meg a "Műveletek" ablakban a "Windows" -> "Műveletek" vagy [sajtó F9].

Ha csak azt kívánja, hogy az átmenet a borulás (és nem vissza-átmenet kiépítése) másolatát a következő sorokat a kód ablakban.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 függvény _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őször hozzon létre egy példányt a CubeTransitionEffectAS3 mielőtt kikapcsolod az egeret interaktivitás az alkatrész (sorban a 4. és 5.). Ne feledje, a gomb korábban létrehozott vigyáz az egér hatások, és nem akarja a hatást, hogy zavarja e.

A line 9 Végül meg inicializálni a hatás ( dokumentáció a paraméterek itt ). 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 a fla fájlt. Amint látod, a hatás komponens működik tökéletesen átlátszó háttere "img2".

8. lépés - Bonyolultabb 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" a "img1"? Elérése érdekében, hogy szükség van egy összetett 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 megyek = false;
 var goOut = false;

 függvény _onOver (e: MouseEvent) (
  if (! futás) (
  _createAnimation ("a");
  futás = true;
  Else ()
  megyek = false;
  goOut = true;
  )
 )

 függvény _onOut (e: MouseEvent) (
  if (! futás) (
  _createAnimation ("out");
  futás = true;
  Else ()
  megyek = true;
  goOut = false;
  )
 )

 függvény _inAnimationDone (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  if (haladó) (
  _createAnimation ("out");
  Else ()
  fut = false;
  goOut = false;
  )
 )

 függvény _outAnimationDone (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goOut) (
  _createAnimation ("a");
  Else ()
  fut = false;
  megyek = false;
  )
 )

 függvény _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);
  )
 )

Fontos, hogy tudja, hogy nem lehet a fordított irányba való átmenet során a hatás fut. Ehelyett akkor "emlékszik" a cselekvés a felhasználó, várjon, amíg a hatás történik, és alkalmazza a revers átmenet.

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

A függvény "_createAnimation" (line 52) az Ön segítő funkció a indítsa el az animációt függően az irányba "dir" te át a paramétert.

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

Letöltés

Kattintson ide , hogy töltse le a fla e konzultáció. Megjegyzés: A. Fla nem tartalmazza a hatás komponens. Annak érdekében, hogy az fla munkát, meg kell vásárolnia a Cube átmeneti hatása van .

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