ActionScripti õppematerjal

4. Interpoleerimine (tweening) Tween-klassi abil

Tagasi sirvima

Alates Flash versioonist MX 2004 saab Flashi interpoleerimise (tweening) võimalusi kasutada ka ActionScripti vahenditega. See harjutusülesanne keskendubki Tween klassi abil erinevate liikumisefektide loomisele.

Õpime:

• Klasside importimist
• ActionScripti abil graafilist interpoleerimist (tweening)
• Viide "this"

Näidetest fail tween.fla, tween.swf

1. Esmalt tuleks luua lihtne MovieClip-tüüpi sümbol, millele hiljem ActionScripti abiga efekte rakendame. See ei pea olema midagi erilist, piisab näiteks ka lihtsalt ühest teksti tööriistaga loodud sõnast.

2. Lohistame sümboli lavale ning anname talle instantsinimeks mcTekst.

3. Loome uue kihi, mille esimesele kaadrile kirjutame ActionScript koodi: import mx.transitions.Tween; import mx.transitions.easing.*; Need kaks koodirida impordivad Flashi dokumenti klassi Tween ning kõik klassid kaustast easing. Antud klassid asuvad ActionScript failidena Flashi kaustas \en\First Run\Classes\mx\ transitions\. Meetod on sisuliselt funktsioon, mis asub klassi sees. Lihtsustatult öeldes on klass meetodite (funktsioonide) kogum, mis objekti luues sellele omistatakse. [PHP]

4. Järgmised kaks rida loovad kaks interpoleerimise instantsi ning hoiavad neid muutujatena Keera ja Asukoht.

   var Keera:Tween = new Tween(mcTekst, "_rotation", Elastic.easeOut, 0, 360, 3, true); 
   var Asukoht:Tween = new Tween(mcTekst, "_x", Bounce.easeOut, 0, Stage.width, 3, true);

   Esmajoones segasena tunduvad koodiread ei kujuta endast tegelikult midagi keerulist. Tween-klassi välja kutsudes tuleb määrata 8 parameetri väärtused.

   1. objekt – MovieClip-sümboli instantsi nimi, millele soovitakse interpoleerimist luua. Meie näites on instantsiks mcTekst.

   2. omadus – Omadus, mille järgi interpoleerida. Selleks võib olla _alpha (läbipaistvus), _xscale (x-skaala), _yscale (y-skaala), _x, _y, _rotation (pöörlemine), _height (pikkus), _width (laius). Meie näites vastavalt _rotation ja _x.

   3. ease-efekti klass ja meetod – Interpoleerimise tüüp. Flashil on kuus sisseehitatud ease-klassiga.

      1. Back – Laiendab animatsiooni üle ühe või mõlema interpoleerimise ääre.

      2. Bounce – Loob põrkuva efekti.

      3. Elastic – Loob põrkuva ja laiendava efekti segu. Animatsiooni laiendatakse ja põrgatatakse tagasi.

      4. Regular - Aeglasem liikumine.

      5. Strong – Sarnane eelmisele, kuid kombineeritav erinevate ease-meetoditega.

      6. None – Lihtne lineaarne üleminek a-lt b-le.

      Eelpoolnimetatud klassidel on omakorda 3 meetodit:

      • easeIn – animeeritakse ainult interpoleerimise algust.

      • easeOut – animeeritakse ainult interpoleerimise lõppu.

      • easeInOut – animeeritakse mõlemaid pooli.

      Kombineerides kuus ease-klassi ja kolm meetodit, saame 18 erinevat efekti. Meie näites on kasutusel Elastic.easeOut ja Bounce.easeOut.

   4. begin – interpoleerimise algus.

   5. end – interpoleerimise lõpp. Nagu näitest näha, ei peaks väärtused tingimata olema kindla arvuna ette antud (Stage.width).

   6. kestvus – interpoleerimise kestvus. Selle väärtuse võib anda nii kaadrite arvuna kui ka sekundite arvuna, olenevalt järgmisest parameetrist.

   7. kasuta sekundeid – Määrab ära, kas kestvus on antud kaadrite või sekunditena. Väärtustena tuleb kasutada true (kasutusel on sekundid) või false (kasutusel on kaadrid). Meie näites on kestvuseks 3 sekundit.

5. Edasi kasutame meetodit yoyo, mis loob interpoleerimise lõpp-punktist tagasi alguspunkti. Kasutades Tween-klassi sündmuseohjurit (event handler) onMotionFinished, mis kutsub yoyo-meetodi välja iga kord, kui interpoleerimine Keera on lõpetatud. Seega saame lõputu interpoleerimise edasi ja tagasi:

   Keera.onMotionFinished = function() { 
   this.yoyo();
   };

6. Sarnaselt talitame ka interpolarisatsiooniga Asukoht, kuigi nüüd kasutame meetodit continueTo, mis suunab interpolarisatsiooni asukoha määratud aja jooksul teise asukohta. continueTo vajab selleks kahte parameetrit: finiš – ehk kuhu peab jõudma ning kestvus, kaua selleks aega kulub. Kestvus võib olla nii kaadrites kui sekundites, olenevalt eelpool Asukoht:Tween muutujas määratust.

   Asukoht.onMotionFinished = function() { 
   this.continueTo(Stage.width / 2, 3);
   };

7. Nagu näha, on Tween-klassi on soovitud efekti saavutamiseks üsnagi lihtne kasutada.

Tagasi sirvima