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.
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:
1
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
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.
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.
Prije dva dana Adobe je izbacio Flash player 10 Betu 2 u kojoj su rješili neke bugove i dodali neke stvari od kojih mi je najdraža unloadAndStop() metoda jer je riješen veliki bug u iz flash playera 9. Kada se unloadaju swf-ovi ili se brišu movie display objekti dosad su ostajali u garbage-u i nakon nekog vremena su zagušili flash, a najgore je to što se nisu ni eventi gasili, pa je znao nastati metež. UnloadAndStop će se ponašati ko unload u actionscriptu 2.0.
Evo citat s Adobe Labs-a: unloadAndStop — This new ActionScript 3.0 API adds unload functionality similar to the unload behavior in ActionScript 2.0. After calling unloadAndStop on loaded content it will be immediately removed stopping all audio, removing eventListeners, and becoming inaccessible through ActionScript.
Posted by hamferus on July 1, 2008 under Novosti, SEO
Danas je Adobe objavio da je dao posebno napravljen flash player Google-u i Yahoo-u da bi njihovi search engini mogli bolje indeksirati swf fajlove na webu. Kad spider dođe na vašu flash stranicu ili aplikaciju on će se ponašati ko korsinik. Klikat će gumbe, vuć podatke iz baze, ali ako učitavate drugi swf ili učitavate xml fajl Google će zasad te fajlove indeksirati odvojeno i trenutačno ih neće smatrati dijelom sadržaja vaše stranice ili aplikacije. Poboljšanje je tu, sad se treba pričekat da se i ovaj problem s učitavanjem fajlova riješi, pa će svima bit puno lakše.
Prošlo je dosta vremena od mojeg zadnjeg posta, pa ću se probati sijetit svega šta se dogodilo u to vrijeme, pa ako nešto izostavim u sljedećim postovima ću sigurno spomenut.
Adobe Flash Player 10 beta a.k.a. ASTRO
Naravno Astro je u beti i može ga skinuti na stranicama Adobe Labs-a. U Astro je dodan nativni 3d sustav, pa će se moći kreirati jednostavniji 3d geometrijski likovi, ali ovaj dio će poboljšati postojeće 3d engine za flash( Away3D i Papervision3D, itd.). Poboljšan je file reference, text engine, sound engine, za animaciju moći će se koristiti filteri koji su napravljeni u Pixel Bendet Toolkit-u, prebačeni su neki vizualni procesi na grafičku karticu što znači bolju reprodukciju aplikacija i videa. Za one koji će se odmah baciti na testiranje Adobe je omogućio skidanje AS dokumentacije za Flash player 10 i nekoliko zanimljivih videa među kojima Justin Everett-Church predstavlja novosti u Flash Playeru 10, nekoliko tutoriala od Lee Brimelowa i PixelBender demo za koji je potreban instaliran Flash Player 10.
Adobe AIR 1.1
Oni koji su imali instaliran Adobe AIR 1.0 verziju automatski update je napravio sve umjesto vas, dok oni koji još nemaju instaliran AIR runtime. Verziju 1.1 mogu skinut OVDJE.
Flash Develop 3 beta
Ovo je besplatni AS 2.0 i AS 3.0 editor i zadnja verzija je beta7. Malo sam ga isprobo jer nisam imo previše vremena, al ovo nije program za početnike jer se sve piše s object oriented programing-om(OOP) tj. u klasama. Sve informacije o programu i instalaciju možete naći na www.flashdevelop.org.
Learning ActionScript 3.0: A Beginner's Guide
Izašla je O'Reilly-eva knjiga koja je namijenjena actionscript3.0 početnicima, ali i onima koji nemaju pojma o programiranju. Naravno i oni iskusniji će moći nešto saznati iz nje.
Nakon više mjeseci čekanja napokon su iz bete izašli Adobe AIR 1.0 i Adobe Flex Builder 3. Već imam nekoliko ideja za AIR desktop aplikacije i čim se nađe vremena napravit će se neka od njih.
Više možete možete pročitat na Adobeovim stranicama.
Posted by hamferus on February 4, 2008 under General, Novosti
Napokon je krenula u rad stranica Zagreb Flex User Group-a
Zagreb Flex korisničku grupu osnovao je g.Tomislav Pokrajčić s idejom da okupi developere koji se bave Flexom i Flashom, a ovaj site je središnje mjesto za pristup informacijama o događanjima vezanim uz grupu, kontaktima i online komunikaciju.
Zagreb Flex User Group je član Flex community-a o kojem više možete saznati na www.flex.org .
Ako radite s flash-om ili flex-om dođite i upoznajte ostale actionscript-ere.
Evo danas sam gledao ovaj tutorijal i shvatio sam da prva slika koja je pokazana nije "image001.jpg" nego je "image002.jpg", tj druga slika iz xml fajla.
Evo rješenja kako da se prvo pokaže "image001.jpg"
Jedino šta moramo promijenit je adresu do slike unutar initSlidshow() funkcije, tj. promijenit URLRequest
Promijenite ovu linju koda:
25
imageRequest = new URLRequest(urlArray[currentImage]);
Odlična vijest za sve koji se bave izradom web-a u Adobe Flash-u i Flex-u koristeći actionscript 3.0. Nedavno je izašao Adobeov kavrtalni izvještaj za Prosinac 2007. I podatak da je na 95.7 % kompjutera instaliran Flash Player 9 je stvarno impresivna. Podaci za Europu samo uključuju V. Britaniju, Njemačku i Francusku pa je tu postotak i najmanji 94.3%, Sjeverna Amerika ima 96.8%, a Japan 95.3%.
U današnjem actionscript tutorijalu napraviti ćemo slideshow koji će učitati eksterne slike, a adresa do slika bit će pohranjena u xml-u. Ja ću koristit četiri slike.
1. Napravite folder u kojem ćemo snimit xml, flash dokument i u kojem će se nalazit naše slike
2. Kreirajte xml dokument u bilo kojem text editoru(notepad, notepad ++ ,itd.)
Otvorite svoj text editor i kopirajte ovaj kod i snimite fajl pod imenom "xmlSLideshow.xml":
slideshow je rootNode u xml-u
slika je childNode u xml-u
adresa je atribut unutar slika childNode-a
3. Nađite 4 slike i stavite ih u isti folder s xml-om, promijenite imena slika u adresa atributu da budu isti kao i imena vaših slika.
4. Otvorite Adobe Flash CS3 i kreirajte novi Flash dokument(actionscript3.0) i snimite ga u folder s xml-om i slikama.
5. Zaključajte prvi layer i preimenujte ga u actions
6. Kliknite na prvi frame actions layera i otvorite actions panel(F9)
7. Krenite kodirat
Prvo moramo deklarirati dvije variable currentImage i urlArray. CurrentImage je broj koji ćemo povećavat kad se pokrene tajmer i on će određivat koja slika se učitava, a početna vrijednost mu je 0. UrlArray je array koji će bit popunjen s adresama do slika unutar for loopa kad se xml učita.
1
2
var currentImage:Number = 0;
var urlArray:Array = newArray();
Sad moramo definirati XML, URLRequest(adresa do xml fajla) i URLLoader variablu koja ima jedan agument(URLRequest,tj. adresu do xml fjla). Kod server-side skripti i xml-a koristi se URLLoader, a ne Loader kao kod eksternih fajlova. Nakon što smo definirali te tri variable xmlLoaderu moramo dodati eventListener koji osluškuje kad je naš xml učitan. Ako imate veliki xml fajl proces učitavanja je isti kao kod externih fajlova.
3
4
5
6
var myXML:XML = newXML();
var xmlRequest:URLRequest = new URLRequest("xmlSlideshow.xml");
var xmlLoader:URLLoader = new URLLoader(xmlRequest);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
Unutar xmlLoaded funkcije prvo moramo popuniti xml variablu koju smo definirali izvan funkcije s podacima koje smo dobili nakon što je xml učitan. Nakon toga pokrećemo for loop. U for loopu provjeravamo koliko ima childNode-ova s imenom "slika" i ovisno o tome povećavamo broj "i", a svaki put kad povećamo broj "i" popunimo urlArray s podatkom iz "adresa" atributa u "slika" childNode-u. Nakon što smo popunili urlArray i završili s for loop-om pokrećemo funkciju initSlideshow() koja pokreće naš slideshow.
function xmlLoaded(e:Event):void
{
myXML = XML(e.target.data);
for(var i:uint = 0; i<myXML.slika.length();i++)
{
urlArray.push(myXML.slika[i].@adresa);
}
initSlideshow();
}
Prije nego napišemo initSlideshow() funkciju moramo definirati Loader i URLRequest pomoću kojih ćemo učitati slike, pozicionirati Loader na sredinu animacije i dodati Loader na display listu. Za razliku od tutorijala u kojem sam vam pokazao kako učitati sliku ovdje ćemo ostavit URLRequest prazan jer ćemo adresu definirati unutar initSlideshow() funkcije.
18
19
20
21
22
var imageLoader:Loader = new Loader();
var imageRequest:URLRequest = new URLRequest();
imageLoader.x = stage.stageWidth/2 - 200;
imageLoader.y = stage.stageHeight/2 - 150;
addChild(imageLoader);
Unutar initSlidshow() funkcije prvo moramo URLRequest-u dodati adresu do prve slike. Adresa se nalazi u urlArrayu na prvoj poziciji. U array-ima prva pozicija je nulta(0) pozicija i zato smo currentImage broj postavili na nula kad smo ga definirali na početku skripte. Nakon toga učitamo sliku pomoći Loader-ove load() funkcije koja ima jedan argument(URLRequest). Slike ćemo mjenjat pomoću tajmera i svaki put kad se tajmer pokrene(svakih 5 sekundi) pozvat ćemo changeImage() funkciju.
23
24
25
26
27
28
29
30
function initSlideshow():void{
imageRequest = new URLRequest(urlArray[currentImage]);
imageLoader.load(imageRequest);
var mT:Timer = new Timer(5000);
mT.start();
mT.addEventListener(TimerEvent.TIMER, changeImage);
}
Svaki put kad pozovemo changeImage() funkciju(svakih 5 sekundi) povećavamo currentImage broj. Pomoću if statmenta provjerit ćemo dal je currentImage broj veći od ukupnog broja childNode-a. Pošto imamo 4 childNoda ali prvi je nula(0) onda ih ima 0,1,2 i 3 tako da ako currentImage isti kao broj 4 mi moramo resetirat currentImage broj na 0. Tako smo dobili slideshow koji ide u krug. Da bi se slika promijenila moramo promijenit URLRequest argument(adresu) i pokrenuti load() funkciju s novom adresom.
31
32
33
34
35
36
37
38
39
40
function changeImage(e:TimerEvent):void{
currentImage++;
if(currentImage == 4){
currentImage = 0;
}
imageRequest = new URLRequest(urlArray[currentImage]);
imageLoader.load(imageRequest);
}
Imam nekih problema s pokazivanjem koda u dijelu gdje se nalazi for loop, pa vas molim da downloadate source fajlove da vidite kako bi trebao izgledat kod u tom djelu.
Pozdrav do sljedećeg tutorijala.
Vidim ima nestrpljivih, pa evo još jednog tutorijala. U ovom tutorijalu bum vam pokazal kako učitati eksterne fajlove u flash s actionscriptom. Ovo šta bum vam pokazal vrijedi za tipove fajlova .swf, .jpg, .png i .gif format. U actionscriptu 2.0 obično se koristio MovieClipLoder kojeg sad više nema u actionscriptu 3.0. U actionscriptu 3.0 koristimo Loader i URLRequest Class.
1. Otvorite novi Adobe Flash CS3 dokument(actionscript3.0)
2. Snimite taj fajl u folder po vašoj želji
3. Nađite sliku koja ima težinu(500kb - 1mb) i kopirajte ju u folder gdje ste snimili Flash dokument. Slika koju ja koristim je teška 2 magebajta
4. U Flashu zaključajte i preimenujte prvi layer u actions
5. Kliknite na prvi frame actions layera i otvorite actions panel(F9)
6. Počmite kodirat
Prvo tebamo definirati URLRequest variablu koja ima jedan argument, a on je adresa do fajla koji učitavamo. Vi promijenite "slika.jpg" u ime vaše slike.
1
var imageRequest:URLRequest = new URLRequest("slika.jpg");
Sad moramo definirati Loader varijablu. Ono kaj je učitano u loader dodaje se automatski na njegovu display listu.
2
var imageLoader:Loader = new Loader();
Još moramo pokrenuti učitavanje s load() metodom koja ima jedan argument a on je URLRequest.
3
imageLoader.load(imageRequest);
Na kraju moramo dodati Loader na display listu.
4
addChild(imageLoader);
Testirajte film(Ctrl+Enter) i trebali bi vidjeti sliku koju ste odabrali.
Kako vidite uopće nije teško učitati fajl u flash, ali mi tu ne stajemo jer ćemo sad napravit i pred učitavač(koje glupo ime al neznam drukčije) koji će nam pokazati postatak učitanog fajla.
Prvo bumo iskoristili tutorijal o TextField-u da pokažemo taj postotak loadanog fajla. Tekstualno polje bumo napravili izvan funkcije, a unutar ćemo mu dodjeliti jednadžbu za izračunavanje učitanog postotka.
Uz Loader Class za progres učitavanja bumo koristili LoaderInfo Class jer u njemu se nalazi informacija o loadanom fajlu(veličina fajla(kb), širina, visina,itd.) i s njim možemo možemo pratit progres učitavanja. LoaderInfo netreba bit dodan ko variabla.
Do podataka možemo doć na dva načina:
1. loaderInfo - osobine učitanog fajla
2. contentLoaderInfo - osobine učitavanja fajla
Mi bumo koristili contentLoaderInfo jer iz njega možemo saznat kad je učitavanje završilo i informacije o pregresu učitavanja.
Sad moramo dodati dva eventListenera, a to su ProgressEvent.PROGRESS koji je aktiviran za vrijeme samog učitavanja i Event.COMPLETE koji na daje informaciju da je fajl učitan.
Sad ćemo napisat funkciju koja se poziva tokom progresa učitavanja i iskoristit ćemo ukupni broj bajtova i broj učitanih fajlova iz contentLoaderInfo-a(target) da dobijemo učitani postotak fajla. Jednadžba koju ćemo koristit glasi:
broj učitanih bajtova podjeljen s ukupnim brojem bajtova pomnožen s 100 da dobijemo postotak
ucitaniBajtovi/totalniBajtovi * 100
Ali pošto taj broj ima decimale, a mi ih netrebamo zaokružit ćemo taj broj na cijeli broj s Math.round() funkcijom. Unutar funkcije definitat ćemo tri variable:
1. ucitaniBajtovi - broj
2. totalniBajtov - broj
3. postotakUcitanog - broj koji ćemo dobit izračunavanjem jednadžbe za dobivanje postotka učitanog
Pa ćemo postotakUcitanog dodati tekstualnom polju koje smo napravili maloprije i dodat ću simbol
postotka(%) tako da u tekstualnom polju imamo: broj + %
11
12
13
14
15
16
17
function loadingProgress(e:ProgressEvent):void{var ucitaniBajtovi:Number = e.target.bytesLoaded;
var totalniBajtovi:Number = e.target.bytesTotal;
var postotakUcitanog:Number = Math.round(ucitaniBajtovi/totalniBajtovi * 100);
tekstUcitanog.text = postotakUcitanog + "%";
}
Konačno imamo funkciju koja će nam reć da je učitavanje gotovo. Pošto je moja slika od 10 megapiksela ja ću ju smanjit na 10% njezine veličine nakon šta se učita.
18
19
20
21
22
function loadComlpete(e:Event):void{
imageLoader.scaleX = 0.1;
imageLoader.scaleY = 0.1;
}
Sad testirajte svoj film i u prozoru koji vam se otvorio(filmić) Kliknite VIEW/SIMULATE DOWNLOAD da bi vidjeli kako učitani postatak raste od 0 do 100, tu imate još jednu opciju a ona je DOWNLOAD SETTINGS gdje se možete igrati s brzinom kojiom će Flash loadati fajl. Ako ovo ne napravite nebute vidjeli proces učitavanja.
