Kuidas joonistada ja teha liikuvaid pilte Macromedia Flash-i vahenditega

Autor Aare Helinurm

Sissejuhatus ............................................................................................................ 1
1. Joonestamine redaktori aknas. ....................................................................... 2
2. Teegid ja animatsiooni printsiibid programmis Flash5. ................................ 2
3. Animatsioonid mitme võtmekaadri kasutamisega Flashis. ........................... 3
Animatsioon pöörlemise ja mõõtkava muutmisega. ............................................................................................. 3
4. Animatsioon - liikumise teekonna määramisega........................................... 4
5. Macromeedia Flashi animatsiooni salvestamine ja publitseerimine veebis. . 5

Sissejuhatus
Interneti veebilehtede disaineri professionalismi hinnatakse kaasajal mitte enam ainult veebilehtede ja
nendevaheliste sidemete loomises kui oskusega nendele huvitavate liikuvate väiksemahuliste piltide lisamises, mis
köidaks vaata tähelepanu lehel paigutatud informatsioonile.
Programm Flash5 võimaldab tasapinnaliste, programm Swift3D aga ruumiliste (3D) movie’ide (filmide)
koostamist.
Arvutis olevaid graafilisi objekte võib jagada raster ja vektorgraafikaks.
⇒ Rastergraafika tüüpiliseks näiteks punktidest koosnev pilt. Kasutatakse järgmisi termineid. Bitmap (bittraster)
– kujutise kodeeritud esitus, kus iga andmeelemendile (nt. kujutise punktile) vastab bitt. Pixmap (pikselraster) –
kujutise kodeeritud esitus, kus igale andmeelemendile vastab bitirühm ning piksel (pixel) on pildi vähim
kahemõõtmeline element, millele saab sõltumatult kinnistada tunnuseid, näiteks värvus ja intensiivsust.
⇒ Vektorgraafika (vector graphics) – kuva esitatakse vektorikogumina kus vektor on suunatud lõik. Näiteks
ringikaart võib arvutis kirjeldada 4. parameetriga: tsentriga, raadiusega, alguse ja lõpu koordinaatidega. Iga
kõver koosneb aga paljudest kaartest. Värvilised objektid saadakse kui kaetakse figuuri kontuurjoonte vaheline
ala värviga. Vektorgraafika väärtus rastergraafika ees on failide väike maht ja järelikult ka kiirem laadimine
Internetis.
Graafikaobjektid võivad olla liikumatud või animatsiooniga (animatsioon - graafikaobjektide liikuma panemine).
Internetis kasutatavatest rastergraafika formaatides kasutatakse mitmesuguseid faili mahu vähendamise võtteid.
⇒ GIF faili formaadis kõrvuti asetsevad ühesuguse värviga punktid ühendatakse gruppi. Sellise faili maht väheneb,
kuid fotode puhul erilist mahu kokkuhoidu sellega ei saavutata, sest kõrvuti võivad asetseda erinevate värvitooni
varjundiga punktid ja midagi pole grupeerida.
⇒ Fotode asetamiseks Internetti on formaat JPG. Siin saadakse mahu kokkuhoid sellega, et suurendatakse värvitäpi
suurust ja sellega vähendatakse nende arvu fotos. JPG formaadi puudusele vaatamata (pildi suurendamisel
halveneb kvaliteet, sest terad on nähtavad) on praktiliselt kõik foto-graafika Internetis selles formaadis.
⇒ Rastergraafika kadudeta pakkimise formaat PNG on spetsiaalselt välja töötatud veebi lehtede jaoks ja tema
erinevus GIF’ist on, et PNG võimaldab luua pilte erinevate läbipaistvuse astmetega.
Täiendavalt võib lugeda: http://viko.opetaja.ee/tugi/materj_graafiline_osa.php
Tavaline kino joonisfilm koosneb paljudest ülesvõtetest filmikilel, milliseid näidatakse kiirusega 24 kaadrit
minutis ja paralleelselt ülesvõtetega on kantud kilele ka heliriba. Kaader koostatakse pildistamiseks paljudest
kiledest. Liikuvad-muutuvad pildid eraldi kiledel, millised on asetatud fooni kilele. Praktiliselt sama tehnoloogiat
kasutatakse ka programmis Flash – tausta (background), kihte (layer), kaadreid (frame – täielik pilt
multimeediarakendustes) ja stseene (scene – vaadeldav ruumiline tööala selles asuvate objektidega).
Rasterfailidest lubab GIF formaat kujutise animatsiooni sellega, et lisab GIF faili kõik kaadrid järjestikku. GIF
formaadis animatsioonide või videoklippide tegemiseks on näiteks programmid Adobe Image Ready , Microsoft Gif
Animator jt. Selliste failide maht kujuneb suhteliselt suureks kuna nendesse on lisatud kõik kaadrid.
Vektorgraafika animatsioonides ei salvestata faili ja ei saadeta Interneti sideliinide kaudu edasi kõiki kaadreid
vaid näiteks ainult esimene kaader ja liikuva objekti liikumise trajektoori valem; objekti kaugenemisel objekti
mõõtkava viimasel kaadril jne. Loomulikult peab kasutaja brauseris olema moodul, mis arvutab neid valemeid ja
genereerib kõik kaadrid filmi vaatamiseks.
 1. Joonestamine redaktori aknas.
Kasutades joonestuse ja maalimise vahendeid võib luua joonestusi Flash’i movie’dele.
1.ArrowTool (+Option) – valikuks (ka aknaga),
lihtsamaks muutmiseks, move, copy, del
3.LineTool – sirglõikude joonestamiseks.
5.PenTool – Joonestab kõveraid ühendades punkte
kõveratega mida on võimalik hiljem muuta.
7.OvalTool – Joonestab ovaale, ringe.
9.PencilTool (+Option)– Joonestab objekte
olenevalt valikust, sirglõikudest, kõveratest
koosnevana või vabakäega joonena.
11.InkTool – Muudab objekti värvi aktiivseks
värviks.
13.DropperTool –Valib eelnevalt joonestatud
objekti värvi, mis muutub seejärel aktiivseks.
15.HandTool – Võimaldab liigutada kogu ekraanil
olevat .
17.StrokeColor (+Option) – Värvi valik joontele.
19.DefaultColor – Üleminek must-valgele
joonestamisele, mis on ka vaikimisi värvid.
2.SubsetTool – valikuks, kuju muutmiseks
tekkivate sangade abil, move, copy, del
4.LassoTool (+Option) – valikuks, kuju
muutmiseks tekkivate sangade move, copy, del abil
6.TextTool – Tekstide sisestamiseks.
8.RectangleTool (+Option) – Joonestab ristkülikuid,
valikus on nurkade ümardamine..
10.BrushTool (+Option) – Pintsliga
joonestamine. Valikus erinevaid viise
12.PaintBucketTool (+Option) –Valab värviga
valitud objekti või pinna..
14.EraserTool (+Option) – Kustutab valikuliselt.
16.ZoomTool – Vaate suurendus/vähendus. Ekraani
all vasakus nurgas vaate suurendus protsentides
18.FillColor (+Option) – Värvi valik pinna
ülevalamiseks.
20.NoColor – Pen,. Oval ja Rectangle
joonestamisel ei täida neid värviga.
21.SwapColor – Vahetab aktiivsed või valitud
objekti (joone, täite) värvid omavahel.

2. Teegid ja animatsiooni printsiibid programmis Flash5.

Igale filmile (movie) koostatakse teek
(Library), kuhu paigutatakse kõik objektid
milliseid kasutatakse animatsioonides, tausta
pildid, sümbolid, helifailid jt.
Tweening (=betweening) animatsioon on
animatsioon vahefaaside arvutamisega
morfimisel (“morphing” on raalanimatsiooni
protsess, mis võimaldab ühendada ja kokku
sulatada mitut pilti).
Sümbolid on korduvkasutatavad pildid,
animatsioonid või nupud. Sümbolid
võimaldavad hoida faili mahtu väiksena ja
lihtsustavad filmide redigeerimist. ,
Ajaskaala (timeline) sisaldab kihte ja
kaadreid nendes. Ülemine kiht ajaskaalal
asetseb pildil eespool ja taust asetseb
ajaskaalal kõige all. Asetust saab muuta
hiirega tirimise teel.
Kihid (layer) jaotatakse kaadriteks
(frame), neist mõnda nimetatakse
võtmekaadriteks (keyframe – animatsioonijada alguse või lõpukaader) ja neid saab redigeerida, selleks et luua
liikumise effekt. Ajaskaalal võtmekaadreid tähistatakse ringikestega ja neid saab luua klikkides hiirega tühja kasti ja
menüüst Insert/Keyframe. Redigeerimise kergendamiseks võib kihte teha nähtamatuks ja lukustada.
Redaktori aknas näidatakse ja saab redigeerida kaadrit, mis on momendil aktiivne – millisel asub playhead.
 Harjutus (sümboli valmistamine).
1. Avada teegi dialoogaken menüüst Windows/Library ja teha sellesse uus kaust nimega Harjutus1.
2. Joonestada redaktori aknas mingi objekt – näiteks ringist ja ristkülikust koosnevana.
3. Arrow vahendiga valida kogu objekt. Edasi Insert/Convert to Symbol.
4. Sümboli omaduste (Symbol Properties) dialoogkastis sisestada symboli nimi ja valida sümboli otstarve:
Graphic (võimalik veel valida MovieClip või Button). Salvestatud sümbol tõsta hiirega kausta Harjutus1.
5. Tuua hiirega vedamise teel saadud sümbol joonisele kolm korda. Symbol käitub kui üks terviklik objekt.
6. Valida üks sümboleist ja muuta selle värvitoon menüüst Windows/Panels/Effect valikust Tint, teise eredust
valikust Brightness ja kolmanda läbipaistvust 50% valikust Alpha.
Harjutus (Animatsioon lihtsa liikumisega).
1. Avades menüüst File/New saada ekraanile pildi Etapp1.
2. Lisada üks frame’i menüüst Insert/Frame ja liigutada Playhead’i tagasi algasendisse – Etapp2.
3. Joonestada objekt ja tirida frame’i lõpujoon hiirega näiteks 7da frame’ini – Etapp3.
4. Valida ArrowTools aknaga objekt. Menüüst Insert/GreateMotionTween ja viime Playhead’i frame lõpujooneni
(7 frame). Etapp4
5. Tirime hiirega objekti ekraanil animatsiooni liikumise lõpupunktini. Etapp5
6. Menüüst Control/Rewind toome animatsiooni algasendisse ja Control/Play (või Enter) alustab animatsiooni.
7. Vajadusel saab redigeerida nupuga EditScene animatsiooni liikumist või objekti nupuga EditSymbols avatavas
aknas sümboli kuju.
Etapp1 Etapp2 Etapp3

Etapp4 Etapp5

3. Animatsioonid mitme võtmekaadri kasutamisega Flashis.

Samaaegselt liikumisega võib objektile (sümbolile või grupile) anda suuruse muutuse ja pöörlemisega
animatsiooni kuid selleks tuleb peatuda mõistetel kihid ja kaadrid. Ajaskaala (timeline) vasakus osas asetsevad
kihtide nimetused ja paremas osas vastavate kihtide kaadrid.
Erinevad objektid, selleks et neid oleks kergem töödelda, joonestatakse reeglina erinevates kihtides (layer).
Kihte on võimalik teha nähtamatuks selleks et oleks mugavam ainult ühe kihiga töötada.
Kihid on jaotatud kaadriteks (frame), kusjuures mõned neist nimetatakse võtmekaadriteks (keyframe –
tähistatakse ajaskaalal musta ringikesega) kusjuures võtmekaadrites olevaid objekte on võimalik redigeerida, selleks
et anda objektile muutumise efekt. Eelmises osas toimus liikumine ilma objekti muutmiseta ja selleks piisas ühest
võtmekaadrist. Tühjad kaadrid on valged ja kõrvuti asetsevad tühjad kaadrid asendatakse ühe pika kaadriga.
Võtmekaadreid võib samuti hiirega pikaks venitada kuni järgmise võtmekaadrini ja selle kaadri lõpp on tähistatud
ristkülikuga.

Animatsioon pöörlemise ja mõõtkava muutmisega.

Etapp1. Joonestada objekt (näiteks ristkülik) ja muuta see sümboliks menüüst – Insert/Convert to Symbol. Koos
sümboliga tekib automaatselt esimene võtmekaader .
Etapp2. Esimese võtmekaadri kõrvale tekitame uue võtmekaadri menüüst – Insert/Keyframe. Tirime 2-se
võtmekaadri näiteks 6-ndaks kaadriks. Viime OSUTI kuuendale kaadrile; valime objekti ja teeme objektile
muudatused dialoogaknas menüüst Windows/Panels/Transforme: mõõtkava 50% ja rotate 170º. Enter või nupp
Apply to Copy. Kustutame 6dast kaadrist originaal objekti.
 Etapp3. Viime osuti 1sele kaadrile; valime objekti ja menüüst
Insert/CreateMotionTween. Kui ei teki 1-se ja 6-nda kaadri vahele noolt, siis viime
6-nda kaadri 1-se kõrvale ja tagasi endisesse kohta (ka musta ringikese viime 6-dale
kaadrile).
Etapp4. Kontrollime animatsiooni menüüst Windows/Play. Eelnevalt viime
OSUTI 1-sele kaadrile või korraldusega menüüst Windows/Rewind.
Etapp5. Kui saadud animatsioon töötab, siis võime seda muuta või täiendada.
• Näiteks: asetame OSUTI 3-ndale kaadrile ja lisame menüüst
(Insert/Keyframe) uue võtmekaadri. Muudame hiirega 3-ndas kaadris oleva objekti asukohta. Kontrollime uut
animatsiooni.
• Ka 1-se ja 6-da kaadri võime muuta asukohti, mõõtkava või muuta kuju (screw).

4. Animatsioon - liikumise teekonna määramisega.

Etapp1. Joonestada objekt (näiteks Pall) teha sellest sümbol (kaader muutub automaatselt Keyfram’iks) ja
nimetada kiht objekti nimeliseks (hiire parema nupu menüüst Properties).
Tekitada selle Keyframe’i kõrvale samasse kihti uus Keyframe.
Etapp2. Asetada Playhead esimese Keyframe’le; valida objekt (pall) ja anda korraldus menüüst
Insert/CreateMotionTween. Viia teine Keyframe näiteks12 kaadrile
Etapp3. Objekti liikumise teekonna kihi (layer) moodustamiseks valida objekti kiht ja valida menüüst
Insert/MotionGuide tekib kiht – “Guide:Pall”.
Kasutada Pencil option Smooth tööriista joonestada kihis “Guide:Pall” kõverjoon - liikumise soovitud teekond.
Etapp4. Kui Playhead on esimesel kaadril valida “ArrowTool” optionist “SnapToObject” tööriistaga objekt (pall)
ja viia objekt liikumise teekonna alguspunkti.
Tuua Playhead viimasele kaadrile ja viia objekt (pall) liikumise teekonna lõpupunkti.
Etapp5. Kontrollida liikumise animatsiooni menüüst Control/Play abil
Etapp6. Liikumise teekonda on võimalik teatud ulatuses redigeerida tööriista SubsetTools abil või objekti kuju
näiteks menüüst Modify/Transform dialoogakna abil.
Etapp7. Kontrollida uuesti liikumise animatsiooni menüüst Control/Play abil.
 5. Macromeedia Flashi animatsiooni salvestamine ja
publitseerimine veebis.
• Animatsioon (film) salvestatakse menüüst File/SaveAs laiendiga *.fla failina ja avades
(File/Open) selle faili on edaspidi võimalik animatsiooni redigeerida. Soovitav oleks *.fla fail
salvestada sellesse kausta millesse hiljem salvestate ka publikatsioon.
• Menüüst File/Publish salvestatakse valmis töö publitseerimiseks. Enne salvestamist
tuleb muidugi töö üle vaadata käsuga menüüst File/PublishPreview ja seadistada menüüst
File/PublishSettings. Valmis töö salvestatakse “SWF” formaadis ja samaaegselt ka “HTML”
formaadis, et kergendada “SWF” faili saidile ülespanekut.
Saadakse järgnevaga analoogne HTML fail:
<HTML>
<HEAD>
<TITLE>Movie1</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<!-- URL's used in the movie-->
<!-- text used in the movie-->
<!--JM -->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
WIDTH=800 HEIGHT=600>
<PARAM NAME=movie VALUE="Movie1.swf"> <PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=transparent> <PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="Movie1.swf" quality=high wmode=transparent bgcolor=#FFFFFF WIDTH=800
HEIGHT=600 TYPE="application/x-shockwave-flash" PLUGINSPAGE=
"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</BODY>
</HTML>

Seda HTML faili võib redigeerida (näiteks Notepad’is), kasutada iseseisva failina või tervenisti (või ainult
rasvases kirjas olev osa) asetada mingi teisse HTML faili. Pole raske märgata, et animatsiooniks kasutatakse faili
“Movie1.swf” ja järelikult tuleb ka see graafika fail saidile HTML failiga samasse kausta kopeerida või näidata
teekond selleni.
• Võimalik on ka väikesemahulisi animatsioone salvestada menüüst File/ExportMovie
AnimatedGIF (*.gif) failina. Salvestamisel saab määrata kas korratakse animatsiooni teatud
arv korda (Repeat) või animatsioon on pidev (Loop). AnimatedGIF formaadis genereeritakse
fail milles iga animatsiooni kaadrile (frame) on salvestatud pilt – see tähendab animeeritud
GIF faili maht (kB-des) võrreldes SWF failiga on väga palju kordi suurem.
• Näide SWF ja GIF failide publitseerimisest HTML lehel.