Flash Tutorijali

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});

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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});

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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"});

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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});
}

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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});

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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});

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Listu svih specijalnih propertisa, parametara i transitionsa možete pogledati u  Tweenerovoj dokumentaciji.

Source fajl

Pozdrav
Luka

Social Bookmarks