Tweener - eksterna klasa pomoću koje animiramo objekte s actionscriptom
Tweener je eksterna klasa koja se koristi za animacije pomoću actionscripta. Napiso ga je Zeh Fernando i ovo je nastavak njegovog mc_tweena2. Može se koristiti u actionscriptu 7,8,9+ i Flash Litu 2.0+. Dokumentacija je kao i kod prethodnika jako dobro napisana, pa ovu jednostavnu klasu čini još lakšom za korištenje.
1. DOWNLOAD
Preporučam da se klase skinu preko svn repositoria jer su najnovije , ali mogu će ih je skinuti i u zip-u.
Klase možete skinut na službenoj stranici http://code.google.com/p/tweener/ . Skinite Stable release za actionscript 3.0
SVN repositori možete skinut s programom TortoiseSVN, a adresa SVN-a je http://tweener.googlecode.com/svn/trunk
2. INSTALACIJA
Napravite novi folder imena KLASE ili CLASSES (nije važno ime samo je važno da vi znate da su unutra klase)na mjestu gdje ga nećete obrisat(tipa desktop).
Unutar njega napravite dva foldera AS_2 i AS_3. Moj folder s eksternim actionscript 3.0 klasama nalazi se na d particiji - d:/FLASH/CLASSES/AS_3_0. naravno
onda su actionscript 2.0 klase u AS_2 folderu.
Sad odpakirajte zip i kopirajte caurina folder u vaš CLASSES folder. Oni koji su skinuli preko svn-a moraju iz foldera "nekiFolder/as3" gdje ste s tavili skidat klase preko SVN-a kopirati svoj caurina folder.
Gotovi smo s folderima idemo narihtat Flash da koristi te klase
Ako nemate upaljen flash upalite ga i odite u Edit/Preferences.../Category - Actionscript/. Sad kliknite na Actionscript 3.0 Settings... Prvo kliknite na + da kreirate novu putanju do klasa, onda kliknite na metu,
nađite vaš CLASSES/AS_3 folder, označite ga(nemojte označavat caurina folder jer vam Tweener neće radit) i kliknite ok. Zatvorite preferences prozor klikajući ok.
Ako ste sve dobro napravili trebali bi moć koristit Tweener, a to je najlakše testirat tako da se u praznom fla-u na prvom frameu stavi ova linija koda:
import caurina.transitions.Tweener;
Sad kliknite Ctrl + Enter da testirate swf i ako vam se u compiler error windowu ne pojavljuje greška sve ste dobro napravili, ako imate grešku pročitajte ovaj dio ponovno i nađite gdje ste pogriješili. Isto se narihtava putanja do AS_2 fajlova.
3.KORIŠTENJE
Da bi koristili Tweener trebate znati dvije linije koda. Morate importirat Tweener u Flash i pokrenuti Tweener u trenutku kad hoćete nešto animirat
import caurina.transitions.Tweener; Tweener.addTween(imeMovieClipa,{x:100,time:2});
x je propertise, time je parametar koji se pišu unutar vitičaste zagrade, tj ova gore linija bi značila pomakni moviclip "imeMovieClipa" na x kordinatu 100 za dvije sekunde.
Ajmo napravit nekoliko animacija da dobijete uvid kako to funkcionira.
Prvo moramo imati nešto za animaciju pa ćemo nacrtati jedan crni krug na stagu i pretvoriti ga u movieclip i dat mu instance name "krug_mc". Napravite novi layer nazovite ga actions, zaključajte, označite prvi frame i otvorite actionspanel.
Pomicanje movieclipa po x osi za dvije sekunde
import caurina.transitions.Tweener; Tweener.addTween(krug_mc,{x:260, time:2});
Sad ćemo ubacit par dodatnih parametara. Mjenjat ćemo x i y kordinatu u dvije sekunde al ćemo staviti zadršku od sekunde na početku.
import caurina.transitions.Tweener; Tweener.addTween(krug_mc,{x:260, y:260, time:2, delay:1});
S transitions parametrom možemo utjecat na easing animacije.
import caurina.transitions.Tweener; Tweener.addTween(krug_mc,{x:260, y:260, time:2, delay:1, transition:"easeInOutExpo"});
Kad animacija završi možemo odmah pokrenuti sljedeću animaciju ili neki događaj s parametrom onComplete. Mi ćemo napravit da krug nestane.
import caurina.transitions.Tweener; Tweener.addTween(krug_mc,{x:260,y:260,time:1,delay:1,transition:"easeInOutExpo", onComplete:funkcijaNakonStaJeAnimacijaZavršila}); function funkcijaNakonStaJeAnimacijaZavršila():void { Tweener.addTween(krug_mc,{alpha:0,time:1}); }
Tweener ima is specijalne propertise s kojima možete dodatno produžit listu propertia koje animirate, pa ajmo pogledat neke od njih
Prvo ćemo promijeniti boju, al za to tebamo importirati još jednu klasu i pokrenut ju.
import caurina.transitions.Tweener; import caurina.transitions.properties.ColorShortcuts; ColorShortcuts.init(); Tweener.addTween(krug_mc,{_color:0xff0000,time:2,delay:1});
Zatim ćemo iskoristit CurveModifiers da bi korsitili bezier curve. Kad radimo bazier onda moramo dodati control pointove pomoću kojih određujemo točke prema kojma će se napraviti bezier curve.
import caurina.transitions.Tweener; import caurina.transitions.properties.CurveModifiers; CurveModifiers.init(); Tweener.addTween(krug_mc,{x:260,y:260,_bezier:{x:-50,y:200},time:5,delay:1});
Listu svih specijalnih propertisa, parametara i transitionsa možete pogledati u Tweenerovoj dokumentaciji.
Pozdrav
Luka
Odlični tutorijali, dali si zainteresiran za suradnju?
Naravno da jesam. Jedino se nemogu obvezat jer koliko vidiš već duže vrijeme nisam napiso ništa na blogu a puno stvari se događalo u međuvremenu. Morat ću to promijenit