us 3 d grafika i animacija - praktikum

411

Upload: marija-starcevic

Post on 06-Dec-2014

181 views

Category:

Education


16 download

DESCRIPTION

Us 3 d grafika i animacija - praktikum

TRANSCRIPT

Page 1: Us   3 d grafika i animacija - praktikum
Page 2: Us   3 d grafika i animacija - praktikum
Page 3: Us   3 d grafika i animacija - praktikum

3D GRAFIKA I ANIMACIJA - PRAKTIKUMtreće dopunjeno i izmenjeno izdanje

Autori:dr Dragan Cvetković, dipl.inž.

Zona Kostić, dipl.inž. - master

Recenzent:Prof. dr Slavko PešićMašinski fakultet Univerziteta u Beogradu

Izdavač:UNIVERZITET SINGIDUNUMFAKULTET ZA INFORMATIKU I MENADŽMENTBeograd, Danijelova 32

Za izdavača:Prof. dr Milovan Stanišić

Tehnička obrada:Dragan Cvetković

Dizajn korica:Milan Nikolić

Godina izdanja:2009.

Tiraž:200 primeraka

Štampa:Čugura Print, Beogradwww.cugura.co.rs

ISBN:

Page 4: Us   3 d grafika i animacija - praktikum

Sadržaj

PREDGOVOR vi

Autodesk 3DS MAX 9

1 3DS MAX 9 - Samostalne vežbe 11.1. Kreiranje Rubikove kocke . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2. Smeštanje teksta na objekat . . . . . . . . . . . . . . . . . . . . . . . . 61.3. Šahovska figura kralja . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101.4. Apstraktni oblik . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151.5. Kreiranje prozora sa staklom . . . . . . . . . . . . . . . . . . . . . . . . 191.6. Kreiranje šolje za belu kafu . . . . . . . . . . . . . . . . . . . . . . . . . 281.7. Kreiranje pehara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351.8. Travnjak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391.9. Pravljenje kristala . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431.10. Staklene cevi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471.11. Kristalna kugla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511.12. Žičani model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531.13. Logo koji liči na Windows logo . . . . . . . . . . . . . . . . . . . . . . . 561.14. Loptica za golf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641.15. Zlatni i bakarni čajnik . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691.16. Kreiranje apstraktnog modela . . . . . . . . . . . . . . . . . . . . . . . . 781.17. Staklena čaša za vino . . . . . . . . . . . . . . . . . . . . . . . . . . . . 831.18. Kreiranje staklene vaze za cveće . . . . . . . . . . . . . . . . . . . . . . 901.19. Umekšavanje senki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 971.20. Hromirani i aluminijumski materijali . . . . . . . . . . . . . . . . . . . . 1061.21. Rad sa materijalima - I . . . . . . . . . . . . . . . . . . . . . . . . . . . 1121.22. Rad sa materijalima - II . . . . . . . . . . . . . . . . . . . . . . . . . . . 1161.23. Rad sa materijalima - III . . . . . . . . . . . . . . . . . . . . . . . . . . 1201.24. Rad sa materijalima - IV . . . . . . . . . . . . . . . . . . . . . . . . . . 1241.25. Rad sa materijalima - V . . . . . . . . . . . . . . . . . . . . . . . . . . . 1271.26. Rad sa materijalima - VI . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Page 5: Us   3 d grafika i animacija - praktikum

ii 3D grafika i animacija - Praktikum

1.27. Rad sa materijalima - VII . . . . . . . . . . . . . . . . . . . . . . . . . . 1331.28. Rad sa materijalima - VIII . . . . . . . . . . . . . . . . . . . . . . . . . . 1361.29. "Dobijanje" šoljice za čaj iz čajnika . . . . . . . . . . . . . . . . . . . . . 1401.30. Kreiranje "2D slika" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

2 Veza programa CorelDRAW i 3DS MAX 9 149

3 3DS MAX 9 - Primeri i zadaci 1553.1. Dečiji vozić . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1573.2. Trpezarija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1583.3. Radna stolica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1593.4. Stolica za odmor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1603.5. Dnevna soba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1613.6. Kuhinjska stolica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1623.7. Komoda sa tri fioke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1633.8. Kombinovana soba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1643.9. Dvosed i fotelja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1653.10. Staklena čaša za vino . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1663.11. Staklena čaša za vodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1673.12. Flaša za žestoko piće . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1683.13. Francuski krevet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1693.14. Komoda za dečiju sobu . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Adobe FLASH PROFESSIONAL CS3

1 Adobe Flash Professional CS3 - Uvod 171

2 Adobe Flash Professional CS3 - Podešavanja 1732.1. Podešavanje parametara . . . . . . . . . . . . . . . . . . . . . . . . . . . 1732.2. Ugrađivanje fontova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

3 Adobe Flash Professional CS3 - Međukadriranja 1793.1. Međukadriranje kretanja . . . . . . . . . . . . . . . . . . . . . . . . . . . 1793.2. Easing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1813.3. Međukadriranje oblika . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

3.3.1. Shape hint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1883.3.2. Card Flip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

3.4. Kadar-po-kadar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1953.4.1. Disco ball . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Page 6: Us   3 d grafika i animacija - praktikum

Sadržaj i predgovor iii

4 Adobe Flash Professional CS3 - Simboli 1974.1. Movie Clip (isečak filma) . . . . . . . . . . . . . . . . . . . . . . . . . . 1974.2. Button (Dugme) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

4.2.1. Normal to Rollover Button . . . . . . . . . . . . . . . . . . . . . 201

5 Adobe Flash Professional CS3 - Razni efekti 2075.1. Realizam pomoću gradijenata . . . . . . . . . . . . . . . . . . . . . . . . 2075.2. Tehnike maskiranja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

5.2.1. Equalizer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2165.2.2. Animacija zastave . . . . . . . . . . . . . . . . . . . . . . . . . . 2165.2.3. Handwriting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2215.2.4. Okretanje stranice . . . . . . . . . . . . . . . . . . . . . . . . . . 222

5.3. Vođenje animacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2285.4. Filtri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

6 Adobe Flash Professional CS3 - Rad sa tekstom 2316.1. Razdvajanje teksta na blokove . . . . . . . . . . . . . . . . . . . . . . . 231

7 Adobe Flash Professional CS3 - Rad sa bitmapama 2337.1. Animacija sa bitmapama . . . . . . . . . . . . . . . . . . . . . . . . . . 2337.2. Bitmapa kao dugme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

8 Adobe Flash Professional CS3 - ActionScript 2398.1. Osnovne komande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2398.2. Komanda "stop();" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2398.3. Skokovi "goto" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2428.4. Linkovi za mail i URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2468.5. Pravljanje Slide Show prezentacije . . . . . . . . . . . . . . . . . . . . . 2478.6. Pravljanje Scroller-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2508.7. Pravljanje Preloader-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2518.8. Dinamički tekst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2548.9. Analogni sat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2558.10. Pravljenje sopstvenog pokazivača . . . . . . . . . . . . . . . . . . . . . . 259

8.10.1. Definisanje vruće tačke novog pokazivača . . . . . . . . . . . . . 2618.11. Tekst koji sledi pokazivač . . . . . . . . . . . . . . . . . . . . . . . . . . 2628.12. Animacija koriščenjem ActionScript-a . . . . . . . . . . . . . . . . . . . . 263

9 Adobe Flash Professional CS3 - Komponente 2799.1. Rad sa komponentama . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

10 Adobe Flash Professional CS3 - Scene 28310.1. Rad sa scenama . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283

Page 7: Us   3 d grafika i animacija - praktikum

iv 3D grafika i animacija - Praktikum

11 Adobe Flash Professional CS3 - Zvuk 28711.1. Zvuk u pozadini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28711.2. Zvuk na dugmićima . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28811.3. "on/off" primer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289

12 Adobe Flash Professional CS3 - Video 29512.1. Import videa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29512.2. Export videa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

12.2.1. Izvoz (exporting) u vidu QuickTime videa . . . . . . . . . . . . . 300

13 Adobe Flash Professional CS3 - Publish 30313.1. Podešavanje parametara (Publish Settings) . . . . . . . . . . . . . . . . 30313.2. Promena fokusa Flash dokumenta . . . . . . . . . . . . . . . . . . . . . 304

14 Adobe Flash Professional CS3 - Upotreba naprednih funkcija 30914.1. Pravljenje sjald prezentacije . . . . . . . . . . . . . . . . . . . . . . . . . 30914.2. Pravljenje ekrana formulara . . . . . . . . . . . . . . . . . . . . . . . . . 31314.3. Pravljenje sadržaja za mobilni uređaj . . . . . . . . . . . . . . . . . . . . 316

15 Adobe Flash Professional CS3 - Primeri iz prakse 31915.1. Primeri studenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32015.2. TheFwa - Favourite Website Awards . . . . . . . . . . . . . . . . . . . . 323

Macromedia FLASH PROFESSIONAL 8

1 Flash 8 - Samostalne vežbe 3251.1. Efekat gradijentne ispune entiteta . . . . . . . . . . . . . . . . . . . . . 3251.2. Efekat gradijentne ispune na tekst . . . . . . . . . . . . . . . . . . . . . 3291.3. Kretanje loptice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3311.4. Promena slova u slovo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3341.5. Semafor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3381.6. Pretvaranje oblika u oblik . . . . . . . . . . . . . . . . . . . . . . . . . . 3401.7. "Oči" unutar slova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3441.8. "Paukova mreža" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3471.9. Transparentnost (providnost) objekata . . . . . . . . . . . . . . . . . . . 3501.10. Pretvaranje reči u reč . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3531.11. Promena boja i oblika . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3571.12. Jednostavan taster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3591.13. Jednostavna maska . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3611.14. Maska kao loptica skočica . . . . . . . . . . . . . . . . . . . . . . . . . . 3631.15. Maska koja se uvećava i smanjuje . . . . . . . . . . . . . . . . . . . . . . 3661.16. Rotiranje maske . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369

Page 8: Us   3 d grafika i animacija - praktikum

Sadržaj i predgovor v

1.17. Razvlačenje teksta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3721.18. "Nestajanje" teksta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3741.19. Zumiranje i "nestajanje" teksta . . . . . . . . . . . . . . . . . . . . . . . 3771.20. Efekat BLUR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3791.21. Statičke senke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3811.22. Efekat isijavanja - GLOW . . . . . . . . . . . . . . . . . . . . . . . . . . 3831.23. Kretanje kroz lavirint . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3851.24. Pretvaranje bitmape u vektorski crtež . . . . . . . . . . . . . . . . . . . 3871.25. Promena oblika fotografije . . . . . . . . . . . . . . . . . . . . . . . . . 389

LITERATURA 395Knjige . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395Internet adrese . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396

Page 9: Us   3 d grafika i animacija - praktikum

vi 3D grafika i animacija - Praktikum

PREDGOVOR

Ova knjiga spada u grupu stručnih dela iz oblasti računarskih nauka, koja pokriva značajnopodručje, koje se izučava na nivou dodiplomskih i poslediplomskih studija danas i u svetui kod nas. Predviđena je da bude Praktikum sa samostalnim vežbama uz udžbenik izpredmeta 3D grafika i animacija koji se izučava na Fakultetu za informatiku i menadž-ment Univerziteta "Singidunum" u Beogradu. Ova knjiga može da se koristi i na ostalimvisokoškolskim ustanovama za predmete koji imaju sličan sadržaj.

Knjiga se sastoji iz tri dela, gde je prvi deo posvećen programu 3DS MAX, a druga dvaprogramu Flash, samo različitim verzijama.

Prvi deo praktikuma za 3D grafiku i animaciju sadrži primere koji se odnose na programskipaket 3DS MAX 9, a primenjivi su i unutar verzije 2009. Ovaj deo nije usko povezan saudžbenikom i vežbe su nezavisne i samostalne. Pored trideset vežbi, prikazano je i parprimera, kao i četrnaest zadataka koje je korisnik u stanju samostalno da izradi. Poredtoga postoji deo koji se direktno odnosi na izradu projekta gde se prikazuje veza izmeđuprograma CorelDRAW i 3DS MAX.

Drugi deo praktikuma za 3D grafiku i animaciju sadrži primere koji se odnose na AdobeFlash Professional CS3 programski alat. Posredno je "povezan" sa udžbenikom za 3Dgrafiku i animaciju. Primeri iz praktikuma se mogu realizovati bez poznavanja teorije izudžbenika, jer u opisu nije izostao ni jedan korak njihove realizacije. Potrebno je jedinonaglasiti da se, u tom slučaju, neće steći odgovarajući stepen znanja. Oni koji su dobroupoznati sa alatom Flash Professional CS3, mogu se koristiti samo praktikumom, dok sepočetnicima preporučuje istovremeno korišćenje obe knjige.

I treći deo praktikuma za 3D grafiku i animaciju sadrži primere koji se odnose na program-ski paket Macromedia Flash Professional 8. Ovaj deo nije usko povezan sa udžbenikomi vežbe su nezavisne i samostalne. Prikazano je dvadesetpet vežbi, korak po korak, takoda budući korisnici mogu da odrade te primere bez preteranog napora.

Kako je već navedeno, primeri su opisani detaljno, gde nijedan korak, neophodan za realiza-ciju istog, nije izostao. Uz opis primera, nalaze se slike koje pomažu boljem razumevanjusvakog njegovog dela. Korišćeni primeri se nalaze na odgovarajućoj lokaciji na serverufakulteta. Svaki je obeležen i posebno grupisan u odgovarajući direktorijum, tj. folder.Pored materijala neophodnog za realizaciju primera, u direktorijumima se nalaze i radnifajlovi kojima se dobija bolji uvid u finalni proizvod.

Na kraju je prikazan spisak literature, s tim što treba napomenuti da je korišćena literaturaprikazana na proizvoljan način. Treba napomenuti da je prikazan i spisak Internet adresarelevantnih za materiju prikazanu u ovom praktikumu.

Slavko Pešić, redovni profesor Mašinskog fakulteta Univerziteta u Beogradu, pomogaonam je krajnje korisnim primedbama i sugestijama, koje je uputio tokom pisanja ovogpraktikuma, i mi koristimo ovu priliku da mu se još jednom zahvalimo.

Beograd, jun 2009. Autori

Page 10: Us   3 d grafika i animacija - praktikum
Page 11: Us   3 d grafika i animacija - praktikum
Page 12: Us   3 d grafika i animacija - praktikum

Glava 1

3DS MAX 9 - Samostalne vežbe

U ovom delu praktikuma biće prikazano dvadeset vežbi koje korisnik može da odradi sâm.Neko posebno predznanje ne treba za izradu ovih vežbi, ali se podrazumeva da korisnikzna osnovne stvari vezane za program 3DS MAX i njegov interfejs.

1.1. Kreiranje Rubikove kocke

Ovaj model je izuzetno jednostavan i potrebno je nekoliko minuta da se odradi.

1. korakTreba podesiti pomoćnu mrežu Grid kako bi se korisnik snašao sa odgovarajućim dimenzi-jama. Treba aktivirati Customize > Grid and Snap Settings i kao rezultat pojavljujese dijalog Grid and Snap Settings sa pripadajućim karticama. Treba aktivirati karticuHome Grid (slika 1.1) i treba podesiti parametre kao što je to prikazano na toj slici.

Slika 1.1. Podešavanje Grid mreže

2. korakSledeći korak je kreiranje kocke čija će dužina stranice biti 50 i čije će strane biti podeljene

Page 13: Us   3 d grafika i animacija - praktikum

2 3D grafika i animacija

na 9 kvadrata. Ovo podešavanje se obavlja u kartici Parameters uz desnu ivicu ekrana(ovo podešavanje je zaokruženo na slici 1.2).

Slika 1.2. Podešavanje parametara kocke

3. korakDesnim tasterom miša treba pritisnuti na kreiranu kocku i iz kontekstnog menija trebaaktivirati Convert To:> Convert to Editable Poly. Menja se odziv uz desnu ivicuekrana gde treba markirati opciju Polygon (slika 1.3).

4. korakTreba markirati sve poligone jednostavnim "hvatanjem" u prozor levim tasterom miša.Kada su markirani svi poligoni kocka postaje crvena na ekranu i tada treba u karticiEdit Polygons aktivirati Settings u okviru komande Bevel. Kao rezultat pojavljujese dijalog Bevel Polygons (slika 1.4) koji će u dva koraka da odradi sve što treba.

5. korakPrvo podešavanje unutar gorepomenutog dijaloga je prikazano na slici 1.5, a rezultat jevidljiv na kocki iza.

6. korakDrugo podešavanje je prikazano na slici 1.6.

7. korakPosle jednostavne dodele nekog materijala napravljanom modelu pojavljuje se slika 1.7kao rezultat rada.

Page 14: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 3

Slika 1.3. Definisanje poligona

Slika 1.4. Podešavanje polja Rubikove kocke

Page 15: Us   3 d grafika i animacija - praktikum

4 3D grafika i animacija

Slika 1.5. Prvo podešavanje polja Rubikove kocke

Slika 1.6. Drugo podešavanje polja Rubikove kocke

Page 16: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 5

Slika 1.7. Jednobojni model Rubikove kocke

8. korakNa primer, ako korisnik dodeli različite materijale ili različute boje, onda je moguće dobitirezultat sličan rezultatu prikazanom na slici 1.8.

Slika 1.8. Model Rubikove kocke sa dodeljenim različitim materijalima

Ovo je samo jedan od načina za kreiranje Rubikove kocke, kao i potencijalnih sličnih ob-jekata. Ako čovek uzme da se "malo igra" unutar programa 3DS MAX, može da napravisjajne stvari koje može da iskoristi i u ovom i u nekom drugom programu.

Page 17: Us   3 d grafika i animacija - praktikum

6 3D grafika i animacija

1.2. Smeštanje teksta na objekat

Ovaj zadatak je jednostavan, a mogu da se dobiju krajnje neočekivani rezultati kojekorisnik može da iskoristi za razne stvari.

1. korakPrvo što treba uraditi je da se kreira kvadar određenih dimenzija: Length je 100, Widthje 140, a Height je 15 (slika 2.1). Ovi parametri su zaokruženi na pomenutoj slici.

Slika 2.1. Definisanje ploče na kojoj će pisati tekst

2. korakSledeći korak je centriranje kvadra unutar scene. Da bi se ovo uradilo procedura je sledeća:treba aktivirati komandu Move i pritisnuti funkcijski taster F12. Kao rezultat pojavljuje sedijalog Move Transform Type-In (slika 2.2) gde sve vrednosti treba podesiti da imajuvrednost 0 (nula). Kao posledica toga je premeštanje kvadra u sam centar celokupneaktivne scene.

3. korakUz desnu ivicu treba aktivirati karticu Create (zaokružena na slici 2.3) i unutar njetreba aktivirati karticu Shapes (nacrtan je kvadrat oko njene ikonice na slici 2.3) i trebastartovati komandu Text (slika 2.3). U ovom primeru otkucan je tekst 3DS MAX 9,primenjen je Arial font, a veličina fonta je 25. Tekst treba smestiti proizvoljno bilo gdeunutar scene.

Page 18: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 7

Slika 2.2. Centriranje ploče

Slika 2.3. Centriranje ploče

Page 19: Us   3 d grafika i animacija - praktikum

8 3D grafika i animacija

4. korakDa ne bi bilo problema sa vizuelizacijom slova, trebalo bi im dodati visinu. Za to je"zadužena" komanda Extrude koja se nalazi u listi modifikatora uz desnu ivicu ekrana(slika 2.4).

Slika 2.4. Dodavanje visine slovima

5. korakU ovom slučaju je definisana visina slova 5, a ostale opcije unutar komande Extrude supo automatizmu prihvaćene. Kao rezultat promene komande Extrude dobijena su trodi-menzionalna slova koja će se lepo vizuelizovati (slika 2.4).

6. korakSada treba centrirati i tekst unutar scene, ali tako da se i tekst vidi. Procedura je sličnaproceduri u koraku 2: markira se tekst, aktivira se komanda Move i pritisne se funkcijskitaster F12.

U dijalogu sve vrednosti treba podesiti na vrednost 0, sem vrednosti Absolute World -Z gde treba podesiti da vrednost bude 13 (slika 2.5).

7. korakKao rezultat slova se nalaze na ploči i vide se sa svih strana. Ako korisnik hoće daeksperimentiše, onda može da dođe do zanimljivih i krajnje neočekivanih i sjajnih rezultata(slike 2.6 i 2.7), koje može da iskoristi za svoje potrebe.

Page 20: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 9

Slika 2.5. Centriranje slova u odnosu na ploču

Slika 2.6. Vizualizovana ploča bez materijala

Page 21: Us   3 d grafika i animacija - praktikum

10 3D grafika i animacija

Slika 2.7. Vizualizovana ploča sa dodeljenim materijalima

Ovo je samo jedan od načina za kreiranje teksta koji se vezuje za objekat, a unutarprograma 3DS MAX ovaj problem može da se reši na raznorazne načine. Ako čovek uzmeda se "malo igra" unutar programa 3DS MAX, može da napravi sjajne stvari koje možeda iskoristi i u ovom i u nekom drugom programu. Potvrda ovoga su i same slike 2.6 i2.7 koja pokazuje samo mali deo mogućnosti ovog programa.

1.3. Šahovska figura kralja

Model šahovske figure kralja je malo složeniji zadatak, ali korisnik može da iskoristi ovajput kako bi kreirao modele svih šahovskih figura.

1. korakTreba podesiti pomoćnu mrežu Grid kako bi se korisnik snašao sa odgovarajućim dimenzi-jama. Treba aktivirati Customize > Grid and Snap Settings i kao rezultat pojavljujese dijalog Grid and Snap Settings sa pripadajućim karticama. Treba aktivirati karticuHome Grid (slika 3.1) i treba podesiti parametre kao što je to prikazano na toj slici.

2. korakTreba preći u vizir Front i unutar njega trebalo bi nacrtati polovinu konture željene figure.

Page 22: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 11

Treba aktivirati Create > Shapes i unutar podmenija Splines aktivirati komandu Line(slika 3.2).

Slika 3.1. Podešavanje Grid mreže

Slika 3.2. Polovina konture šahovske figure kralja

3. korakKonture šahovske figure kralja korisnik može da crta proizvoljno. Jedan mogući izgledpolovine konture prikazan je na slici 3.2. Korisniku se ostavlja na volju da iscrta konturukakvu hoće.

Page 23: Us   3 d grafika i animacija - praktikum

12 3D grafika i animacija

4. korakKada je završena kontura treba aktivirati modifikator Lathe iz liste modifikatora. Podeša-vanje parametara treba da bude kao na slici 3.3. Rezultat primene gorepomenutog modi-fikatora prikazan je na slici 3.3.

Slika 3.3. Definisanje 3D modela šahovske figure

5. korakTreba preći u Front vizir i na vrhu šahovske figure treba ubaciti loptu poluprečnika 15.

Na slici 3.4 prikazana je lopta na vrhu figure, a uz desnu ivicu ekrana se vide parametrisa njihovim vrednostima.

6. korakU gornjem delu šahovske figure treba nacrtati konturu komandom Line koja podseća nakrst, jer je imaju sve šahovske figure kralja, bez obzira na proizvođača.

Na slici 3.5 prikazana je moguća kontura gorepomenutog krsta.

7. korakSa markiranom konturom treba aktivirati modifikator Extrude i dodati debljinu nacrtanojkonturi (slika 3.5).

U ovom slučaju debljina konture je 5, a ostali parametri nisu modifikovani, što znači dasu potvrđene ponuđene vrednosti.

Page 24: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 13

Slika 3.4. Kugla na vrhu šahovske figure

Slika 3.5. Stilizovani krst na vrhu šahovske figure

Page 25: Us   3 d grafika i animacija - praktikum

14 3D grafika i animacija

8. korakNa ovaj način je definisana samo polovina pomenutog stilizovanog krsta. Desnim tasterommiša treba aktivirati tu polovinu i iz kontekstnog menija treba izabrati komandu Clone.

Na ovaj način napravljena je kopija definisane polovine, ali je smeštena preko postojeće.

9. korakKomandom Move korisnik može da podesi novi položaj kloniranog dela i da ga smesti kakotreba.

Treba napomenuti da je opcija Snap aktivna, što znači da se kursor miša vezuje zaspecifične tačke na objektu ili za presečne tačke mreže Grid.

Kao rezultat ovog kopiranja pojavljuje se slika 3.6.

Slika 3.6. 3D model šahovske figure kralja

10. korakKomandom Plane korisnik može da nacrta ravan koja će predstavljati prateću šahovskutablu.

Ravni treba dodeliti mapu pod nazivom Checker koja predstavlja crno-bela polja šahovsketable, figuri kralja treba dodeliti materijal starog drveta i treba podesiti osvetljenje.

Mogući rezultat je prikazan na slici 3.7.

Page 26: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 15

Slika 3.7. Vizualizovani 3D model sa okolnom scenom

Ovo je samo jedan od mnogo načina za kreiranje složenijih kontura, a unutar programa3DS MAX ovakav problem može da se reši na raznorazne načine. Ako čovek uzme da se"malo igra" unutar programa 3DS MAX, lako može da pronađe dodatne načine kako binapravio sjajne stvari koje može da iskoristi.

1.4. Apstraktni oblik

Sledi model proizvoljnog apstraktnog oblika, a procedura za njegovo kreiranje je jednos-tavna.

1. korakPrvi korak je definisanje lopte u viziru Perspective (slika 4.1). Poluprečnik lopte je 30,a broj segmenata neka bude 45 (slika 4.1).

2. korakTreba pritisnuti desnim tasterom miša na loptu i iz kontekstnoj menija treba aktiviratisledeću komandu: Convert To: > Convert to Editable Poly.

3. korakU podmeniju Selections, uz desnu ivicu ekrana, treba markirati opciju Polygon (slika4.2).

4. korakTreba aktivirati kombinaciju tastera sa tastature Ctrl+A kako bi se markirali svi poligoni,

Page 27: Us   3 d grafika i animacija - praktikum

16 3D grafika i animacija

i koji se vide i koji se ne vide.

Slika 4.1. Inicijalni model lopte

Slika 4.2. Izvlačenje svih poligona lopte

Page 28: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 17

5. korakTreba aktivirati komandu Extrude i u pripadajućem dijalogu (slika 4.2) treba podesitiparametre na sledeći način: u polju Extrusion Type treba markirati opciju By Polygon,a u polju Extrusion Height treba ukucati vrednost 20. Kao rezultat pojavljuje se slika4.2.

6. korakTreba ponovo aktivirati kombinaciju tastera Ctrl+A kako bi selektovali svi poligoni.

7. korakU listi modifikatora treba izabrati modifikator MeshSmooth i preporučljivo je da se samopotvrde ponuđene vrednosti. Sve oštre ivice su zaobljene i apstraktni model poprimaizgled kao na slici 4.3.

Slika 4.3. Zaobljene ivice poligona na lopti

8. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme da sekreira novi materijal za apstraktni model.

9. korakTreba markirati loptu u gornjem levom uglu kao referencu za kreiranje materijala. Iz

Page 29: Us   3 d grafika i animacija - praktikum

18 3D grafika i animacija

dijaloga Material/Map Browser treba prevući na tu loptu Raytrace materijal (slika4.4).

Slika 4.4. Kreiranje novog materijala

10. korakTreba podesiti još neke parametre. Boju Diffuse treba izabrati i podesiti onako kakokorisnik želi. Treba markirati Transparency i treba izabrati sivu boju otprilike na srediniskale između crne i bele boje (slika 4.4).

11. korakVrednost Specular Level treba podesiti na 80, a vrednost Glossiness na 90 (slika4.4).

12. korakTreba otvoriti podmeni Maps (slika 4.4) i treba aktivirati mape Reflect i Bump. Trebaubaciti Falloff mapu u Reflect slot mape i Noise mapu u Bump slot mape (slika 4.4).

13. korakPodešeni materijal treba dodeliti apstraktnom modelu jednostavnim prevlačenjem uzorkalopte iz gornjeg levog ugla sa slike 4.4.

14. korakTreba aktivirati taster 8 ili Rendering > Environment i u dijalogu u polju Backgroundtreba podesiti da boja pozadine prilikom rendera bude bela.

Page 30: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 19

15. korakNa kraju treba aktivirati Render. Renderovanje (vizuelizacija) može da potraje i nekihdesetak minuta, što zavisi od računara koji korisnik ima. Kao rezultat cele ove pričepojavljuje se slika 4.5.

Slika 4.5. Vizualizovani apstraktni model

Ovo je jedan od načina za kreiranje složenih kontura, a unutar programa 3DS MAX ovakvavrsta problema može da se reši na razne načine. Ako se korisnik "malo igra" unutar ovogprograma, lako može da pronađe dodatne načine kako bi napravio sjajne stvari koje možeda iskoristi.

1.5. Kreiranje prozora sa staklom

Ovaj model je malo složeniji, ali nije preterano komplikovan. Biće prikazan jedan od na-čina za kreiranje prozorskog okna sa staklom, kao i dodela odgovarajućih materijala.

1. korakTreba podesiti pomoćnu mrežu Grid kako bi se korisnik snašao sa odgovarajućim dimenzi-jama. Treba aktivirati Customize > Grid and Snap Settings i kao rezultat pojavljujese dijalog Grid and Snap Settings sa pripadajućim karticama. Treba aktivirati karticuHome Grid (slika 5.1) i treba podesiti parametre kao što je to prikazano na toj slici.

2. korakU sledećem koraku prelazi se u vizir Front. Treba aktivirati komandu Line unutar Shapespodmenija iz Create kartice uz desnu ivicu ekrana (slika 5.2). Treba aktivirati i alatkuSnaps Toggle (zakružena je na slici 5.2) kako bi se kursor miša "vezivao" za presečnetačke Grid mreže.

Page 31: Us   3 d grafika i animacija - praktikum

20 3D grafika i animacija

Slika 5.1. Podešavanje Grid mreže

3. korakPomenutom komandom Line treba nacrtati polovinu konture okvira prozora. U ovomslučaju širina i visina prozora imaju vrednost 100, a širina daske prozora je 10 (slika 5.2).Kada se definiše poslednja tačka konture, na pitanje da li treba zatvoriti Spline liniju,treba odgovoriti pritiskom na taster Yes.

Slika 5.2. Crtanje konture drvenog dela prozora

4. korakTreba od ovog ravanskog modela napraviti 3D model. Treba aktivirati modifikator pod

Page 32: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 21

nazivom Extrude koji se nalazi unutar liste modifikatora. Za debljinu okvira prozora trebadefinisati veličinu 10 (slika 5.3).

Slika 5.3. Definisanje debljine drvenog dela prozora

5. korakI dalje je aktivan vizir Front.

Komandom Mirror (zaokružena je na slici 5.4) treba napraviti kopiju polovinu prozorakao slike u ogledalu i na taj način se formira okvir prozora u celosti. Vrši se preslikavanjeu odnosu na XY ravan, Offset vrednost je -30, a Clone Selection opcija je Copy.Rezultat se vidi na slici 5.4.

6. korakSledeći korak je crtanje držača stakla komandom Line. I ovo je najlakše obaviti u Frontviziru, a visina ili širina ovih drvenih držača je 10 (slika 5.5).

Kada se definiše poslednja tačka konture, na pitanje da li treba zatvoriti Spline liniju,treba odgovoriti pritiskom na taster Yes, u slučaju oba držača stakla.

7. korakOvi držači su duplo tanji od glavnog okvira prozora, što znači da je debljina ovih držača5. To će se odraditi komandom Extrude, ali najpre ove konture moraju da se postave naželjeno mesto, što znači da moraju da se pomere od ivice glavnog okvira 2.5 ka unutra.To je najbolje uraditi u Perspective viziru.

Page 33: Us   3 d grafika i animacija - praktikum

22 3D grafika i animacija

Slika 5.4. Kompletiranje drvenog okvira prozora

Slika 5.5. Definisanje drvenih držača stakla na prozoru

Page 34: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 23

8. korakTreba aktivirati komandu Move i markirati oba držača držeći konstantno pritisnut Ctrltaster. Pojavljuje se prateći koordinatni sistem i očigledno je da ovi držači moraju da sepomere po Y osi za vrednost od -2.5 (slika 5.6).

Slika 5.6. Podešavanje položaja drvenih držača stakla na prozoru

9. korakTreba od ovih ravanskog modela napraviti 3D modele. Treba aktivirati modifikator podnazivom Extrude koji se nalazi unutar liste modifikatora. Za debljinu okvira prozora trebadefinisati veličinu 5 (slika 5.7).

10. korakSledeći korak je crtanje stakla komandom Line. I ovo je najlakše obaviti u Front viziru,a visina i širina stakla je 90 (slika 5.8).

Kada se definiše poslednja tačka konture, na pitanje da li treba zatvoriti Spline liniju,treba odgovoriti pritiskom na taster Yes.

11. korakTreba od ovog ravanskog modela napraviti 3D modele. Treba aktivirati modifikator podnazivom Extrude koji se nalazi unutar liste modifikatora. Za debljinu stakla treba defini-sati veličinu 2.

Page 35: Us   3 d grafika i animacija - praktikum

24 3D grafika i animacija

Slika 5.7. Kreiranje 3D modela držača stakla

Slika 5.8. Definisanje veličine stakla na prozoru

Page 36: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 25

12. korakTreba aktivirati komandu Move i markirati staklo. Pojavljuje se prateći koordinatni sistemi očigledno je da staklo mora da se pomeri po Y osi za vrednost od -4 (slika 5.9).

Slika 5.9. Definisanje položaja stakla

13. korakSledi kreiranje materijala za staklo i učitavanje materijala za drvene delove prozora. Pri-tiskom na taster M treba aktivirati Material Editor.

Treba markirati prvi uzorak lopte u gornjem levom uglu i treba podesiti dva parametra -Opacity smanjiti vrednost na 30 i treba izabrati odgovarajuću boju za staklo u polju podnazivom Self-Illumination.

Boja za staklo je izabrana da bude svetlo siva sa koordinatama boje R:210, G:210 iB:210 (slika 5.10).

14. korakZa drvene delove treba izabrati materijal Wood_old (Standard) koji se nalazi unutar3dsmax.mat biblioteke materijala (slika 5.11).

15. korakTreba učitati ovu biblioteku materijala i gorepomenuti materijal treba prevući na uzorak

Page 37: Us   3 d grafika i animacija - praktikum

26 3D grafika i animacija

lopte ispod uzorka za staklo (slika 5.11).

Slika 5.10. Podešavanje parametara materijala

Slika 5.11. Podešavanje materijala za drvene delove prozora

Page 38: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 27

Slika 5.12. Dodeljivanje materijala objektima u sceni

Slika 5.13. Podešavanje fotografije kao pozadine

Page 39: Us   3 d grafika i animacija - praktikum

28 3D grafika i animacija

16. korakSada ove materijale treba dodeliti odgovarajućim objektima. To se obavlja jednostavnimprevlačenjem uzoraka materijala na odgovarajuće objekte. Rezultat je vidljiv na slici 5.12.

17. korakDa bi se pokazalo kakvo je staklo najbolje je postaviti neku fotografiju u pozadinuscene kako bi se video efekat. Fotografija se postavlja u pozadinu putem Rendering> Environment i markiranjem polja Use Map, a onda treba izabrati odgovarajuću fo-tografiju (slika 5.13).

18. korakPritiskom na taster F10 se aktivira dijalog Render Scene i pritiskom na taster Renderaktivira se vizuelizacija sa uobičajenim parametrima. Rezultat je vidljiv na slici 5.14.

Slika 5.14. Prozor i okolina koja se vidi kroz njega

Ovo je samo jedan od mnogo načina za kreiranje prozora, kao i potencijalnih sličnihobjekata. Ako se korisnik malo udubi u problematiku pronaći će još sijaset načina zarešenje konkretnog problema.

1.6. Kreiranje šolje za belu kafu

Model šolje za belu kafu nije preterano komplikovan, a uvodi korisnika u upotrebu Bulovihoperacija sa solidima. Bulove operacije omogućavaju kreiranje složenih objekata pomoću

Page 40: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 29

osnovnih objekata kao što su lopta, valjak i slično.

1. korakPrvi korak je kreiranje valjka za zaobljenim ivicama. Za to je potrebno aktivirati komanduChamferCyl unutar Extended Primitives uz desnu ivicu ekrana (slika 6.1).

Slika 6.1. Kreiranje valjka sa zaobljenim ivicama

2. korakParametri valjka su sledeći: poluprečnik je 30, visina mu je 60, a poluprečnik zaobljenjaivica je 1.5. Broj segmenata je porizvoljan, ali ako je taj broj malo veći to su zakrivljenepovršine glatkije (slika 6.1).

3. korakSledeći korak je kreiranje običnog valjka poluprečnika 28 i visine 80 komandom Cylinderiz podmenija Standard Primitives (slika 6.2).

4. korakTrebe oba valjka smestiti u centar scene. To se obavlja aktiviranjem komande Move ipritiskanjem funkcijskog tastera F12. Sve vrednosti unutar dijaloga Transform Type-Intreba podesiti na vrednost 0.

5. korakTreba markirati unutrašnji valjak, aktivirati komandu Move i pritisnuti taster F12. U poljuAbsolute World treba podesiti veličinu Z na 2, jer toliko treba izdići unutrašnji valjakkako bi ostalo dno šolje. Rezultat je vidljiv na slici 6.3.

Page 41: Us   3 d grafika i animacija - praktikum

30 3D grafika i animacija

Slika 6.2. Kreiranje "običnog" valjka

Slika 6.3. Centriranje valjaka

Page 42: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 31

6. korakSada treba primeniti Bulovu operaciju oduzimanja, gde od zaobljenog spoljašnjeg valjkatreba oduzeti unutrašnji standardni valjak. Na taj način od dva valjka se dobija telo šolje.

7. korakTreba aktivirati komandu Boolean iz podmenija Compound Objects uz desnu ivicuekrana (slika 6.4). Treba markirati spoljašnji valjak, treba izabrati opciju Subtraction(A-B) iz polja Operation, a pritiskom na taster Pick Operand B treba izabrati objekatkoji se oduzima od već markiranog objekta A. Treba kliknuti levim tasterom miša naunutrašnji valjak i rezultat je vidljiv na slici 6.4.

Slika 6.4. Oduzimanje zapremine unutrašnjeg od spoljašnjeg valjka

8. korakDobijeno je telo šolje spoljašnjeg poluprečnika 30, visine 60 i debljine zida 2.

9. korakSledeći korak je kreiranje drške šolje na krajnje jednostavan način.

10. korakTreba aktivirati vizir Left u njemu treba nacrtati polovinu torusa.

11. korakTreba aktivirati komandu Torus iz podmenija Standard Primitives. Spoljašnji polu-

Page 43: Us   3 d grafika i animacija - praktikum

32 3D grafika i animacija

prečnik torusa je 15, poluprečnik tela torusa je 4, a markiranjem polja Slice On i podeša-vanjem vrednosti Slice From na 0.0 i Slice To na 180.0 definiše se desna polovinatorusa (slika 6.5).

Slika 6.5. Kreiranje drške šolje

Slika 6.6. Pozicioniranje drške šolje

Page 44: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 33

12. korakKomandom Move treba pomeriti dršku šolje ulevo po X osi da drška malo "uđe" u šoljuunutar aktivnog vizira Left. Na taj način je kompletiran jednostavan model šolje za belukafu (slika 6.6).

13. korakKomandom Plane iz podmenija Standard Primitives treba nacrtati ravan kao podloguna kojoj stoji šolja za belu kafu.

14. korakSledi dodela materijala za šolju i za ravan. Pritiskom na taster M aktivira se MaterialEditor. Za šolju treba izabrati materijal Paint Metal Flake iz 3dsmax.mat bibliotekematerijala, a materijal Brick Yellow za podlogu koju predstavlja ravan (slika 6.7).

Slika 6.7. Biranje materijala za objekte unutar scene

15. korakMaterijale treba dodeliti objektima jednostavnim prevlačenjem uzoraka iz dijaloga podnazivom Material Editor do objekata.

16. korakTreba podesiti da boja pozadine bude bela i to se obavlja putem Rendering > Environ-

Page 45: Us   3 d grafika i animacija - praktikum

34 3D grafika i animacija

ment i u polju Background treba izabrati belu boju kao boju pozadine.

17. korakTreba postaviti dva Omni svetlosna izvora iz podmenija Lights na proizvoljne lokacije.Treba aktivirati za oba svetlosna izvora Shadows On kako bi se kreirale i senke prilikomvizuelizacije (slika 6.8).

Slika 6.8. Dodeljivanje materijala objekatima unutar scene

18. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 6.9.

Slika 6.9. Vizualizovana scena sa šolom za belu kafu

Page 46: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 35

Treba napomenuti da je ovo jedan od načina za kreiranje krajnje složenih objekata pri-menom Bulovih operacija, koje to omogućavaju međusobnim modifikovanjem jednostavnihentiteta.

1.7. Kreiranje pehara

Kreiranje pehara primenom Bezijeovih krivih linija znatno pojednostavljuje posao koris-niku.

1. korakPrvi korak je kreiranje polovine konture pehara primenom NURBS krive. Treba aktiviratiu meniju Create i podmeniju Shapes komandu NURBS Curves. Unutar ove komandetreba pritisnuti taster Point Curve koji omogućava korisniku da definiše tačke kroz kojekriva linija prolazi (slika 7.1).

2. korakKorisnik levim tasterom miša definiše prolazne tačke krive linije i na taj način definišesamu konturu (slika 7.1).

Slika 7.1. Crtanje polovine provizorne konture pehara

3. korakNe može uvek da se definiše besprekoran oblik krive linije, tako da postoji mogućnostda se kontura malo "dotera". Treba aktivirati meni Modify i stablo NURBS Curve treba"otvoriti" pritiskom na malu ikonicu znaka +. U otvorenom stablu treba markirati opciju

Page 47: Us   3 d grafika i animacija - praktikum

36 3D grafika i animacija

Point kako bi se omogućilo korisniku da radi sa tačkama.

4. korakAktiviranjem komande Move korisnik može da pojedinačne tačke premešta na novu lokacijukako bi dobio konturu kakvu želi (slika 7.2).

Slika 7.2. Rad sa kontrolnim tačkama krive linije

5. korakDa bi se od ove konture dobio pehar treba aktivirati Lathemodifikator iz liste modifikatora(slika 7.3). Da bi pehar ličio na nešto treba podesiti vrednost Segments na veću vrednost.U ovom slučaju izabrana je vrednost 40. Da bi se dobio prikazani oblik treba aktiviratitaster Max (na slici 7.3 stoji kursor miša na njemu).

6. korakKomandom Plane iz podmenija Standard Primitives treba nacrtati ravan kao podloguna kojoj stoji pehar.

7. korakSledi dodela materijala za pehar i za ravan. Pritiskom na taster M aktivira se MaterialEditor. Za pehar treba izabrati materijal Paint Metal Flake iz 3dsmax.mat bibliotekematerijala, a materijal Brick Yellow za podlogu koju predstavlja nacrtana ravan (slika7.4).

8. korakMaterijale treba dodeliti objektima jednostavnim prevlačenjem uzoraka iz Material Edi-tora do objekata.

Page 48: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 37

Slika 7.3. 3D model pehara

Slika 7.4. Biranje materijala

Page 49: Us   3 d grafika i animacija - praktikum

38 3D grafika i animacija

9. korakTreba podesiti da boja pozadine bude bela i to se obavlja putem Rendering > Environ-ment i u polju Background treba izabrati belu boju kao boju pozadine.

10. korakTreba postaviti dva Omni svetlosna izvora iz podmenija Lights na proizvoljne lokacije.Treba aktivirati za oba svetlosna izvora Shadows On kako bi se kreirale i senke prilikomvizuelizacije (slika 7.5).

Slika 7.5. Dodeljivanje materijala objektima

11. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 7.6.

Slika 7.6. Vizualizovana scena

Page 50: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 39

Ovo je jednostavan primer kako se kreira složeni objekat primenom komande koja je ustanju da napravi solid rotiranjem odgovarajuće konture oko definisane ose u prostoru.

1.8. Travnjak

Ovde će biti objašnjen put ka kreiranju travnjaka koji se pokazao kao izuzetno brz i efi-kasan.

1. korakPrvi korak je kreiranje ravni koja će predstavljati osnovu (zemljište) i za to je najboljeaktivirati Top vizir.

2. korakRavan se iscrtava komandom Plane unutar menija Standard Primitives. Ravan jekvadratnog oblika dužine stranice 200, s tim što treba podesiti da ravan ima po 16segmenata i po jednoj i po drugoj osi. Ovu ravan treba nazvati Zemlja (slika 8.1).

Slika 8.1. Crtanje ravni

3. korakSledeći korak je modelovanje valjka čiji će poluprečnik osnove biti 10, a visina 50. Ostaliparametri su: Height Segments ima vrednost 3, Cap Segments ima vrednost 1, Sidesima vrednost 18, markirana opcija Smooth. Treba ovaj valjak nazvati Trava (slika 8.2).

4. korakTreba modifikovati valjak. Najpre treba izabrati (markirati) valjak i iz liste modifikatora

Page 51: Us   3 d grafika i animacija - praktikum

40 3D grafika i animacija

Modify treba izabrati komandu Taper. Parametru Amount treba dodeliti vrednost 2, aparametru Curve treba dodeliti vrednost -2. Na ovaj način se dobija konkavni valjak kaošto se vidi na slici 8.3.

Slika 8.2. Definisanje osnovnog valjka

Slika 8.3. Modifikovanje valjka

Page 52: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 41

Slika 8.4. Modelovanje trave

Slika 8.5. Definisanje i dodeljivanje materijala

Page 53: Us   3 d grafika i animacija - praktikum

42 3D grafika i animacija

5. korakTreba aktivirati komandu Scatter unutar Geometry menija i Compound Objects pod-menija. Treba napomenuti da je ostao konkavni valjak markiran. Treba pritisnuti tasterPick Distribution Object i markirati ravan koja je nazvana Zemlja. U oblasti SourceObject Parameters treba u polju Duplicates ukucati vrednost 500, u polju VertexChaos treba ukucati vrednost 5 i u oblasti Distribution Object Parameters trebamarkirati opciju Random Faces. Rezultat je vidljiv na slici 8.4.

6. korakPritiskom na taster M aktivira se Material Editor. Materijal za ravan je proizvoljan, aza travu treba podesiti materijal na sledeći način: treba izabrati Blinn (slika 8.5), trebamarkirati polje Wire i treba u oblasti Self-Illumintion izabrati zelenu boju. U ovomslučaju izabrana je tamno zelena boja sa sledećim koordinatama - R:3, G:56 i B:6.

7. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzoraka na odgovarajućeobjekte.

8. korakTreba podesiti da boja pozadine bude bela i to se obavlja putem Rendering > Environ-ment i u polju Background treba izabrati belu boju kao boju pozadine.

9. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivira pri-tiskom na taster Render. Rezultat rada je prikazan na slici 8.6.

Slika 8.6. Travnjak

Ovo je jednostavniji primer kako autor može da kreira travnjak ispred kuće, ako radi nekiprojekat iz eksterijera i želi da pokaže krajnjem korisniku kako to izgleda u realnom svetu.

Page 54: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 43

1.9. Pravljenje kristala

Ovde će biti objašnjen put ka kreiranju improvizovanog kristala unutar programa 3DSMAX. Primer nije preterano težak, ali korisnici mogu da vide da i ovakve stvari mogu dase naprave unutar ovog programa, a ne samo unutar programa za obradu slika.

1. korakPrvi korak je kreiranje "lopte" komandom Geosphere i za to je najbolje aktivirati Pers-pective vizir. Poluprečnik ove "lopte" je 25, broj segmenata 4, a unutar oblasti Geode-sic Base Type treba markirati opciju Tetra. Na kraju treba isključiti opciju Smooth.Rezultat primene ovih parametara prikazan je na slici 9.1.

Slika 9.1. Kreiranje inicijalne lopte sa definisanim specifičnim parametrima

2. korakSledeći korak je aktiviranje kontekstnog menija pritiskom desnim tasterom miša na ob-jekat. Iz kontekstnog menija treba aktivirati Convert To: > Convert to EditablePatch.

3. korakIz istog kontekstnog menija treba aktivirati komandu Extrude Patch.

4. korakStalno pritisnutim levim kursorom miša mogu da se razvlače poligone iz definisanog ob-jekta (slika 9.2).

Page 55: Us   3 d grafika i animacija - praktikum

44 3D grafika i animacija

Slika 9.2. Razvlačenje poligona

Slika 9.3. Završeno razvlačenje poligona i gotov model

Page 56: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 45

5. korakŠto više poligona se razvuče to je kompleksniji objekat. U okviru aktivne komandeExtrude Patch korisnik može, usput, da koristi i komande tipa Rotate, Arc Rotatei slično. Kao rezultat primene pomenute komande pojavljuje se slika 9.3.

6. korakSledi dodatne podešavanje. Iz liste modifikatora Modify treba aktivirati modifikatorMeshSmooth i unutar ove komande treba samo promeniti vrednost promenljive Iterationna 2. Ništa drugo ne treba menjati. Rezultat primene ovog podešavanja prikazan je naslici 9.4.

Slika 9.4. Modifikovani 3D model kristala

7. korakTreba pritisnuti desnim tasterom miša na novonastali objekat i aktivirati komandu Cloneiz kontekstnog menija. U pratećem dijalogu za kloniranje u oblasti Object treba markiratiopciju Copy.

8. korakTreba markirati novonastalu kopiju i primenom komande Select and Uniform Scaletreba je smanjiti na proizvoljnu veličinu.

9. korakKomandom Move treba tu smanjenu kopiju prevući u prvi plan (slika 9.5).

Page 57: Us   3 d grafika i animacija - praktikum

46 3D grafika i animacija

Slika 9.5. Dva kristala jedan ispred drugog

10. korakPritiskom na taster M aktivira se Material Editor. Iz biblioteke materijala 3dsmax.mattreba učitati (prevući do uzorka) materijal Reflection_Lake_Gold (Standard). Upodmeniju Maps treba aktivirati i opciju Opacity, a mapa koja se dodeljuje ovoj opciji jeFalloff (slika 9.6).

Slika 9.6. Definisanje materijala

Page 58: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 47

11. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzoraka na odgovarajućeobjekte.

12. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 9.7.

Slika 9.7. Vizualizovani kristal

Ovo je samo jedan od načina za kreiranje kompleksnih oblika i sjajnih vizuelizovanihprikaza koji mogu da budu korisni i koji mogu da se upotrebe unutar drugih programa.

1.10. Staklene cevi

Ovde će biti objašnjen put ka kreiranju improvizovanih staklenih cevi unutar programa3DS MAX. Primer nije preterano težak, ali korisnici mogu da vide da i ovakve stvarimogu da se naprave unutar ovog programa, a ne samo unutar programa za obradu slika.

1. korakPrvi korak je kreiranje solida Torus Knot i za to je najbolje aktivirati Perspective vizir.Ova komanda se aktivira iz menija Geometry i iz podmenija Extended Primitives.

2. korakTreba definisati više ovih objekata i da budu na različitim lokacijama i da budu različiteveličine. Mogući izgled modela je prikazan na slici 10.1.

2. korakPritiskom na taster M aktivira se Material Editor. Iz biblioteke materijala 3dsmax.mattreba učitati (prevući do uzorka) materijal po nazivu Reflection_Lake (Standard). Upodmeniju Maps treba aktivirati i opciju Opacity, a mapa koja se dodeljuje ovoj opciji jeFalloff (slika 10.2).

Page 59: Us   3 d grafika i animacija - praktikum

48 3D grafika i animacija

Slika 10.1. Kreiranje modela

Slika 10.2. Učitavanje materijala i dodeljivanje mapa

Page 60: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 49

3. korakUnutar Anisotropic Basic Parameters treba podesiti boje Ambient, Diffuse i Spe-cular:

• za boju Ambient izabrane su sledeće koordinate boje R:0, G:132 i B:193;

• za boju Diffuse izabrane su sledeće koordinate boje R:72, G:148 i B:198;

• za boju Specular izabrane su sledeće koordinate boje R:32, G:105 i B:196.

Ove boje i njihov smeštaj unutar dijaloga je prikazan na slici 10.3.

Slika 10.3. Definisanje parametara materijala

4. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzorka na odgovarajućeobjekte.

5. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 10.4.

Page 61: Us   3 d grafika i animacija - praktikum

50 3D grafika i animacija

Slika 10.4. Vizualizovana scena

6. korakTreba podesiti da boja pozadine bude plava i to se obavlja putem Rendering > Environ-ment i u polju Background treba izabrati plavu boju (njene koordinate su R:0, G:0 iB:193) kao boju pozadine.

7. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 10.5.

Slika 10.5. Vizualizovana scena sa belom pozadinom

Ovo je samo jedan od načina za kreiranje kompleksnih i sjajnih vizuelizovanih prikaza kojimogu da budu korisni i koji mogu da se upotrebe unutar drugih programa, kao što suprogrami za obradu slika.

Page 62: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 51

1.11. Kristalna kuglaOvde će biti objašnjen put ka kreiranju kristalne kugle koja može da se iskoristi akose prikazuje enterijer neke diskoteke, unutar programa 3DS MAX. Primer nije preteranotežak, ali korisnici mogu da vide da i ovakve stvari mogu da se naprave unutar ovogprograma, a ne samo unutar programa za obradu slika.

1. korakPrvi korak je kreiranje lopte i za to je najbolje aktivirati Perspective vizir. Ova komandase aktivira iz menija Geometry i iz podmenija Standard Primitives.

2. korakU ovom primeru definisana je lopta poluprečnika 50 i sa brojem segemenata 55 (slika11.1).

Slika 11.1. Definisanje modela staklene kugle

3. korakPritiskom na taster M aktivira se Material Editor. U oblasti Shader Basic Para-meters treba markirati opcije Face map, 2-Sided i Faceted (slika 11.2).

4. korakU podmeniju Maps treba aktivirati i opciju Opacity, a mapa koja se dodeljuje ovoj opcijije Falloff (slika 11.2).

5. korakU podmeniju Maps treba aktivirati i opciju Refelction, a mapa koja joj se dodeljuje je

Page 63: Us   3 d grafika i animacija - praktikum

52 3D grafika i animacija

Reflection Map #19 (Chromic.jpg) koja se nalazi u 3dsmax.mat biblioteci materijala(slika 11.2).

Slika 11.2. Definisanje materijala

6. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzorka na odgovarajući ob-jekat.

7. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivira pri-tiskom na taster Render. Rezultat rada je prikazan na slici 11.3.

Slika 11.3. Vizualizovana kristalna kugla

Page 64: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 53

Ovo je možda najjednostavniji način za kreiranje staklene kugle za diskoteke koja je krajnjeprimenjiva ako se radi projekat pratećeg enterijera.

1.12. Žičani model

Ovde će biti objašnjen put ka kreiranju proizvoljnog žičanog modela. U ovom slučajuiskoristiće se model izuvijanog trodimenzionalnog torusa.

1. korakPrvi korak je kreiranje solida Torus Knot i za to je najbolje aktivirati Perspective vizir.Ova komanda se aktivira, kao što je već pominjano, iz menija Geometry i iz podmenijaExtended Primitives.

2. korakKorisnik može da definiše dimenzije ovog solida krajnje proizvoljno, a dimenzije u ovomprimeru su vidljive na slici 12.1.

Slika 12.1. Kreiranje inicijalnog solida

3. korakPritiskom na taster M aktivira se Material Editor. U oblasti Shader Basic Para-meters treba markirati opciju Wire, kako bi se definisani solid prikazao kao žičani model.Na slici 12.2 ovaj parametar je markiran (selektovan).

Page 65: Us   3 d grafika i animacija - praktikum

54 3D grafika i animacija

4. korakU oblasti Extended Parameters treba povećati "debljinu" linije žičanog modela pove-ćanjem veličine Size na 2 u polju Wire (slika 12.2).

5. korakU podmeniju Maps treba aktivirati opciju Diffuse Color, a mapa koja joj se dodeljujeje Swirl koja se nalazi u učitanoj biblioteci materijala (slika 12.2). Parametre učitanemape ne treba menjati.

Slika 12.2. Biranje i podešavanje materijala

6. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzorka na odgovarajući ob-jekat.

7. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivira pri-tiskom na taster Render. Rezultat rada je prikazan na slici 12.3.

8. korakKorisnik sada može malo da se igra i eksperimentiše.

Page 66: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 55

Slika 12.3. Vizualziovana inicijalna scena

Slika 12.4. Dodatno podešavanje scene

9. korakKomandom Plane iz menija Standard Primitives treba da nacrta ravan koja presecadefinisani solid po sredini.

Page 67: Us   3 d grafika i animacija - praktikum

56 3D grafika i animacija

10. korakNacrtanoj ravni dodeliti mapu Checker (crno-bela polja kao šahovska tabla) uobičajenomprocedurom unutar Material Editora.

11. korakTreba postaviti dva Omni svetlosna izvora iz podmenija Lights na proizvoljne lokacije.Treba aktivirati za oba svetlosna izvora Shadows On kako bi se kreirale i senke prilikomvizuelizacije (slika 12.4).

12. korakTreba podesiti da boja pozadine bude bela i to se obavlja putem Rendering > Environ-ment i u polju Background treba izabrati belu boju kao boju pozadine.

13. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 12.5.

Slika 12.5. Vizualizovana dodatno podešena scena

Ovo je sigurno najjednostavniji način za kreiranje žičanog modela, a primenom dodat-nih elemenata unutar programa 3DS MAX korisnik može da dobije krajnje neočekivanerezultate.

1.13. Logo koji liči na Windows logo

Ovde će biti objašnjen put ka kreiranju logoa koji liči na logo Windowsa, operativnogsistema firme Microsoft.

1. korakTreba podesiti pomoćnu mrežu Grid kako bi se korisnik snašao sa odgovarajućim dimenzi-

Page 68: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 57

jama. Treba aktivirati Customize > Grid and Snap Settings i kao rezultat pojavljujese dijalog Grid and Snap Settings sa pripadajućim karticama. Treba aktivirati karticuHome Grid (slika 13.1) i treba podesiti parametre kao što je to prikazano na toj slici.

Slika 13.1. Podešavanje Grid mreže

2. korakPrvo treba nacrtati luk i to putem Create > Shapes > Arc. Za to je najbolje aktiviratiTop vizir.

3. korakU ovom slučaju nacrtan je luk čija je tetiva dužine 100, a visina luka 10 (slika 13.2).Bolje je zapamtiti dimenzije zbog kasnije komande Extrude.

4. korakKomandom Edit > Clone treba iskopirati ovaj luk jednom. Komandom Move (aktiviratiu međuvremenu Snap Toggle opciju za pronalaženje specifičnih tačaka) spustiti kopijuluka nadole za vrednost jednog kvadratića Grid mreže, tj. za vrednost 5.

5. korakNakon ovoga opcija Snap Toggle može da se isključi.

6. korakTreba desnim tasterom kursora miša markirati jedan luk i iz kontekstnog menija trebaaktivirati Convert To: > Convert to Editable Spline.

7. korakIz menija Modify treba markirati Vertex i treba izabrati krajnje teme luka (slika 13.3).

8. korakSledeći korak je aktiviranje tastera Attach, uz desnu ivicu ekrana (slika 13.3).

9. korakNakon toga treba kursorom miša prići drugom luku (pojavljuje se specifičan simbol prika-zan na slici 13.3) i kliknuti levim tasterom kursora miša na njega.

Page 69: Us   3 d grafika i animacija - praktikum

58 3D grafika i animacija

Slika 13.2. Definisanje i crtanje početnog luka

Slika 13.3. Kloniranje i povezivanje lukova

Page 70: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 59

10. korakNakon toga treba aktivirati taster Connect (zaokružen je na slici 13.3).

11. korakTreba levim tasterom miša kliknuti na krajnju tačku jednog luka i prevući je na naspramnutačku drugog luka. Ovo isto odraditi i za drugi par naspramnih krajnjih tačaka ova dvaluka. Lukovi se spajaju pravom linijom i na taj način se kreira jedinstvena kontura (slika13.4).

12. korakTreba poništiti opciju Vertex (markirana je na slici 13.4) i treba markirati opciju Segment.Na ovaj način se selektuje (markira) celokupna kontura, a ne pojedinačni lukovi.

13. korakIz liste modifikatora treba izabrati modifikator Extrude kako bi se dodala treća dimenzijadefinisanoj konturi. U polju Amount treba definisati veličinu 60 (slika 13.5).

14. korakTreba ponovo aktivirati Top vizir.

15. korakKomandom Edit > Clone treba iskopirati ovaj solid jednom. Komandom Move (aktivi-rati u međuvremenu Snap Toggle opciju za pronalaženje specifičnih tačaka) pomeritiudesno solid nadole za vrednost 21 kvadratića Grid mreže, tj. za vrednost 105.

Slika 13.4. Povezivanje lukova u jednu celinu

Page 71: Us   3 d grafika i animacija - praktikum

60 3D grafika i animacija

Slika 13.5. Dodavanje treće dimenzije konturi

16. korakNakon ovoga opcija Snap Toggle može da se isključi (slika 13.6).

Slika 13.6. Kloniranje solida

Page 72: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 61

17. korakKomandom Rotate treba kopiju solida zarotirati za 180 stepeni. I ovo se radi unutar Topvizira.

18. korakNakon toga se komandom Move vrati zarotirana kopija na približno istu lokaciju (slika13.7).

19. korakU viziru Front treba komandom Clone iskopirati oba solida i pomeriti ih nagore, i totako da razmak između originala i kopija bude 5 (slika 13.8).

20. korakRotiranjem ova četiri solida korisnik može da im podesi odgovarajući položaj.

21. korakKao dodatak može da se nacrta ravan komandom Plane iz menija Standard Primiti-ves.

22. korakPritiskom na taster M aktivira se Material Editor. U prva četiri uzorka materijalatreba podesiti četiri osnovne boje - crvenu, plavu, žutu i zelenu (slika 13.9). Ove boje ćese ponaosob dodeliti po jednom od solida.

23. korakPeti materijal predstavlja mapu Checker (crno-bela polja kao šahovska polja) i taj ma-terijal je namenjen za definisanu ravan.

24. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzorka na odgovarajući ob-jekat.

25. korakTreba postaviti dva Omni svetlosna izvora iz podmenija Lights na proizvoljne lokacije.Treba aktivirati za oba svetlosna izvora Shadows On kako bi se kreirale i senke prilikomvizuelizacije (slika 13.10).

26. korakTreba podesiti da boja pozadine bude bela i to se obavlja putem Rendering > Environ-ment i u polju Background treba izabrati belu boju kao boju pozadine.

27. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivira pri-tiskom na taster Render. Rezultat rada je prikazan na slici 13.11.

Page 73: Us   3 d grafika i animacija - praktikum

62 3D grafika i animacija

Slika 13.7. Pozicioniranje solida

Slika 13.8. Kloniranje kreiranog para solida

Page 74: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 63

Slika 13.9. Definisanje materijala

Slika 13.10. Dodeljivanje materijala objektima

Page 75: Us   3 d grafika i animacija - praktikum

64 3D grafika i animacija

Slika 13.11. Vizualizacija celokupne scene

Ovo je zanimljiv način da se kreira trodimenzinalni logo odgovarajuće firme. Ideja jekrajnje zanimljiva i treba je ponekad iskoristiti radi efektnijeg izgleda potencijalnog logoaneke firme.

1.14. Loptica za golf

Sledi kratko i jasno uputstvo kako korisnik da izmodeluje lopticu za golf. Rešenje ovogproblema nije preterano teško.

1. korakZa ovu priču je najlakše raditi unutar Perspective vizira, što znači da ga treba aktivirati.

2. korakPrvu treba napraviti loptu komandom GeoSphere koja se nalazi unutar menija Geometryi podmenija Standard Primitives. Njen poluprečnik je 100, a broj segmenata je 8. Uoblasti Geodesic Base Type treba markirati opciju Icosa (slika 14.1).

3. korakTreba pritisnuti desnim tasterom miša na kreiranu loptu i iz kontekstnog menija trebaaktivirati komandu Convert To: > Convert to Editable Mesh.

4. korakIz stabla Editable Mesh (uz desnu ivicu ekrana) treba markirati opciju Polygon.

5. korakSada treba izabrati sve poligone lopte putem Edit > Select All ili pritiskom na kom-binaciju tastera sa tastature Ctrl+A.

Page 76: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 65

Slika 14.1. Kreiranje lopte

Slika 14.2. Definisanje udubljenja na loptici za golf

Page 77: Us   3 d grafika i animacija - praktikum

66 3D grafika i animacija

6. korakIz stabla Editable Mesh (uz desnu ivicu ekrana) treba markirati opciju Edge.

7. korakSada treba izabrati sve ivice lopte putem Edit > Select All ili pritiskom na kombi-naciju tastera sa tastature Ctrl+A.

8. korakU oblasti Edit Geometry treba aktivirati taster Chamfer i u pratećem polju treba defi-nisati vrednost 4.5. Kao rezultat se pojavljuje slika 14.2.

9. korakIz stabla Editable Mesh (uz desnu ivicu ekrana) treba ponovo markirati opciju Polygon.

10. korakSada treba izabrati komandu Edit > Select Invert ili pritisnuti kombinaciju tastera satastature Ctrl+I. Na ovaj način se selektuju (markiraju) ivice koje su kreirane u prethod-nim koracima.

11. korakU oblasti Edit Geometry treba aktivirati taster Extrude i u pratećem polju treba defi-nisati vrednost -1. U istoj oblasti treba aktivirati i taster Bevel i u pratećem polju trebadefinisati vrednost -3.5. Kao rezultat se pojavljuje slika 14.3.

12. korakSledeći korak je aktiviranjem modifikatora MeshSmooth iz liste modifikatora unutar Mo-dify menija uz desnu ivicu ekrana. Treba prihvatiti ponuđene vrednosti parametara, aposebno se odnosi na dva parametra: parametar Iterations treba da ima vrednost 1, aparametar Smoothness treba da ima vrednost 1.0. Kao rezultat se pojavljuje slika 14.4.

13. korakKao dodatak treba nacrtati ravan komandom Plane iz menija Standard Primitives.

14. korakPritiskom na taster M aktivira se Material Editor. U prvom uzorku materijala trebapodesiti belu boju (slika 14.5). Ova boja (materijal) će se dodeliti loptici za golf.

15. korakDrugi materijal predstavlja mapu Checker (crno-bela polja kao šahovska polja) i taj ma-terijal je namenjen za definisanu ravan.

16. korakDodeljivanje materijala se obavlja prevlačenjem uzorka na odgovarajući objekat.

17. korakTreba postaviti tri Omni svetlosna izvora iz podmenija Lights na proizvoljne lokacije.Treba aktivirati za sve svetlosne izvora Shadows On kako bi se kreirale i senke prilikomvizuelizacije (slika 14.6)

Page 78: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 67

Slika 14.3. Podešavanje udubljenja na loptici za golf

Slika 14.4. Definisan 3D model loptice za golf

Page 79: Us   3 d grafika i animacija - praktikum

68 3D grafika i animacija

Slika 14.5. Definisanje materijala

Slika 14.6. Dodeljivanje materijala objektima

Page 80: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 69

18. korakTreba podesiti da boja pozadine bude bela i to se obavlja putem Rendering > Environ-ment i u polju Background treba izabrati belu boju kao boju pozadine.

19. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 14.7.

Slika 14.7. Vizualizovana scena

Ovo je, možda, najjednostavniji način da se napravi model loptice za golf. Postoji jošnačina i korisnik može da ih pronađe ako se malo više udubi u problematiku.

1.15. Zlatni i bakarni čajnik

Sledi jasno uputstvo kako korisnik da napravi materijal koji će imitirati zlato i bakar. Ovadva materijala će se primeniti na dva modela čajnika kako bi se videla razlika u materijal-ima.

1. korakZa ovu priču je najlakše raditi unutar Perspective vizira, što znači da ga treba aktivirati.

2. korakKao dodatak ovoj problematici može da se nacrta ravan komandom Plane iz menijaStandard Primitives, kako bi se poboljšala krajnja vizuelizacija.

3. korakSledi modelovanje dva čajnika komandom Teapot iz menija Standard Primitives. Ča-jnici su proizvoljnih dimenzija, ali broj segmenata bi trebalo da bude 10 (slika 15.1).

Page 81: Us   3 d grafika i animacija - praktikum

70 3D grafika i animacija

Slika 15.1. Definisanje scene i objekata unutar nje

Slika 15.2. Podešavanje prvog materijala

Page 82: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 71

4. korakSledi priča koja je interesantna za ovaj primer. Pritiskom na taster M aktivira se MaterialEditor.

5. korakTreba markirati prvi uzorak za materijale. U oblasti Shader Basic Parameters trebaizabrati Phong senčenje umesto inicijalno aktivnog Blinn senčenja (slika 15.2).

6. korakTreba markirati opciju 2-Sided u istoj oblasti (slika 15.2).

7. korakU oblasti Specular Highlights treba parametru Specular Levels dodeliti vrednost68, a parametru Glossiness dodeliti vrednost 19 (slika 15.2).

8. korakTreba otvoriti Maps podmeni kako bi se pristupilo podešavanju parametara odgovarajućihmapa. Treba markirati mapu Diffuse Color (slika 15.3) i treba pritisnuti na taster Noneu produžetku naziva ove mape.

Slika 15.3. Podešavanje mapa unutar prvog materijala

9. korakKao rezultat pojavljuje se Material/Map Browser dijalog i iz tog dijaloga treba aktiviratiFalloff mapu.

Page 83: Us   3 d grafika i animacija - praktikum

72 3D grafika i animacija

10. korakU dijalogu Material Editor pojavljuje se podmeni Falloff Parameters i tu slededalja podešavanja. Trenutno aktivnoj Falloff mapi treba dodeliti još dve Falloffpodmape i pripojiti ih tasterima u samom vrhu podmenija.

11. korakAktiviranjem tastera None u nastavku pravougaonika sa crnom bojom (slika 15.4) otvarase novi Falloff Parameters podmeni. U ovom delu se ništa ne menja, ali treba podesitikrivu liniju preraspodele dve boje kao što je to prikazano na slici 15.4. Prvobitnoj pravojliniji se dodaje Bezjeovo teme (taster Add Point, treći sa leve strane na dijagramu), aonda se podešava položaj te tačke, kao i položaj i veličina prateće tangente u tom temenu(taster Move, prvi sa leve strane na dijagramu). Ovi tasteri su zaokruženi na slici 15.4.

Slika 15.4. Podešavanje prve podmape unutar prvog materijala

12. korakAktiviranjem tastera Go to Parent (nacrtan je pravougaonik oko ovog tastera na slici15.4) korisnik se vraća u prethodni podmeni.

Page 84: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 73

13. korakTreba aktivirati taster None ispod prethodnog i otvara se novi Falloff Parameterspodmeni. U ovom delu se menja prva boja i to treba izabrati narandžastu boju (njenekoordinate su R:252, G:154 i B:0). Nakon toga treba podesiti krivu liniju preraspodeledve boje kao što je to prikazano na slici 15.5. Prvobitnoj pravoj liniji se dodaje Bezjeovoteme (taster Add Point, treći sa leve strane na dijagramu), a onda se podešava položajte tačke, kao i položaj i veličina prateće tangente u tom temenu (taster Move, prvi sa levestrane na dijagramu). Ovi tasteri su zaokruženi na slici 15.5. Kriva linija na slici 15.5. bitrebalo da bude slična ili ista krivoj liniji na slici 15.4.

Slika 15.5. Podešavanje druge podmape unutar prvog materijala

14. korakAktiviranjem tastera Go to Parent korisnik se vraća u prethodni podmeni (slika 15.6).

Page 85: Us   3 d grafika i animacija - praktikum

74 3D grafika i animacija

Slika 15.6. Podešavanje unutar prvog materijala

15. korakVidi se da su tasterima, unutar tekuće Falloff mape, dodeljene još dve Falloff pod-mape sa različitim parametrima.

16. korakAktiviranjem tastera Go to Parent korisnik se vraća u podmeni Maps (slika 15.7).

Slika 15.7. Glavni meni prvog materijala

Page 86: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 75

17. korakTreba iskopirati Falloffmapu sa tastera Diffuse Color na taster Self-Illuminationprimenjujući opciju Paste (Instance), kao što se to vidi na slici 15.7. Ovoj novokreira-noj mapi treba smanjiti vrednost na 70 (slika 15.7).

18. korakTreba markirati i Reflection mapu i pritiskom na njen None taster učitati Raytracemapu. Ovoj novokreiranoj mapi treba smanjiti vrednost na 20 (slika 15.8).

Slika 15.8. Podešavanje dodatnih podmapa prvog materijala

19. korakNa ovaj način je završeno kreiranje materijala koji simulira zlato.

20. korakSledi kreiranje materijala koji će podsećati na bakar.

Treba markirati drugi uzorak za materijale. Nakon toga treba ponoviti korake od 5. korakado 13. koraka.

21. korakZa bakar treba podesiti i parametre Output kao što je to prikazano na slici 15.9. Parametritrebaju da imaju sledeće vrednosti: Output Amount parametar treba da ima vrednost2.19, RGB Offset parametar treba da ima vrednost -0.07, RGB Level parametar trebada ima vrednost 0.68 i Bump Amount parametar treba da ima vrednost 1.0.

Page 87: Us   3 d grafika i animacija - praktikum

76 3D grafika i animacija

Slika 15.9. Podešavanje drugog materijala

22. korakPosle toga treba ponovoti korake od 14. koraka do 18. koraka za bakar.

23. korakTreći materijal predstavlja mapu Checker (crno-bela polja kao šahovska polja) i taj ma-terijal je namenjen za definisanu ravan (slika 15.10).

24. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzorka na odgovarajući ob-jekat.

25. korakZlatni materijal je dodeljen čajniku koji je dalji, a bakarni materijal se dodeljuje bližemčajniku.

26. korakTreba postaviti dva Omni svetlosna izvora iz podmenija Lights na proizvoljne lokacije.Treba aktivirati za sve svetlosne izvore Shadows On kako bi se kreirale i senke prilikomvizuelizacije (slika 15.11).

Page 88: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 77

Slika 15.10. Podešavanje podmapa drugog materijala

Slika 15.11. Prikaz podešene celokupne scene

Page 89: Us   3 d grafika i animacija - praktikum

78 3D grafika i animacija

27. korakTreba podesiti da boja pozadine bude svetlo plava i to se obavlja putem Rendering >Environment i u polju Background treba izabrati svetlo plavu boju kao boju pozadine.

28. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 15.12.

Slika 15.12. Vizualizovana celokupna scena

Ovo je malo komplikovaniji način za kreiranje materijala, ali je očigledno da korisnik možedosta stvari da kreira sâm, tako da nije zavisan od durgih.

1.16. Kreiranje apstraktnog modela

Sledi kratko i jasno uputstvo kako korisnik da napravi apstraktni model, kako bi njegovomvizuelizacijom dobio zanimljivu fotografiju koju može da iskoristi kada mu zatreba. Dobi-jenu sliku korisnik može da dorađuje ili da je dodaje odgovarajuće elemente unutar nekogprograma za obradu slika kao što su Corel PHOTO-PAINT ili Adobe Photoshop.

1. korakZa ovu priču je koristiti sve vizire, jer treba nacrtati 3D zatvorenu Bezjeovu krivu liniju.Zbog toga je potrebno raditi u sva tri vizira gde korisnik može da se "šeta" po vizirimasa aktivnom komandom za iscrtavanje krive linije.

2. korakTreba aktivirati komandu NURBS Curves unutar Shapes podmenija (slika 16.1). Najboljeje aktivirati taster Point Curve kako bi korisnik kursorom miša definisao tačke kroz kojekriva linija mora da prođe (slika 16.1).

Page 90: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 79

Slika 16.1. Crtanje i zatvaranje krive linije

3. korakOno što je bitno zapamtiti da kriva linija mora da se zatvori, što znači da korisnik mora daposlednjim klikom kursora miša pronađe početnu tačku i onda će se pojaviti dijalog kojipita da li krivu liniju treba zatvoriti (slika 16.1). Na ovo pitanje treba odgovoriti pritiskomna taster Yes.

4. korakSledeći korak je aktiviranje Modify menija. Uz desnu ivicu ekrana pojavljuje se malaikonica sa zelenim kvadratićima, a reč je o komandi NURBS Creation Toolbox (slika16.2). Kada se aktivira ova komanda otvara se dijalog NURBS (slika 16.2) iz koje trebaaktivirati komandu Create Cap Surface (slika 16.2).

5. korakSledeći korak je jednostavan. Levim tasterom kursora treba kliknuti jednom na zatvorenukrivu liniju i na ekranu se pojavljuje rezultat kao na slici 16.3.

6. korakPritiskom na taster M aktivira se Material Editor.

7. korakTreba markirati prvi uzorak za materijale. U oblasti Shader Basic Parameters trebaizabrati Blinn senčenje ako već nije aktivno (slika 16.4a).

8. korakTreba markirati opciju 2-Sided u istoj oblasti (slika 16.4a).

Page 91: Us   3 d grafika i animacija - praktikum

80 3D grafika i animacija

Slika 16.2. Pretvaranje krive linije u površ

Slika 16.3. Dobijena zatvorena površina

Page 92: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 81

9. korakTreba promeniti boju za Ambient i Diffuse unutar oblasti Basic Blinn Parameters.U ovom slučaju izabrana je plava boja sa koordinatama R:0, G:135 i B:255 (slika 16.4a).

Slika 16.4. Izbor i podešavanje materijala

9. korakOpciji Opacity treba dodeliti odgovarajuću mapu. Treba kliknuti na kvadratić u nastavkuopcije Opacity (na slici 16.4a na tom kvadratiću piše M kada se dodaje mapa).

10. korakAktiviranjem ovog kvadratića otvara se Material/Map Browser dijalog u kome trebaizabrati i aktivirati Swirl mapu (slika 16.4b). Mapu Swirl treba prihvatiti sa inicijalnoponuđenim vrednostima.

Page 93: Us   3 d grafika i animacija - praktikum

82 3D grafika i animacija

11. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzorka na odgovarajući ob-jekat.

12. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivira pri-tiskom na taster Render. Rezultat rada je prikazan na slici 16.5.

Slika 16.5. Vizualizovana inicijalna scena

13. korakKorisnik može da postavi proizvoljan broj Omni svetlosnih izvora iz podmenija Lightsna proizvoljne lokacije. Treba aktivirati za sve svetlosne izvora Shadows On kako bi sekreirale i senke prilikom vizuelizacije.

14. korakU ovom slučaju definisana su tri Omni svetlosna izvora sa proizvoljnim razmeštajem.

15. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 16.6.

Slika 16.6. Vizualizovana scena sa novim parametrima

Page 94: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 83

16. korakTreba podesiti da boja pozadine bude bela i to se obavlja putem Rendering > Environ-ment i u polju Background treba izabrati belu boju kao boju pozadine.

17. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 16.7.

Slika 16.7. Vizualizovana najnovija scena

Ovo je krajnje jednostavan način da se dođe do kompleksnog oblika i sjajne vizualizovaneslike. Treba napomenuti da je ovo izuzetno pogodan način jer se ne koristi MeshSmoothmodifikator i na taj način se drastično smanjuje vreme renderovanja celokupne scene.

1.17. Staklena čaša za vino

Sledi kratko i jasno uputstvo kako korisnik da napravi model staklene čaše za vino.

1. korakTreba podesiti pomoćnu mrežu Grid kako bi se korisnik snašao sa odgovarajućim dimenzi-jama. Treba aktivirati Customize > Grid and Snap Settings i kao rezultat pojavljujese dijalog Grid and Snap Settings sa pripadajućim karticama. Treba aktivirati karticuHome Grid (slika 17.1) i treba podesiti parametre kao što je to prikazano na toj slici.

2. korakZa kreiranje polovine konture čaše je najpogodniji vizir Front i treba ga aktivirati.

3. korakTreba aktivirati komandu Line unutar Spline podmenija u Shapes meniju. Treba marki-rati i Snap Toggle opciju kako bi se kursor miša "vezivao" za presečne tačke Grid mreže.

Page 95: Us   3 d grafika i animacija - praktikum

84 3D grafika i animacija

Slika 17.1. Podešavanje Grid mreže

4. korakTreba nacrtati polovinu konture čaše kako je prikazano na slici 17.2.

Slika 17.2. Grubo skiciranje polovine konture

5. korakKorisnik može sada da isključi Snap Toggle.

6. korakPritiskom desnim tasterom miša na konturu aktivira se kontekstni meni i iz njega treba

Page 96: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 85

aktivirati Convert To: > Convert to Editable Spline.

7. korakIz stabla Line treba aktivirati opciju Vertex (slika 17.3). Kursorom miša treba markiratidva desna temena na konturi (slika 17.3), pritiskom na desni taster miša aktivira sekontekstni meni (slika 17.3) i iz njega treba aktivirati komandu Smooth.

Slika 17.3. Pozicioniranje specifičnih temena

8. korakTreba markirati definisanu konturu i, nakon toga, treba aktivirati modifikator Lathe izliste modifikatora (slika 17.4). Od ponuđenih opcija treba samo aktivirati taster Min i kaorezultat pojavljuje se slika 17.4.

9. korakIz stabla Line treba aktivirati opciju Spline (slika 17.5).

10. korakIz pripadajućih opcija treba u polju Outline definisati vrednost -1.0 i na taj način sedefiniše unutrašnja kontura (na ovaj način se određuje debljina čaše), kao što se to vidina slici 17.5.

Page 97: Us   3 d grafika i animacija - praktikum

86 3D grafika i animacija

Slika 17.4. 3D model čaše

Slika 17.5. Definisanje debljine zida čaše

Page 98: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 87

Slika 17.6. Uklanjanje suvišnog segmenta na osi rotacije

Slika 17.7. Kompletna scena

Page 99: Us   3 d grafika i animacija - praktikum

88 3D grafika i animacija

Slika 17.8. Definisanje i određivanje materijala

Slika 17.9. Dodeljivanje materijala objektima

Page 100: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 89

11. korakIz stabla Line treba aktivirati opciju Segment (slika 17.6).

12. korakTreba markirati segment uz osu koji predstavlja debljinu čaše (na slici 17.6 ovaj segmentje "uhvaćen" u prozor) i obrisati ga pritiskom na taster Delete na tastaturi.

13. korakTreba markirati Lathe stablo (slika 17.7).

14. korakOd ponuđenih opcija treba markirati polja Weld Core i Flip Normals, a u polju Seg-ments treba povećati vrednost sa ponuđenih 16 na 50. Kao rezultat pojavljuje se slika17.7.

15. korakKao dodatak može da se nacrta ravan komandom Plane iz menija Standard Primiti-ves.

16. korakPritiskom na taster M aktivira se Material Editor.

17. korakTreba markirati prvi uzorak za materijale. Iz 3dsmax.mat biblioteke materijala treba uči-tati materijala Wood_Old (Standard), kao što se to vidi na slici 17.8.

18. korakTreba markirati drugi uzorak za materijale. U oblasti Shader Basic Parameters trebaizabrati Blinn senčenje ako već nije aktivno.

19. korakTreba markirati opciju 2-Sided u istoj oblasti.

20. korakTreba promeniti boju za Ambient i Diffuse unutar oblasti Basic Blinn Parameters.U ovom slučaju izabrana je svetlo siva boja sa koordinatama R:216, G:216 i B:216 (slika17.8).

21. korakU meniju Maps treba markirati opciju Refraction, a pritiskom na pripadajući taster Nonetreba učitati Raytrace mapu (slika 17.8).

22. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzorka na odgovarajući ob-jekat (slika 17.9).

23. korakTreba podesiti da boja pozadine bude bela i to se obavlja putem Rendering > Environ-

Page 101: Us   3 d grafika i animacija - praktikum

90 3D grafika i animacija

ment i u polju Background treba izabrati belu boju kao boju pozadine.

24. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivira pri-tiskom na taster Render. Rezultat rada je prikazan na slici 17.10.

Slika 17.10. Vizualizovana kompletna scena

Prikazan je jednostavan način za kreiranje čaše za vino, a ovaj postupak može da seiskoristi i za kreiranje drugih i drugačijih staklenih posuda.

1.18. Kreiranje staklene vaze za cvećeSledi kratko i jasno uputstvo kako korisnik da napravi model staklene vaze za cveće.

1. korakTreba podesiti pomoćnu mrežu Grid kako bi se korisnik snašao sa odgovarajućim dimenzi-jama. Treba aktivirati Customize > Grid and Snap Settings i kao rezultat pojavljujese dijalog Grid and Snap Settings sa pripadajućim karticama. Treba aktivirati karticuHome Grid (slika 18.1) i treba podesiti parametre kao što je to prikazano na toj slici.

Slika 18.1. Podešavanje Grid mreže

Page 102: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 91

2. korakZa kreiranje polovine konture čaše je najpogodniji vizir Front i treba ga aktivirati.

3. korakTreba aktivirati NURBS Curves komandu unutar Shapes podmenija. Kriva linija konturevaze se iscrtava definisanjem kontrolnih tačaka kroz koje linija mora da prođe ako seaktivira taster Point Curve (slika 18.2). Mogući izgled konture prikazan je na slici 18.2.

Slika 18.2. Kontura vaze za cveće

4. korakSa slike 18.2. vidi se da je poluprečnik osnove krive linije 50. Treba nacrtati kružnicukomandom Circle iz podmenija Spline i njen položaj nije eksplicitno definisan. Polu-prečnik kružnice treba da bude 30. Kao rezultat pojavljuje se slika 18.3.

5. korakAko kružnica nije markirana (selektovana) treba je markirati. Nakon toga treba aktiviratimodifikator Bevel Profile iz liste modifikatora. Iz pratećeg menija ovog modifikatoratreba aktivirati taster Pick Profile i kursorom miša markirati krivu liniju. Kreira sevaza tako što kružnica prati konturu krive linije i kreira se solid (slika 18.4).

6. korakDesnim tasterom kursora miša treba kliknuti na novoformirani solid vaze i iz kontekstnogmenija, koji se pojavio, treba aktivirati Convert To: > Convert to Editable Poly.

7. korakTreba razviti stablo Editable Poly (slika 18.5) pritiskom na ikonicu sa znakom + iunutar stabla treba markirati opciju Polygon.

Page 103: Us   3 d grafika i animacija - praktikum

92 3D grafika i animacija

Slika 18.3. Pomoćna kružna kontura vaze za cveće

Slika 18.4. 3D model vaze

Page 104: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 93

Slika 18.5. Uklanjanje poklopca vaze

Slika 18.6. Definisanje zida vaze

Page 105: Us   3 d grafika i animacija - praktikum

94 3D grafika i animacija

8. korakLevim tasterom miša markirati "poklopac" vaze i pritiskom na taster Delete na tastaturitreba ga obrisati. Rezultat rada prikazan je na slici 18.5.

9. korakAko vaza nije markirana (selektovana) treba je markirati. Nakon toga treba aktivirati mod-ifikator Shell iz liste modifikatora. Iz pratećeg menija ovog modifikatora treba definisativrednost unutar polja Inner Amount i to je treba podesiti na vrednost 2.0. Na ovajnačin je kreirana debljina zida vaze i to spolja ka unutra, što znači da se gabariti vazenisu promenili (slika 18.6).

10. korakDa bi se vaza malo doterala trebalo bi odseći gornji deo pod nekim uglom. Za to jenajbolje iskoristiti Bulovu operaciju oduzimanja.

11. korakZa to je potrebno definisati kvadar proizvoljnih dimenzija i potrebno je pozicionirati gatako da kada se njegova zapremina oduzme od zapremine vaze ostane ono što korisnikželi (slika 18.7).

12. korakZa kreiranje kvadra "zadužena" je komanda Box iz menija podmenija Standard Primi-tives.

13. korakKomandama Move i Rotate vrši se pozicioniranje kvadra u odnosu na vazu (slika 18.7).

14. korakTreba markirati vazu jer je to model od koga treba oduzeti zapreminu drugog modela.

15. korakIz menija Geometry treba aktivirati podmeni Compound Objects i iz njega treba aktivi-rati taster Boolean. Ako je opcija Subtraction (A-B) aktivna u polju Operation, ondatreba aktivirati taster Pick Operand B i levim tasterom miša treba kliknuti na kvadar.Kao rezultat ostaje vaza čiji je vrh odsečen pod određenim uglom (slika 18.8).

16. korakKao dodatak može da se nacrta ravan komandom Plane iz menija Standard Primiti-ves.

17. korakPritiskom na taster M aktivira se Material Editor.

18. korakTreba markirati prvi uzorak za materijale. Iz 3dsmax.mat biblioteke materijala trebaučitati materijala Wood_Old (Standard), kao što se to vidi na slici 18.9.

Page 106: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 95

Slika 18.7. Definisanje kvadra koji se oduzima od vaze

Slika 18.8. Konačni izgled vaze za cveće

Page 107: Us   3 d grafika i animacija - praktikum

96 3D grafika i animacija

19. korakTreba markirati drugi uzorak za materijale. U oblasti Shader Basic Parameters trebaizabrati Blinn senčenje ako već nije aktivno.

20. korakTreba markirati opciju 2-Sided u istoj oblasti.

21. korakTreba promeniti boju za Ambient i Diffuse unutar oblasti Basic Blinn Parameters.U ovom slučaju izabrana je svetlo siva boja sa koordinatama R:216, G:216 i B:216 (slika18.9).

22. korakU meniju Maps treba markirati opciju Refraction, a pritiskom na pripadajući taster Nonetreba učitati Raytrace mapu (slika 18.9).

Slika 18.9. Definisanje i biranje materijala

23. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzorka na odgovarajući ob-jekat.

Page 108: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 97

24. korakTreba podesiti da boja pozadine bude bela i to se obavlja putem Rendering > Environ-ment i u polju Background treba izabrati belu boju kao boju pozadine.

25. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivira pri-tiskom na taster Render. Rezultat rada je prikazan na slici 18.10.

Slika 18.10. Vizualizovana scena

Prikazan je jednostavan način za kreiranje vaze za cveće, a i ovaj postupak može da seiskoristi za kreiranje drugih i drugačijih staklenih posuda.

1.19. Umekšavanje senki

Sledi kratko i jasno uputstvo po pitanju senki koje pokazuje kako je moguće kreiratisvetlosni izvor (izvore) koji simuliraju senke kao deo globalnog osvetljenja. Svi modeli imaterijali se već nalaze unutar programa 3DS MAX, bez obzira na verziju.

1. korakPotrebna scena za ovaj primer je krajnje jednostavna. Potrebna je jedna ravan kojapredstavlja pod na kome stoje modeli, a od modela će se iskoristiti lopta, kvadar i čajnik.

2. korakPrvi korak je kreiranje ravni pomoću komande Plane iz menija Standard Primitives.Dimenzije ravni su krajnje proizvoljne.

3. korakPritiskom na taster M aktivira se Material Editor.

Page 109: Us   3 d grafika i animacija - praktikum

98 3D grafika i animacija

4. korakTreba markirati prvi uzorak za materijale i dodeliti mu naziv. U ovom slučaju dodeljenmu je naziv Ravan za pod. Pritiskom na taster Standard u produžetku otvara seMaterial/Map Browser dijalog iz koga treba učitati Matte/Shadow mapu kao aktivnu.Treba markirati opciju Recieve Shadows, a u polju Shadow Brightness treba podesitivrednost na 0.1. Veća vrednost ovog parametra donosi svetlije senke. Podešeni parametriza ovaj materijal su prikazani na slici 19.1.

Slika 19.1. Definisanje materijala za podlogu

5. korakOvo je, znači, materijal za ravan. Dodeljivanje materijala se obavlja jednostavnim pre-vlačenjem uzorka na odgovarajući objekat.

6. korakMarkiranjem ravni desnim tasterom kursora miša aktivira se kontekstni meni u kome trebaaktivirati komandu Freeze Selection. Na ovaj način se "zamrzava" ravan, što značida je vidljiva, ali ne može da se selektuje.

7. korakSledeći korak je definisanje lopte, kvadra i čajnika. Dimenzije su proizvoljne, kao i razmeš-taj.

8. korakIz menija Lights treba aktivirati taster Omni kako bi se kreirao jedan svetlosni izvor Omni.

9. korakOvaj izvor svetlosti treba iskopirati još sedam puta po određenoj kružnoj putanji. Da bi

Page 110: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 99

se to uradilo kako valja, trebalo bi definisati centar kružne putanje po kojoj će se kopiratiizvori svetlosti, a poluprečnik te zamišljene putanje je rastojanje od tog definisanog centrado kreiranog prvog izvora svetlosti.

10. korakDa bi se to uradilo kako treba mora da se aktivira Hierarchy meni uz desnu ivicu ekranai da aktivira taster Affect Pivot Only (slika 19.2).

Slika 19.2. Pozicioniranje centra kružnog kopiranja svetlosnih izvora

11. korakCentar rotacije bi trebalo postaviti približno u centar između definisanih objekata (slika19.2). Nakon definisanja položaja treba isključiti taster Affect Pivot Only.

12. korakSada može da se aktivira komanda Array (ikonica je odmah iznad grafičke oblasti nanacrtanim kružićima na njoj) i kao odgovor se pojavljuje dijalog Array (slika 19.3).

13. korakU oblasti Incemental za komandu Rotate treba opciji Z dodeliti vrednost 45. U oblastiArray Dimensions treba markirati opciju 1D i u polju Count treba definisati vrednost8. U oblasti Type of Object treba markirati opciju Reference. Na ovaj način se pravisedam kopija svetlosnih izvora (osmi je original) po zamišljenoj kružnoj putanji, a ugaoizmeđu svake kopije je 45 stepeni. To znači da je 8 × 45 = 360 stepeni, tj. pun krug.

14. korakKao rezultat pojavljuje se slika 19.4.

Page 111: Us   3 d grafika i animacija - praktikum

100 3D grafika i animacija

Slika 19.3. Dijalog za kopiranje po kružnoj putanji

Slika 19.4. Kompletirana scena

15. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 19.5.

16. korakTreba podesiti da boja pozadine bude bela i to se obavlja putem Rendering > Environ-ment i u polju Background treba izabrati belu boju kao boju pozadine.

Page 112: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 101

Slika 19.5. Vizualizovana inicijalna scena

17. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 19.6.

Slika 19.6. Vizualizovana scena sa belom pozadinom

18. korakOvde treba napomenuti par stvari. Treba podesiti parametre osvetljenja, ali dovoljno jepodesiti osvetljenje Omni01 svetlosnog izvora (originala), a podešeni parametri se pres-likavaju na kopije jer je bila aktivirana opcija Reference u Array dijalogu (slika 19.3).

19. korakDa bi se bacale senke ta opcija mora da se uključi. To je najjednostavnije na sledećinačin: treba desnim taserom miša kliknuti na svetlosni izvor Omni01 i u kontekstnommeniju treba aktivirati komandu Cast Shadows.

20. korakKada se markira izvor svetlosti Omni01 pojavljuju se njegovi parametri uz desnu ivicu

Page 113: Us   3 d grafika i animacija - praktikum

102 3D grafika i animacija

ekrana i sada treba uključiti opciju Shadows On unutar menija General Parameters.

21. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivira pri-tiskom na taster Render. Rezultat rada je prikazan na slici 19.7, a očigledno je prisustvosenki.

Slika 19.7. Oštre senke u sceni

22. korakU ovom primeru obratiće se pažnja na tri parametra: Bias, Size i Sample Range. Slika19.7 dobijena renderovanjemscene gde su ovi parametri imali inicijalno ponuđene vred-nosti: vrednost Bias parametra je bila 1.0, vrednost parametra Size je bila 512 i vrednostparametra Sample Range je bila 4.0 (slika 19.8).

Slika 19.8. Scena sa inicijalnim vrednostima gorepomenutih parametara

Page 114: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 103

23. korakParametar Sample Range utiče na umekšavanje senki objekata. Manje vrednosti ovogparametra pokrivaju manju oblast piksela i senke su oštrije (slika 19.9a), a veće vrednostipokrivaju veču oblast piksela i senke su mekše (slika 19.9b).

Slika 19.9. Uticaj parametra Sample Range

24. korakSlika 19.9a je urađena sa parametrom Sample Range čija je vrednost 1.0, a slika 19.9b jeurađena sa vrednošću ovog parametra od 20.0. Razlika je očigledna. Treba napomenutida je inicijalna vrednost ovog parametra 4.0.

25. korakParametar Size utiče na dimenzije mape koja se koristi za senke. Povećanjem veličinemape omogućava se korisniku da se otarasi hrapavih ivica oko senke (slika 19.10).

Slika 19.10. Uticaj parametra Size

26. korakSlika 19.10a je urađena sa parametrom Size čija je vrednost bila 64, a slika 19.10b jeurađena sa vrednošću ovog parametra od 1024. razlika je očigledna. Treba napomenutida je inicijalna vrednost ovog parametra 512.

27. korakParametar Bias podešava rastojanje mape od objekta koja baca senku i na taj načinodređuje kako će senka padati.

Page 115: Us   3 d grafika i animacija - praktikum

104 3D grafika i animacija

Slika 19.11. Uticaj parametra Bias

28. korakSlika 19.11a je urađena sa parametrom Bias čija je vrednost bila 0.1, a slika 19.11b jeurađena sa vrednošću ovog parametra od 50. razlika je očigledna. Treba napomenuti daje inicijalna vrednost ovog parametra 1.0.

29. korakKorisnik može da menja boju senke i da je prilagodi boji objekta. Kada se markira Omni01izvor svetlosti pojavljuju se opcije za podešavanje uz desnu ivicu ekrana (slika 19.12).

Slika 19.12. Podešavanje boje senki

30. korakTreba otvoriti podmeni Shadow Parameters i unutar oblasti Object Shadows postoji

Page 116: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 105

polje Color gde korisnik može da definiše boju senki (slika 19.12).

31. korakU ovom primeru su svi objekti crveni pa je na slici 19.12 izabrana crvena boja kao bojasenki. Posle vizualizacije scene rezultat može da se vidi na slici 19.13.

Slika 19.13. Senke imaju boju objekata

Slika 19.14. Podešavanje materijala podloge

Page 117: Us   3 d grafika i animacija - praktikum

106 3D grafika i animacija

32. korakPostoji još jedna varijanta. Korisnik može da se igra sa materijalom koji treba dodelitiravni. Treba uzeti da je osnovni materijal Raytrace (slika 19.14), a unutar njegovogpodmenija Maps treba markirati opciju Reflect i pritiskom na taster None učitati ponovoRaytrace mapu.

33. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 19.15, a očigledno jeprisustvo odsjaja objekata na osnovnoj ravni.

Slika 19.15. Odsjaj objekata na podlozi

Ovo je bila samo kratka priča oko specifične orijentacije i specifičnog razmeštaja svetlosnihizvora. Treba napomenuti da je ovo, zaista, zanimljiva ideja i da ova ideja može dabude rešenje mnogih kompleksnih problema koji se pojavljuju pred autorima odgovarajućihprojekata.

1.20. Hromirani i aluminijumski materijali

Ovde će biti prikazana procedura za kreiranje hromiranog materijala, kao i materijala kojisvojim izgledom podseća na aluminijum.

1. korakPotrebna scena za ovaj primer je krajnje jednostavna. Potrebna je jedna ravan kojapredstavlja pod na kome stoje modeli, a od modela će se iskoristiti dve lopte.

2. korakPrvi korak je kreiranje ravni pomoću komande Plane iz menija Standard Primitives.Dimenzije ravni su krajnje proizvoljne.

Page 118: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 107

3. korakDrugi korak je kreiranje lopte pomoću komande Sphere iz menija Standard Primitives.Dimenzije lopte su proizvoljne, ali broj segmenata je 50.

4. korakDruga lopta se dobija kopiranjem i premeštanjem po ravni primenom komande Move.Rezultat je prikazan na slici 20.1.

Slika 20.1. Postavljanje objekata na scenu

5. korakPritiskom na taster M aktivira se Material Editor.

6. korakNacrtanoj ravni dodeliti mapu Checker (crno-bela polja kao šahovska tabla) uobičajenomprocedurom unutar Material Editora.

7. korakSledi procedura za kreiranje hromiranog materijala. Treba markirati treći uzorak (prvadva su zauzeta mapom Checker) i zadati mu naziv Hrom (slika 20.2).

8. korakU nastavku naziva nalazi se taster sa nazivom Standard. Treba aktivirati taj taster i izMaterial/Map Browsera učitati Raytrace mapu (slika 20.2).

9. korakU polju Shading treba aktivirati Phong način senčenja.

Page 119: Us   3 d grafika i animacija - praktikum

108 3D grafika i animacija

10. korakTreba aktivirati Diffuse taster sa bojom i tom tasteru dodeliti crnu boju (slika 20.2).

11. korakU polju Specular Level treba podesiti vrednost 100, a u polju Glossiness treba pode-siti vrednost 70 (slika 20.2).

Slika 20.2. Podešavanje prvog materijala

12. korakTreba otvoriti podmeni Maps i markirati opciju Reflect. U nastavku treba aktiviratipripadajući taster None i dodeliti tom tasteru Falloff mapu (slika 20.3a).

13. korakU podmeniju Falloff Parameters treba odraditi dve stvari. Prva stvar je da se izabereiz liste Falloff Type veličina Fresnel (slika 20.3b).

14. korakDruga stvar je da mora da se promeni crna boja (prvi pravougaonik sa bojom ispod nazivaFront: Side) i treba izabrati svetlo sivu boju sa koordinatama R:216, G:216 i B:216(slika 20.3a).

15. korakPritiskom na taster Go to Parent korisnik se vraća u glavni meni Material Editora(slika 20.3a).

Page 120: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 109

Slika 20.3. Dalje podešavanje prvog materijala

16. korakNa ovaj način završeno je kreiranje hromiranog materijala.

17. korakZa kreiranje aluminijuma treba iskoristiti materijal Hrom i to tako što će se iskopirati uzo-rak Hrom u četvrti uzorak unutar Material Editora. Novom materijalu dodeliti nazivAluminijum (slika 20.4a).

18. korakTreba aktivirati Diffuse taster sa bojom i tom tasteru dodeliti belu boju (slika 20.4a).

19. korakTreba aktivirati taster u nastavku Reflect opcije i to je taster kome je dodeljena Falloffmapa. U podmeniju Falloff Parameters treba da se izabere iz liste Falloff Typeveličina Perpendicular / Parallel.

20. korakPritiskom na taster Go to Parent korisnik se vraća u glavni meni Material Editora.

21. korakTreba aktivirati Raytrace taster (u nastavku naziva materijala Aluminijum) i iz dijalogaMaterial/Map Browser treba izabrati mapu Shellac.

22. korakPojavljuje se dijalog Replace Material i u njemu treba aktivirati opciju Keep oldmaterial as sub-material? i aktivirati je pritiskom na taster OK.

23. korakKao rezultat pojavljuje se dijalog sa otvorenim menijem Shellac Basic Parameters(slika 20.4a).

Page 121: Us   3 d grafika i animacija - praktikum

110 3D grafika i animacija

Slika 20.4. Podešavanje drugog materijala

24. korakU polju Shellac Color Blend treba definisati vrednost 50.0 (slika 20.4a).

25. korakTreba aktivirati taster u nastavku naziva Shellac Material (na slici 20.4b na ovomtasteru piše Material #33 (Standard)).

26. korakPojavljuje se odgovarajući meni za ovaj materijal (slika 20.4b). Treba napomenuti da i zaovaj materijal mora da bude Phong način senčenja (slika 20.4b).

27. korakU ovom dijalogu treba promeniti Diffuse boju u crnu boju (slika 20.4b).

28. korakTreba parametru Specular Level definisati vrednost 100, a parametru Glossinessdefinisati vrednost 20 (slika 20.4b).

29. korakPritiskom na taster Go to Parent korisnik se vraća u glavni meni za materijale. Na ovajnačin je kreiran i Aluminijum kao materijal.

30. korakDodeljivanje materijala se obavlja jednostavnim prevlačenjem uzorka na odgovarajući ob-jekat.

Page 122: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 111

31. korakMaterijal Hrom materijal je dodeljen bližoj lopti, a materijal Aluminijum je dodeljen daljojlopti. Materijal Checker je dodeljen ravni.

32. korakTreba postaviti tri Omni svetlosna izvora iz podmenija Lights na proizvoljne lokacije.Treba aktivirati za sve svetlosne izvora Shadows On kako bi se kreirale i senke prilikomvizuelizacije (slika 20.5).

Slika 20.5. Kompletna scena

33. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 20.6.

Slika 20.6. Vizualizovana scena

Page 123: Us   3 d grafika i animacija - praktikum

112 3D grafika i animacija

34. korakMože da se proba i da se promeni boja pozadine i to se obavlja putem Rendering >Environment i u polju Background treba izabrati proizvoljnu svetlo plavu boju kao bojupozadine.

35. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 20.7 (levo).

36. korakMože da se proba i da se pozadini dodeli neka mapa i to se obavlja putem Rendering >Environment i u dijalog treba markirati polje Use Map, a onda pritiskom na prateći tasterizabrati mapu čija sadržina će se pojaviti u pozadini scene. U ovom slučaju izabrana jemapa pod nazivom Planet koja se uobičajeno učitava u radno okruženje kada se program3DS MAX startuje.

37. korakPritiskom na funkcijski taster F10 se aktivira dijalog za vizuelizaciju koja se aktivirapritiskom na taster Render. Rezultat rada je prikazan na slici 20.7 (desno).

Slika 20.7. Vizualizovana scena sa svetlo plavom pozadinom i sa mapom u pozadini

Ovo je dosta zanimljiva priča oko kreiranja dva specifična materijala koja se puno koristeu industriji, kao i u projektovanju eksterijera i enterijera. Ova priča "pije vodu" jer je do-bijeni hromirani materijal mnogo sjajniji u odnosu na aluminijum i, zaista, oslikava nekurealnu sliku primene ovih materijala.

1.21. Rad sa materijalima - ISledi kratko i jasno uputstvo kako korisnik može da kreira jednostavne materijale, kao ikakve rezultate daje primena Mental Ray rendera.

1. korakNajpre treba aktivirati primenu Mental Ray rendera. Treba aktivirati padajući meniRendering i iz njega treba aktivirati komandu Render i kao rezultat pojavljuje se dijalog

Page 124: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 113

Render Scene Dialog. Unutar tog dijaloga treba aktivirati karticu Asign Renderer iu polju Production treba izabrati mental ray Renderer (slika 21.1).

Slika 21.1. Biranje novog načina renderovanja

2. korakTreba aktivirati Geometry > Standard primitives > Plane, modelovati ravan i isko-ristiti setovanja za ravan kao što je to prikazano na slici 21.2.

Slika 21.2. Setovanje za ravan

Page 125: Us   3 d grafika i animacija - praktikum

114 3D grafika i animacija

Boja koja se primenjuje na novoformiranu ravan ima koordinate R:7, G:233 i B:176.

3. korakTreba aktivirati Geometry > Extended primitives > Torus Knot, modelovati "izu-vijani" torus i iskoristiti setovanja za torus kao što je to prikazano na slici 21.3.

Slika 21.3. Setovanje za "izuvijani" torus

Kao rezultat pojavljuje se slika 21.4.

Slika 21.4. "Izuvijani" torus

4. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme dase kreira novi materijal za model modifikovanog torusa. Pritiskom na dugme Standardotvara se dijalog Materail/Map Browser i iz njega treba aktivirati mapu pod nazivomGlass [physics_phen] (slika 21.5).

Page 126: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 115

Slika 21.5. Dodeljivanje materijala

5. korakTreba aktivirati karticu Glass [physics_phen] Parameters i unutar nje treba podesitiparametre kao što je to prikazano na slici 21.6.

Slika 21.6. Podešavanje parametara dodeljenog materijala

Page 127: Us   3 d grafika i animacija - praktikum

116 3D grafika i animacija

Sve vrednosti unutar kartice su podešene na 210, boja u polju Light Persistanceima koordinate R:0, G:1 i B:0 (osnovna zelena boja), a boja u polju Outside LightPersistance ima koordinate R:0, G:0 i B:1 (osnovna plava boja).

6. korakJednostavnim prevlačenjem uzorka sa materijalom na model torusa vrši se dodeljivanjematerijala datom elementu. Nakon toga treba aktivirati funkcijski tastera F9 da bi sevideo finalni izgled "izuvijanog" torusa sa dodeljenim materijalom (slika 21.7).

Slika 21.7. Završni izgled "izvijanog" torusa

Ovo je jednostavna i dosta zanimljiva priča oko kreiranja specifičnog materijala. Ovapriča "pije vodu" jer je dobijeni materijal izuzetno dobar, a primenom druge vrste renderadobijaju se, ponekad, neočekivani rezultati.

1.22. Rad sa materijalima - II

Sledi kratko i jasno uputstvo kako korisnik može da kreira složenije materijale, kao i kakverezultate daje primena Mental Ray rendera.

1. korakNajpre treba aktivirati primenu Mental Ray rendera. Treba aktivirati padajući meniRendering i iz njega treba aktivirati komandu Render i kao rezultat pojavljuje se dijalogRender Scene Dialog. Unutar tog dijaloga treba aktivirati karticu Asign Renderer iu polju Production treba izabrati mental ray Renderer (slika 22.1).

Page 128: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 117

Slika 22.1. Biranje novog načina renderovanja

2. korakTreba aktivirati Geometry > Standard primitives > Teapot, modelovati čajnik i is-koristiti setovanja za čajnik kao što je to prikazano na slici 22.2.

Slika 22.2. Setovanje za čajnik

3. korakTreba aktivirati panel Modify i iz padajuće liste (uz desnu ivicu ekrana) trebalo bi aktivi-rati modifikator Shell. Podešavanje parametara pomenutog modifikatora treba obavitikao što je to prikazano na slici 22.3 - Inner Amount = 1.0, Outer Amount = 0.1 iSegments = 1.

Page 129: Us   3 d grafika i animacija - praktikum

118 3D grafika i animacija

Slika 22.3. Podešavanje modifikatora Shell

4. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme da sekreira novi materijal za model modifikovanog torusa. Pritiskom na dugme u nastavkuopcije Diffuse (slika 22.4) otvara se dijalog Materail/Map Browser i iz njega trebaaktivirati mapu pod nazivom Raytrace.

Slika 22.4. Ubacivanje mape za Diffuse

5. korakUnutar aktivne mape Raytrace treba otvoriti karticu pod nazivom Raytracer Parame-ters. Parametre treba podesiti kao što je prikazano na slici 22.5. Unutar Backgroundtreba markirati polje za boju i tom polju treba dodeliti boju sa sledećim koordinatama:R:169, G:75 i B:2.

6. korakU tekućem materijalu trebalo bi otvoriti karticu Maps i trebalo bi aktivirati taster Noneu nastavku mape Bump. Pritiskom na dugme None otvara se dijalog Materail/MapBrowser i iz njega treba aktivirati mapu pod nazivom Bitmap.

7. korakTreba učitati odgovorajuću fotografiju kao prateću mapu. U ovom primeru iskorišćena jefotografija koja je "došla" sa instalacijom programa, a reč je o fotografiji pod nazivom

Page 130: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 119

brick_yellow.jpg koja se nalazi u podddirektorijumu Bricks unutar direktorijumaMaps, gde se nalazi instaliran program 3DS Max.

Slika 22.5. Podešavanje mape Raytrace

Kao rezultat primene ovih elemenata pojavljuje se slika 22.6.

Slika 22.6. Podešavanje bitmape

8. korakJednostavnim prevlačenjem uzorka sa materijalom na model čajnika vrši se dodeljivanjematerijala datom elementu. Nakon toga mogu da se uklone otvoreni paneli kako bi sevideo jasnije sadržaj prozora Perspective.

Page 131: Us   3 d grafika i animacija - praktikum

120 3D grafika i animacija

9. korakNakon toga treba aktivirati funkcijski tastera F9 da bi se video finalni izgled čajnika sadodeljenim materijalom (slika 22.7).

Slika 22.7. Završni izgled čajnika

Ovo je jednostavna i dosta zanimljiva priča oko kreiranja specifičnog i malo složenijegmaterijala. Ova priča "pije vodu" jer je dobijeni materijal izuzetno dobar, a primenomdruge vrste rendera dobijaju se, dosta često, neočekivani rezultati.

1.23. Rad sa materijalima - III

Sledi kratko i jasno uputstvo kako korisnik može da kreira složenije materijale, kao i kakverezultate daje primena Mental Ray rendera. U ovom primeru će biti reči oko kreiranjamaterijala i njegovo prikazivanje na žičanom modelu.

1. korakNajpre treba aktivirati primenu Mental Ray rendera. Treba aktivirati padajući meniRendering i iz njega treba aktivirati komandu Render i kao rezultat pojavljuje se dijalogRender Scene Dialog. Unutar tog dijaloga treba aktivirati karticu Asign Renderer iu polju Production treba izabrati mental ray Renderer (slika 23.1).

2. korakTreba aktivirati Geometry > Standard primitives > Plane, modelovati ravan i isko-ristiti setovanja za ravan kao što je to prikazano na slici 23.2, levo. Boja koja se primenjujena novoformiranu ravan ima koordinate R:85, G:28 i B:177.

3. korakTreba aktivirati Geometry > Standard primitives > Teapot, modelovati čajnik i is-koristiti setovanja za čajnik kao što je to prikazano na slici 23.2, desno.

Page 132: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 121

Slika 23.1. Biranje novog načina renderovanja

Slika 23.2. Podešavanje parametara ravni i čajnika

4. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme da sekreira novi materijal za model čajnika. Pritiskom na dugme Standard otvara se dijalogMaterail/Map Browser i iz njega treba aktivirati mapu pod nazivom Raytrace.

5. korakUnutar kartice Raytrace Basic Parameters treba podesiti sledeće parametre:

Page 133: Us   3 d grafika i animacija - praktikum

122 3D grafika i animacija

• Treba markirati (aktivirati) polja kod opcija 2-Sided i Wire (slika 23.3).

• Treba markirati polja kod opcija Ambient i Reflect. Za ta polja treba podesitiboju sa koordinatama R:255, G:255 i B:255 (bela boja) da bude aktivna.

• Treba podesiti da boja polja Diffuse ima sledeće koordinate: R:0, G:0 i B:255(osnovna plava boja).

• Treba markirati polja kod opcija Luminosity i Transparency. Za ta polja trebapodesiti boju sa koordinatama R:0, G:0 i B:255 (osnovna plava boja) da budeaktivna.

• Treba markirati da bude aktivno polje Index of Refr i treba podesiti da budeaktivna vrednost 7.0.

Nakon ovog podešavanja treba aktivirati levim tasterom miša taster u nastavku poljaTransparency (slika 23.3).

Slika 23.3. Aktiviranje mape za Transparency opciju

6. korakPritiskom na pomenuto dugme otvara se dijalog Materail/Map Browser i iz njega trebaaktivirati mapu pod nazivom Falloff.

7. korakUnutar kartice Falloff Parameters treba podesiti parametre kao što je to prikazano naslici 23.4.

Slika 23.4. Podešavanje Falloff mape

8. korakUnutar kartice Falloff Parameters treba podesiti i ostale parametre kao što je toprikazano na slici 23.5. Što se tiče boje polja pod nazivom Specular Color tu trebadefinisati boju sa koordinatama R:0, G:0 i B:255 (osnovna plava boja).

Page 134: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 123

Slika 23.5. Dodatno podešavanje mape

9. korakTreba otvoriti karticu Extended Parameters i unutar pratećeg dijaloga treba podesitiparametre kao što je to prikazano na slici 23.6.

Slika 23.6. Dodatni parametri mape

10. korakZa polja Extra Lightning i Translucency treba podesiti boju sa koordinatama R:0,G:255 i B:0 (osnovna zelena boja), a za polje pod nazivom Fluoresence treba podesitiboju sa koordinatama R:139, G:255 i B:0 (slika 23.6).

11. korakOtvoriti karticu Raytracer Controls i u njoj podesiti parametre kao što je prikazano naslici 23.7.

Slika 23.7. Još dodatnih parametara mape

Page 135: Us   3 d grafika i animacija - praktikum

124 3D grafika i animacija

12. korakZa ravan podesiti materijal koji će imati boju sa koordinatama R:91, G:22 i B:150.

13. korakJednostavnim prevlačenjem uzoraka sa materijalom na model čajnika i na model ravnivrši se dodeljivanje materijala datim elementima. Nakon toga mogu da se uklone otvorenipaneli kako bi se video jasnije sadržaj prozora Perspective.

14. korakNakon toga treba aktivirati funkcijski tastera F9 da bi se video finalni izgled čajnika sadodeljenim materijalom (slika 23.8).

Slika 23.8. Završni izgled čajnika

Ovo je dosta zanimljiva priča oko kreiranja specifičnog i malo složenijeg materijala. Ovapriča "može da prođe" jer je dobijeni materijal izuzetno dobar, a primenom druge vrsterendera dobijaju se, dosta često, neočekivani rezultati.

1.24. Rad sa materijalima - IV

Sledi kratko i jasno uputstvo kako korisnik može da kreira složenije materijale, kao i kakverezultate daje primena Mental Ray rendera. U ovom primeru će biti reči oko kreiranjamaterijala za koje može da se upotrebi odgovarajuća fotografija.

1. korakNajpre treba aktivirati primenu Mental Ray rendera. Treba aktivirati padajući meniRendering i iz njega treba aktivirati komandu Render i kao rezultat pojavljuje se dijalogRender Scene Dialog. Unutar tog dijaloga treba aktivirati karticu Asign Renderer iu polju Production treba izabrati mental ray Renderer (slika 24.1).

Page 136: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 125

Slika 24.1. Biranje novog načina renderovanja

2. korakTreba aktivirati Geometry > Standard primitives > Plane, modelovati ravan i isko-ristiti setovanja za ravan kao što je to prikazano na slici 24.2, levo. Boja koja se primenjujena novoformiranu ravan ima koordinate R:108, G:143 i B:115.

3. korakTreba aktivirati Geometry > Standard primitives > Teapot, modelovati čajnik i is-koristiti setovanja za čajnik kao što je to prikazano na slici 24.2, desno.

Slika 24.2. Podešavanje parametara ravni i čajnika

Page 137: Us   3 d grafika i animacija - praktikum

126 3D grafika i animacija

4. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme da sekreira novi materijal za model čajnika. Pritiskom na dugme iza naziva Diffuse (slika24.3) otvara se dijalog Materail/Map Browser i iz njega treba aktivirati mapu podnazivom Bitmap, a nakon toga treba učitati odgovarajuću fotografiju koja će se primenitina željeni model.

Slika 24.3. Učitavanje bitmape kao mape

5. korakTreba otvoriti karticu Maps i unutar dijaloga treba iskopirati mapu iz polja DiffuseColor u polje Bump. Kopiranje se obavlja na sledeći način: klikne se desnim tasterommiša na polje Diffuse Color i iz kontekstnoj menija se aktivira komanda Copy, a ondase klikne desnim taserom miša na polje Bump i iz kontekstnoj menija se bira komandaPaste (Instance) (slika 24.4 levo).

Slika 24.4. Kopiranje i dodavanje mapa

6. korakU polje Reflection treba učitati proizvoljnu fotografiju (slika 24.4 desno).

7. korakJednostavnim prevlačenjem uzoraka sa materijalom na model čajnika i na model ravnivrši se dodeljivanje materijala datim elementima. Nakon toga mogu da se uklone otvorenipaneli kako bi se video jasnije sadržaj prozora Perspective.

8. korakNakon toga treba aktivirati funkcijski tastera F9 da bi se video finalni izgled čajnika sadodeljenim materijalom (slika 24.5).

Page 138: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 127

Slika 24.5. Završni izgled scene

Ovo je zanimljiva priča oko kreiranja specifičnog i složenijeg materijala. Dobijeni ma-terijal izuzetno dobar, a primenom druge vrste rendera dobijaju se, često, neočekivani iiznenađujući rezultati.

1.25. Rad sa materijalima - V

Sledi kratko i jasno uputstvo kako korisnik može da kreira složenije materijale, kao i kakverezultate daje primena Mental Ray rendera.

1. korakNajpre treba aktivirati primenu Mental Ray rendera. Treba aktivirati padajući meniRendering i iz njega treba aktivirati komandu Render i kao rezultat pojavljuje se dijalogRender Scene Dialog. Unutar tog dijaloga treba aktivirati karticu Asign Renderer iu polju Production treba izabrati mental ray Renderer (slika 25.1).

2. korakTreba aktivirati Geometry > Standard primitives > Teapot, modelovati čajnik i is-koristiti setovanja za ravan kao što je to prikazano na slici 25.2, levo.

3. korakTreba aktivirati panel Modify i iz padajuće liste (uz desnu ivicu ekrana) trebalo bi aktiviratimodifikator Shell. Podešavanje parametara pomenutog modifikatora treba obaviti kaošto je to prikazano na slici 25.2, desno.

4. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme dase kreira novi materijal za model modifikovanog torusa. Pritiskom na dugme Standardotvara se dijalog Materail/Map Browser i iz njega treba aktivirati mapu pod nazivomGlass [physics_phen] (slika 25.3).

Page 139: Us   3 d grafika i animacija - praktikum

128 3D grafika i animacija

Slika 25.1. Biranje novog načina renderovanja

Slika 25.2. Podešavanje parametara čajnika i odgovarajućeg modifikatora

5. korakTreba aktivirati karticu Glass [physics_phen] Parameters i unutar nje treba podesitiparametre kao što je to prikazano na slici 25.4.

6. korakSve vrednosti unutar kartice su podešene na 35, boja u polju Light Persistance

Page 140: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 129

ima koordinate R:0, G:0 i B:1 (osnovna plava boja), a boja u polju Outside LightPersistance ima koordinate R:0, G:1 i B:0 (osnovna zelena boja).

Slika 25.3. Dodeljivanje materijala

Slika 25.4. Podešavanje parametara dodeljenog materijala

7. korakJednostavnim prevlačenjem uzorka sa materijalom na model torusa vrši se dodeljivanjematerijala datom elementu.

8. korakNakon toga treba aktivirati funkcijski tastera F9 da bi se video finalni izgled čajnika sadodeljenim materijalom (slika 25.5).

Page 141: Us   3 d grafika i animacija - praktikum

130 3D grafika i animacija

Slika 25.5. Završni izgled čajnika

Ovo je jednostavna i dosta zanimljiva priča oko kreiranja specifičnog materijala.

1.26. Rad sa materijalima - VISledi kratko i jasno uputstvo kako korisnik može da kreira složenije materijale, kao i kakverezultate daje primena Mental Ray rendera. U ovom primeru će biti reči oko kreiranjamaterijala i njegovo prikazivanje na modelu lopte.

1. korakNajpre treba aktivirati primenu Mental Ray rendera. Treba aktivirati padajući meniRendering i iz njega treba aktivirati komandu Render i kao rezultat pojavljuje se dijalogRender Scene Dialog. Unutar tog dijaloga treba aktivirati karticu Asign Renderer iu polju Production treba izabrati mental ray Renderer (slika 26.1).

Slika 26.1. Biranje novog načina renderovanja

Page 142: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 131

2. korakTreba aktivirati Geometry > Standard primitives > Plane, modelovati ravan i isko-ristiti setovanja za ravan kao što je to prikazano na slici 26.2, levo.

3. korakTreba aktivirati Geometry > Standard primitives > Sphere, modelovati loptu i is-koristiti setovanja za loptu kao što je to prikazano na slici 26.2, u sredini.

Slika 26.2. Podešavanje parametara za ravan, loptu i materijala za ravan

4. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme da sekreira novi materijal za model ravni. Treba izabrati iz padajuće liste Multi-Layer (slika26.3 desno). Ostala podešavanja treba obaviti kao što je to prikazano na slici 26.3 desno.Kordinate boje za polja Ambient i Diffuse su: R:0, G:0 i B:0 (crna boja).

5. korakU tekućem materijalu trebalo bi otvoriti karticu Maps i trebalo bi aktivirati taster None unastavku mape Reflection. Pritiskom na dugme None otvara se dijalog Materail/MapBrowser i iz njega treba aktivirati mapu pod nazivom Raytrace (slika 26.3).

Slika 26.3. Podešavanje materijala za ravan

Page 143: Us   3 d grafika i animacija - praktikum

132 3D grafika i animacija

6. korakSada treba odabrati materijal za loptu. Pritiskom na taster M na tastaturi aktivira seMaterial Editor. Izabrati uzorak i otovoriti karticu Maps. U polja Diffuse Color iBump treba učitati istu fotografiju koja će se iskoristiti kao tekstura (slika 26.4). U ovomslučaju iskorišćena je fotografija Zemlje, koja je "stigla" sa instalacijom programa.

Slika 26.4. Podešavanje materijala za loptu

Treba napomenuti da je vrednost za mapu Bump povećana sa 30 na 100, kao što je toprikazano na slici 26.4.

7. korakJednostavnim prevlačenjem uzoraka sa materijalom na model lopte i na model ravni vršise dodeljivanje materijala datim elementima.

8. korakNakon toga treba aktivirati funkcijski tastera F9 da bi se video finalni izgled lopte sadodeljenim materijalom (slika 26.5).

Slika 26.5. Završni izgled scene

Page 144: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 133

Ovo je zanimljiva priča oko kreiranja specifičnog materijala. Dobijeni materijal izuzetnodobar, a primenom druge vrste rendera dobijaju se, često, neočekivani i iznenađujućirezultati.

1.27. Rad sa materijalima - VII

Sledi kratko i jasno uputstvo kako korisnik može da kreira složenije materijale, kao i kakverezultate daje uobičajen rendera. U ovom primeru će biti reči oko kreiranja materijala kojisimulira staro zlato i njegovo prikazivanje na modelu čajnika.

1. korakTreba aktivirati Geometry > Standard primitives > Teapot, modelovati čajnik i is-koristiti setovanja za čajnik kao što je to prikazano na slici 27.1, levo.

2. korakTreba aktivirati panel Modify i iz padajuće liste (uz desnu ivicu ekrana) trebalo bi aktivi-rati modifikator TurboSmooth. Podešavanje parametara pomenutog modifikatora trebaobaviti kao što je to prikazano na slici 27.1, sredina.

3. korakTreba aktivirati panel Modify i iz padajuće liste (uz desnu ivicu ekrana) trebalo bi aktivi-rati modifikator Shell. Podešavanje parametara pomenutog modifikatora treba obavitikao što je to prikazano na slici 27.1, desno.

Slika 27.1. Podešavanje čajnika i odgovarajući modifikatori

4. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Pritiskom na dugme iza

Page 145: Us   3 d grafika i animacija - praktikum

134 3D grafika i animacija

naziva Diffuse (zaokruženo na slici 27.2 levo) otvara se dijalog Materail/Map Browseri iz njega treba aktivirati mapu pod nazivom Falloff.

Slika 27.2. Podešavanje mapa

5. korakPritiskom na dugme iza naziva Color (zaokruženo na slici 27.2 desno) otvara se dijalogMaterail/Map Browser i iz njega treba aktivirati mapu pod nazivom Falloff.

6. korakPritiskom na dugme iza naziva Specular Level (zaokruženo na slici 27.3 levo) otvarase dijalog Materail/Map Browser i iz njega treba aktivirati mapu pod nazivom Bitmap,a nakon toga treba učitati odgovarajuću fotografiju koja će se primeniti na željeni model.

Slika 27.3. Dodatno podešavanje mapa

7. korakU tekućem materijalu trebalo bi otvoriti karticu Maps i trebalo bi iskopirati mapu Falloff

Page 146: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 135

iz polja Diffuse Color u polje Refraction (slika 27.3, desno).

8. korakTreba "ubaciti" četiri Omni svetlosna izvora sa osobinama koje su prikazane na slici 27.4levo. Njihov raspored je prikazan na slici 27.4 desno.

Slika 27.4. Omni svetlosni izvori i njihov raspored

9. korakJednostavnim prevlačenjem uzorka sa materijalom na model čajnika vrši se dodeljivanjematerijala datim elementima. Nakon toga treba aktivirati funkcijski tastera F9 da bi sevideo finalni izgled lopte sa dodeljenim materijalom (slika 27.5).

Slika 27.5. Završni izgled scene

Page 147: Us   3 d grafika i animacija - praktikum

136 3D grafika i animacija

Ovo je zanimljiva priča oko kreiranja specifičnog materijala. Dobijeni materijal izuzetnodobar, a primenom druge vrste rendera dobijaju se, često, neočekivani i iznenađujućirezultati.

1.28. Rad sa materijalima - VIII

Sledi kratko i jasno uputstvo kako korisnik može da kreira složenije materijale, kao i kakverezultate daje uobičajen rendera. U ovom primeru će biti reči oko kreiranja materijala kojisimulira zlato i njegovo prikazivanje na modelima osnovnih entiteta.

1. korakTreba aktivirati Geometry > Standard primitives > ..., modelovati entitete prika-zane na slici 28.1 i iskoristiti uobičajena setovanja za svaki entitet.

Slika 28.1. Osnovni entiteti u sceni

2. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme dase kreira novi materijal. Treba izabrati iz padajuće liste Multi-Layer (slika 28.2 levo).Kordinate boje za polja Ambient i Diffuse su: R:26, G:18 i B:4 (tamnobraon boja). Upolju Diffuse Level treba podesiti vrednost na 30 (slika 28.2 levo). Trebalo bi markiratida bude aktivna i opcija 2-Sided.

3. korakSledi dalje podešavanje kao što je to prikazano na slici 28.2 desno. Kordinate boje u oblastiFirst Specular Layer su: R:245, G:179 i B:30 (jedna vrsta narandžaste boje). Upolju Level treba uneti vrednost 120, a u polju Glossiness treba uneti vrednost 25.Kordinate boje u oblasti Second Specular Layer su: R:255, G:255 i B:255 (belaboja). U polju Level treba uneti vrednost 175, a u polju Glossiness trebalo bi unetivrednost 90.

Page 148: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 137

Slika 28.2. Podešavanja materijala

4. korakU tekućem materijalu trebalo bi otvoriti karticu Maps i trebalo bi aktivirati taster None unastavku mape Reflection. Pritiskom na dugme None otvara se dijalog Materail/MapBrowser i iz njega treba aktivirati mapu pod nazivom Falloff (slika 28.3).

Slika 28.3. Dodeljivanje određene mape

Page 149: Us   3 d grafika i animacija - praktikum

138 3D grafika i animacija

5. korakUnutar aktivne mape Falloff postoje dva slota: gornji koji je crne boje i donji koji jebele boje. Trebalo bi aktivirati taster None gornjeg (crnog) slota i u njega treba "ubaciti"mapu pod nazivom Raytrace, a tom polju treba dodeliti vrednost 30 (slika 28.4). Trebalobi aktivirati taster None donjeg (belog) slota i u njega treba "ubaciti" mapu pod nazivomRaytrace, a tom polju treba dodeliti vrednost 90. Iz padajuće liste Falloff Type trebaizabrati opciju Fresnel.

Slika 28.4. Podešavanje Raytrace mape

6. korakNajpre treba aktivirati primenu Mental Ray rendera. Treba aktivirati padajući meniRendering i iz njega treba aktivirati komandu Render i kao rezultat pojavljuje se dijalogRender Scene Dialog. Unutar tog dijaloga treba aktivirati karticu Asign Renderer iu polju Production treba izabrati mental ray Renderer (slika 28.5).

Slika 28.5. Podešavanje naprednijeg rendera

Page 150: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 139

7. korakJednostavnim prevlačenjem uzorka sa materijalom na modele osnovnih entiteta vrši se do-deljivanje materijala datim elementima. Nakon toga treba aktivirati funkcijski tastera F9da bi se video finalni izgled entiteta sa dodeljenim materijalom (slika 28.6), bez dodatnihsvetlosnih izvora.

Slika 28.6. Završni izgled scene bez dodatnih svetlosnih izvora

8. korakTreba ubaciti tri Omni svetlosna izvora i podesiti njihove parametre proizvoljno. Na slici28.7 prikazane su orijentacione pozicije svetlosnih izvora.

Slika 28.7. Dodatni svetlosni izvori

9. korakTreba aktivirati Geometry > Standard primitives > Plane, modelovati ravan i isko-ristiti proizvoljna setovanja za ravan.

Page 151: Us   3 d grafika i animacija - praktikum

140 3D grafika i animacija

10. korakTreba aktivirati funkcijski tastera F9 da bi se video finalni izgled entiteta sa dodeljenimmaterijalom (slika 28.8), sa dodatnim svetlosnim izvorima.

Slika 28.8. Završni izgled scene sa dodatnim svetlosnim izvorima

Ovo je kratka priča oko kreiranja materijala koji podseća na zlato. Dobijeni materijalizuzetno dobar, a primenom druge vrste rendera dobijaju se, vrlo često, neočekivani iiznenađujući rezultati.

1.29. "Dobijanje" šoljice za čaj iz čajnika

Sledi kratko i jasno uputstvo kako korisnik može da kreira šoljicu za čaj ili kafu iz postojećegmodela čajnika.

1. korakTreba aktivirati Geometry > Standard primitives > Teapot, modelovati čajnik i is-koristiti setovanja za čajnik kao što je to prikazano na slici 29.1, levo.

2. korakTreba markirati čajnik i aktivirati komandu Edit > Clone i u dijalogu, koji se pojavljuje,trebalo bi izabrati komandu Copy i novonastalom objektu treba dodeliti naziv Soljica01.

3. korakSa aktivnom komandom Move trebalo bi pomeriti novonastalu kopiju čajnika po X osina proizvoljno rastojanje. Treba aktivirati panel Modify i u pripadajućem panelu trebapodesiti veličinu i oblik kopije kao što je to prikazano na slici 29.1, u sredini.

4. korakTreba aktivirati panel Modify i iz padajuće liste treba izabrati modifikator Stretch ipodesiti njegove vrednost kao što je to prikazano na slici 29.1 desno.

Page 152: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 141

Slika 29.1. Kreiranje čajnika i njegovo modifikovanje

Kao rezultat ovog podešavanja dobija se šoljica za čaj ili za kafu kao što je to prikazanona slici 29.2.

Slika 29.2. Šoljica za čaj ili kafu

5. korakTreba markirati šoljicu za čaj i aktivirati komandu Edit > Clone i u dijalogu, koji sepojavljuje, trebalo bi izabrati komandu Copy i novonastalom objektu treba dodeliti nazivTacna (slika 29.3).

6. korakSa aktivnom komandom Move trebalo bi pomeriti novonastalu kopiju šoljice za čaj po X

osi na proizvoljno rastojanje. Treba aktivirati panel Modify i u pripadajućem panelu trebapodesiti veličinu i oblik kopije kao što je to prikazano na slici 29.4 levo. Kao rezultat ovog

Page 153: Us   3 d grafika i animacija - praktikum

142 3D grafika i animacija

podešavanja dobija se deo šoljice za čaj ili za kafu kao što je to prikazano na slici 29.4desno.

Slika 29.3. Kopiranje šoljice za čaj ili kafu

Slika 29.4. Podešavanje kopije šoljice za čaj ili kafu

7. korakTreba aktivirati panel Modify i iz padajuće liste treba izabrati modifikator Taper i podesitinjegove vrednost kao što je to prikazano na slici 29.5 levo. Treba posebno voditi računada modifikator Taper mora da se nalazi između naziva Teapot i modifikatora Stretch,kao što je to prikazano na slici 29.5 levo.

Treba podesiti da parametar Amount ima vrednost 0.95, a parametar Curve bi trebalo daima vrednost −1.7.

Kao rezultat ovog podešavanja pojavljuje se slika 29.5 desno.

Page 154: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 143

Slika 29.5. Podešavanje tacne

8. korakTreba aktivirati panel Modify i iz padajuće liste treba izabrati modifikator Stretch ipodesiti njegove vrednost kao što je to prikazano na slici 29.6 levo.

Slika 29.6. Dalje podešavanje tacne

Treba podesiti da parametar Stretch ima vrednost −3.0, a parametar Amplify bi trebaloda ima vrednost −20.0.

Kao rezultat ovog podešavanja pojavljuje se slika 29.6 desno.

9. korakTrebalo bi podesiti da pozadina scene bude svetlija, a ne crna što je početno stanje.

Page 155: Us   3 d grafika i animacija - praktikum

144 3D grafika i animacija

Treba aktivirati Rendering > Environment i u pripadajućem dijalogu treba podesiti daBackground Color bude svetlosiva boja.

10. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme da sekreiraju novi materijali. Treba napraviti četiri materijala sa četiri različite boje, kako bisvaki element bio druge boje (slika 29.7 levo).

Slika 29.7. Podešavanje materijala i dodeljivanje objektima

11. korakTreba aktivirati funkcijski tastera F9 da bi se video finalni izgled entiteta sa dodeljenimmaterijalom (slika 29.8), sa dodatnim svetlosnim izvorima.

Slika 29.8. Završni izgled scene

Page 156: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 145

Ovo je kratka priča oko kreiranja novog objekta iz postojećeg. Dobijeni objekat je dobar,a primenom sličnih "zahvata" dobijaju se, vrlo često, iznenađujući rezultati.

1.30. Kreiranje "2D slika"

Sledi kratko i jasno uputstvo kako korisnik može da kreira fotografiju koja odaje utisakkao da je reč o skici, a ne o fotografiji 3D modela.

1. korakTreba aktivirati Geometry > Standard primitives > Plane, modelovati ravan i isko-ristiti setovanja za ravan kao što je to prikazano na slici 30.1, levo.

2. korakTreba aktivirati Geometry > Standard primitives > Teapot, modelovati čajnik i is-koristiti setovanja za čajnik kao što je to prikazano na slici 30.1, desno.

Slika 30.1. Modelovanje ravni i čajnika na njoj

3. korakPritiskom na taster M na tastaturi aktivira se Material Editor. U oblasti pod nazivomSelf-Illumination treba podesiti vrednost 100 za polje Color (zaokruženo na slici30.2).

4. korakPritiskom na dugme iza naziva Diffuse (uokvireno na slici 30.2) otvara se dijalog podnazivom Materail/Map Browser i iz njega treba aktivirati mapu pod nazivom Falloff.

Page 157: Us   3 d grafika i animacija - praktikum

146 3D grafika i animacija

Slika 30.2. Podešavanje materijala

5. korakUnutar aktivne mape Falloff postoje dva slota: gornji koji je crne boje i donji koji jebele boje. Iz padajuće liste Falloff Type treba izabrati opciju Shadow / Light, kaošto je to prikazano na slici 30.3.

Slika 30.3. Podešavanje Mape Falloff

Page 158: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 147

Trebalo bi promeniti i boje slotova: gornja boja trebalo bi da bude osnovna zelena boja(R:0, G:255 i B:0), a donja osnovna žuta boja (R:255, G:255 i B:0), kao što je toprikazano na slici 30.3.

6. korakUnutar aktivne mape Falloff treba otvoriti Mix Curve i unutar tog dela panela trebalobi napraviti "krivu" koja liči na stepenice i to sa tri stepenika, gde su linije horizontalne ivertikalne.

Za dodavanje novih čvorova trebalo bi koristiti dugme Add point (ikonica na sebi imamalu žutu zvezdu sa crvenom linijom). Za pomeranje čvorova koristi se dugme Move(ikonica na sebi nacrtan znak plus sa strelicama na krajevima).

7. korakTreba aktivirati funkcijski tastera F9 da bi se video finalni izgled entiteta sa dodeljenimmaterijalom (slika 30.4).

Slika 30.4. Završni izgled scene sa inicijalnom mapom

Izgled čajnika može da se promeni i menjanjem odgovarajuće opcije iz ponuđene listeFalloff Type unutar aktivne Falloff mape.

8. korakUnutar aktivne mape Falloff postoje dva slota: gornji koji je zelene boje i donji kojije žute boje (što je posledica prethodnog podešavanja). Iz padajuće liste Falloff Typetreba izabrati opciju Perpendicular / Parallel, kao što je to prikazano na slici 30.5.

9. korakTreba aktivirati funkcijski tastera F9 da bi se video finalni izgled entiteta sa dodeljenim"novim" materijalom (slika 30.6).

Page 159: Us   3 d grafika i animacija - praktikum

148 3D grafika i animacija

Slika 30.5. Promena u mapi

Razlika u izgledu završne scene je očigledna.

Slika 30.6. Završna scena sa promenjenom mapom

Ovo je kratka priča oko kreiranja fotografije koja podseća na skicu, a ne na fotografijumaterijalizovanog i vizuelizovanog 3D modela. Dobijeni efekat je "zgodan", a primenomsličnih "zahvata" dobijaju se, vrlo često, iznenađujući rezultati.

Page 160: Us   3 d grafika i animacija - praktikum

Glava 2

Veza programa CorelDRAW i 3DS MAX 9

U ovom delu biće reči o vezi između programa CorelDRAW i 3DS MAX, jer studenti trebada naprave 3D modele elemenata vizuelnog identiteta (urađen je u programu CorelDRAWu okviru predmeta Osnovi grafičkog dizajna) i da iskoriste svoja grafička rešenja kaoprateće mape unutar programa 3DS MAX. Biće detaljno objašnjeno kreiranje 3D modelavizit karte, kreiranje mape, njeno dodeljivanje modelu i kvalitetna vizuelizacija.

1. korakTreba iskoristiti grafiško rešenje vizit karte iz predmeta Osnovi grafičkog dizajna. Uovom primeru iskorišćen je oblik vizit karte koji je malo "problematičan" i neobičan, imalo teže bi se izmodelovao unutar programa 3DS MAX.

Slika 1. Rešenje vizit karte

Page 161: Us   3 d grafika i animacija - praktikum

150 3D grafika i animacija

2. korakSledeći korak je formiranje konture koja će se "uvesti" u radni prostor programa 3DS MAX.Najpre treba obrisati sadržinu vizit karte i zadržati samo konturu (slika 2 levo). Nemaograničenja po pitanju konture, što znači da elementi konture mogu da budu kreiranirazličitim komandama. Sledeći korak je aktiviranje komande File > Export i u pripada-jućem dijalogu treba podesiti parametre kao što je to prikazano na slici 2 desno.

Slika 2. Izvoz konture kao AI fajla

Napomena: Treba "izvesti" konturu kao fajl programa Adobe Illustrator 7.0, jer ovaverzija se uvozi u program 3DS MAX bez problema (slika 1.2 desno).

3. korakSledeći korak je kreiranje mape koju treba "zalepiti" za 3D model. Treba kliknuti levimtasterom miša na konturu i pritisnuti desnim tasterom miša na belu boju kako bi se konturauklopila u pozadinu, tj. kako bi se uklonila kontura. Ako je korisnik nacrtao konturu kaoposeban objekat, onda je najjednostavnije da se kontura obriše.

4. korakTreba aktivirati komandu File > Export i u pripadajućem dijalogu unutar polja Save astype treba izabrati opciju JPEG Bitmaps. Treba posebno napomenuti da treba "izvesti"mapu kao JPG fotografiju i to treba "izvesti" sa rezolucijom najmanje 300 dpi. U ovomprimeru "izvezena" je u rezolucijama 300 dpi i 600 dpi (slika 3 u sredini i desno), kakobi se videlo da nema razlike između primenjenih mapa iznad rezolucije 300 dpi.

Page 162: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 151

Slika 3. Originalna mapa i izvezena mapa rezolucija 300dpi i 600dpi

5. korakTreba startovati program 3DS MAX i unutar njega treba "ubaciti" AI fajl sa konturom.Aktivira se komanda File > Import i na sva pitanja treba odgovoriti potvrdno kako bise kontura uklopila sa tekućom scenom.

Slika 4. Uvezena AI kontura u radni prostor

Page 163: Us   3 d grafika i animacija - praktikum

152 3D grafika i animacija

6. korakTreba aktivirati panel Modify i iz padajuće liste (uz desnu ivicu ekrana) trebalo bi aktiviratimodifikator Extrude. Podešavanje parametara pomenutog modifikatora treba obaviti kaošto je to prikazano na slici 5 levo - Amount = 0.01 i Segments = 1. Na slici 5 desnoprikazano je dejstvo primenjenog modifikatora na "uveženu" konturu.

Slika 5. Primenjen modifikator Extrude na konturu

7. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme da sekreira novi materijal za model vizit karte. Pritiskom na dugme iza naziva Diffuse (zao-kruženo na slici 6) otvara se dijalog Materail/Map Browser i iz njega treba aktiviratimapu pod nazivom Bitmap (uokvirena je u pripadajućem dijalogu), a nakon toga trebaučitati odgovarajuću fotografiju koja će se primeniti na željeni model, a to je u ovomslučaju fotografija Vizit03.jpg sa rezolucijom 300 dpi.

8. korakJednostavnim prevlačenjem uzorka sa materijalom na model vizit karte vrši se dodeljivanjematerijala datom elementu. Kao što se vidi sa slike 7 desno mapa se "uklopila kako treba"na gornju površinu vizit karte.

9. korakTreba aktivirati Geometry > Standard primitives > Plane, modelovati ravan i isko-ristiti setovanja za ravan kao što je to prikazano na slici 7 levo. Boja ravni može da budekrajnje proizvoljna.

10. korakPritiskom na taster M na tastaturi aktivira se Material Editor. Došlo je vreme dase kreira novi materijal za ravan. Pritiskom na dugme Standard otvara se dijalog

Page 164: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 153

Materail/Map Browser i iz njega treba aktivirati materijal koji će odgovarati drvetu.

Slika 6. Izbor fotografije kao mape za vizit kartu

Slika 7. Dodeljeni materijali

Page 165: Us   3 d grafika i animacija - praktikum

154 3D grafika i animacija

11. korakJednostavnim prevlačenjem uzorka sa materijalom na ravan vrši se dodeljivanje materijaladatom elementu.

12. korakNakon toga treba aktivirati funkcijski tastera F9 da bi se video finalni izgled vizit kartesa dodeljenim materijalom (slika 8).

Slika 8. 3D model vizit karte sa odgovarajućom mapom

Page 166: Us   3 d grafika i animacija - praktikum

Glava 3

3DS MAX 9 - Primeri i zadaci

U ovom delu praktikuma biće prikazano četrnaest zadataka koje korisnik može da uradisâm. Na prve dve strane ovog dela nalaze se dve kombinacije fotografija modela kojiurađeni i vizualizovani unutar programa 3DS MAX. Na prvoj fotografiji pod nazivomModelovanje terena nalaze se vizualizovani 3D modeli terena (planine, šume, jezera islično). Na drugoj fotografiji pod nazivom 3D modeli primenom fraktala prikazani susamo neki modeli koji mogu da se kreiraju primenom fraktala.

Modelovanje terena

Page 167: Us   3 d grafika i animacija - praktikum

156 3D grafika i animacija

3D modeli primenom fraktala

Page 168: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 157

3.1. Dečiji vozić

Page 169: Us   3 d grafika i animacija - praktikum

158 3D grafika i animacija

3.2. Trpezarija

Page 170: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 159

3.3. Radna stolica

Page 171: Us   3 d grafika i animacija - praktikum

160 3D grafika i animacija

3.4. Stolica za odmor

Page 172: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 161

3.5. Dnevna soba

Page 173: Us   3 d grafika i animacija - praktikum

162 3D grafika i animacija

3.6. Kuhinjska stolica

Page 174: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 163

3.7. Komoda sa tri fioke

Page 175: Us   3 d grafika i animacija - praktikum

164 3D grafika i animacija

3.8. Kombinovana soba

Page 176: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 165

3.9. Dvosed i fotelja

Page 177: Us   3 d grafika i animacija - praktikum

166 3D grafika i animacija

3.10. Staklena čaša za vino

Page 178: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 167

3.11. Staklena čaša za vodu

Page 179: Us   3 d grafika i animacija - praktikum

168 3D grafika i animacija

3.12. Flaša za žestoko piće

Page 180: Us   3 d grafika i animacija - praktikum

Autodesk 3DS MAX 9 - Samostalne vežbe 169

3.13. Francuski krevet

Page 181: Us   3 d grafika i animacija - praktikum

170 3D grafika i animacija

3.14. Komoda za dečiju sobu

Page 182: Us   3 d grafika i animacija - praktikum
Page 183: Us   3 d grafika i animacija - praktikum
Page 184: Us   3 d grafika i animacija - praktikum

Glava 1

Adobe Flash Professional CS3 - Uvod

Flash aplikacija se koristi za razvoj aplikacija bogatog sadržaja, korisničkih okruženja iWeb aplikacija. Adobe Flash CS3 Professional omogućava dizajnerima i programerima daintegrišu video, tekst, zvuk i grafiku u bogat sadržaj koji daje izvanredne rezultate u obIas-tima interkativnog marketinga, prezentacija, elektronskog učenja i korisničkog okruženjaza aplikacije.

Slika 1.1. Flash Development

Suština ovog praktikuma je u tome da usmeri kreativnost i nauči da se razmišlja vanšablona. Ove radionice će pomoći da se objasni zašto se nešto radi. Upoznavanje mo-

Page 185: Us   3 d grafika i animacija - praktikum

172 3D grafika i animacija

gućnosti Flash-a je vrlo zabavno. Međutim, uvek je važno ostati na zemlji saznanjem otome kako stvari rade. Znanje je moć.

Svaki projekat u praktikumu obuhvata početni fajl koji pomaže da se započne projekat izavršni fajl da pruži rezultate projekta, tako da se može videti koliko dobro je obavljenposao.

Page 186: Us   3 d grafika i animacija - praktikum

Glava 2

Adobe Flash Professional CS3 - Podešavanja

2.1. Podešavanje parametara

Pre nego što se započne sa radom potrebno je podesiti parametre pozornice. Parametretreba podesiti (slika 2.1) na sledeći način:

Slika 2.1. Podešavanje parametara pozornice

• klikom na belu površinu, a zatim parametre podesiti u okviru inspektora svojstava

• zatim klikom na dugme iza labele Size otvara se novi dijalog

• postaviti veličinu pozornice (Dimensions) na 1024 px (width) × 768 px (height).Rezolucija 1024× 768 je na većini monitora korisnika Interneta, pa će i sve budućeFlash prezentacije biti njoj prilagođene;

Page 187: Us   3 d grafika i animacija - praktikum

174 3D grafika i animacija

• ostaviti Background u beloj boji;

• na kraju Frame rate promeniti u 25 fps (frames per second). Brzina od 25 slika ujednoj sekundi prilagođena je našoj kulturi.

Kako se ovi parametri neće menjati, da se ne bi unosili svaki put po pokretanju programa,mogu se sačuvati pritiskom na dugme Make Default, a zatim pritisnuti dugme OK.

2.2. Ugrađivanje fontovaKad se objavi ili izveze Flash aplikacija koja sadrži statičan tekst, Flash će napravitikonture teksta i koristiti te konture da prikaže tekst u Flash Player-u. Suprotno, kada seobjavi Flash aplikacija koja sadrži dinamička polja teksta ili polja za unos teksta, Flash ćesmestiti imena fontova korišćenih u pravljenju teksta, a zatim koristiti imena fontova dalocira identične ili slične fontove na sistemu korisnika u toku izvođenja Flash aplikacije.

Uz to, mogu se izvesti konture fonta sa dinamičkim ili ulaznim tekstom klikanjem opcijeEmbed u panelu Properties Inspector. lako ugrađivanje fontova u Flash fajl povećavaveličinu objavljenog ".swf" dokumenta, daće potpunu kontrolu nad onim što korisnicitačno vide kada otvore fajl. U ovom projektu izabraće se font i ugraditi u Flash dokument,što garantuje da će svi posetioci videti istu stvar.

• Otvoriti vremenski tok i napraviti tri sloja (slika 2.2), imenovati gornji sloj actions,srednji sloj text, a donji holding.

Slika 2.2. Slojevi: actions, text i holding

• Izabrati alat Text, pa napraviti mali okvir teksta van pozornice (slika 2.3).

• Otvoriti panel Properties Inspector i selektovati font po želji, a zatim kliknuti opcijuDynamic Text (slika 2.4).

• Kliknuti dugme Font Rendering Method, pa Anti-alias for animation i Anti-alias forreadability.

• Ako je izabrana opcija Anti-alias for readability (ispeglane ivice za bolju čitljivost)korisnici će morati da imaju Flash CS3 player da bi korektno videli dokument.

Page 188: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 175

Slika 2.3. Postavljanje okvira teksta

• Kliknuti dugme Embed (slika 2.5), pa izabrati skupove znakova koji se žele obuh-vatiti ili kliknuti dugme Auto Fill.

Slika 2.4. Postavljanje dinamičkog teksta

• Kliknuti OK da se ubaci ugrađeni font u dokument.

• Ne mogu se svi fontovi u Flash-u izvoziti kao konture unutar Flash aplikacije. Dabi se proverilo da Ii se font može izvoziti, klikne se meni View, pa ode na PreviewMode, pa Anti-alias Text. Ako tekst izgleda nazubljen, to ukazuje da Flash neprepoznaje konture tog fonta i neće moći da izveze tekst.

• Ponoviti korake od 2 do 6 da se obuhvate bilo koji dodatni ugrađeni fontovi udokument.

• U ovom primeru, fontovi Kartika i Papyrus su korišćeni kao ugrađeni fontovi.

• Selektovati tekst

Page 189: Us   3 d grafika i animacija - praktikum

176 3D grafika i animacija

• Napraviti veliki okvir teksta na pozornici (slika 2.6)

• Otvoriti panel Inspector Properties, kliknuti dugme Text Type, pa na Dynamic Text

Slika 2.5. Embed

Slika 2.6. Veliki okvir teksta na pozornici

Page 190: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 177

• Da se okviru ime instance: dText (slika 2.7)

Slika 2.7. Instance Name "dText"

• Otvoriti panel Actions i uneti sledeći kôd:

sText:String=’<font face=’ Kartika’size=’14’>Embedded Fonts</font><br/>

<font face=’ Papyrus’ ></font>’;dText.html=true;dText.htmlText=sText;

• Kliknuti meni Control, pa Test Movie.

Page 191: Us   3 d grafika i animacija - praktikum

178 3D grafika i animacija

Neki Flash sajtovi

Page 192: Us   3 d grafika i animacija - praktikum

Glava 3

Adobe Flash Professional CS3 -Međukadriranja (motion i shape tween)

3.1. Međukadriranje kretanja

Međukadriranje kretanja (motion tween) povezuje dva ključna kadra, od kojih svaki imarazličite efekte i karakteristike, a zatim postepeno "pretvara" jedan ključni kadar u drugi.Međukadriranje omogućava brzo animiranje objekata, menjanje imena objekata, efektepostepenog pojavljivanja ili nestajanja, i postepeno menjanje boje, prozirnosti, razmere ibilo koji drugi efekat koji se može primeniti na simbol, grupu ili tekst.

U narednom tekstu biće opisan primer lopte koja odskače.

Na početku, neophodno je nacrtati jednu loptu korišćenjem alata Oval. Bez obzira na toda li je uključena opcija Object Drawing, Flash će sam grupisati oblik čim se dodeli tween.

Slika 3.1. Insert keyframe

Page 193: Us   3 d grafika i animacija - praktikum

180 3D grafika i animacija

Zatim je potrebno pratiti sledeće korake:

• Na 30. kadru napraviti ključni kadar (keyframe). To se postiže desnim klikom mišana 30. kadar i odabirom Insert Keyframe (slika 3.1). Sada postoje dva ključnakadra (1. i 30.) sa istim pozicijama lopte.

• Zatim, između dva ključna kadra postaviti Motion Tween. To se postiže desnimklikom miša na bilo koji kadar između dva ključna kadra i odabirom Create MotionTween. Pojaviće se ljubičasta linija sa strelicom na svom kraju. Pored toga štoreprezentuje Motion Tween , takođe naznačava da je isti dobro postavljen. Proceskreiranja Motion Tween-a prikazan je na slici 3.2.

Slika 3.2. Create Motion Tween

• Sledeće što treba uraditi jeste postaviti ključni kadar na 15. Na tom mestu pomeritiloptu za dva njena prečnika na gore. U ovom trenutku 1. i 30. ključni kadar su isti,jer su pozicije lopte identične, dok se pozicija lopte na 15. ključnom kadru razlikuje.Slika 3.3 prikazuje trenutnu situaciju.

Slika 3.3. Animacija lopte

Page 194: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 181

• Pritiskom na Enter ili Shift + Enter može se videti animacija lopte koja odskače.Ne treba se opterećivati time što deluje grubo, jer će prolaskom kroz primere bitiviše reči o opcijama koje će doprineti njenom elegantnijem kretanju.

3.2. EasingEasing predstavlja način manipulisanja sa Motion i Shape Tween-om. Sa svoja dva stanjaEase In i Ease Out ona ubrzava ili usporava animaciju između dva ključna kadra.

U ovom primeru koristiće se prethodna animacija lopte kojoj će biti dodate opcije Ease kakobi lopta imala elegantnije kretanje (nešto što je nedostajalo prvom primeru). Napravićese i refleksija iste lopte kao cilj vežbanja pravljenja animacija sa više slojeva.

Za početak otvoriti već postojeći fajl animirane lopte. Sačuvati je pod drugim imenom udrugom folderu nemenjenom vežbanju sa easing opcijama.

Zatim pratiti sledeće korake:

• Između 1. i 15. ključnog kadra postaviti Ease Out 100% u okviru inspektoraProperties, a između ključnih kadrova 15. i 30. postaviti Ease In 100% (slike 3.4i 3.5).

Slika 3.4. Ease Out

• Kada je to urađeno, animacija se može pokrenuti kako bi se uvideo efekat Easeopcije. Sada je još samo preostalo pravljenje novog sloja za refleksiju.

• Potrebno je selektovati sve kadrove prvog sloja, kopirati ih, a zatim otvoriti novisloj i tu ih prebaciti.

• Zatim selektovati sve kadrove novog sloja i kliknuti na ikonicu Edit Multiple Frames.Potom selektovati sve elemente drugog sloja (prvi zaključati) na pozornici i pomeritiih malo na dole kako se ne bi preklapali sa loptom na prvom sloju (slika 3.6).

Page 195: Us   3 d grafika i animacija - praktikum

182 3D grafika i animacija

Slika 3.5. Ease In

Slika 3.6. Edit Multiple Frames

• Nakon toga potrebno je loptu na 15. ključnom kadru, na drugom sloju, pomeritina dole kako bi se izmenio pravac kretanja lopte. Lopta na drugom sloju mora daima pravac kretanja "na dole" suprotan lopti na prvom sloju kako bi imitirala njenurefleksiju.

Page 196: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 183

• Završna faza pravljenja refleksije jeste u postavljanju elemenata lopte na 1. i 30.ključnom kadru drugog sloja u Alpha režim 100% (potpuna transparencija), a loptena 15. ključnom kadru u Alpha-u 50% (slika 3.7). Animacija se može pokrenutiklikom na tastere Ctrl + Enter.

Slika 3.7. Alpha 0%

Lopta se može doraditi, dodatnim efektima, na sledeći način (slika 3.8). Lopti (shape) semože dodati efekat Radial kako bi izgledala ispupčenija. Obavezno pomeriti centar loptepomoću Free Transform Tool - a u centar dna (slika 3.9).

Slika 3.8. Dodatni efekti animacije

Slika 3.9. Pomeranje centra lopte

Page 197: Us   3 d grafika i animacija - praktikum

184 3D grafika i animacija

Dodati novi ključni kadar, Motion Tween i Easing "-100" (Ease In) postojećoj lopti kakoje prikazano slikom 3.10.

Slika 3.10. Motion Tween i Easing

Uključiti Onion Skin Tool kako bi se lakše skalirala lopta na prvom ključnom kadru. Loptase skalira korišćenjem Free Transform Tool-a (slika 3.11).

Slika 3.11. Skaliranje lopte na prvom ključnom kadru

Slika 3.12. Izgled lopte posle transformacije

Page 198: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 185

Dodati novi ključni kadar na 5. kadru od posledenjeg (kraj animacije), spljoštiti loptu jošviše i dati animaciji Easing "100" (Ease Out) kako je prikazano slikom 3.12.

Dodati novi ključni kadar na 5. kadru od (trenutno) poslednjeg kadra i loptu transformisatipo vertikali (slika 3.13).

Slika 3.13. Izgled lopte posle druge transformacije

Postaviti novi ključni kadar na 5. kadru od poslednjeg i vratiti loptu u originalno stanje(pre transformacije) korišćenjem panela Transform (slika 3.14) ali joj ne menjati poziciju.

Slika 3.14. Izgled lopte posle resetovanja transformacija

Postaviti novi ključni kadar na 5. kadru od poslednjeg i na tom mestu kopirati prvi ključnikadar. Dati MotionTween i postaviti Easing "100" (Ease Out) kako je prikazano na slici3.15.

Page 199: Us   3 d grafika i animacija - praktikum

186 3D grafika i animacija

Slika 3.15. Izgled lopte na poslednjem ključnom kadru

Flash CS3 daje mogućnost ponovnog korišćenja animacija prikazanih na slikama 3.16 i3.17. Postupak je sledeći:

• Selektovati ključne kadrove trenutne animacije

• Ispratiti putanju Edit > Timeline > Copy Motion

• Kreirati novi ili prevući iz biblioteke postojeći simbol

• Desnim klikom na simbol odabrati Paste Motion

• Novom simbolu se dodaje ista animacija kao prethodnom

Slika 3.16. Copy Motion

Page 200: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 187

Slika 3.17. Paste Motion

3.3. Međukadriranje oblika

Međukadriranje oblika (shape tween) može se koristiti kada su potrebne postepenepromene iz oblika u oblik. Najbolje je postaviti grafiku u ključni kadar i zatim upotrebitibilo koji Flash alat za crtanje i obradu za podešavanje kontura oblika na drugom ključnomkadru. Kada se primeni međukadriranje oblika, Flash crta kadrove između dva ključnakadra tako da objekat menja oblik ("morph") između dva stanja. Za još bolju kontrolupromene oblika, mogu se koristiti markeri za oblik.

Cilj ovog primera jeste razumevanje Shape Tween animacija i pružanje uvida u sve njegovemogućnosti.

Pratiti sledeće korake:

• Na 1., 15., 30., 45. i 50. kadru treba postaviti ključne kadrove sa sadržajemprikazanim na slici 3.18. Raspored objekata na pozornici je takođe prikazan na slici3.18.

• Svi postavljeni objekti su simplifikovani (nisu grupisani), svaki različitog oblika iboje da bi se lakše uvidele mogućnosti Shape Tween-a.

• Ono što je na kraju ostalo da se uradi jeste da se selektuju svi kadrovi od 1. do60. i u okviru inspektora Properties, delu Tween, da se izabere opcija Shape ilidesnim klikom na bilo koji kadar, pa odabrati opciju Shape Tween (novo u Flash-uCS3). Pojavljuje se zelena strelica koja signalizira da je Tween (slika 3.19) dobropostavljen. Animacija se može pokrenuti. Jedan objekat se kreće po pozornici, ukrug, pretvarajući se iz jednog u drugi oblik, svaki različite boje.

Page 201: Us   3 d grafika i animacija - praktikum

188 3D grafika i animacija

Slika 3.18. Pozicije objekata

Slika 3.19. Create Motion Tween

3.3.1. Shape hint

Shape Hint pomaže objektima koji se pretvaraju jedan u drugi, da to rade na elegantnijinačin bez oštrih ivica i šupljina koje se često javljaju u ovakvim situacijama. Jedan odtežih primera jeste prelazak iz jednog slova u drugo, što je ovde obrađeno.

Page 202: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 189

Za početak treba uzeti Text Tool i na 1. ključnom kadru otkucati slovo "Z", a zatimpostaviti ključni kadar na 25. slici i slovo "Z" zameniti slovom "S". Sada na pozornicipostoje dva slova: "Z" na 1. i "S" na 25. ključnom kadru. Obavezno sadržaje i na 1. i25. ključnom kadru rastaviti (Brake Apart). Postaviti Shape Tween i pokrenuti animaciju.Postoji pretvaranje iz slova "Z" u slovo "S", ali dosta grubo. Shape Hint će pomoći dato izgleda elegantnije.

Potrebno je uraditi sledeće:

• Selektovati slovo "Z" i ispratiti putanju Modify > Shape > Shape Hint. Po-javljuje se mala crvena tačka na centru slova (slika 3.20). Uz pomoć Hint-ova ilicrvenih tačaka će se označiti mesta koja će se pretvarati jedna u druga.

• Potrebno je desnim klikom na Hint i odabirom Add Hint dodati još dva Hint-a. Istatri Hint-a se nalaze i na jednom i na drugom slovu. Sva tri su označena slovima"a", "b" i "c". Slika 3.21 prikazuje raspored Hint-ova i koji ćošak na jednom, pratićošak na drugom slovu.

Slika 3.20. Shape Hint

Slika 3.21. Add Hint

Page 203: Us   3 d grafika i animacija - praktikum

190 3D grafika i animacija

3.3.2. Card Flip

Slika 3.22. Konačni izgled animacije

Da bi se postigla animacija prikazana na slici 3.22 potrebno je ispratiti sledeće korake:

• Početi sa običnim pravougaonikom (slika 3.23), bez poteza (outline)

• Dodati ključni kadar na 10. kadru

• Selektovati Free Transform Tool, a zatim Distort Subselection Tool

Slika 3.23. Početna slika

• Pomoću tastera Shift napraviti oblik prikazan na slici 3.24.

Page 204: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 191

Slika 3.24. Distort

• Ponovo, iskoristiti taster Shift i napraviti oblik prikazan na slici 3.25.

Slika 3.25. Transform

• Uključiti Onion Skin i pomoću njega postaviti transformisani oblik na 10. ključnomkadru da se nalazi centriran u odnosu na objekat u 1. ključnom kadru (slika 3.26).

Slika 3.26. Centriranje

Page 205: Us   3 d grafika i animacija - praktikum

192 3D grafika i animacija

• Postaviti Shape Tween (slika 3.27). Kako je već spomenuto, novo u verziji CS3jeste postavljanje međukadriranja oblika unutar vremenskog toka.

Slika 3.27. Shape Tween

• Postaviti novi ključni kadar na 11. kadru

• Modifikovati oblik u 11. ključnom kadru pomoću Flip Vertical (slika 3.28)

Slika 3.28. Flip Vertical

• Kopirati 1. ključni kadar na 20. ključni kadar (slika 3.29)

Page 206: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 193

Slika 3.29. Copy keyframe

• Dodati Shape Tween drugoj polovini animacije (slika 3.30)

Slika 3.30. Shape Tween

• Pošto se animacija ne odvija u željenom smeru potrebno je dodati Shape Hint (slika3.31) korišćenjem prečice Modify > Shape > Add Shape Hint.

• Pomeriti prvi hint ka levom ćošku (slika 3.32)

• Na 1. ključnom kadru hint pomeriti na isti levi ćošak (slika 3.33). Istu proceduruponoviti i sa drugim (desnim) ćoškom.

• Tamnije obojiti objekat na 11. ključnom kadru (slika 3.34)

• Promena boje simuliraće 3D kretanje objekta.

Page 207: Us   3 d grafika i animacija - praktikum

194 3D grafika i animacija

Slika 3.31. Add Shape Hint

Slika 3.32. Hint "a" crveni

Slika 3.33. Hint "a" zeleni

Slika 3.34. Color Mixer za dobijanje tamnije nijanse

Page 208: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 195

3.4. Kadar-po-kadar

Naredna vežba odnosi se na frame-by-frame ili kadar-po-kadar ili animaciju kreiranu odveć postojećih slika. Zadatak u ovoj vežbi će biti uvoženje već postojećih slika. Slike suveć isečene u programu za obradu bitmapa. Koraci su:

• File > Import > Import to Stage

• Pronalaženje foldera u kome se nalaze slike

• Selektovati 1. kadar i kliknuti na Open (slika 3.35)

Slika 3.35. Import to Stage

• Flash automatski prepoznaje da postoji sekvenca slika po brojevima (ukoliko postojiime pa broj, imena moraju biti ista, a brojevi unešeni po redu) i postavlja pitanje dali se želi uvesti samo selektovana slika ili sekvenca slika (slika 3.36). Klikom na Yes

uvešće se cela sekvenca, dok se klikom na No uvozi samo selektovana. Potrebno jekliknuti Yes.

Slika 3.36. Sequence of Images

• Sada su slike uvežene i predstavljene su ključnim kadrovima na vremenskoj linijiod 1. do 12. Postoji samo jedan problem. Slike se nalaze u gornjem levom uglupozornice. One se mogu pomerati pojedinačno, menjanjem x, y vrednosti u okviruinspektora Properties. Postoji i lakši način, a to je opcija Edit Multiple Frames kojase nalazi ispod vremenskog toka i obrađena je u prethodnom primeru.

Page 209: Us   3 d grafika i animacija - praktikum

196 3D grafika i animacija

3.4.1. Disco ball

Flash je program namenjen animacijama sa vektorskom grafikom. U tom smislu, on nepodržava rad sa 3D modelima. Ipak, Flash može na nekoliko načina da napravi simulaciju3D-a.

Jedan od načina je korišćenje dve ključne slike dobijene izvoženjem iz nekog od programanamenjenih radu sa 3D-om, prikazanim na slici 3.37.

Slika 3.37. Disco ball

U primeru se nalazi sledeće:

• Sloj (1.) sa isečkom filma unutar koga se nalaze dva ključna kadra. One se popokretanju filma neprestano smenjuju.

• Sloj (2.) sa isečkom filma unutar koga se nalaze još tri sloja. Jedan je rezervisan zapravougaonik obojenja u Radial režimu (dodatni efekat animacije), jedan za maskukoja pokriva treći sloj sa isečkom filma (tačkice na zidu).

• Sloj (3.) sa simbolom (o koji je okačena kugla).

Kada se film pokrene, dobija se efekat kretanja kugle oko svoje ose. Zapravo, to kretanječine samo dva ključna kadra koji se neprestano ponavljaju. Dodatni efekti (tačke na zidu,pravougaonik Radial obojenja i dr) samo doprinose celokupnoj animaciji. Poenta je ujednoj, dve ili tri ključne slike, izvežene iz programa namenjenim radu sa 3D-om, na takavnačin da njihovo ponavljanje simulira 3D kretanje unutar Flash-a.

Page 210: Us   3 d grafika i animacija - praktikum

Glava 4

Adobe Flash Professional CS3 - Simboli

4.1. Movie Clip (isečak filma)

Movie Clip ili isečak filma se može posmatrati kao zasebna kutija sa svojim simbolima,animacijama i vremenskim linijama. Isečcima filmova se mogu dodavati efekti i filteri. Uovom primeru koristiće se tri isečka filma kao tri nezavisne animacije.

Potrebno je otvoriti novi radni fajl i uvesti na pozornicu (File > Import > Import toStage) tri bitmape koje koje je prethodno trebalo označiti pod imenima "cvet", "leptir"i "pozadina". Kada su uvežene na pozornicu, bitmape se nalaze jedna ispod druge.Potrebno je razdvojiti ih i svaku selektovati i konvertovati u simbol Movie Clip (F8). Sadase na pozornici nalaze tri isečka filma (slika 4.1). Nebo treba postaviti iza druga dvasimbola a to se postiže korišćenjem prečice Ctrl + strelica(gore/dole).

Slika 4.1. MovieClip’s

Za početak, zadatak je animirati leptira.

Potrebno je duplim klikom otvoriti isečak filma leptir i potom ga ponovo konvertovati usimbol Movie Clip. Otvoriti i taj isečak filma, selektovati bitmapu i simplifikovati objekat

Page 211: Us   3 d grafika i animacija - praktikum

198 3D grafika i animacija

prečicom Ctrl+ B. Sada je bitmapa simplikifokavana. Potrebno je alatom Lasso odvojitidelove leptira (krila) i konvertovati ih u Movie Clip. Pod time se podrazumeva formiranjetri isečka filma (po jedno krilo i trup) gde će svaki imati svoju animaciju. Na slici 4.1 jeprikazano stanje nakon kreiranja tri nova isečka filma.

Slika 4.2. Tri isečka filma, par krila i trup, unutar jednog

Zatim je potrebno otvoriti jedan od isečaka filmova u kojima se nalazi krilo i postaviti munekoliko ključnih kadrova i Shape Tween (slika 4.2). Animacija krila će se biti urađenakorišćenjem Free Transform Tool alata. Zapravo, krila će na pojedinim ključnim kadrovimabiti sužena čime će se dobiti efekat njihovog kretanja. Na slici 4.3 su prikazani ključnikadrovi i obeleženi oni na kojima se nalazi modifikacija krila.

Slika 4.3. Ključni kadrovi kojima se simulira pokret krila

Isti postupak treba uraditi i sa drugim krilom. Međutim, poteškoće mogu nastati sausklađivanjem animacija, bile ona nekada menjane ili ne. Zbog toga je praksa da isti delovislika sa istim ili sličnima animacijama jednostavno budu duplirani, što će biti urađeno iu ovom primeru. Sada će se izaći iz trenutnog isečka filma i doći do pozicije gde se

Page 212: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 199

nalaze sva tri isečka filma sa delovima leptira u jednom isečku filma. Obrisaće se isečakfilma drugog krila koji ne sadrži animaciju, a prvi duplirati jednostavnim selekotvanjemi korišćenjem prečice Ctrl + D. Potrebno je još samo korišćenjem Free Transform Toolalata okrenuti ga oko svoje ose (mirror efekat) i prisloniti uz isečak filma u kome se nalazitrup. Korišćenjem tastera Ctrl+Enter animacija se može videti. Takođe se mogu uvidetii prednosti dupliranja isečaka filmova. Nije u pitanju samo brzina izrade animacija veći način njene modifikacije, ukoliko ona bude potrebna u budućnosti, jer se menjanjemjednog isečka filma, menja njegov sadržaj u svim instancama na pozornici.

Teži deo je završen. Sada je potrebno još samo dati blagu animaciju lebdenja isečku filmaleptir. To se postiže izlaskom iz stanja gde se nalaze sva tri isečka filma u prethodnogde su sva tri isečka filma obuhvaćena jednim isečkom filma. Verovatno postoji otežanosnalaženje u prostoru oko isečaka filmova, pa je stanje prikazano na slici 4.4. Na pozornicise nalazi isečak filma leptira. Duplim klikom se pristupa isečku filma unutar koga se nalazesva tri isečka filma koja su animirana. Da se animacija ne bi nalazila na glavnoj pozornici,potrebno ju je napraviti unutar isečka filma leptira. Animacija je urađena korišćenjemMotion Tween-a.

Slika 4.4. Princip kutija sa isečcima filmova

Animacija leptira je završena i film se može pokrenuti. Cilj ovog zadatka je završen.Preostalo je samo još korišćenjem mašte animirati preostala dva isekča filma (cvet i nebo).

4.2. Button (Dugme)

Dugme (Button) je simbol koji ima interaktivna svojstva. Isečci filmova ih mogu imati,takođe, ali se oni dodaju isključivo korišćenjem ActionScript programskog jezika.

Kada se pravi interaktivni Flash dokument, uvek će iskrsnuti pitanje dugmadi. Okvir za

Page 213: Us   3 d grafika i animacija - praktikum

200 3D grafika i animacija

dijalog Flash simbola omogućava da se brzo naprave interaktivna dugmad koja pružajumogućnost da se napravi Flash dokument sa funkcionalnšću kakvu ima bilo koja stan-dardna HTML strana.

Glavna razlika između jednog Flash dugmeta i tipičnog JavaScript rollover dugmeta jelakoća kojom se mogu napraviti dugmad dinamičnog sadržaja. Na primer, pravljenjeFlash simbola koji pulsira i menja boju, ili povlači padajući meni, zaista, oduzima malovremena. Međutim, pravljenje dugmeta upotrebom ActionScript kodiranja, nasuprot stan-dardnog Flash simbola dugmeta daje fleksibilnost da se naprave kreativnija dugmad i unekim slučajevima kompatiblinija sa standardnim HTML dokumentom. Da se napraviActionScript dugme trebaće dve slike za vidljivi deo dugmeta. Ove slike mogu se napravitiupotrebom aplikacija za obradu slike, kao što je Adobe Photoshop, ili se mogu napravitiobjekti direktno u Flash-u. Pošto će objekti simulirati standardni JavaScript rollover, slikebi trebalo da budu iste veličine.

Cilj ovog primera jeste pravljenje dugmeta i označavnje svih njegovih stanja.

Slika 4.5. Izgled dugmeta, gradivni elementi (levo) i sklopljeno dugme (desno)

Za početak neophodno je otvoriti novi radni fajl i nacrtati elemente koji su prikazani naslici 4.6. Prva tri elementa su grupisani objekti koji mogu biti konvertovani u simbole, dokje četvrti element tekst boks. Za kreiranje prvog i trećeg elementa koristi se obojenje uRadial režimu i Fill Transform Tool. Kreirane elemente treba postaviti jedan ispod drugogkako je prikazano na slici 4.5.

Slika 4.6. Promene stanja dugmeta

Page 214: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 201

Zatim je potrebno selektovati sva četiri elementa na pozornici i konvertovati ih u simbolButton. Duplim klikom otvoriti selektovani simbol i kopirati ključne slike na sva četiristanja. Prva tri stanja treba međusobno da se razlikuju dok za četvrto to nije neophodno,jer se ono ne vidi na filmu.

Stanje Up treba da ostane onako kako je prikazano na slici 4.6. Stanje Over treba daima Over umesto Up ispisano u tekst boksu i promenjenu sivu boju u crvenu na trećemelementu. Poenta je označiti prelazak preko dugmeta nekim efektom. Stanje Down trebada ima ispisano Down u tekst boksu i promenjenu belu boju u sivu na prvom elementu.Menjanje boje stvara 3D efekat pritisnutog dugmeta. Stanje Hit može da ostane isto kaoi Up jer se ne vidi. Bitna stavka je to da je u Hit stanju pokriveno celo dugme (bezdodatnih docrtavanja).

Dugme je napravljeno i može se pokrenuti film. Evidentna je promena na sva tri stanjakoja su, između ostalog ispraćena i natpisima u tekst boksu.

4.2.1. Normal to Rollover Button

U ovom projektu koristiće se dve odvojene slike da bi se napravilo rollover dugme, samoupotrebom vremenskog toka kao i ActionScript programiranja.

Postupak je sledeći:

• Otvori se Flash, napravi novi dokument, a zatim sačuva kao flash_button.fla.

• Klikne se meni File, zatim Import, pa Import to Library. Pronađu se i selekujuprethodno kreirani fajlovi dugmadi, normal.png i rollover.png, a zatim klikneImport to Library (slike 4.7 i 4.8).

Slika 4.7. Normal.png

Page 215: Us   3 d grafika i animacija - praktikum

202 3D grafika i animacija

Slika 4.8. Rollover.png

• Zatim se u vremenskom toku naprave dva sloja. Gornjem se da ime actions, adonjem button. Upotrebiti meni Insert da se naprave dva nova simbola filmskogklipa. Daju im se imena normal_mc i rollover_mc (slika 4.9).

Slika 4.9. Slojevi actions i button

• Otvori se panel Library i filmski klip normal_mc.

• Prevuče se (iz biblioteke) u filmski klip slika koja se želi koristiti za normalno stanjedugmeta, a zatim upotrebi panel Align da se centrira slika na pozornici (slike 4.10i 4.11).

• Otvoriti filmski klip rollover_mc.

• Prevući u filmski klip sliku po želji da se koristi za rollover stanje dugmeta, a zatimupotrebiti panel Align da se centrira slika na pozornici.

• Sada će se napraviti drugi filmski klip koji će sadržati animaciju dugmeta.

Page 216: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 203

• Klikne se meni Insert, a zatim New Symbol. Klikne se opcija Movie Clip kaoponašanje (Behavior), i da joj se ime button_mc, pa klikne OK.

Slika 4.10. Slika normal

Slika 4.11. Slika rollover

Page 217: Us   3 d grafika i animacija - praktikum

204 3D grafika i animacija

• Otvoriti u panel Library i otvoriti filmski klip button_mc.

• Otići u vremenski tok i napraviti četiri sloja. Odozgo naniže daju im se imena:labels, actions, normal i rollover (slika 4.12).

Slika 4.12. Slojevi labels, actions, normal i rollover

• Sada će se napraviti vremenski tok gde se jedna slika polako pretapa u drugu,stvarajući efekat rollover dugmeta.

• Ode se niz vremenski tok na sloju labels dok se ne dođe do kadra 20. Klikne sedesni taster miša, pa Insert Frame iz pomoćnog kontekst-menija.

• Na sloju labels klikne se desnim tasterom miša na kadrove 8 i 14, pa na InsertKeyframes iz pomoćnog kontekst-menija. Sada bi trebalo da se imaju ključni kadroviu kadrovima 1, 8 i 14 (slika 4.13).

• Ubaciti nazive svakom ključnom kadru tako što će se selektovati kadar, ići na panelProperty Inspector i ukucati ime u polje za unos Frames. Prvi kadar nazvati: up.Kadar 8: over. Kadar 14: out.

• Otići u sloj actions, pa ubaciti dodatne ključne kadrove u kadrove 13 i 20. Trebalobi da u sloju actions postoje ključni kadrovi u kadrovima 13 i 20.

• Otvoriti panel Actions. U sloju actions ubaciti sledeći kôd u ključne kadrove 1 i 13:

stop ();

Page 218: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 205

• Ubaciti sledeći ActionScript kôd u ključni kadar 20 (u sloju actions):

gotoAndStop("up");

Slika 4.13. Ključni kadrovi

• Prevući filmski klip normal_mc iz biblioteke u prvi ključni kadar sloja normal, paupotrebiti panel Align da se centrira slika na pozornici.

• Napraviti nove ključne kadrove u sloju normal u kadrovima 8, 13, 14 i 20.

• Prevući kopije filmskog klipa normal_mc u svaki novi ključni kadar i poravnati takoda bude centriran u odnosu na pozornicu.

• Selektovati kadar 13 i zatim kliknuti vidljivu sliku na pozornici. Otići u panelProperty Inspector, kliknuti dugme Color, pa zatim izmeniti svojstvo Alpha na 0%.Vidljiva slika će postati prozirna. Ponoviti ovaj postupak za sliku u ključnom kadru14.

• Selektovati bilo koji kadar sloja normal između kadrova 8 i 13, pa u panelu PropertyInspector, kliknuti dugme Tween, pa Motion.

• Selektovati bilo koji kadar u sloju normal između kadrova 14 i 20, pa u paneluProperties Inspetor, kliknuti dugme Tween, pa Motion.

• Ako se pokrene vremenski tok, trebalo bi da se vidi kako normal_mc postepenopostaje nevidljiv, pa opet vidljiv.

Page 219: Us   3 d grafika i animacija - praktikum

206 3D grafika i animacija

• Kliknuti desnim tasterom miša na kadar 20 sloja rollover, pa Insert Frame

• Prevući kopiju slike rollover_mc u ključni kadar 1 sloja rollover.

• Vratiti se na glavnu pozornicu dokumenta flash_button.

• Poslednja faza pravljenja interaktivnog dugmeta je rad na pozornici i ubacivanje jošnekoliko redova ActionScript koda.

• Selektovati sloj button, pa prevući na pozornicu jednu kopiju filmskog klipa podnazivom button_mc.

• Selektovati sliku na pozornici, pa u Properties Inspector, i da se slici sledeći nazivinstance: btn_mc (slika 4.14).

Slika 4.14. btn_mc, Instance Name

• Izabrati sloj actions, otvoriti panel Actions, i ubaciti sledeći ActionScript:

btn_mc.onRollOver=function():Void this.gotoAndPlay("over");btn_mc.onRollOut=function():Void this.gotoAndPlay("out");

Slika 4.15. Konačan izgled i Output panel

Page 220: Us   3 d grafika i animacija - praktikum

Glava 5

Adobe Flash Professional CS3 - Razni efekti

5.1. Realizam pomoću gradijenata

Flash programski alat nije namenjen samo jednostavnim ilustracijama. Naime, mnoštvoefekata i alata pomaže u kreiranju realističnih crteža, vrlo bliskim po kvalitetu rasterskojgrafici. U ovom primeru biće kreiran cvet korišćenjem efekata koje nudi Flash. U ovomprimeru koristiće se efekti Alpha, Pen tool i Gradients.

Slika 5.1. Konačan izgled cvetova

Prvi korak je u korišćenju originalne slike kao matrice za precrtavanje i upotrebom PenTool - a precrtavati listove (slika 5.2).

Page 221: Us   3 d grafika i animacija - praktikum

208 3D grafika i animacija

Slika 5.2. Precrtavanje listova

Pen Tool je savršen za crtanje objekata i formiranje selekcija upravo zbog načina nakoji se radi sa ovim alatom. Naime, ovaj alat funkcioniše vrlo jednostavnim kliktanjem ipostavljenjem nodova koji se automatski povezuju jedan sa drugim, po principu "novi saprethodnim" nodom (slika 5.3).

Slika 5.3. Lakoća rada sa alatom Pen Tool

Zatvoriti putanju postavljanjem Pen Tool-a iznad prvog noda i klikom na isti. Pojaviće semali kružić koji označava da će se klikom zatvoriti potez (slika 5.4). Može se iskoristiti iSubselection Tool da se potez što više prilagodi originalnoj slici (slika 5.5).

Page 222: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 209

Slika 5.4. Zatvaranje poteza

Slika 5.5. Subselection Tool

Zatim je potrebno napraviti odgovarajuću kombinaciju boja u Color Mixer-u. Flash imamogućnost uzimanja uzorka boje bilo gde u okviru prozora, pa se ista opcija može iskoristitiza uzimanje boje sa originalne slike (slike 5.6).

Radial gradient, koji se postavlja u panelu Color, će pomoći da se dobiju što realniji efekti(slika 5.7). Flash ima mogućnost pravljenja prelaza sa maksimum 15 različitih boja.

Page 223: Us   3 d grafika i animacija - praktikum

210 3D grafika i animacija

Slika 5.6. Uzimanje uzorka boje

Slika 5.7. Color panel

Potrebno je, zatim, ispuniti objekat formiranim prelazom boja i transformisati i rotiratipopunu kako bi se prilagodila objektu. Nakon toga se može obrisati potez (slika 5.8).

Zatim kopirati oblik nekoliko puta, svaki put u novi sloj i menjati transparenciju po željikako bi se dobilo što realnije preklapanje boja (slika 5.9).

Iskoristiti Fill Transform Tool svaki put sa novom popunom (slika 5.10).

Page 224: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 211

Slika 5.8. Fill Transform Tool

Slika 5.9. Dodavanje Alpha-e

Slika 5.10. Transformacija novih popuna

Page 225: Us   3 d grafika i animacija - praktikum

212 3D grafika i animacija

Različite primene boja, njihovaih kombinacija uz korišćenje alata za skaliranje i rotacijuprimene obojenja, može se uticati da finalni oblici (latice) poprime originalan izgled, bašonakav kakav je prikazan na slici 5.11.

Slika 5.11. Završeci objekata uz pomoć Free Transform Tool-a izgledaju realno

Slika 5.12. Završeci objekata

Ponoviti prethodni korak i primeniti efekat na svakoj latici (slika 5.12). Zatim nacrtaticentar cveta. On je oblika krofne (probušenog kruga) i treba mu primeniti obojenje onakvoprikazano slikom 5.13.

Page 226: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 213

Slika 5.13. Centralni deo cveta

Slika 5.14. Dubina cveta

Za prikazivanje dubine unutar cveta, iskoristiti belu strelicu Fill Transform Tool-a (slika5.14) čime se centar radial-nog obojenja pomera ka ivici. Finalna slika jednog cvetaprikazana je na slici 5.15.

Page 227: Us   3 d grafika i animacija - praktikum

214 3D grafika i animacija

Slika 5.15. Finalni cvet

Prvi deo posla je završen. Sada je potrebno pretvoriti cvet u simbol isečka filma. Iz panelaFilters dodati Drop Shadow. Blur, distance i amount postaviti i podesiti po želji. Možese dodati i efekat Blur-a i na ceo cvet. Duplirati cvet nekoliko puta, skalirati, rotirati iaranžirati (slika 5.16).

Slika 5.16. Finalni cvetovi

Page 228: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 215

5.2. Tehnike maskiranjaMaskiranjem se označavaju delovi slika ili animacija koji će biti vidljivi. Najčešče se koristestatične maske, ali i upotreba animiranih dobija sve veći značaj.

Ovim primerom je pokazano menjanje slika u Slide Show-u. Za to se koristi isključivoanimirana maska bila ona u okviru nekog isečka filma ili na posebnom sloju iznad ostalihslojeva u kojima su slike.

Animirane maske se formiraju korišćenjem Movie Clip-ova ili isečaka filmova u okvirukojih se nalazi animacija u Shape Tween-u. U ovom primeru koristiće se poseban sloj samaskom iznad jedne slike koja je u drugom sloju, dok se druga slika nalazi, bez sloja samaskom, na trećem sloju.

Potrebno je uraditi:

• Izabrati 2 fotografije identičnih dimenzija. Uvesti ih u novi radni ".fla" fajl narazličite slojeve.

• Iznad prvog sloja postaviti sloj sa maskom. Otključati sloj sa maskom i sloj ispodnjega.

• Sva tri sloja produžiti dodavanjem novog ključnog kadra na 15. kadru

• Na sloju gde je maska dodati jedan običan Shape Tween pretvaranja iz malogpravougaonika koji ne pokriva sliku do velikog koje je pokriva (slika 5.17).

• Animacija se može pokrenuti. Slika na drugom sloju se ne vidi dok je ne pokrijemaska. Time se stvara efekat menjanja slika u Slide Show-u. Može se dodati jošslojeva i maski preko istih za povećavanje broja slika u Slide Show-u.

Slika 5.17. Tehnika maskiranja

Page 229: Us   3 d grafika i animacija - praktikum

216 3D grafika i animacija

5.2.1. Equalizer

Tehnika pravljenja equalizer-a je i više nego jednostavna. Potrebno je nacrtati jedanisečak filma sa uskim vertikalno postavljenim pavougaonikom čije obojenje je u Linearrežimu i taj isečak filma kopirati desetak puta. Zatim, nešto veće širine napraviti novi setpravougaonika koji će stajati na sloju iznad, predviđenom za masku. Shape Tween-omi ključnim kadrovima menja se visina parvougaonika čime se dobija efekat equalizer-a.Pozadina se može obojiti u crno da bi se efekat pojačao. Mnogo bolje rešenje je da se obanavedena sloja ubace ili formiraju u okviru nekog isečka filma koji se, nakon toga možeslobodno pomerati po pozornici, a može se i postaviti iznad nekog player-a. Rezultatpravljenja prikazan je na slici 5.18.

Slika 5.18. Tehnika maskiranja, equalizer

5.2.2. Animacija zastave

Da bi se postigao efekat zastave na vetru, prikazan na slici 5.19, potrebno je uraditisledeće:

• Napraviti nešto duži pravougaonik (slika 5.20), bilo koje boje popune, ali da je bezpoteza (outline)

• Iskoristiti Selection Tool za modifikovanje, prikazano na slici 5.21

• Iskopirati objekat i upotrebiti opciju Flip za rotiranje (slika 5.22)

Page 230: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 217

Slika 5.19. Zastave

Slika 5.20. Rectangle Tool

Slika 5.21. Selection Tool

Page 231: Us   3 d grafika i animacija - praktikum

218 3D grafika i animacija

Slika 5.22. Copy and Flip

• Ponoviti prethodni korak i to selektovanjem oba kreirana objekta (slika 5.23)

Slika 5.23. Copy and Flip

• Upotrebiti Linear Gradient kako bi se istakli uvijeni delovi zastave (slika 5.24)

Slika 5.24. Linear Gradient

• Ponovo kopirati ceo objekat i konvertovati ga u simbol isečka filma (slika 5.25)

Page 232: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 219

Slika 5.25. Kreiranje simbola

• Postaviti novi sloj maske iznad sloja u kome se nalazi kreiran simbol (slika 5.26).

Slika 5.26. Postavljanje maske

• Dodati novi ključni kadar na bilo kom kadru, postaviti Motion Tween i pomeritimasku na desni kraj zastave (slika 5.27)

Slika 5.27. Postavljanje maske na drugi kraj

• Da bi se postigao kvalitetan loop zastave, potrebno je podesiti da se maskiraniprikaz zastave u prvom ključnom kadru poklapa sa prikazom u poslednjem kako sene bi primetila razlika u kretanju kada animacija počne da se odvija iz početka.

Slika 5.28. Podešavanje maske

• Sada se može pokrenuti i testirati film. Međutim, može se dodati još par koraka kakobi animacija bila što realnija. Potrebno je animirati masku. Upotrebiti SubselectionTool za modifikaciju prikazanu slikom 5.29.

Page 233: Us   3 d grafika i animacija - praktikum

220 3D grafika i animacija

Slika 5.29. Podešavanje maske za animaciju

• Uobličiti levu i desnu stranu maske da bi se prilagodila kretanju zastave (slika 5.30)

Slika 5.30. Podešavanje maske za animaciju

• Na kraju se može dodati postolje i pozadina kako bi efekat bio upečatljiviji (slika5.31)

Slika 5.31. Konačni izgled zastave

Page 234: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 221

5.2.3. Handwriting

Imitacija rukopisa (handwriting) postiže se korišćenjem maski na sledeći način:

• Potrebno je iskucati tekst (slika 5.32)

Slika 5.32. Handwriting

• Ukoliko se odabere da tekst bude statički, ".swf" će embedovati font. Tekst semože rastaviti (Brake Apart) da ge font ne bi "zagubio" kada se animacija pokrenena nekom drugom računaru (slika 5.33)

Slika 5.33. Static Text

• Dodati novi sloj maske i postaviti ga u odnosu na tekst onako kao je prikazanoslikom 5.34

Slika 5.34. Static Text

• Postaviti novi ključni kadar na bilo kom kadru, na oba sloja i u sloju maske (nadrugom ključnom kadru) pomeriti sadržaj maske izvan desnog kraja teksta, kako bimaska u poslednjem ključnom kadru u potpunosti pokrila tekst (slika 5.35).

Page 235: Us   3 d grafika i animacija - praktikum

222 3D grafika i animacija

Slika 5.35. Tekst pokriven maskom u poslednjem ključnom kadru

• Zatim, postaviti Shape Tween na sloju maske (slika 5.36)

Slika 5.36. Shape Tween

• Ukoliko postoji potreba da se u ovom slučaju koristi dinamički tekst, font se moraembedovati, klikom na tekst, pa na dugme Embed u okviru inspektora Properties.

• Pokrenuti i proveriti animaciju.

5.2.4. Okretanje stranice

Da bi se napravio efekat okretanja stranice (page turn) potrebno je uraditi sledeće:

• Nacrtati jednostavan pravougaonik, sa minimalnim gradientnim prelazom, prikaza-nim na slici 5.37 i konvertovati ga u simbol isečka filma.

Page 236: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 223

Slika 5.37. Naslovna strana

• Kopirati objekat i postaviti ga na istu poziciju novog sloja. Promeniti izgled stranice(slika 5.38)

Slika 5.38. Prva strana

Page 237: Us   3 d grafika i animacija - praktikum

224 3D grafika i animacija

• Nacrtati sloj maske, na sloju dodati oblik koji pokriva ćošak stranice i na 30. kadrunapraviti ključni kadar (sloj maske) da bi se objekat i u tom delu pojavio (slika 5.39)

Slika 5.39. Strana sa maskom

• Upotrebiti Free Transform Tool za prilagođavanje maske stranici (slika 5.40)

Slika 5.40. Free Transform Tool

Page 238: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 225

• Skalirati masku u krajnji desni ćošak stranice (slika 5.41)

Slika 5.41. Skaliranje maske

• Otvoriti novi sloj, nacrtati oblik trougla koji će simulirati da se stranica okreće (slika5.42)

Slika 5.42. Nov objekat na novom sloju

Page 239: Us   3 d grafika i animacija - praktikum

226 3D grafika i animacija

• Korišćenjem linearnog prelaza boja (sa tri boje) obojiti boju popune kako bi se dobioefekat senke prikazan na slici (5.43)

Slika 5.43. Gradijentni prelaz boja novog objekta

• Konvertovati novi oblik u simbol Graphic i duplim klikom ga otvoriti i unutar njegadodati jos jedan sloj (slika 5.44)

Slika 5.44. Dodavanje novog sloja unutar simbola

Page 240: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 227

• Na drugom sloju je objekat koji simulira senku prvog objekta. Senka se formiragradientnim prelazom boja i korišćenjem Alpha u okviru Color Mixer-a, gde prvaboja ima 50% vrednost Alpha, a druga 0% (slika 5.45)

Slika 5.45. Alpha gradijent

Slika 5.46. Prilagođavanje objekta

Page 241: Us   3 d grafika i animacija - praktikum

228 3D grafika i animacija

• Animiranje objekta treba da bude u skladu sa animacijom maske. Skalirati noviobjekat korišćenjem Free Transform Tool-a i uskladiti ga sa prethodnom animacijommaske kako je prikazano slikom 5.46. Dodati Motion Tween novom objektu.

• Testirati film

5.3. Vođenje animacijeVođenje animacije svodi se na postavljanje putanje po kojoj će se neki simbol kretati.Olakšavajuća okolnost u radu sa tzv. guide-ovima jeste dovoljnost u postavljanju samodva ključna kadra i daleko pravilnija putanja kretanja objekta.

U ovom primeru napravljen je jedan isečak filma u kome se nalazi slika automobila sadva isečka filma unutar njega. Oba isečka filma, unutar prvog, predstavljaju kretanjetočkova. Potrebno je postaviti isečak filma na scenu i kliknuti na ikonicu Add MotionGuide. Pojavljuje se sloj sa vođicom iznad. Potrebno je pažljivo ispratiti sledeće korakekako bi se zadatak uradio.

Slika 5.47. Postavljanje Motion Tween-a

Koraci su:

• Dodati na 60. kadru ključni u oba sloja.

• Nacrtati putanju u sloju predviđenom za vođicu

• Prvo dodati Motion Tween (slika 5.47) na sloju gde je auto, a potom na 60.ključnom kadru pomeriti auto na kraj vođice (slika 5.48). Voditi računa da cen-tralna bela tačka isečka filma, u kome se nalazi auto, bude na liniji koja predstavljavođicu. Ona se može pomerati selekotvanjem Free Transform Tool alata.

Slika 5.48. Postavljanje objekta na putanju

Page 242: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 229

• Film se može pokrenuti da bi se proverilo da li auto ide po putanji. Može se poslužitiopcijom Orient to path kako bi auto pratio putanju (slika 5.49). Ovim korakom jeanimacija završena. Može joj se dodati pozadina i vidljiva putanja po kojoj će seautomobil kretati.

Slika 5.49. Orient to Path

5.4. FiltriFiltri su novitet koji dolaze sa Flash Professional 8 verzijom i nezamenjiv su deo svihnaprednih verzija Flash-a, pa, samim tim, i verzije CS3 i koriste se isključivo na simbolima.Među filtrima, najčešće korišćenim je Blur.

Predstoji primer pravljenja animacije otkucaja srca. Zadatak je jednostavan za realizaciju,ali i više nego adekvatan primer za upoznavanje sa mogućnostima i načinom rada sa Blurfiltrom (slika 5.50).

Slika 5.50. Blur Effect

Potrebno je napraviti jedan isečak filma u kome se nalazi slika sa srcem. Zatim, postavitiključne kadrove na 5., 8., 10. i 20. kadar i dati Motion Tween. Isečku filma sa srcemna 5. i 10. ključnom kadru dodati efekat Blur-a sa sledećim vrednostima Blur X = 10i Blur Y = 10. Animaciju produžiti do 45. kadra kopiranjem 20. kadra (slika 5.51).Animacija je gotova i može se pokranuti. Blur filter ima efekat zamućenja i često sekoristi kod pravljenja efekata zumiranja.

Page 243: Us   3 d grafika i animacija - praktikum

230 3D grafika i animacija

Slika 5.51. Postavljanje Blur-a

Page 244: Us   3 d grafika i animacija - praktikum

Glava 6

Adobe Flash Professional CS3 - Rad satekstom

6.1. Razdvajanje teksta na blokoveRad sa tekstom u Flash-u nije ne malo komplikovan. Kako je praksa pokazala tekst sekoristi za paragrafe i scroll ili za animaciju uz mogućnost razlaganja na blokove.

U narednom primeru biće opisani koraci za animaciju teksta koji se razdvaja na blokove,odnosno slova određene reči ili rečenice kako bi svako slovo imalo svoju animaciju, bilaona u nekom isečku filma, dugmetu ili na posebnom sloju iste vremenske linije.

Koraci su sledeći:

• Otvoriti novi radni fajl i u tekst boksu ispisati željeni tekst. U ovom primeru jekorišćena rečenica Simple text.

• Isti tekst razdvojiti na blokove ili slove korišćenjem prečice Ctrl+B (Brake Apart ko-manda). Selektovati sva razdvojena slova i desnim klikom izabrati opciju Distributeto Layers (slika 6.1) da bi se slova rasporedila po slojevima. Može se primetiti daje nakon raspoređivanja slova po slojevima prvi sloj, u kome je bio ceo tekst, ostaoprazan, a ostali slojevi su dobili svoja imena po slovima koja se nalaze u sadržajusloja.

Slika 6.1. Razdvajanje teksta na blokove

Page 245: Us   3 d grafika i animacija - praktikum

232 3D grafika i animacija

• Slovima se sada pojedinačno može dati animacija korišćenjem bilo Shape bilo MotionTween-a. U konkretnom primeru, slovima je data ista animacija korišćenjem MotionTween-a sa identičnim vremenskom razmakom između slojeva (slova). Potrebno jeprvom slovu na prvom sloju dati određenu animaciju, a potom na ostalim slojevimaprimeniti tu istu animaciju sa određenim vremenskim razmakom između slojeva kakose animacije ne bi dešavale u isto vreme (slika 6.2).

Slika 6.2. Animacije po slojevima

• Animacija jednog slova prikazana je na slici 6.3. Ključni kadrovi sa promenom stanjasu takođe prikazani na slici 6.3. Animaciji je između prvog i drugog, a potom izmeđudrugog i trećeg ključnog kadra postavljen easing. Takođe, svi ključni kadrovi koji senalaze na 1. kadru vidljivi su, dok su drugi potpuno transparentni (Alpha).

Slika 6.3. Animacija slova po ključnim kadrovima

Page 246: Us   3 d grafika i animacija - praktikum

Glava 7

Adobe Flash Professional CS3 - Rad sabitmapama

7.1. Animacija sa bitmapamaFlash je programski alat namenjen radu sa vektorskom grafikom, ali je omogućen i radsa bitmapama (rasterom). Međutim, rad sa rasterom je veoma ograničen, posebno kadaje reč o animacijama. Ukoliko se pokuša animacija postavljanjem neke bitmape u okviruisečaka filma i korišćenjem Motion Tween-a za njegovo pokretanje, doći će do "seckanja"bitmape. Tačnije, ona neće imati elegantnu animaciju, već će dosta podsećati na frame-by-frame sa bitmapama niske rezolucije.

Zbog toga, bitmape se koriste u kombinaciji sa maskama, u okviru dugmadi (button), kaopozadina sa efektima i filterima i drugi razni oblici koji ne podrazumevaju kretanje istih.

U okviru ovog primera koristila se bitmapa koju postepeno otkriva maska. Maska jezapravo jedan isečak filma u kome se nalazi veći broj slojeva sa Shape Tween-om.

Potrebno je ispratiti sledeće korake:

• Otvoriti novi radni fajl i u njega uvesti bitmapu sačuvanu pod imenom "tribal.png".

• U novom sloju (iznad) postaviti masku. Uzeti Brush tool i nacrtati jednu tačku nadnu tribala. Iscrtani simplifikovan oblik konvertovati u simbol isečak filma (MovieClip) kako je prikazano na slici 7.1.

Slika 7.1. Iscrtavanje maske Brush Tool-om

Page 247: Us   3 d grafika i animacija - praktikum

234 3D grafika i animacija

• Otvoriti isečak filma i u slojevima napraviti više Shape Tween-ova koji će u potunostipokriti desni deo bitmape. Redosled i animacija nisu bitni. Poenta slojeva jeste utome da jedan Shape Tween ne bi kvalitetno pokrio celu bitmapu (slično prvimlekcijama o Shape Tween-u sa slovima). Hint bi dosta pomogao kada je ShapeTween u pitanju, ali ni sa velikim brojem Hint-ova rešenje ne bi bilo kvalitetno i velikibroj bi verovatno doveo do konfuzije. Najsigurniji način je postepeno pokrivanjedelova bitmape po slojevima. Na slici 7.2 prikazane su animacije unutar maske poslojevima.

Slika 7.2. Pokrivanje (maskiranje) objekta sloj-po-sloj

• Kada je završeno sa maskom na jednom delu bitmape, potrebno je samo iskopiratije na drugi. Pošto se maska nalazi u okviru isečka filma, treba je samo dupliratii rotirati oko sopstvene ose (mirror). Ako se pokrene animacija, uvideće se daradi samo desna maska (ili isečak filma). Pošto se maske nalaze na prvom sloju,na glavnoj pozornici, Flash neće najbolje razumeti da treba da posmatra maskeodvojeno. Zbog toga je neophodno selektovati oba isečka filma i objediniti ih novimisečkom filma. Sada, kada se animacija pokrene, vidi se da maska pokriva oba krajabitmape. Isečke filmova treba postaviti kako je prikazano na slici 7.3.

Page 248: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 235

Slika 7.3. Razdvajanje u različite isečke filmova

7.2. Bitmapa kao dugme

Bitmape se prilično lepo uklapaju u simbole kao što su dugmad ili button. Oni su statičnii sekvenca bitmapa može da opiše sva tri stanja dugmeta (izuzeto je Hint stanje jer seono ne vidi).

U ovom primeru opisan je postupak pravljenja player-a koji se kompletno sastoji odbitmapa. Potrebno je uraditi sledeće:

• U nekom od programa za rad sa bitmapama, napraviti ili uvesti sliku player-a gdeće se komandni dugmići nalaziti na posebnim slojevima. Sačuvati radni fajl (ako jerađeno u Photoshop-u, sačuvati fajl kao ".psd")

• Otvoriti novi radni fajl u Flash-u, kreirati novi simbol isečka filma i unutar isečkauvesti na pozornicu ".psd" fajl (slika 7.4). Potvrditi opciju da svaki sloj iz programaPhotoshop bude zaseban sloj u Flash-u (slika 7.5).

Slika 7.4. Import to Stage

Page 249: Us   3 d grafika i animacija - praktikum

236 3D grafika i animacija

Slika 7.5. Import .psd

• Duplim klikom otvoriti isečak filma. U okviru isečka uvesti kontrole konvertovati usimbole dugme (Button), kako je prikazano na slici 7.6.

Slika 7.6. Konvertovanje bitmapa u simbole dugmeta

Zadatak je ovim korakom završen. Objavljivanjem fajla (Ctrl + Enter) ručica se vidiprelaskom preko dugmića. Mogu se postaviti različite bitmape za različita stanja kako jeprikazano na slici 7.7. Na kraju se može dodati ActionScript kôd kako bi player postaoupotrebljiv.

Page 250: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 237

Slika 7.7. Različita stanja dugmeta

Mogu se iskoristiti prethodno kerirane komponente. Najlakši način jeste otvaranje fajlau kojem je napravljen isečak filma sa equalizer-om ili nacrtati novi, iskopitati taj isečakfilma i prebaciti ga u trenutni radni fajl sa player-om. Međutim, prilikom kopiranja moženastati problem jer će Flash prepoznati da postoji poklapanje imena simbola (slika 7.8).

Slika 7.8. Library Conflict

Neophodno je, kako se simboli u fajlu ne bi zamenili novim (iz equalizer-a), selektovatinovi folder u okviru panela Library i sve fajlove prebaciti u taj folder (slika 7.9). Sada sekopiranje može uspešno izvesti.

Page 251: Us   3 d grafika i animacija - praktikum

238 3D grafika i animacija

Slika 7.9. Library, kreiranje foldera

Page 252: Us   3 d grafika i animacija - praktikum

Glava 8

Adobe Flash Professional CS3 - ActionScript

8.1. Osnovne komande

Postoje četiri osnovne komande za rad sa ActionScript-om. To su:

• play();

• stop();

• gotoAndPlay();

• gotoAndStop();

Rad sa gore navedene četiri komande predstavlja 90% kvalitetne Web prezentacije. Mo-gućnosti ovih komandi kao i njihovih kombinacija su velike.

8.2. Komanda "stop();"

Osnovna i najčešće korišćena je stop(); komanda. Ona zaustavlja animaciju na slojevimaili onemogućava ponavljanje animacija kada dođu do kraja.

Slika 8.1. Slojevi i njihov sadržaj

U ovom primeru potrebno je uraditi sledeće:

Page 253: Us   3 d grafika i animacija - praktikum

240 3D grafika i animacija

• Formirati slojeve dužine 30 kadrova. U ovom primeru iskorišćen je simbol isečakfilma u kome se nalazi slika automobila sa još dva isečka filma koji reprezentujukretanje točkova. Sa desne strane pozornice, postavljen je znak STOP. Sve se tonalazi u tri sloja gde je prvi sloj rezervisan za akcije, drugi isečak filma sa elementimaautomobila, a treći znak STOP (slika 8.1).

• Sloj u kome se nalazi auto (mc_car) se pomera 30 kadrova sa leve strane pozornice,do desne, tačnije do znaka (slika 8.2).

Slika 8.2. Kretanje automobila

• Kako je cilj primera da se auto zaustavi neposredno ispred znaka STOP, završetakanimacije na 30. ključnom kadru treba da je baš na tom mestu.

• Potrebno je, zatim, u sloju za akcije na samom kraju (30. kadar) formirati ključnikadar (Insert Keyframe), otvoriti panel Actions i ukucati sledeću liniju koda:

stop();

Time se animacija završava na 30. ključnom kadru i nema njenog ponavljanja (slika 8.3).

Slika 8.3. Unošenje komande za zaustavljanje

Page 254: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 241

Ukoliko je auto formiran sa odvojenim točkovima koji su u pokretu potrebno ih je zaustaviti(slika 8.4) kada se i auto zaustavi. Duplim klikom otvoriti isečak filma i dati točkovimaInstance name: Tocak1 i Tocak2 (slika 8.5), da bi mogli biti kontrolisani ActionScript-om.

Slika 8.4. Konvertovanje točkova u simbole MovieClip-a

Slika 8.5. Instance Name

Vratiti se na glavnu scenu i odmah ispod već unešene linije koda u panelu Action ukucatisledeće linije (slika 8.6):

auto.tocak1.stop();auto.tocak2.stop();

Ovim linijama rečeno je Flash-u da po zaustavljanju automobila, zaustavi i animacijutočkova. Još je samo ostalo, radi realnijeg prikaza animacije, Motion Tween-u automobiladati Ease Out 100%.

Page 255: Us   3 d grafika i animacija - praktikum

242 3D grafika i animacija

Slika 8.6. Dodeljivanje akcije

Slično korišćenju stop(); komande, koristi se komanda play();. Ona se retko koristiza kontrolisanje animacija na slojevima, već za odigravanje neke animacije u okviru nekogisečka filma.

8.3. Skokovi "goto"

U prethodnom primeru rečeno je da su osnovne komande idealne za web prezenacije, pogo-tovu za omogućavanje interakcije korisnicima. Da bi se odigrala ili zaustavila određenaanimacija, neophodno je korišćenje osnovnih komandi, a da bi to direktno zavisilo odkorisnika, pored osnovnih komandi, neophodni su i dugmići.

Slika 8.7. Prikaz organizacije elemenata prezentacije

Page 256: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 243

U narednom primeru pod imenom "sajt" ponuđeno je korisnicima da izaberu da li žele dapogledaju intro ili da ga preskoče i odmah pogledaju sajt. To se radi na sledeći način:

• Potrebno je kreirati sadržaj po želji sa opcijama za odabir da li se želi pregledati ilipreskočiti intro. Opcije su, zapravo, dva dugmeta (slika 8.7).

• Zatim otvoriti još dva sloja gde će se na jednom nalaziti animacija koja simbolizujeintro, a na drugom animacija koja simbolizuje sajt. Nije bitno kakva je animacija nitikoliko dugo traje. Važno je samo da se intro odigrava prvi već od drugog ključnogkadra, a sajt tek nakon njega. Suprotno bi, takođe, funkcionisalo korišćenjem os-novnih komandi, ali da bi se lakše manipulisalo sa radnim fajlom, najbolje je držatise ovakvog modela - prvo intro, potom sajt (slike 8.8 i 8.9).

Slika 8.8. Animacija Intro

Slika 8.9. Animacija Site

• Sledeće što treba uraditi jeste postaviti labele na 2. i 51. ključnom kadru nasloju action pod imenom intro i site. Svrha labela je u tome da se ne koriste

Page 257: Us   3 d grafika i animacija - praktikum

244 3D grafika i animacija

brojevi ključnih slika kod korišćenja osnovnih komandi, već da se koriste imenalabela. Labele su jako korisne jer omogućavaju promenu veličine animacije. Labelese prave formiranjem ključnih kadrova i u okviru inspektora Properties u delu Frameukucavanjem imena labele, kako je prikazano slikama 8.10 i 8.11.

Slika 8.10. Labela Intro

Slika 8.11. Labela Site

• Preostao je još samo kôd. Selektovati prvi ključni kadar i u okviru panela Actionukucati:

stop();

Poenta je da se animacija zaustavi još na prvom ključnom kadru, a da nastavi sakretanjem u zavisnosti od izbora korisnika.

• Sledeće što treba jeste da se selektuje dugme intro, a zatim otvori panel Action iukuca sledeći kôd:

Page 258: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 245

on(release){gotoAndPlay("intro");

}

što znači "po puštanju dugmeta pusti animaciju od labele pod imenom "intro" (slika8.12).

Slika 8.12. Unos koda za dugme Intro

Sličan kôd je i za dugme sajt (slika 8.13):

on(release){gotoAndPlay("site");

}

što znači "po puštanju dugmeta pusti animaciju od labele "sajt" (preskoči sve što je odlabele "intro" do labele "sajt")".

Pokrenuti animaciju i proveriti ispravnost koda. Po pritisku dugmeta "intro" odigrava seanimacija intra, a zatim sajta. Po pritisku dugmeta "sajt" odigrava se samo animacijasajta (preskočen je intro).

Page 259: Us   3 d grafika i animacija - praktikum

246 3D grafika i animacija

Slika 8.13. Unos koda za dugme Site

8.4. Linkovi za mail i URL

Linkovi za mail i URL su zapravo simboli tipa dugme, podržani ActionScript kodom,po čijem pritisku se otvara željena Web stranica ili Outlook sa e-mail adresom željenogprimaoca.

Potrebno je napraviti dugmiće za mail i URL bilo korišćenjem bitmapa, vektora ili teksta.U konkretnom primeru korišćene su dve bitmape koje su konvertovane u simbol dugme(slika 8.14). Dugmetu za Web dat je kôd:

on (press) {getURL("http://www.google.com");

}

čime je rečeno da se po pritisku dugmeta otvori browser sa stranicom koja je na adresiwww.google.com.

Page 260: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 247

Slika 8.14. Unos koda za linkove mail i URL

Sličan kôd je i za mail:

on(press){getURL("mailto:[email protected]");}

gde se po pritisku dugmeta otvara Outlook sa e-mail adresom primaoca koja je navedenau gornjoj sintaksi [email protected].

8.5. Pravljanje Slide Show prezentacije

Za ovu vežbu potrebno je ispratiti sledeće korake:

• Napraviti tri sloja gde je prvi rezervisan za akcije, drugi za isečke filmova koji će bitiu slide show-u i treći na kome se nalaze dugmići.

Page 261: Us   3 d grafika i animacija - praktikum

248 3D grafika i animacija

• Uvesti jednu sliku u Flash i konvertovati je u simbol isečak filma. Zatim uvesti jošdve na ključne kadrove 2 i 3 i podesiti veličinu i poziciju prema prvoj (slika 8.15).

Slika 8.15. Ključni kadrovi

• Zatim je potrebno na trećem sloju napraviti dva dugmeta, u istom, prvom, ključnomkadru. Rasporediti ih sa leve i desne strane slika. Trenutno stanje prikazano je naslici 8.16.

Slika 8.16. Prikaz rasporeda elemenata na pozornici

Page 262: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 249

• Sada sledi programiranje. Potrebno je selektovati levo dugme, otvoriti Actions panel(F9) i upisati sledeći kôd (akcije su prikazane na slikama 8.17 i 8.18):

on (release) {if(this._currentframe == 1){gotoAndStop(this._totalframes);}else{prevFrame();}}

Slika 8.17. Prikaz rasporeda elemenata na pozornici

Slika 8.18. ActionScript akcija za dugme "Sledeća"

Linije koda znače sledeće: "pritiskom na dugme pre izvršavanja akcije prikazivanja pret-hodne slike proveriti da li je trenutna slika prva slika u nizu, iz razloga što Flash neće

Page 263: Us   3 d grafika i animacija - praktikum

250 3D grafika i animacija

sam prikazati 3. sliku, jer ne zna da se to od njega traži. Ako jeste, pritiskom na dugmeprikazati poslednju (u ovom slučaju 3. da bi se stvorio efekat kretanja unazad), a akotrenutna slika nije prva slika, prikaži sliku koja je odmah iza trenutne".

• Sada je potrebno dati akciju dugmetu za pomeranje slika unapred. Treba selektovatidesno dugme, otvoriti Actions panel i ukucati sledeći kôd:

on (release) {if(this._currentframe == this._totalframes){gotoAndStop(1);}else{nextFrame();}}

Pritiskom na dugme pre izvršavanja akcije prikazivanja sledeće slike proveriti da lije trenutna slika poslednja slika u nizu 3. Ako jeste klikom na dugme pojaviće seprva slika, a ako nije pojaviće se sledeća u nizu.

• Preostalo je davanje animacije unutar isečaka filmova. Može se dati bilo koja ani-macija, ubaciti još neki sloj i sl. U ovom slučaju je to Alpha (potpuna transparencijana prvom ključnom kadru) sa akcijom stop(); na kraju.

• Pokrenuti film i proveriti unešen kôd.

8.6. Pravljanje Scroller-a

Tekst u scroller-u je onaj koji se može kontrolisati uz pomoć dugmića. Formira se nasledeći način:

• Pritisnuti Text Tool i pre iscrtavanja tekst boksa na pozornici u inspektoru Propertiespodesiti tekst na Dynamic text.

• Zatim pretvoriti taj takst u tekst za scroll koristeći se prečicom koja je navedenaText > Scrollable.

• Nacrtati željeni okvir teksta na pozornici, tek sada. Taj okvir predstavlja vidljivideo teksta u scroll-u. Napraviti dugmiće (može se koristiti i Flash-ova biblioteka) ipostaviti ih sa desne strane tekst boksa u ravni sa gornjom i donjom ivicom.

• Kopirati tekst iz drugog programa ili iskucati svoj u postavljeni tekst boks (slika8.19).

• Dati sledeći kôd dugmićima:

Page 264: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 251

on(press){tekst.scroll ++;}

donjem dugmetu, a gornjem

on(press){tekst.scroll --;}

Slika 8.19. Pravljenje scroll-a

• Treba jako obratiti pažnju na razmak izmedju scroll i znakova "–" i "++". Jasnoje da znakovi "–" i "++" ukazuju na smer kretanja teksta u scroll-u.

• Pokrenuti film i proveriti da li je kod pravilno unešen.

Skroler se može napraviti i pomoću funkcije onEnterFrame(); koja je opisana u deluvezanom za animaciju objekata korišćenjem ActionScript programskog jezika.

8.7. Pravljanje Preloader-aPreloader prikazuje koliko vremena je ostalo do učitavanja određene grafike ili animacije.Suština preloader-a je da se posmatračeva pažnja maksimalno okupira dok se sadržaj neučita.

Preloader se pravi na sledeći način:

Page 265: Us   3 d grafika i animacija - praktikum

252 3D grafika i animacija

• Otvori se novi dokumenat (".fla") i u prvom sloju napravi textBox kao dinamički.

• Doda mu se ime instance: ucitaj_txt (slika 8.20)

Slika 8.20. Instance Name

• Formirani textBox se konvertuje u simbol isečka filma i da mu se ime instanceloader.

• Selektovanom isečku filma se doda sledeći kôd:

onClipEvent (enterFrame) {this. ucitaj_txt.text = int(_parent.getBytesLoaded()/1000)+"od ukupno "+int(_parent.getBytesTotal()/1000)+" ...";ukupnoP = (int(_parent.getBytesTotal()/1000))/100;kolkoP = (int(_parent.getBytesLoaded()/1000))/ukupnoP;proc = Math.round(((kolkoP)*21)/100);_root.bar.gotoAndStop(proc);if (_parent.getBytesTotal() == _parent.getBytesLoaded()) {_root.gotoAndPlay(2);}}

• Zatim se doda još jedan kadar (slika 8.21).

• Zatim se kadru doda jednostavan kôd:

stop();

Page 266: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 253

Slika 8.21. Dodavanje kadrova

• Na istom kadru, a na sloju "sadržaj", postaviti željeni sadržaj i testirati film. Naovaj način, kada se na prvom kadru nalazi preloader, a na drugom sadržaj, prilikomtestiranja filma prvi će se pojaviti preloader. Međutim, da bi se on video, potrebno jeuključiti Bandwidth Profiler, a potom ispratiti putanju (slika 8.22) koja je navedenaView > Simulate Download.

Slika 8.22. Simulate Download

Slika 8.23. Vizuelni Preloader

Page 267: Us   3 d grafika i animacija - praktikum

254 3D grafika i animacija

• Može se napraviti i vizuelni preloader (slika 8.23), unošenjem sledećih linija koda:

ukupnoP = (int(_parent.getBytesTotal()/1000))/100;kolkoP = (int(_parent.getBytesLoaded()/1000))/ukupnoP;proc = Math.round(((kolkoP)*21)/100);_root.bar.gotoAndStop(proc);

• Napraviti u biblioteci simbola jedan isečak filma pod imenom bar. Isečak filma seanimira po želji.

8.8. Dinamički tekstVarijable ili promenljive su "mesta" koja čuvaju podatke. Takva "mesta" se mogu pos-matrati kao kutije u memoriji koje su uvek iste, samo se njihov sadržaj menja. Svakavarijabla ima svoje ime, domen važenja i deklaraciju. Koriste se na različite načine uokviru programskog jezika ActionScript.

Cilj ovog primera je pomeranje miša po ekranu i "hvatanje" njegove trenutne (x, y) pozi-cije.

Potrebno je:

• Napraviti dva sloja. Prvi sloj je rezervisan za akcije, a drugi za sadržaj na pozornici

• Zatim, napraviti četiri tekst boksa od kojih su dva Static Text, a dva Dynamic Text.U prva dva ukucati "X" i "Y", a u druga dva "0"(nula). Oba dinamička tekstatreba da imaju svoje Variable name koje se nalazi u okviru panela Properties kadase klikne na textBox dinamičkog teksta (slika 8.24).

Slika 8.24. Var Name

• Prvom dinamičkom tekstu dati ime varijable var_x, a drugom var_y.

• Zatim je potrebno prvom ključnom kadru prvog sloja dati akciju:

onMouseMove = function(){

x_var = _root._xmouse;y_var = _root._ymouse;

}

Page 268: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 255

što znači da, kada se pokazivač miša pomeri, varijable će pokazivati njegovu poziciju.

Slika 8.25. Sadržaj i organizacija elemenata pozornice

8.9. Analogni sat

Pravljenje analognog sata nije toliko teško, obuhvata i malo ActionScript skripte, i nekusliku koja se koristi za izgled. Može se napraviti sat u nekoj aplikaciji za obradu slike, kaošto je Adobe Photoshop, a zatim izvrsiti uvoz ili se može napraviti direktno u Flash-u.Prednost pravljenja sata u Flash-u je da će biti nezavistan od rezolucije. U ovom primerukoristiće se slika sata napravljena i uvežena iz Adobe Photoshop-a. Kada se jedanput naučikako se prave satovi u Flash-u, poželeće se njihova ugradnja u svaki Flash dokument.

U ovom projektu naučiće se kako se skidaju sistemski podaci (u ovom slučaju sistemskovreme se koristi da se napravi sat koji se automatski ažurira).

Postupak je sledeći:

• Napraviti pet slojeva (slika 8.26) u vremenskom toku i u svrhu identifikacije, datiim imena: actions, hours, minutes, seconds, clock.

• Ako je napravljen analogni sat u nekoj drugoj aplikaciji, klikne se meni File, zatimna Import, pa na Import to Library. Pronađe se i selektuje fajl sa satom, a zatimklikne Import to Library.

Page 269: Us   3 d grafika i animacija - praktikum

256 3D grafika i animacija

Slika 8.26. Slojevi: actions, hours, minutes, seconds, clock

• Prevući uveženi fajl sata iz biblioteke na sloj clock.

• Selektovati alat za crtanje linija i nacrtati liniju široku 1 piksel u sloju seconds. Uzavisnosti od veličine sata, linija treba da predstavlja dužinu tipične sekundare (slika8.27).

Slika 8.27. Iscratavnje linije

• Selektovati tu liniju, kliknuti meni Modify, pa Convert to Symbol ili pritisnuti F8

• Imenovati simbol: seconds_mc (slika 8.28)

Page 270: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 257

Slika 8.28. Kreiranje simbola

• Kliknuti opciju za ponašanje MovieClip.

• Kliknuti donji središnji kvadratić za registracionu tačku.

• Kliknuti OK.

• Selektovati alat Move, i postaviti filmski klip seconds_mc preko centra sata.

• Otvoriti panel Property Inspector, i dati ime sec instanci filmskog klipa seconds_mc(slika 8.29).

Slika 8.29. Dodavanje Instance Name-a "sec"

• Prevući kopiju filmskog klipa seconds_mc u sloj minutes. Mogao se napraviti jošjedan filmski klip za kazaljku minuta i sati, međutim, zbog jednostavnosti, koristitiisti klip.

• Upotrebiti alat Transform da se smanji dužina kazaljke. Upamtiti da će ona pred-stavljati kazaljku za minute, koja je tipično kraća od sekundare.

• Selektovati alat Move

• Otvoriti panel Property Inspector, i dati ime min (slika 8.30) instanci filmskog klipaseconds_mc.

Slika 8.30. Dodavanje Instance Name-a "min"

Page 271: Us   3 d grafika i animacija - praktikum

258 3D grafika i animacija

• Prevući kopiju filmskog klipa seconds_mc u sloj hour, i upotrebiti alat Transformza smanjivanje dužine kazaljke za sate.

• Otvoriti panel Property Inspector i dati ime hour (slika 8.31) instanci filmskog klipaseconds_mc.

Slika 8.31. Dodavanje Instance Name-a "hour"

Slika 8.32. ActionScript kôd

• Selektovati sloj actions, pa ukucati sledeći ActionScript (slika 8.32):

time=new Date ();

seeonds=time.getSeeonds ();minutes=time.getMinutes ();hours=time.getHours () hours=hours+(minutes/60)j seeonds=seeonds*6;

Page 272: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 259

minutes=minutes*6;hours=hours*30;

sec. rotation=seeonds;min. Jotation=minutes;hour.rotation=hours;

• Otići na drugi kadar svakog sloja i pritisnuti F5 da se ubaci novi kadar.

8.10. Pravljenje sopstvenog pokazivača

Kada se otvori Flash dokument, opetativni kursor je standardna ikonica u obliku strelice,ili ako se radi sa tekstom ikonica u obliku velikog slova "I". lako su standardni kursori vrlofunkcionalni, ponekad mogu biti pomalo dosadni. U ovom primeru napraviće se sopstvenikursor. Sopstveni kursori mogu se napraviti od bilo koje grafike, objekta ili čak animiranihfilmskih klipova. Pravi se po sopstvenom izboru, ali oblik kursora bi trebalo da odgovaradokumentu sa kojim se koristi.

U ovom projektu uzeće se jedna slika i pomoću ActionScript-a zameniti njome standardniFlash pokazivač.

• Napraviti dva sloja u vremenskom toku, gornji nazvati actions, a donji sloj cursor.U ovom primeru vremenski tok treba da sadrži samo jedan kadar (slika 8.33).

Slika 8.33. Slojevi: actions, cursor, buttons

• Klikne se dugme Insert, a zatim New Symbol.

• Klikne se opcija ponašanja Movie Clip (slika 8.34).

Slika 8.34. Kreiranje simbola

Page 273: Us   3 d grafika i animacija - praktikum

260 3D grafika i animacija

• Dati filmskom klipu ime cursor_mc.

• Klikne se OK.

• Otvoriti panel Library, a zatim otvoriti filmski klip cursor_mc.

• Napraviti ili uvesti objekat koji će se koristiti kao novi pokazivač (slika 8.35).

Slika 8.35. Objekat koji će se koristiti kao novi pokazivač

Slika 8.36. Pozicija novog kursora u odnosu na pozornicu

• Ovo može biti slika koja se već nalazi u biblioteci, ili nešto napravljeno upotrebomFlash alata za crtanje.

Page 274: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 261

• Novi pokazivač može biti bilo šta, čak i animirana sekvenca.

• Vratiti se na glavnu pozornicu filma

• Selektovati sloj cursor vremenskog toka, pa prevući kopiju filmskog klipa cursor_mcu radni prostor oko pozornice.

• Selektovati filmski klip, otići u panel Properties Inspector i dati instanci ime koje jenavedeno new_cursor (slika 8.37).

Slika 8.37. Dodeljivanje Instance Name-a "new_cursor"

• Selektovati sloj actions u vremenskom toku pa ubaciti sledeći kôd:

Mouse.hide ();startDrag(new_cursor, true);

• Kliknuti na meni Control, pa na Test Movie (slika 8.38).

Slika 8.38. Prikaz novog kursora

8.10.1. Definisanje vruće tačke novog pokazivača

Većina pokazivača ima vruću tačku, pa tako i sopstveni pokazivači. Da bi se odredila vrućatačka novog pokazivača, otići u biblioteku i otvoriti filmski klip cursor_mc. Upotrebitialat Move da se selektuje, a zatim pomeri pokazivač, postavi željena vruća tačka direktnoiznad markera za centar. Na primer, ako postoji pokazivač u obliku strelice, jednostavnopostaviti vrh strelice iznad markera za centar. Sledeći put kada se koristi pokazivač, vrhstrelice biće vruća tačka.

Page 275: Us   3 d grafika i animacija - praktikum

262 3D grafika i animacija

8.11. Tekst koji sledi pokazivačOvaj efekat se često viđa na Internetu, tekst koji sledi pokazivač po ekranu. Mada jeovo efekat koji ne bi trebalo stalno koristiti, zabavno je u slučaju nekih uzgređnih Flashdokumenata, a u stvarnosti, radi se o nešto ActionScript kodiranja. Kodiranje obuhvataučitavanje teksta za pokazivač i pretvara ga u niz. Ostatak koda obuhvata lokator pokazi-vača i promenljivu neophodnu da bi tekst sledio pokazivač sa njegove desne strane.

U ovom projektu napraviće se zaista zabavan efekat povezujući malo teksta sa pokazi-vačem, tako da prati pokrete miša.

• U vremenskom toku dati početnom sloju ime: actions (slika 8.39).

Slika 8.39. Sloj: actions

• Ubaciti sledeći ActionScript kôd u prvi kadar prvog sloja (slika 8.40):

Text=’Follow Me’;letters=Text.split(");letterformat=new TextFormat();letterformat.font=’Verdana’;letterformat.align=’center’;letterformat.size=’10’;spacing=8;speed=3;

for (var LTR=0; LTR<letters.length; LTR++) {

mc=_root.createEmptyMovieClip(LTR+’I’,LTR);mc.createTextField(letterS[LTR)+’t’,LTR,LTR*spacing,10,20,20); with(mc[letters[LTR)+’t’]) {

text=letter[LTR];setTextFormat(letterformat);

selectable=false;}if(LTR) {

Page 276: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 263

mc.prevClip= root[(LTR-1)+’I’];mc.onEnterFrame=function() {

this._x+=(this.prevClip._x-this. x+5)/speed;this. y+=(this.prevCI1p. y-this. y+5)/speed;

} ;} else {mC.onEnterFrame=function () {

this. x+=(_root._xmouse-this. x+10)/speed;this._y+=(_root._ymouse-this._y)/speed;}} ;

Slika 8.40. ActionScript kôd

• Kliknuti meni Control, pa Test Movie.

8.12. Animacija koriščenjem ActionScript-a

Pored pravljenja animacija upotrebom vremenskog toka i panela Property Inspector, možese takođe koristiti ActionScript za animiranje filmskih klipova (MovieClip), dugmadi ikomponenata. Može se animirati bilo koja instanca jezikom ActionScript. UpotrebomActionScript-a može se animirati objekat tokom vremena i izmeniti bilo koje ActionScriptsvojstvo, kao što su razmera, rotacija, boja i prozirnost.

Page 277: Us   3 d grafika i animacija - praktikum

264 3D grafika i animacija

Događaj onEnterFrame služi za animaciju objekata putem ActionScript-a. Naredni primerje skripta u jednom kadru koja animira filmski klip udesno sve dok ne dostigne položaj nakom bi trebalo da bude (slika 8.41):

myMovieClip.onEnterFrame = function() {

if (this._x<300) {this._x += 10;} else {delete this.onEnterFrame;}};

Slika 8.41. onEnterFrame

Prethodni primer može poslužiti za animaciju postepenog povećanja transparencije (opcijaAlpha) objekta.

Potrebno je ispratiti sledeće korake:

• Otvoriti novi radni fajl, uvesti grafiku ili napraviti novu u Flash-u i konvertovati jeu simbol isečka filma (slika 8.42).

• Sloj nazvati: sadrzaj

• Sadržaj konvertovati u simbol isečka filma (slika 8.43)

• Otvoriti novi sloj i nazvati ga: action

• U okviru inspektora Properties uneti ime za instancu MovieClip-a: leptir (slika 8.44)

• U okviru panela Action ukucati sledeći kôd (slika 8.45):

leptir.onEnterFrame = function(){leptir._alpha = leptir._alpha - 5;}

Page 278: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 265

Slika 8.42. Import to Stage

Slika 8.43. Kreiranje simbola

Slika 8.44. Instance Name "leptir"

Page 279: Us   3 d grafika i animacija - praktikum

266 3D grafika i animacija

• Kliknuti meni Control, pa Test Movie. Videće se da se transparencija objekta poste-peno smanjuje do potpunog nestanka.

Slika 8.45. ActionScript kôd

Primeri razmih znakova, operatora, funkcija, petlji, uslova i sl. dati su u daljem tekstu.Znakovima "//" označavaju se komentari u ActionScript-u i najčešće (kao i ovde) služeda pojasne liniju/linije koda.

//petljefor(var i=0;i<10;i++) {trace(i);}//petlja for//upisuje brojeve od 0 do 9var broj=0;while(broj<10) {broj++;trace (broj);}//petlja While//vraca brojeve od 1 do 10 a uslov//se proverava pre svakog krugavar broj=0;do {broj++;trace (broj);}while(broj<10);//petlja do//vraca brojeve od 1 do 10 s’tim sto//se uslov proverava posle svakog kruga

Page 280: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 267

//naredba break; zaustavlja petlju

//funkcijefunction kvadrat(broj) {var kvadratbroja = broj*broj;return kvadratbroja;}trace (kvadrat(8));//vraca kvadrat broja 8 a to je 64

//ugradjene funkcijevar a=Math.sqrt(16);trace (a);//vraca kvadratni koren od 16 a to je 4var a=mojklip._x;trace(a);//vraca poziciju atributa klipa ili//isecka po imenu mojklip

//znakovi u flash actionscript u//== znak uslovne jednakostivar a=7;trace(a==7);//== znak uslovne jednakosti//vraca true jer je istinavar a=7trace(a!=7);//!= ako nije jednako//vraca false jer nije istinavar a=7trace(a);//= dodeljivanje vrednosti varijabli//vra\’ ca 7var a=7var b=5;trace(a<b);//< manje od neke vrednosti//vraca false jer to nije istinavar a=7var b=5;trace(a>b);//> vise od neke vrednosti//vraca true jer je istina

//logicki operatori

Page 281: Us   3 d grafika i animacija - praktikum

268 3D grafika i animacija

//+ = sabiranje//- = oduzimanje//*= mnozenje///= deljenjevar a=7;a=a+4;trace(a);//vra\’ ca 11var a=7;a +=4;trace(a);//isto se postize na ovaj nacina++; //dodaje broj 1 i vraca 8 ako je a=7

//uslovivar a=7;if(a==7) {trace("istina");}else if(a==8) {trace("Nije 8");}else {trace("la\v z");}//uslov if

//dugmadon(release) {nextFrame();trace("Dugme je stisnuto i pusteno i

vodi na sledeci frame");}on(press) {prevFrame();trace("Dugme je stisnuto i ne mora biti

pusteno i vodi na prethodni frame");}//dugme stisnuto i pusteno i//dogadjaj na klik misaon (rollOver) {cursor.gotoAndStop("over button");}on (rollOut) {cursor.gotoAndStop("normal");

Page 282: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 269

}// klip se zove kursor i kad se predje//preko dugmeta izgled dugmeta se menjaon (rollOver) {gotoAndStop("information 1");}on (rollOut) {gotoAndStop("none");}//prelazak misem preko dugmeta vodi nas//na frame information 1 ili na frame u//kojem je naredba stop i nista vise

//skripte za filmske iseckeonClipEvent(load) {trace("u\v citan klip");}onClipEvent (enterFrame) {nextFrame();//moze i prevFrame();trace("upis svakog slede\’ ceg frame-a");}//pozicije klipovatrace(mojklip._x);trace(mojklip._y);//informacija o poziciji klipamojklip._x=200;mojklip._y=100;//promena pozicije klipamojklip._x +=5;_x +=5;this._x +=5;//pomeranje klipa po poziciji x za 5//piksela,sve ce dati isti rezultat//pozicija misa ili kursoratrace(_root._xmouse);trace(_root._ymouse);//odredjuje poziciju kursora u odnosu na//centar klipa ili na gornji levi ugao filmaonClipEvent (enterFrame) {this._x = _root._xmouse;this._y = _root._ymouse;}//klip se povlaci lokaciji misaonClipEvent(enterFrame) {

Page 283: Us   3 d grafika i animacija - praktikum

270 3D grafika i animacija

this._rotation += 1;//mojklip._rotation +=1;//mojklip._rotation -=1; rotacija unazad}//rotacija klipa za 1 stepen po frame-u//potrebno 360 frame-ova za njegovu potpunu rotaciju//15 frame-ova po sekundi dakle 24 sekunde za potpunu rotaciju//skaliranje klipa ili njegovo istezanje i skupljanjeonClipEvent (load) {origsirina = this._width;origvisina = this._height;}onClipEvent (enterFrame) {dx = _root._xmouse-this._x;dy = _root._ymouse-this._y;sx = 100*dx/(origsirina/2);sy = 100*dy/(origvisina/2);this._xscale = sx;this._yscale = sy;}//gornja skripta isteze ili skuplja klip//onako kako se povlaci kursoronClipEvent(load) {povecanje = 10;x = 525;y = 25;//odredjuje pocetnu poziciju klipa}onClipEvent(enterFrame) {povecanje++;x -= 5;y += 5;this._xscale = povecanje;this._yscale = povecanje;this._x = x;this._y = y;//koristi istezanje klipa i povecavanje//kako se priblizava}//gornja skripta povecava klip kako se//priblizava iz gornjeg desnog uglamojklip.visible=false;//sakrivanje klipamojklip._alpha=50;//stepen prozirnosti klipa

Page 284: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 271

onClipEvent(enterFrame) {if (this._alpha > 0) {this._alpha -= 5;}}//povecanje prozirnosti klipaonClipEvent (mouseUp) {if (this.hitTest(_root._xmouse, _root._ymouse)) {if (this._currentFrame == 1) {this.gotoAndStop(2);} else {this.gotoAndStop(1);}}}//odredjivanje klip kliknut..pokazuje//kada se misem preslo iznad nekog klipaonClipEvent (mouseDown) {if (this.hitTest(_root._xmouse, _root._ymouse)) {this.startDrag();}}onClipEvent (mouseUp) {if (this.hitTest(_root._xmouse, _root._ymouse)) {this.stopDrag();}}//prevlacenje i ispustanje klipa gore skripta..onClipEvent (load) {povlacenje = false;}onClipEvent (mouseDown) {if (this.hitTest(_root._xmouse, _root._ymouse)) {povlacenje = true;xpolozaj = this._x - _root._xmouse;ypolozaj = this._y - _root._ymouse;}}onClipEvent (enterFrame) {if (povlacenje) {this._x = _root._xmouse + xpolozaj;this._y = _root._ymouse + ypolozaj;}}onClipEvent (mouseUp) {

Page 285: Us   3 d grafika i animacija - praktikum

272 3D grafika i animacija

if (this.hitTest(_root._xmouse, _root._ymouse)) {povlacenje = false;}}//gore je slozenija skripta koja odredjuje//polozaj misa u odnosu na centar

//detekcija pritisnutog dugmetaon (keyPress "a") {trace("Key ’a’ stisnuto.");}on (keyPress "A") {trace("Key ’A’ stisnuto.");}on (keyPress "<Left>") {trace("Left dugme stisnuto.");}on (keyPress "b", release) {trace("’b’ stisnuto ili klik na dugme.");}//detekcija pritiska na odredjeni znak na//tastaturi ..skripta na neko dugmeonClipEvent (enterFrame) {if (Key.isDown(Key.getCode("a"))) {trace("’a’ stisnuto.");}if (Key.isDown(Key.LEFT)) {trace("stisnuto dugme left");}}//sve isto samo koriscenje key objektaKey.addListener(_root);//osluskuje se dogadjaj_root.onKeyUp = function() {trace(Key.getAscii());// trace(String.fromCharCode(Key.getAscii()));}// Vra\’ ca ascii kodonClipEvent(load) {x = this._x;y = this._y;brzina = 5;}onClipEvent(enterFrame) {if (Key.isDown(Key.LEFT)) {

Page 286: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 273

x -= brzina;}if (Key.isDown(Key.RIGHT)) {x += brzina;}if (Key.isDown(Key.UP)) {y -= brzina;}if (Key.isDown(Key.DOWN)) {y += brzina;}this._x = x;this._y = y;}//pokretanje klipa po ekranu pomocu dugmica left,right,up,down//tekst i rad sa stringovima//uzimanje podataka iz tekstualnog poljaon(release) {trace(mojtekst);}//napravljeno tekstualno polje tipa input i postavljen atribut//var na "mojtekst" postavljeno dugme i skripta na dugmeon(release) {var mojstring="Hello World";trace(mojstring.substr(3,7));}//uzimanje delova stringa,,n.p.r od pozicije 3 uzima 7//karaktera rezultat je "lo Worl"var mojstring="Hello World";trace(mojstring.charAt(6));//uzimanje pojedinog karaktera iz stringa//izdvaja slovo "W"..ne zaboraviti da pocinje//brojanje od nule i H je nulti stringvar mojstring="Hello World";trace(mojstring.indexOf("W"));//trazenje pozicije stringa//vraca broj 6 zato sto je slovo "W" na poziciji 6var mojstring="Hello World";trace(mojstring.indexOf("llo"));//trazenje pozicije delova stringa//vraca 2 jer je prvo slovo "l" na poziciji 2var mojstring="Hello World";trace(mojstring.toUpperCase())trace(mojstring.toLowerCase());//pretvaranje u velika ili mala slova

Page 287: Us   3 d grafika i animacija - praktikum

274 3D grafika i animacija

var mojstring="Hello World";trace(mojstring.length);//proracun duzine stringa vraca 11 to jest duzinu stringa//Numericki operatori, funkcije i rad sa brojevimatrace(Math.ceil(6.1));//zaokruzuje na najblizi gornji broj a to je 7trace(Math.floor(7.9));//zaokruzuje na najblizi donji broj a to je 7trace(Math.max(4,3);//vraca broj 4 kao maximalni brojtrace(Math.min(4,3));//vra\’ ca 3 kao minimalni brojtrace(Math.pow(5,3));//vraca 125 kao pet na trecutrace(Math.sqrt(64));//vraca kvadratni koren a to je 8onClipEvent(load) {n = 0;radius = 100;centerX = 150;centerY = 150;}onClipEvent(enterFrame) {n += .1;this._x = Math.cos(n) * radius + centerX;this._y = Math.sin(n) * radius + centerY;}//Math.cos i Math.sin primer kako se kre\’ ce//video klip po elipsiMath.round(parseInt(42));//pretvara string 42 u broj 42Math.round(parseFloat(42,9));//pretvara string u decimalni broj 42,9trace(Math.round(parseInt("FF",16)));//pretvara hexadecimalni broj u decimalni broj//jer je drugi parametar 16a=325;trace(a.toString()+1);//pretvara brojcanu varijablu u string i daje//rezultat 3251 jer sabira stingovetrace(Math.random()*10);//vraca slucajne brojeve od 0 do 10 ali nikad 10trace(Math.random()*10+1);//vraca slucajne brojeve od 1 do 10trace(Math.floor(Math.random()*10+1));

Page 288: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 275

//vraca slucajne brojeve od 1 do 10 i//zaokruzuje ih na cele brojevetrace(Math.floor(Math.random()*5+3));//vra\’ ca slu\v cajne brojeve od 3 do 7trace(Math.floor(Math.random()*51+50));//vra\’ ca slu\v cajne brojeve od 51 do 100..51 je//po\v cetak a 50 je opseg brojevaonClipEvent(enterFrame) {this._x = Math.random()*550;this._y = Math.random()*400;}//pozicija klipa se menja u svakom sledecem frame-u ali slucajnofor(var i=0;i<50;i++) {nekiklip.duplicateMovieClip("nekiklip"+i,i);}//funkcija za stvaranje novih kopija klipa//Objekti, novi objekti kreiranje, nizoviosoba =new Object();osoba.name="Ivo";osoba.age="32";osoba.state="Hrvatska";trace(osoba.age);//kreiranje novog objekta i prikaz svojstva objektakrugkolor=new Color(nekiklip);krugkolor .setRGB(0xFF0000);//slanje boje nekom klipu..krugkolor=new Color(nekiklip);trace(krugkolor .getRGB(0xFF0000).toString(16));//preuzimanje boje nekog klipakrugkolor=new Color(nekiklip);mojobjekt=new Object();mojobjekt={ra:100,rb:255,gb:0, ba:0, bb: 0, aa: 100, ab: 0}krugkolor .setTransform(mojobjekt);//koriscenje naredbe setTransform za promenu boje objektamojdatum=new Date(2002,3,29,10,30,15,500);trace(mojdatum);//kreiranje datuma...atributi su godina,mesec,dan,//sat,minuta,sekunda i stotinka sekunde//meseci se ra\v cunaju od 0 do 11mojniz=[36,23,64,72,43];trace(mojniz[0]);//kreiranje jednostavnog niza i prikaz nultog a to je broj 36mojniz=new Array();mojniz.push(36);mojniz.push(23);

Page 289: Us   3 d grafika i animacija - praktikum

276 3D grafika i animacija

mojniz.push(64);mojniz.push(72);mojniz.push(43);trace(mojniz[0]);//isti slucaj kao iznad ovog samo sto je ovo//drugaciji nacin kreiranja nizamojniz=[36,23,64,72,43];trace(mojniz.length);//vraca duzinu niza a to je 5 elemenatamojniz=[36,23,64,72,43];trace(mojniz);a=mojniz.pop();trace(a);trace(mojniz);//trazi zadnjeg u nizu i uklanja ga sa naredbom popmojniz=[36,23,64,72,43];trace(mojniz);a=mojniz.shift();trace(a);trace(mojniz);//trazi prvog u nizu i uklanja ga sa naredbom shiftmojniz=[36,23,64,72,43];trace(mojniz);a=mojniz.unshift(15);trace(mojniz);//ubacivanje novog elementa 15 u postojeci niz//na prvo mesto sa naredbom unshiftmojniz=[36,23,64,72,43];trace(mojniz);trace(mojniz.splice(0,3));//izrezivanje elemenata niza..prvi broj govori//odakle pocinje a drugi za koliko mestamojniz=[36,23,64,72,43];trace(mojniz);trace(mojniz.splice(0,2,17));trace(mojniz);//izbacuje prva dva elementa niza i na//prvo mesto ubacuje broj 17mojniz=[36,23,64,72,43];trace(mojniz);mojniz.sort();trace(mojniz);//sortira niz od manjeg prema vecemmojniz=[36,23,64,72,43];trace(mojniz);

Page 290: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 277

mojniz.sort();mojniz.reverse();trace(mojniz);//sortiranje od veceg prema manjem..prvo//naredba sort pa onda reversemojniz=[36,23,64,72,43];trace(mojniz);druginiz=[55,66,77];trace(druginiz);noviniz=mojniz.concat(druginiz);trace(noviniz)//spajanje dva niza naredbom concatmojstring = "36 23 64 72 43";mojniz = mojstring.split(" ");trace(mojniz[0]);//pretvaranje stringa u niz sa naredbom split//i tra\v zenje nultog elementa

//CursoronClipEvent(load) {// skrivanje kursoraMouse.hide();//kretanje klipa u pravcu kursorathis._x = _root._xmouse;this._y = _root._ymouse;}

//scroll tekst//napraviti dinamicki tekst i beli kvadrat u donjem uglu//pretvoriti u crni tako da se drzi shift i dvoklik na//beli kvadrat time se omogucava skrol teksta//atribut scroll(1) govori da skrol pocinje od prvog redaon (press) {scrollText.scroll--;}on (press) {scrollText.scroll++;}//gornja skripta daje prikaz rad dva dugmeta gornji i donji//....dinamicki text scrollText koji se na ovaj nacin skroluje//formeselection.setFocus(text1);//odredjivanje pocetnog indexa objektaselection.getFocus();//saznajte gde je kursor lociran

Page 291: Us   3 d grafika i animacija - praktikum

278 3D grafika i animacija

text1.tabIndex=1;text1.tabIndex=2;//Odredjivanje indexa polja ili prebacivanja sa dugmetom tabSelection.addListener(this);this.onSetFocus = function(oldFocus, newFocus) {trace(oldFocus+","+newFocus);}//osluskivanje promene fokusa i prelaska na drugi objekttext1.restrict="0123456789";//ogranicavanje unosa samo na brojeve..isto//je i sa slovima i drugim znakovimatext1.maxChars=4;//ogranicenje na samo 4 znaka unosa

//ucitavanje web stranice i navigacijaon release() {getURL("about.html","nekiframe");}

//preloaderi ili u\v citava\v cionClipEvent(enterFrame) {if(_root.getBytesLoaded()==_root.getBytesTotal()) {_root.play();}}//u prvom frame treba biti stop(); i ubaciti sledeci// klip sa sadrzajem gore koji kontrolise da li je sve ucitanoonClipEvent(enterFrame) {bytesLoaded = _root.getBytesLoaded();bytesTotal = _root.getBytesTotal()percentLoaded = Math.round(100*bytesLoaded/bytesTotal);_root.displayText = "Loading: "+percentLoaded+"%";if (bytesLoaded == bytesTotal) {_root.play();}}

//tekstcreateTextField("myTextField",0,0,0,200,40);myTextField.text="Hello World";

Page 292: Us   3 d grafika i animacija - praktikum

Glava 9

Adobe Flash Professional CS3 -Komponente

9.1. Rad sa komponentama

Sledeći primer odnosi se na rad sa komponentama. Cilj je napraviti prozor u kome senalazi jedan ".swf" fajl. Može se učitati bilo koji ".swf". U ovom primeru korišćen je"easing.swf".

Slika 9.1. Window > Components

Page 293: Us   3 d grafika i animacija - praktikum

280 3D grafika i animacija

Potrebno je uraditi sledeće:

• Otvoriti novi radni fajl. U okviru radnog fajla otvoriti panel Components korišćenjemputanje Window > Components (slika 9.1). Izabrati komponentu Window iz grupeUser Interface (slika 9.2).

Slika 9.2. Postavljanje komponente Window

• Otvoriti tab Parameters, koji se nalazi pored taba inspektora Properties. Na mestugde je naznačeno title napisati ime "Prozor". U delu gde treba uneti putanju(contentPath) napisati "easing.swf" ili bilo koji drugi radni fajl (slika 9.3).

• Fajl sačuvati, a u okviru istog foldera kopirati fajl pod imenom "easing.swf". Fajl"easing.swf" se ne mora nalaziti u istom folderu gde se nalazi i radni fajl, ali jepotrebna drugačija putanja koja će do tog fajla voditi.

Page 294: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 281

Slika 9.3. Parameters

• Preostalo je samo pokrenuti film i videti da se animacija nalazi u okviru prozora (slika9.4). Prozor se slobodno može pomerati po pozornici i neće uticati na animacijukoja se odvija unutar njega.

Slika 9.4. Testiran film, ".swf" fajl je u okviru komponente

Flash programski alat i komponente mogu poslužiti za izgradnju kontakt formi (slika 9.5).ActionScript kod za formu nalazi se na kraju poglavlja 8.12 Animacija korišćenjemActionScript-a gde je dat spisak naredbi, petlji i funkcija i u poglavlju 14.2 Pravljenjeekrana formulara. Postupak izgradnje formi može se potražiti na Adobe-ovom sajtu:

http://www.adobe.com/support/flash/applications/creating_forms/

Page 295: Us   3 d grafika i animacija - praktikum

282 3D grafika i animacija

Slika 9.4. Forma

Page 296: Us   3 d grafika i animacija - praktikum

Glava 10

Adobe Flash Professional CS3 - Scene

10.1. Rad sa scenama

Rad sa scenama je veoma jednostavan. Scene su jako korisne za odvajanje sadržaja Flashprezentacija. Njihova svrha se posebno ispoljava kod pravljenja animiranih filmova, gdese scenama mogu odvajati promene toka animacija. Većina sajtova ili CD prezentacijau Flash-u je rađeno korišćenjem scena. Rad sa scenama će se najbolje videti kroz opisprethodno kreirane prezentacije.

Sledeći primer je prezentacija South African Airways - a. Konceptualno je osmišljena iz tridela. Prvi deo je uvodni ekran koji obaveštava o prilagođavanju rezolucije. Drugi deo jeintro prezentacije, a treći je interaktivna prezentacija (srž celokupnog Flash fajla). Svakideo je odvojen posebnom scenom. Prva scena prikazana je na slici 10.1. Ona nije ništanovo do trenutne, početne scene u kojoj se radilo tokom svih prethodnih poglavlja.

Slika 10.1. Forma

Nastavak odvijanja animacija u ovom koraku će se odvijati tek pritiskom na dugmeSTART. Dugme start ima akciju za prelazak na sledeću scenu. Međutim, pre nego što seobjasni akcija, na slici 10.2 prikazano je na koji način se otvara nova scena. Naime, pra-ćenjem putanje Window > Other Panels > Scene otvara se panel Scene (slika 10.3).

Page 297: Us   3 d grafika i animacija - praktikum

284 3D grafika i animacija

Klikom na "+" (plus) otvara se nova scena. Nova scena podrazumeva potpuno "os-veženo" okruženje, novu vremensku liniju, nove slojeve i ključne slike. Ipak, ne po-drazumeva novu biblioteku simbola.

Slika 10.2. Otvaranje panela Scene

Slika 10.3. Panel Scene: 1. Dupliranje scene;2. Kreiranje nove scene; 3. Brisanje selektovane scene

Page 298: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 285

Slika 10.4. Akcija za prelazak na scenu "Scene 2"

Na slici 10.4 prikazan je kod kojim se pokreće druga scena (u ovom slučaju scena podimenom "Scene 2"). Broj iza imena scene predstavlja broj kadra na koji se "skače" unovoj sceni. Ukoliko bi se akcija primenila dugmetu, kôd bi izgledao na sledeći način:

on(press){gotoAndPlay("Scene 1", 1);

}

Slika 10.5. Intro

Prelazak na novu scenu pokreće novu animaciju, u ovom slučaju, pokreće se Intro prezen-tacije (slika 10.5). Po završetku animacije Intro, automatski se prelazi na scenu "Scene3", a to je glavna prezentacija (slika 10.6).

Page 299: Us   3 d grafika i animacija - praktikum

286 3D grafika i animacija

Slika 10.6. Prezentacija

Potrebno je napomenuti da se akcija za scene postavlja u okviru ključnih kadrova, navremenskoj liniji. Akcija za prelazak na novu scenu, je ništa novo, do skoka "goto" saviše navadenih parametara unutar zagrada.

Page 300: Us   3 d grafika i animacija - praktikum

Glava 11

Adobe Flash Professional CS3 - Zvuk

11.1. Zvuk u pozadini

Zvuk se uvek uvozi u Flash na isti način, bilo da služi kao zvuk koji će se čuti u pozadiniili zvuk na dugmićima. Zvuk se uvozi korišćenjem Import komande (File > Import) iuvek se uvozi u biblioteku simbola (File > Import > Import to Library).

Cilj ovog primera je uvoženje zvuka koji će se neprekidno odvijati (loop) kao muzika upozadini.

Za početak, najvažnije je uzimanje sekvence zvuka. Tačnije, potrebno je pronaći kvalitet-nih 10-ak ili 20-tak sekundi koji će se bez seckanja odvijati u pozadini.

Otvoriti novi radni fajl i korišćenjem putanje za uvoženje, uvesti zvuk u biblioteku simbola.Potom otvoriti nov sloj, a zatim selektovati ključni kadar sloja i prebaciti zvuk iz bibliotekesimbola na pozornicu.

Može se dodati novi kadar (Insert Frame) na 40. kadru, na primer, da bi se video deozvuka (slika 11.1).

Slika 11.1. Zvuk na sloju

Film se može pokrenuti i čuti odvijanje zvuka. Da bi se zvuk odvijao neprekidno (loop)potrebno je selekovati prvi ključni kadari u okviru inspektora Properties u delu Soundizabrati "zvuk", a potom u delu Sync izabrati Start i Loop (slika 11.2).

Page 301: Us   3 d grafika i animacija - praktikum

288 3D grafika i animacija

Slika 11.2. Loop

11.2. Zvuk na dugmićimaZa ovu vežbu neophodno je napraviti simbol tipa dugme (Button) ili uzeti već postojećiiz biblioteke Common Libraries.

Potom uvesti u Flash zvuk (Import to Library). Obično se za zvukove na dugmićimauzimaju sekvense u trajanju od sekund ili dva.

Zatim je potrebno otvoriti dugme duplim klikom i izmeniti sledeće :

• Tekstualni deo koji nosi neki naziv postaviti vidljivim samo na Over stanju. U tekstboks ukucati "zvuk".

• Otvoriti nov sloj iznad već postojećih slojeva, dati mu ime "zvuk", postaviti ključnikadar na Over stanje i iz biblioteke simbola prevući zvuk na scenu. Sada se zvuknalazi na stanju Over (slika 11.3).

Slika 11.3. Zvuk na dugmetu

Page 302: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 289

Film se može pokrenuti. Zvuk se čuje prilikom prelaska miša preko dugmeta. Zvuk možena isti način biti postavljen na sva tri stanja (izuzev Hit jer tamo nije potreban).

11.3. "on/off" primer

Pažljivo pratiti sledeće korake:

• Formirati dva sloja sa po dva ključna kadra. Prvi rezervisati za akcije, a drugi zadugmiće (slika 11.4).

Slika 11.4. Slojevi sa ključnim kadrovima

• Iskoristiti primer player-a, iz poglavlja posvećenom radu sa bitmapama. Ubaciti ujedan isečak filma, radi lakšeg kopiranja player-a u novi fajl.

• Postaviti player na oba ključna kadra.

Slika 11.5. Lokacija zvuka

Page 303: Us   3 d grafika i animacija - praktikum

290 3D grafika i animacija

• Uvesti zvuk u biblioteku simbola. Zvuk se uvozi iz eksternog fajla koji se nalaziu folderu sa radnim fajlom (slika 11.5). Desnim klikom na zvuk izabrati Linkagei selektovati ("čekirati") Export for ActionScript. Sada će se zvukom manipulisatipreko ActionScript-a i to bez njegovog prebacivanja na pozornicu (slika 11.6).

Slika 11.6. Linkage

• Postaviti labele play i stop na prvoj i drugoj ključnoj slici prvog sloja.

• Zatim sledi kôd. Za početak postaviti na oba ključna kadra prvog sloja kôd:

stop();

a potom, na prvom ključnom kadru, ispod prethodne linije koda, uneti sledeći kôd:

my_sound = new Sound();my_sound.attachSound("zvuk");my_sound.start(0,1000);

Page 304: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 291

• Sada sledi kod za dugmiće. Na prvom ključnom kadru drugog sloja selektovatidugme stop i u panelu Actions, uneti sledeće linije koda (slika 11.7):

on (release) {_root.my_sound.stop();_root.gotoAndStop("stop");

}

Slika 11.7. Dugme Stop

Slika 11.8. Dugme Play

Page 305: Us   3 d grafika i animacija - praktikum

292 3D grafika i animacija

• Slično je i za dugme play na drugom ključnom kadru drugog sloja (slika 11.8):

on (release) {_root.my_sound.start(0,1000);_root.gotoAndStop("play");

}

Slika 11.9. Load Sound

• Sledeće što treba uraditi jeste podesiti da equalizer stane svaki put kada se pritisnestop dugme. To se postiže davanjem Instance name "eqv" i unošenjem sledeće linije(slika 11.9):

stop();my_sound = new Sound();my_sound.attachSound("zvuk");my_sound.start(0,1000);eqv.play();,

na prvom ključnom kadru prvog sloja i:

stop();eqv.stop();

na drugom ključnom kadru prvog sloja.

• Na kraju treba rešiti problem sa dugmićima. Zapravo, želi se postići efekat dakada muzika teče, plavim bude dugme stop, kao oznaka da je aktivno, a kada je

Page 306: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 293

zaustavljena da plavim bude dugme play. To se postiže modifikovanjem ova dvadugmeta tako što će im plavo stanje biti Up stanje unutar dugmeta. Mogu sepraviti i novi dugmići, a može se postaviti da se nalaze na kadrovima drugog sloja(u plavom stanju) samo tamo gde su potrebni (slika 11.10).

Slika 11.10. Promene stanja dugmeta

Page 307: Us   3 d grafika i animacija - praktikum

294 3D grafika i animacija

Neki Flash sajtovi

Page 308: Us   3 d grafika i animacija - praktikum

Glava 12

Adobe Flash Professional CS3 - Video

12.1. Import videa

Rad sa videom u Flash-u omogućen je na više načina i to kroz uvoženje videa, izvoženjeili korišćenje ".swf" fajla sa videom za potrebe drugih Flash prezentacija.

Prva opcija koja će biti obrađena u ovom poglavlju jeste Import, odnosno uvoženje videau Flash radni fajl.

Video se u Flash radni fajl uvozi korišćenjem putanje File > Import > Import Video(slika 12.1).

Slika 12.1. Import Video

Page 309: Us   3 d grafika i animacija - praktikum

296 3D grafika i animacija

Pojavljuje se "čarobnjak za uvoženje" pomoću koga se vrši odabir konkretnog videa,izgleda player-a i mnoge druge opcije.

• Flash čuva video u biblioteci aktivnog dokumenta.

• Selektuje se opcija za lokaciju video fajla. Ukucati putanju ili kliknuti Browse dase ručno locira video fajl (slika 12.2). Ako je video na udaljenom serveru, ukucatiURL.

Slika 12.2. Browse Video

• Klikne se Continue.

• Izabrati metod objavljivanja iz neke od sledećih opcija (slika 12.3):

– Progressive download from a Web server. Postupno preuzimanje sa webservera

– Stream from Flash Video Streaming Service (FVSS). Striming iz servisaza Flash Video striming

– Stream from Flash Communication server. Striming sa Flash Communi-cation servera

– Embed video in SWF and play in Timeline. Ugradi video u ".swf" i repro-dukuj u vremenskoj zoni

– Linked QuickTime video for publishing to QuickTime. Linkovan (pove-zan) video za objavljivanje u QuickTime.

Page 310: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 297

Slika 12.3. Import Video

Slika 12.4. Import Video

• Klikne se Continue.

Page 311: Us   3 d grafika i animacija - praktikum

298 3D grafika i animacija

Slika 12.5. Import Video

Slika 12.6. Import Video

• Opcije variraju u zavisnosti od metode objavljivanja:

– Stream from Flash server or progressive download. Ako video nije u

Page 312: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 299

".flv" formatu, koristiti Encoding panel (slika 12.4) da se selektuje profil, iseče,trimuje i razdvoji video klip.

– Embedded fajl. Selektuju se opcije za ugrađivanje (u vremenski tok, ili kaofilmski klip ili grafički simbol), dekodiranje i obrada (što obuhvata i kompresiju)videa.

– Linked QuickTime. Selektuju se opcije za vezu ka spoljnom video fajlu.

• Opcije variraju u zavisnosti od metoda objavljivanja, selektovati po želji.

• Klikne se Continue.

• Klikne se Finish.

• Flash će automatski napraviti ".flv" komponentu i postaviti je u aktivni sloj vre-menskog toka.

• Klikne se meni Control, i zatim na Test Movie da bi se video konačni izgled fajla.

Kada se video uveze (slika 12.7) pojavljuje se player na pozornici. Film se sada možepokrenuti kako bi se video uveženi video. Kontrole na player-u su standardnog izgleda ifunkcija.

Slika 12.7. Import Video

12.2. Export videa

Sledeća opcija je Export, odnosno, izvoženje filmova za potrebe montaže ili prikaza unekom od programa koji ne radi sa ".swf" tipom fajla. Najčešće korišćeni tipovi su:

• .avi

• .gif (animirani)

Page 313: Us   3 d grafika i animacija - praktikum

300 3D grafika i animacija

• .ai (sekvenca slika)

• .mov (QuickTime)

Do ovih opcija se dolazi praćenjem putanje File > Export > Export Movie (slika12.8).

Slika 12.8. Export Movie

12.2.1. Izvoz (exporting) u vidu QuickTime videa

U Flash-u je lako eksportovati Flash dokument kao QuickTime video upotrebom okvira zadijalog QuickTime Export Settings. Po standardnom podešavanju, Flash pravi QuickTimevideo celog izvornog dokumenta sa istim dimenzijama. Međutim, mogu se izmeniti opcijeeksportovanja. U okviru za dijalog QuickTime Export Settings mogu se podesiti dimenzijefilma, ignorisati boja pozornice, navesti kada da se prekine eksportovanje i gde smestitiprivremene podatke, i podesiti napredna QuickTime podešavanja. Napredna QuickTimepodešavanja su podešena za optimalan plejbek. Međutim, ako postoji iskustvo u korišćenjuaplikacije QuickTime, mogu se podesiti napredna podešavanja da se prilagode rezultatukoji se želi.

Eksportovanje kao QuickTime video vrši se:

• Klikne se meni File, zatim na Export i zatim Export Movie (slika 12.9).

Page 314: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 301

Slika 12.9. Odabir tipa fajla

• Klikne se na strelicu liste Save As Type, a zatim na QuickTime.

• Ukuca se ime novog fajla.

• Označi se lokacija direktorijuma u kom se želi sačuvati dokument.

• Otvara se okvir za dijalog QuickTime Export Settings.

Slika 12.10. QuickTime Export Settings

• Navesti širinu i visinu u pikselima za QuickTime video.

• Da bi se zadržao isti odnos širine i visine, selektuje se polje za potvrdu MaintainAspect Ratio

• Da bi se napravio alfa kanal upotrebom boje pozornice, selektuje se polje za potvrduIgnore Stage Color (Generate Alpha Channel).

• Alfa kanal se kodira kao prozirna traka, koja omogućava da se prekrije eksportovaniQuickTime film preko drugog sadržaja i na taj način izmeni boja pozadine ili scene.

Page 315: Us   3 d grafika i animacija - praktikum

302 3D grafika i animacija

• Klikne se na opciju When Last Frame Is Reached ili Alter Time Elapsed i zatim senavede željeno vreme u formatu (hh : mm : ss.msec) gde je "hh" sat, "mm" suminute, "ss" su sekunde, a "msec" su milisekunde.

• Klikne se opcija In Memory ili On Disk da bi se odredilo gde se žele smestiti privre-meni podaci.

• Klikne se QuickTime Settings. Selektuje se polje za potvrdu Video, a zatim kliknena dugmad da se odredi gde se žele napraviti izmene u opcijama za video.

– Settings. Vrsta kompresije videa, kvalitet, broj kadrova u sekundi i tempoprenosa podataka.

– Filter. Video filter, kao što je blur (zamućenje), emboss (graviranje), sharpen(izoštravanje) i specijalne efekte.

– Size. Standardna veličinu kao što je TSC, PAL itd.

• Selektuje se polje za potvrdu Sound, a zatim klikne na dugmad gde se želi napravitiizmena u opcijama za zvuk.

– Settings. Selektuje se kompresija zvuka, frekvencija uzorkovanja, broj bitovai upotreba (mono ili stereo)

Slika 12.11. Movie Settings

• Da se optimizuje za Internet striming, izabrati polje za potvrdu Prepare For InternetStreaming, a zatim na željenu opciju.

• Klikne se OK.

• Klikne se Export.

• Nakon završetka, klikne se OK.

Page 316: Us   3 d grafika i animacija - praktikum

Glava 13

Adobe Flash Professional CS3 - Publish

Kada se jednom odredi na koji način će projekat biti objavljen, vreme je da se dopustiFlash-u da pomogne u vezi sa svim detaljima o tome kako dovesti projekat od konceptado izlaznog fajla koji odgovara potrebama. Flash-ova podešavanja za objavljivanje idumnogo dalje od pretvaranja izvornog Flash fajla (".fla") u objavljeni film (".swf").

13.1. Podešavanje parametara (Publish Settings)

Parametri se podešavaju na sledeći način:

• Otvoriti izvorni Flash dokument.

• Generička podešavanja za objavljivanje su inicijalno vezana za određeni Flash fajl.

Slika 13.1. Putanja do Publish Preview za brži pregled

Page 317: Us   3 d grafika i animacija - praktikum

304 3D grafika i animacija

• Klikne se meni File, a zatim Publish Settings (13.2).

Slika 13.2. Publish Settings

• Selektuje se ili obriše polje za potvrdu da se omogući ili onemogući podešavanjeobjavljivanja.

• Ukucati ime za pojedinačne opcije u polju za unos imena fajla.

• Da bi se vratila imena na standardno podešavanje, klikne se dugme Use DefaultNames.

• Standardno ime se odnosi na ime izvornog dokumenta.

• Klikne se OK da se sačuvaju promene.

Kada se objavi Flash film, promene se odnose samo na objavljeni ".swf" dokument, nikadna ".fla" izvorni dokument. Ako se obriše ili pogrešno postavi izvorni ".fla" dokument,nikada se neće moći ponovo obraditi ili objaviti film.

13.2. Promena fokusa Flash dokumenta

Flash dokumenti su interaktivni i raznovrsni. Na primer, može se napraviti dokument kojisadrži sofisticirana interaktivna dugmad, audio i video, sve to u okviru malog prostora.

Page 318: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 305

Uz sve to, može se izmeniti fokus dokumenta ili se kretati iz Flash-a u drugu aplikaciju.Na primer, može se promeniti fokus nekog Flash dokumenta pomeranjem na neku HTMLstranu, ako postoji mogućnost da se naprave Flash dokumenti koji bukvalno mogu dadosegnu sve što je potrebno da se obavi posao. U ovom primeru, koristiće se komponentaFlash dugmeta da bi se promenio fokus sa Flash dokumenta na odredenu web stranu. Uovom projektu napraviće se interaktivni Flash dokument koji omogućava korisniku da sepomeri na drugi dokument ili web stranu klikom na dugme.

• Napraviti tri sloja vremenskog toka (slika 13.3). Odozgo naniže imenuju se slojevi:actions, content i focus.

Slika 13.3. Slojevi: actions, content, focus

• Selektovati sloj content i napraviti probnu stranu. U ovom primeru prikazan je tekstkoji obaveštava korisnika šta da radi (slika 13.4)

Slika 13.4. Probna strana

Page 319: Us   3 d grafika i animacija - praktikum

306 3D grafika i animacija

• Selektovati sloj focus

• Otvoriti panel Components, raširiti opciju User Interface (slika 13.5) i prevući napozornicu jednu kopiju komponente dugme.

Slika 13.5. User Interface i Component Inspector

• Otvoriti panel Component Inspector (slika 13.5), kliknuti karticu Parameters i iz-meniti naziv dugmeta u Enter Adobe.

Slika 13.6. Instance Name mMedia

• Selektovati instancu dugmeta na pozornici, otvoriti Properties Inspector i dati imeinstanci dugmeta: mMedia (slika 13.6).

• Selektovati kadar 1. sloja actions, otvoriti panel Actions i ukucati (slika 13.7) sledećiActionScript kôd:

this.onSetFocus=function () {if(_global.screenMode=="window")

fscOlTlTIand("fullscreen", "true");_global. screenMode="fullscreen";

Page 320: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 307

}}this.onMouseDown=this.onSetFocus;fsconrnand("fullscreen", "true");

_global. screenMode=" fullscreen" ; this. showUrl=function() {

URL( " http://I’MW . adobe .com");_global. screenMode= "window";fsconrnand ("fullscreen" , "false");}

mMedia. addEventListener ( "click", this.showUrl);

Slika 13.7. ActionScript kôd

• Kliknuti meni Control, a zatim Test Movie.

Page 321: Us   3 d grafika i animacija - praktikum

308 3D grafika i animacija

Neki Flash sajtovi

Page 322: Us   3 d grafika i animacija - praktikum

Glava 14

Adobe Flash Professional CS3 - Upotrebanaprednih funkcija

Flash CS3 Professional je napravljen i prilagođen naprednom web dizajneru. On obe-zbeđuje alate za upravljanje projektima koji omogućavaju optimizaciju toka rada međučlanovima web tima. Uz to, vizuelno razvojno okruženje čini dizajniranje Flash aplikacijajednostavnijim. Tome se mogu dodati mogućnosti izvoženja Flash filmova u FLV (FlashVideo File) format, napredne video funkcije, komponente za povezivanje aplikacija i upravl-janje zvukom i ukupno, dobija se program skrojen prema najzahtevnijim Flash dizajnerima.

Flash omogućava da se naprave dve različite vrste ekrana u okviru aktivnog dokumenta:ekran sa slajdom ili ekran sa formularom. Slajd prezentacija upotrebljava ekran saslajdom, a Flash formular aplikacija upotrebljava ekran sa formularom kao standardnuvrstu ekrana. Ako se pravi Flash dokument sa kombinacijom slajdova i formulara, postojimogućnost da se kombinuju obe vrste ekrana unutar jednog Flash dokumenta. Kada seupotrebljava ekran, prave se složene aplikacije bez upotrebe višestrukih kadrova i slojeva uglavnom vremenskom toku. U stvari, ekranske aplikacije mogu se napraviti bez upotrebeglavnog vremenskog toka. Kada se napravi dokument sa slajdovima ili formularima, Flashotvara dokument tako da je glavni vremenski tok sažet, a dodavanje slajdova ili kompo-nenti formulara vrši se upotrebom kontrolnog okvira za dijalog, smeštenog levo od prozoradokumenta.

Ako se razvija sadržaj za mobilne uređaje, mogu se upotrebiti Flash šabloni (templates)kao pomoć pri pravljenju dokumenta i Adobe Device Central CS3 kao pomoć pri testiranju.Adobe Device Central omogućava testiranje sadržaja na raznovrsnim mobilnim uređajima.Flash koristi pogodna podešavanja iz Device Central-a da bi napravio sadržaj koji se želi.

14.1. Pravljenje sjald prezentacije

Funkcija Slide Screen omogućava pravljenje Flash dokumenata upotrebom sadržaja u jed-nom nizu, kao na primer, slajd-šou. Standardno ponašanje ekrana omogućava posetiocuda se kreće među ekranima upotrebom strelica na tastaturi. Ovo se postiže automatskimpridruživanjem key objekta tastaturi posetioca. Za povećanje funkcionalnosti, redosledni

Page 323: Us   3 d grafika i animacija - praktikum

310 3D grafika i animacija

ekrani se zapravo mogu preklapati, tako da prethodni ekran ostane vidljiv dok se gledanaredni ekran.

Podešavanja su sledeća:

• Klikne se meni File, zatim New.

• Klikne se kartica General.

• Klikne se Flash Slide Presentation (slika 14.1).

Slika 14.1. Flash Slide Presentation

• Klikne se OK.

• Napravi se ili selektuje pozadina za slajd-šou (slika 14.2), a zatim je postavi naglavnu stranu prezentacije (opciono).

• Selektuje se slide1

• Prevući sliku iz biblioteke na pozornicu slide1 ili se klikne meni File, pa Import dase selektuje i uveze neka slika iz spoljnog izvora.

Grafik nije jedini element koji se može postaviti na slajd. Mogu se postaviti video klipovi,Flash filmski klipovi i zvuk. Animacije, video ili audio fajlovi će se pokrenuti kada posetilacklikne da pristupi slajdu.

• Zatim se klikne na dugme Delete Screen (-) da se ukloni slajd iz skupa.

• Klikne se i prevuče slajd gore ili dole da bi se izmenio redosled slajdova u nizu.

• Klikne se meni Control, pa Test Movie.

Page 324: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 311

• Upotrebiti strelicu levo i desno na tastaturi za kretanje kroz slajdove

Slika 14.2. Postavljanje pozadine

Slika 14.3. Postavljanje slide1

Page 325: Us   3 d grafika i animacija - praktikum

312 3D grafika i animacija

Slika 14.4. Postavljanje slide2

Slika 14.5. Postavljanje slide3

Page 326: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 313

Slika 14.6. Postavljanje slide4

Na slikama od 14.3 do 14.6 priazano je postavljanje četiri slajda.

Ako se klikne desnim tasterom miša na neki slajd, može se izabrati ubacivanje ugnježđenogekrana. Ugnježđeni ekrani su uvek vidljivi, ali se pojavljuju sivi u toku prikaza.

14.2. Pravljenje ekrana formulara

Flash Professional omogućava da se napravi ekran formulara za dokumente, kao što suonline registracioni formulari ili formulari za e-trgovinu. Ekrani formulara su u stvarispremnici kojima se pravi struktura i organizacija aplikacije bazirane na formularima. Ekranformulara ima funkcionalost napravljenu za nelinearnu aplikaciju baziranu na formularima,sa višestrukim opcijama dostupnim u jednom vidljivom prostoru. Ekrani formulara semogu upotrebiti kada se želi upravljati vidljivišću pojedinih ekrana. Na primer, formulari semogu koristiti za pravljanje interaktivnih pretrazivača ili interaktivnih formi za prikupljanjepodataka.

Formulari se prave na sledeći način:

• Klikne se meni File, a zatim New.

• Klikne se karticu General.

• Klikne se Flash Form Application (slika 14.7).

Page 327: Us   3 d grafika i animacija - praktikum

314 3D grafika i animacija

Slika 14.7. Flash Form Application

Slika 14.8. Postavljanje forme

• Klikne se OK.

• Na ovaj način se pravi standardna aplikacija sa dva ugnježđena ekrana formulara.

Page 328: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 315

Slika 14.9. Postavljanje form1

Slika 14.10. Postavljanje form2

Page 329: Us   3 d grafika i animacija - praktikum

316 3D grafika i animacija

• Postaviti pozadinu formularima pravljenjem direktno u Flash-u ili upotrebom grafi-čke slike (opciono).

• Selektovati form1.

• Postaviti komponente korisničkog okruženja (User Interface) za form1.

• Klikne se dugme Insert Screen (+).

• Ubaciti komponente dugmadi na drugi ekran, a zatim upotrebiti panel ComponentInspector za povezivanje dugmadi sa formularom.

• Klikne se meni Control, a zatim Test Movie.

Na slikama od 14.8 do 14.10 prikazano je postavljanje forme.

14.3. Pravljenje sadržaja za mobilni uređaj

Razvoj Flash sadržaja se širi sa Web-a na druge medijume, kao što su mobilni telefoni, PDAuređaji i ostali mobilni uređaji. Zajedno sa Adobe Device Central CS3, Flash omogućavada se napravi i testira sadržaj za mobilne uređaje. Korišćenje okvira za dijalog New Doc-ument za pravljenje praznog Flash dokumenta za mobilne uređaje ili jedan od dostupnihšablona. Flash se isporučuje opremljen sa bibliotekom šablona mobilnih telefona i PDAkorisničkih okruženja u sledećim kategorijama: BREW Handestes, Consumer Devices iGeneral Handsets. Svaki šablon daje kratak opis podrške za uređaj i rezolucije ekrana.Flash koristi odgovarajuća podešavanja iz Device Central-a da bi napravio željeni sadržaj.Da bi se prikazao sadržaj na mobilnom uređaju, Flash koristi Flash Lite, specijalizovanplayer za mobilne uređaje. Nakon što se napravi mobilni sadržaj, može se testirati upotre-bom Adobe Device Central-a i Flash Lite-a.

Podešavanja su sledeća:

• Klikne se meni File, zatim New.

• Ispraviti instrukcije za vrstu mobilnog Flash fajla (slike 14.11 i 14.12):

– Blank (prazan). Kliknuti karticu General, zatim Flash File (Mobile).

– Template (šablon). Kliknuti karticu Templates, selektovati kategoriju mobil-nih šablona, a zatim selektovati šablon.

• Kliknuti OK.

• Ako se selektuje prazan Flash File (Mobile), otvara se Adobe Device Central CS3,gde se može odabrati uređaj za bilo koju željenu opciju.

• Izabrati uređaj po želji i proveriti profil uređaja što se tiče podrške i kompatibilnosti.

• Kliknuti Create.

Page 330: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 317

Slika 14.11. Flash File (Mobile)

Slika 14.12. Templates

U Flash-u se pojavljuje novi dokument, gde se može razvijati sadržaj (slika 14.13).

Na slikama 14.14 i 14.15 prikazano je okruženje Adobe Device Central CS3, kao i opcijeza otvaranje novog dokumenta i profili uređaja.

Page 331: Us   3 d grafika i animacija - praktikum

318 3D grafika i animacija

Slika 14.13. Flash File (Mobile) okruženje

Slika 14.14. Adobe Device Central CS3

Slika 14.15. Device Profiles i New Document

Page 332: Us   3 d grafika i animacija - praktikum

Glava 15

Adobe Flash Professional CS3 - Primeri izprakse

Fakultet za informatiku i menadžment, Singidunum Univerzitet, na smeru za računarskugarfiku i dizajn ima cilj pružanja funkcionalnog znanja. Ipak, od studenata se dosta za-htevalo da misle i o konceptu.

Koncept jedne Web prezentacije klasifikuje istu kao dobru ili lošu. Prezentacija neće bitivisoko ocenjena ako ima najmoćnije 3D animacije, a da to nije podržano konceptom.Definiše se:

"Koncept je težnja održavanja određene pozicije, značenje reči u određenom kon-tekstu, apstrahovanje realnosti u našim mislima, kao i njeno simbolično predstav-ljanje. Reči koje su sinonimi zagovaraju isti koncept. Kada kažemo za dve rečeniceda su sinonim jedna drugoj, onda možemo reći da je njihova namena da održepoziciju iste namere. Koncept se često analizira u kontekstu složenih formi ilirasporeda, ili čak načina razmišljanja, delovanja, i mogu imati za rezultat različitaznačenja".

Slično kampanjama, kada se pristupa izradi prezentacije formiraju se grupe koje postav-ljaju ciljeve kao i načine za njihovu realizaciju. Među njima, najznačajniji je šta se želiporučiti ili koje se osećanje želi izazvati jednom prezentacijom.

Kada se postave ciljevi, posmatra se delatnost koju treba izbaciti u prvi plan. Ispunjeniciljevi, obojeni delatnošću kompanije, a začinjeni humorom čine jedan dobar koncept Webprezentacije.

Primeri Web prezentacija na Internetu (slika 15.1):

• www.a-to-s.com

• www.ilustris.pl

• www.lowetesch.com/showroom/saab/animalvision

Page 333: Us   3 d grafika i animacija - praktikum

320 3D grafika i animacija

Slika 15.1. Primeri koncept sajtova

15.1. Primeri studenata

Zadatak studenata iz predmeta "3D grafika i animacija" (IV godina) je Flash prezentacijavizuelnog identiteta kompanije. Izrada logotipa i vizuelnog identiteta bio je zadatak nižegodine studija (III) u okviru predmeta "Osnovi grafičkog dizajna".

Među izabranim primerima nalaze se oni koji imaju dobar koncept. Primeri su rađeniškolske 2004/2005, 2005/2006 i 2006/2007 godine. To su:

• CREME - proizvodnja konditorskih proizvoda, Stefan Bogdanović (slika 15.2)

• EQVIBO - hipodrom, Aleksandar Popov (slika 15.3)

• MITROPUT - projektovanje objekata i puteva, Vladimir Bjelobrk (slika 15.4)

• SATEL NET - internet provajder, Goran Vasić (slika 15.5)

• VISOKI OBLAK - produkcijska kuća, Sanja Drakulić (slika 15.6)

Page 334: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 321

Slika 15.2. Creme

Slika 15.3. Eqvibo

Page 335: Us   3 d grafika i animacija - praktikum

322 3D grafika i animacija

Slika 15.4. Mitroput

Slika 15.5. SatelNet

Page 336: Us   3 d grafika i animacija - praktikum

Adobe Flash Professional CS3 - Samostalne vežbe 323

Slika 15.6. Visoki Oblak

15.2. TheFwa - Favourite Website Awards

TheFWA ili Favourite Website Awards je popularno nazvan "sajt o sajtovima" zbogsvoje ogromne uloge koju ima kada su Flash Prezentacije u pitanju. Zbog izuzetnihideja koje je "prikupio", sajt predstavlja omiljenu destinaciju dizajnerima i developerima.TheFWA je objavio preko 25 miliona sajtova od 2000. godine kada je ova organizacijaosnovana. Od tada, ovaj sajt je najposećeniji na svetu.

TheFWA nagrađuje na milione sajtova. Postoje različite kategorije i nominacije. Nagradesu bazirane na dnevnom, mesečnom i godišnjem nivou. Značajan je uspeh dobiti nagraduTheFWA organizacije za sajt dana.

Većina poznatih dizajnera, animatora ili programera, koji se, između ostalog, interesuju zaFlash animacije i programiranje u ActionScript-u, inspiraciju upravo traži na ovom sajtu:www.thefwa.com.

Page 337: Us   3 d grafika i animacija - praktikum

324 3D grafika i animacija

Slika 15.7. The FWA

Page 338: Us   3 d grafika i animacija - praktikum
Page 339: Us   3 d grafika i animacija - praktikum
Page 340: Us   3 d grafika i animacija - praktikum

Glava 1

Flash 8 - Samostalne vežbe

U ovom delu praktikuma biće prikazano 25 vežbi koje korisnik može da odradi sâm. Nekoposebno predznanje ne treba za izradu ovih vežbi, ali se podrazumeva da korisnik znaosnovne stvari vezane za program Macromedia Flash Professional 8 i njegov interfejs.

1.1. Efekat gradijentne ispune entiteta

Kreiranje statičke gradijentne ispune unutar programa Flash je jednostavno. Kreće se odotvaranja novog dokumenta unutar programa Flash Professional 8.

1. korakTreba startovati komandu Oval Tool i nacrtati proizvoljnu kružnicu. Uobičajeno je da ćese entitet ispuniti trenutno aktivnom bojom ispune (polje Fill Color u oblasti Colorsu palati sa alatima uz levu ivicu ekrana). U ovom slučaju to je crvena boja (slika 1.1).

2. korakDa bi se pristupilo informacijama o bojama i o ispunama postoji nekoliko načina. Jedan odnačina da se aktivira panel Color putem Window > Color Mixer ili da se pritisne kom-binacija tastera sa tastature Shift+ F9. Kao rezultat pojavljuje se panel pod pomenutimnazivom uz desnu ivicu ekrana (slika 1.1). Način ispune nacrtanog entiteta zaokružen jena slici 1.1.

3. korakDa bi se napravila gradijentna linearna ispuna treba markirati (selektovati) nacrtanukružnicu i treba izabrati opciju Linear iz polja Type u panelu Color (zaokruženo jeelipsom na slici 1.2).

4. korakTreba izabrati boje koje će učestvovati u linearnoj raspodeli i to se obavlja dva puta brzimpritiskom levim tasterom miša na markere na liniji preraspodele boja u donjem delu panelaColor (zaokruženi su dva markera malim kružnicama na slici 1.2). Kao rezultat pojavljujese dijalog sa ponuđenim bojama (slika 1.2) i korisnik treba da izabere željene boje za li-

Page 341: Us   3 d grafika i animacija - praktikum

326 3D grafika i animacija

nearnu gradijentnu ispunu entiteta (slika 1.2). Promena raspodele boja u gradijentnojispuni obavlja se promenom položaja pomenutih markera.

Slika 1.1. Ispuna kružnice jednom bojom

Slika 1.2. Ispuna kružnice gradijentnim linearnim prelazom

Page 342: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 327

5. korakDa bi se napravila gradijentna radijalna ispuna treba markirati (selektovati) nacrtanukružnicu i treba izabrati opciju Radial iz polja Type u panelu Color (zaokruženo jeelipsom na slici 1.3). Procedura je identična kao za linearnu gradijentnu ispunu.

Slika 1.3. Ispuna kružnice gradijentnim radijalnim prelazom

6. korakDa bi se napravila ispuna fotografijom (bitmapom) treba markirati (selektovati) nacrtanukružnicu i treba izabrati opciju Bitmap iz polja Type u panelu Color (zaokruženo jeelipsom na slici 1.4). Pritiskom na taster Import omogućava se potraga za slikom nadisku. Kada se izabere fotografija automatski se njom ispunjava entitet, a ona se ubacujeu donji deo panela Color, kao njegov deo.

Slika 1.4. Ispuna kružnice bitmapom (fotografijom)

Page 343: Us   3 d grafika i animacija - praktikum

328 3D grafika i animacija

7. korakAko ima više učitanih fotografija u ovom panelu, onda se jednostavnim markiranjem nekeod njih ispunjava markirani entitet. Ako je neka fotografija u panelu višak, onda se tafotografija markira, pritiskom na desni taster miša aktivira se kontekstni meni i iz njegase aktivira komanda Delete. Na taj način se fotografija briše iz liste unutar panela.

8. korakKorisniku je ponuđeno da izabere i predefinisane linearne gradijentne ispune. Da bi se ak-tivirala ovakva gradijentna ispuna treba markirati (selektovati) nacrtanu kružnicu i trebaaktivirati taster Fill Color u panelu Color (označen je strelicom i to je taster sa nacr-tanom kanticom sa bojom, slika 1.5).

Slika 1.5. Ispuna kružnice ponuđenom gradijentnom ispunom u obliku duge

9. korakPosle aktiviranja pomenutog tastera otvara se dijalog za izbor boje. U donjem levomdelu postoje ikonice sa predefinisanim načinima ispune i kursorom miša u obliku pipete(zaokruženo na slici 1.5) treba izabrati linearnu gradijentnu ispunu u obliku duge. Marki-rani entitet se automatski ispunjava izabranim načinom ispune (kružnica na slici 1.5).

10. korakPromena raspodele boja u gradijentnoj ispuni obavlja se promenom položaja markera(zaokruženi su malim kružnicama u panelu Color na slici 1.5).

11. korakPromena raspodele boja u gradijentnoj ispuni može da se obavi i aktiviranjem komande

Page 344: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 329

Paint Bucket Tool (K) sa palete sa alatima uz levu ivicu ekrana (nacrtana je kanticasa bojom na pripadajućoj ikonici). Ova komanda može da se aktivira i pritiskom na tasterK. Promena boja vrši se mišem i to sa stalno pritisnutim levim tasterom miša.

12. korakPored pomenute gradijentne ispune u obliku duge ponuđena je još jedna zanimljiva is-puna prikazana na slici 1.6. Procedura je identična kao kod gradijentne ispune sa duginimbojama.

Slika 1.6. Ispuna kružnice ponuđenom gradijentnom ispunom

Ovo je bilo kratko upoznavanje sa statičkim načinima ispuna pojedinačnih entiteta.

1.2. Efekat gradijentne ispune na tekst

Kao što se videlo, kreiranje statičke gradijentne ispune unutar programa Flash je jednos-tavno. Primena gradijentne ispune na tekst je malo složenija priča, ali ne preterano. Krećese od otvaranja novog dokumenta unutar programa Flash Professional 8.

1. korakTreba startovati komandu Text Tool (T), izabrati odgovarajući font i veličinu i trebaukucati željeni tekst. U ovom slučaju ukucan je tekst GRADIJENT.

2. korakTreba markirati ukucani tekst i treba startovati komandu Modify > Break Apart iliaktivirati kombinaciju tastera Ctrl + B. Kao rezultat pojavljuje se slika 2.1.

Page 345: Us   3 d grafika i animacija - praktikum

330 3D grafika i animacija

Slika 2.1. Inicijalni tekst

3. korakOvako tretiran tekst još uvek nije vektorski objekat koji može da se uređuje, tako da trebastartovati komandu Modify > Break Apart ili aktivirati kombinaciju tastera Ctrl + B

još jednom. Kao rezultat pojavljuje se slika 2.2.

Slika 2.2. Vektorski tekst

4. korakSada može da se primeni gradijentna ispuna. Treba markirati tekst i treba izabrati opcijuLinear iz polja Type u panelu Color (zaokruženo je elipsom na slici 2.3).

Slika 2.3. Primena gradijentne ispune na tekst

Page 346: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 331

5. korakUobičajeno je da se linearna gradijenta raspodela primena na svako slovo posebno. Akokorisnik hoće da primeni tu raspodelu na celokupan tekst onda treba da startuje komanduPaint Bucket Tool (K) sa palete sa alatima uz levu ivicu ekrana (nacrtana je kanticasa bojom na pripadajućoj ikonici i zaokružena je na slici 2.3). Ova komanda može da seaktivira i pritiskom na taster K. Jedan od načina primene pomenute komande je prikazanna slici 2.3.

6. korakPored pomenute gradijentne ispune dve izabrane boje, korisnik može da tekst ispuni bo-jama koje simuliraju boje duge. Treba markirati tekst i treba izabrati opciju Linear izpolja Type u panelu Color. Posle aktiviranja pomenutog tastera otvara se dijalog za izborboje. U donjem levom delu postoje ikonice sa predefinisanim načinima ispune i kursorommiša u obliku pipete (zaokruženo na slici 1.5) treba izabrati linearnu gradijentnu ispunuu obliku duge (slika 2.4).

Slika 2.4. Dugine boje

7. korakKao rezultat primene gradijentne ispune duginim bojama sa podrazumevanim vrednostimaprikazana je slika 2.5.

Slika 2.5. Tekst u duginim bojama

1.3. Kretanje loptice

U ovom primeru biće objašnjena jednostavna animacija kretanja loptice po sceni, kao ikontrolisanje načina i brzine kretanja.

Page 347: Us   3 d grafika i animacija - praktikum

332 3D grafika i animacija

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 200 × 200 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže (slika 3.1).

Slika 3.1. Početna scena

3. korakTreba nacrtati kružnicu prečnika 60 px i ispuniti je radijalnom gradijentnom ispunom.Nacrtanu kružnicu smestiti u gornji levi ugao scene kao što je to prikazano na slici 3.1.

4. korakTreba kružnicu pretvoriti u simbol. To može da se odradi na tri načina: pritiskom na funk-cijski taster F8, aktiviranjem komande Modify > Convert to Symbol... ili pritiskomdesnim tasterom miša aktivira se kontekstni meni i iz njega treba aktivirati komanduConvert to Symbol.

5. korakTreba markirati kružnicu i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convertto Symbol i u polju pod nazivom Type treba markirati tip simbola Movie clip. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. Toje preporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno.

6. korakTreba kliknuti desnim tasterom miša na 15. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe. Treba kružnicu premestiti na proiz-voljni položaj na dno scene.

7. korakTreba kliknuti desnim tasterom miša na 30. frejm u vremenskoj liniji i iz kontekstnog

Page 348: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 333

menija treba aktivirati komandu Insert Keyframe. Treba kružnicu premestiti na proiz-voljni položaj u gornji desni ugao.

8. korakTreba kliknuti desnim tasterom miša između 1. i 15. frejma u vremenskoj liniji i iz kon-tekstnog menija treba aktivirati komandu Create Motion Tween.

9. korakTreba kliknuti desnim tasterom miša između 15. i 30. frejma u vremenskoj liniji i iz kontek-stnog menija treba aktivirati komandu Create Motion Tween. Kao rezultat se pojavljujevremenska linija prikazana na slici 3.2.

Slika 3.2. Vremenska linija sa ključnim kadrovima

10. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 3.3).

Slika 3.3. Jedan kadar animacije

11. korakBrzina animacije je ista za sve kadrove (frejmove) - na početku, u sredini i na krajukružnica se kreće istom brzinom. Jedno od rešenja je smanjenje brzine na početku.

12. korakTreba levim tasterom miša markirati 1. frejm u vremenskoj liniji. U statusnoj liniji (nadnu radnog ekrana programa) aktivna je kartica Properties, a ako nije treba aktiviratikarticu Properties (slika 3.4).

13. korakU polju pod nazivom Easing treba podesiti vrednost na −100 kao što je to prikazano naslici 3.4 (zaokruženo je polje na pomenutoj slici). Na taj način se usporava animacija napočetku.

Page 349: Us   3 d grafika i animacija - praktikum

334 3D grafika i animacija

Slika 3.4. Usporenje animacije na početku

14. korakTreba povećati brzinu kretanja kružnice kada onda udari u donju ivicu prozora. Trebalevim tasterom miša markirati 15. frejm u vremenskoj liniji. U statusnoj liniji (na dnuradnog ekrana programa) aktivna je kartica Properties, a ako nije treba aktivirati karticuProperties (slika 3.5).

15. korakU polju pod nazivom Easing treba podesiti vrednost na 100 kao što je to prikazano naslici 3.5 (zaokruženo je polje na pomenutoj slici). Na taj način se ubrzava animacija odsredine ka završetku.

Slika 3.5. Ubrzavanje animacije na sredini

1.4. Promena slova u slovo

U ovom primeru biće objašnjena jednostavna animacija pretvaranja jednog slova u drugo.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 200 × 200 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba otkucati prvo slovo u animaciji i u ovom primeru to će biti slovo I, a izabran je fontArial Black veličine 200 pt.

Page 350: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 335

4. korakTreba selektovati (markirati) tekst i aktivirati komandu Modify > Break Apart ili trebapritisnuti kombinaciju tastera Ctrl + B.

5. korakSa markiranim tekstom treba aktivirati komandu Edit > Cut (ili kombinaciju tasteraCtrl+ X), a nakon toga komandu Edit > Paste (ili kombinaciju tastera Ctrl+ V). Nataj način je tekst, najpre, premešten u klipbord, a nakon toga vraćen iz klipborda u centardokumenta (slika 4.1).

Slika 4.1. Početno slovo

6. korakTreba kliknuti desnim tasterom miša na 15. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Blank Keyframe.

7. korakTreba otkucati drugo slovo u animaciji i u ovom primeru to će biti slovo C, a izabran jefont Arial Black veličine 200 pt.

8. korakTreba selektovati (markirati) tekst i aktivirati komandu Modify > Break Apart ili trebapritisnuti kombinaciju tastera Ctrl + B.

9. korakSa markiranim tekstom treba aktivirati komandu Edit > Cut (ili kombinaciju tasteraCtrl+ X), a nakon toga komandu Edit > Paste (ili kombinaciju tastera Ctrl+ V). Nataj način je tekst, najpre, premešten u klipbord, a nakon toga vraćen iz klipborda u centardokumenta (slika 4.2).

10. korakTreba levim tasterom miša kliknuti između 1. i 15. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties (slika 4.3).

Page 351: Us   3 d grafika i animacija - praktikum

336 3D grafika i animacija

Slika 4.2. Završno slovo

11. korakU polju pod nazivom Tween treba izabrati način promene, a to je u ovom slučaju Shape,kao što je to prikazano na slici 4.3 (zaokruženo je polje na pomenutoj slici). Na taj načinse omogućava promena slova I u slovo C.

Slika 4.3. Izabran način promene

12. korakTreba levim tasterom miša markirati 1. frejm u vremenskoj liniji.

13. korakTreba startovati komandu Modify > Shape > Add Shape Hint ili aktivirati kombinaci-ju tastera Ctrl + Shift+ H. Kao rezultat pojavljuje se crveni marker sa slovom a unutarnjega.

14. korakTreba ovu komandu ponoviti još dva puta kako bi se dobila dodatna dva markera, saslovima b i c. Markere treba razmestiti po slovu I kao što je to prikazano na slici 4.4 levo.Marker a se nalazi u centru slova, marker b je "vezan" za gornje desno teme slova I, amarker c je "vezan" za donje desno teme slova I.

15. korakTreba levim tasterom miša markirati 15. frejm u vremenskoj liniji.

16. korakTreba startovati komandu Modify > Shape > Add Shape Hint ili aktivirati kombina-ciju tastera Ctrl + Shift + H. Kao rezultat pojavljuje se crveni marker sa slovom a.

Page 352: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 337

17. korakTreba napomenuti da markeri a, b i c već postoje na slovu C, samo ih treba razmestitikao kod slova I i kao što je to prikazano na slici 4.4 desno. Marker a se nalazi u centruslova, marker b je "vezan" za gornje desno teme slova C, a marker c je "vezan" za donjedesno teme slova C.

Slika 4.4. Podešavanje markera promene i za početno i za završno slovo

18. korakTreba pritisnuti Ctrl+Enter da se otvori novi prozor u kome se vidi kako teče animacija.

19. korakDa bi se postigla "glatkija" animacija treba desnim tasterom miša kliknuti na 20. frejmu vremenskoj iliniji i iz kontekstnog menija treba aktivirati komandu Insert Frame. Nataj način će slovo C biti postojano na ekranu narednih 5 frejmova. Izgled vremenske linijeprikazan je na slici 4.5.

Slika 4.5. Novi izgled vremenske linije

20. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju. Na slici4.6 prikazana su tri kadra (frejma) iz kreirane animacije pretvaranja slova I u slovo C.

Slika 4.6. Tri proizvoljna kadra iz animacije

Page 353: Us   3 d grafika i animacija - praktikum

338 3D grafika i animacija

1.5. Semafor

U ovom primeru biće objašnjena jednostavna animacija kreiranja semafora i promena sve-tala na njemu.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 60 × 180 px, kakobi se semafor uklopio u scenu.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakU aktivnom sloju pod nazivom Layer 1 treba nacrtati kućište semafora u obliku pravou-gaonika. Pravougaonik treba ispuniti proizvoljnom svetlom sivom bojom.

4. korakTreba markirati pravougaonik i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convertto Symbol i u polju pod nazivom Type treba markirati tip simbola Button. U polju podnazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. To jepreporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno.

5. korakU statusnoj liniji (na dnu radnog ekrana programa) treba aktivirati karticu Filters.Nakon toga treba protisnuti znak + i iz padajućeg menija izabrati komandu Drop Shadow.Kao rezultat pojavljuje se dijalog prikazan na slici 5.1.

Slika 5.1. Podešavanje senke

6. korakParametre senke treba podesiti kao što je prikazano na slici 5.1.

7. korakTreba desnim tasterom miša kliknuti na 15. frejm u vremenskoj iliniji i iz kontekstnogmenija treba aktivirati komandu Insert Frame. Na taj način je omogućeno da pozadinasemafora bude stalno prisutna na sceni.

Page 354: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 339

8. korakPritiskom na polje ispod ikonice sa katancem zaključava se sadržina sloja Layer 1. Pri-tiskom na ikonicu Insert Layer u donjem levom uglu dijaloga sa slojevima kreira se novisloj i dodeljuje mu se naziv Layer 2.

9. korakTreba levim tasterom miša markirati (selektovati) 1. frejm i sa stalno pritisnutim levimtasterom miša treba prevući kursor do 15. frejma. Na taj način se markiraju svi frejmoviod 1. do 15. i pritiskom na desni taster miša se aktivira kontekstni meni i iz njega trebaaktivirati komandu Convert to Keyframes. Svi kadrovi u drugom sloju su pretvoreni uključne kadrove. Izgled vremenske linije prikazan je na slici 5.2.

Slika 5.2. Vremenska linija sa dva sloja

10. korakTreba markirati (selektovati) 1. frajm i u njemu nacrtati crveno obojenu kružnicu. Takružnica predstavlja crveno svetlo na semaforu i treba je smestiti kao što je to prikazanona slici 5.3.

Slika 5.3. Konstrukcija semafora

11. korakSa markiranim 1. frejmom treba pritisnuti desni taster miša i iz kontekstnog menija trebaizabrati komandu Copy Frames. Nakon toga treba pojedinačno markirati od 2. do 5.

frejma i iz kontekstnog menija treba aktivirati komandu Paste Frames. Na ovaj načiniskopirano je crveno svetlo na semaforu i nalazi se na prvih 5 frejmova animacije. Proce-dura je krajnje jednostavna i ne treba joj neko posebno objašnjenje.

Page 355: Us   3 d grafika i animacija - praktikum

340 3D grafika i animacija

12. korakTreba ponoviti ovu proceduru za opseg od 6. do 10. frejma za žuto svetlo i za opseg od11. do 15. frejma za zeleno svetlo. Kompletan izgled semafora je prikazan na slici 5.2.

13. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 5.4).

Slika 5.4. Tri proizvoljna kadra iz animacije

14. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.6. Pretvaranje oblika u oblik

U ovom primeru biće objašnjena jednostavna animacija pretvaranja geometrijskih oblika,jedan u drugi.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 160 × 160 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakKomandom Oval Tool (O) treba nacrtati kružnicu kao početni geometrijski oblik. Izborboje ispune i boje linije je proizvoljan, kao i vrednost za širinu ("debljinu") linije konture.Mogući izgled prvog oblika u animaciji prikazan je na slici 6.1.

4. korakTreba kliknuti desnim tasterom miša na 5. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe, kako bi se zadržao prvi oblik naekranu prilikom animacije.

Page 356: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 341

5. korakTreba kliknuti desnim tasterom miša na 15. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Blank Keyframe.

Slika 6.1. Prvi geometrijski oblik

6. korakKomandom Line Tool (N) treba nacrtati odgovarajuću figuru kao drugi geometrijskioblik. Izbor boje ispune i boje linije je proizvoljan, kao i vrednost za širinu ("debljinu")linije konture. Mogući izgled drugog oblika u animaciji prikazan je na slici 6.2.

Slika 6.2. Drugi geometrijski oblik

7. korakTreba levim tasterom miša kliknuti između 5. i 15. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties (slika 6.3).

Slika 6.3. Način promene oblika

Page 357: Us   3 d grafika i animacija - praktikum

342 3D grafika i animacija

8. korakU polju pod nazivom Tween treba izabrati način promene, a to je u ovom slučaju Shape,kao što je to prikazano na slici 6.3 (zaokruženo je polje na pomenutoj slici). Na taj načinse omogućava promena prvog geometrijskog oblika u drugi.

9. korakTreba kliknuti desnim tasterom miša na 20. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe, kako bi se zadržao drugi oblik naekranu prilikom animacije.

10. korakTreba kliknuti desnim tasterom miša na 30. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Blank Keyframe.

11. korakKomandom Rectangle Tool (R) treba nacrtati pravougaonik ili kvadrat kao završnigeometrijski oblik. Izbor boje ispune i boje linije je proizvoljan, kao i vrednost za širinu("debljinu") linije konture. Mogući izgled tog oblika u animaciji prikazan je na slici 6.4,a reč je o kvadratu.

Slika 6.4. Treći geometrijski oblik

12. korakTreba levim tasterom miša kliknuti između 20. i 30. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties (slika 6.3).

13. korakU polju pod nazivom Tween treba izabrati način promene, a to je u ovom slučaju Shape,kao što je to prikazano na slici 6.3 (zaokruženo je polje na pomenutoj slici). Na taj načinse omogućava promena drugog geometrijskog oblika u treći.

14. korakTreba kliknuti desnim tasterom miša na 35. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe, kako bi se zadržao treći oblik naekranu prilikom animacije.

Page 358: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 343

15. korakTreba kliknuti desnim tasterom miša na 45. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Blank Keyframe.

16. korakSa markiranim 1. frejmom treba pritisnuti desni taster miša i iz kontekstnog menija trebaizabrati komandu Copy Frames. Nakon toga treba markirati od 45. frejm i iz kontekstnogmenija treba aktivirati komandu Paste Frames. Na ovaj način iskopirana je kružnica iz1. frejma i na taj način animacija se nadovezuje i nema prekida. Procedura je krajnjejednostavna i ne treba joj neko posebno objašnjenje.

17. korakTreba levim tasterom miša kliknuti između 35. i 45. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties (slika 6.3).

18. korakU polju pod nazivom Tween treba izabrati način promene, a to je u ovom slučaju Shape,kao što je to prikazano na slici 6.3 (zaokruženo je polje na pomenutoj slici). Na tajnačin se omogućava promena trećeg geometrijskog oblika u prvi. Izgled vremenske linijeje prikazan na slici 6.5.

Slika 6.5. Vremenska linija

19. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 6.6).

Slika 6.6. Tri proizvoljna kadra iz animacije

20. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

Page 359: Us   3 d grafika i animacija - praktikum

344 3D grafika i animacija

1.7. "Oči" unutar slovaU ovom primeru biće objašnjena jednostavna animacija gde se "oči" unutar slova O šetajulevo desno.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 200 × 100 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid.

3. korakTreba otkucati prvo slovo u animaciji i u ovom primeru to će biti reč OKO, a izabran jefont Arial Black veličine 75 pt (slika 7.1).

Slika 7.1. Početni tekst

4. korakTreba selektovati (markirati) tekst i aktivirati komandu Modify > Break Apart dva putaili treba pritisnuti kombinaciju tastera Ctrl + B dva puta.

Slika 7.2. Biranje čvorova na krivama

Page 360: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 345

5. korakTreba aktivirati komandu Subselection Tool (A) (ikonica sa belom strelicom zaokru-žena na slici 7.2). Pomoću ove komande treba pomeriti određene čvorove na slovima O,kao što se to vidi na slici 7.2. Kao rezultat primene pojavljuje se inicijalna modifikacijana slovima.

Slika 7.3. Inicijalno modifikovanje slova

6. korakTreba kliknuti desnim tasterom miša na 5. frejm u vremenskoj liniji i iz kontekstnog menijatreba aktivirati komandu Insert Keyframe.

7. korakTreba ponovo aktivirati komandu Subselection Tool (A) (ikonica sa belom strelicomzaokružena na slici 7.2). Pomoću ove komande treba pomeriti određene čvorove naslovima O, kao što se to vidi na slici 7.4. Kao rezultat primene pojavljuje se inicijalnamodifikacija na slovima.

Slika 7.4. Drugo modifikovanje slova

8. korakTreba kliknuti desnim tasterom miša na 10. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

9. korakTreba ponovo aktivirati komandu Subselection Tool (A) (ikonica sa belom strelicomzaokružena na slici 7.2). Pomoću ove komande treba pomeriti određene čvorove naslovima O, kao što se to vidi na slici 7.5. Kao rezultat primene pojavljuje se inicijalnamodifikacija na slovima.

Slika 7.5. Treće modifikovanje slova

Page 361: Us   3 d grafika i animacija - praktikum

346 3D grafika i animacija

10. korakTreba levim tasterom miša kliknuti između 1. i 5. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties (slika 7.6).

Slika 7.6. Način promene oblika

11. korakU polju pod nazivom Tween treba izabrati način promene, a to je u ovom slučaju Shape,kao što je to prikazano na slici 7.6 (zaokruženo je polje na pomenutoj slici). Na taj načinse omogućava promena prvog oblika teksta u drugi.

12. korakTreba levim tasterom miša kliknuti između 5. i 10. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties (slika 7.6).

13. korakU polju pod nazivom Tween treba izabrati način promene, a to je u ovom slučaju Shape,kao što je to prikazano na slici 7.6 (zaokruženo je polje na pomenutoj slici). Na taj načinse omogućava promena drugog oblika teksta u treći.

14. korakSa markiranim 1. frejmom treba pritisnuti desni taster miša i iz kontekstnog menija trebaizabrati komandu Copy Frames. Nakon toga treba markirati od 15. frejm i iz kontekstnogmenija treba aktivirati komandu Paste Frames. Na ovaj način iskopiran je početni iz1. frejma i na taj način animacija se nadovezuje i nema prekida. Procedura je krajnjejednostavna i ne treba joj neko posebno objašnjenje.

15. korakTreba levim tasterom miša kliknuti između 10. i 15. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties (slika 7.6).

16. korakU polju pod nazivom Tween treba izabrati način promene, a to je u ovom slučaju Shape,kao što je to prikazano na slici 7.6 (zaokruženo je polje na pomenutoj slici). Na tajnačin se omogućava promena trećeg oblika teksta u prvi. Na slici 7.7 prikazan je izgledvremenske linije.

Page 362: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 347

Slika 7.7. Vremenska linija

17. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 7.8).

Slika 7.8. Tri proizvoljna kadra iz animacije

18. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.8. "Paukova mreža"

U ovom primeru biće objašnjena jednostavna animacija kretanja entiteta po definisanojputanji.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 200 × 200 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba napraviti još jedan sloj, s tim što će jedan sloj biti za statičke objekte, a drugi zadinamičke objekte. Sloj za statičke objekte (paukova mreža) treba nazvati Mreza, a slojza dinamičke objekte (kružnica koja se kreće po mreži) treba nazvati Krug.

4. korakTreba markirati sloj Mreza da bude aktivan i treba ukucati odgovorajući simbol. Trebapritisnuti taster sa znakom " (kada je prisutna srpska tastatura onda se to dobija pritiskomna kombinaciju tastera Shift+C) kada je aktivan font Webdings. Veličina fonta je 190 pt.Dobijeni rezultat prikazan je na slici 8.1.

Page 363: Us   3 d grafika i animacija - praktikum

348 3D grafika i animacija

Slika 8.1. Paukova mreža

5. korakTreba desnim tasterom miša kliknuti na 25. frejm u vremenskoj iliniji i iz kontekstnogmenija treba aktivirati komandu Insert Frame. Na taj način će paukova mreža biti po-stojano na ekranu.

6. korakLevim tasterom miša treba prevući sloj Mreza da bude ispod sloja Krug u stablu slojeva,sa leve strane vremenske linije.

7. korakTreba markirati (aktivirati) sloj Krug i treba kliknuti levim tasterom miša na 1. frejm.Unutar tog frejma treba nacrtati proizvoljnu kružnicu.

8. korakTreba markirati kružnicu i aktivirati komandu Modify > Group.

9. korakTreba kliknuti desnim tasterom miša na 25. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe. Nakon toga trebalo bi pomeriti kru-žnicu na proizvoljno mesto na paukovoj mreži.

10. korakTreba kliknuti desnim tasterom miša između 1. i 25. frejma u vremenskoj liniji i iz kontek-stnog menija treba aktivirati komandu Create Motion Tween. Na taj način je definisannačin animiranja između krajnjih frejmova.

11. korakTreba aktivirati komandu Insert > Timeline > Motion Guide sa markiranim (ak-tivnim) slojem Krug. Nakon toga komandom pen Tool (P) treba iscrtati putanju pokojoj kružnica treba da ide (slika 8.2).

12. korakI dalje je sloj Krug aktivan. Treba levim tasterom miša treba kliknuti na 1. frejm i preme-stiti kružnicu na početnu tačku definisane putanje. Iz te tačke će kružnica početi svojekretanje po putanji ("paukovoj mreži").

Page 364: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 349

13. korakU statusnoj liniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a akonije treba aktivirati karticu Properties (slika 8.3).

Slika 8.2. Putanja po paukovoj mreži

14. korakU polju pod nazivom Tween izabran je način promene, a to je u ovom slučaju Motion,kao što je to prikazano na slici 8.3. Treba markirati (čekirati) polje pod nazivom Orientto path (zaokruženo je polje na pomenutoj slici), a treba ponišiti markiranje polja Synci Snap.

Slika 8.3. Ograničenje kretanja kružnice

Page 365: Us   3 d grafika i animacija - praktikum

350 3D grafika i animacija

15. korakTreba kliknuti desnim tasterom miša na 25. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe. Nakon toga trebalo bi pomeriti kru-žnicu na krajnju tačku putanje. Izgled vremenske linije prikazan je na slici 8.4.

Slika 8.4. Vremenska linija

16. korakKorisnik može da isključi vidljivost sloja Guide: Layer 2 aktiviranjem (isključivanjem)ikonice sa okom. Na taj način neće se videti putanja u prozoru za animaciju (slika 8.5).

17. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 8.5).

Slika 8.5. Tri proizvoljna kadra iz animacije

18. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.9. Transparentnost (providnost) objekata

U ovom primeru biće objašnjena jednostavna animacija gde će se kreirati providni (trans-parentni) objekti.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 200 × 100 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tastera

Page 366: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 351

Ctrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba napraviti još jedan sloj, s tim što će jedan sloj biti za tekst, a drugi za kružnicu.Sloj za tekst treba nazvati Tekst, a sloj za dinamičke objekte (kružnica koja se krećepo tekstu) treba nazvati Krug. Sloj sa tekstom treba da bude u stablu ispod sloja sakružnicom.

4. korakTreba markirati sloj Tekst i u njemu treba otkucati tekst FLASH, a izabran je font ArialBlack veličine 50 pt (slika 9.1).

Slika 9.1. Početna scena

5. korakTreba desnim tasterom miša kliknuti na 50. frejm u vremenskoj iliniji i iz kontekstnogmenija treba aktivirati komandu Insert Frame. Na taj način je omogućeno da tekst kaopozadina bude stalno prisutan na sceni.

6. korakTreba aktivirati drugi sloj i to je sloj pod nazivom Krug. Treba nacrtati crvenu kružnicui smestiti je u donji levi ugao scene (slika 9.1).

7. korakTreba kružnicu pretvoriti u simbol. To može da se odradi na tri načina: pritiskom na funk-cijski taster F8, aktiviranjem komande Modify > Convert to Symbol... ili pritiskomdesnim tasterom miša aktivira se kontekstni meni i iz njega treba aktivirati komanduConvert to Symbol.

8. korakTreba markirati kružnicu i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convertto Symbol i u polju pod nazivom Type treba markirati tip simbola Movie clip. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba (slika9.1). To je preporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno.

Page 367: Us   3 d grafika i animacija - praktikum

352 3D grafika i animacija

9. korakTreba kliknuti desnim tasterom miša na 10., 20., 30., 40. i 50. frejm u vremenskoj liniji iiz kontekstnog menija treba aktivirati komandu Insert Keyframe. Nakon toga trebalobi pomeriti kružnicu gore dole po sceni u gorepomenutim pravilnim intervalima. Izgledvremenske linije je prikazan na slici 9.2.

Slika 9.2. Vremenska linija i ključni kadrovi

10. korakSada se treba pozabaviti transparentnošću (providnošću) same kružnice. Treba levimtasterom miša kliknuti na 10. frejm u vremenskoj liniji unutar aktivnog sloja Krug. Ustatusnoj liniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a akonije treba aktivirati karticu Properties (slika 9.3). U polju Color treba izabrati opcijuAlpha iz padajuće liste (zaokruženo na slici 9.3) i u polju, koje se nalazi u nastavku, trebapodesiti providnost na vrednost 70% (slika 9.3).

Slika 9.3. Podešavanje providnosti kružnice

11. korakTreba levim tasterom miša kliknuti na 20. frejm u vremenskoj liniji unutar aktivnog sloja

Page 368: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 353

Krug. U statusnoj liniji (na dnu radnog ekrana programa) aktivna je kartica Properties,a ako nije treba aktivirati karticu Properties. U polju Color treba izabrati opciju Alphaiz padajuće liste i u polju, koje se nalazi u nastavku, treba podesiti providnost na vrednost50%.

12. korakTreba levim tasterom miša kliknuti na 30. frejm u vremenskoj liniji unutar aktivnog slojaKrug. U statusnoj liniji (na dnu radnog ekrana programa) aktivna je kartica Properties,a ako nije treba aktivirati karticu Properties. U polju Color treba izabrati opciju Alphaiz padajuće liste i u polju, koje se nalazi u nastavku, treba podesiti providnost na vrednost30%.

13. korakTreba levim tasterom miša kliknuti na 40. frejm u vremenskoj liniji unutar aktivnog slojaKrug. U statusnoj liniji (na dnu radnog ekrana programa) aktivna je kartica Properties,a ako nije treba aktivirati karticu Properties. U polju Color treba izabrati opciju Alphaiz padajuće liste i u polju, koje se nalazi u nastavku, treba podesiti providnost na vrednost10%.

14. korakTreba levim tasterom miša kliknuti na 50. frejm u vremenskoj liniji unutar aktivnog slojaKrug. U statusnoj liniji (na dnu radnog ekrana programa) aktivna je kartica Properties,a ako nije treba aktivirati karticu Properties. U polju Color treba izabrati opciju Alphaiz padajuće liste i u polju, koje se nalazi u nastavku, treba podesiti providnost na vrednost100%, tj. vratiti je na početnu vrednost.

15. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 9.4).

Slika 9.4. Tri proizvoljna kadra iz animacije

16. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.10. Pretvaranje reči u reč

U ovom primeru biće objašnjena jednostavna animacija gde će se jedna reč pretvarati udrugu reč.

Page 369: Us   3 d grafika i animacija - praktikum

354 3D grafika i animacija

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 200 × 100 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba otkucati tekst MIN, a izabran je font Arial Black veličine 75 pt.

4. korakTreba markirati tekst i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert toSymbol i u polju pod nazivom Type treba markirati tip simbola Movie clip. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. Uovom slučaju simbol se naziva po tekstu koji je ukucan (zaokruženo na slici 10.1).

5. korakTreba obrisati novonastali simbol iz scene (slika 10.1).

Slika 10.1. Ukucani tekst i kreirani simboli

6. korakTreba otkucati tekst MAX, a izabran je font Arial Black veličine 75 pt.

7. korakTreba markirati tekst i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert toSymbol i u polju pod nazivom Type treba markirati tip simbola Movie clip. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. I uovom slučaju simbol se naziva po tekstu koji je ukucan (zaokruženo na slici 10.1).

8. korakTreba obrisati novonastali simbol iz scene.

Page 370: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 355

9. korakLevim tasterom miša treba prevući simbol MIN iz spiska simbola (zaokružena oblast naslici 10.1) u scenu i treba ga centrirati.

10. korakTreba kliknuti desnim tasterom miša na 10. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

11. korakTreba kliknuti desnim tasterom miša na 30. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Blank Keyframe. Levim tasterom miša trebaprevući simbol MAX iz spiska simbola (zaokružena oblast na slici 10.1) u scenu i trebaga centrirati.

12. korakTreba kliknuti desnim tasterom miša na 40. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

13. korakTreba kliknuti desnim tasterom miša na 60. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Blank Keyframe. Levim tasterom miša trebaprevući simbol MIN iz spiska simbola u scenu i treba ga centrirati.

Slika 10.2. Podešavanje načina promene

Page 371: Us   3 d grafika i animacija - praktikum

356 3D grafika i animacija

14. korakLevim tasterom miša treba markirati (selektovati) 10. frejm u vremenskoj liniji. Trebamarkirati simbol i primeniti komandu Modify > Break Apart ili aktivirati kombinacijutastera Ctrl + B dva puta.

15. korakTreba ponoviti 14. korak za 30., 40. i 60. frejm.

16. korakTreba levim tasterom miša kliknuti između 10. i 30. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties (slika 10.2).

17. korakU polju pod nazivom Tween treba izabrati način promene, a to je u ovom slučaju Shape,kao što je to prikazano na slici 10.2 (zaokruženo je polje na pomenutoj slici). Na taj načinse omogućava promena oblika između MIN i MAX simbola.

18. korakTreba levim tasterom miša kliknuti između 40. i 60. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties (slika 10.2).

19. korakU polju pod nazivom Tween treba izabrati način promene, a to je u ovom slučaju Shape,kao što je to prikazano na slici 10.2 (zaokruženo je polje na pomenutoj slici). Na taj načinse omogućava promena oblika između MAX i MIN simbola. Na slici 10.3 prikazana jevremenska linija sa svim promenama.

Slika 10.3. Vremenska linija

20. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 10.4).

Slika 10.4. Tri proizvoljna kadra iz animacije

Page 372: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 357

21. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.11. Promena boja i oblika

U ovom primeru biće objašnjena jednostavna animacija gde će se vršiti promena boje iveličine objekta.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 200 × 200 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba otkucati jedno slovo. U ovom slučaju izabran je font Wingdings, veličina fonta je200 pt i trebalo bi pritisnuti kombinaciju tastera Shift + T . Kao rezultat pojavljuje seslika 11.1.

Slika 11.1. Početni simbol

4. korakLevim tasterom miša treba markirati tekst i primeniti komandu Modify > Break Apartili aktivirati kombinaciju tastera Ctrl + B.

5. korakTreba markirati slovo i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert toSymbol i u polju pod nazivom Type treba markirati tip simbola Movie clip. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. Toje preporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno.

6. korakTreba kliknuti desnim tasterom miša na 10. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

Page 373: Us   3 d grafika i animacija - praktikum

358 3D grafika i animacija

7. korakTreba ponoviti 6. korak za 20., 30., 40., 50. i 60. frejm.

8. korakTreba promeniti veličinu (smanjiti ili uvećati) simbola u 10., 30. i 50. frejmu.

9. korakTreba desnim tasterom miša pritisnuti između 1. i 10. frejma u vremenskoj liniji i izkontekstnog menija treba aktivirati komandu Create Motion Tween.

10. korakTreba ponoviti 9. korak za oblasti između 10. i 20., 20. i 30., 30. i 40., 40. i 50. i 50. i60. frejma. Izgled novonastale vremenske linije prikazan je na slici 11.2.

Slika 11.2. Vremenska linija

11. korakTreba kliknuti levim tasterom miša na 10. frejm u vremenskoj liniji. Nakon toga treba levimtasterom kliknuti na simbol u sceni. U statusnoj liniji (na dnu radnog ekrana programa)aktivna je kartica Properties, a ako nije treba aktivirati karticu Properties. U poljuColor treba izabrati opciju Tint iz padajuće liste (zaokruženo na slici 11.3) i aktiviranjempolja sa bojom pojavljuje se dijalog sa bojama i tu korisnik bira boju za trenutnu pozicijuunutar vremenske linije.

Slika 11.3. Podešavanje boje simbola

12. korakTreba ponoviti 11. korak za 20., 30., 40., 50. i 60. frejm u vremenskoj liniji.

13. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 11.4).

Page 374: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 359

Slika 11.4. Tri proizvoljna kadra iz animacije

14. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.12. Jednostavan tasterU ovom primeru biće objašnjeno kreiranje jednostavnog tastera (dugmeta) koji reaguje napritisak levim tasterom miša.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 200 × 200 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba nacrtati komandom Oval Tool (O) kružnicu i treba je ispuniti radijalnom gradi-jentnom raspodelom dve boje. Definisana kružnica ne treba da ima liniju konture. Kaorezultat pojavljuje se slika 12.1.

Slika 12.1. Mogući izgled tastera

4. korakTreba markirati kružnicu i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert

Page 375: Us   3 d grafika i animacija - praktikum

360 3D grafika i animacija

to Symbol i u polju pod nazivom Type treba markirati tip simbola Button. U polju podnazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. To jepreporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno.

5. korakTreba desnim tasterom kliknuti na taster u sceni i iz kontekstnog menija trebalo bi ak-tivirati komandu Edit.

6. korakPojavljuju se četiri opcije u vremenskoj liniji. Treba desnim tasterom miša kliknuti na poljeDown (slika 12.2) i iz kontekstnog menija treba aktivirati komandu Insert Keyframe.

Slika 12.2. Kako će reagovati taster?

7. korakTaster i dalje treba da ostane selektovan. Sa aktivnim tasterom treba aktivirati komanduModify > Transform > Scale & Rotate ili pritisnuti kombinaciju tastera sa tastatureCtrl + Alt + S. Kao rezultat pojavljuje se dijalog prikazan na slici 12.3.

Slika 12.3. Dejstvo na taster

8. korakTreba kliknuti dva puta brzo levim tasterom miša van oblasti koju zauzima taster da bise korisnik vratio u dokument, a izašao iz moda za uređivanje (editovanje).

9. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 12.4).

Slika 12.4. Dva moguća stanja tastera

Page 376: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 361

10. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju. Pritiskomna funkcijski taster F12 korisnik može da vidi izgled i ponašanje kreiranog tastera u Internetpretraživaču (na primer, Internet Explorer).

1.13. Jednostavna maskaU ovom primeru biće objašnjeno kreiranje jednostavne maske.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine fotografije (slika13.1) koja će se smestiti u pozornicu. U ovom slučaju veličina pozornice je 350× 348 px.

Slika 13.1. Fotografija za pozornicu

2. korakTreba fotografiju ubaciti u scenu putem File > Import > Import to Stage. Trebapromeniti naziv tekuć eg sloja u Ruze i zaključati ga aktiviranjem ikonice sa katancem.

3. korakPritiskom na taster Insert Layer u oblasti stabla slojeva vremenske linije, kreira se novisloj kome treba promeniti naziv u Kruznica.

4. korakTreba nacrtati komandom Oval Tool (O) kružnicu i treba je ispuniti proizvoljnom bojom.Definisana kružnica ne treba da ima liniju konture.

5. korakTreba markirati kružnicu i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convertto Symbol i u polju pod nazivom Type treba markirati tip simbola Graphics. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. To

Page 377: Us   3 d grafika i animacija - praktikum

362 3D grafika i animacija

je preporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno. Kao rezultatpojavljuje se slika 13.2 levo.

Slika 13.2. Početna i završna postavka pozornice

6. korakTreba markirati (aktivirati) sloj sa fotografijom (sloj Ruze).

7. korakTreba kliknuti desnim tasterom miša na 20. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Frame.

8. korakTreba markirati (aktivirati) sloj sa kružnicom (sloj Kruznica).

9. korakTreba kliknuti desnim tasterom miša na 20. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

10. korakU 20. frejmu treba prevući kružnicu na novu lokaciju iznad fotografije. Na taj način sedefiniše završna sekvenca animacije i kao rezultat pojavljuje se slika 13.2 desno.

11. korakTreba markirati (aktivirati) sloj sa kružnicom (sloj Kruznica). Treba kliknuti desnimtasterom miša između 1. i 20. frejma u vremenskoj liniji i iz kontekstnog menija trebaaktivirati komandu Create Motion Tween.

Page 378: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 363

12. korakTreba kliknuti desnim tasterom miša na naziv sloja Kruznica i iz kontekstnog menijatreba aktivirati komandu Mask. Izgled vremenske linije je prikazan na slici 13.3.

Slika 13.3. Vremenska linija

13. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 13.4).

Slika 13.4. Tri proizvoljna kadra iz animacije

14. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.14. Maska kao loptica skočica

U ovom primeru biće objašnjeno kreiranje maske u obliku kružnice koja skakuće kao lopticaskočica po sceni.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine fotografije (slika14.1) koja će se smestiti u pozornicu. U ovom slučaju veličina pozornice je 299× 376 px.

2. korakTreba fotografiju ubaciti u scenu putem File > Import > Import to Stage.

3. korakTreba kliknuti desnim tasterom miša na 60. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Frame.

Page 379: Us   3 d grafika i animacija - praktikum

364 3D grafika i animacija

Slika 14.1. Fotografija za pozornicu

4. korakTreba promeniti naziv tekućeg sloja u Narcis i zaključati ga aktiviranjem ikonice sakatancem.

5. korakPritiskom na taster Insert Layer u oblasti stabla slojeva vremenske linije, kreira se novisloj kome treba promeniti naziv u Maska.

6. korakTreba nacrtati komandom Oval Tool (O) kružnicu i treba je ispuniti proizvoljnom bojom.Definisana kružnica ne treba da ima liniju konture.

7. korakTreba markirati kružnicu i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convertto Symbol i u polju pod nazivom Type treba markirati tip simbola Graphics. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. Toje preporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno. Kao rezultatpojavljuje se slika 14.2.

Slika 14.2. Početna scena

Page 380: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 365

8. korakTreba markirati (aktivirati) sloj sa kružnicom (sloj Maska). Treba kliknuti desnim tasterommiša na 20. frejm u vremenskoj liniji i iz kontekstnog menija treba aktivirati komanduInsert Keyframe. Treba premestiti kružnicu na lokaciju prikazanu na slici 14.3 levo.

Slika 14.3. Dva međupložaja kružnice

9. korakTreba markirati (aktivirati) sloj sa kružnicom (sloj Maska). Treba kliknuti desnim tasterommiša na 40. frejm u vremenskoj liniji i iz kontekstnog menija treba aktivirati komanduInsert Keyframe. Treba premestiti kružnicu na lokaciju koja je prikazana na slici 14.3desno.

10. korakTreba markirati (aktivirati) sloj sa kružnicom (sloj Maska). Treba kliknuti desnim tasterommiša na 60. frejm u vremenskoj liniji i iz kontekstnog menija treba aktivirati komanduInsert Keyframe. Treba premestiti kružnicu na lokaciju koja je prikazana na slici 14.4.

Slika 14.4. Završna scena

11. korakTreba markirati (aktivirati) sloj sa kružnicom (sloj Maska). Treba kliknuti desnim tasterommiša na 1. frejm u vremenskoj liniji i iz kontekstnog menija treba aktivirati komanduCreate Motion Tween.

Page 381: Us   3 d grafika i animacija - praktikum

366 3D grafika i animacija

12. korakTreba ponoviti 11. korak za 20. i 40. frejm.

13. korakTreba kliknuti desnim tasterom miša na naziv sloja Maska i iz kontekstnog menija trebaaktivirati komandu Mask. Izgled novonastale vremenske linije je prikazan na slici 14.5.

Slika 14.5. Vremenska linija

14. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 14.6).

Slika 14.6. Tri proizvoljna kadra iz animacije

15. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.15. Maska koja se uvećava i smanjuje

U ovom primeru biće objašnjeno kreiranje maske u obliku kružnice koja će se smanjivatii povećavati.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine fotografije (slika14.1) koja će se smestiti u pozornicu. U ovom slučaju veličina pozornice je 350 × 348 px

i odgovara učitanoj fotografiji sa ružama.

2. korakTreba fotografiju ubaciti u scenu putem File > Import > Import to Stage i centri-rati je unutar pozornice.

Page 382: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 367

3. korakTreba kliknuti desnim tasterom miša na 60. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Frame.

Slika 15.1. Fotografija za pozornicu

4. korakTreba promeniti naziv tekućeg sloja u Ruze i zaključati ga aktiviranjem ikonice sa katan-cem.

5. korakPritiskom na taster Insert Layer u oblasti stabla slojeva vremenske linije, kreira se novisloj kome treba promeniti naziv u Maska.

6. korakTreba nacrtati komandom Oval Tool (O) malu kružnicu, treba je ispuniti proizvoljnombojom i smestiti u centar pozornice i fotografije. Definisana kružnica ne treba da imaliniju konture.

Slika 15.2. Početna scena

Page 383: Us   3 d grafika i animacija - praktikum

368 3D grafika i animacija

7. korakTreba markirati kružnicu i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convertto Symbol i u polju pod nazivom Type treba markirati tip simbola Graphics. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. Toje preporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno. Kao rezultatpojavljuje se slika 15.2.

8. korakTreba markirati (aktivirati) sloj sa kružnicom (sloj Maska). Treba kliknuti desnim tasterommiša na 60. frejm u vremenskoj liniji i iz kontekstnog menija treba aktivirati komanduInsert Keyframe.

9. korakKružnica bi i dalje trebala da bude markirana. Treba povećati kružnicu da zahvati celo-kupnu scenu i to se obavlja komandom Modify > Transform > Scale. Treba uvećatisamu kružnicu kao što je to prikazano na slici 15.3.

Slika 15.3. Završna scena

10. korakTreba markirati (aktivirati) sloj sa kružnicom (sloj Maska). Treba kliknuti desnim tasterommiša na 1. frejm u vremenskoj liniji i iz kontekstnog menija treba aktivirati komanduCreate Motion Tween.

11. korakTreba kliknuti desnim tasterom miša na naziv sloja Maska i iz kontekstnog menija trebaaktivirati komandu Mask. Izgled novonastale vremenske linije je prikazan na slici 15.4.

Slika 15.4. Vremenska linija

Page 384: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 369

12. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 15.5).

Slika 15.5. Tri proizvoljna kadra iz animacije

13. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.16. Rotiranje maskeU ovom primeru biće objašnjeno kreiranje maske koja će se vrteti unutar scene.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine fotografije (slika16.1) koja će se smestiti u pozornicu. U ovom slučaju veličina pozornice je 350× 348 px

i odgovara učitanoj fotografiji sa ružama.

Slika 16.1. Fotografija za pozornicu

2. korakTreba fotografiju ubaciti u scenu putem File > Import > Import to Stage i centri-rati je unutar pozornice.

Page 385: Us   3 d grafika i animacija - praktikum

370 3D grafika i animacija

3. korakTreba kliknuti desnim tasterom miša na 60. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Frame.

4. korakTreba promeniti naziv tekućeg sloja u Ruze i zaključati ga aktiviranjem ikonice sa katan-cem.

5. korakPritiskom na taster Insert Layer u oblasti stabla slojeva vremenske linije, kreira se novisloj kome treba promeniti naziv u Vrteska.

6. korakTreba nacrtati komandom PolyStar Tool (zaokružena je na slici 16.2), treba nacrtatidesetougaonik (broj stranica poligona se definiše iz dijaloga prikazanog na slici 16.2),treba ga ispuniti proizvoljnom bojom i smestiti u centar pozornice i fotografije. Definisanipoliogn ne treba da ima liniju konture.

Slika 16.2. Postavljanje početne scene

7. korakTreba markirati kružnicu i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert

Page 386: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 371

to Symbol i u polju pod nazivom Type treba markirati tip simbola Graphics. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. Toje preporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno.

8. korakTreba markirati (aktivirati) sloj sa poligonom (sloj Vrteska). Treba kliknuti desnim taste-rom miša na 60. frejm u vremenskoj liniji i iz kontekstnog menija treba aktivirati komanduInsert Keyframe.

9. korakTreba kliknuti desnim tasterom miša na 1. frejm u vremenskoj liniji i iz kontekstnog menijatreba aktivirati komandu Create Motion Tween.

Slika 16.3. Podešavanje parametara rotacije maske

10. korakU statusnoj liniji (na dnu radnog ekrana programa) aktivna je kartica Properties, aako nije treba aktivirati karticu Properties. U polju Rotate treba izabrati opciju CW izpadajuće liste (cela ova oblast je zaokružena na slici 16.3).

11. korakTreba kliknuti desnim tasterom miša na naziv sloja Vrteska i iz kontekstnog menija trebaaktivirati komandu Mask.

Page 387: Us   3 d grafika i animacija - praktikum

372 3D grafika i animacija

12. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 16.4).

Slika 16.4. Tri proizvoljna kadra iz animacije

13. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.17. Razvlačenje teksta

U ovom primeru biće objašnjena jednostavna animacija gde će se vršiti razvlačenje tekstapo horizontali.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 300 × 100 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba otkucati reč FLASH. U ovom slučaju izabran je font Arial Black i veličina fontaje 75 pt. Kao rezultat pojavljuje se slika 17.1.

Slika 17.1. Početni tekst

Page 388: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 373

4. korakTreba markirati tekst i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert toSymbol i u polju pod nazivom Type treba markirati tip simbola Graphics. U polju podnazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. To jepreporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno.

5. korakSa markiranim tekstom treba aktivirati komandu Edit > Cut (ili kombinaciju tasteraCtrl+ X), a nakon toga komandu Edit > Paste (ili kombinaciju tastera Ctrl+ V). Nataj način je tekst, najpre, premešten u klipbord, a nakon toga vraćen iz klipborda u centardokumenta.

6. korakTreba kliknuti desnim tasterom miša na 20. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

7. korakTreba kliknuti desnim tasterom miša na 20. frejm u vremenskoj liniji i treba aktivirati ko-mandu Modify > Transform > Scale i kursorom miša uhvatiti hvataljku na sredini ver-tikalne stranice i njenim prevlačenjem "sabiti" tekst po horizontali na proizvoljnu veličinu.

8. korakTreba kliknuti desnim tasterom miša između 1. i 20. frejma u vremenskoj liniji i iz kon-tekstnog menija treba aktivirati komandu Create Motion Tween.

9. korakTreba kliknuti desnim tasterom miša na 40. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Blank Keyframe.

10. korakTreba kliknuti desnim tasterom miša na 40. frejm u vremenskoj liniji i treba prevući simboliz biblioteke simbola uz desnu ivicu ekrana u scenu. Taj simbol trebalo bi centrirati unutartekuće scene.

11. korakTreba kliknuti desnim tasterom miša između 20. i 40. frejma u vremenskoj liniji i iz kon-tekstnog menija treba aktivirati komandu Create Motion Tween. Izgled novonastalevremenske linije prikazan je na slici 17.2.

Slika 17.2. Vremenska linija

12. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 16.4).

Page 389: Us   3 d grafika i animacija - praktikum

374 3D grafika i animacija

Slika 17.3. Tri proizvoljna kadra iz animacije

13. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.18. "Nestajanje" teksta

U ovom primeru biće objašnjena jednostavna animacija gde će se vršiti skaliranje teksta injegovo nestajanje povećanjem providnosti.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 300 × 100 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba otkucati reč FLASH. U ovom slučaju izabran je font Arial Black i veličina fontaje 75 pt. Kao rezultat pojavljuje se slika 18.1.

Slika 18.1. Početni tekst

4. korakTreba markirati tekst i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert toSymbol i u polju pod nazivom Type treba markirati tip simbola Graphics. U polju podnazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. To jepreporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno.

5. korakSa markiranim tekstom treba aktivirati komandu Edit > Cut (ili kombinaciju tasteraCtrl+ X), a nakon toga komandu Edit > Paste (ili kombinaciju tastera Ctrl+ V). Na

Page 390: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 375

taj način je tekst, najpre, premešten u klipbord, a nakon toga vraćen iz klipborda u centardokumenta.

6. korakTreba kliknuti desnim tasterom miša na 20. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

7. korakTreba kliknuti desnim tasterom miša na 20. frejm u vremenskoj liniji i treba aktivirati ko-mandu Modify > Transform > Scale i kursorom miša uhvatiti hvataljku na temenu injenim prevlačenjem smanjiti tekst na proizvoljnu veličinu, ne menjajući mu osnovni oblik.

8. korakTreba kliknuti desnim tasterom miša između 1. i 20. frejma u vremenskoj liniji i iz kon-tekstnog menija treba aktivirati komandu Create Motion Tween.

Slika 18.2. Providnost

Page 391: Us   3 d grafika i animacija - praktikum

376 3D grafika i animacija

9. korakTreba kliknuti desnim tasterom miša na 40. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Blank Keyframe.

10. korakTreba kliknuti desnim tasterom miša na 40. frejm u vremenskoj liniji i treba prevući simboliz biblioteke simbola uz desnu ivicu ekrana u scenu. Taj simbol trebalo bi centrirati unutartekuće scene.

11. korakSa markiranim tekstom treba pogledati u statusnu liniju (na dnu radnog ekrana programa)da li je aktivna kartica Properties, a ako nije treba aktivirati karticu Properties. Upolju Color treba izabrati opciju Alpha iz padajuće liste (zaokruženo na slici 18.2) i upolju, koje se nalazi u nastavku, treba podesiti providnost na vrednost 0%.

12. korakTreba kliknuti desnim tasterom miša između 20. i 40. frejma u vremenskoj liniji i iz kon-tekstnog menija treba aktivirati komandu Create Motion Tween.

13. korakTreba kliknuti desnim tasterom miša na 50. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

14. korakTreba kliknuti desnim tasterom miša na 50. frejm u vremenskoj liniji i treba prevući simboliz biblioteke simbola uz desnu ivicu ekrana u scenu. Taj simbol trebalo bi centrirati unutartekuće scene.

15. korakSa markiranim tekstom treba pogledati u statusnu liniju (na dnu radnog ekrana programa)da li je aktivna kartica Properties, a ako nije treba aktivirati karticu Properties. Upolju Color treba izabrati opciju Alpha iz padajuće liste (zaokruženo na slici 18.2) i upolju, koje se nalazi u nastavku, treba podesiti providnost na vrednost 100%.

16. korakTreba kliknuti desnim tasterom miša između 40. i 50. frejma u vremenskoj liniji i iz kontek-stnog menija treba aktivirati komandu Create Motion Tween. Novonastala vremenskalinija je prikazana na slici 18.3.

Slika 18.3. Vremenska linija

17. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 18.4).

Page 392: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 377

Slika 18.4. Tri proizvoljna kadra iz animacije

18. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.19. Zumiranje i "nestajanje" teksta

U ovom primeru biće objašnjena jednostavna animacija gde će se vršiti skaliranje teksta injegovo nestajanje povećanjem providnosti, na drugačiji način od prethodnog primera.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 300 × 100 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba otkucati reč FLASH. U ovom slučaju izabran je font Arial Black i veličina fontaje 20 pt.

4. korakTreba markirati tekst i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert toSymbol i u polju pod nazivom Type treba markirati tip simbola Movie clip. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. Toje preporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno.

5. korakTreba levim tasterom miša markirati 1. frejm. Sa markiranim tekstom treba pogledati ustatusnu liniju (na dnu radnog ekrana programa) da li je aktivna kartica Properties, aako nije treba aktivirati karticu Properties. U polju Color treba izabrati opciju Alphaiz padajuće liste (zaokruženo na slici 18.2) i u polju, koje se nalazi u nastavku, trebapodesiti providnost na vrednost 0%.

6. korakTreba kliknuti desnim tasterom miša na 25. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

Page 393: Us   3 d grafika i animacija - praktikum

378 3D grafika i animacija

7. korakTreba aktivirati komandu Modify > Transform > Scale i kursorom miša uhvatiti hva-taljku na temenu i njenim prevlačenjem povećati tekst na proizvoljnu veličinu, ne menjajućimu osnovni oblik. Sa markiranim tekstom treba pogledati u statusnu liniju (na dnu radnogekrana programa) da li je aktivna kartica Properties, a ako nije treba aktivirati karticuProperties. U polju Color treba izabrati opciju Alpha iz padajuće liste (zaokruženona slici 18.2) i u polju, koje se nalazi u nastavku, treba podesiti providnost na vrednost100%. Kao rezultat pojavljuje se slika 19.1.

Slika 19.1. Podešavanje teksta

8. korakTreba kliknuti desnim tasterom miša na 40. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

9. korakTreba kliknuti desnim tasterom miša na 65. frejm u vremenskoj liniji i iz kontekst-nog menija treba aktivirati komandu Insert Keyframe. Sa markiranim tekstom trebapogledati u statusnu liniju (na dnu radnog ekrana programa) da li je aktivna karticaProperties, a ako nije treba aktivirati karticu Properties. U polju Color treba iz-abrati opciju Alpha iz padajuće liste (zaokruženo na slici 18.2) i u polju, koje se nalazi unastavku, treba podesiti providnost na vrednost 0%.

10. korakTreba kliknuti desnim tasterom miša na 75. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Frame.

Page 394: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 379

11. korakTreba kliknuti desnim tasterom miša između 1. i 25. frejma u vremenskoj liniji i iz kontek-stnog menija treba aktivirati komandu Create Motion Tween. Novonastala vremenskalinija je prikazana na slici 18.3.

12. korakTreba kliknuti desnim tasterom miša između 40. i 65. frejma u vremenskoj liniji i iz kontek-stnog menija treba aktivirati komandu Create Motion Tween. Novonastala vremenskalinija je prikazana na slici 19.2.

Slika 19.2. Vremenska linija

13. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 19.3).

Slika 19.3. Tri proizvoljna kadra iz animacije

14. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.20. Efekat BLUR

U ovom primeru biće objašnjena jednostavna animacija gde će se primeniti efekat Blurna učitanu fotografiju.

1. korakTreba startovati novi dokument i taj dokument može da bude proizvoljne veličine.

2. korakTreba fotografiju ubaciti u scenu putem File > Import > Import to Stage i centri-rati je unutar pozornice.

3. korakTreba markirati fotografiju i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convertto Symbol i u polju pod nazivom Type treba markirati tip simbola Movie clip. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. To je

Page 395: Us   3 d grafika i animacija - praktikum

380 3D grafika i animacija

preporučljivo kada se radi sa više simbola, a u ovom slučaju to nije bitno. U ovom slučajudefinisan je naziv Blur. Kao rezultat pojavljuje se slika 20.1.

Slika 20.1. Fotografija kao simbol

4. korakTreba markirati Blur simbol u pozornici i u statusnoj liniji (na dnu radnog ekrana pro-grama) treba aktivirati karticu Filters. Nakon toga treba protisnuti znak + i iz pada-jućeg menija izabrati komandu Blur. Kao rezultat pojavljuje se dijalog prikazan na slici20.2 i parametre treba podesiti kao što je prikazano na toj slici (zaokružene su vrednosti).

Slika 20.2. Podešavanje zamagljenja

5. korakTreba kliknuti desnim tasterom miša na 50. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

6. korakTreba markirati simbol Blur i treba promeniti vrednosti polja Blur X i Blur Y na 0 kakobi se uklonio Blur efekat.

7. korakTreba kliknuti desnim tasterom miša između 1. i 50. frejma u vremenskoj liniji i iz kon-tekstnog menija treba aktivirati komandu Create Motion Tween.

Page 396: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 381

8. korakTreba kliknuti desnim tasterom miša na 60. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Frame, kako bi krajnja slika sa 50. frejma sta-jala nepromenjena u sceni. Izgled novonaastale vremenske linije prikazan je na slici 20.3.

Slika 20.3. Vremenska linija

9. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 20.4).

Slika 20.4. Tri proizvoljna kadra iz animacije

10. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.21. Statičke senke

U ovom primeru biće objašnjena primena tri različite statičke senke na entitet.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 300 × 100 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba otkucati tekst SENKA, izabran je font Comic Sans MS veličine 75 pt i dodeljenamu je crvena boja (slika 21.1).

Page 397: Us   3 d grafika i animacija - praktikum

382 3D grafika i animacija

Slika 21.1. Inicijalni tekst

4. korakTreba markirati tekst i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert toSymbol i u polju pod nazivom Type treba markirati tip simbola Movie clip. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. Uovom slučaju simbol se naziva po tekstu koji je ukucan.

5. korakTreba markirati simbol u pozornici i u statusnoj liniji (na dnu radnog ekrana programa)treba aktivirati karticu Filters. Nakon toga treba protisnuti znak + i iz padajućeg menijaizabrati komandu Drop Shadow. Kao rezultat pojavljuje se dijalog prikazan na slici 21.2i parametre treba podesiti kao što je prikazano na toj slici (zaokružene su vrednosti).

Slika 21.2. Podešavanje senke

6. korakKao rezultat pojavljuje se tekst sa definisanom statičkom senkom (slika 21.3).

Slika 21.3. Uobičajeni tip senke

7. korakAko se u dijalogu sa slike 21.2 markira opcija Knockout onda tekst dobija izgled kao naslici 21.4.

Slika 21.4. Tip senke KNOCKOUT

Page 398: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 383

8. korakAko se u dijalogu sa slike 21.2 markira opcija Inner shadow onda tekst dobija izgled kaona slici 21.5.

Slika 21.5. Tip senke INNER SHADOW

9. korakAko se u dijalogu sa slike 21.2 markira opcija Hide object onda tekst dobija izgled kaona slici 21.6.

Slika 21.6. Tip senke HIDE OBJECT

10. korakAko se u dijalogu sa slike 21.2 markiraju opcije Knockout i Inner shadow onda tekstdobija izgled kao na slici 21.7.

Slika 21.7. Tip senke KNOCKOUT + INNER SHADOW

1.22. Efekat isijavanja - GLOWU ovom primeru biće objašnjena primena tri različita isijavanja kako bi se naglasio i došaodo izražaja markirani entitet.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 300 × 100 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap to

Page 399: Us   3 d grafika i animacija - praktikum

384 3D grafika i animacija

grid. Na taj način je kreirana mreža pomoćnih linija i kretanje kursora miša je podešenoda se "vezuje" za presečne tačke mreže.

3. korakTreba otkucati tekst FLASH, izabran je font Comic Sans MS veličine 75 pt i dodeljenamu je crvena boja (slika 22.1).

Slika 22.1. Inicijalni tekst

4. korakTreba markirati tekst i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert toSymbol i u polju pod nazivom Type treba markirati tip simbola Movie clip. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba. Uovom slučaju simbol se naziva po tekstu koji je ukucan.

5. korakTreba markirati simbol u pozornici i u statusnoj liniji (na dnu radnog ekrana programa)treba aktivirati karticu Filters. Nakon toga treba protisnuti znak + i iz padajućegmenija izabrati komandu Glow. Kao rezultat pojavljuje se dijalog prikazan na slici 22.2 iparametre treba podesiti kao što je prikazano na toj slici (zaokružene su vrednosti).

Slika 22.2. Podešavanje isijavanja

6. korakKao rezultat pojavljuje se tekst sa definisanom statičkom senkom (slika 22.3).

Slika 22.3. Uobičajeni tip isijavanja

7. korakAko se u dijalogu sa slike 22.2 markira opcija Knockout onda tekst dobija izgled kao naslici 22.4.

Page 400: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 385

Slika 22.4. Tip isijavanja KNOCKOUT

8. korakAko se u dijalogu sa slike 22.2 markira opcija Inner glow onda tekst dobija izgled kaona slici 22.5.

Slika 22.5. Tip isijavanja INNER GLOW

9. korakAko se u dijalogu sa slike 22.2 markiraju opcije Knockout i Inner glow onda tekst dobijaizgled kao na slici 22.6.

Slika 22.6. Tip isijavanja KNOCKOUT + INNER SHADOW

1.23. Kretanje kroz lavirint

U ovom primeru biće objašnjeno kreiranje odgovarajućeg putnog pravca i objekta kojiputuje po tom pravcu.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 200 × 100 px.

2. korakTreba aktivirati komandu View > Grid > Edit Grid ili pritisnuti kombinaciju tasteraCtrl+Alt+G. Unutar dijaloga treba podesiti Grid mrežu pomoćnih linija na rastojanje10 px po obe ose i treba aktivirati (markirati) polja pod nazivima Show grid i Snap togrid.

3. korakKomandom Line Tool (N) treba nacrtati odgovarajuću figuru koja će simulirati putni

Page 401: Us   3 d grafika i animacija - praktikum

386 3D grafika i animacija

pravac. Izbor boje linije je proizvoljan, kao i vrednost za širinu ("debljinu") linije konture.Mogući izgled ovog entiteta prikazan je na slici 23.1.

Slika 23.1. Inicijalni putni pravac

4. korakTreba levim tasterom miša markirati 1. frejm u vremenskoj liniji. Sa stalno pritisnutimlevim tasterom miša treba prevući taster do 13. frejma, kako bi se oblast od 1. do 13.

frejma zacrnila (markirala).

Slika 23.2. Vremenska linija

5. korakTada treba pritisnuti desnim tasterom miša unutar te markirane oblasit i iz kontekstnogmenija treba izabrati komandu Convert to Keyframes. Na taj način su svi frejmovipostali ključni kadrovi. Novonastali izgled vremenske linije prikazan je na slici 23.2.

6. korakTreba levim tasterom miša markirati 1. frejm. U sceni treba nacrtati kružnicu sa gradi-jentnom ispunom i ona predstavlja telo koje će se kretati definisanim putnim pravcem.Početni položaj je prikazan na slici 23.1.

7. korakTreba levim tasterom miša markirati 2. frejm. Treba pomeriti loptu za dva kvadratićaudesno (dva kvadratića imaju dužinu 20 px, a tolika je vrednost prečnika kružnice) i to jeprvi korak u animaciji.

8. korakTreba levim tasterom miša markirati 3. frejm. Treba pomeriti loptu za dva kvadratića

Page 402: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 387

nadole (dva kvadratića imaju visinu 20 px, a tolika je vrednost prečnika kružnice) i to jedrugi korak u animaciji.

9. korakTreba ponavljati korake 7 ili 8 sve dok se ne dođe do 13. frejma koji definiše izgled sceneprikazan na slici 23.3.

Slika 23.3. Završna scena

10. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 23.4).

Slika 23.4. Tri proizvoljna kadra iz animacije

11. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

1.24. Pretvaranje bitmape u vektorski crtež

U ovom primeru biće objašnjeno pretvaranje učitane fotografije (bitmape) u vektorskicrtež.

Page 403: Us   3 d grafika i animacija - praktikum

388 3D grafika i animacija

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine fotografije (slika24.1) koja će se smestiti u pozornicu. U ovom slučaju veličina pozornice je 1024×768 px.

Slika 24.1. Učitana fotografija

2. korakTreba fotografiju ubaciti u scenu putem File > Import > Import to Stage.

3. korakTreba levim tasterom miša markirati (selektovati) fotografiju, ako već nije selektovana.Nakon toga treba aktivirati komandu Modify > Bitmap > Trace Bitmap i kao rezultatpojavljuje se dijalog prikazan na slici 24.2.

4. korakNakon toga treba aktivirati komandu Modify > Bitmap > Trace Bitmap i kao rezultatpojavljuje se dijalog prikazan na slici 24.2.

Slika 24.2. Dijalog za podešavanje parametara

5. korakKao rezultat pojavljuje se slika 24.3, a to je pretvorena bitmapa u vektorski crtež sauobičajenim (podrazumevanim) parametrima.

Page 404: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 389

Slika 24.3. Pretvorena bitmapa i original u donjem desnom uglu

1.25. Promena oblika fotografije

U ovom primeru biće objašnjeno kreiranje animacije koja će pokazivati kako se menja oblikfotografije, kao i kako ta fotografija rotira.

1. korakTreba startovati novi dokument i taj dokument treba da bude veličine 350 × 350 px, aostale parametre treba podesiti kao što je prikazano na slici 25.1.

Slika 25.1. Podešavanje parametara novog dokumenta

2. korakTreba fotografiju ubaciti u scenu putem File > Import > Import to Stage i centri-rati je unutar pozornice (slika 25.2).

Page 405: Us   3 d grafika i animacija - praktikum

390 3D grafika i animacija

Slika 25.2. Učitana fotografija

3. korakDa bi se fotografija centrirala kako treba trebalo bi koristiti paletu sa alatkama podnazivom Align & Info & Transform i unutar nje treba aktivirati karticu Align. Akoova paleta nije aktivna, treba je aktivirati putem Window > Align ili pritiskom na kom-binaciju tastera Ctrl + K. Kao rezultat pojavljuje se paleta uz desnu ivicu ekrana (slika25.3). Da bi se fotografija centrirala na pozornici treba aktivirati zaokružene tastere naslici 25.3.

Slika 25.3. Paleta za poravnanje

4. korakTreba levim tasterom markirati (selektovati) učitanu fotografiju i aktivirati komanduModify > Break Apart ili pritisnuti kombinaciju tastera Ctrl+B.

5. korakTreba kliknuti desnim tasterom miša na 20. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe ili treba kliknuti levim tasterom mišana 20. frejm u vremenskoj liniji i, nakon toga, treba pritisnuti funkcijski taster F6. Rezultatje isti i u 20. frejmu se formira ključni kadar.

6. korakTreba aktivirati komandu Subselection Tool (A) (ikonica sa belom strelicom). Po-moću ove komande treba pomeriti gornje desno teme fotografije na proizvoljan položaj,kao što se to vidi na slici 25.4.

Page 406: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 391

Slika 25.4. Prva modifikacija

7. korakTreba kliknuti desnim tasterom miša na 40. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

8. korakTreba aktivirati komandu Subselection Tool (A) (ikonica sa belom strelicom). Po-moću ove komande treba pomeriti donje levo teme fotografije na proizvoljan položaj, kaošto se to vidi na slici 25.5.

Slika 25.5. Druga modifikacija

9. korakTreba kliknuti desnim tasterom miša na 50. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

10. korakTreba aktivirati komandu Subselection Tool (A) (ikonica sa belom strelicom). Po-moću ove komande treba pomeriti donje desno teme fotografije na proizvoljan položaj,kao što se to vidi na slici 25.6.

11. korakTreba kliknuti desnim tasterom miša na 60. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

Page 407: Us   3 d grafika i animacija - praktikum

392 3D grafika i animacija

Slika 25.6. Treća modifikacija

12. korakTreba aktivirati komandu Subselection Tool (A) (ikonica sa belom strelicom). Po-moću ove komande treba pomeriti gornje levo teme fotografije na proizvoljan položaj, kaošto se to vidi na slici 25.7.

Slika 25.7. Četvrta modifikacija

13. korakTreba kliknuti desnim tasterom miša na 70. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

14. korakTreba selektovati modifikovanu fotografiju i ponoviti 3. korak. Na ovaj način se modi-fikovana fotografija smešta u centar scene.

15. korakTreba levim tasterom miša kliknuti između 1. i 20. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties. U polju pod nazivom Tween treba izabrati način promene,a to je u ovom slučaju Shape. Na taj način se omogućava promena oblika fotografije.

16. korakTreba levim tasterom miša kliknuti između 20. i 40. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije treba

Page 408: Us   3 d grafika i animacija - praktikum

Macromedia Flash Professional 8 - Samostalne vežbe 393

aktivirati karticu Properties. U polju pod nazivom Tween treba izabrati način promene,a to je u ovom slučaju Shape.

17. korakTreba levim tasterom miša kliknuti između 40. i 50. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties. U polju pod nazivom Tween treba izabrati način promene,a to je u ovom slučaju Shape.

18. korakTreba levim tasterom miša kliknuti između 50. i 60. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties. U polju pod nazivom Tween treba izabrati način promene,a to je u ovom slučaju Shape.

19. korakTreba levim tasterom miša kliknuti između 60. i 70. frejma u vremenskoj liniji. U statusnojliniji (na dnu radnog ekrana programa) aktivna je kartica Properties, a ako nije trebaaktivirati karticu Properties. U polju pod nazivom Tween treba izabrati način promene,a to je u ovom slučaju Shape. Izgled vremenske linije prikazan je na slici 25.8.

Slika 25.8. Vremenska linija

20. korakTreba kliknuti desnim tasterom miša na 71. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

21. korakTreba markirati tekst i aktivirati funkcijski taster F8. Pojavljuje se dijalog Convert toSymbol i u polju pod nazivom Type treba markirati tip simbola Movie clip. U poljupod nazivom Name korisnik može da unese proizvoljno ime za simbol, ako mu treba.

22. korakTreba kliknuti desnim tasterom miša na 80. frejm u vremenskoj liniji i iz kontekstnogmenija treba aktivirati komandu Insert Keyframe.

23. korakTreba levim tasterom miša kliknuti 71. frejm u vremenskoj liniji. U statusnoj liniji (nadnu radnog ekrana programa) aktivna je kartica Properties, a ako nije treba aktiviratikarticu Properties. U polju pod nazivom Tween treba izabrati način promene, a to jeu ovom slučaju Motion, a u polju Rotate treba izabrati vrednost CW. Ove vrednosti ipodešavanja su zaokružena na slici 25.9.

Page 409: Us   3 d grafika i animacija - praktikum

394 3D grafika i animacija

Slika 25.9. Podešavanje parametara rotacije

24. korakNovonastali izgled vremenske linije prikazan je na slici 25.10.

Slika 25.10. Novonastala vremenska linija

25. korakTreba aktivirati Control > Test Movie ili pritisnuti kombinaciju tastera Ctrl + Enter

kako bi se aktivirao novi prozor u kome se vidi kako teče animacija (slika 25.11).

Slika 25.11. Šest proizvoljnih kadrova iz animacije

26. korakKomandom File > Save As treba zapisati (sačuvati) napravljenu animaciju.

Page 410: Us   3 d grafika i animacija - praktikum

LITERATURA

Knjige1. Grupa autora: Autodesk 3DS MAX 9, User’s Reference, Volume I, PDF doku-

ment, 2007.

2. Grupa autora: Autodesk 3DS MAX 9, User’s Reference, Volume II, PDFdokument, 2007.

3. Grupa autora: Autodesk 3DS MAX 9, User’s Reference, Volume III, PDFdokument, 2007.

4. Michele Matossian: 3DS MAX 6 za Windows - Bukvar za nestrpljive, CETComputer Equipment and Trade, Beograd, 2004.

5. Grupa autora: Autodesk 3DS MAX 8, Tutorial Guide, Volume I, PDF doku-ment, 2005.

6. Grupa autora: Autodesk 3DS MAX 8, Tutorial Guide, Volume II, PDF doku-ment, 2005.

7. Grupa autora: Autodesk 3DS MAX 8, Tutorial Guide, Volume III, PDF doku-ment, 2005.

8. Dragan Cvetković: Računarska grafika, CET Computer Equipment and Trade iRačunarski fakultet, Beograd, 2006.

9. Jon McFarland, Jinjer Simon: 3DS MAX 8 - Vizuelnim putem, Kompjuter bib-lioteka, Beograd, 2007.

10. Ted Boardman: 3DS MAX 8 - Kroz primere, Mikro knjiga, Beograd, 2006.

11. Sean Bonney, Steve Anzovin: 3DS MAX 7 - Bez tajni, Kompjuter biblioteka,Beograd, 2005.

12. Andy Reese, Stephanie Reese, Steve Schain, Pia Maffei: 3D Studio MAX Verzija3 - Osnove, CET Computer Equipment and Trade, Beograd, 2000.

13. Michael Hurwicz: Studio MX 2004 - Bez tajni, Edicija: Stvarni svet, Kompjuterbiblioteka, Beograd, 2004.

Page 411: Us   3 d grafika i animacija - praktikum

396 3D grafika i animacija

14. Katherine Ulrich: Bukvar za nestrpljive: Macromedia Flash 8 za Windows iMacintosh, CET Computer Equipment and Trade, Beograd, 2006.

15. Rich Shupe, Robert Jr. Hoekman, Robert Hoekman, Jr.: Flash 8: Projects forLearning Animation and Interactivity, O’Reilly, 2006.

16. Doug Sahlin, Bonnie Blake: How to Do Everything with Flash 8, McGraw-HillProfessional, 2005.

17. Andrew Rapo, Alex Michael: Understanding Macromedia Flash 8 ActionScript2, Elsevier, 2006.

18. Andy Anderson, Steve Johnson: Adobe Flash CS3 Professional On Demand,Edicija: On Demand, 592 strane, ISBN 0-7897-3692-6, Perspection Inc, 2007.

19. E.A. Vander Veer, Chris Grover: Flash CS3: The Missing Manual, 518 strana,ISBN: 978-86-7555-322-9, Pogue; O’Reilly, 2008.

20. Robert Reinhardt, Snow Dowd: Adobe Flash CS3 Professional Bible, 1232strana, ISBN:978-0-470-11937-2, Wiley, 2007.

21. Adobe Creative Team: Adobe Flash CS3 Professional Classroom in a Book,ISBN-13: 0-978-0-321- 49982-0, 352 strane, Adobe Creative Team, 2007.

22. Tom Green, David Stiller: Foundation Flash CS3 for Designers, 600 strana,ISBN-10: 1-59059-861-X, Foundation Flash CS3, 2007.

23. Colin Moock: Essential ActionScript 3.0, 946 strana, ISBN 10: 0-596-52694-6,O’Reilly, 2007.

24. Colin Moock: Essential ActionScript 2.0, 528 strana, ISBN 10: 0-596-00652-7,O’Reilly, 2004.

Internet adrese

http://usa.autodesk.comhttp://www.pixel2life.com/tutorials/3d_studio_max/http://www.tutorialized.com/tutorials/3DS-MAX/1http://www.3dstudiomaxtutorials.com/http://www.caddigest.com/subjects/3ds_max/tutorials.htmhttp://www.3dcafe.comhttp://www.lynda.comhttp://www.thefwa.comhttp://www.bestflashanimationsite.comhttp://www.adobe.comhttp://www.adobe.com/products/flash/http://www.actionscript.org/http://www.w3schools.com/flash/http://www.animationlibrary.com