kako do interaktivnog softvera u nastavi.pdf

Akreditovani seminar Kako do interaktivnog softvera u nastaviPraćenje i podrška www.uchaportal.com

KAKO DO INTERAKTIVNOG SOFTVERA U NASTAVI

POKRETANJE I ELEMENTI PROGRAMA FLASH

PokretanjeProgram Flash možemo pokrenuti na dva načina. Prvi način je da ga pokrenemo

dvoklikom na ikonicu koja se nalazi na desktopu (Slika 1):

Slika 1

Drugi način je da ga pokrenemo preko startnog menija (Slika 2):

Slika 2

Nakon pokretanja programa otvoriće se početna stranica (Slika 3):


Slika 3

Na početnoj stranici možemo otvoriti već postojeći projekat, napraviti novdokument, započeti novi projekat pomoću nekog šablona, posetiti Flash web lokaciju,dobiti pomoć…

Da bismo započeli izradu novog dokumenta, od ponuđenih opcija na početnojstranici izabraćemo Create New/Flash Document (Slika 4).

Slika 4


Nakon toga ekran će izgledati kao na Slici 5:

Slika 5

Elementi programa FlashVažni elementi prozora programa Flash predstavljeni su na sledećoj slici (Slika 6):

Slika 6


PozornicaPozornica predstavlja deo ekrana gde dodajemo određene objekte koje želimo da se

vide u filmu. Objekti se mogu raspoređivati i van pozornice, ali se na filmu mogu videtisamo oni objekti koji se nalaze na pozornici. Podrazumevana boja pozornice je bela. Njenačirina je 550, a visina 400 piksela. Ove parametre možemo menjati izborom opcijeModify/Document… iz meni bara (Slika 7):

Slika 7

Otvoriće se okvir za dijalog Document Properties (Slika 8) u kojem možemomenjati parametre.

Slika 8


Dimenzije i boja pozornice se mogu menjati i na panou Properties, koji se nalaziispod pozornice (Slika 9):

Slika 9

Vremenska osaPomoću vremenske ose (Timeline) (Slika 10) se upravlja filmovima koje pravimo u

Flashu.

Slika 10

Vremenska osa se sastoji od tačaka vremenske ose koje nazivamao kadrovi(frames). Kadrovi se prikazuju u određenim trenucima, prilikom reprodukovanja filma.Koliko brzo će se smenjivati kadrovi određujemo pomoću parametra Frame Rate na većpoznatom okviru za dijalog Document Propreties (Slika 11).

Slika 11

Frame Rate, u stvari, predstavlja broj kadrova koji će proteći u sekundi (frames persecond). Podrazumevana vrednost je 12 kadrova u jednoj sekundi, što možemo i menjati,mada je ovo sasvim dovoljno da se stvori utisak pokreta u filmu.


SlojeviNa pozornici možemo napraviti više slojeva (Layers) (Slika 12). Ovo je veoma

korisno jer na različitim slojevima možemo crtati objekte koji se mogu pomerati bezmeđusobnih uticaja.

Slika 12

Slojeve možemo da zamislimo kao više grafofolija koje su naslagane jedna nadrugu. Na primer, imamo dve grafofolije. Na prvoj je nacrtan drvored, a na grafofolijiispod, automobil. Ako pomeramo donju grafofoliju stičemo utisak da se automobil krećeiza drvoreda. Isto ovo, samo dosta lakše, postižemo pomoću slojeva u Flashu. Pored ovoga,slojevi mogu imati i druge namene:

ü Pomoćni slojevi (guide layers) za zadavanje putanje za animiranje pokreta;

ü Slojevi za maskiranje (mask layers) koji određuju šta će se videti namaskiranom sloju;

ü Slojevi sa oznakama (label layers) se koriste za upravljanje tokom programau filmovima;

ü Slojevi sa komentarima (comment layers) pomoću kojih možemo navremenskoj osi dodati komentare.

Neke od ovih slojeva kasnije ćemo objasniti detaljnije.

PanoiPomoću panoa (panels) možemo da menjamo osobine izabranih objekata. Ima ih

više i mogu da budu prikazani na ekranu. Da bismo prikazali neki od panoa otvorićemopadajući meni Window i izabrati odgovarajući panel, u ovom slučaju Align (Slika 13).

Slika 13


Ukoliko ovaj panel nije bio prikazan na ekranu, pojaviće se na sredini (Slika 14).

Slika 14

Jednostavnim prevlačenjem pomoću dvostruke kolone sivih tačaka na levoj straninaslovne trake panoa (tada se pokazivač miša promeni u četvorostranu strelicu) dati panosmeštamo u prostor za panoe (Slika 15).

Slika 15

Kada je pano prikazan na ekranu, ali je sažet, da bismo ga raširili moramo pritisnutitrougao levo od imena panoa. Za sažimanje panoa opet pritisnemo trougao (Slika 16).

Slika 16


Broj i raspored panoa prilagođavamo prema sopstvenim potrebama. Kroz dalji raddetaljnije ćemo se upoznavati sa pojedinim panoima.

Podešavanje uveličanjaPozornicu možemo da uveličavamo ili smanjujemo, odnosno da podešavamo

veličinu prikaza, pomoću padajuće liste koja se nalazi u gornjem desnom uglu pozornice(Slika 17).

Slika 17

Pano ToolsNa ovom panou nalaze se sve alatke koje su nam potrebne da bismo crtali objekte

na pozornici. Pano Tools je usidren uz levu ivicu pozornice (Slika 18).

Slika 18


Sa ovim panoom ćemo se detaljno upoznati.

OSNOVE CRTANJA U FLASH-UKao što smo rekli, na panoou Tools nalaze se sve potrebne alatke za crtanje. Na

Slici 19 su predstavljene sve alatke, smeštene u četiri oblasti (okna): okno Tools, oknoView, okno Colors, okno Options.

Slika 19

U oknu Tools su smeštene alatke za crtanje. Alatka se bira tako što je pritisnemo.Pomoću alatki iz okna View možemo da uvećamo ili umanjimo prikaz i da ga pomeramo.Alatke iz okna Colors služe za rad sa bojama, dok se u oknu Options momože pristupitiopcijama izabrane alatke za crtanje. Dalje ćemo se detaljnije upoznati sa svim oknima.

Pomoću bele strelice - Subselect i lasa – Lasso biramo objekte da bismo uopšte sanjim nešto radili (Slika 20).

Slika 20


Pomoću crne strelice – Arrow, takođe možemo birati objekte, ali, što je važno injihove delove (Slika 21).

Slika 21

Pomoću alatke Line crtaju se prave linije (Slika 22). Dovoljno je izabrati ovualatku, postaviti pokazivač miša tamo gde želimo da započnemo liniju, pritisnemo levitaster miša i prevučemo pokazivač miša na mesto gde želimo da se linija završi. Pustimotaster miša i linija je nacrtana.

Slika 22

Karakteristike nacrtane linije (boja, debljina ...) precizno se može definisati prekopanoa Properties, koji se nalazi ispod pozornice (Slika 23).

Slika 23


Ukoliko želimo da se nacrtane linije automatski spajaju na svojim krajevimaizabraćemo View/Snapping/Snap to Objects (Slika 24).

Slika 24

Isto možemo da uradimo u oknu Options, izborom opcije Snap to Objects (Slika25)

Slika 25

Da bismo nacrtali pravougaonik ili kvadrat koristićemo alatku Rectangle (Slika26).

Slika 26


Dovoljno je pokazivač miša postaviti na mesto gde želimo da bude jedan oduglova, pritisnemo levi taster miša, i odvučemo ga u suprotan ugao. Tu pustimo pokazivačmiša i pravougaonik je nacrtan. Ukoliko želimo da nacrtamo kvadrat uradićemo isto kao iza pravougaonik, samo ćemo držati pritisnut taster SHIFT (na tastaturi). Ukoliko želimo dazaoblimo uglove, pre ove aktivnosti izabraćemo opciju Set Corner Radius iz oknaOptions i ukucati veličinu zaobljenja (Slika 27).

Slika 27

Da bismo nacrtali krug ili elipsu koristićemo altku Oval (Slika 28). Elipsu crtamona isti način kao i pravougaonik, dok za krug treba da držimo pritisnut taster SHIFT.

Slika 28

Ukoliko želimo da pišemo određeni tekst, koristićemo alatku Text (Slika 29).

Slika 29


Kada nakon izbora ove alatke kliknemo na mesto gde želimo da pišemo pojaviće seblok koji će moži da se širi u zavisnosti koliko teksta kucamo (Slika 30).

Slika 30

Ukoliko nakon izbora ove alatke razvučemo blok (kao kada crtamo pravougaonik)pojaviće se blok koji neće moći da se širi kada kucamo tekst (Slika 31).

Slika 31

Da bismo znali koji je blok u pitanju obratićemo pažnju na gornji desni ugao bloka(u prvom slučaju to nalazi se krug, dok se u drugom slučaju nalazi kvadrat). Ako želimo dablok sa kvadratom pretvorimo u blok koji može da se širi dovoljno je da dva puta kliknemona kvadrat. Podešavanja teksta (font, boja ...) vršićemo na panou Properties koji se nalaziispod pozornice.

Pomoću alatke Pencil možemo crtati slobodnom rukom (Slika 32).

Slika 32

Pokazivač miša postavimo na mesto gde želimo da počnemo liniju, pritisnemo levitaster miša, prevučemo pokazivač miša na željeno mesto i pustimo. Ukoliko želimo damalo ,,izgladimo” liniju koristićemo neku od opcija iz okna Options (Slika 33).

Slika 33


U Flashu možemo farbati pomoću alatke Brush – četkica (Slika 34).

Slika 34

Nakon izbora ove alatke možemo farbati određene površine. Izbor oblika i debljinečetke, kao i niz drugih opcija bira se u oknu Options (Slika 35).

Slika 35

Prvih pet opcija se odnosi na mesta po kojima se ostavlja trag četkice, dok se drugedve opcije odnose na veličinu i oblič četkice.

Pomoću alatke Pen mogu se crtati krive linije (Bezjeove krive). One se moguprecizno definisati (Slika 36).

Slika 36


Alatka Paint Bucket (kanta sa bojom) služi za popunjavanje nacrtanih objekatarazličitim bojama (Slika 37).

Slika 37

Ukoliko nacrtamo pravougaonik, a nismo menjali boju popune i linija, unutrašnjostpravougaonika biće bele boje, a linije crne (Slika 38).

Slika 38

Ukoliko želimo da promenimo popunu pravougaonika izabraćemo ovu alatku,kliknuti na željenu boju u oknu Colors (voditi računa da to bude Fill color – kantica)(Slika 39).

Slika 39

Pokazivač miša (on je u obliku kantice) dovedemo na željeno mesto, kliknemo iboja popune će se promeniti (Slika 40).


Slika 40

Kao što pomoću alatke Paint Bucket menjamo boju popune, tako pomoću alatkeInk Bottle menjamo boju linija (Slika 41).

Slika 41

Nakon što izaberemo ovu alatku, kliknućemo na željenu boju u oknu Colors(vodimo računa da to bude Stroke color – olovka) (Slika 42).

Slika 42

Nakon što smo izabrali boju, pokazivač miša će se pretvoriti u bocu sa mastilom.Dovoljno je da kliknemo na liniju nacrtanog objekta i boja će se promeniti (Slika 43).


Slika 43

Pomoću alatke Eyedropper možemo da pokupimo bilo koju boju sa bilo kogobjekta u radnom okruženju (Slika 44).

Slika 44

Nakon što smo izabrali ovu alatku, pokazivač miša će se pretvoriti upipetu.Potrebno je samo da kliknemo na odgovarajuću popunu ili liniju i ,,pokupimo” tuboju.

Ukoliko želimo da nešto izbrišemo, koristićemo gumicu za brisanje – Eraser (Slika45).

Slika 45


Kada izaberemo ovu alatku, u oknu Options, možemo menjati veličinu i izgledgumice (Slika 46).

Slika 46

Takođe, možemo da izaberemo različit režim rada kada izaberemo opciju EraseMode (Slika 47).

Slika 47

Erase Normal briše sve ispod gumice, Erase Fills briše samo popunu objekta, EraseLines briše linije a ostavlja popunu, Erase Selected Fills briše samo izabrane popune, EraseInside briše samo unutar oblasti u kojoj smo počeli da povlačimo pokazivač miša.

Pomoću alatke Free Transform možemo slobodno da menjamo veličinu objekta,rotiramo ga, krivimo, iskošavamo. Dovoljno je izaberemo objekat koji želimo datransformišemo i izaberemo ovu alatku (Slika 47). Pokazivačem miša prilazimo tačkamakoje su se pojavile oko objekta i vršimo željene radnje.


Slika 48

Poredi zbora boje popune Fill color i boje konture (linije) Stroke color, sa čime smose već upoznali, na oknu Colors postoje još tri opcije (Slika 49).

Slika 49

Swap colors predstavlja standardne boje linija i popune. Pomoću No colorsmožemo da ukinemoboju linije ili popune. Opcijom Swap colors vršimo međusobnuzamenu boja linije i poune.

U oknu View možemo izabrati dve opcije (Slika 50).

Slika 50

Radi bolje preglednosti izborom Zoom Tool možemo uvećavati (ili smanjivati)oblast radne površine, dok opcijom Hand Tool možemo pomerati radnu površinu.

Grupisanje objekataPrilikom crtanja u Flash-u, veoma često ćemo koristiti mogućnost grupisanja i

razgrupisanja objekata. Kada crtamo određene objekte, oni su razgrupisani. To znači da supopuna i kontura linija potpuno odvojeni. Ako nacrtamo pravougaonik sa crvenom


popunom i crnom konturom možemo kliknuti na popunu (odabrati je) i odvući je na bilokoju stranu. Kontura je ostala na svojem mestu jer se ponaša kao poseban objekat (Slika51).

Slika 51

Da bismo grupisali objekte (u ovom slučaju konturu i popunu), najpre ćemo daoznačimo sve objekte koje želimo da grupišemo (nekom od alatki za označavanje), apotom da izaberemo komandu Modify/Group (Slika 52).

Slika 52

Da bismo ove objekte ponovo razgrupisali, ponovićemo postupak, ali ćemo umestoModify/Group izabrati Modify/Ungroup (Slika 53).

Slika 53


U daljem radu videćemo koliku važnost ima grupisanje objekata.

IZRADA JEDNOSTAVNIH ANIMACIJA

Da bismo napravili neku animaciju nije nam neophodan Flash. Dovoljno je daimamo blok sa dosta listova i olovku. Na svakom listu pravićemo crteže, tako da razlikeizmeđu crteža na susednim listovima budu sasvim male. Ako nekome u kratkom razmakuprikažemo ovakav niz crteža, on to neće videti kao posebne crteže, nego kao pokret. Kadagledamo film ili neku televizijsku emisiju u stvari vidimo veliki broj slika koje se brzosmenjuju. Televizor prikazuje oko 30 slika (kadrova) u jednoj sekundi.

Pomoću vremenske ose (Timeline) (Slika 54) se upravlja animacijama - filmovimakoje pravimo u Flashu.

Slika 54

Vremenska osa se sastoji od tačaka vremenske ose koje nazivamao kadrovi(frames). Kadrovi se prikazuju u određenim trenucima, prilikom reprodukovanja filma.Koliko brzo će se smenjivati kadrovi određujemo pomoću parametra Frame Rate na većpoznatom okviru za dijalog Document Propreties (Modify/Document…)(Slika 55).

Slika 55


Frame Rate, u stvari, predstavlja broj kadrova koji će proteći u sekundi (frames persecond). Podrazumevana vrednost je 12 kadrova u jednoj sekundi, što možemo i menjati,mada je ovo sasvim dovoljno da se stvori utisak pokreta u filmu.

Animacija u Flashu ima početnu i krajnju tačku na vremenskoj osi (Timeline).Početni i krajnji kadar su najvažniji kadrovi u animaciji. Oni se nazivaju ključni kadrovi(keyframes). Kadrovi između početnog i krajnjeg predstavljaju međuslike. Kada pravimoanimaciju u Flash-u, prvo u početnom kadru nacrtamo objekat koji želimo da animiramo.U zavisnosti koliko želimo da traje animacija dodajemo drugi ključni kadar naodgovarajuće mesto na vremenskoj osi. Pošto smo rekli da je podrazumebana vrednost uFlash-u 12 kadrova u sekundi, ako želimo da nam animacija traje 3 sekunde, onda ćemo36. kadar proglasiti za ključni (keyframe). Potom ćemo objekat pomeriti na mesto gdeželimo da se animacija završi i na vremensku osu dodati međupokret (motion tween) i utom momentu Flash će napraviti sve međuslike. Kada pustimo film dobićemo iluzijukretanja.

Detaljno ćemo predstavićemo nekoliko primera.

Izrada animacije: objekti se pomerajua) Pokrenućemo Flash i izabrati novi dokument.

b) Pomoću alatke za crtanje pravougaonika nacrtaćemo pravougaonik. Njegovuunutašnjost obojićemo crvenom bojom. (Slika 56)

Slika 56

c) Izabraćemo ceo pravougaonik pomoću alatke za označavanje objekata(strelica). Kada to uradimo pravougaonik će izgledati kao na Slici 57

Slika 57

d) Nakon toga ćemo izvršiti grupisanje (postupak je već objašnjen) –Modify/Group


e) Recimo da želimo da nam animacija traje tri sekunde. Pritisnućemo 36. kadarna vremenskoj osi (Slika 58)

Slika 58

f) Dati kadar ćemo proglasiti ključnim kadrom (keyframes) izboromInsert/Timeline/Keyframe (Slika 59)

Slika 59

Vremenska osa će sada izgledati kao na Slici 60.

Slika 60

g)

h) Sada ćemo pravougaonik odvući na mesto gde želimo da se animacija završi(Slika 61)


Slika 61

i) Sada ćemo pritisnuti dva puta bilo koji kadar između početnog i krajnjeg kadra.Vremenska osa će izgledati kao na Slici 62)

Slika 62

j) Sada ćemo dodati međuslike tako što ćemo izabrati Insert/Timeline/CreateMotion Tween (Slika 63)

Slika 63

Vremenskaosa će izgledati kao na Slici 64


Slika 64

k) Snimićemo rad tako što ćemo izabrati File/Save (Slika 65)

Slika 65

l) Da bismo videli kako animacija radi izabraćemo Control/Test Movie (Slika66)

Slika 66

Videćemo kako se pravougaonik kreće (Slika 67).

Slika 67


Izrada animacije: rotiranje objektaa) Otvorićemo novi dokument File/New (Slika 68)

Slika 68

b) Ponovićemo ceo postupak koji smo opisali u prethodnom odeljku I animiratipravougaonik koji se kreće sa leve na desnu stranu pozornice.

c) Kliknućemo na završni ključni kadar da bismo mogli da izmenimo film I objkatmalo zarotiramo.

d) Kliknućemo na pravougaonik i izabraćemo komandu Modify /Transform/Rotate and Skew da bismo pravougaoniku dodali ručice za rotaciju (Slika 69).

Slika 69

e) Pomoću ručica malo ćemo zarotirati pravougaonik (Slika 70).

Slika 70


f) Sminićemo dokument I izabrati Control/Test Movie da pregledamo animaciju.

Izrada animacije: objekti se povećavaju i smanjujua) Otvorićemo novi dokument - File/New

b) Nacrtaćemo kvadrat na sredini pozornicec) Grupisaćemo kvadrat

d) Odredićemo ključni kadar gde želimo da se animacija završi (npr. 12. kadar dabi animacija trajala 2 sekunde)

e) Izabraćemo Window/Transform (Slika 71)

Slika 71

f) Otvoriće se pano Transform. U polje Widh ukucaćemo 200, da bismodvostruko povećali širinu, a u polje Height (desno) ukucaćemo 50, da bismoduplo smanjili visinu kvadrata. Nakon toga pritisnućemo ENTER da bi se ovetransformacije primenile (Slika 72).

Slika 72

g) Pritisnućemo dva puta na vremensku osu između ključnih kadrova i napravitimeđuslike (Insert/Timeline/Create Motion Tween)

h) Snimićemo dokument i izabrati Control/Test Movie da pregledamo animaciju.

Izrada animacije: objekti menjaju oblik


a) Izabraćemo novi dokument – File/New

b) Pomoću alatke za crtanje pravih linija nacrtaćemo neki objekat ( kao na slici73)

Slika 73

c) Odredićemo završni ključni kadar na 36. kadru (Insert/Timeline/Keyframe)

d) Izabraćemo alatku Subselect (belu strelicu) i pritisnućemo van objekta, tako danije izabran. Na neki od uglova nacrtanog objekta postavićemo pokazivač mišai promenićemo mu oblik Možemo izabrati i boju za popunu (Slika 74)

Slika 74

e) Dav puta ćemo pritisnuti na vremensku osu između ključnih kadrova.

f) Izabraćemo Window/Properties i iz padajuće liste Tween izabraćemo Shapeda bismo primenili promenu oblika (Slika 75)


Slika 75

g) Snimićemo film i pogledati animaciju - Control/Test Movie.

Izrada animacije: pravljenje efekataOpisaćemo kako da napravimo tekst koji će da stoji nekoliko trenutaka, a onda da

,,eksplodira”.a) Izabraćemo novi dokument – File/New

b) Pritisnućemo alatku Text i na panou Properties odrediti font, veličinu 40 iodređenu boju. Okvir za tekst ćemo prevući u donju polovinu pozornice.Unećemo tekst, recimo: RASPUST (Slika 76)

Slika 76

c) Kliknućemo na strelicu, a potom van teksta da bismo poništili izbor. Potomćemo na vremenskoj osi odrediti gde želimo da započne animacija, recimo na24. kadru i pretvorićemo ga u ključni kadar. Potom ćemo da kliknemo naključni kadar i izaberemo tekst.

d) Izabraćemo komandu Insert/Timeline Effects/Effect i izaberemo Explode(Slika 77)

Slika 77


e) U dobijenom prozoru možemo menjati parametre i nakon toga pritisnemo OK(Slika 78)

Slika 78

f) Snimićemo dokumenti pogledati animaciju.

RAD SA SLOJEVIMAVeć smo rekli da slojeve (layers) u Flash-u možemo da posmatramo kao folije koje

su naređane jedna preko druge. Objekti, koje nacrtamo na slojevima mogu da se pomerajunezavisno od objekata koji su nacrtani na drugim slojevima. Slojevi mogu da služe zarazličite namene i veoma su važni kada pravimo animaciju. Sa leve strane vremenske osenalazi se prostor za rad sa slojevima (Slika 79).

Slika 79


Da bismo dodali novi sloj, izabraćemo Insert Layer (Slika 80).

Slika 80

Sloju možemo da damo naziv, tako što ćemo dva puta da kliknemo na automatskinaziv – Layer n, gde je Layer naziv, a n broj sloja koji smo ubacili. (Slika 81).

Slika 81

Kada animacija ima dosta slojeva, dobro ih je organizovati pomoću direktorijumaslojeva – layer folders (Slika 82).

Slika 82

Napravićemo direktorijum, dati mu naziv i jednostavnim prevlačenjem ubaciti unjega željene slojeve (Slika 83).


Slika 83

Ukoliko nam određeni sloj ne treba, možemo ga izbrisati, tako što ćemo izabratiDelete Layer (Slika 84).

Slika 84

Na slojeve možemo da utičemo i na sledeće načine:a) možemo uključiti ili isključiti prikaz slojeva (Slika 85).

Slika 85

b) možemo zaključati slojeve da bismo izbegli eventualne nehotične izmene (Slika86)


Slika 86

c) možemo uključiti prikaz kontura na slojevima (Slika 87)

Slika 87

Animacija sa dva slojaVEOMA JE VAŽNO DA ZNAMO DA SE NOVI SLOJEVI KOJE UBACUJEMO

SMEŠTAJU IZNAD TRENUTNO IZABRANIH. OBJEKTI, KOJE DODAJEMO NANOVI SLOJ, NAĆI ĆE SE ISPRED OBJEKATA NA PRETHODNIM SLOJEVIMA.

Ako želimo da menjamo redosled slojeva to ćemo učiniti jednostavnimprevlačenjem na željeno mesto.

Da bismo ovo dobro shvatili, uradićemo sledeću animaciju:

a) izabraćemo novi dokument – File/New.b) Layer 1 ćemo da promenimo u naziv Drvored (Slika 88)

Slika 88

c) U prvom kadru ćemo da nacrtamo drvored, kao na Slici 89 (vi ćete to učinitibolje) i grupišemo objekte.


Slika 89

d) Zatim ćemo da odredimo završni ključni kadar, recimo u 60. kadru. U tomslučaju animacija će da traje 5 sekundi.

e) Ubacićemo novi sloj (on će se naći iznad postojećeg sloja Drvored) i dati munaziv Kamion (Slika 90).

Slika 90

f) Zaključaćemo sloj Drvored da ne bi pogrešno crtali na njemu – kad kliknemona drugu tačku na tom sloju, ona će se pretvoriti u katanac (Slika 91).

Slika 91

g) Zamenićemo mesta slojevima prevlačenjem (Slika 92)

Slika 92


h) U prvom kadru sloja Kamion ćemo nacrtati kamion i grupisati ga (Slika 93)

Slika 93

i) Odredićemo ključni kadar i na ovom sloju (takođe 60.) i prevući kamion nadesni karaj pozornice.

j) Napravićemo međuslike (već je opisan način)k) Snimićemo rad i pregledati ga – Control/Test Movie. Steći će se utisak da

kamion prolazi sa leve na desnu stranu pozornice, ali iza drvoreda (Slika 94)

Slika 94

Izrada pokretnog tekstaDa bismo shvatili kako funkcionišu tzv. maskirni slojevi (Mask), napravićemo

efekat teksta koji prolazi samo na određenom delu pozornice. Pre nego što ovo uradimonavešćemo nekoliko važnih stvari koje se tiču maski:


a) Maska se uvek pravi na jedinstvenom sloju i utiče na to koliko će se videtiobjekti koji se nalaze na slojevima neposredno ispod njega.

b) U animaciji maska se ne vidi. Vide se samo njeni efekti.

c) Da bi sloj sa maskom radio ispravno, moramo ga pretvoriti u tip Mask (to ćemoopisati u vežbi).

d) Posledice maskiranja biće vidljive u Flash-ovom okruženju za programiranjejedino ako zaključamo sloj s maskom. Ovo ne važi za objavljen film.

Možda je sve što smo rekli malo zbunjujuće. Uskoro ćemo na primeru pravljenjapokretnog teksta videti koliko je sve jednostavno.

a) Izabraćemo novi dokument – File/Newb) Odmah ćemo dodati još jedan sloj (Slika 95)

Slika 95

c) Napravićemo desni klik na soju sa oznakom Layer 2 i izabrati Mask (Slika 96)

Slika 96

d) Slojevi će izgledati kao na Slici 96. U sloju Layer 2 biće maska, dok će na slojuLayer 1 biti animirani tekst.


Slika 97

e) Kliknućemo u prvi kadar Lajera 2 i nacrtati crni pravougaonik, preko celepozornice, kao na Slici 98. Pre toga ćemo otključati sloj tako što ćemo kliknutina katanac.

Slika 98

f) Sada ćemo ponovo zaključati Layer 2, a otključati Layer 1 i u prvom kadru uboksu koji se ne širi (malo je kraći od pravougaonika) ispisati tekst. To sada nemora biti dugačak tekst. Možemo napisati velikim slovima RASPUST (Slika99).

Slika 99

g) Ako hoćemo da tekst lagano ide naviše, ključni kadar ćemo postaviti, recimo na120. kadru. To znači da će animacija trajati 10 sekundi. Kada napravimo ključnikadar tekst ćemo da prevučemo ravnomerno iznad maske. Naravno, ključnikadar na 120. kadru napravićemo i na sloju Layer 2. Snimićemo dokument ipogledati animaciju.


Izrada vođene animacijeČesto ćemo zaželeti da se naši nacrtani objekti ne kreću samo pravolinijski, već da

imaju krivolinijsku putanju. Ovo ćemo da postignemo pomoću putanje animacije – motionguide. Predstavićemo ovaj postupak na sledećem primeru.

a) Otvorićemo novi dokument – File/Newb) Iznad postojećeg sloja dodaćemo pomoćni sloj tako što ćemo napraviti desni

klik na Layer 1 i izabrati Add Motion Guide (Slika 100)

Slika 100

c) Slojevi će izgledati kao na Slici 101

Slika 101

d) Dodaćemo još jedan sloj Layer 2, koji će biti iznad Layera 1 (Slika 102)

Slika 102

e) Na prvom kadru Layera 1 nacrtaćemo brdo, kao na Slici 103.


Slika 103

f) Pomoću alatke Pencil na pomoćnom sloju (Guide) nacrtaćemo putanjuanimacije, kao na Slici 104. Drugi ključni kadar stavićemo na 60. kadru.

Slika 104

g) Pritisnućemo Layer 2, nacrtati avion i grupisati ga. Postaviti ga na početakputanje animacije (linija koju smo iscrtali oko brda) tako što će ukrštenekončanice da se smeste na liniju (Slika 105).

Slika 105

h) Pritisnućemo drugi ključni kadar (na 60. kadru) i namestiti avion na krajputanje (Slika 104). Napravićemo međuslike (Create Motion Tween).


Snimićemo dokument i pogledati animaciju. Avion će leteti krivolinijski, kaoda izbegava brdo.

IZRADA SIMBOLA

Simboli predstavljaju posebnu vrstu objekata u Flashu. Njih možemo da koristimokoliko god je potrebno i tom prilikom nećemo uticati na veličinu datoteke filma. Postoječetiri vrste simbola: grafički, simboli fonta, simboli animiranog objekta i simboli dugmadi.

Grafički simboliU ovu grupu simbola spadaju statični objekti. Dobar primer za grafičke simbole

predstavljaju logotipi. Kada ovakvu sliku napravimo kao simbol bez problema ćemo jeubaciti tamo gde nam je to potrebno. Evo primera:

Izabraćemo okvir za dijalog Create New Simbol pomoću naredbe Insert/NewSymbol (Slika 106).

Slika 106

Na okviru za dijalog Create New Symbol označićemo Graphic i pritisnuti OK(Slika 107)

Slika 107

Nakon toga nacrtaćemo željenu sliku koja će postati grafički simbol. Iz biblioteke(Library) možemo je dodavati u film.

Simboli fontaDa bismo održali veličinu filmova u kojima se nalazi dosta teksta možemo praviti

simbole fontova. Fontovi se ne crtaju, već se koriste postojeći fontovi na računaru. Evoprimera:

Pomoću komande Window/Library otvorićemo pano Library (Slika 108).


Slika 108

Otvorićemo meni pano Library tako što ćemo pritisnuti ikonicu u gornjem desnomuglu panoa (Slika 109)

Slika 109

Iz menija ćemo izabrati New Font (Slika 110).

Slika 110

Otvoriće se okvir za dijalog Font Symbol Properties (Slika 111)

Slika 111

U polje Name unećemo opisno ime (Slika).

Sa padajuće liste Font izabraćemo odgovarajući font.U donjem delu okvira za dijalog odredićemo karakteristike fonta.

Pritisnućemo OK da bismo zatvorili okvir za dijalog. Dodaćemo simbol fonta ubiblioteku.

Simboli animiranog objekta


Simboli animiranih objekata predstavljaju filmove snimljene kao simbole. Oni sesmeštaju na vremensku osu filma ali se reprodukuju nezavisno od nje. Pokazaćemo naprimeru kako možemo napraviti simbol animiranog objekta (točak koji se okreće).

Otvorićemo novi dokument – File/New.Izabraćemo komandu Insert/New Symbol (Slika 112)

Slika 112

Otvoriće se okvir za dijalog Create New Symbol, u kome ćemo označiti Movie clipi dati u polju Name naziv Tocak. Pritisnućemo OK (Slika 113).

Slika 113

Na sredini pozornice nacrtaćemo krug sa konturom veličine 10, dok ćemo popunuobojiti sivom bojom (Slika 114).

Slika 114

Izabraćemo komandu Window/Align (Slika 115)


Slika 115

Otvoriće se pano Align (Slika 116)

Slika 116

Na panou Align pritisnućemo dugme To Stage, a potom dugmad Align HorizontalCenter i Align Vertical Center. Na ovaj način točak će se smestiti u centar pozornice(Slika 117).

Slika 117

Nakon što zatvorimo pano Align, pomoću alatke Line, točku ćemo dodati detalje,da bi se videlo kako rotira (Slika 118).

Slika 118


Izvršićemo grupisanje objekta (točka). Nakon toga u 12. kadru ćemo napravitiključni kadar.

Upotrebićemo komandu Window/Transform (Slika 119).

Slika 119

U otvorenom panou Transform u polje Rotate upisaćemo 90, da bi se točakkretao u smeru kazaljke ili -90 ako želimo da rotira u suprotnom smeru (Slik 120).

Slika 120

Dva puta ćemo pritisnuti vremensku osu i napraviti međupokret(Insert/Timeline/Create Motion Tween).

Snimićemo rad i pogledati animaciju (Control/Test Movie).

Nakon ovoga možemo nacrtati kamion i dodati mu napravljene simbole, grupisatiih i napraviti novu animaciju. Kamion će se kretati preko pozornice, a točkovi će se rotiratinezavisno od kamiona.

Simboli dugmadiPomoću dugmadi u Flashu se omogućava interakcija s korisnikom preko miša, kao

i izrada kontrola za upravljanje odvijanjem filma.

Crtanje dugmeta je veoma jednostavno.Prvo ćemo izabrati Insert/New Symbol (Slika 121).


Slika 121

U okviru za dijalog Create New Symbol izabraćemo Button. U poje Name daćemonaziv dugmetu: Dugme1. Pritisnućemo OK.(Slika 122).

Slika 122

Pokazaće se pozornica i vremenska osa dugmeta (Slika 123).

Slika 123

Pomoću alatke za crtanje elipse i krugova nacrtaćemo dugme (Slika 123).

Slika 124


Na slici 124 vidi se da na vremenskoj osi dugmeta ima 4 ključne tačke:

Up – Ovo je statičan oblik dugmeta.Over – Stanje u kome se nalazi kada je iznad njega pokazivač miša.

Down – Stanje u kojem se dugme nalazi kad je pritisnut taster miša.Hit – Oblast koja definiše gde korisnik može da pritisne da bi aktivirao dugme.

Korisnik nikada ne vidi ovaj kadar.Stanje Up Flash odmah proglašava za ključni kadar, dok za ostala tri to moramo da

učinimo mi. Na vremenskoj osi dugmeta možemo da dodajemo slojeve, što je veomakorisno kada dugmadima dodajemo zvuk.

Pokazaćemo kako ovo funkcioniše.Postavićemo ključni kadar u kadru Over. Kada to uradimo promenićemo boju

popune (Slika 125).

Slika 125

Sada ćemo ključni kadar staviti u kadar Down. Kada to uradimo aktiviraćemoalatku za slova i nešto napisati iznad dugmeta (ili na drugom mestu), npr. Prvo dugme(Slika 126).

Slika 126

Ključni kadar ćemo staviti i u kadar Hint.

Izabraćemo Edit/Edit Document da se vratimo na osnovnu vremensku osu (Slika127).


Slika 127

Snimićemo dokument i izabrati Control/Test Movie da vidimo kako dugme radi(Kada pređemo mišem promeniće boju, a kada ga pritisnemo pojaviće se tekst Prvodugme.

U sledećoj temi još više ćemo govoriti o dugmadima, kada im budemo dodavaliinterakcije.

DODAVANJE INTERAKCIJA – OSNOVE ACTIONSCRIPT-ADa bi korisnici filmova koje smo napravili u Flashu bili aktivni, odnosno da bi im

ponudili da sami nešto biraju, u filmove moramo dodavati interakcije – programiranje uActionScriptu. Ova interakcija sa korisnikom u Flashu se ostvaruje pomoću dugmadi, čijimse pritiskanjem izaziva neka naredba.

Osnovni elementi koji omogućavaju interakcije su naredbe i procedure za obradudogađaja.

Procedure za obradu događaja su naredbe koje treba da odgovore na određene vrstedogađaja, kao što su pritisak mišem ili učitavawe animiranog objekta.

Najčešće ćemo koristiti proceduru on koju ćemo pronaći na panou Actions –Window/Actions (Slika 128).

Slika 128

Otvoriće se pano Actions, gde ćemo pritisnuti mali krstić i pronaći proceduru on –Global Functions/Movie Clip Control/on (Slika 129).


Slika 129

Kada izaberemo proceduru on, okno za skriptove prikazaće nam osam različitihdogađaja (Slika 130).

Slika 130

To su sledeći događaji:Press – Pritiskanje primarnog tastera miša dok je pokazivač miša iznad osetljivog

područja dugmeta.Release – Otpuštanje primarnog tastera miša dok je pokazivač iznad osetljivog

dela područja dugmeta.Release Outside - Otpuštanje primarnog tastera miša dok je pokazivač izvan

osetljivog dela područja dugmeta.Roll Over – Kretanje pokazivača miša iznad osetljivog područja dugmeta.

Roll Out – Kretanje pokazivača miša iz osetljivog područja dugmeta u polje.Drag Over – Kretanje pokazivača miša iznad osteljivog područja dugmeta uz

istovremeno držanje primarnog tastera miša.Drag Out – Kretanje pokazivača miša iz osetljivog područja dugmeta u polje uz

istovremeno držanje primarnog tastera miša.Key Press <key> - Pritiskanje naznačenog tastera na tastaturi.


Možemo koristiti bilo koji događaj, ali ćemo u našem radu najčešće koristitidogađaj Relase.

Funkcije su komande koje dodajemo filmu da bi se nešto dogodilo kada korisnikpritisne dugme. Recimo, želimo da omogućimo posetiocu da pomoću naredbeStopAllSounds omogućimo da ukine zvuk u filmu koji smo napravili, tako što će pritisnutidugme. Da bi smo to uradili dugmetu ćemo dodati sledeću interakciju:

Prvo ćemo izabrati proceduru on i događaj Relase (Slika 131).

Slika 131

Nakon toga ćemo u drugi red umetnuti funciju stopAllSounds kao na Slici 132.

Slika 132

Kada završimo to će izgledati kao na slici 133.

Slika 133

Kada korisnik sada pritisne dugme nestaće zvuk.

Objasnićemo i funkcionisanje ostalih funkcija (Slika 134).


Slika 134

GotoOva funkcija se pojavljuje kao gotoAndPlay() i goto AndStop(). Svaka od njih

premešta klizač na određeni kadar na vremenskoj osi, od koga će film početi da sereprodukuje ili na kome će se zaustaviti.

nextFrame()Ova funkcija pomera klizač za jedan kadar unapred i zatim ga zaustavlja na tom

kadru.

nextScene()Ova funkcija pomera klizač na prvi kadar naredne scene i zaustavlja ga na njemu.

play()Ova funkcija pomera klizač na sledeći kadar na vremenskoj osi, odakle će se

reprodukcija nastaviti sve dok je ne zaustavi neka druga naredba ActionScripta.

prevFrame()Ova funkcija pomera klizač za jedan kadar unazad.

prevScene()Ova funkcija pomera klizač za jednu scenu unazad I postavlja klizač na prvi kadar

te scene.

stop()Ova funkcija zaustavlja klizač tekućeg filma na vremenskoj osi.

stopAllSounds()Ova funkcija prekida svaku zvučnu sekvencu koja se reprodukuje.Naravno, u ActionScriptu postoji mnogo više mogućnosti, ali za sada ovo je

dovoljno. U narednim temama, koristićemo ove naredbe, procedure i funkcije.


UVOZ I UPOTREBA SLIKA

U ovoj temi upoznaćemo se sa načinom uvoženja slika u Flash, kao i načinomnjihovog podešavanja i vektorizacije.

Da bismo uvezli sliku u Flash izabraćemo komandu File/Imoprt/Import toLibrary (Slika 135).

Slika 135

Otvoriće se okvir za dijalog Import to library (Slika 136). Izabraćemo željenusliku i pritisnuti OK.

Slika 136

Nakon što smo uvezli sliku, potražićemo je u panou Library. Upotrebićemokomandu Window/Library (Slika 137).


Slika 137

Otvoriće se ovaj pano i u njemu ćemo pronaći našu sliku (Slika 138).

Slika 138

U panou Library možemo da podesimo svojstva uvežene slike. To ćemo uraditi nasledeći način:

Pano Library je već otvoren. Izabraćemo sliku koju smo uvezli.Otvorićemo okvir za dijalog Bitmap Properties tako što ćemo napraviti desni klik

na neotvorenu sliku i izabrati Properties (Slika 139).

Slika 139


Pojaviće se okvir za dijalog kao na Slici 140.

Slika 140

Ako hoćemo da izgladimo ivice objekata u slici potvrdićemo Allow smoothing. Sapadajuće liste Comppression izabraćemo Photo (JPEG), ako se radi o digitalnimfotografijama, ili Lossless (PNG/GIF) za jednostavne slike sa malim brojem boja. Ako smouvezli JPG sliku koju smo već komprimovali (što je poželjno) izabraćemo Use importedJPEG data. Ako je ne potvrdimo, moraćemo da u polje Quality upišemo određeni broj iodredimo njen kvalitet.

Jednostavnim prevlačenjem slike dovešćemo je na odgovarajuće mesto napozornici (Slika 141).

Slika 141

UVOZ I UPOTREBA ZVUKA

Uvoz zvuka je sličan uvozu slika. Jedina razlika je ta što zvuk možemo da uvozimosamo u biblioteku, a ne na pozornicu. Da bismo uvezli zvuk uradićemo sledeće:

Izabraćemo komandu File/Import/Import to Library (Slika 142).


Slika 142

U okviru za dijalog Import to Library izabraćemo odgovarajuću datoteku ipritisnuti OK. (Slika 143).

Slika 143

Vršiće se prenos datoteke (Slika 144).

Slika 144

Otvorićemo pano Library. U njemu se nalazi naša zvučna datoteka. Možemopritisnuti dugme Play u gornjem desnom uglu i preslušati je (Slika 145).


Slika 145

Dodavanje zvuka kadrovimaObjasnićemo kako ćemo zvuk dodati određenoj ključnoj tački na vremenskoj osi.

Već smo uvezli odgovarajuću zvučnu datoteku.Dodaćemo još jedan sloj i dati mu naziv Zvuk (Slika 146).

Slika 146

Kliknućemo u prvi kadar sloja Zvuk i nakon toga zvučnu datoteku ćemo prevući napozornicu. Da bismo videli zvučne talase, dodaćemo ključni kadar na 60. kadru. (Slika147).

Slika 147

Kada ovo uradimo možemo pregledati film – Control/Test Movie.

Sinhronizovanje zvukaDa bismo naterali zvuk da se reprodukuje onda kada to mi želimo, koristićemo se

opcijama za sinhronizovanje zvuka. Evo kako ćemo to uraditi:


U prethodnom primeru već smo ubacili zvučnu datoteku u prvi kadar. Kliknućemona prvi kadar da bismo je izabrali, a potom ćemo da otvorimo pano Properties. Na njemućemo da pritisnemo strelicu na desnoj strani polja Sync da bismo otvorili opcije zasinhronizovanje (Slika 148).

Slika 148

Objasnićemo svaku opciju.

EventZvuk koji je vezan za događaj dodaje se određenoj ključnoj tački na vremenskoj

osi. Zvučna sekvenca počinje da se reprodukuje kada klizač na vremenskoj osi dostigneodgovarajuću ključnu tačku I nastavlja da se reprodukuje sve dok se ne završi.

Start/StopOve opcije su povezane. Opcija Start zapoveda Flashu da započne reprodukovanje

zvučne sekvence kada klizač dostigne određeni ključni kadar, a opcija Stop zaustavljareprodukovanje.

StreamOva opcija omogućava da se reprodukovanje zvuka započne pre nego što se

preuzme cela zvučna datoteka.

Obrada zvučne sekvenceU Flashu možemo vršiti I obradu zvučne sekvence. To ćemo uraditi na sledeći

način:

U prethodnom primeru već smo izabrali zvučnu sekvencu tako što smo pritisnuliprvi kadar sloja Zvuk. Na panou Properties kliknućemo na dugme Edit (Slika 149).

Slika 149

Otvoriće se okvir za dijalog Edit Evenlope (Slika 150).


Slika 150

Možemo koristiti gotove efekte u listi Effect. Ručicama za podešavanje (malikvadrati) možemo menjati jačinu zvuka, skraćivati zvučnu datoteku… Kada smozadovoljni sa podešavanjem pritisnućemo OK.

Dodavanje zvuka dugmadimaVeoma zanimljiva interakcija jeste dodavanje zvuka dugmadima. Da bismo to

izveli, uradićemo sledeće:Prvo ćemo zvučnu sekvencu uvesti u biblioteku na već opisani način –

File/Import/Import to Library.Potom ćemo da napravimo dugme (već opisani način Insert/New symbol/Button).

Na vremensku osu dugmeta dodaćemo još jedan sloj za zvuk i promeniti mu nazivu Zvuk (Slika 151).

Slika 151

Kadar Down ćemo pretvoriti u ključni (Slika 152).


Slika 152

Sa panoa Properties na listi Sound izabraćemo zvučnu sekvencu. Proverićemo dali je izabrana i opcija Event (da bi se sekvenca izvršila do kraja) i brojač petlje Looppostavljen na nulu (da bi se zvuk reprodukovao samo jednom) (Slika 153).

Slika 153

Snimićemo dokument i pregledati kako radi dugme – Control/Test Movie.

UVOZ I UPOTREBA VIDEO SADRŽAJA

Često ćemo imati potrebu da se u našim filmovima nađe i određeni video sadržaj.Opisaćemo način kako se u Flash uvozi video.

Izabraćemo komandu File/Import/Import to Library. Izabraćemo video datotekukoju želimo da uvezemo i kliknuti Open (Slika 154).

Slika 154

Otvoriće se ovakav okvir za dijalog. Pritisnućemo Next (Slika).


Slika 155

Na sledećem okviru za dijalog izabraćemo Embed video in SWF and play intimeline. Pritisnućemo Next (Slika 156).

Slika 156

Opet pritisnemo Next (Slika 157).


Slika 157

Još jednom pritisnemo Next (Slika 158).

Slika 158

Potom pritisnemo Finish (Slika 159).


Slika 159

Film će se imoprtovati u biblioteku (Slika 160).

Slika 160

Dodavanje video sadržaja filmovimaVideo sekvenca koju smo uvezli nalazi se u biblioteci (Slika 161).


Slika 161

Pritisnućemo početni kadar i prevući video sekvencu na pozornicu. U zavisnostikoliko video sekvenca traje, odredićemo drugi ključni kadar (Slika 162).

Slika 162

Snimićemo dokument i pogledati film – Control/Test Movie.

Možda ćemo poželeti da utičemo na početak reprodukcije video sekvence i njenozaustavljanje. Pokazaćemo kako ćemo to izvesti.

Prvo ćemo kreirati Movie Clip u koji ćemo smestiti našu video sekvencu.Izabraćemo Insert/New Symbol i izabrati Movie Clip. Daćemo mu naziv probni film(Slika 163).

Slika 163


Kliknućemo na prvi kadar i video sekvencu prevući na pozornicu. Centriraćemo gana pozornici pomoću panoa Align (već opisano). U zavisnosti od trajanja video sekvenceoznačićemo i drugi ključni kadar (Slika 164).

Slika 164

Ubacićemo novi sloj i dati mu naziv Akcije (Slika 165).

Slika 165

U njegov prvi kadar ubacićemo ActionScript – funkciju stop, da onemogućimoautomatsko pokretanje video sekvence (Slika 166).

Slika 166

Izabraćemo komandu Edit/Edit Document (Slika 167).


Slika 167

Sada ćemo prvući Probni film na pozornicu (Slika 168).

Slika 168

Daćemo mu određeno ime na panou Properties, recimo film (Slika 169).

Slika 169

Ispod ćemo dodati dugme za reprodukciju i zaustavljanje. Preuzećemo ih izWindow/Common Libraries/Buttons (Slika 170).


Slika 170

Izabraćemo folder playback rounded i ubaciti dugmad kao na Slici171.

Slika 171

Izabraćemo komandu Window/Behaviors (Slika 172).

Slika 172

Kliknućemo na prvo dugme, dugme za reprodukciju. Pridružićemo muActionScript. Na panou Behaviors pritisnućemo krstić, izabrati Movieclip/Goto and Play atframe or label (Slika 173).


Slika 173

U okviru za dijalog, koji će se pojaviti izabraćemo film i pritisnuti OK (Slika 174).

Slika 174

Kliknućemo na dugme za zaustavljanje, ponoviti isti postupak, samo izabratiMovieclip/Goto and Stop at frame or label (Slika 175).


Slika 175

Snimićemo dokument I pogledati kako radi – Control/Test Movie.

OBJAVLJIVANJE SOFTVERA

Film, koji uradimo u Flashu, možemo da objavimo u različitim formatima. Toćemo uraditi na sledeći način:

Izabraćemo komandu File/Publish Setting (Slika 176).

Slika 176

Pojaviće se okvir za dijalog u kome možemo izabrati željeni format /Slika177).


Slika 177

Kada izaberemo format, upisaćemo naziv dokumenta, mesto gde želim da gaspremimo i pritisnemo Publish. Film je objavljen.

kako do interaktivnog softvera u nastavi.pdf

Documents