AS abil saab flash failis manipuleerida timeline, movieclippide, buttonite, dünaamiliste tekstiobjektide ja sisestusväljadega.

Üks põhilisemaid erinevusi AS2 ja AS3 juures on see, et AS2 puhul sai koodi kirjutada otse movieclip külge ilma et peaks eraldi viitama, milline stagel paiknev nimetatud objekt peaks vastavalt koodile käituma
AS3 puhul see enam võimalik pole ja kogu kood peab asetsema kas eraldi .as failis või timelinel framekoodina. Need võimalused olid ka AS2 puhul olemas. AS3 mõjus esmapilgul kasutusele tulles keerulise ja pikana.

Toon siinkohal võrdluseks lihtsa funktsiooni, kus nupule antakse frame koodis ülesanne avada hiirekliki peale veebileht

AS2:
minuNupp.onRelease = function(){
getURL (“http://www.delfi.ee”,”_blank”);
}

AS3:
minuNupp.addEventListener(MouseEvent.CLICK, avaLink);

function avaLink(e:MouseEvent):void {
var url:String = “http://www.delfi.ee”;
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, ‘_blank’);
} catch (e:Error) {
trace(“Error occurred!”);
}
}

Mõlema koodi alguses pöördutakse objekti poole, mille nimeks on minuNupp. See nimi võib olla ükskõik mis tingimusel et see ei sisalda tühikuid, täpitähti ja kirjavahemärke. On soovitatav vältida selle nimena ka baasfunktsioonide ja omaduste nimesid nagu näiteks MouseEvent ja width. Kui on oht nimekonfliktile viitab sellele koodi värv. Tavaline muutujanimi on musta värvi. Nii kui see muutub millekski muuks, on tegemist mõne süsteemse nimega.

Objekti nimele järgnev punkt lubab manipuleerida mõne omadusega või käivitada mõni funktsioon. AS2 puhul on selleks event ehk sündmus nimega onRelease ehk otsetõlkes kuiVabastatakseHiireKlahv.

AS3 on selleks addEventListener ehk lisaSyndmusePyydja, millele antakse kaasa kaks lisaparameetrit sulgudes – milline sündmus – MouseEvent.CLICK (teised evendid võivad olla ka MouseEvent.MouseUp jne), ja funktsioon, mida sündmuse toimumisel käivitatakse.

Funktsiooni all peetakse silmas koodiridasid, mida saab käivitada korraga. Umbes nagu autohooldust tegema minnes kontrollitakse veermikku, vahetatakse õli ja filtreid.

function autoHooldus(vAuto:Auto=testMasin):arve{

vAuto.kontrolliVeermik();
vAuto.vaheta(“õli”);
vAuto.vaheta(“filter”);

}

AS2 puhul defineeritakse onRelease kui funktsioon järgmisel real:

minuNupp.onRelease = function()

AS3 puhul:

function avaLink(e:MouseEvent):void {

Funktsioonile saab anda kaasa lisaparameetreid, mis kirjutatakse sulgude sisse ( ) vabalt valitud muutuja nimedega ja soovi korral määrates ka nende tüübi ja vaikeväärtuse. Vt autoHooldus. Peale sulgusid saab defineerida mis tüüpi vastust tohib antud funktsioon tagastada lõppedes läbi return mingiMuutujaVäärtus meetodi.

Kõik need read, mida funktsioon peaks käivitama, pakitakse loogeliste sulgude vahele { ja }

Reeglina lõpetatakse iga rida korrektselt semikooloniga (;) v.a. siis kui tegemist on tingimuse või koodiridade käivitamiskatsega:

if(muutuja==”väärtus”){

teeMidagi();

}

try {
navigateToURL(request, ‘_blank’);
} catch (e:Error) {
trace(“Error occurred!”);
}
}

AS3 eripäraks on ka see, et AS3 on nõudlikum erinevate muutujate osas.

Nimelt tuleb kõik kasutatavad muutujad enne nende kasutamist korrektselt defineerida:

var muutujaNimi:tüüp = väärtus;

Kui väärtus on tekstiline, tuleks ta kindlasti jutumärkidesse panna:

var eesNimi:String = “Agne”;
var perekonnaNimi:String = “Lund”;

Codesnippetid

Kui kogu koodimajandus ajab segadusse, saab enamik asju kas eraldi või kombineeritult teha ära läbi codesnippetite. Mille lisamiseks ei tule teha muud kui topeltklõpsata vastaval snippetil ja järgida vajadusel actionscript paneelis juhiseid – kuhu mis nimi ja mis parameeter lisada.

IK loomiseks tuleb kasutada Bones-töövahendit. Sellega lohistades saab luua raamistiku vaba vormiga shapele või siduda omavahel kokku movieclipid. Skeleti loomisel tuleb alati hoolikalt läbi mõelda suund kontide hierarhia suund. Näiteks skeleteerides jalga algab skelett ülevalt ning liigub alla, mitte vastupidi. Looma saba skeleteerides algab skelett looma taguotsa juurest ning lõppeb saba tipus.

Kui shapele skeletti külge panna, ei ole kontide arv piiratud. Sümbolite puhul tuleb arvestada sellega, et max lubatud kontide arv on 1 per sümbol

Liikumise piiramine

Kui oluline on anatoomiliselt korrektne liikumine, tasuks piirata kondi liikumisulatust. Ilma piiranguteta on see 360 kraadi.Reie puhul soovime arvatavasti piirata selle ära -90 ja 90 või midagi sarnast vastavalt jala tõusmisvõimetele.

Sääre puhul oleks see aga -75 kuni 0, kuna säär ei tohiks üle põlveliigese ettepoole painduda. Jäseme liikumise stiili aitab määrata ka speed, ehk siis kiirus. Selle võiks säärel muuta veidi väiksemaks kui vaikeväärtus, näiteks 75.

Keerulisemaks läheb aga jalalabaga, kuna tal pole oma konti, mis määraks ta suuna. Seega on mõttekas kasutada lisasümbolit, näiteks ringi kõige lõpus.

IK kihile uusi sümboleid otse luua ei saa. Küll aga seotakse teistel kihtidel olevad sümbolid IK layeriga, kui kasutada bone tooli nende sidumiseks.

Nii nagu tween koosneb võtmekaadritest on ka IK-s võtmekaadrid, mida kutsutakse aga poosideks. Nende lisamine käib sarnaselt keyframede lisamisega läbi timeline

Kontide manipuleerimine

Kui esmane liigeste paigutus ei osutunud kõige paremaks (jäsemed hakkavad ebanormaalselt liikuma), tuleb neid teinekord veidi ringi nihutada. Kontide otsapunktid on seotud sümbolile määratud keskpunktiga. Ehk siis konte lisades me tegelikult tõstame selle keskpunkti kondi tippu. Kondi pikkuse ja seospunkti muutmiseks tuleb eemaldada märgistus ning valida Free Transform Tooliga see jäse, mille kondi seospunkti me tahame muuta ja liigutada jäseme keskpunkti vastavalt.

Animatsiooni konvertimine sümboliks

Selleks et ei peaks sama jala edasitagasi liikumist kaks korda paika panema, on mõtekas ühe korra animeeritud jalg sümboliks konvertida valides skeletil parema hiirekliki alt convert to symbol ja määrates tüübiks graphic. Stagele on meil vaja aga kahte jalga, millest tagumisele tuleks määrata kaader, millest alustatakse loopimist. See peaks olema kaader, millal jalg on vastupidises kõige kaugemas asendis ehk siis kogu animatsiooni umbes keskel:

Lisaks tuleks seda sümbolit nihutada natuke kõrgemale ning lisada talle brightness color effect, et ta muutuks tumedamaks ja pilt oleks realistlikum

Walk-cycle
Algfail

Loe lähemalt siit ja siit

Tweenimisel on põhimõtted samad – iga animeeritav detail peab asuma eraldi kihil ning olema eraldi sümbol. Kui me animeerime tervikuna lauseid või sõnu, on neid movieclippe vähe. Tähthaaval animeerimiseks tuleb aga iga täht eraldi kihile tõsta ning eraldi sümboliks muuta. See võib aga päris tülikas ettevõtmine olla nii, et sõltuvalt sellest, kui palju bänneri eest makstakse

Teksti sisestamine ja formaatimine.

Teksti sisestamiseks on nagu Illustratoriski kaks võimalust vabatekstina klõpsates hiirega suvalisse kohta või tekstialale lohistades eelnevalt type vahendiga selle ala valmis. Vajalikud paletid teksti formaatimiseks ning tekstivälja tüübi muutmiseks asuvad properties paneelis ning muutuvad nähtavaks peale tekstivälja aktiveerimist.

Fondi, fondisuuruse ja joonduse muutmine on nii nagu ikka aga Flashis tekstiga töötades on mitmeid lisaseadeid, mida tasub arvesse võtta.

TLF vs Classic text

TLF ehk Text Layout Framework on uuemate flashidega kaasa tulnud platform, mis võimaldab kasutada teksti voolamist ühest alast teise, 3d efekte, värviefekte ja blend-režiime ilma et peaks selleks moviesümboleid kasutama. TLF on saadaval alates AS3 ja Flash Player 10. TLF tekstid jagunevad omakorda kolmeks – readonly, selectable ja editable, mille nimed viitavad teksti võimalustele. Bännerite puhul tuleks kasutada enamasti readonly tüüpi teksti. Selectable tuleb kasuks siis kui teksti on vaja märgistada ning kopeerida (flashsaidi puhul näiteks). Editable viitab juba sellele et tegemist on tekstiväljaga vormis.

Classic teksti alamtüübid on static, dynamic ja input. Static ja Dynamic vahe on see, et dynamic-tekste saab panna suhtlema actionscriptiga. See, kas teksti saab märgistada või mitte, on seadistatav ikoonikese abil

Fontide embeddimine

Flash ei sea fontide kasutamise osas piiranguid ette. Ükskõik mis fonti vaja, selle saab embeddida flash faili. Ehk siis see pannakse kompileeritud flashile kaasa ka nende kasutajate jaoks, kelle arvutites ei ole sama fonti installeeritud. Fondi embeddimiseks tuleb vajutada fondinime ja stiili kõrval olevat embed nuppu.

Avanenud aknas saab määrata millised tähed fondist embedditakse. Kui tegemist ei ole pika mitmekeelse tekstiga või vabateksti väljaga, piisab enamasti järgmistest character settidest:

• Uppercase
• Lowercase
• Numerals
• Punctuation

Eesti keele tarvis tuleks juurde lisada veel Latin extended või sisestada käsitsi vajaminevad tähed allpool olevasse lahtrisse.

Fontide embeddimine on kahe otsaga asi – eriline font on alati kena aga embedditud font annab flash failile korralikult kaalu juurde. Bänneri puhul, kus teksti on vähe, on mõttekam kaaluda vektoriks konverditud teksti.

Kui kasutad tavalist fonti, mis on kõigi arvutis arvatavasti olemas võib valida antialias lahtrist “Use device fonts”

Teksti konvertimine sümboliteks

Kui tuleb siiski teksti tähthaaval animeerida, tuleb kõigepealt tekst tähtedeks lammutada. Selleks tuleb 1-2x valida paremkliki menüüst käsk “Break apart”. 1 korra peale muudetakse tekst eraldi tähtedest koosnevateks tekstiobjektideks, kuhu saab uut teksti asemele veel kirjutada. Enamasti seda pole vaja ning sellisel kujul on tähti skaleerides oht et flash üritab neid edasi “kernida” ning animatsioon võib jääda jõnksuline. Seegavõib veel korra “Break apart” käsklust rakendada, mis muudab tähed vektorkujunditeks. Tekkinud kujundid tuleks saata distribute to layers käsuga erinevatele kihtidele ning konverteerida seejärel ükshaaval sümboliteks.

Proovi ise!

• Põrkavad tähed
• Mööda guide layerit liiguvad tähed
• Sõnadest kokku sõitev slogan

Shape tween tuleb abiks siis kui on tarvis lisaks asukohale ja pöördenurgale muuta ka objekti kuju. Näiteks ruut ringiks. Ses osas võib shape tweeni võrrelda Illustratori blendidega. Nii nagu ka Illustratori blendid võivad ka shape tweenid väga ootamatuid tulemusi anda. Seda just siis kui tegemist on väga keeruliste või mitmest objektist koosneva kujundiga.

Shape tweeni loomine on sarnane classic tweenidega – vaja on kahte keyframe ja nende vahele seekord shape tweeni. Kui classictweeni esitletakse sinise ribaga, siis shapetween on rohelist värvi.

Luues shapetweeni ruudust ringiks puutumegi kokku esimese probleemiga – ruudul mitte ei ümardata nurkasid vaid teda ka pööratakse selle käigus

Kuidas seda probleemi lahendada? Teatud piirini saab abistada shape tweenimist shape hintidega, mille abil saab anda flashile vihjeid millised punktid peaksid paika jääma, millised peaks muutuma. Shapehindid käivad alati paarikaupa – esimene asub tweeni alguskeyframes, teine lõppkeyframes. Kui shapetweenil on mitu keyframe’i, siis tuleb hoolikalt jälgida, et me näiteks teises keyframes ei hakkaks esimesega seotud hinte nihutama.

Hintide lisamiseks tuleb alati olla tweenilõigu algusvõtmekaadris ning valida käsk: modify-shape-add shape hint. Ning lohistada see soovitud punkti. Ruudu puhul näiteks ülaserva keskele. Kui me põikame korraks viimasesse keyframe’i, siis näeme seal esimese hinti nimelist paarilist. Selle nihutame ringi ülaserva keskele.

Hintide puhul tasub taaskord jälgida seda, et nad napsaksid magnetiga korralikult kujundi joone külge.

Tihtipeale ühest hintist ei piisa. Samas – kui ka peale 20ndat hinti on asi ikka katkina, tuleks kaaluda lihtsamat animatsiooni või lausa frame-by-frame animatsiooni

~3-5 hinti on aga veel täiesti mõistlik.

Ka ruut-ringiks tween vajab rohkem hinte. Need lisame taas 1. võtmekaadris. Kui lisada b-hint alla serva keskele mõlemas võtmekaadris peaks tween korrektselt tööle hakkama.

Iseseisvalt proovimiseks

• Numbrite shapetween: 1-2
• Lille kasvamine

Kujutle ette järgmiseid olukordi:

1. Stseen, kus laev liigub vaikselt edasi tagasi, lained aga loksuks korduvalt samas rütmis
2. Auto, mis sõidab üle ekraani, rattad tiirlevad kiires tempos
3. Mesilane, kes lendab ringi, tiivad kiirelt laperdamas
4. Inimene, kes kõnnib üle ekraani

Üritades kogu liikumise vältel nimetatud detaile korduvalt korrapäraselt liigutada on raske ning muudab ka hilisemate muutuste sisseviimise keeruliseks.

Selleks tuleb meil luua animeeritav kujund nii nagu tavaliselt aga selle asemel, et joonistada välja kõik mitu liikuvat detaili (mesilase tiivad, auto rattad), joonistame välja vaid ühe ning muudame selle graafikasümboliks märgistades kõik selle komponendid, tehes neil parema hiireklõpsu ning valides “convert to symbol”. Peale seda saame sama graafikasümbolit kasutada mitu korda ja kui me soovime midagi selle juures muuta, muutuvad kõik instance’id korraga muutes tööprotsessi väga mugavaks.

Sama graafikasümboli kloonimiseks võime lohistada ta stagele uuesti libraryst või kasutada alt-lohistamist või ctrl-c + ctrl-v kui me oleme muutnud originaalsümboli mõõtmeid stagel.

Peale seda saame märgistada kõik animeerimisele minevad detailid k.a. graafikasümbolid ning muuta nad kõik movieclip sümboliks.

Movieclippi stagel animeerime me nii nagu laeva eelmises loengus, selle detailide animeerimiseks tuleb meil minna sümboli sisse topeltklõpsuga ning tõsta selle eraldi liikuvad detailid iga üks oma layerile. Kõige lihtsam viis selle tegemiseks on need märgistada ning valida parema hiire klõpsu menüüst “Distribute to layers”

Edasi saame luua igale tekkinud kihile vajaliku animatsiooni.

Autorataste puhul kasutame ära Flash tweenide rotate seadeid valides sealt peale tweeni loomist suunaks cw (clockwise ehk päripäeva) ja pöörete arvuks 1.

Mesilastiibade (ja ka kõigi teiste ümber konkreetse punkti pöörlevate objektide) puhul on oluline muuta nende keskpunkti kasutades selleks Free Transform Tooli

Keskpunkti muutmine on oluline ära teha enne animatsiooni võtmekaadrite loomist, kuna vaid siis garanteerime selle 100% sama asukoha kõigis võtmekaadrites.

Kui keskpunkt nihkub palju, hakkab tweenides sümbol hüppama.

Seesugust animatsioon animatsiooni sees võtet saab kasutada ka rohkem kui ühel tasemel. Kujuta ette:

Auto sõidab vasakult paremale mööda künklikku maastikku.

Korduvad liikumised sellises olukorras oleks 1. rataste tiirlemine ja 2. auto põrkumine üles-alla. Kumbki animatsioon on aga teineteisest sõltumatu. Seega staatilise auto sümbolis liiguksid vaid rattad. Hüplevas autos hüpitataks sümbolit kus on autot koos liikuvate ratastega ja üle ekraani sõidaks lõplik sümbol: hüplik auto.

Kasutades animeeritud movieclippe movieclippide sees tuleks oma animatsiooni testimiseks valida mitte lihtsalt enter (play) vaid ülalt menüüst “control – test movie”, kuna lihtsalt mängides movieclippide sees olevaid animatsioone ei mängita.

Motion Guide

Motion guide on abivahend, millega me saame classic tweeni kasutades panna objekti liikuma punktist a punkti b mitte otse sirgjooneliselt vaid mööda sinu poolt valitud trajektoori.

Et seda teha, tuleb kasutada kahte kihti, mis on omavahel seotud. Üks on see kiht, millel asub animeeritud sümbol ja teine, millel asub motion guide. Kui animeeritav kujund peab olema sümboliks muudetud, siis guide peaks olema tavaline drawing objekt, mis on joonistatud ühe pideva joonega.

Guide kihiks saab muuta ükskõik millise kihi tehes sellel parema hiireklõpsu ja valides käsu guide. Et olemasoleva layerile luua guide layer, tuleks parema hiire klõpsu menüü alt valida käsk: “Add classic motion guide”. See garanteerib, et kaks layerit on omavahel korrektselt seotud.

Korrektne guide layer:

Guide ja layer, mis on omavahel sidumata:

Et kujund liiguks mööda guide’i, on oluline liigutada ta mõlemas võtmekaadris täpselt guide peale. Õige asendi puhul napsab ta ise kerge magnetiga guide külge ja korrektsest asukohast annab märku ka rõhutatud keskpunkt liigutamisel.

Keskpunkt võetakse siinjuhul selle koha järgi, kust sa hiirega kinni haarasid, nii et sellele tasub tähelepanu pöörata.

Kui objekt on paigutatud korrektselt peaks liikumine leidma aset mööda guide layeril olevat trajektoori. Probleeme võivad tekitada sõlmed ja aasad. Sellisel juhul tuleks trajektoori lihtsustada või veenduda selle ühtsuses.

Üks probleem, mis ilmneb mööda guide layerit animeerides on sellel liikuva objekti suund. Enamasti kipub see olema vale ehk siis objekt liigub “külg ees”.

Et seda parandada tuleks objekt mõlemas võtmekaadris pöörata õigesse suunda

Ning lülitada tween seadete alt sisse “orient to path”

Flashi interface sarnaneb mõneti teistele Adobe toodete omadele (illustrator, photoshop). Vasakult leiame tuttavad töövahendid, mille hulka on ühtteist juurde tekkinud ja ühtteist ära kadunud. Liikudes paremale poole asuvad kaks kõige tähtsamat paneeli – timeline, mida võib võrrelda photoshopi layers paletiga. Selle erinevusega, et üks lisadimensioon on juurde tekkinud – aeg.

Iga väike ruuduke timelinel tähistab ühte kaadrit timelinel.

• Kaadrid võivad olla tühjad (vastava layeri vastav kaader ei sisalda ühtegi objekti)
• Kaader võib olla võtmekaader (keyframe), ehk tähistada layeril olevate objektide asukoha, kuju, suuruse, sisu muutust. Võtmekaader võib olla ka tühi (blank  keyframe).
• Kaadrid võivad olla staatilised aga ka animeeritud. Jälgi alati et animatsioon algaks ja lõppeks võtmekaadriga

Timeline all asub stage, mida võib võrrelda Illustratori artboardiga. Kuigi objekte saab paigutada ka stage piiridest välja, jääb lõplikus rakenduses näha vaid stagel toimuv

Parempoolses tulbas asuvad erinevad info ja seadetepaletid, mida saab vastavalt vajadusele peita või juurde lisada. Neist tähtsaimad on kindlasti properties palett, kus saab muuta kas stage või kaadri või mõne märgistatud objekti või sümboli seadeid.

Teine oluline palett on library. Sinna salvestatakse kõik sümbolid, mida animatsioonis kasutatakse.

Joonistamine Flashis

Flash on peamiselt vektorjoonistega töötamiseks, seega on peamisteks töövahenditeks geomeetrilised kujundid, jooned ja pen-tool.

Flashis joonistades tuleb vastavalt vajadusele jälgida, kas enne joonistama asumist on object drawing sees või mitte

Kui object drawing on väljas siis kattuvad objektid on küll vektorkujundid, kui kattuv osa läheb liigutades kaduma. Samas saab seda võtet kasutada just erinevate lõigete ja liitmiste tegemiseks. Reeglina tuleks object drawingut alati sees hoida.

Märgistatud drawing object

Märgistatud tavaline vektorkujund

Tavalist vektorkujundit märgistades tuleb meeles pidada, et joon ja täidis on 2 erinevat komponenti. Samuti on eraldi komponendid ka joone lõigud. Tehes topeltkliki täidisel, märgistatakse ka kogu kontuur. Ühekordne klikk märgistab ainult täidise. Tehes topeltkliki joonel, märgistatakse kogu kontuur, täidis jääb märgistamata. Ühekordne klikk joones märgistab ainult lõigu.

Musta noolega lohistades on võimalik märgistada ka osa kujundist, ning seda lohistades lõhkuda vorm ära.

Nii drawing objectit kui ka tavalist vektorkujundit saab musta noole abil venitada ja painutada. Sellest tegevusest annab aimu muutunud kursor (mustale noolele lisaks ilmub kaareke)

Valge noolega saab märgistada üksikuid punkte ning lohistada neid vastavalt soovile

Pen tool töötab sarnaselt Illustratorile:

• Klikk tekitab kontrollkangideta punkti
• Klikk+lohistus toob välja kontrollkangid mõlemas suunas
• Klikk+lohistus viimasest punktist muudab väljuva kangi suunda ja ulatust
• Klikk viimases punktis kaotab väljuva kontrollkangi ära
• Ctrl+klikk+lohistus viimases punktis muudab selle asukohta
• Alt-klikk viimases punktis kaotab ära mõlemad kontrollkangid

Peale pen-tooliga kujundi joonistamist kui tahta kujundit värvida, võib värvipotiga värvima hakates juhtuda, et värv ei rakendu kujundile. Põhjuseks on see, et pen-tooliga tehtud kujund pole suletud. Väiksemad augud suudab Flash siiski ära täita. Selleks tuleb määrata ära n.ö. augutäitmisviis tööriistaribal:

Animatsioon ja sümbolid

Animatsioon flashis võib olla käsitsiloodud frame-by-frame või tweenitud.

Tweenimine on protsess, mille puhul luuakse kahe võtmekaadri vahele vajalikud vahekaadrid, et toimuks muutus objektil. Selleks muutuseks võib olla kuju, suuruse, asukoha, värvi, läbipaistvuse vms muutus. Erinevaid muutuseid saab ka korraga kasutada.

Tweenimine jaguneb kolmeks – classic, shape ja motion.

Classic tweeni all tuntakse varasemate versioonide motion tweeni, sellega sai luua tweeni kõigi teiste peale kuju ja vormi puudutavate seadete muutuse jaoks.

Shape tween katab ülal katmata jäänud valdkonnad

Motiontween on uuemate flashide (cs4+) aseaine classic tweeni jaoks. Erinevus on et uues motiontweenis kasutatakse ka mööda rada animeerimist, mida vanas classic tweenis niisama lihtsalt kasutada ei saanud. Uus motiontween on jätkuvalt mõneti toores ja oluliste puudujääkidega, seega eelistavad mitmed animaatorid siiski vana classic tweeni.

Motion ja classic tweenimine eeldab seda, et meil oleks stagel vastaval layeril sümbol. Lihtsalt joonistatud kujundit animeerides luuakse meile librarysse automaatselt sümbolid aga nende üle ei puudu meil 100% kontroll, mistõttu on parem luua sümbolid ise. Selleks tuleb märgistada vajalikud sümbolisse kuuluvad objektid ning valida kas ülevalt menüüst Insert – New sümbol või paremklõpsuga menüü alt sama käsklus.

NB! Sümbolit luues veendu, et sul ei jääks samale layerile sümbolist eraldiolevaid objekte. Kui need on seal, tuleks nad tõsta eraldi kihile.

Tweeni jaoks on meil vaja vähemalt 2 võtmekaadrit. Esimene on igal uuel layeril juba olemas. Teine tuleks luua siis, kui meil on esimeses võtmekaadris olev graafika juba sümboliks muudetud ja muud vajalikud toimingud samuti tehtud. Võtmekaadri loomiseks tuleks teha timelinel vastava layeri mõnes kaugemas kaadris (tühja ruudu sees) paremklikk ja valida sealt insert keyframe. Kogemata tekkinud võtmekaadri saab kustutada ära tehes paremklõps võtmekaadril ja valides käsu clear keyframe.

Kui me soovime lihtsalt määrata objekti nähtaval oleku aega timelinel, tuleks insert keyframe asemel valida hoopis käsk insert frame. See loob kaadri, mis muutub, kui muutub talle eelneva võtmekaadri sisu.

Peale kahe võtmekaadri loomist, tuleks hilisemas sooritada vajalikud muudatused. Tweeni lisamiseks tuleb teha paremklõps suvalises kohaks kahe võtmekaadri vahel või esimesel võtmekaadril ning valida käsk “create classic tween”. Korrektse tweeni puhul, muutuvad mõlemad kaadrid sinakaks ning nende vahele tekib pideva joonega nool. Kui on puudu viimane võtmekaader, on tween katki ning seda näitab katkendlik joon.

Vigase tweeni parandamiseks tuleks lisada talle lõppu (viimasesse kaadrisse) võtmekaader või loobuda tweenist üldse, kui see on tekkinud kogemata. Selleks tuleb teha paremklõps noole alal ning valida käsk remove tween

Kaadrite märgistamine

Kaadreid saab märgistada hiirega lohistades kui lohistamist ei alustata juba märgistatud kaadrilt.

Kui märgistatud kaadrit lohistada, liigutatakse seda ja muudetakse peale hiire vabastamist võtmekaadriks. Seda tuleb jälgida ennekõige viimast kaadrit lohistades.

Kaadreid saab märgistada ka shift klahvi abil klõpsates esimesel kaadril, vajutades alla shift klahvi ning valides vahemiku lõpukaadri.

Kaadrimärgistust on vaja ennekõike kolme toimingu jaoks:

• Kaadrite eemaldamiseks – remove frames
• Kaadrite lisamiseks – insert frames. Selle puhul lisatakse timelinele juurde märgistatud kaadrite arv kaadreid
• Võtmekaadriteks muutmiseks – convert to keyframes

Animatsioonipool on Flashis vaid väike osa. Täie võimsuse annab Flashile selle enda objektorienteeritud programmeerimiskeel – Actionscript, millega saab kontrollida animatsioone, automatiseerida korduvaid tegevusi, lisada rakendusele navigeerimisvõimaluse jne.

Flashi poolt loodud sisu on võimalik esitleda iseseisva rakendusena või veebi jaoks optimeerituna veebilehele paigutatuna.

Flashi kasutamine veebis võib mõjutatada tõsiselt veebi ligipääsetavust (accessibility), kuna paljudel kasutajatel võib olla flash blokeeritud ning ka erinevatel veebibrowsimise abivahenditel on flash-lehe lugemine raskendatud või lausa võimatu, kui sealsed tekstid on pildi või vektorkujunditena. Seetõttu on kindlam piirduda flashi kasutusega lehe dekoratiivsetes osades, mitte sisuliselt või navigatsiooniliselt olulistes kohtades.

Kavand #1

Kavand 2

Kavand 3

Kavand 4

Kavand 5

Kavand 6

Kavand 7

Kavand 8

Kavand 9

• PetBit
• PetJoy

Mõlema nime puhul on üldine viide erinevatele lemmikloomadele. Nime teine pool on aga erineva meeleoluga. Bit viitab eelkõige sellele et tegemist on palade, väikeste suupistetega lemmiklooma jaoks. Et sõnatübi meenutab ka sõna ‘bite’ mõjub Petbit mõnevõrra agressiivsemalt kui Petjoy oma helguse ja lõbususega.

Neid eripärasid tasub proovida rakendada ka logo kujundamisel. Siinkohal mõned näited nii logodest kui ka pakenditest ja kliendile sümpaatsetest veebilehtedest:

• www.hellodog.nl
• www.perritosnacks.eu
• www.peakwaggers.com

Ning turu üldpilt USAs Walmartis: http://www.walmart.com/browse/Dogs/Treats-Chews

Minu lõplik pakkumine:

Grid-disain

Et oma tööd lihtsustada, tasub viia end kurssi mõistega ‘grid’. Grid on kas ainult tulpadest või ka ridadest koosnev süsteem, mis abistab disainerit layoudi loomisel ja elementide proportsioneerimisel. Joondades sisu gridi järgi on lihtsam hoida kujundus puhta, selge ja korrastatuna ning vältida ebamääraseid jõnkse ja sakke

Nagu näha, ei tähenda gridi kasutamine absoluutselt mitte seda, et kõik elemendid peavad 1 tulba sisse ära mahtuma, vaid neid tulpasid võib vabalt omavahel kombineerida.

Artiklid ja tutorialid gridi kasutamisest

• Columns and Grids
• Grids are good
• Design grids for web design
• Developing grid that supports the design
• Grid: The structure of design
• Grid based design: blogs
• Grid based layout
• Adobe Web Tech Curriculum – Page layout grid
• Wikipedia – Grid
• 5 simple steps to designing with grid – intro
• 5 simple steps – 1
• 5 simple steps – 2
• 5 simple steps – 3
• 5 simple steps – 4
• 5 simple steps – 5

Materjalid ja aluspõhjad

• 960.gs Grid system
• 960 Grid 2
• 970 grid

Ettevalmistused kujundustöödeks

Nagu alguses mainitud, on hea disain läbimõeldud ning organiseeritud. Grid on see, mis aitab visuaalselt kõike koos ja korras hoida. Lahekala projekti puhul on aga puudu see “kõik”. Kliendilt saadud info põhjal tuleks mõelda välja enne prototüübi loomist lehe struktuur ja hiljem ka sisublokid

Alustuseks võiks sait jaguneda järgmisena:

• Avaleht
• Firmast
• Tooted
• Kontakt

Olemasoleva Lahekala lehelt leiame prominentselt kohalt ka koostööpartnerid. Nende jaoks võib luua ka uue lehe puhul omaette alamlehe menüüsse… või kaaluda partnerite logode paigutamist lehe footerisse.

Avaleht

Kuna tegemist on võrdlemisi erilise ja vähetuntud tootega, oleks hea esimese asjana tutvustada lehele sattujale millega on tegemist ning miks see on parem kui tavaline Chappie ja Pedigree.

Kui tootevalik vähegi lubab võib juba avalehel tuua välja populaarsemad tooted ning suunata huvi korral kasutaja edasi juba täpsemasse nimekirja. Et tegemist pole välimuselt kuigi atraktiivsete maiuspaladega, fotomaterjali kasutamine olgu väga hoolikalt läbi mõeldud – ei taha külastajat ära hirmutada. Kuivatatud snäkkide asemel võiks kaaluda hoopis elustoormaterjali piltide kasutamist või piirduda pakendi või ikooniliste lahendustega.

Uudisteblokk avalehel õigustab ennast, kui ettevõttel on uudiseid, mida sinna regulaarselt lisada. Kuude kaupa muutusteta seisev uudisblokk jätab mulje, et firma on äkki hoopis tegevuse lõpetanud

Firmast

Kui avalehel võeti kogu asi lühidalt ja konkreetselt kokku, siis siin on koht, kus pikemalt ja põhjalikumalt rääkida ettevõtte ajaloost, põhimõtetest, strateegiatest, suundadest jne

Tooted

Ka sellel lehel võib kaaluda väikse tutvustava teksti kasutamist. Juhuks kui Lahekala toodete sihtrühm tulevikus laieneb võib arvestada võimalusega et Toodete lehelt saab külastaja teha kõigepealt valiku, kellele ta snäkke otsida soovid – koerad, kassid (, inimesed?)

Esialgu kuni seda valikut pole, piisab toodete puhul nimekirjast koos pildimaterjalide, nimetuste ja lühitutvustustega. Sõltuvalt sellest, kas kliendil on iga toote kohta ka põhjalikumat infot pakkuda võib suunata toode edasi toote detailse info lehele, kus saab kirjutada sellest põhjalikumalt, lisada koostisaineid, toiteväärtuseid, loetleda poode, mis toodet müüvad jne

Kontakt

Kontaktilehele tulevad kindlasti üldandmed, kuidas firmaga ühendust võtta. Tasub kaaluda ka firma võtmeisikute ja müügiagentide eraldi välja toomist. Kui külastaja saab seostada ettevõtte mõne näo ja nimega, mitte ei suhtle anonüümse vastajaga, mõjub see usaldust tekitavalt ning avalamalt.

Prototüübi loomine

Enne Photoshopis kujundustöödega alustamist on mõttekas visandada paberil või Illustratoris või mõnes spetsiaalses prototüüpimiseks mõeldud programmis põhiliste vaadete paigutused. Proportsioneerida enam-vähem erinevad sisublokid ja muud olulist rolli edendavad elemendid. Erinevaid lehetüüpe on reeglina vähemalt 2 – keerukam ja mitmekesisem avaleht ning lihtsama layoudiga sisuleht. Lahekala puhul võib luua eraldi visandi ka toodete nimekirja jaoks, kuigi sellega võib tegeleda ka otse Photoshopis.

Inspiratsiooniks

• 11 almost perfect business layouts
• Creative corporate
• 60 beautiful corporate websites
• Pet Shop theme

Photoshopis (või Illustratoris) kujunduse loomine

Vali eelnevalt pakutud grid-põhjadest välja sulle meelepärane ning kasutades peamiselt Vector shape ristkülikuid ja tekstiblokke loo Photoshopis selle gridi peale visandatud ptototüüpide põhjal lehe kujundus. Värvilahenduse osas arvesta logoga ning samuti aitab varjatud bränding (logos kasutatavate mustrite, rütmide, liikumiste kasutamine üldises kujunduses) tugevada logo ja luua õiget meeleolu ja üldmuljet.

Valik tutoriale  Photoshopis kujunduideede teostamisest

• Design a Clean Web on 960px Grid
• Create a landing page
• Create a web2.0 layout
• Create a grungy translucent web design
• Create a highly textured site
• Create a watercolor themed site
• Create a promotional iPhone app site
• Create a colorful layout
• Create a magic night themed site
• Elevato Systems site
• 5 looks – 1 layout
• Mix’n'Match Layout
• Design a blue corporate site
• Design a corporate site in Photoshop