Skip to end of metadata
Go to start of metadata

Piirtäminen Flashissa

Flashilla piirtämiseen sisältyy omat niksinsä, jotka kannattaa opetella ennen oikeisiin töihin ryhtymistä. Flashin tapa käsitellä piirrosgrafiikkaa on omintakeinen, ja poikkeaa ainakin joiltain osin useista vektoripiirtotyökaluista tai kuvankäsittelyohjelmista. Ensimmäiseksi käydään läpi piirto-, valinta- ja muokkaustyökaluja Tools-paletista.


Oval tool:
Piirretään oheisen mallin mukainen ympyrä ja muutetaan väritäyttöä ja ääriviivaa.
Valitse Oval tool työkalupaletista (Tools, Tool box), siirrä osoitin Stagelle, paina hiiren nappia ja vedä. Voit valita piirroksesi täyttö- ja ääriviivavärit joko Tools-paletista, tai käyttää Properties-paneelia.

 Huolehdi, että Oval tool on valittuna, käytä Stroke ja Fill Color controlleja viivan sekä täytön värityksen määrittelyyn ja koita saada oma pyöryläsi vastaamaan oikeanpuoleista mallikuvaa. Määrittele värit mieluiten ennen kuin piirrät.

Kun Oval Tool on valittuna, voit valita värivaihtoehdot myös Properties-paneelista. Kun vaihdat työkalua, Properties-paneeli näyttää vastaavasti siihen liittyviä asetuksia.

Stroke Color määrää ääriviivan värin, Fill Color täyttövärin, Stroke Height viivan paksuuden ja Stroke Style viivan tyylin.


Rectangle tool:
Kun valitset työkalun sen asetukset (Modifiers) ilmaantuvat Tool boxin Options-alueelle.
Napsauta Rectangle toolia, jotta se tulee valituksi. Klikkaa seuraavaksi Radius Modifieria ja määrittele 20 pisteen pyöristykset. Piirrä, jäljen pitäisi muistuttaa oheista mallikuvaa ainakin pyöreiden kulmien osalta.


Pencil tool:
Mainio piirtoväline, jolla syntyy viivoja, muotoja ja vapaata piirrosjälkeä.

Valitse Pencil Tool ja aseta sen tilaksi (mode) Straighten Pencil Mode modifier-valinnan kautta. Koita jäljitellä oheista mallikuvaa.

Piirrä seuraavaksi mallikuvan mukaisesti kolmio ja neliö.

Valitse seuraavaksi Pencil modeksi Smooth, ja jäljittele aaltoja.

Kokeile lopuksi vielä Ink modea ja vapaata piirtoa. Aseta Properties paneelista Pencil työkalun jäljen leveydeksi 2 ja muuta tyyli katkoviivaksi.

Brush tool:

Avataan harjoittelukuva autot.fla
Valitse Brush Tool työkalupakista ja aseta työkalupaletin Options-kohdasta Brush Mode modifierista eri brushmodet päälle kukin vuorollaan. Kokeile "sutia" Stagella olevien autojen päälle. Tarvittaessa voit peruuttaa tekosesi ylävalikon kautta kohdasta edit/undo.

Huomioi, kun käytät Paint Inside -modea, että aloitat maalailun väritetyn alueen sisäpuolelta.

Jätä tiedosto auki.


Paint Bucket tool:
Jatketaan edellisessä harjoitteessa avattuun tiedostoon. Valitse Paint Bucket tool tai suomeksi sanottuna maalikannu, ja napsauta Stagella olevaa neliötä, jonka pitäisi nyt värittyä voimassa olevan Fill Color -asetuksen mukaisesti.

Valitse Gap Size modifierista Close Large Caps ja napsauta värittämättömän ovaalimuodon sisäpuolella - Flash värittää muodon nyt vaikka se ei ole edes täysin suljettu.

Voit väritellä alueita liukuvärein (Gradients) saman kaavan mukaan, kuin tasaisellakin värillä. Pidä maalipurkkityökalu edelleen valittuna ja napsauta Fill Color Controllia joko Properties-paneelista tai Toolboxista ja valitse ympyrämuotoinen liukuväritys värilistan pohjalta. Napsauta sitten Stagella sijaitsevan isomman ympyrän sisäpuolella. Ympyrän pitäisi täyttyä valitsemasi liukuvärin mukaisesti.





Fill Transform tool:


Fill Transform toolilla voit virittää liukuväriä: kokoa, suuntaa ja keskipistettä. Valitse työkalu ja klikkaa näyttämöllä sijaitsevaa ympyrää. Tee seuraavalla tavalla:
- Raahaa keskipiste etäämmälle ympyrän keskustasta
- Kokeile liikutella kaikkia muuntokahvoja. Muuta täytön leveyttä, kokoa ja suuntaa (rotation).

Älä vielä sulje tiedostoa.

Ink Bottle tool:
Valitse Ink Bottle tool. Säädä asetukset Properties-paneelista esim. pisteviivaksi, viivan paksuus 2:ksi ja piirtoväri punaiseksi. Ink Bottle -toolin kursorin kärjellä napsautus pienemmän ovaalin reunuksen päällä muuttaa sen äsken asetettujen arvojen mukaiseksi.






Eraser tool:
Pyyhekumi pyyhkii täyttöjä sekä viivoja. Sen voi asettaa pyyhkimään ainoastaan viivoja, täyttöjä tai valittuna olevia täyttöjä. Tai rajoittaa sen toiminta vain siihen värialueeseen, josta pyyhintä aloitettiin.

Avaa tiedosto autot2.fla. Valitse Eraser tool ja Mode Modifier -kohdasta Erase Normal. Pyyhi autosta osa pois. Valitse seuraavaksi asetukseksi (mode) Erase Fills ja pyyhi toista autoa.
Kokeile valita seuraavana vaihtoehtona FaucetModifier ja napsauta osoittimella maalattua täyttöä. Täyttö häviää heti kokonaan. Myös viivojen pyyhkiminen onnistuu Faucet-tilassa. Kokeile vielä jäljelläolevia Eraser toolin asetuksia.


Arrow tool:
Viivojen ja täyttöjen sekä muiden Stagella sijaitsevien objektien valinta. Ennen kuin pystyt muuttelemaan ja säätämään viivoja tai täyttöjä, jotka olet jo piirtänyt aiemmin Stagelle, on ne valittava lasso- tai nuolityökalulla (Lasso tool, Arrow tool).

Liiku autot2.fla tiedoston sceneen "scene2". Valitse Arrow tool ja napsauta kursorilla keskelle Stagella sijaitsevaa ovaalia. Täyttö korostuu (pieniä harmaita pisteitä) merkkaamaan aktiivista valintaa. Raahaa valittuna oleva muoto oikealle, vain täyttö siirtyy osoittimen mukana.

Valitse edit/undo ja täyttö palautuu ennalleen.

Napsauta hiirelläsi kerran ovaalin ulkopuolella, Stagen tyhjässä kohdassa, ja kaikki valinnat lähtevät pois.

Tuplaklikkaa seuraavaksi ovaalin sisäpuolella ja raahaa valintaa sivummalle. Nyt reunus siirtyy täytön mukana, koska täytön tuplaklikkaus valitsee myös linjat/viivat, jotka ovat sen kanssa kosketuksissa.
Kokeile ensin kertanapsautusta ohessa näkyvään viivapiirrokseen ja sitten tuplaklikkausta. 1 klikkaus valitsee vain yhden viivan, mutta tuplaklikkaus valitsee kaikki toisiinsa liittyvät viivat.

Shift-näppäin pohjassa voi valita useita yksittäisiä viivoja.

Kokeiltuasi voit sulkea tiedoston.

Voit tehdä valinnan myös vetämällä hiirellä valittavan alueen päältä seuraavaksi selitettävällä tavalla.

Avaa valinta.fla. Valitse tool boxista Arrow tool. Napsauta ja vedä kuvaan merkitystä pisteestä toiseen ja koko puu on valittu juuti vedetyn alueen mukaan. Kun muoto tai viiva on valittu voit sen jälkeen muokkailla sitä.
Klikkaa Tools-paletista Smooth Modifieria  ja jatka klikkailua, kunnes olet tyytyväinen. Jätä tiedosto edelleen auki.


Lasso tool:
Lassolla valintojen tekeminen tapahtuu täysin vapaakätisesti tai "kulmalassolla" suoria linjoja ja kulmia tehden.

Aloita valitsemalla Lasso tool ja piirrä rajaus vaikkapa puun oksistoon. Kun nostat hiiren napin, Flash valitsee alueen vaikka olisitkin jättänyt välimatkaa aloitus- ja lopetuspisteen välille. Siirrä osoitin valitun alueen päälle, missä se muuttuu nuolen malliseksi. Raahaa alue sivuun. Tämä toimenpide ositti alueen kahdeksi erilliseksi osaseksi.

Jatketaan samaan tiedostoon.


Avaa "scene2". Valitse lassotyökalu ja klikkaa aktiiviseksi tools-paletin Options-osasta Polygon Mode modifier ja napsauta näyttämölle merkittyjä pisteitä. Voit siirtää ja muovata myös tätä valituksi tullutta epäsäännöllisen muotoista aluetta. Peru muutokset undo-komennolla. Valitse Arrow tool ja klikkaa näyttämön tyhjässä kohdassa, jottei mikään valinta ole päällä.
Klikkaa ovaalin reunustaa. Properties-paneeli näyttää ovaalin ääriviivan sen hetkiset asetukset. Koska valitsit vain ulkokehän, näkyy värivalintojen Fill Color -kohdassa punainen viiva, mikä merkitsee ettei ko. kohta ole käytettävissä sillä hetkellä. Vaihda piirtotyyli pisteviivaksi, käytä liukusäädintä nostaaksesi viivan paksuudeksi 4 ja muuta väri punaiseksi.

Voit käyttää Arrow toolia sekä Properties-paneelia täyttöjen muokkaamiseen. Valitse Arrow tool ja klikkaa ovaalin väritettyä sisustaa. Nyt näet Properties-paneelissa Fill Color-kohdan aktiivisena ja säädettävänä. Siispä muuttamaan täytön väriä. Lopuksi sulje tiedosto.

Avaa tiedosto reshaping.fla.

Voit käyttää Arrow toolia viivojen ja muotojen muovaamiseen, ilman vektorigrafiikan "kahvoja ja tangentteja" yms. yksinkertaisemmalla tavalla. Käytä Arrow toolia ylemmän kolmion muokkaukseen. Vedä viivoja, mutta älä valitse niitä ensin. Jos menet ja valitset ne ensin, saat raahattua ja liikutettua niitä muotoilun sijasta. Hiiren osoitin muuttuu sen mukaan, kuinka viivoja voi tilanteessa muokata. Kulma hiiren pointterin vierellä tarkoittaa, että voit säätää viivan/linjan päätepistettä. Kaari tarkoittaa,että voit säätää suoran tukipistettä, eli vääntää suoraa kaarelle. Lopputuloksen tulisi olla jotakuinkin seuraavankaltainen:
Muokkaa seuraavaksi alempaa kolmiota. Muokkaaminen onnistuu vaikkei kappaleella olisikaan erillistä näkyvää rajaa. Palautetaan vielä lopuksi tiedosto viimeksi tallennettuun muotoon seuraavaa tehtävää varten - valitse ylävalikosta file/revert.


Free transform tool:
Free transform toolilla voit skaalata, pyörittää, venyttää tai vinottaa viivoja ja muotoja.

Valitse työkälu Tools-paletista ja valitse sen jälkeen vihreä kolmio. Muuntokahvoilla varustettu kehys ilmaantuu valitun kolmion ympärille. Nyt voit skaalata, pyörittää jne. Kursori osoittaa jälleen minkälainen operaatio on mahdollinen. Paina Shift-näppäin pohjaan ja voit skaalata muuntokehyksen kulmista kiskoen ilman että kappaleen mittasuhteet vääristyvät.
Valitse Rotate and Skew modifier Tools-paletin alaosasta. "Muunnoslaatikon" laitojen keskikohdasta voit vinottaa ja kulmapisteistä pyörittää kappaletta. Jos raahaat keskellä näkyvän valkoisen pisteen esim. kuvan laitaan ja pyörität kappaletta, pyöritysakseli on siirtynyt pisteen mukana.


Transform-paneelista käsin voit määritellä täsmällisemmin numeerisin arvoin skaalausta ja pyöritystä. Käytä edelleen samaa muuntotyökalua ja valitse neliö Stagelta. Ota ylävalikosta window/transform ja saat esiin em. paneelin. Napsauta kohtaa Constrain ja näppäile 50% leveysmääritykseksi ja 45 astetta Rotate-kenttään. Enterin painalluksella muutokset tulevat voimaan.

Sijoittaessasi grafiikkaa (muotoja, viivoja) samalla tasolle toistensa päälle, Flash liittää ne keskenään yhteen tai vaihtoehtoisesti osittaa useammaksi osaksi tilanteesta riippuen.

Avaa tiedosto ositus_liitos.fla. Ota Arrow tool, valitse Stagelta puu ja siirrä se talon päälle. Klikkaa Stagella tyhjässä kohdassa poistaaksesi valinnan. Yritä nyt uudelleen siirtää puu pois talon päältä.

Mikäli kaksi muotoa ovat saman värisiä ja kohdakkain, Flash liittää ne yhteen kun poistat valinnan liikuttamastasi kohteesta.

Siirry Sceneen nimeltä "scene2" esityksen sisällä. Liikuta vihreä puu oranssin talon päälle ja poista valinta. Valitse vihreä puu uudestaan ja raahaa se sivummalle pois talon päältä.

Ohjelma leikkelee talosta grafiikkaa sen verran pois, kuin mitä puu siitä peitti. Puu oli ikään kuin piparimuotti. Alle jäävä grafiikka leikkautuu aina.

Voit estää samalla tasolla sijaitsevaa grafiikkaa sotkeutumasta toisiinsa ryhmittämällä sen (Group). Liiku Sceneen "scene3" ja vedä nuolityökalulla valinta puun yli ja ympäri, siten että koko puu on valittuna. Ota ylävalikosta Modify/Group. Nyt siirrä "groupattu" puu talon päälle, poista valinta, ja liikuta uudelleen valittu puu sivuun. Nyt ei pitäisi ilmetä enää osituksia eikä yhteenliittymiä.

"Groupattua" grafiikkaa voi silti edelleenkin muokata. Käytä nuolityökalua ja tuplaklikkaa puu-groupin päällä. Muu näyttämö himmenee kun editoit tätä ryhmitettyä aineistoa. Klikkaamalla taas Stagen tyhjää kohtaa, saat valinnan pois koko puusta. Sitten voit valita esim. vain puun ääriviivat yksinään ja muokkailla niitä Properties-paneelin avulla.

Kun olet valmis puun muokkauksen kanssa, tuplaklikkaaminen Stageen ryhmitetyn grafiikan ulkopuolella palauttaa sinut pois groupin "sisältä". Mikään elementti Stagella ei enää näy himmennettynä.

Valitse puu nuolella. Properties paneeli näyttää Groupin asetukset, mikä samalla osoittaa myös sen, että ylipäätään on kysymys ryhmitetystä grafiikasta. Jos valitset talon, paneeli näyttää asetukset muodolle (Shape).

Nyt pitäisi olla hallussa toimintaperiaatteet Flashin valinta- ja piirtotyökaluista. Seuraavaksi tekstin pariin >>>