1

Flash galerija slika/Maske

Ova lekcija opisuje jedan od načina izrade web galerije slika.

Krajnji izgled Flash galerije :

Flash galerija

Otvorite nov prazan dokument dimenzija 550x450px. Preimenujte početni lejer u „pozadina“. Na tom lejeru ćemo nacrtati pozadinu cele animacije. Nacrtajte prvo pravougaonik dimenzija radnog prostora (550x400px). Pravougaonik treba da bude bez stoke-a i da ima gradijent prelaz iz bele u sivu.

2

Za potrebe transformisanja gradijanta (okretanja za 90 stepeni) koristite alat Gradient Transform Tool. Na istom lejeru nacrtajte crni pravougaonik dimenzija 140x450px u gornjem levom uglu. Pošto će animacija web galerije imati samo 4 frejma, produžite trajanje lejera „pozadina“ ubacivanjem keyframe-a u 4. frejm.

Dalji rad na animaciji obuhvata ubacivanje fotografija. Način na koji će se ubacivati fotografije mora biti precizno definisan. Kako je vrlo teško animacije koje imaju pogrešan koncept na kome su realizovane menjati i „popravljati“. Vrlo je bitno pre nastavka rada na animaciji osmisliti način na koji će se animacija dalje realizovati. Ideje realizacije je potrebno unapred znati i definisati kako bi se animacija uspešno realizovala. Ideja koja će biti ovde realizovana može se predstaviti na sledeći način. Pošto će galerija da ima 4 slike i 4 male slike čijim klikom će biti prikazane uvećane verzije iste, postavljaćemo svaku pojedinačnu fotografiju u zaseban frejm, a male slike će biti u svakom frejmu.

3

a ovaj način se svaka pojedinačna slika vidi u samo jednom frejmu, dok se mali prikazi slika vide u svakom frejmu. Pošto će se svaka fotografija više puta koristiti u toku pravljenja animacije potrebno je uvesti fotografije u biblioteku projekta. Iz komandrnog menija opcijom File>File Import>Import to Library otvorite prozor u kome ćete naći potrebne fotografije. Kako biste ubrzali uvoz slika moguće je više slika od jednom uvesti. Potrebno je kada se pojavi prozor Import to Library, pronaći putanju do željenih fajlova, a potom držeći taster CTRL izabrati sve fajlove koje želite uvesti u biblioteku. Potopm pritisnuti taster Open i izabrane slike će biti ubačene u bibilioteku.

4

Zaključajte lejer “pozadina”. Napravite nov lejer i nazovite lejer “slika1”. Kliknite na prvi keyframe i ubacite dva puta fotografiju “P1050077-copy.jpg” na radni prostor. Neka jedna (manja) fotografija ima dimezije W:53.4, H:80 (obratite pažnju da ikona lanca koja povezuje promene širine i visine bude raskinuta). Neka dimenzije veće fotografije budu W:200, H:300.

5

Pošto želimo da manja fotografija u animaciji ima funkciju dugmeta čijim bi se klikom „skočilo“ na do animacije u kojoj se vidi uvećan prikaz slike, pretvorite manju fotografiju u dugme (Buttons). Izaberite da referentna tačka objekta bude centar objekta. Da bismo na veću fotografiju mogli primenjivati Filtere potrebno je veću fotografiju pretvoriti u Movie Clip. Izaberite da referentna tačka objekta bude centar objekta. Pozicionirajte manje dugme na koordinate X:70, Y:66, a veću fotografiju na koordinate X:340, Y:196. Flash galerija 5 Da bi dodali efekat crvenog isijavanja veće slike potrebno je pristupiti Filetrima (Filters) koji se nalaze u paleti Properties. Klinite crnom strelicom na veću fotografiju i klilkom na ikonu Add Filters u paleti Filtara otvorite podmeni sa ponuđenim filetrima.

Izaberite filter Glow. Podesite parametre filtera Glow kao na narednoj slici.

6

Dalje treba da definišemo stanja dugmeta (odnosno manje fotografije). Uđite dvostrukim klikom u dugme. U trenutnom stanju dugmeta (Up) fotografiju treba da pretvorimo u Movie Clip kako bismo u paleti Properties dobili podešavanja kojim ćemo objekat pretvoriti u crno belu fotografiju. Pošto ste sliku pretvorili u Movie Clip u paleti Properties iz palete filtara klikom naAdd Filter izaberite Adjust Color. U navedenom filteru se nalazi opcija Saturation. Promenite vrednost saturacije na -100. Smanjivanjem saturacije (zasićenosti boja) na minimalnu vrednost objekat postaje crrno-bele boje.

7

Ubacite keyframe u naredno stanje dugmeta (Over). Da bi se otvorila paleta dugmeta kliknite na dugme. Želimo da prelazak miša preko dugmeta vrati boju dugmeta (fotografiji) u tom stanju treba opciju Saturation u okviru Filetra Adjust Color vratiti na vrednost 0. U ovom stanju ćemo dodati iz palete filtera Glow kako bi dugme imalo blagi efekat crvenog isijavanja u stanju Over. Pored navedenog dodaćemo tekst ispod dugmeta koji opisuje sadržaj fotografije.

8

Naredno stanje (Down) nećemo puno menjati. Samo će boja parametra Glow biti promenjena u belu. Ubacite keyframe u stanje Down, i slektujete samo fotografiju (bez teksta). Filteru Glow promenite boju u belu.

9

Ubacite keyframe u stanje Hit. Želimo da samo fotografije (bez teksta ispod fotografije) bude aktivna oblast dugmeta. Izbrišite u stanju Hit tekst, a ostavite fotografiju da bude vidljiva. Izađite iz dugmeta na Scenu 1 (Sceen 1). Ubacite keyframe-ove na lejer „slika 1“ u frejmove 2,3, i 4. Kako velika fotografija treba da bude vidljiva samo u prvom frejmu, a mala u sva četiri frejma u drugom, trećem i četvrtom frejmu izbričite veliku fotografiju (a ostvite malu fotografiju (dugme) da bude vidljiva). U prvom frejmu ispod velike fotografije napišite „Ostavi kartagine“. Opisanim postupkom smo definisali prvu fotografiju. Na opisani način treba da ubacite i slike koje ce se nalaziti na lejerima „slika 2“, „slika 3“, i „slika 4“ Uputstvo za sliku 2: Napravite lejer „slika 2“. Ubacite iz biblioteke sliku „P1080567.jpg“. Prateći tekst uz sliku je „El Džem“. U prvom frejmu lejera „slika 2“ samo jednom prevucite sliku iz biblioteke i pretvorite je u dugme. Dimenzije dugmeta su 120x80px. Pretvorite sliku u dugme i definišite odgovarajuća stanja dugmeta. Postavite dugme u poziciju X:70, Y:170. Ubacite keyframeove 2,3 i 4 lejera „slika 2“. U drugi keyframe ubaciti i veliku fotografiju. Pretvoriti je u Movie Clip, dodati efekte, ispisati prateći tekst. Dimezije i pozicija velike fotografije su W:350, H:233; X:345, Y:198. Uputstvo za sliku 3: Napravite lejer „slika 3“. Ubacite iz biblioteke sliku „P1070999.jpg“. Prateći tekst uz sliku je „Linux tus“. U prvom i frejmu lejera „slika 3“ samo jednom prevucite sliku iz biblioteke i pretvorite je u dugme. Dimenzije dugmeta su 53.4x80. Pretvorite sliku u dugme i definišite odgovarajuća stanja dugmeta. Postavite dugme u poziciju X:70, Y:275. Ubacite keyframeove 2,3 i 4 lejera „slika 3“. U treći frame ubaciti i veliku fotografiju. Pretvoriti je u Movie Clip, dodati efekte, ispisati prateći tekst. Dimezije i velike pozicija fotografije su W:200, H:300; X:341, Y:200. Uputstvo za sliku 4: Napravite lejer „slika 4“. Ubacite iz biblioteke sliku „P1080454.jpg“. Prateći tekst uz sliku je „Sahara“. U prvom frejmu lejera „slika 2“ samo jednom prevucite sliku iz biblioteke i pretvorite je u dugme. Dimenzije dugmeta su 120x80px. Pretvorite sliku u dugme i definišite odgovarajuća stanja dugmeta. Postavite dugme u poziciju X:70, Y:379. Ubacite keyframeove 2,3 i 4 lejera „slika 4“. U drugi keyframe ubaciti i veliku fotografiju. Pretvoriti je u Movie Clip, dodati efekte, ispisati prateći tekst. Dimezije i pozicija velike fotografije su W:350, H:233; X:345, Y:198.

10

Napravite nov lejer „next-prev“. Na tom lejeru će biti dva odvojena teksta koja će svaki zasebno biti pretvoreni u dugmiće. Ispišite tekst next sa desne strane velike fotografije i tekst prev (previous) sa leve strane.

Ostalo je da celoj animaciji dodamo odgovarajuće Action Script kodove kojima ćemo upravljati animacijama. Napravite nov lejer i nazovite ga „as“. Kliknite na prvi keyframe i iz komandnog prozora otvorite prozor Actions. Da bi animacija po pokretanju prikazivala samo početno stanje animacije u prvom keyframe-u ćemo upisati naredbu stop(); Da bi regulisali ponašanje malih fotografija koje imaju ulogu dugmića moguće je koristiti Code Snippet-e ili sami pisati funkcije.

11

Funkcija treba da obezbedi da klik na malu fotografiju (dugme) prouzrokuje skok animacija na odgovarajući frejm animacije u kojoj je prikazana velika fotografija. Potreban izgled koda dat je na narednoj fotografiji .

Da bismo definisali tastere „prev“ i „ next“ koristićemo Code Snippete. Kako opsiani tasteri treba da obezbede da se redom prikazuju fotografije unapred odnosno unazad klik na taster treba da obezbedi da animacija pređe u naredni frejm animacija (odnosno prethotdni frejm). Upravo su fotografije postavljanje u susedne frejmove kako bi se mogli dugmići „prev“ i „ next“ definisati preko Code Snippeta. Kliknite na dugme „next“ i potom izaberite Code Snippet, Click to go to Next Frame and Stop (koji se nalazi u Timeline navigation grupi snippet-a).

12

Potom kliknite na dugme „prev“ i iz iste grupe Snippet-a izaberite Click to go to Previous Frame and Stop.

Poslednji korak je pridruživanje dugmetu „sound on/off“ muzički fajl koji će se klikom na navedeno dugme uključivati odnosno isključivati. Kliknite na dugme „sound on/off“ i iz prozora Code Snippets otvorite grupu Audio and Sound. Iz navedene grupe izaberite Click to Play/Stop Sound. Snippet koji se ispisuje potrebno je izmenti u redu u kome se nalazi naziv muzičkog fajla koji treba da se reprodukuje. Umesto dela glavnog programa Snippet-a gde je ispisano http://www.helpexamples.com/flash/sound/song1.mp3, između navodnika traba upisati ime audio fajla (u našem primeru to je "Cavcasian_dance.mp3").

13

Pri ovakvom korišćenju muzičkih fajlova (preko Action Scripta) audio fajl nije sastavni deo projekta, već se sadržaj istog po potrebi učitava iz foldera na računaru ili serveru kada se klikne na dugme „sound on/off“. Flash pretpostavlja da se audio fajl koji treba da reprodukuje nalazi u istom folderu gde se nalazi i .fla projekat odnosno swf animacija. Ako koristite ovaj Snippet za puštanje audio fajlova obavezno audio fajl smestite u folder u kome se nalazi sačuvan projekat.