Macromedia flash 8 lekcija. Učenje Macromedia Flasha. Linearna referentna točka
Do sada smo gledali Flash filmove koji se reproduciraju bez intervencije gledatelja od početka do kraja. Međutim, Flash također omogućuje stvaranje interaktivnih aplikacija u kojima korisnik može kontrolirati prikaz sadržaja. U ovoj lekciji počet ćemo istraživati elemente skriptnog jezika Action Script i pogledati kako se može koristiti za stvaranje interaktivnih aplikacija. Kao primjer, napravimo foto album s interaktivnim elementima sučelja. Ali prije nego što počnemo opisivati akcijsku skriptu, trebali bismo razgovarati o još jednoj vrsti simbola koju smo dosad ignorirali - simbolima gumba. Za izgradnju interaktivnog sučelja jednostavno su potrebni.
Stvaranje gumba
Gumb je interaktivni filmski isječak s četiri kadra. Kada simbolu dodijelimo vrstu gumba, Flash stvara vremensku crtu od četiri okvira za novi simbol:
Up-stanje je okvir koji odgovara situaciji kada gumb nije pritisnut i pokazivač miša se ne nalazi iznad gumba;
Okvir iznad stanja koji prikazuje izgled gumba kada se pokazivač miša nalazi iznad gumba, ali gumb nije pritisnut;
U donjem stanju ovaj okvir prikazuje izgled gumba kada se pritisne;
Hit state definira područje u kojem gumb reagira na klik mišem; ovo područje nije vidljivo u isječku.
Za kreiranje gumba pokrenite naredbu Insert => New Symbol (možete upisati tipkovničku prečicu Control+F8). U dijaloškom okviru Stvori novi simbol koji se pojavi unesite naziv za simbol gumba (na primjer, but1) i odaberite vrstu simbola Gumb.
Flash će se prebaciti u način rada za uređivanje znakova, pružajući okvire Gore, Preko, Dolje i Hit. Prvi okvir, Gore, postaje prazan ključni kadar. Nacrtajmo nepritisnuti pogled na gumb u ovom okviru (slika 1).
Riža. 1. Gumb GORE okvira
Odaberimo drugi okvir, označen kao Over i koji odgovara stanju kada je kursor iznad gumba. Umetnimo ključni okvir u ovaj okvir (koristeći naredbu Insert => Keyframe), pri čemu će se pojaviti ključni okvir koji u potpunosti ponavlja sadržaj Up-frame-a. Promijenimo boju gumba, kao što je prikazano na sl. 2.
Slika 2. Gumb iznad okvira
Na sličan način dodajte sljedeći okvir (Donji okvir) i nacrtajte pritisnuto stanje gumba (Sl. 3).
Riža. 3. Gumb za donji okvir
Za sada nećemo ništa crtati u okviru Hit, ali ćemo se ovom okviru vratiti malo kasnije.
Idemo na glavnu scenu, pozovimo knjižnicu koristeći naredbu Window => Library i kreirajmo instancu simbola gumba povlačenjem na pozornicu (slika 4.)
Riža. 4. Stvorite instancu gumba povlačenjem iz biblioteke
Kao rezultat toga, dobivamo sljedeći film. Kao što se može vidjeti iz ovog filma, pritisak na tipku ne događa se samo kada mišem kliknemo na središnje (radno) područje tipke, već i kada kliknemo na okvir oko nje. To je zbog činjenice da ako hit okvir nije nacrtan, tada će radna površina gumba odgovarati gore okviru.
Da bi se tipka pritiskala samo u radnom području, potrebno je tu zonu definirati u Hit okviru, odnosno nacrtati tipku bez okvira (vidi sl. 5)
Riža. 5. Gumbi hit-frame
Nakon što dodamo potreban Hit-frame, dobit ćemo sljedeći film, u kojem kada kliknete na okvir, gumb se ne pritisne.
Da bi gumb bio interaktivan, potrebno je povezati činjenicu pritiska na gumb s izvršavanjem određenih naredbi, odnosno opisati određeni scenarij. Za izradu skripti u Flashu postoji poseban jezik koji se zove Action Script. U ovoj lekciji dotaknut ćemo samo mali dio mogućnosti ovog jezika, au budućnosti ćemo se vratiti na strukturu i sintaksu Action Scripta kako primjeri stvaranja interaktivnih filmova u Flashu budu postajali sve složeniji.
Razumijevanje akcijske skripte
Action Script je skriptni jezik - skup uputa koje kontroliraju elemente Flash filma. Akcijske skripte mogu se ugraditi u film ili pohraniti izvana tekstualna datoteka s nastavkom AS.
Kada se scenarij ugrađuje u film, može se ugrađivati u različite dijelove filma. Točnije, akcijske skripte mogu sadržavati ključne kadrove, instance gumba i instance filmskog isječka. U skladu s tim, skripte se nazivaju radnje okvira, radnje gumba i radnje filmskog isječka.
Akcijske skripte pokreću se kada se dogode određeni događaji koje pokreće korisnik ili sustav. Mehanizam koji govori Flashu koju naredbu treba izvršiti kada se dogodi događaj naziva se rukovatelj događajima.
Akcijska skripta ima vlastitu sintaksu, poput JavaScripta. Flash MX 2004 podržava Action Script iz svih prethodnih verzija Flasha.
Jedan od glavnih koncepata akcijske skripte su akcije - naredbe koje izdaju upute tijekom izvođenja SWF datoteke. Na primjer, gotoAndStop() šalje playhead na određeni okvir ili znak. Od riječi Actions dolazi naziv jezika - Action Script (doslovno - akcijska skripta). Upoznat ćemo se s većinom pojmova ovog jezika na konkretni primjeri.
Interaktivni foto album
Pokažimo korištenje gumba za upravljanje fotoalbumom - stvorite skup fotografija i dodajte dva gumba koji će se kretati kroz fotografije naprijed i natrag.
Postavimo prvu fotografiju na glavnu vremensku traku i dodamo gumb iz standardnog skupa. Da biste pristupili željenoj mapi, morate pokrenuti Windows naredba=> Upravljačke ploče Zajedničke knjižnice => Gumbi (Sl. 6).
Riža. 6. Dodajte gumb iz standardne knjižnice
Kao rezultat izvršavanja ove naredbe, pojavit će se ploča koja sadrži veliki skup unaprijed nacrtanih gumba različite vrste. Odaberimo, na primjer, Key Buttons (gumbi slični tipkama na tipkovnici), otvorimo odgovarajuću mapu, odaberemo tipku s lijevom tipkom (slika 7) i stvorimo instancu ovog gumba (povlačenjem na pozornicu).
Riža. 7. Elementi mape Key Buttons
Imajte na umu da kada postavite drugi gumb (tipka-desno) na pozornicu i pomaknete ga da se poravna s prvim gumbom, program daje savjet (isprekidana linija) koji vam omogućuje da točno postavite gumb (Slika 8).
Riža. 8. Automatsko poravnavanje tipki na istoj razini
Kako biste dodali skriptu potrebno je pozvati Action Script editor pomoću naredbe Window => Development Panels => Actions ili pritiskom na tipku F9. Ako planirate često pisati skripte, ovo je tipkovnička naredba koju vrijedi zapamtiti. Kao rezultat, pojavit će se uređivač akcijske skripte (slika 9).
Riža. 9. Ploče uređivača akcijskih skripti
Ako eksperimentirate s isticanjem različitih elemenata u sceni dok nadgledate poruke u uređivačkim pločama skripte akcije, vidjet ćete da će vam program reći na koji element možete "okačiti" kod. Ako odaberete okvir na pozornici, u gornjem lijevom kutu uređivačke ploče pojavljuje se natpis Akcije - Okvir, a klikom na gumb pojavljuje se natpis Akcije - Gumb, odnosno program traži da će uneseni kod biti odnose se na skriptu gumba. A ako odaberete fotografiju, pojavit će se poruka u polju za unos skripte: Na trenutni odabir ne mogu se primijeniti akcije (skripta se ne može primijeniti na ovaj odabrani objekt).
Gumbu ćemo dodijeliti skriptu. U najnovije verzije ActionScript ima mogućnost pisanja centraliziranog koda, odnosno koda koji se nalazi na jednom mjestu, a ta vam mogućnost omogućuje bolje razumijevanje velikih programa. Međutim, u jednostavnim primjerima (a to je ono što gledamo), dodjeljivanje skripte gumbu savršeno je prihvatljivo.
Dakle, za gumb sa strelicom lijevo, moramo formalizirati sljedeći scenarij: "Ako se gumb otpusti na određenom okviru, tada iz ovog okvira morate ići na prethodni okvir." U skladu sa sintaksom jezika Action Script (slika 10), to će izgledati ovako:
Prvi redak sadrži rukovatelja događajem gumba on(), koji ima format:
Dodajmo sada nekoliko ključnih okvira tako da se gumbi stvoreni u prvom okviru kopiraju u njih, i postavimo potrebne fotografije u novostvorene okvire.
Ako kreirani film pokrenemo na izvršenje, kadrovi će se kontinuirano reproducirati jedan za drugim, te stoga prije svega trebamo dati naredbu “Stop” na prvom kadru. Da biste to učinili, dodajte odgovarajuću naredbu u prvi okvir (slika 11).
Riža. 11. Skripta dodijeljena prvom okviru
Napomena: naredba više nije dodijeljena gumbu, već okviru. Činjenica da je okviru dodijeljen skript zabilježena je u glavnom retku za uređivanje - malo slovo "a" pojavljuje se iznad podebljane točke u oznaci okvira.
Kao rezultat, dobili smo sljedeći film.
Ako imamo samo nekoliko okvira u foto albumu, tada su dva gumba - “Naprijed” i “Natrag” sasvim dovoljna, ali ako je skup fotografija velik, onda je poželjno imati i gumbe koji povezuju na početak i kraj filma. U sljedećem primjeru ćemo dodati odgovarajuće gumbe: “Na prvi okvir” i “Na zadnji okvir”. Možete odabrati gumbe odgovarajuće mnemotehnike iz standardne biblioteke gumba iz mape Circle Buttons (Sl. 12).
Koristeći predloženi primjer, upoznat ćemo se s drugom naredbom, gotoAndStop(), koja vam omogućuje da prijeđete na željeni okvir i zatim se zaustavite.
Riža. 12. Gumbi iz mape Circle Buttons
Stavit ćemo kod na gumb za odlazak na prvi okvir (treći slijeva na slici 13), kao što je prikazano na slici. 13.
Riža. 13. Skripta za gumb “U prvom okviru”.
U slučaju fotoalbuma od pet okvira, dodajte prijelaznu skriptu "Do zadnjeg okvira" na zadnji gumb:
Automatizirano pisanje skripte
Do sada smo sve naredbe upisivali ručno, ali ActionScript uređivačke ploče pružaju cijela linija usluge za automatizirano pisanje skripti. Razmotrimo te mogućnosti.
Riža. 14. Automatizirani alati za skriptiranje
Uređivačka ploča Action Script omogućuje odabir, povlačenje, preuređivanje i brisanje naredbi.
Pokažimo kako možete napisati istu skriptu za gumb "Naprijed" na automatizirani način. Odabirom mape Movie Clip Control (gornji lijevi prozor na sl. 14), možete pristupiti on event handler-u, a zatim trebate dvaput kliknuti na odgovarajuću stavku ili povući izraz u polje za pisanje skripte u Drag and Način pada.
Riža. 15. Savjet za dovršavanje izraza
Kao rezultat toga, na radnom polju će se pojaviti traženi izraz i ovakva naznaka (slika 15): odaberete željenu naredbu iz izbornika i izraz se automatski dovršava. Kao što se može vidjeti iz izbornika, možete odabrati ne samo stanje povezano s gumbima na ekranu - također možete odabrati iz izbornika Sl. Pritisak tipke od 15 točaka “
Riža. 16. Pozivi tipkama tipkovnice
Upotrijebimo naredbu keyPress
Riža. 17. Naredba nextFrame može se pronaći u mapi Timeline Control
Za tipku koja film odvodi na početak fotoalbuma, kao događaj možete odabrati iz izbornika pritiskom na tipku Home, a zatim (Sl. 18) na polje povući naredbu gotoAndStop, čime će se pojaviti još jedna pojavit će se savjet o mogućoj sintaksi ove naredbe.
Strelice u opisu alata omogućuju vam pregled različitih opcija sintakse. Program nudi dvije mogućnosti (sl. 18 i 19), odnosno nudi postavljanje scene i okvira ili samo okvira. U našem slučaju dovoljno je navesti samo Frame. Ako je naziv scene izostavljen, zadano je skočiti na kadar trenutne scene.
Riža. 18. Savjet o mogućoj sintaksi naredbi
Riža. 19. Trokutasta strelica omogućuje pregled opcija sintakse
Nakon što svim gumbima dodijelimo odgovarajuće gumbi tipkovnice, dobit ćemo sljedeći filmić, gdje će se listanje fotografija odvijati s tipkovnice, a klikanje mišem na tipke na ekranu neće uzrokovati nikakve posljedice.
Je li moguće dati scenarij u kojem će različiti događaji dovesti do istih radnji? Ispostavilo se da možete - da biste to učinili, trebate ispisati popis naziva događaja u on rukovatelju događajima. Ako u popisu događaja iza prvog događaja stavite zarez, program će vam sam ponuditi izbornik (Slika 20).
Riža. 20. Kada u listu događaja unesete zarez, automatski se pojavljuje izbornik dodatnih naredbi
Dodajmo prvom događaju (pritisak tipke na tipkovnici) drugi događaj (otpuštanje tipke na ekranu):
uključeno (pritisnite tipku" |
Ponovimo postupak za preostale gumbe i kao rezultat ćemo dobiti foto album u kojem će se fotografije pomicati i mišem i tipkovnicom (originalnu FLA datoteku možete dobiti na poveznici).
U razmatranom primjeru koristili smo prijelaz prema broju okvira, ali ova metoda nije uvijek prikladna: ako se numeriranje okvira promijeni tijekom procesa uređivanja filma, logika se može pokvariti. Pogodnije je koristiti prijelaz pomoću oznake okvira. Pogledajmo primjer koji zahtijeva ne samo listanje albuma, već i prelazak na različite odjeljke, odnosno složeniju navigaciju.
Neka se album sastoji od crteža, računalna grafika i fotografije.
Označimo prvi okvir odjeljka "crteži" Slike; slično ćemo dodijeliti oznake "grafika" i "fotografija" prvim okvirima ostalih odjeljaka.
Kreirajmo sloj za postavljanje naljepnica i nazovimo ga Lables. Da biste označili okvir, u panelu Svojstva potrebno je odabrati vrstu oznake Naziv i zapisati njen naziv. U našem slučaju, Slike (Sl. 21). Slično ćemo postaviti markere u okvire 5 i 10 (slika 22).
Riža. 21. Primjer dodjele oznake okviru
Sad dodajmo novi sloj i nazovimo to Radnje. U prvom ključnom okviru sloja radnji pozovite panel radnji okvir (pritiskom na tipku F9) i unesite naredbu stop () (vidi sl. 22)
Riža. 22. Scenarij za prvo snimanje
Dodajmo još jedan sloj pod nazivom Subjects (predmeti), u kojem ćemo dati naslove odgovarajućim okvirima: “Drawings” (Sl. 23), “Graphics” i “Photos”.
Riža. 23. Naslov za okvire odjeljka "Crteži".
Sada dodamo gumbe izbornika sa sličnim nazivima sa strane, koje ćemo postaviti na novi sloj pod nazivom Izbornik.
Ispišimo prvu stavku izbornika "Slike" s lijevog ruba i pretvorimo je u simbol gumba. Pomoću alata strelice odaberite tekstualni blok “Slike” i izvršite naredbu Modify => Convert to Symbol (ovu naredbu možete izvršiti i pomoću tipke F8), u panelu Convert to Symbol postavite tip simbola Button i definirajte njegov ime kao pictureButton (Sl. 24).
Riža. 24. Dodijelite naziv pictureButton gumbu za odlazak na odjeljak sa slikama
Kreirajmo četiri okvira za gumb "Crteži": prvi će jednostavno predstavljati izvorni tekst(Sl. 25), drugi je isti tekst samo u plavoj boji, treći okvir ćemo preskočiti (u ovom slučaju Down okvir će biti isti kao Over okvir), a u Hit okviru nacrtat ćemo pravokutno područje koji će definirati gumbe područja klika (Sl. 26).
Riža. 25. Gornji okvir slike Button
Riža. 26. Hit-okvir gumba pictureButton
Sada moramo priložiti skriptu novostvorenom gumbu. Da biste to učinili, odaberite gumb u Sceni 1 i pritiskom na F9 pozovite panel Radnje, a zatim unesite kod prikazan na sl. 27.
Riža. 27. Skripta za prelazak na okvir s oznakom
Namjena i struktura Flash programa
Nedavno je Flash postao moderan. Mnogi ljudi vjeruju da je Flash novi proizvod, ali to nije tako. Davne 1995. godine pojavio se mali program pod nazivom Future Splash Animator za vektorsku animaciju web grafike, a dvije godine kasnije, 1997., Macromedia ga preuzima i počinje razvijati proizvod pod novim imenom Flash.
Danas je Flash univerzalna, integrirana aplikacija koja kombinira uređivač grafike i zvuka, alat za animaciju i omogućuje vam stvaranje jedinstvenih interaktivnih multimedijskih proizvoda. S koristeći Flash možete napraviti isplativu, živopisnu animaciju za web, interaktivne obrasce, igre, interaktivne prezentacije i mnogo više. Poznavanje Flasha korisno je ne samo za web dizajnere, već i za nastavnike, umjetnike i mnoge druge koji svoje ideje žele izraziti jezikom animacije. Danas nema potrebe za tim poseban studio dovoljno osobno računalo, Flash programi i malo strpljenja.
Osnovni elementi Flash Workbench-a
Prije nego počnemo opisivati alate za crtanje, moramo govoriti o elementima sučelja. Napravimo rezervaciju da čitatelja nećemo bombardirati svim informacijama o sučelju odjednom i prisiliti ga da se prisjeti svih detalja. Pružit ćemo dovoljno informacija o sučelju programa da završimo trenutnu lekciju. U svakoj lekciji ispitat ćemo nove elemente sučelja, objašnjavajući njihovu svrhu na konkretnim primjerima.
Kada prvi put pokrenete program, vidjet ćete nešto poput onoga prikazanog na sl. 1.
Riža. 1. Osnovni elementi programskog sučelja Flash 5.0
Opet svima otvorena datoteka odgovara vašoj radnoj površini. Na radnoj površini nalazi se okvir ili pozornica, pravokutno područje na ekranu u kojem se reproducira Flash film.
Alati za crtanje dostupni su za crtanje na radnoj površini (pogledajte alatnu traku na slici 1). To su oni o kojima ćemo prije svega govoriti.
Stvaranje svake animacije počinje renderiranjem statične slike. Brzo mijenjanje jedne slike drugom, uslijed čega se stvara dojam kretanja slike, jest animacija. Za kontrolu trajanja prikaza slika (kontrola animacije) koristite vremensku traku, odnosno Vremensku traku.
Na sl. 1 također predstavlja plutajuće ploče (plutajuće ploče koje se mogu pričvrstiti) ploče dizajnirane za konfiguraciju radnog okruženja Flasha. Dakle, pogledajmo osnovne alate za crtanje u Flashu.
Crtanje
Kontura, potez, ispuna
Prije nego počnete raditi s alatima za crtanje, trebali biste upoznati koncepte obrisa, poteza i ispune. Pogledajmo ih na jednostavnom primjeru.
Na alatnoj traci odaberite alat za uređivanje ovala (slika 2) i nacrtajte oval. Oblik će se automatski ispuniti bojom. (Ako držite tipku Shift dok crtate oval, oblik koji nacrtate bit će u obliku kruga.)
Riža. 2. Crtež se sastoji od obrisa, poteza i ispune.
Crtež se sastoji od obrisa, poteza obrisa i ispune (slika 2). Da biste odabrali obris figure, kliknite na gumb prikazan na sl. 3 crvena strelica. Kao rezultat toga, linija poteza i ispuna će nestati, ostat će samo obris (slika 4).
Riža. 3. Uklonite gumb za ispunu i potez
Riža. 4. Uklanjanjem ispune i poteza dobivamo konturnu liniju
servisna linija (ne prikazuje se prilikom ispisa). Pritiskom na gumb prikazan na sl. 3, vraća izbrisane elemente. Lako je promijeniti boju poteza i ispune. Boja ispune se može promijeniti pomoću gumba Boja ispune (slika 5). Nakon što odaberete novu boju u paleti (sl. 5), nacrtana figura se neće promijeniti, ali će prilikom crtanja nove elipse obris biti ispunjen novoodabranom bojom.
Riža. 5. Alati za boje ispune i poteza
Kako biste promijenili boju ispune u trenutnom obliku, trebate odabrati novu boju i koristiti alat Paint Bucket - označen je na sl. 6.
Riža. 6. Boja ispune nacrtanog oblika može se promijeniti pomoću alata Paint Bucket
Boja poteza također se može promijeniti. Da biste to učinili, odaberite alat Boja poteza (Promijeni boju poteza) - na sl. 7 crvena strelica pokazuje na njega. Nakon toga otvorit će vam se paleta u kojoj možete odabrati željenu boju, zatim trebate odabrati Ink Bottle Tool (označen je na sl. 7) i kliknuti na crtu poteza. Kao rezultat toga, bit će ispunjen odabranom bojom.
Riža. 7. Promijenite boju potezne linije
Na sl. 6 oval koji smo nacrtali prikazan je u većem mjerilu. Usput, promjena mjerila se postavlja na isti način kao u Photoshopu, kombinacijom tipki Ctrl i “+” ili Ctrl i “-”.
Debljina i stil poteznih linija također se mogu promijeniti. Da biste to učinili, morate zapovjediti Prozor > Paneli > Potez pozvati Stroke panel. U njemu možete prilagoditi stil potezne linije, njezinu debljinu i boju (Sl. 8).
Riža. 8. Iz izbornika Stroke ploče možete promijeniti parametre linije poteza
Ako odaberete Hardline stil linije (slika 8) i primijenite Ink Bottle Tool, dobit ćete liniju od jednog piksela. Linija Hardline nema debljinu, pa se u okviru debljine linije ne pojavljuje nikakva vrijednost. Debljina drugih linija, na primjer točkasta linija, može se mijenjati (slika 9).
Riža. 9. Primjer promjene vrste i debljine crte poteza
Dodatno fino podešavanje parametara linija vrši se na ploči Stil linije. Možete ga pozvati klikom na gumb označen crvenom strelicom na sl. 10. Na ploči Line Style možete, primjerice, promijeniti duljinu poteza i udaljenost između poteza točkaste linije. Ako je na Sl. 8, prihvaćene su zadane vrijednosti - 6 bodova za potez i udaljenost između poteza, zatim odabirom vrijednosti 10 i 12 točaka i ponovno pomoću alata Ink Bottle Tool, možete dobiti potez, kao na slici . 10.
Riža. 10. Fino podešavanje parametara linije
Dakle, pogledali smo osnovne koncepte - obris, ispunu i poteznu liniju - na primjeru crtanja ovala. Sada razgovarajmo izravno o alatima za crtanje.
Alat za pravokutnik
Alat Pravokutnik nalazi se pored alata Oval (slika 11).
Osim tradicionalnog pravokutnika, možete crtati pravokutnike sa zaobljenim rubovima. Za postavljanje ovog načina rada odaberite ikonu prikazanu na sl. 11 je označen crvenom strelicom. Kao rezultat toga, pojavit će se ploča Rectangle Settings, gdje definirate radijus zaobljenja, nakon čega će prilikom crtanja pravokutnika kutovi biti zaobljeni. Uređivanje ispune i poteza obrisa pravokutnika vrši se na isti način kao u slučaju ovala.
Riža. 11. Rad s alatom Rectangle
Alat za linije
Alat Line omogućuje crtanje ravnih linija (slika 12). Držeći pritisnutu tipku Shift, možete crtati okomite, vodoravne ili linije od 45°.
Riža. 12. Rad s alatom Line
U nekim slučajevima, ako, na primjer, trebate nacrtati jednakokračni trokut, korisno je koristiti mrežu. Linije mreže možete učiniti vidljivima pomoću naredbe Pogled > Mreža > Prikaži rešetku(slika 13).
Riža. 13. Prilikom crtanja pravilnih geometrijskih oblika, možete koristiti mrežu
Alat za olovku
Riža. 14. Rezultat rada s alatom Pencil s različitim postavkama (gornji red trokuta je Straighten mod, donji red je Ink)
Alat Pencil nalazi se ispod alata Oval. Na sl. Na slici 14 prikazan je rezultat rada s olovkom s različitim mogućnostima postavljanja, od kojih su ponuđene ukupno tri. S postavkom Straighten, alat pretvara drhtave linije ručno nacrtane konture u ravne linije; s postavkom Smooth, izglađuje linije, a u načinu rada Ink praktički ne mijenja izvornu konturu.
Alati za uređivanje linije, strelica i pododabir
Da bismo objasnili kako radi alat strelica, moramo pobliže pogledati strukturu konturne linije.
Nacrtajmo liniju pomoću alata Olovka, kao što je prikazano na sl. 15. Sastoji se od konture i poteza linije.
Riža. 15. Pomoću alata Subselect možete odabrati sidrišne točke i segmente obrisa
Riža. 16. Primjer pomicanja kutne točke
Riža. 17. Primjer promjene zakrivljenosti konture
Riža. 18. Linija poteza slijedi liniju obrisa
Do sada, govoreći o strujnom krugu, nismo spominjali njegovu strukturu. Kako bismo objasnili strukturu konturne linije, koristit ćemo se Subselect alatom, aktiviranim na sl. 15, i pritisnite ga duž obrisa crte. Kao rezultat, vidjet ćemo da se linija konture sastoji od segmenata i referentnih točaka (slika 15). Kada koristite alat Olovka, segmenti i sidrišne točke izrađuju se automatski. Kada uredimo liniju obrisa, linija poteza se automatski mijenja. Pokažimo kako možete urediti konturnu liniju pomoću alata strelice - označeno je na sl. 16.
Točke sidrišta mogu biti kutne ili glatke. Kada alat Strelica približimo liniji, njegov izgled se mijenja. Kada se približi kutnoj točki, pojavit će se kut pored slike strelice - u ovom načinu rada možete pomicati kutne točke (Sl. 16), a kada se približi segmentu ili glatkoj točki, pojavit će se slika luka - u ovom načinu rada možete promijeniti zakrivljenost konture (Sl. 17). Pri promjeni konturne linije linija poteza prati konturnu liniju (slika 18).
Nacrtajte elipsu i pomoću alata sa strelicom odaberite ispunu jednim klikom (boja odabrane ispune bit će posvijetljena bijelim točkama) i pomaknite je pomoću načina povlačenja i ispuštanja, kao što je prikazano na sl. 19. Ako dvokliknete, linija poteza uz ispunu također će biti odabrana. Dvostrukim klikom također možete odabrati linije koje se sijeku.
Riža. 19. Primjer pomicanja odabranog objekta alatom Strelica
Riža. 20. Izvorna slika
Razmotrimo druge vrste modifikacije odabrane slike. Pomoću alata Olovka nacrtajte određeni obris, na primjer list (slika 20). Odaberite alat Strelica i odaberite nacrtani list u pravokutni okvir. Sada možete obraditi odabrani objekt s dostupnim modifikatorima.
Na ploči s opcijama odaberite gumb Smooth i kliknite na njega nekoliko puta - obris lista će dobiti glatkiji obris (Sl. 21a).
Riža. 21. Korištenje modifikatora iz panela Options: a) Smooth vam omogućuje da izgladite konture slike; b) Ispraviti omogućuje izravnavanje kontura slike
Promjene konture nakon nekoliko klikova na gumb Ispravi prikazane su na sl. 21b.
Pomoću alata Lasso možete odabrati područje bilo kojeg oblika (slika 22).
Riža. 22. Primjer odabira pomoću alata Laso
Alat za četke
Riža. 23. Primjer rada s alatom Brush
Alat Kist stvara vektorsku putanju i ispunjava je odabranom bojom, ali, za razliku od prethodno spomenutih alata, ne formira crtu poteza (slika 23). Da biste razumjeli kakvu putanju stvara alat Kist, pogledajte sl. 24, gdje se koristi alat Subselect.
Riža. 24. Primjer konturne linije kreirane alatom Brush
Riža. 25. Mogućnosti prilagodbe alata za kist
Ploča s opcijama pruža tri opcije za prilagodbu alata Kist: načini (gornji gumb), veličine kista (srednji gumb) i oblik kista (donji gumb) (Slika 25).
Načini određuju prirodu interakcije nacrtane linije s već nacrtanim objektom (slika 26). Kao što se može vidjeti na slici, pri crtanju iste vrste vodoravnih linija u različitim načinima, slikanje se događa na različite načine:
Paint Normal prostor okvira se preslikava, linija poteza i ispuna objekta koji se slika;
Boja Ispunjava prostor okvira se boji i popunjava predmet koji se slika. Linija poteza nije preslikana;
Paint Behind je oslikan samo slobodni prostor okvira;
Paint Selection samo odabrano područje je obojano;
Boja Iznutra je samo ispuna koja je počela bojati.
Riža. 26. Različiti načini interakcije poteza kistom s prethodno nacrtanim objektom
Potrebno je objasniti učinak parametra Lock Fill - gumb koji odgovara ovoj naredbi s ikonom lokota prikazan je pritisnut na slici. 27.
Riža. 27. Primjer parametra Lock Fill
Kada je aktiviran parametar Lock Fill (pritisnuta je tipka), gradijent se primjenjuje na cijelo radno polje (Sl. 27), a kada nije aktiviran, prijelaz iz jedne boje u drugu vrši se na temelju poteza kista. (Slika 28).
Riža. 28. Opcija Lock Fill nije aktivirana
Gumica za brisanje
Gumica za brisanje omogućuje brisanje linija i ispune i ima niz različitih postavki. Na ploči s opcijama možete konfigurirati veličinu i oblik gumice za brisanje te također odabrati način brisanja (Sl. 29):
Erase Normal briše liniju poteza i ispunu objekta;
Erase Fillls ispuna objekta se briše (linija poteza se ne briše);
Erase Lines brišu se samo linije;
Brisanje odabranih ispuna Briše se samo odabrano područje.
Erase Inside briše se samo ispuna, a kada crtate crtu gumicom, briše se samo unutar konture u kojoj je linija započeta.
Modifikator Slavina omogućuje potpuno uklanjanje ispune ili linije.
Riža. 29. Različiti načini rada gumice
Alat za olovku
Do sada smo gledali alate koji automatski stvaraju obrise. Alat Olovka omogućuje vam izravan rad sa stazama. Pomoću njega možete kreirati ravne i zakrivljene segmente, prilagoditi duljinu ravnih linija i nagib zakrivljenih segmenata.
Linearna referentna točka
Odaberite alat Pen, kliknite mišem (postavili ste prvu sidrišnu točku), pomaknite kursor, kliknite mišem (ovo je druga Referentna točka). Rezultat će biti isprekidana linija, kao na sl. 30. Referentne točke prikazane na sl. 30 nazivaju se linearnim, jer su segmenti koji konvergiraju u njima linearni. Linearna točka nema vodilice.
Riža. 30. Primjer konstruiranja polilinije pomoću alata Pen
Glatka sidrišna točka
Riža. 31. Primjer stvaranja glatke krivulje pomoću alata Pen
Da biste stvorili glatku sidrišnu točku, odaberite alat Pen, kliknite lijevi gumb miša i, ne puštajući ga, lagano pomaknite miša, kao rezultat će se pojaviti glatka referentna točka i linija vodilja koja izlazi iz nje (Sl. 31). Rotiranjem i produljenjem linije navođenja možete promijeniti zakrivljenost sljedećeg segmenta.
Da biste stvorili otvorenu konturu, morate izvesti dvostruki klik prijeđite mišem preko posljednje točke. Otpustite tipku miša, pomaknite kursor i postavite sljedeću točku sidrišta; Ponavljanjem ovog postupka možete dobiti glatku liniju, kao na sl. 31.
Da biste zatvorili putanju, pomaknite kursor bliže početnoj sidrišnoj točki ili liniji putanje. Nakon što se kursor promijeni u olovku s krugom, kliknite mišem i obris će se zatvoriti.
Ako se dva neovisna segmenta spajaju u točki, tada je to kutna točka. Na primjer, ako spojite ravne i zakrivljene segmente, kutna točka će se pojaviti na njihovom sjecištu (Sl. 32).
Riža. 32. Na sjecištu ravnih i zakrivljenih segmenata formira se kutna točka
Točke sidrišta mogu se transformirati, pomicati i brisati.
Da biste kutnu točku pretvorili u glatku, odaberite alat Pododabir. Kliknite na kutnu točku i, držeći pritisnutu tipku Alt, povucite točku - postat će glatka i pojavit će se linija vodilja koja vam omogućuje promjenu zakrivljenosti segmenata koji se spajaju na ovoj glatkoj točki (Sl. 33).
Riža. 33. Primjer pretvaranja kutne točke u glatku
Prema zadanim postavkama, odabrane točke glatke krivulje prikazuju se kao šuplje točke, a odabrane kutne točke prikazuju se kao šuplji kvadrati.
Korištenje olovke i alata za pododabir za manipuliranje sidrišnim točkama
Slično, možete stvoriti točke na linijama nacrtanim drugim Flash alatima za crtanje: olovka, kist, linija, oval, pravokutnik i prilagoditi te linije.
Konkretno, na Sl. Slika 34 prikazuje putanju napravljenu pomoću alata Oval pretvaranjem jedne glatke točke u kutnu točku (pomoću alata Pen) i povlačenjem kutne točke pomoću alata Pododabir.
Riža. 34. Staza napravljena alatom Oval pretvaranjem jedne glatke točke u kutnu točku i povlačenjem
Alat za kapaljke
Alat Dropper koristi se za kopiranje boje i stila linija olovke, načina kista i ispuna. Kada pipetu pomaknete na crtu, kursor se mijenja - ispod pipete se pojavljuje ikona male olovke. Kada kliknete kapaljkom na liniji, svi parametri linije (boja, debljina, stil) se kopiraju, a kapaljka se zamjenjuje alatom Bočica s tintom, koji vam omogućuje da sve te postavke primijenite na drugu liniju.
Slično tome, kada je pokazivač iznad ispune, ispod kapaljke pojavljuje se slika lopatice, a kada je kursor iznad poteza kistom, slika kista pojavljuje se ispod kapaljke. Ove ikone pokazuju koje atribute kopirate pomoću alata Dropper.
Alat za kantu boje
Već smo spomenuli alat Paint Bucket - označen je na sl. 35, pogledajmo sada detaljnije njegove mogućnosti. Ovaj se alat koristi za popunjavanje zatvorenih (i djelomično zatvorenih) područja ispunama u boji, gradijentu i rasteru.
Ako ste radili s popunjavanjem bitmapa Photoshop program, onda vam je vjerojatno poznata situacija kada ispuna "izlijeva" preko ruba ne baš uredno iscrtanih kontura na onim mjestima gdje postoje "rupe". U Flashu je moguće nekoliko načina postavljanja alata za ispunu, što vam omogućuje da izbjegnete gore opisani nedostatak.
Postoje četiri opcije za konfiguriranje ovog alata:
Don’t Close Gaps ne zatvarajte praznine;
Zatvori male praznine zatvori male praznine;
Close Medium Gaps zatvoriti srednje razmake;
Zatvorite velike praznine zatvorite velike praznine.
Odaberite alat Olovka i nacrtajte otvorenu putanju (Slika 35). Odaberite način zatvaranja velikih praznina i ispunite obris. Kao što se može vidjeti sa Sl. 35, ispuna ostaje unutar obrisa, iako je izvorni obris bio otvoren.
Riža. 35. Primjer zatvaranja konture u modu Close Large Gaps
Sada pogledajmo gradijentnu ispunu i operacije s njom. Na ploči Ispuna odaberite opciju ispune na kartici Ispuna - Linearni gradijent. Zatim nacrtajte pravokutnik, ispunite ga linearnom ispunom s linearnim gradijentom, a unutar velikog pravokutnika nacrtajte manji pravokutnik (slika 36). Kao što možete vidjeti na ovoj slici, u malom pravokutniku prijelaz iz bijele u plavu realiziran je na manjem gradijentu. Ako koristite funkciju Lock Fill i ispunite oba pravokutnika, dobit ćete sliku kao na sl. 37. To jest, gradijent u unutarnjem i vanjskom pravokutniku bit će isti.
Riža. 36. Gradijent ispune u načinu rada kada parametar Lock Fill nije aktiviran
Riža. 37. Ispuna s gradijentom u načinu rada kada je aktiviran parametar Lock Fill
Kako biste promijenili smjer gradijenta ispune, trebate kliknuti na gumb Transform Fill na ploči s opcijama (klikne se na sl. 38), a zatim kliknite na ispunu, kao rezultat će se pojaviti oznake (sl. 38).
Riža. 38. Primjer izmjene gradijentna ispuna
Gornji okrugli marker služi za rotiranje gradijentne ispune, pravokutni služi za povećanje (smanjenje) gradijenta prijelaza jedne boje u drugu, a središnji okrugli služi za pomicanje središta gradijentne ispune.
Alat Paint Bucket također vam omogućuje da ispunite zatvorenu putanju rasterskom slikom. Pokažimo kako se ovaj postupak izvodi na jednostavnom primjeru. Pomoću alata Rectangle nacrtajte sliku monitora u čiji ekran će biti umetnuta rasterska slika (slika 39).
Riža. 39. Vektorska slika monitora u koju će se smjestiti rasterska slika fotografije
Zatim uvezite bitmapnu sliku koja će ispuniti zaslon. Bitmapu možete uvesti pokretanjem naredbe Datoteka > Uvoz i odabirom potrebne datoteke. Zatim idite na ploču Ispuna i promijenite metodu ispune u raster - Bitmap (Sl. 40).
Riža. 40. Ploča Ispuna, kartica Ispuna
Dakle, ako ispunite zatvorenu konturu unutar nacrtanog zaslon monitora, tada će se ispuniti raster, kao što je prikazano na sl. 41.
Riža. 41. Primjer rasterske ispune
Da biste uredili rastersku ispunu, trebate kliknuti na gumb Transform Fill na ploči s opcijama (klikne se na sl. 42), a zatim kliknite na rastersku ispunu; kao rezultat, pojavit će se okvir s markerima ( Slika 42).
Pomoću središnjeg markera rasterska se slika može povlačiti tako da se na iscrtanom monitoru prikaže željeni dio fotografije (slika 43).
Riža. 42. Okvir za modifikaciju rasterske ispune
Riža. 43. Pomicanjem središnjeg markera možete izrezati bitmapu
Ostali markeri omogućuju skaliranje rasterske slike, rotiranje i deformiranje (slika 44).
Riža. 44. Primjer deformacije ispune rastera
Nakon uvoza nekoliko fotografija, možete postaviti paletu iz koje možete odabrati raster za popunjavanje (Sl. 45), baš kao i paletu boja.
Riža. 45. Primjer palete s nekoliko bitmapa
Zbrajanje i oduzimanje oblika
Kada se dva oblika preklapaju, Flash ih spaja ili segmentira. Nacrtajte dva istobojna oblika - krug i pravokutnik (sl. 46), selektirajte pravokutnik (klikom na njega alatom strelica), a zatim prekrijte pravokutnik na krug i uklonite odabir s njega (klikom na ponovno pomoću alata Strelica).
Riža. 46. Početne brojke
Kao rezultat toga, dvije figure će se spojiti u jednu. Klikom na obris dobivenog oblika alatom Subselect možete se uvjeriti da je unutarnji obris nestao (Sl. 47).
Riža. 47. Primjer spajanja dva istobojna oblika
Sada napravite isti postupak s oblicima različitih boja. U tom slučaju unutarnja granica neće nestati (slika 48).
Riža. 48. Kod preklapanja oblika različitih boja, unutarnja kontura ne nestaje
Ako sada odaberete pravokutnik i pomaknete ga pomoću alata strelica, dio će biti izrezan iz kruga, kao što je prikazano na sl. 49.
Riža. 49. Dio kruga je izrezan u pravokutnik
Ponekad je korisno koristiti kombiniranje i oduzimanje obrisa oblika kako bi se dobio složeni obris.
Svaka animacija ili film sastoji se od niza sličica. Okvir je najmanji dio animiranog dokumenta ili filma. Stoga, da bismo stvorili animaciju, prvo moramo izraditi nekoliko okvira. Flash MX 2004 - mnogi alati za stvaranje animacija.
Flash MX 2004 vrste okvira
Ključni okvir - okvir dostupan za obradu. U animaciji će se ovaj okvir prikazati kako ga korisnik crta. Na vremenskoj traci ključni okvir se pojavljuje kao crni krug ako sadrži sliku, i bijeli ako nema slike.
Obični okvir je okvir koji će biti prikazan u animaciji, ali korisnik nije izravno sudjelovao u crtanju okvira. Bit će isti kao ključni okvir s lijeve strane ili, ako je napravljena ploča scenarija, onda okvir koji automatski generira program.
Storyboard - automatski prijelaz slike iz jednog ključnog okvira u drugi.
Fantomski okvir je prazna ćelija na vremenskom dijagramu u kojoj se može postaviti ili ključni ili obični okvir.
Formiranjem okvirne slike.
Najjednostavniji način za stvaranje animacije je mijenjanje crteža okvir po kadar, tj. Na svakom okviru mijenja se položaj objekta i njegove karakteristike ili se dodaju novi objekti, a uklanjaju stari objekti.
Flash MX 2004. Vježba 1
Formiranje crteža okvir po kadar: na svakom okviru dodaju se dijelovi crteža.
Sada možete saviti liniju i dobiti bilo koji oblik ove figure.
Omotnica - prikazuje pravokutni dijagram koji vam omogućuje promjenu i omotavanje oblika.
|
|
|
|
Nakon manipuliranja linijom koristeći Flash MX 2004 alate, dobio sam ovu brojku.
Prvi okvir je spreman, da bismo nastavili s izradom animacije moramo dodati još okvira. Kliknite na privremenu ploču, sljedeći okvir će postati plav. Kliknite desnom tipkom miša i odaberite Pretvori u ključne kadrove s padajućeg izbornika. Nakon ovih operacija, okvir 2, kao i prvi, bit će označen crnim krugom.
Neke oznake za manipulaciju okvirima u Flashu MX 2004: Umetni okvir, Ukloni okvire, Umetni ključni okvir, Umetni prazan ključni okvir, Očisti ključni okvir, Pretvori u ključne okvire, Pretvori u prazne ključne okvire, Gut okviri, Kopiraj okvire, Zalijepi okvire, Obriši okvire i Odaberi sve okvire - izvršavati operacije s okvirima navedenim u imenima naredbi.
Nakon što smo napravili nekoliko ključnih okvira, trebali bismo dobiti ovakvu sliku.
Kada transformirate ravnu liniju, možda ćete morati ne samo saviti ravnu liniju, već i promijeniti veličinu, odnosno slobodno se transformirati. U Flash MX 2004 to možete učiniti ovako.
Pomaknite pokazivač miša izravno na liniju i kliknite desnom tipkom miša. Odaberite Free Transform s padajućeg izbornika. Ili iz glavnog izbornika odaberite Modify => Transform => Free Transform. Sada možete saviti liniju i dobiti bilo koji oblik ove figure.
Sunce i zrake puno je lakše napraviti, pa za samotestiranje predlažem da to napravite sami.
|
|
|
Sada trebamo ozeleniti krošnju stabla. Ispunu poput oblaka nećemo moći napraviti jer je nastala od zatvorene figure. A kruna stabla ograničena je s nekoliko linija. Moguće ga je premazati četkom, ali neće biti baš zgodno.
Flash MX 2004 pruža mogućnost stvaranja više slojeva. Stoga, dodajmo novi sloj u pozadinu i prebojimo ga u području krošnje stabla.
Stvaranje novog sloja
Za izradu novog sloja slijedite ove korake:
1. Odaberite sloj scene dokumenta izravno ispred kojeg bi se trebao nalaziti novi sloj.
2. Ako stvarate običnu vrstu sloja, učinite jedno od sljedećeg:
- kliknite na gumb Insert Layer, prvi dolje lijevo u upravitelju slojeva;
- izvršiti naredbu Insert => Timeline => Layer (Umetni => Timeline => Layer) glavnog izbornika;
- pokrenite naredbu Insert Layer kontekstni izbornik odabrani sloj.
Povlačenje sloja mišem
Da biste povukli sloj mišem, učinite sljedeće:
1. Postavite pokazivač u prazan prostor na red sloja koji pomičete i pritisnite tipku miša.
2. Povucite pokazivač na mjesto u upravitelju slojeva gdje bi se ovaj sloj trebao nalaziti (između ostalih slojeva dokumenta ili u nekoj mapi slojeva). Ovo je mjesto označeno dvostrukom razdjelnom linijom koja se pojavljuje između slojeva ili zatamnjenjem ikone mape u retku mape slojeva. Čim se takva linija ili nijansa mape pojavi na željenom mjestu u upravitelju, otpustite tipku miša. Ako je prikazana dvostruka linija, odabrani sloj će biti umetnut na svoje mjesto, a ako je mapa bila zasjenjena, sloj će se pomaknuti na ovu mapu a nalazit će se na samom vrhu.
Na svakom sljedećem pikselu slobodno transformiramo okvir. Na kraju možete lagano pomicati okvir. Flash MX 2004 je za to izmišljen - da olakša stvaranje animacije. Napravite ključni okvir. Zatim pritiskom na tipku Alt povucite ključni okvir 10 okvira lijevom tipkom miša i pustite ga. Kada povučete, mali znak + bit će dodan ikoni kursora. Zatim mijenjamo preneseni okvir.
Sada će se međupromjene na slici automatski izračunati između dva okvira.
Macromedia Flash MX 2004 nudi nekoliko načina za stvaranje sekvenci animacije:
Efekti animacije - program sam stvara slijed okvira koji simulira određeni efekt u odnosu na određeni objekt;
Animacija okvir po kadar - korisnik kreira svaki kadar buduće animacije;
Automatic tweened animacija, ili transformacijska animacija, - korisnik zadaje početne i završne okvire, a program sam kreira međuslike na temelju softverske interpolacije.
Efekti animacije
Flash MX 2004 uključuje unaprijed napravljene efekte animacije (efekte vremenske trake) koji vam omogućuju stvaranje složenih animacija pomoću minimalni iznos akcije. Možete koristiti funkciju Efekti vremenske trake na sljedeće objekte:
Grafički objekti, uključujući oblike, grupirane objekte i grafičke simbole;
Rasterske slike;
Kada objektu dodate efekte animacije, Flash automatski stvara odgovarajući sloj, a sve transformacije pokreta i oblika potrebne za taj efekt implementirane su u taj sloj. Novi sloj automatski dobiva isto ime kao i efekt.
Kao primjer, stvorimo efekt "eksplozije" na tekstu. Da biste to učinili, upišite neku frazu ili riječ (slika 1), odaberite je pomoću alata strelica i izvršite naredbu Umetni => Efekti vremenske trake => Efekti => Eksplodiraj.
Riža. 1. Odabrani tekstualni objekt
Kao rezultat toga, pojavit će se istoimena ploča (Sl. 2), koja pruža mogućnost konfiguriranja niza parametara učinka.
Riža. 2. Ploča eksplodiranja
Prisutnost prozora za pregled omogućuje vam analizu različitih varijacija efekata bez napuštanja ploče Eksplodirati. Nakon što ste odabrali potrebne opcije, kliknite gumb u redu i dobit ćete nešto poput ove animacije.
Slični efekti mogu se primijeniti na rastersku sliku. Razmotrimo primjer s glatkim nestankom rasterske slike. Uvoz bitmape u scenu pomoću naredbe File => Import => Import to stage(Sl. 3) i primijenite efekt zamućenja na naredbu Umetni => Efekti vremenske trake => Efekti => Zamućenje video isječak .
Riža. 3. Rasterska slika, uvezen u scenu
Za uređivanje efekta animacije odaberite objekt povezan s efektom na pozornici iu prozoru koji se pojavi Svojstva kliknite gumb Uredi(Sl. 4) - kao rezultat će se pojaviti ploča Zamutiti.
Riža. 4. Gumb Uredi nalazi se na dnu panela Svojstva
U ploči Zamutiti možete ponovno promijeniti parametre efekta i spremiti nove postavke (slika 5).
Riža. 5. Ploča Zamutiti omogućuje promjenu postavki efekta
Stop motion animacija
Razmotrimo najjednostavniji primjer— komad papira se kreće od jedne točke na ekranu do druge rotirajući oko svoje osi.
Riža. 6. Prvi ključni kadar animacije
Nacrtajmo javorov list, na primjer, kao što je prikazano na sl. 6, - odgovarajući okvir na ploči Vremenska Crtaće postati siv i unutar njega će se pojaviti točka, što znači da je ovo ključna sličica. Ključni okvir je okvir u koji se postavlja ili mijenja sadržaj.
Riža. 7. Stvorite drugi okvir povlačenjem i transformiranjem prvog
Zatim kliknite desnom tipkom miša na susjedni okvir i umetnite drugi ključni okvir pomoću naredbe Umetni ključni okvir. Kao rezultat toga, kopija lista će se pojaviti u ovom okviru; pomaknite ga prema dolje (pomoću alata Strelica) i zarotirajte pomoću naredbe Modificiraj => Transformiraj => Slobodna transformiraj(slika 7).
Ponovimo postupak tako da u 6. kadru list zauzme konačnu poziciju (slika 8).
Riža. 8. Zadnji kadar animacije
Obratite pozornost na ploču Svojstva(Sl. 8) - tip objekta je naznačen na lijevoj strani. U svakom okviru, list je tipski objekt Oblik(forma), o ostalim vrstama objekata bit će riječi nešto kasnije.
Za izvoz filma kao SEF datoteke (Macromedia izvorni format za Flash filmove), pokrenite naredbu File => Export => Export Movie. Kao rezultat toga dobivamo sljedeći film leave1.fla). Rezultirajući film možete pogledati bez napuštanja Flash programa pomoću naredbe Kontrola => Testni film. Štoviše, da biste vidjeli koliko prostora zauzimaju pojedini kadrovi filma, trebali biste pokrenuti naredbu. Kao rezultat, vidjet ćemo da svaki od šest okvira zauzima oko 600 KB (slika 9). Dakle, veličina cijelog filma je 3686 bajtova.
Riža. 9. Gledanje filma u Bandwidth Profiler
Da biste procijenili je li to puno ili malo, razmislite kako se sličan film može napraviti pomoću automatske animacije, odnosno animacije transformacije kretanja.
Automatska animacija
Riža. 10. Objekt se automatski pretvara u grafički simbol
Pogledajmo kako možete napraviti istu animaciju i dobiti kompaktniju rezultirajuću datoteku. Odaberite nacrtani list na ekranu alatom Strelica i izvršite naredbu Insert => Timeline => Create Motion Tween, kao rezultat, letak će biti postavljen u okvir, a na ploči Svojstva pojavit će se poruka da odabrani objekt ima svojstva Grafički(slika 10). To znači da se animirani objekt automatski pretvara u grafički simbol. Sada ga više nije moguće proizvoljno uređivati alatom Arrow kao objekt tipa Shape. Upotreba simbola važan je koncept u Flashu. Jednom kada je simbol stvoren, može se koristiti više puta u filmu bez povećanja veličine rezultirajuće datoteke. Simboli se dijele na grafičke simbole, simbole gumba i simbole filmskog isječka. U ovoj lekciji ćemo pogledati grafički simbol, a kasnije ćemo se vratiti na druge vrste simbola. Svaki novi simbol odmah postaje dio biblioteke trenutnog dokumenta (slika 11).
Riža. 11. Svaki novi simbol postaje dio biblioteke
Ako pokrenete naredbu Prozor => Knjižnica, tada se možete uvjeriti da se simbol pojavio u biblioteci i da mu je prema zadanim postavkama dodijeljen naziv Tween 1. Kako biste simbolu dodijelili drugi naziv, samo dvaput kliknite na naziv i zamijenite ga željenim. Nakon što smo formirali grafički simbol, idemo na završni kadar naše animacije (neka to bude 15. kadar) i ubacimo ključni okvir (koristeći naredbu Insert Ključni okvir). U ovom okviru pojavit će se kopija simbola koju ćemo pomicati i rotirati oko svoje osi (naredbom Izmijeni transformaciju=>Slobodna transformacija), kao u prethodnom primjeru. Kao što se može vidjeti sa Sl. 12, svi okviri između dva ključna okvira obojeni su plavo, a strelica se proteže od prvog ključnog okvira do posljednjeg, što označava stvaranje animacije Motion Tween.
Riža. 12. Strelica na plavoj pozadini označava stvaranje animacije Motion Tween
Izvršenjem naredbe Kontrola => Testni film, dobivamo informacije prikazane na sl. 13.
Riža. 13. Gledanje filma u načinu Bandwidth Profiler
Unatoč činjenici da u ovom primjeru imamo 15, a ne šest okvira, kao u prethodnom, i animacija je glatkija, veličina rezultirajuće datoteke je manja - samo 900 bajtova. Kao što je vidljivo iz dijagrama (slika 13), informacije o objektu pohranjuju se samo u prvom okviru, au svakom novom okviru potrebno je zapamtiti samo nove pozicije lista. Ovo u prosjeku zauzima samo 20 bajtova.
Kako bismo ilustrirali pad lista s rotacijom oko ravnine lista, ponavljamo prethodni primjer, samo pri modificiranju posljednjeg ključnog okvira dodajemo naredbu Modify => Transform => Flip Horizontalno. Kao rezultat toga, dobivamo sljedeći film.
Sada pogledajmo primjer kada se list približava gledatelju. Da biste to učinili, u konačnom okviru, umjesto zrcaljenja ( Okreni vodoravno) povećat ćemo veličinu lista. Kako bi se izbjegao osjećaj usporavanja kada se objekt približi gledatelju, potrebno je povećati brzinu njegovog kretanja. Da biste postigli ovaj učinak, morate kliknuti na prvi okvir i pogledati odjeljak Olakšati u ploči Svojstva. Pozitivne vrijednosti za parametar Lakoća uzrokuju usporavanje kretanja, dok negativne vrijednosti uzrokuju ubrzanje kretanja. Odaberimo maksimalno ubrzanje objekta.
Riža. 14. Odaberite maksimalno ubrzanje objekta Ease = -100
Da biste to učinili, postavite vrijednost parametra Olakšati jednako -100 (slika 14). Rezultat je film. Imajte na umu da se prvi kadar može postaviti i iza pozornice, tada ćemo dobiti film u kojem će list uletjeti u kadar i krenuti prema gledatelju. Možete simulirati rotaciju lista oko pomaknutog centra simetrije. Nadam se da će i sam čitatelj moći eksperimentirati, otežavajući modificiranje konačnog okvira i time mijenjajući prirodu kretanja lista.
Iz prikazanih primjera vidljivo je da je automatska animacija pokreta učinkovita kada je transformacija objekta tijekom njegovog kretanja određena jednostavnim funkcijama (rotacija, skaliranje itd.). Ako je potrebno animirati složene pokrete (na primjer, pokret ruke lika iz crtića), tada animacija transformacije pokreta nije primjenjiva. Svaki okvir mora biti nacrtan ručno, odnosno koristi se animacija okvir po kadar, koja se sastoji od niza ključnih okvira. Dakle, animacija okvir po okvir najsvestranija je, ali ujedno i najzahtjevnija vrsta animacije, osim toga, stvara najteže datoteke. Kad god je moguće animaciju okvir po kadar zamijeniti automatskom animacijom, to je poželjno. Pogledajmo nekoliko primjera koji vam omogućuju korištenje automatske animacije kretanja prilikom simulacije leta.
Kretanje po zadanoj putanji
Flash vam omogućuje da postavite kretanje objekta duž zadane staze. Da biste postavili ovu putanju, pokrenite naredbu Umetni => Vremenska traka => Vodič za kretanje.
Kao rezultat toga, poseban sloj će se pojaviti iznad trenutnog sloja, koji će prema zadanim postavkama imati naziv Vodeći sloj 1.
Kliknimo na sloj trajektorije i pomoću alata olovke nacrtajmo liniju duž koje planiramo pomicati list (slika 15).
Riža. 15. Primjer zadavanja putanje gibanja
Sada idemo na prvi okvir (kliknite na njega mišem) i na ploču koja se pojavljuje Svojstva potvrdite okvir Snap(postavlja način prianjanja na putanju kretanja) - sl. 16.
Riža. 16. Parametar Snap postavlja način snimanja na putanju kretanja
Nakon što potvrdite okvir Snap, središte lista će se poravnati s putanjom kretanja. Pomoću alata strelica možete pomicati list duž putanje kretanja, ali ako pokušate otrgnuti list s putanje i postaviti ga pokraj njega, on će se povući i ponovno se "zalijepiti" za putanju kretanja (Sl. 17).
Riža. 17. Objekt kao da se svojim središtem drži putanje kretanja
Prijeđite na posljednji okvir i na sličan način zavežite list na krajnju točku putanje kretanja. Da biste filmu dali volumen, dodajte transformaciju Okreni vodoravno, - kao rezultat dobivamo film .
Kada se list kreće po putanji, nije nam važno kako će se zakrenuti u smjeru kretanja. Ali ako putanju leta ptice postavimo na sličan način, tada se na nekim dijelovima krivulje ispostavlja da ptica prvo leti repom.
Očito, ako želimo animirati let aviona ili ptice, onda nam je potrebno da nos pomiče prema naprijed u svakom trenutku. U Flashu je ovu vrstu kretanja vrlo lako postaviti (Sl. 18).
Riža. 18. Ako označite kućicu Orijentirati se na Put, ptica će letjeti glavom naprijed
Potvrdni okvir je potreban Orijentirati se na Put, a kretanje ptice će se promijeniti u potpuno poznato (izvor za ovaj video je let ptice.fla).
Riža. 19. Dodavanje jednobojne pozadine
Ako želite dodati jednobojnu pozadinu, kliknite na pozadinu i na ploči koja se pojavi Svojstva(Sl. 19) u polju Pozadina odaberite željenu boju pozadine.
Ako želimo dodati pozadinska slika, trebat će nam poseban sloj za ovo. U principu, Flash nudi mogućnost stvaranja sustava slojeva sličnog onima koji se koriste u klasičnoj animaciji, u kojem se pozadina i različiti pokretni objekti crtaju svaki na svom sloju prozirnosti.
Postavljanjem pozadinska slika i svaki animirani objekt na svom sloju, mnogo je lakše postići kontrolu nad njima. Dakle, kako bismo dodali pozadinsku sliku, napravimo novi sloj za nju. Da biste to učinili, kliknite desnom tipkom miša na sloj prikazan na sl. 19 označen je kao sloj 1, au padajućem izborniku odaberite redak Umetni sloj. U dodanom sloju nacrtajte sunce. Kako se ne bi zabunili u brojevima slojeva, dajmo sloju naziv “background”. Da biste to učinili, kliknite na trenutni naziv i unesite željeni naziv (slika 20).
Riža. 20. Na novom sloju stvorite stacionarni pozadinski objekt
Kao što se može vidjeti sa Sl. 20, ptica je iza sunca, što je u suprotnosti sa zdravim razumom. Kako biste zamijenili slojeve, samo upotrijebite način rada povuci i ispusti da povučete sloj pod nazivom "pozadina" prema dolje.
Montirajmo objekte filma (tako da ptica kruži na pozadini sunca, promijenimo putanju svog leta i promijenimo omjer veličina sunca i ptice) i dobijemo sljedeći video.
Riža. 21. Da biste animirali oblak, napravite zaseban sloj
Dodajmo sada pokretne objekte našoj animaciji, na primjer oblak. Za oblak izradite novi sloj i na njega postavite animaciju transformacije kretanja. Kako bi oblak uletio u scenu, postavit ćemo ga kao što je prikazano na sl. 21. Kao rezultat, dobili smo sljedeći film (izvor za ovaj film je u priloženoj datoteci