Flash

Uvod iliti što je to Flash?

Flash je program za izradu vektorske grafike i animacija. Vektorska grafika znači da su predmeti na slici matematički definirani, i koliko god mi sliku povećavali, slika se neće zamutiti. Vektorska grafika omogućava izradu oštrih slika koje zauzimaju malo memorije. No, da bi vaš browser mogao 'pročitati' taj vektorski crtež ili cijeli crtić u Flash-u, potreba je Flash player (plug-in). Flash player je besplatan, malih dimenzija i vrlo brzo se može skinuti s http://www.macromedia.com/. Neki noviji browser-i se distribuiraju zajedno s Flash player-om.

Animacija se bazira na slaganju brojnih motiva; od sličica pa do cijelih stranica, u slojeve (layers). Kako je animacija ovisna o vremenu, odnosno promjenama položaja i oblika u jedinici vremena, tu je i timetable (vremenska ploča), u kojoj se definiraju pojedine akcije koje se u određenom trenutku dešavaju u određenom sloju (layer).

Produkti Flash-a. Tijekom izrade animacije, Flash file-ovi se pohranjuju kao FLA (FLash Authoring) file. FLA file-ovi su radne verzije koje se mogu mijenjati, nadograđivati… Kada smo zadovoljni s Flash uratkom, eksportiramo ga u SWF oblik Shock Wave Flash) – format koji se na web-u može promatrati uz pomoć Flash player-a. Crtić u SWF oblik pohranjujemo tako da odemo u File>Publish(Shift +F12) ili File>Export.

Flash pruža mogućnosti pohrane i u drugim oblicima; JPG, GIF, SWT, Quick Time Movie, Real Player Movie. Dakako, pri pohranjivanju u druge oblike mogu se izgubiti neka važna svojstva Flasha. Npr. JPG sličica nikako ne može biti animirana…

Upotreba Flash-a u izradi web sjedišta. Flash-ove crtiće možemo potpuno analogno kao i statičnu sličicu ili animirani GIF uklopiti u našu HTML stranicu. Flash-ovu stranicu možemo koristiti u kombinaciji s HTML stranicama unutar jednog frameset-a. To je dovoljno samo za početak, jer Flash omogućava izradu i znatno naprednijih web aplikacije uz pomoć skripti, formulara (form), interakcijama sa serverom...

Iako vektorska grafika i animacije pružaju obilje mogućnosti, valja navesti situacije u kojime Flash nije uputni koristiti:

Ø Ukoliko nam je bitna brza i jednostavna informacija koja se sastoji od teksta i nekoliko sličica. Flash stranice su većeg formata no klasične HTML stranice. Samim time za njihovo učitavanje je potrebno znatno više vremena. Nadalje, statični tekst u Flashu se prikazuje u JPG kvaliteti – samim time je mutniji no u klasičnoj HTML stranici.

Ø Ukoliko želimo napraviti 3-D animaciju. Flash je blizu, ali još nije toliko stasao. 3-D animacije u Flashu možemo očekivati u sljedećem broju…

Uvod i upoznavanje s alatima, sučeljem

Jedno od bitnjih poboljšanja Flash MX u odnosu na Flash 5 je skladnje sučelje (Users Interface). No da se upoznamo s sučeljem:

Na sučelju možemo razlučiti:

Toolbox – prozor s alatima za crtanje, pisanje i obradu slike i teksta

Glavni meni – jedni meni koji se ne može isključiti. Sadrži :File, Edit Wiev…

Standardni toolbar (alatni traku). Pali/gasi se Window>Toolbars>Main

Status toolbar – zgodan je za 'početnike' jer pokazuje što radi tipka na koju smo mišem došli

Controller toolbar je dobar za pregledavanje animacije

Stage odnosno pozornica je površina gdje se cijela radnja zbiva.

Property inspector. Novost u Flash MX-u je property inspector koji se otvara u skladu s odabranim segmentom. To će se posebno svidjeti korisnicima koji su vični radu s Dreamweaver-om jer Dreamweaver već duže vrijeme ima tu mogućnost.

Timeline (vremenska traka) – njome definiramo što, gdje i KADA

Color mixer, Components, Color Swatches, Align, Scene, Transform, Info, Answers i druge alatke koje se prema želji otvaraju na desnoj strani ekrana.

Toolbox odnosno okvir s alatima sadrži alate za crtanje i veći broj alata za uređivanje slike i teksta. Većina alatki ima modifikacije koje se otvaraju u Options okviru (na dnu Toolbox-a)
		Arrow (select alat) ima za cilj označavanje pojedinih segmenata i izvođenje 'grubljih' operacija. Unutar opcija za Arrow imamo 'magnet' – alatku koja nam omogućuje fino spajanje rubova linija. To nam je pogotovo bitno kada radimo polja koje trebaju biti ispunjena nekom bojom (Paint Bucket). Uz magnet, tu su i dvije opcije koje nam se nude tek kada smo selektirali objekt. To su izrada mekših ili oštrijih linija.
Subselect alat je srodan s Arrow alatom, ali je namijenjen 'finijim' operacijama. Npr. njime možemo pomicati objekte.
Line – linija je namijenjena crtanju ravnih linija. Boja debljina i tekstura linije se definiraju u property inspector-u. Te linije se naknadno mogu zakriviti uz pomoć Arrow alata, a cijeli objekti koji koje linije ocrtavaju se mogu pomicati uz pomoć Subselection alata.
Laso je alat kojim ćemo, neravnom crtom-krugom definirati određeno područje/segment slike, kako bi ga odvojili odnosno izbrisali. Kaza odaberemo laso, javljaju nam se opcije: - omotaj (definiraj) određeno područja koristeći 'čarobni štapić' - definiraj osobine čarobnog štapića (magic wand) - napravi laso crtajući ravne linije
Pen – tehnička olovka. Pomoću nje crtamo linije tako što im postavljamo krajnje točke. Kasnije te linije ili cijele oblike možemo modificirati uz pomoć Arrow alatke, ili cijeli objekt možemo pomicati uz pomoć Subselection alatke. Text alatka nam omogućava unos teksta. Osobine teksta ćemo modificirati uz pomoć Property inspector-a.
	Oval i rectangle alati. Njima unosimo ovalne i četverokutni oblici. Ukoliko prilikom unosa Oval-nog oblika pritisnemo shift, tada će on biti pravilan krug. Naprotiv, ukoliko ne pritisnemo shift, moći ćemo definirati elipsu ili neki drugi ovalni oblik. Crtanje sa oval i rectangle alatima. Nakon što se klikne ne željenu alatku (krug ili kvadrat), isti oblici se mogu ucrtati na scenu. Ukoliko žalimo pravilan kvadrat ili pravilan krug, prilikom povlačenja ćemo držati pritisnutim i Shift. Ukoliko, naprotiv, žalimo elipsu ili pravokutnik nejednakih stranica tipku Shift nećemo koristiti. Nakon što smo ucrtali žaljeni oblik, možemo ga doraditi pomoću Arrow i subselection alatke. Boju ispune i ruba, te teksturu i debljinu ruba možemo definirati prije, ali i poslije ucrtavanja samog elementa. Kao opcija prilikom crtanja kvadrata je ponuđena alatka kojim se zaobljuju kutovi (Corner radius za X points)
			Free Transform alatka nam omogućava mijenjanje oblika tako da mijenjamo pojedine njegove rubove ili da mijenjamo površinu (četverokut) unutar koje je oblik smješten. Samim time mijenjamo proporcija oblika. Za to nam se nude 4 opcije: 1. Rotacija 2. Proporcionalno mijenjanje dimenzija 3. Modificiranje oblika, ali tako da ne krivimo linije okvira 4. Modificiranje oblika tako da krivimo linije okvira.
Promjene boja ispuna i ruba (strole i fill color) su alatke kojima određujemo boju ruba i boju ispune objekta. Boju objekta možemo i naknadno mijenjati s alatkom Paint Bucket Za baratanje bojama su bitne opcije:. Prvim gumbom definiramo boje u skladu s predloškom. Srednji gumb označava da nema boje (prozirno), a posljednji, desni gumb vrši zamjenu boje ispune i boje ruba.
Pencil alatka odnosno olovka u svojim opcijama (podmeniju) ima mogućnosti: Ø Straighten – ravne crte. Ta opcija omogućava izravnavanje crta koje unosimo mišem. To nam olakšava dobivanje ravnih crta. Ø Smooth naredbom ćemo dobiti pravilne krivine Ø Ink naredba znači da nema korekcije crta; niti izravnavanje, niti zakrivljivanja. Boju, debljinu i teksturu linije definiramo u Property inspector-u
				Brush alatka u svojem podmeniju ima 3 opcije kojima definiramo: Gdje bajamo; možemo bojati preko cijele slike, samo unutar, odnosno izvan određenih polja, možemo bojati tako da se linije preko kojih prelazimo vide, odnosno ne vide… Debljina linije Oblik linije, odnosno kista kojim bojamo
Ink bottle (bočica tinte) služi za mijenjanje boje debljine i teksture rubovi.
Paint bucket, odnosno kantica s bojom služi za ispunjavanje površina s bojom. U opciji je mogućnost zatvaranja 'rupe' na objektu. Ukoliko objekt ima jedan otvor s kojim površina objekta komunicira s okolinom, ovom opcijom ćemo to 'zatvoriti'.
					Za mijenjanje boja linija i ispuna služi paleta koju dobijemo kada kliknemo na prozorčić s bojom. Boju možemo unijeti kao broj, možemo ju izabrati s paleta ili možemo kliknuti na šareni krug u desnom gornjem kutu kako bi u paleti definirali novu boju. U Color Mixer-u možemo pomiješati više boje; i to može biti linearno (kao na slici) ili radijalno. Ukoliko želimo samo jednu boju, u Color Mixeru ćemo odabrati None ili Solid opciju. Za dodavanje boja u traku nijansi (gradijent bar) potrebno je kliknuti na željenom mjestu i kućica s bojom će se pojaviti. Svaku kućicu možemo pomicati, mijenjati joj boju ili ju izbrisati (samo se 'iščupa')
Dropper alat nam je bitan jer njime određujemo boju pojedinog područja, a s ciljem usklađivanje boja ili bojenja neke druge plohe s istom bojom

Eraser alat – gumica za brisanje ima opcije kojima birano mod, oblik ili Faucet komandu. Faucet komandom brišemo cijelo područje u koje 'ulijemo' brisanje.

Oblici gumice za brisanje – Eraser shape

Erase mode:

Erase normal – briše sve

Erase fills – briše ispunu

Erase Lines – briše samo linije

Erase selected Fills – briše samo odabranu ispunu

Erase inside.- briše sve unutar određenog objekta. Naravno, linije ne dira.

PODEŠAVANJE RADNOG PROSTORA; rad sa panelima i njihova upotreba

Standardni toolbar (alatni traku). Pali/gasi se Window>Toolbars>Main

Status toolbar – zgodan je za 'početnike' jer pokazuje što radi tipka na koju smo mišem došli

Controller toolbar je dobar za pregledavanje animacije

Stage (pozornica) ja područje unutar kojeg se odvija radnja. Na pozornici se može definirati više scena u nizu. A unutar svake scene nalazi se više layer-a (slojeva) sa svojim elementima. Kako bi modificirali biramo Modify> Layer/Scene/Document, ovisno o tome što želimo modificirati. Želimo li modificirati pozornicu, odabrat ćemo Modify>Document ili Ctrl+J i otvorit će nam se Document Properties prozor u kojem možemo definirati:

Dimenzije, i to u odnosu na printer, sadržaj ili po izboru

Pozadinsku boju scene

Frekvenciju izmjene frame-ova (okvira), i to u jedinici fps (frames per second)

Jedinice u kojima dimenzije izražavamo. S obzirom da se sve prikazuje na monitoru, optimalno je izabrati Pixel-e.

I dakako, ukoliko nešto zapne, uvijek možemo pozvati U POMOĆ (F1).

Promjena oblika (modificiranje shepe-ova). Nakon što smo odabrali objekt biramo Midify>Shape. Nudi nam se:

Convert Lines to Fills – time odabranu liniju pridodajemo površini. Time se postiže povećanje površine.

Expand Fill – površina se povećava

Soften Fill Edges

Animacija

Dosta crtanja, vrijeme je da se krene! No, tko, kamo i kada?

Da bi mogli odrediti što, kada i gdje na pozornici se zbiva definirani su slojevi (layers) u koje se postavljaju motivi (sličice, movie clip-ovi, gumbi). Layer-e možemo shvatiti kao skupinu prozirnih paralelnih ploha koje se nalaze između nas i pozornice. Unutar svakog sloja postavimo po jedan objekt i definiramo određene radnje u određenom vremenu. Bitno je da svaki objekt ima svoj layer jer se u jednom sloju mogu definirati radnje za samo jedan objekt. Slojevi mogu sadržavati i vodilice za kretanje objekta. To su onda Guide-ovi (vodilice) – skriveni slojevi. Svi layer-i su poslagani u Timeline (vremenski slijed).

Najgornji layer je najbliži nama. Dakle objekt u njemu će zakloniti objekt iza njega ukoliko se nađu u istoj točki. Poredak layer-a možemo mijenjati tako da pojedini layer jednostavno primimo i povučemo na novo mjesto.

Da bi se otvorio novi layer potrebno je kliknuti na ili otići na Insert>Layer. Želimo li napraviti layer – guide u kojem će biti vodilica za predmet koji animiramo potrebno je kliknuti na: . Treća mogućnost je da izaberemo , čime ćemo otvoriti novi folder. Ukoliko nam se layer ne sviđa, jednostavni ga ubacimo .

Za svaki layer možemo definirati 3 stanja pritiskom na gumbe . Tome određujemo:

Vidljivost/nevidljivost. Ukoliko imamo veći broj layer-a i pri tome žalimo promijeniti neki layer u pozadini, uputno je isključiti layer-e koji nam ga zaklanjaju. To se postiže klikom na oko.

Zaključavanje/otključavanje. Zaključati layer je uputno kada ne radimo na njemu. Naime, slučajno možemo napraviti promjene u krivom sloju…

Obrisi (outlines) komanda nam omogućava da vidimo samo obrise objekta u layer-u.

Kako se svaka animacije sastoji od većeg broja slojeva unutar kojih se zbivaju određene radnje, uputno je layerima davati jasna imena. To se postiže tako da se napravi dvoklik na imenu i unese se novo ime.

Svojstva pojedinog layer-a možemo namještati tako da kliknemo Modify>Layer i otvorimo Layer Properities okvir.

Objekti koje postavimo u pojedini sloj se kreču između dvije ključne točke (keyframe).

Upoznavanje s simbolima, vrste, ograničenja

Simboli su grafički objekti spremni za upotrebu. Po svom behavior-u (ponašanju) mogu biti gumb (button), Movie Clip i grafika. Izbornik za simbole dobivamo Insert>New Symbol ili Ctrl+F8. Nakon što smo odabrali koji simbol želimo kliknemo na OK i otvara nam se prozor za izradu simbola. Taj prozor moramo razlikovati od Scene.

Uz to postoji i mogućnost da selektiramo već postojeći objekt i pomoću Insert>Convert to Symbol ili komande F8 ga prebacimo u simbole.

Gotovi simboli se spremaju u knjižnicu – Lybrary. Lybrary otvaramo Windov>Lybrary ili s F11.

Imena simbola mijenjamo dvoklikom na ime i upišemo novo.

Simbole na scenu jednostavno dovučemo iz Knjižnice, a ukoliko želimo uređivati simbol, dvoklikom na simbol otvorit ćemo prozora za uređivanje simbola.

Popravljanje i mijenjanje gotovih simbola (rad unutar simbola na sceni)

Velika prednost simbola je u dobrom i lakom nadzoru primjeraka. Kada uređujete simbol, Flash će ažurirati sve primjerke istog simbola u filmu. Stoga je praktično tvoriti simbole uvijek kada tvorite lik ili skupinu likova koje planirate koristiti više puta.

Simboli se mogu uređivati na tri načina:

1. Edit in symbol-editing mode; način rada za uređivanje simbola – samo možete vidjeti simbol.

2. Edit in place; možete uređivati samo simbol. Svi ostali objekti na pozornici su prikazani, ali su zamagljeni i na možete ih uređivati.

3. Edit in new window; otvara vam se novi prozor u kojem možete vidjeti i uređivati samo simbol.

Prednost uređivanja na mjestu (edit in place) leži u tome da vidite interakcije promjene oblika i pozornice.

Za uređivanje simbola potrebno je:

1. Označiti i desno kliknuti na simbol na Pozornici.

2. Odabrati opciju koju želimo (Edit…)

3. Uredimo simbol

4. Kako bi se vratili na scenu iz opcija Editi in place i Edit potrebno je kliknuti na ime scene. To je lijevo od imena simbola; u gornjem lijevom kutu (kao na slici)

Na slici ja zaokruženo ime scena (vrlo originalno ime). S lijeve strane je back button a s desne strane je ime simbola.

Iz prozora simbola na scenu je moguće otići i putem gumbića koji je smješten u gornjem desnom kutu prozora scene. Klikom će se otvoriti mogućnost Edit scene - klik i to je to.

Simbole ja na uređivanje moguće pozvati i iz Library; dvoklikom ili desni klik pa izabrati Edit. U tom slučaju je moguća samo varijanta Edit in symbol-editing mode.

Umetanje simbola na scenu

1. Otvorite prozor Library; Wincow>Library ili F11

2. Odabereite sloj u koji želimo smjestiti simbol

3. Kliknite na Key frame u Timeline-u (ključni okvir u vremenskom slijedu) u koji želite postaviti simbol.

4. S lijevim klikom uhvatimo željeni simbol i odvučemo ga na pozornicu.

Mijenjanje behavior-a (navika, svojstava) simbola

U Library kliknite desnim klikom na žaljeni simboli i odaberite željeni behavior; Movie clip, Button ili Graphic

Motion tween

Motion tween ili Motion between označava kretanje između dvije točke.

Izrada motion tweena

Motion tween zahtjeva najmanje dvije ključne točke (Keyframe) u koje je potrebno smjestiti simbol. Potom je potrebno definirati koje se promjene (položaja, oblika, veličine, boje, rotiranja) i na koji način zbivaju tijekom kretanja između te dvije točke. Postupak ide:

Definiraj prvu ključnu točku; desni klik u željenom okviru u vremenskom slijedu (Timeline-u).

U prvu ključnu točku ubaci željeni simbol (uvuci ga iz Library). Prazna ključna točka je označena kao prazan kružić. Ključna točka koja sadrži simbol je označena kao crni kružić.

Definiraj drugu ključnu točku (u vremenskom slijedu se zbiva poslije prve)

Isti simbol ubaci i u drugu ključnu točku.

U prvom simbolu napravi desni klik i odaberi: Create Motion Tween

Kvadratić u vremenskom slijedu označava statiku.

Ukoliko u prvoj ključnoj točki Kreiramo Motion Tween, dobit ćemo ovakvu sliku:

U svakoj ključnoj točki se mogu definirati, položaj, oblik, veličina, boja i rotiranje simbola. Na osnovu toga, Flash će nam odrediti zbivanje s simbolom u vremenskom slijedu između te dvije ključne točke.

Zadatak: izrada paralelne animacije simbola (lopta i sjenka)

Rad sa scale i rotate alatima

Ukoliko prilikom uređivanja simbola na pozornici (Edit in place) odaberemo opciju Free Transform , moći ćemo mijenjati veličinu, dimenzije i oblik simbola. Uz to, moći ćemo ih i rotirati. Prilikom rotacije je važno pravilno postaviti točku oko koje je simbol rotira.

Zadatak: na prethodnu animaciju uz pomoć scale dodati prostorno «udaljavanje» i «približavanje» lopte

Properties

Pojedina svojstva je najlakše mijenjati u Property inspector-u:

Pri tome možemo izabrati koji oblik Tweena žalimo; motion ,shape, none?

Želimo li da se loptica postupno usporava prilikom odskoka, a prilikom doskoka da ubrzava, koristit ćemo Ease komandu.

Shape tween

Shape tween ili Shape between označava prijelazna oblike koje flash matematički proračunava kako bi jedan lik preveo u drugi. Kako se radio o matematički definiranim promjenama oblika, može se koristiti samo vektorska grafika.

Ovisno o inspiraciji autora, moguće je kombinirati promjenu oblika, veličine, mjesta položaja, boje…

Izrada Shape Tween Animacije

Za jednostavnu animaciju promjene oblika je potrebno:

1. U prazan okvir gdje žalite da animacija počne ubacite ključni okvir (Desni klik > Insert Keyfreme).

2. Nacrtajte početni oblik.

3. U drugi prazan okvir koji je u vremenskom slijedu smještan poslije prvog također ubacite ključni okvir.

4. Nacrtajte novi lik.

5. Vratite se u prvi ključno okvir i na padajućem izborniku Tween odaberite Shape.

6. U padajućem izborniku Blend izaberete Distributive ili Angular. I to je to.

Ukoliko niste zadovoljni načinom na koji je Flash definirao promjenu oblika možete mu dati naputke o obliku (Shape hints). Također, kao i kod kretanja simbola mogu se definirati među-faze, odnosno ključne točke u kojima je oblik kakav mi želimo.

* Kako biste od slova mogli napraviti Shape Tween, potrebno je da slova prevedete u znakove. To se postiže tako da dva pute stisne Ctrl + B ili se ode na Modify > Break Apart dva puta. Nakon prve naredbe, flash će tekst razlomiti na slova i razmake između, a tek nakon druge naredbe, Flash će od slova napraviti znakove.

Kako definirati Shape hints?

1. Izaberite prvi ključni okvir u tom Shape tween isječku

2. Izaberite; Modify > Shape > Add Shape Hint

3. Postavite Shape hints na željena mjesta

4. Odaberite drugi ključni okvir i u njemu pomaknite shape hints na željena mjesta.

5. Pogledajte film da vidite kako to izgleda, i ukoliko je potrebno, prepravite ili nadopunite.

Uočite boju Tween-a na slici. Zelena boja označava Shape Tween.

Dodavanje keyframeova u animaciju

Što su keyframeovi i čemu služe

Keyfrems ili ključni okviri su u vremenskom slijedu (timeline) definirane točke kojima u kojima se nalazi određeni simbol u određenom stanju. Ukoliko se između dva ključna okvira kreira Motion ili Shape Tween, flash će izračunati stanje i položaje simbola u okvirima između dva ključna.

Rad sa keyframeovima

Ključne okvire možemo kopirati, brisati, pomicati, dodavati, pretvarati u obične (vidi sliku)…

Kopiranje okvira. Okvire koji sadrža određeni sadržaj u određenom obliku možemo kopirati i zalijepiti (paste) na drugom mjestu ovim postupkom:

1. Odaberete jedan ili više okvira,

2. Označite ih i napravite desni klik

3. Odaberete Copy Fremes

4. Potom na željenom mjestu ponovite desni klik i

5. Odaberete paste Frames

Pomicanje okvira. Da bismo okvir pomaknuli moramo otići u layer u kojem je taj okvir smješten, kliknut nad tim okvirom i povući ga na novo mjesto. Kao na sličici:

Onion Skin

Onion Skin (ljuštenje luka) je pomočena alatka kojoj je svrha pomoći vam da si lakše predočite tijek animacije. Kako standardno na sceni vidite samo trenutno aktivan okvir, Onion skin je tu da vam pomogne da procijenite kakvo je stanje u okolnim okvirima – onion skin će vam prikazivati i sjenke stanje u okolnim okvirima.

Aktiviranje Onion skin-a; kliknite na gumb smješten na dnu vremenskog slijeda. Kako bi odredili koliko okvira želimo vidjeti, u Vremenskom slijedu se postave pokazivači (vidi sliku), pa vi možete odlučiti žalite li vidjeti sjenke/obrise 2, 10 ili 150 okvira.

Želite li vidjeti onion skin u obrisima, kliknite na Onion Skin Outlines

Želite li uređivati okvir smješten u nekom drugom dijelu vremenskog slijeda, odaberite Edit Multiple Fremes.

Kako bi lakše prilagodili Onion skin vašim potrebama, kliknite na Modify Onion Markers. Otvorit će vam se izbornik s 5 mogućnosti (kao na slici):

1. Uvijek pokazuj Onion skin.

2. Usidri Onion skin u njihovom trenutnom položaju.

3. Primjeni onion skin na 2 okvira prije i 2 poslije aktivnog okvira.

4. Primjeni onion skin na 5 okvira prije i 5 poslije aktivnog okvira.

5. Primjeni onion skin na sve okvire u vremenskom slijedu.

Zadatak: izrada raznih vježbi sa keyframeovima (motion tween , shape tween, statička pozadina kroz timeline – kombinacija elemenata)

Uloga simbola u animaciji, uloga layera, svojstva simbola

Uloga simbola u animaciji

Važnost simbola u flash animaciji se bazira na više svojstava simbola:

1. Tijekom animacije simboli mogu mijenjati svoj položaj, oblika, veličinu, boju, rotirati…

2. Isti simbol se može potpuno neovisno koristiti više puta na različitim dijelovima animacije.

3. Mijenjanjem početnog simbola, Flash će automatski urediti i sve ostale simbole-djecu.

4. Simbol može biti smješten unutar simbola…

Za uređivanje simbola koristi se Propertyes (Properitiy inspector)

Ø Alpha nam omogućava da odredimo prozirnost simbola (dijela simbola).

Ø Pomoću Brightness alatke određujemo 'sjaj' simbola.

Ø Tint nam omogućava promjenu boje simbola

Vježba 1: Izrada motion tweena sa promjenom svojstava simbola

Vježba 2: Kombinacija motion tween-a kroz upotrebu više layera

Vježba 3: Uloga layera u stvaranju osjećaja prostornosti

Vježba 4: Izrada animacije sa pozadinskom slikom , rad sa layerima

Motion Guide - Vodilica

Motion guide, odnosno vodilica je 'pomoćni' layer u koji se smješta putanja nekog simbola. Svaki layer može imati samo jedan Motion gude.

Novu vodilicu možemo izraditi tako da, nakon što smo odabrali layer kojem želimo dodati vodilicu kliknemo na .

Druga mogućnost je da na željenom layeru kliknemo desnim gumbom i odaberemo Add Motion Guide (kao na velikoj slici).

Nakon što smo izradili Motion guide, layer i njegov motion gude se malo uvuku kako bi se razlikovali od ostalih layera (kao na slici ispod za layer 93).

Izrada primjera sa raketom

1. Napravimo layer raketa,

2. U layer raketa ubacime o2 ključna okvira, simbol i napravim motion tween,

3. Layeru raketa dodamo Motion guide,

4. U Motion guide ucrtamo putanju (bez kutova – mogli bi zbuniti Flash)

5. U prvoj frameu layera, na početak putanje, stavimo simbol (raketu) i to tako da je njezin centar ( registracijska točka – mali +) na liniji, i da je simbol postavljen u željenom smjeru.

6. Odemo u zadnji frame putanje i odvučemo simbol putanjom do pozicije u zadnjem fremeu.

-upotreba orient to path opcije

Automatska rotacija objekta nam je bitno olakšana pomoću CW (clockwise) i CCW (counterclockwise), dakle u smjeru kazaljke na satu ili obrnuto.

Jednog motion guid layer se može koristiti za vođenje različitih animacija u više layera.

Motion Guide - Vodilica – Vježba

Zadatak 1: izrada animacije izmjene dana i noći sa suncem i mjesecom koji putuju po vodilici

Zadatak 2: izrada animacije rotiranja zemlje oko sunca

Zadatak 3: izrada animacije teksta koji se vrti oko zemlje

Movie Clip

Movie clip je simbol koji sadržava animaciju, odnosno animirani simbol. Ovisno o nadahnuću autora, movie clip se može smjestiti u bilo koji dio animacije. MC predstavlja animaciju unutar animacije. Primjer movie clipa je movi clip rotacije mjeseca oko zemlje. Taj se movie clip može vrlo praktično upotrijebiti za rotaciju zemlje (i mjeseca) oko sunca.

Izrada movie clipa

Odaberemo Insert > New Symbol ili Ctrl + F8 i kliknemo na Movie Clip

Rad sa timelineom movie clipa o je isti kao i rad s timelinom na sceni.

-prebacivanje animacije sa scene u movie clip

Zadatak 1: izrada movie clipa animacije leptira

Zadatak 2: animacija movie clipa na sceni (movie clip leptir koji leti po sceni i maše krilima)

Zadatak 3: korištenje prethodno napravljenog materijala animacije zemlje koja se vrti oko sunca, gdje je zadatak od zemlje napraviti movie cip u kojem se mjesec vrti oko zemlje i na taj način dobiti animaciju zemlje koja se vrti oko sunca, dok se oko zemlje vrti mjesec.

Zadatak 4: izrada movie clipa animacije hoda čovjeka

Zadatak 5: animacija movie clipa na sceni

Movie Explorer

Kao što je za rad s datotekama u windows okruženju ponekada vrlo praktično koristiti Winsows Explorer, tako je u Flash animaciji praktična pomoć Movie Explorer. Movie Explorer se poziva s Alt + F3 ili Window > Movie Explorer.

Radi se o alatki kojom ćete dobiti uvid u ustroj vaše animacije:

1. Teksta,

2. Simbola,

3. ActionScripta,

4. Importiranih zapisa – video, audio i bitmapa,

5. Frameova i layera

6. I sa zadnjim gumbom možemo izabrati koje sve objekte želimo da na m Movie Explorer pokaže.

Pomoć Movie Explorera nam je od velike važnosti npr. kada imamo kompliciranu animaciju ili kada proučavamo tuđu animaciju.

Dodatne mogućnosti. Kliknemo li na trokutić u gornjem desnom uglu ili desni klik na objekt otvorit će nam se izbornik kao na velikoj slici.

Find. Osobina Find je vrlo praktična jer nam omogućava pronalaženje npr. komandi Actionscripta. Od praktične je važnosti: Find ne razlikuje velika i mala slova, ali pronalazi samo cijele riječi.

Scene

Složenost animacije nas ponekada navodi da je 'razlomimo' u vremenske periode – scene. Scene se, kao i u klasičnim filmovima, mogu ubacivati, mijenjati redoslijed i…

Prilikom formiranja nove datoteke Flash formira Scenu 1 (Scene1). Želite li dodati drugu scenu, odaberite Insert > Scene

Da bismo lakše radili s scenama, potrebno je otvoriti panel scene: Window > Scne ili Shift + F2.

U dnu panela su gumbi za kopiranje scene, novu scenu i brisanje scene.

Preimenovati scenu možete tako da napravite dvoklik nas žaljenom scenom, upišete novo ime i stisnete Enter.

Promijeniti redoslijed scena možete jednostavnim povlačenjem jedne scene na željeno mjesto (kao i layere).

Zadatak: stvaranje animacije u Flashu gdje koristimo jedan movie clip kroz scene a u scenama mijenjamo background (polje, šuma, planine)

Maskirani Layer

Maskirani layer je sloj (layer) koji skriva sve objekte na slojevima koji se nalaze ispod njega osim na mjestima gdje ima nešto nacrtano ili napisano.

Izrada maskirnog layera:

1. Odredite ili napravite layer koji sadrži objekte koji će se vidjeti unutar maske.

2. Umetnite novi Layer (Insert > Layer) iznad slojeva koji će biti iza maske

3. Nacrtajte ili napišite, odnosno ubacite simbol koji će biti 'rupa' kroz koju će se vidjeti. Flash ignorira bitmape, prozirnosti, boje i stilove linija u maski; sva ispunjena područja će biti prozirna, a neispunjena područja će biti potpuno zatamnjena.

4. Kliknite s desnim klikom na novi layer i iz padajućeg menija izaberite Mask – time je taj layer postao maska.

5. Da bi efekt maske bio vidljiv, zaključajte maskirni layer. Time ste zaključali i sve sojeve koji su maskirani. DA bi ih mogli obrađivati, morate otključati masku, i nakon obrade, ponovo je zaključati.

Flash s maskirnim layerom povezuje samo prvi layer ispod njega. Dodatne slojeve možemo povezati s maskom na nekoliko načina:

1. Desni klik na odabrani layer i iz padajućeg menija izaberite Masked

2. Odvucite layer odmah ispod maskirnog layera; Flash će i taj sloj povezati s Maskom

3. Napravite novi layer bilo gdje ispod maskirnog layera

4. Izaberite Modify > Layer i kliknite na Masked

Obrnuto, layere od maske možete odvojiti tako da označite layer koji želite odvojiti od maske i

1. Odvucite layer iznad maske ili

2. Izaberite Modify > Layer i kliknite na Normal

Zadatak 1: izrada animiranih maski

Zadatak 2: krug koji maskira neki tekst

Zadatak 3: tekst koji maskira gradijent

Zadatak 4: kombiniranje izrade maske sa vodilicom

Zadatak 5: maskiranje gradijenta sa nekim tekstom

Zadatak 6: komponiranje animacije sa maskom i layerima (vježbanje upotrebe layera)

Zadatak 7: upotreba maske za izradu animacije (prozor vlaka kroz koji gledamo grad koji prolazi)

Rasprava 1: Dinamička promjena maske

Rasprava 2: Problematika dinamičkog teksta i maske

Button, interakcija s korisnikom, uvod u action script

Button (ili gumb) je 'početna točka interaktivnih stranica'. Pritiskom na button, vaš pretraživač vas može, ovisno o osobinama gumba, poslati na novu stranicu, ali i pokrenuti animirani film, poslati formular i…

Gumb je simbol, odnosno gumb je interaktivni movie clip. Tvorimo ga, kao i druge simbole s Insert > New Symbol ili Ctrl + F8. Nakon toga odaberemo Symbol, upišete mu ime (ili ostavite symbol 1) i otvara nam se prazan prozor kao na slici:

Za svaki gumb se mogu definirati stanja;

1. Up – izgled gumba u mirovanju

2. Over – izgled gumba kada mišem prelazimo preko njega

3. Down – izgled gumba kada kliknemo na njega

4. Hit – je nevidljivo područje, preko kojeg kada pređemo s mišem, gumb prelazi u Over stanje, odnosno područje u kojem gumb reagira na klik mišem.

Izrada gumba:

Nakon što smo otvorili prozor za izradu gumba, potrebno je urediti sva 3 stanja gumba i definirati Hit površinu. U svako stanje gumba možemo unijeti grafiku, simbol (movie clip), nacrtati objekt, tekst…Na slici je ucrtana prva faza izrade Up stanja. Možemo još utipkati tekst 'Home' i s time je definirano Up stanje.

Kad smo zadovoljni Up stanjem gumba, kliknemo na Ower stanje i odemo na Insert i odaberemo Blanck Keyfreme ili Keyfreme. Kao što imena komandi kažu, u jednom slučaju ćemo dobiti prazan keyframe, a u drugoj keyframe sa sadržajem iz Up keyframea. U ovom primjeru izabran je Keyframe, i tekst je prepravljen s Home, na Bok.

Zadatak: dodavanje movie clipa u button i izrada animiranog gumba. Npr. u Ower stanju ubacite animaciju po izboru.

Gumbi se na pozornicu dovlače iz Library (knjižnice) kao i svi ostali simboli. No, gumb smo postavili na pozornicu… i gdje je tu akcija? Akciju je potrebno dodati gumbu tako da nakon što smo ga dovukli na pozornicu kliknemo desni klik na gumb i iz padajućeg menija izaberamo Actions (kao na slici).

Uvod u action script

Unutar Flash dokumenta, akcije možemo dodati:

1. Gumbima

2. Movie Clipovima

3. Frameovima u Timelineu (okviri vremenskog slijeda)

Nakon što smo odabrali objekt kojem dodajemo akciju, biramo Window > Wctions ili F2 i otvara nam se Action Panel.

Buttons, play/stop, go to frame

Zadatak 1: Izrada jednostavne animacije i dva dugmeta

Zadatak 2: dodavanje play stop akcija na dugmad i kontrola animacije

Zadatak 3: dodavanje izrada trećeg dugmeta na koji se dodaje go to frame akcija

Multimedija

Flash ActionScript – Uvod

Actionscript

Sada već vjerojatno znate kako napraviti flash crtić. Ali kako tome dodati interaktivnost; da se na odrađenu radnju s mišem ili s tastaturom, pokreću ili zaustavljaju radnje. Npr, početak animacije, odlazak na novu stranicu, uključivanje zvuka…

Baš za to služi actionscript.

Actionscript je objektno orijentirani programski jezik sličan Javascriptu. Baš kao što Javascript interaktivnost na HTML stranicama, Actionsccript omogućava interaktivnost na Flash stranicama, i puno više od toga.

Akcije se mogu smjestiti u:

Okvire vremenskog slijeda,

Gumbe,

Movie clipove

Prilikom definiranja akcije, potrebno je definirati:

Kada će se akcija desiti, odnosno što će izazvati tu akciju; npr. klik mišem

Što će se dogoditi.

Akcije se mogu dodavati tako da ručno upisujemo ActionScript. Tada to radimo u Expert Modu. Nasuprot tome, možemo koristiti Normal Mode u kojem biramo akcije sliste na lijevoj strani panela koji se naziva Actions list.

Akcije se dodaju pojedinim okvirima iz vremenskog slijeda; kada radnja animiranog filma dođe do te točke (okvira), radnja se započinje. Npr, odlazak na drugu stranicu (URL), ili zaustavljanje animiranog filma da se na vrti u nedogled.

Postupak dodavanja (Frame Action)ide:

Izaberite željeni ključni okvir kojem želimo dodati akciju, kliknemo desnim klikom i otvorit će vam se padajući meni na kojem izaberite Actions.

Nakon toga nam se otvara panel s akcijama. U gornjem desnom kutu panela je gumbić kojim se pokreće izbornik kojim biramo između Normal i Expert Mod-a (kao na slici)

Normal Mode

Ukoliko koristimo normalni mod, akcije biramo iz Izbornika Akcija (Toolbox list) s lijeve strane panela. Akcije su grupirane u razrede: Movie Control, Browser/Network…

Da bi smo dodali akciju potrebno je kliknuti na razred akcija, kako vi nam se otvorio. Nakon toga napravimo dvoklik na željenu akciju ili ju jednostavno uvučemo u prozor s desne strane.

Expert Mode

U Expert Modeu akcije dodajemo tako da upišemo ActionScript u text box sdesne strane panela ili odabirom akcija s liste akcija koja se nalazi u lijevoj strani panela. U Expert Modeu se radi utipkavanjem samog teksta, slično kao što biste JavaScript pisali u nakom tekstualnom editoru.

Osnovne razlike Expert Moda u odnosu na Normal su:

Kada se izabere akcija ona se ubacuje u područje za uređivanje teksta s desne strane na mjestu gdje je korsor.

Nema Up i Down strelica kojima se mijenja redoslijed komandi.

Nema parametara u tekst boksu

Object Action

Akcije možete dodati gumbu ili movie clipu kao bi se akcija izvršila kada posjetitelj klikne ili mišem pređe preko gumba.

Prilikom dodavanja akcije gumbu ili movie clip-u, Flash sutomatski postavlja specijalnu akciju – On Mouse Event.

Prilikom dodavanja akcije gumbu ili movie clip-u ide:

Izaberete gumb ili movie clip i odete na Window >Actions

Kliknite na Basic Actions i izaberite akciju dvoklikom ili ju uvucite u prozor

Frame Action

Frame action je već opisan

Rasprava: Što sve možemo raditi uz pomoć action scripta (igre, kompletne web prezentacije, multimedijane prezentacije)?

Komunikacija Unutar Action Scripta, Even Driven Actions

Handlers

Event handlers (upravljači događajima) su specijalne akcije koje upravljaju eventima (događajima) kao što su mouseDown ili load. U ActionScriptu su definirane dvije vrste hendlera: actions (akcije) i methods (metode). Event heandler actions su: on i onClipEvent. Svaki objekt ActionScripta koji ima heandler method ima i podklasu Events.

On Mouse Event

On Mouse Event je akcije koja se dodjeljuje samo gumbima. Njome se određuju događaji koje iniciraju različite radnje, bilo početak bilo kraj radnje. On Mouse Event mogu biti razne radnje s mišem nad gumbom tipa klika, dvoklika, prelaska mišem preko gumba… (press, realease, release outside, key press, roll over roll out, drag over , drag out).

On Clip Event

On Clip Event je akcija koja se dodjeljuje samo movie clipovima. Njome se određuju događaji koji će pokrenuti (trigger, okidač) pojedine akcije unutar movie clipa.

Dodavanje akcija na movie clipove:

1. Izaberi movie clip i pozovi akcije (Window > Actions ili F9) i učini nešto od:

Ø Napravi dvoklik na željenu akciju

Ø Akciju mišem 'unesi' u prozor unutar kojeg je ActionScript upisan.

Ø Klikni na + (kao na slici) i izaberi željenu akciju iz padajućeg menija.

2. U kućici na vrhu panela izaberi parametre za akciju.

Napredna Izrada Buttona, Ubacivanje Simbola U Simbol, Movie Clip U Button

Ubacivanje simbola u simbol

Pojedini simbol može biti gradivni element drugog novog simbola. Tu je jedina granica kompliciranost izvedbe i održavanja. Naime, ukoliko postavimo simbol unutar simbola na više nivoa, vrlo će nam teško biti razlučiti pojedine elemente i samim time će održavanje i razvoj stranice/crtića biti znatno teži.

Izrada animiranih buttona

Izrada animiranih buttona se zasniva na ubacivanju movie clipa u jedno od stanja gumba. Pri tome se movie clip ponaša jednako kao i grafički objekt

Dupliciranje gumba

Dupliciranje gumba se postiže tako da unutar Library desnim klikom nad gumbom kojeg žalimo duplicirati pozovemo padajući meni u kojem izaberemo opciju Duplicate. Nakon toga novi gumb možemo mijenjati u jednom ili više stanja gumba, možemo mu promijeniti ime…

Kopiranje gumba je isto kao i dupliciranje, ali za gumbe bez teksta.

Vježba: sa kopiranim gumbima (gumbi bez teksta)

Vježba: sa dupliranim gumbima (gumbi sa tekstom – sport, kultura, politika koji pozivaju različite sadržaje)

Izrada interaktivne stranice u flashu

Zadatak: izrada primjera stranice u flashu gdje uz pomoć akcija dodanih na dugmad (Go to) treba napraviti interaktivnu animaciju sadržaja koji se pojavljuje kada kliknemo na dugme koje poziva određeni tekst sa slikom

Zadatak: dodavanje dugmadi za “korak naprijed” i “korak nazad”, te korištenje “previous i next frame opcija”

Izrada interaktivne animacije

Izrada animacije u kojoj uz pomoć dugmati mijenjamo svojstva movie clip-u (setProperty)

*SetProperty je akcija kojom se definiraju promjene na movie clipu tijekom trajanja crtića. Npr. ukoliko želimo da nam se movie clip polako počne pokazivati (od alpha=0)nakon pritiska gumba, trebat će nam:

on(release) {

                    setProperty("star", _alpha, "30");

Zadatak: izrada animacije movie clipa (ribice koja pliva)

Zadatak: dodavanje dugmati I mijenjanje svojstva movie clipa sa setproperty:

ribica nestaje

pojavljuje se

mijenja mjesto na x osi

mijenja mjesto na y osi

mijenja visinu

mijenja širinu

Izrada interaktivne animacije

StartDrag i StopDrag

StartDrag je akcija koja omogućava posjetitelju da ciljani (target) movie clip premješta (drag, povlači) po ekranu. Samo se jadan movie clip može povlačiti u određenom trenutku. Jednom kada se StartDrag akcija započne, movie clip se može povlaćiti sve dok se na aktivira StopDrag akcija ili dok se ne pozove startDrag akcija za novi movie clip.

Primjer (iz Flash MX halpa):

Kako biste izradili movie clip koji posjetitelji mogu postaviti na bilo koju lokaciju, dodajte startDragi i stopDrag akcije na gumb koji se nalazi unutar movie clipa:

on(press) {

                    startDrag(this,true);

on(release) {

                    stopDrag();

Zadatak: izrada animacije kauboja sa šeširom i cigaretom gdje se koristi Drag&Drop metoda

Zadatak: izrada šaha (ili dame) u Flash-u uz pomoć Drag&Drop metode

Mouse hide/show

Mouse hide/show je metoda kojom se ’skriva’ kursor u filmu.

Primjena: Kod koji slijedi dodajte movie clipu u glavnom vremenskom slijedu

The following code, attached to a movie clip on the main Timeline, hides the standard cursor, and sets the x and y positions of the customCursor movie clip instance to the x and y mouse positions in the main Timeline.

onClipEvent(enterFrame){

                    Mouse.hide();

                    customCursorMC._x = _root._xmouse;

                    customCursorMC._y = _root._ymouse;

Zamjena običnog kurosra sa nekim napravljenim movie clipom unutar flash movie-a (izrada vlastite strelice ili pulsirajuće loptice):

1. Izradite movie clip koji će biti kursor

2. Izaberite movie clip instancu na pozornici

3. Otvorite panel za Akcije

4. Kliknite na Objects, kliknite na Movie, pa kliknite na Mouse, kliknite na Methods i napravite dvostruki klik na 'hide' ili napravite kao na slici.

5. Kod bi trebao ovako izgledati:

onClipEvent(load){

Mouse.hide();

}

6. Kako bi primijenili novi kursor, kliknite na kategoriju Actions, pa kliknite na Movie Clip Control i napravite dvostruki klik na startDrag.

7. Za ograničenje kretanja miša izaberite Expression box i utipkajte this za target (cilj) potom izaberite Lock Mouse to Center, i za Constrain to Rectangle i unesite mjere koje žalite. Npr:

o L 20

o T 26

o R 400

o B 360

8. Kod bi trebao biti sljedeći:

onClipEvent (load) {

Mouse.hide();

startDrag(this, true, 20, 26, 400, 360);

Izrada Interaktivne Animacije

StartDrag i StopDrag

izrada animacije kauboja sa šeširom i cigaretom gdje se koristi Drag&Drop metoda

izrada šaha (ili dame) u Flash-u uz pomoć Drag&Drop metode

Mouse hide/show

zamjena običnog kurosra sa nekim napravljenim movie clipom unutar flash movie-a (izrada vlastite strelice ili pulsirajuće loptice)

postavljanje svojstava movie clipu koji će biti kursor (Lock mouse to center, constrain to rectangle)

Izrada Interaktivne Animacije S Variablom

što su varijable

dodavanje vrijednosti varijable

što je string

što je vrijednost

loadvarijable primjer

Formular U Flashu, Polja, Komuniciranje S Poljima, Izrada Formulara S Animacijom

izrada interaktivnog formulara

rad sa Input Text panelom

single line

multi line

pojašnjavanje što je border I čemu služi, upotreba wrap text-a

password polje

-primjer “bojanja” polja za unos teksta u pozadinskom layeru

Izrada ostalih elemenata formulara u flashu, testiranje polja

Upload Varijabli I Pozivanje CGI-Scripte

Vježba – kombinacija naučenih elementa

Implementacija Flasha U Dreamweaver

Publish

publish preview

opcije publish-a

publish settings

određivanje dimenzija

export kao flash only, flash with FSCommand, te upoznavanje sa ostalim mogućnostima eksporta.

ubacivanje flash movie-a u stranicu u Dreamveaweru

mogućnosti exporta i kasnije implementacije u DW

Implementacija Flasha U Dreamweaver

Komunikacija linkova iz Flasha s Dreamweaverom

Komunikacija linkova iz Flasha s Dreamweaverom se postiže pomoću Akcija, odnosno, getURL komande (unutar Browser/Netvork).

U primjeru na slici se će se otvoriti stranica www.boschhrana.hr. Uz to se i polju 'Window' može definirati i u kojem prozoru će se otvoriti, a ako se radi o framesetu, u kojem fremeu će se otvoriti.

Zadatak: Izrada navigacijskog menija u Flashu i implementacija istoga u Dreamweaver

Linkovi za tekst

Linkove na tekst dodajemo u Property inspectoru za tekst. Tu nam se, u polju Target, također nudi mogućnost biranja freme-a u kojem će se stranica otvoriti.

Zadatak: upotreba window opcije u Get URL i izrada stranice sa frameovima u kojoj koristimo flash navigacijski bar

Behaviors U Dramweaveru

Behaviors (ponašanja)

Behaviors (ponašanja) su u JavaScriptu definirane radnje koje Dreamweaver ugrađuje ukoliko to zatražite. Iako Dreamweaver behaviorse piše u JavaScriptu, nije potrebno nikakvo znanje Javascripta da biste koristili Behaviorse.

Behaviors omogućavaju interakciju posjetitelja i web stranice; bilo da se radi o izmjeni stranice, bilo da se određeni zadatci izvrše, fileovi učitaju, aktiviraju…. Pojedini behavior (ponašanje) je kombinacija događaja (event) s akcijom koju inicira (trigger, okidać) taj događaj.

Behavior panel se otvara s Window > Behaviors ili Shift+F3 kombinacijom. Behaviorse dodajemo i oduzimamo (brišemo) s komandama. Ukoliko izaberemo + komandu, otvorit će nam se padajući meni (kao na slici) i s tog menija možemo birati behavior koji želimo. Unutar behavior panela se dosta različitih mogućnosti, no to nije sve, jer na dnu padajućeg menija postoji opcija Get More Behaviors… komom se aktivira spajanje na Macromediin web site s kojeg se, prema izboru, može skinuti gotovo neograničena količina kvalitetnih behaviorsa.

Ukoliko niste zadovoljni behaviorom koji ste izabrali, jednostavno ga možete izbrisati, tako da kliknete na njega i potom kliknete na '–'

Events (događaji)

Events (događaji) su radnje koje browser interpretira kao pokretača Triggera (okidača). Ta definirana radnje kojom se pokreće akcija se naziva trigger (okidač). Trigger može biti npr. prelazak mišem preko linka (onMouseOver), klik (onClick) na link, napuštanje linka…

Primjerice, kad posjetitelj mišem pređe preko linka, browser generira onMouseOver event za taj link, te nakon toga provjeri postoji li JavaScript komanda koju poziva taj link. Ovisno o kojem se elementu stranice radi, specifični eventi se definiranu za specifičan dio stranice. Tako se za linkove najviše koriste onMouseOver i onClick eventi, a za slike onLoad eveti.

Action (akcije)

Akcije su komande pisane u JavaScriptu koje izvršavaju određeni zadatak, kao npr. pokazivanje/skrivanje layera, aktiviranje zvuka, otvaranje prozora, definiranje otvorenog prozora.

Npr. Akcija Open Browser Window nam omogućava da definiramo koja stranica će se otvoriti, koje visine i širine, s kojim atributima i s kojim imenom.

Vježba: mijenjanje eventa i upoznavanje sa osnovnim tipovima

Vježba: gotoURL primjer

Vježba: setText izrada poruke u status baru

Opaska: U status baru se ispisuju adresa linka nad kojim smo došli mišem. Stoga, u praksi, treba prilično dobar razlog da posjetiteljima oduzmete tu mogućnost.

Trigger (okidač)

Triggers (okidači) su mehanizmi koji nakon definirane radnje (eventa) pokreću određenu akciju. Jedna radnja (event) može putem triggera pokrenuti više akcija. Npr. prilikom dolaska mišem na link (OnMouseOwer) aktivira se zvuk, prilikom klika otvaraju se dva prozora, a prilikom odlaska miša s linka aktiviraj se još jedan zvučni efekt.

Kako se mogućnosti browsera prilično razlikuju ovisno i generaciji i vrsti browsera, potrebno je u Show Events For definirati za koji browser želimo mogućnosti. Na slici je popis eventa koji mogu aktivirati triggere u IE4 ili novijim browserima.

Najvažnji triggeri su:

1. onClick

2. onMouseOver

3. onMouseOut

4. onLoad

5. onUnload

Opaska: Kako Bahaviors zahtijevaju linkove za Triggere, a vrlo često nam nije u interesu da se uz određenu akciju otvara nova stranica, jednostavno se definira 'link' kojem je adresa #.

Vježba: izrada slike kao dugmeta gdje se mijenja slika na onmouseover i onmouseout te sa onClick triggerom pozivamo link

Vježba: vježba sa popup-om (alertom)

Triggeri i Preklapanje Layera

Show-Hide Layer Opcijame

Show-Hide Layer opcija nam omogućuje da se određeni layeri 'pale (pojavljuju) i gase' ovisno o tome jesmo li iznad linka ili ga napuštamo ili…

Praktična primjena Show-Hide Layer opcije je npr. slika grupe ljudi, gdje će se, ovisno o time preko koje osobe pređemo mišem, pojaviti layer u kojem ime i sažeta biografija te osobe.

Na slici je primjer s 5 layera od kojih se svaki pokazuje kada mišem pređemo preko određene osobe (linka - #). Dakle tu se radi o Show akciji koju aktivira onMouseOver event. Kako bi se izbjeglo pokazivanje više različitih layera istovremeno, za svaki layer je definirana i Hide akcija koju pokreće onMouseOut event.

Vježba: dodavanje triggera na tekst koji je link.

Rasprava: o mogućim problemima kod dodavanja eventa i izbjegavanje «miješanja» koda zbog kojeg može doći do problema u radu sa stranicama.

Općenito pravilo prilikom dodavanja eventa i, općenito dodavanja behaviorsa je jasno definirati što, kada, i zašto se zbiva. Dakle, ako layer palimo s onMouseOwer eventom, onda je potreban jedan vrlo jednostavan način da posjetitelj taj layer 'ugasi'. U ovom slučaju odgovarajuće rješenje je onMouseOut event. Ukoliko upotrijebimo onClick, vrlo je vjerojatno da se posjetitelj neće sjetiti to učiniti i stranica neće polučiti učinaka kakav smo planirali.

Vježba: izrada stranice na kojoj se koristi show/hide layer opcija. izrađuje se pet linkova, pet layera koji se nalaze na identičnom mjestu po x/y osi i uz pomoć onClick eventa i Show-Hide layer opcije mijenjamo sadržaj. Sadržaj je dijelom tekst, dijelom slike, a dijelom neki ranije izrađeni flash movie

Vježba: na dnu stranice se nalaze četiri manje slike koje se na onMouseover opciju mijenjaju u neku drugu sliku, a na onMouseOut vraćaju u prijašnje stanje

Preload Images

Ukoliko su slike smještene unutar Layera koji se pojavljuju nakon što npr. mišem pređemo preko linka, browser će te slike početi očitavati tek kada posjetitelj pozove layer. Dakle layer će određeno vrijeme biti 'upaljen' bez slike (sve dok se slika na učita). Kako bi se to izbjeglo postoji Preload Images opcija. To je JavaScript komanda kojim stranica prilikom učitavanja automatski učitava određene slike (zvukove…) kako bi se one mogle reproducirati odmah nakon što se određeni event zbije.

Vježba: za donje slike upotrijebiti «Preload Images»

Zadatak: ponavljanje, vježba, rješavanje eventualnih problema u radu sa polaznicima. Provjera znanja

Flash. 1

Uvod iliti što je to Flash?. 1

Uvod i upoznavanje s alatima, sučeljem.. 2

PODEŠAVANJE RADNOG PROSTORA; rad sa panelima i njihova upotreba. 5

Animacija. 6

Upoznavanje s simbolima, vrste, ograničenja. 7

Popravljanje i mijenjanje gotovih simbola (rad unutar simbola na sceni) 8

Umetanje simbola na scenu. 8

Mijenjanje behavior-a (navika, svojstava) simbola. 9

Motion tween. 9