1 | P a g e

Osnove Adobe Flash programa

1. Šta je Flash?

Flash je aplikacija koju koristimo za razvoj multimedijalnog sadržaja koja se sastoji od

niza alata koji nam omogućuju:

rad sa vektorskom i rasterskom (bitmap) grafikom

kreiranje textualnih polja

animaciju i interaktivnost

jednostavne i složene navigacijske sheme

upotrebu zvuka i videa

povezivanje i razmjenu podataka sa drugim aplikacijama i skriptama

upotreba gotovih komponenti u našim projektima

Flash kao proizvod nije samo orijentisan na grafičku stranu, on takođe koristi jedan jako

moćan programski jezik koji se zove “ActionScript” (trenutna verzija 3.0). ActionScript je

objektno orijentirani programski jezik koji omogućava stvaranje kompleksnih Flash

animacija, upravljanje i stvaranje dinamičkog sadržaja, dinamičku kontrolu zvuka i videa

, kao i još mnogo toga. Ako nemate instalirani Flash možete skinuti trial verziju koja je

važeća za 30 dana.

2. Što je to ActionScript?

Flash trenutačno podržava dva načina rada s obzirom na vrstu ActionScript jezika koji

odaberete kao bazu flash datoteke. ActionScript 3.0 donosi prednosti za Flash

programere, no isto tako i znatno težu sintaksu, veću nepreglednost sa stajališta web

dizajnera. Možemo reći da je ActionScript 3.0 preferenca za web developera, a

ActionScript 2.0 ostaje odabir web dizajnera zbog svoje iznimne fleksibilnosti te

intuitivnog načina rada s obzirom na dizajn.

3. Koji su formati Flash datoteka?

Flash sadržaji ili datoteke nalaze se u 2 formata a to

su radna(.fla) i završna(.swf) verzija.

(.fla) datoteke su radne datoteke koje možemo ponovo uređivati dok su (.swf) završne

datoteke koje su gotove i one se stavljaju na web stranice.

Za pregledavanje (.swf) sadržaja potreban je Flash Player kojim ćemo pokretati željeni

sadržaj.

2 | P a g e

4. Što je to Flash Player?

Flash Player je Adobeova aplikacije koja služi za izvršavanje Flash(.swf) datoteka. Sama

aplikacija je deo Flash razvojne okoline i u trenutku instalacije Flasha na vaš računar,

instalira se i Flash Player.

5. Koje su prednosti Flash tehnologije?

PREDNOSTI FLASH TEHNOLOGIJE SU VELIKE. NABROJAĆU SADA SAMO NEKE OD NJIH:

Visoko stilizovani web projekti

Animacija, zvuk, video

Nezavisnost od internetskih pretraživača

Brz razvoj multimedijalnih projekata

Jednostavno povezivanje sa serverskim tehnologijama (PHP, ASP.NET…)

Tržišna zastupljenost Flash Playera

6. Kako izgleda Flash?

Evo kako izgleda početak kada otvorimo Flash .

Koristićemo ActionScript 2.0 pa kada se pritisne na “File->New… ->Flash File(ActionScript

2.0)” otvoriće se radna okolina Flash-a, a to izgleda ovako.

3 | P a g e

6.1. GLAVNI MENI

“File” nam daje opcije da kreiramo novi document “New”, da otvorimo postojeći

dokument i da spremimo dokumente, da “uvozimo” i “izvozimo” simbole u biblioteku

(library) i sl.

“Edit” ima uobičajene naredbe kao što su “Copy”, “Paste”, “Cut”, ovde se nalaze i

specijalne naredbe kao što je “Paste In Place” ,zatim kopiranje i premeštanje sličica

animacije (Cut/Copy/Paste Frames).

“View“ nam daje opcije kakav pogled želimo na sceni, da li želimo “Grid” tj. mreže koje

su vidljive samo zbog preciznijeg crtanja, ili “Ruler” za precizno smeštanje elemenata na

sceni i sl.

“Insert” nam pruža opciju dodavanja layera, frejmova, scena, time line efekata,

stvaranja simbola.

“Text” najobičnija opcija za obradu texta.

“Control” nam daje opcije za kontrolu animacija pomoću osnovnih

naredbi “Stop”, “Play”,“Rewind”, “Forward”.

“Debug” omogućava Flash programerima ispravljanje grešaka u delovima filma pisanim

ActionScript programskim jezikom.

“Window” otvaranje pojedinih panela i biblioteka simbola koji dolaze zajedno sa Flash

aplikacijom.

“Help” za pomoć u radu sa aplikacijama.

4 | P a g e

6.2. Što je to “Scena”?

Scena je mjesto gde sve što radimo stavljamo na nju, ona ja na početku veliki beli

pravugaonik u sredini same aplikacije, nemoguće je promašiti . Na njoj se izvodi sve

ono što želimo da bude prikazano.

6.3. Vremenska linija?

Vremenska linija (timeline), vrlo je važan dio Flash radne okoline. To je mesto gde

animiramo sadržaj animacije, mesto za kontrolu i pregled animiranog sadržaja, za rad sa

slojevima (layers). Vremenska linija, zapravo, omogućava stvaranje animacije menjajući

sadržaj i izgled scene u nekom vremenskom periodu. Glavni delovi vremenske linije su

slojevi, kadrovi i klizač (playhead).

Desno od slojeva nalaze se kadrovi koji pripadaju tom sloju. Kadrovi u Flash animaciji

predstavljaju vreme i događaje, dok klizač pokazuje koji se kadar trenutačno prikazuje

na sceni (određeni deo animacije u vremenu).

Evo kako izgleda “Vremenska linija”:

6.4. Paneli?

Na panelima su grupirane kontrole za upravljanje različitim opcijama Flasha (boje, scene,

transformacije, pozicioniranje i sl.).

“Info” panel nam pokazuje širinu, visinu, koordinate, RGB boju objekta i trenutnu

poziciju miša

“Transform” precizno mjenja veličine, rotiranja, iskrivljenja objekata (skew).

5 | P a g e

“Align” poravnava objekte jedan prema drugome (u odnosu na scenu).

“Color” rad s bojama.

“Properties” je jako bitan panel zato što služi za uređivanje i promenu svojstava bilo

kog objekta, animacije, slike.

6 | P a g e

“Alati za “RASTERSKU” i “VEKTORSKU” grafiku”

“SELECTION” označavanje/modificiranje objekta na radnoj površini.

“SUBSELECTION” služi za menjanje označenih tačaka

“FREE TRANSFORM” transformiranje objekta (veličina/rotiranje/iskrivljenja)

“GRADIENT TOOL” transformacija popuna

“LASSO” označavanje nepravilnih/pravilnih oblika

“LINE” crtanje ravnih linija

“PEN” crtanje krivulja

“TEXT” polja za unos teksta

“SHAPE TOOLS” alati za crtanje oblika kao što su elipse, kvadrati, poligoni i sl.

“PENCIL” ručno crtanje linija

“BRUSH” ručno crtanje popuna

“INK BUCKET” menjanje/dodavanje boja i vrste konture (stroke)

“PAINT BUCKET” mijenjanje/dodavanje boja i vrsta ispuna (fill)

“EYEDROPPER” prenos boje/vrste postojeće linije s jednog na drugi efekat

“ERASER” briše linije i/ili popune

“HAND” služi za pomeranje po uvećanoj sceni

“ZOOM” služi za uvećanje/umanjenje prikaza scene

7 | P a g e

“STROKE COLOR” služi za postavljanje boja linija i kontura likova

“FILL COLOR” služi za odabir boje popuna

“BLACK&WHITE” služi kao brzo postavljanje crno-bele kombinacije

za “STROKE” I “FILL COLOR”

Svaka animacija ima početnu i krajnju tačku na vremenskoj osi. Početna i krajnja animacija su i najvažnije slike u njoj-nazivaju se ključnim slikama. Sve slike između su varijacije koje premošćavaju razlike između početne i krajnje slike.

Kada u Flashu pravite animaciju, najpre ćete na prvoj slici na vremenskoj osi nacrtati objekat koji želite da animirate. Zatim treba da odlučite koliko dugo će trajati animacija, pa dodajete drugu ključnu sliku na odgovarajuće mesto na vremenskoj osi. Ako koristite standardnih 12 slika u sekundi, a želite da animacija traje 3 sekunde, pritisnućete 36. sliku, zatim izabrati komandu Isert Keyframe da bi ste 36. sliku proglasili ključnom. Zatim ćete pomeriti objekat na mesto na kome želite da bude kada se animacija završi. Dodajemo efekat animacije u prvom kadru. Flash će sam napraviti međuslike koje stvaraju iluziju pokreta.

Kontura i popuna objekta koji nacrtate su odvojene. Da bi se objekti grupisali, najpre se izaberu objekti koje želite da uključite u grupu. To može da se radi tako što se pojedini objekti pritisnu, dvaput pritisnuti objekte koji su nacrtani kao posebni, ili tako što ćete iscrtati okvir za izbor oko određenih objekata pomoću alatke u obliku strelice.

8 | P a g e

Aktivirajte komandu Modify Group da bi se izabrani objekti grupisali. Da bi se razgrupisali objekti, izabere se grupa objekata pa komanda ModifyÄUngroup. Određene tehnike animacije mogu se primeniti samo na grupisane objekte.

1. Najpre treba odrediti izgled animacije ( velicina,

boja pozadine... ). Izaberite Modify->Document...

i namestite zeljene velicine. Ili kliknite u donjem

panelu Properties pored Size.

2. Izaberemo prvi kadar i sa padajuće liste Tween

umesto None, selektujte Shape.(u panelu

Properties)

2. Sledeća potrebna stvar je da film traje.

Pomeranjem klizača po vremenskoj liniji

zadajete broj frejmova.(u zavisnosti koliko

sekundi hoćete da traje animacija)

3. Sada mozete nacrtati ili ubaciti neku sliku.

Ako cemo crtati loptu, odaberite Oval Tool i

naslikajte loptu u prvom frame-u. Ako cete

ubaciti sliku, onda na selektovanom prvom

kadru uradite File>Import>Import to stage. Nije

bitno ako je slika veća od planirane dimenzije

filma, jer ce ce samo taj planirani deo biti vidljiv.

Ukoliko je importovana slika veca, konačni

9 | P a g e

efekat je kao da naše vidno polje (prozor),

pomera preko neke velike slike, a ukoliko je

manja onda se jednostavno sličica pomera u

okviru filma. Pomocu izabrane strelice iz alata

namestamo koji deo slike zelimo da se vidi u

prvom kadru.

4. Izaberemo poslednji kadar na vremenskoj osi.

Ubacimo ključni frejm Insert->Timeline->Blank

Keyframe ili desnim klikom odaberite Insert Blank

Keyframe. Blank Keyframe je prazan frejm koji

ostaje prazan sve dok se ne unese neki objekat ili

se dogodi neka promena, na primer, iz jednog

oblika u drugi.

5. Naslikajte novi objekat, na primer pravougaonik,

pomocu Rectangle tool ili ubacite neku gotovu

sliku.

Sada je uspostavljena promena oblika između

prvog i poslednjeg kadra. Možete pomerati

Playhead pločicu(klizač) levo desno po

vremenskoj osi i videti faze transformacije.

7. Učinjeno testiramo sa Enter ili Control > Play ili

Control > Test Movie.

10 | P a g e

Importovana slika se zove instanca.

Već u sledećoj temi ćemo od instance kreirati Symbol, sto vece filmove cini efikasnijim i manjeg memorijskog kapaciteta ( u kilobajtima). Selektovanu instancu mozemo konvertovati u simbol sa Insert> Convert to Symbol (F8). Opcijom Insert>New Symbol... (Ctrl+F8) mogu se kreirati tri tipa simbola: Graphics, Button, Movie Clip.

Zadržaćemo se sada samo na prvom. Pomoću alata za crtanje, koji su slični onima u drugim programima za crtanje i pisanje teksta mozemo praviti razne nove simbole. Kada ih napravimo oni se nalaze u biblioteci koju otvaramo sa Window>Library. Svaki film pravi svoju biblioteku koju mozemo posebno otvoriti, bez otvaranja filma. To prakticno znaci da objekte koje smo vec napravili u nekom drugom filmu, projektu, mozemo koristiti u svakom sledecem. Sa Insert>Layer dobijamo jos jedan layer na kome mozemo praviti nove jednostavne animacije sa novim simbolima i sa drugačijim pravolinijskim pokretima...

8. Sačuvajte vaš rad sa File>Save As... ( .fla) i sa

File>Export Movie... (.swf).

11 | P a g e

U ovoj temi biće kreiran objekat na pozornici,

konvertovan u Symbol, a potom ce biti dodeljen

efekat Motion Tween.

1. Naslikajte neki objekat ili ubacite sliku kao u

prethodnoj vežbi. Ako ćete da naslikate zelenu loptu,

odaberite alatku Oval Tool i odgovarajuce ispunjenje

lopte zelenom bojom.

2. Kliknite na alatku Select Tool ili duplim klikom na

objekat koji ste naslikali, na primer loptu. Desnim

klikom miša odaberite Convert to Symbol. Kao sto je

rečeno u prethodnoj temi, mogu se kreirati tri tipa

simbola: Graphics, Button, Movie Clip.

Primetićete plavu liniju oko naslikanog objekta. To

je odlika simbola.

3. Prvi kadar: sa liste Tween umesto opcije None

odaberite opciju Motion (u panelu Properties) ili

Create Motion Tween.

4.Zadajte trajanje animacije od 2s i u poslednjem

kadru (48) ,odaberite desnim klikom miša opciju

Inset KeyFrame ili sa menija Insert-> Timeline -

>KeyFrame. U prosloj vežbi smo umetnuli Blank

Keyframe, a sada KeyFrame. U čemu je razlika?

KeyFrame je fragment vremenske ose u kom se

12 | P a g e

događa neka aktivnost, bilo da je u frame-u nesto

nacrtano ili da se menja neki objekat u drugi.

4. Sada pomerite objekat konvertovan u simbol do

cilja, odnosno do pozicije u kojoj želimo da se nadje

na kraju kretanja ,u ovom slučaju u frame-u 48.

6. Ako ste zadovoljni svojim radom, efekat možete

videti sa Ctrl+Enter ili sa Contorl>Test Movie,

sačuvati ga sa File>Save As... ( .fla) i sa File>Export

Movie... (.swf).

Putanja po kojoj želimo da se objekat kreće

crtamo nekim od alata sa Toolbar-a, recimo

olovkom, ali na posebnom layeru koji dodajemo na

jedan od dva nacina, ili Insert> Timeline >Motion

Guide ili ako se desnim dugmetom klikne na layer na

kome ce biti objekat koji ce se kretati i izabere opcija

Add Motion Guide. U prvom kadru tako izabranog

layera se nacrta putanja. Opcije uz ovaj alat (olovka)

mogu buducu liniju zaokrugljivati ili zaostravati.

Pored toga vec nacrtana linija se moze dodatno

menjati. Ako se ponovo izabere strelica na paleti

alatki, odnosno Selection Tool(V) i postavi preko

13 | P a g e

linije, onda ona pored sebe dobija mali luk, koji

oznacava da se linija moze proizvoljno menjati,

kriviti ili ispravljati... Putanja bi trebalo da bude

otvorena kriva!

Dalje, treba na prvom layeru u prvom kadru staviti

efekat Create Motion Tween. Zadamo trajanje

animacije, povlačenjem klizaca po vremenskoj liniji

do 48 kadra (ako želimo da animacija traje 2s, 72 za

3s). U poslednji kadar ubacimo Insert-Timeline-

Keyframe.

Kada se radi sa strelicom ponuđena je opcija Snap,

ikonica sa magnetom u obliku potkovice koja ovde

mora biti ukljucena, da bi se objekat vezao za

putanju. U prvom kadru se objekat veže (postavi) na

početak, a u poslednjem kadru, gde je opet

Keyframe, postavi se na kraj putanje. Sve sačuvate i

pokrenete animaciju komandom Control – Test

Movie.

(Primer ove akcije: pčela – uvozimo sliku-Import-

Import to Stage..., ili crtamo bilo koji objekat-npr.

kuglica)

U ovom slučaju objekat treba prethodno grupisati-

Modify-Group i pretvoriti u simbol-desni klik,Create

Symbol...

14 | P a g e

Napravite objekat na sredini scene koji ce se pojavljivati u vasem prvom kadru.

Zatim zadate efekat Create Motion Tween(desni klik na prvi kadar).

Odredite trajanje filma pomeranjem klizaca. U poslednji kadar ubacite KeyFrame.

Sada cemo zadati rotaciju objekta.

Izaberite iz palete Properties (koja stalno treba da vam je ukljucena) Rotate-CW smer rotacije i broj ponavljanja rotacije(npr.10,20,...)

Izaberite opciju File–>Save. Izaberite komandu Control–>Test Movie.

(Primer ove akcije: vetrenjača, ubaciti i dodatni lejer-Insert-Timeline-Layer za donji deo vetrenjače) Napomena: Deo objekta iskosite ili oblikujete alatkom Subselection Tool iz kutije sa alatkama. Objekat rotirate komandom Modify-Transform-Rotatae and Skew.

Izradom međuslika možete da postignete da se objekti povećaju ili smanje. Objekat će zadržati isti oblik, ali će posmatraču izgledati kao da je dalje ili bliže. Ova operacija se u Flashu naziva skaliranje. Za promenu veličine objekta koristimo komandu Modify-Transform-Scale. Nacrtajte krug na sredini scene (držite pritisnut taster Shift).

15 | P a g e

Izaberite čitav krug.

Izaberite komandu Modify–Group da bi ste konturu i popunu grupisali u jedan objekat.

U početnom kadru zadajte zadajte komandu Insert-Create Motion Tween.

Pritisnite sliku(kadar) na vremenskoj osi na kojoj želite da se završi animacija.

Zatim Insert–Timeline–Keyframe da bi ste napravili ključnu sliku.

Selektujte objekat i izaberite Modify-Transform-Scale, gde pomeranjem crnih kvadratića oko objekta menjate veličinu.

Obavezno sačuvajte dokument.

Izaberite Control–>Test Movie.

Postoji vise načina da se realizuje efekat fade in

(odnosno fade out). Najčešće se koristi Tween efekat

(Motion ili Shape izbor).

Tween efekat

Pri implementaciji stanja fade in-fade out razlikuje se

izgled objekta na vremenskoj liniji u prvom i

poslednjem kadru.

Zadamo Create Motion Tween u prvom kadru, pošto

smo nacrtali objekat.

16 | P a g e

U poslednjem kadru u kome zelimo da objekat

potpuno nestane treba prvo postaviti keyframe, a

zatim u panelu Properties iz padajuće liste Color

izabrati opciju Alpha . Podesite efekat

17 | P a g e

Flash importuje zvukove u wave formatu (*.wav), ali moze

primeniti nekoliko tipova kompresije medju kojima je i MP3.

Pored toga sadrzi i pomocnu biblioteku Libraries > Sounds,

gde ima dovoljno wave-ova za pocetak.

Insert > Layer koji ce nositi zvuk. Prevlacenjem

izabranog zuvka iz biblioteke na film, postavljen je prvi

zvuk. Ukoliko bi sada uzeli neki drugi zvuk i prevukli ga

ponovo, makar i izabrali neki drugi kadar, ovaj bi zamenio

prethodni...Zato je potrebno ako zelimo novi zvuk u n-tom

kadru da ubacimo prvo Keyframe, pa zatim i sam zvuk.

Zvuk se moze dodatno editovati: Na vremenskoj liniji,

dvoklik na zvuk ( plava "oscilatorna" kriva ) otvara prozor

Frame Properties, sa sekcijom Sound. Po x-osi imamo

duzinu filma a po y-osi jacinu zvuka, u dva prozora - levi i

desni kanal. Najjednostavnije je izabrati neki efekat,

recimo: Fade left to right da bi shvatili kako funkcionise

editor. Sinhronizacija filma sa zvukom se obavlja - logicno

preko Sync. Event, Start, Stop, Stream...

Event sinhronizuje zvuk sa pocetkom nekog

dogadjaja. Ovakav zvuk ce poceti kada film stigne do kadra

u kome se on prvi put pojavljuje i bice izveden do kraja, bez

obzira na duzinu film, tj. da li on jos traje ili je stao.

Start i stop su povezani. Start je isti kao i Event, osim

sto ako postoji neki zvuk koji se vec emituje, novi ce biti

startovan. A Stop zaustavlja zvuk na koji je primenjen i

kadru koji se izabere.

18 | P a g e

Stream sinhronizuje zvuk sa emitovanjem na web

sajtu. Ovaj zvuk ce stati kada se zavrsi i animacija. Efekti

Eventa i Streama su vidljivi tek kada se exportuje film.