. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK ActionScript

Beépített Tween/Easing osztályok az MX2004-ben
  feltöltve: 2005.03.10 | szerző: savanya | olvasva: 7776 alkalommal

     
 

Az itt következő segédlet a FlashMX2004 program olyan rejtett 'képességeinek' egy részére próbálja felhívni a figyelmet, amelyek a hivatalos Macromedia oldalakon is csak elég érintőlegesen vannak dokumentálva, ugyanakkor az interneten kutakodva több helyen is különböző részletességű leírásokat találhatunk róluk. És itt rögtön köszönetet is kell mondjak Devon O. Wolfgang úrnak, akitől e témában az eddigi legrészletesebb dokumentációt találtam, és amely leírás végül is inspirált, hogy egy segédlet keretein belül magam is e hasznos funkciók bemutatására törekedjem.

Mik is ezek a 'képességek'? Leegyszerűsítve: olyan, az mx2004-ben előre definiált osztályok, amelyekkel az eddig csak bonyolult matematikai függvényekkel lekódolt animációkat, maszkolásokat tudunk viszonylag egyszerű módon a különböző movieclipjeinkhez (továbbiakban: mc) hozzárendelni. Két ilyen fő osztályt (class) találhatunk beépítve a programba, a Transition és a Tween elnevezésűeket, illetve - ehhez kapcsolódóan - az ezek által létrehozható animációkat módosító easing osztályt. Ezen osztályok konstruktorait megtalálhatjuk az mx2004 programkönyvtárában (windows alatti hagyományos telepítés esetén: C:\Program Files\Macromedia\Flash MX 2004\'nyelv'\First Run\Classes\mx\transitions, illetve macintoshnál: HD:Applications:Macromedia Flash MX 2004:First Run:Classes:mx:transitions).

A Transition osztállyal és metódusaival e segédlet nem foglalkozik részletesebben (e feladat a jövő ködébe vész), legyen elég annyi, hogy ezekkel, illetve az ezeket módosító/finomító easing osztály metódusaival különböző típusú maszk és mozgáseffektekkel tudunk mc-ket megjeleníteni és eltüntetni. Amivel viszont foglalkozni fogunk az a Tween és easing osztályok és azok paraméterei, függvényei.

A Tween osztály

Alapok

Lecsupaszítva és leegyszerűsítve a dolgokat, azt mondhatjuk, hogy a Tween osztály segítségével - egyelőre minden további bonyolítást mellőzve - előre megadott paramétereknek megfelelően egy mc valamely tulajdonságát (property, úgymint: _x, _y, _xscale, _yscale, _rotation, _alpha, _width, _height) tudjuk egy kezdő és egy végérték között megváltoztatni és azt animációként megjeleníteni. A konstruktorban is használt elnevezéseket használva nézzük meg a szintaktikáját:

myTween=new mx.transitions.Tween (obj, prop, func, begin, finish, duration, useSeconds)

ahol:

obj - az az mc, amelyiknek valamely tulajdonságát meg akarjuk változtatni
prop - a tulajdonság amit változtatni fogunk
func - az easing osztály egy metódusa, ez - ahogy az osztály neve is mutatja - a kezdő és végérték közti átmenet 'csillapítási' fajtáját adja meg (bővebben később)
begin - a változtatandó tulajdonság kezdő értéke
finish - a változtatandó tulajdonság végső értéke
duration - az az időtartam, ami alatt az animáció lejátszódik (frame-számban, vagy ezredmásodpercben megadva)
useSeconds - egy boolean érték, amely jelzi, hogy a duration értéke frameben vagy ezredmásodpercben lett megadva (true = ezredmásodperc, false = frame, alapesetben false)

Ez így nagyon egyszerűnek tűnik, és valóban az:
Nyissunk egy új fla -t és abban hozzunk létre egy my_mc nevű mc-t és a kontrollálhatóság kedvéért egy my_btn nevű gombot, majd az első (s egyben utolsó) frame-re írjuk az alábbi kódot:

my_btn.onRelease = function() {
      myTween = new mx.transitions.Tween(my_mc, "_x", undefined,15, 135, 25, false);
};

a fentiek szerint ez a függvény a my_mc nevű mc "_x" pozícióját 25 frame-nyi idő alatt az x=15 pozícióból az x=135 pozícióba mozgatja, s mivel egyelőre nem adtuk meg a 'func' paramétert (undefined), ezért a mozgás a két végpont között lineáris:

Természetesen egy mc-nek egyszerre több tulajdonságát is animálhatjuk a fenti módon:

my_btn.onRelease = function() {
      myTween = new mx.transitions.Tween(my_mc, "_x", undefined, 15, 135, 25, false);
      myTween2 = new mx.transitions.Tween(my_mc, "_alpha", undefined, 100, 20, 30, false);
      myTween3 = new mx.transitions.Tween(my_mc, "_rotation", undefined, 0, 180, 45, false);
};

Látható, hogy a különböző időértékek (duration) megadása miatt a forgatás, az _alpha csökkentése és az _x pozíció változtatása egymástól független folyamatok, mindegyik 'végigfut', anélkül, hogy az bármilyen hatással lenne a többire.

// -- Egy apró kitérő: -- //
Akik figyelmesen megnézik, azok láthatják, hogy az osztály konstruktorának hivatkozási útvonala (mx.transitions.Tween) megegyezik az mx2004 programkönyvtárában a Tween.as fájl elérési útjával. És valóban, ha az mx/transitions (illetve a későbbikere vonatkozóan az mx/transitions/easing) könyvtárat mint forráskódokat még mindenfajta munka előtt importáljuk a kódunkba, akkor a további programozás során eltekinthetünk az elérési utak megadásától és használhatjuk az alábbi formulát:

import mx.transitions.*;
my_btn.onRelease = function() {
      myTween = new Tween(my_mc, "_x", undefined, 15, 135, 25, false);
};

A '*' esetünkben azt jelenti, hogy a könyvtár teljes tartalma importálásra kerül, ami byte-ban mérve némi növekedést okoz majd a végső swf fájlra vonatkozólag, de amennyiben az swf sok olyan animációt tartalmaz amelyeket a Tween, Transition, easing osztályok különböző metódusaival hozunk létre, akkor sok fölösleges gépeléstől kíméljük meg magunkat az egyszeri import használatával. Az egyszerűség (?) és könnyebb értelmezhetőség kedvéért a továbbiakban azonban maradok az egyenkénti megadásos verziónál.
// -- Kitérő vége -- //

Akinek egyelőre ennyi elég is, és szeretne valami látványosabbat látni, az akár ugorhat is az Easing osztályról szóló részhez.

 
     
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .