osnove adobe flash programa - · pdf fileosnove adobe flash programa 1. šta je flash?...
TRANSCRIPT
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.