Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

Tween-animaatio

Motion Tween

Vaikka animaation kesto aikajanalla olisi 100 framea, Motion Tween animaatiossa ei välttämättä tarvita kuin kaksi avainkehystä. Motion Tween koostuu kahdesta pääkuvasta, jotka sijoitetaan animaation ensimmäiseen ja viimeiseen Keyframeen - Flash MX laskee näiden kahden keyframen välillä tapahtuvan muutoksen (framet) itse, jolloin syntyy Tween-animaatio.

Avaa uusi esitys valitsemalla File/New

Luo uusi Graphic-symboli, jossa on sisällä jokin muoto. Sijoita tämä symboli sitten Stagen vasempaan laitaan.

Valitse Main Timelineltä framen 20 kohta aktiiviseksi hiirelläsi ja valitse ylävalikosta Insert/Keyframe.

Siirrä tässä uudessa Keyframe-kohdassa Graphic-symbolisi Stagen oikeaan laitaan.

Valitse Timelineltä Keyframe 1 -kohta aktiiviseksi ja valitse Frame Properties -paneelin Tween-kohdasta Motion. Jätä tässä vaiheessa Motion-asetukset ennalleen. Timelinelle pitäisi ilmestyä (kahden avainkehyksen väliin) sininen alue, jossa kulkee nuoli. Tämä merkkaa sitä, että kohdassa on nyt Motion Tween -animaatio.

Esikatsele animaatio.

Liikeanimaation asetukset

Liikeanimaatiota voi muokata, kun Properties-paneelin Tween-kohdassa on valittuna Motion. Properties-paneeli näyttää asetukset sitä framea koskien, mikä on Timelineltä valittu.
Scale: tämä kohta määrittää, skaalataanko animoitavan symbolin kokoa (jos olet animaatiossasi skaalannut symbolin kokoa, varmista tämän kohdan valinta, jotta skaalaus toteutuu)

Ease: Tämä säätö määrittää, miten animoitavan symbolin liike kulkee. Jos annat arvon väliltä -1 — -100, symbolin animaatio lähtee hitaasti liikkeelle ja nopeutuu loppua kohden. Jos annat arvon väliltä 1 — 100, lähtee animaatio nopeasti liikkeelle ja hidastuu loppua kohden.

Rotate: Tämän säädön avulla voit antaa animoitavalle symbolille Rotate-määrityksen. Auto-asetus pyörittää symbolia kerran liikkeen suuntaan animaation aikana. CW ja CWW asetukset pyörittävät symbolia Times-ruutuun merkatun luvun mukaan.

Orient to Path: Motion Guide -animaatiota käytettäessa saadaan liikkuva kohde noudattamaan ohjauspolun määrittämää liikereittiä (mihin palaamme kohta).

Sync: Synkronoi Graphic-symbolin oman Timelinen pääaikajanan kanssa. Jos sinulla on esim. Graphic-symbolin sisällä animaatio, jonka kesto on 25 framea ja haluat, että animaatio ehtii pyöriä kokonaisuudessaan 20 framea kestävän Tweenin aikana Main Timelinellä - valitse silloin tämä ruksi.

Snap: Tällä valinnalla Tween-animaation symboli liitetään Motion Guide -animaation polkuun. Kun valitset tämän vaihtoehdon päälle, on mahdollista määrittää Tween-animaatiosymbolin (Registration-pisteen avulla) kiinni polkuun.
Kokeile Rotate ja Ease -asetuksia Tween-animaatioosi. Kokeile myös skaalata animoitavaa objektia joko lähtö- tai lopetusframessa.

Värinmuutosanimaatio

Myös symbolien Color Style -osion alta löytyviä määrityksiä voidaan animoida.

Avaa uusi esitys valitsemalla File/New

Tee Graphic-symboli, jonka sijoitat keskelle Stagea.

Napsauta framen 15 kohdalla ja valitse Insert/Keyframe. Valitse ensimmäinen avainkehys aktiiviseksi ja määritä Frame Properties -paneelista Tween kohtaan vaihtoehto Motion.

Siirry Timelinellä Keyframe 15 -kohtaan, ja valitse Graphic-symboli aktiiviseksi Stagelta. Valitse Properties-paneelista symbolin Color-kohdasta vaihtoehdoksi Alpha ja säädä arvoksi 50%.

Esikatsele animaatio.

Voit muuttaa Alpha kohdan tilalle esim. Tint ja häivytyksen sijaan kappale vaihtaa värisävyä.

Shape Tween

Shape Tween-animaatiossa on aina kaksi Keyframea: aloittava ja lopettava Keyframe (kuten Motion Tween -animaatiossakin). Poikkeuksena on se, että Shape Tween voidaan määrittää ainoastaan avonaisiin muotoihin. Shape Tween -animaatio on muodonmuutosanimaatio, jossa jokin piirretty muoto muuttuu toisen näköiseksi.

Avaa uusi esitys, File/New

Käytä Tools-paneelista löytyviä piirtotyökaluja, ja piirrä esim. Brush-työkalua käyttäen muoto Stagelle.

Valitse Timelineltä tyhjä Frame 20 -kohta, ja luo siihen uusi Keyframe valitsemalla Insert/Keyframe.

Muuta ja vääristä nyt Keyframe 20 -kohdassa muotoa haluamallasi tavalla.

Valkitse kohta Timelinelta Keyframe 1 -kohta aktiiviseksi ja valitse Properties-paneelista kohtaan Tween asetukseksi Shape.

Main Timeline muuttuu kahden Keyframen välillä vaaleanvihreäksi, ja ko. kohtaan tulee Tween-toimintoa kuvaava nuoli.

Sitten pitäisikin olla valmista.

Muodonmuutosanimaation asetukset

Shape Tween -animaatiolla on myös omat määrityksensä Properties -paneelissa, jotka saat esille valitsemalla ensin Keyframen ja sen jälkeen valitsemalla paneelin Tween-kohdasta Shape.

Ease: sama kuin edellä

Blend: Osiossa on kaksi määrittelymahdollisuutta. Distributive, joka valitaan, kun määritetään Shape Tween-animaatiota epäsäännöllisille ja pyöreille muodoille, sekä Angular, joka valitaan, kun määritetään Shape Tween -animaatiota kulmikkaille tai paljon suoria viivoja sisältäville muodoille.

Shape Hint

Kun muunnettava muoto on monimutkainen, ei Flash tajua aina esteettisintä ja tehokkainta tapaa tehdä muunnos. Tätä prosessia helpottamaan on luotu Shape Hint-toiminto, jolla voi määritellä muutospisteitä itse.

Avaa uusi esitys, File/New

Tee kirjaimista uusi mutkikas muoto Stagelle, josta tulee ensimmäinen avainkehys.

Tee seuraava Keyframe frameen 25. Tähän tulee lopetusmuoto.

Valitse ensimmäinen Keyframe aktiiviseksi pääaikajanalta ja määritä Properties-paneelista Tween-kohtaan Shape. Esikatsele animaatiota. Todennäköisesti jotkin kohdat muovaantuvat epätasaisen näköisesti ja saattavat mennä jopa sisäkkäin.

Varmista että olet edelleen Keyframe 1 -kohdassa. Valitse Modify/Shape/Add Shape Hint. Keskelle muotoa ilmestyy punainen ympyrä, jonka keskellä pieni a - tämä on Shape Hint. Voit siirtää sen hiirellä kohtaan, jonka haluat merkitä.

Lisää Keyframe 1:ssä kuvaan Shape Hint -pisteitä tarpeellinen määrä ja sijoita ne kuvan kriittisiin kohtiin. Siirry sitten pääaikajanalla viimeiseen Keyframeen ja siirrä siellä olevat Shape Hint -pisteet niihin kohtiin, joihin haluat Keyframe 1:ssä merkittyjen kohtien muuttuvan.

Nyt animaation pitäisi olla sutjakampi. Voit poistaa vihjepisteitä napsauttamalla hiiren kakkoskorvalla haluamasi Shape Hintin päällä, ja valitsemalla avautuvasta tilannekohtaisesta pikavalikosta Remove Hint.

Motion Guide

Symboleita voidaan animoida siten, että ne seuraavat piirrettyä polkua. Nimitys tälle on Motion Guide -animaatio, ja se perustuu Tween animaatioon myös, eli siinäkin on aloittava ja lopettava Keyframe.

Avaa uusi esityspohja, File/New

Luo uusi Graphic-symboli ja sijoita se Stagelle.

Valitse Timeline framen 30 kohdalta, ja sijoita siihen uusi Keyframe. Ota frame 1 aktiiviseksi.

Napsauta nyt Layerin päällä hiiren oikealla korvalla ja valitse avautuvasta valikosta Add Motion Guide. Tämä lisää tason yläpuolelle uuden (Motion Guide-) Layerin.
Lukitse alempi taso ja siirry työskentelemään Guide-tasolle. Piirrä Pencil työkalulla reitti, jota haluat symbolin seuraavan.Tämä Motion Guide -Layerin sisältö ei näy lopullisessa esityksessä, joten sen ulkoasulla ei ole mitään väliä. Guide Layerissa voi säilöä työstämisen aikana myös omia muistiinpanoja tai piirrellä sinne auttavia apugrafiikoita, sillä nehän eivät jakelutiedostossa näy.
Poista lukitus grafiikkatasolta ja valitse Graphic-symboli aktiiviseksi. Paina hiiren painike pohjaan symbolin Registration-pisteen päällä. Vedä symboli piirtämäsi Motion Guide -viivan aloituspäähän. Kun Registration-piste koskee viivan päähän, muuttuu vetämäsi symbolin Registration-piste suuremmaksi ympyräksi. Vapauta hiiren painike ja kappale ottaa paikan "opastusviivalla".

Siirry aikajanalla frameen 30 ja valitse Arrow toolilla Graphic-symboli aktiiviseksi. Sijoita tämä vastaavasti Motion Guide -viivan toiseen päähän.

Valitse frame 1 aktiiviseksi grafiikkatasolta ja Properties paneelista Tween kohdan asetukseksi Motion.

Voit lisätä myös esim. Scale ja Rotate asetuksia.

Onion Skin - Sipulinkuorinäkymä

Onion Skin on apuväline animaation luonnissa. Se näyttää aikajanalla aikaisemmin ja edessäpäin olevat Framet "varjokuvana" Stagella. Siten on helpompi seurata miten liike jatkuu.

Onion Skin -painikkeet löytyvät Main Timelinen yhteydestä.

Framejen käsittely

Animaatioita tehdessä tulee usein tarve kopioida ja liittää eri frameja toiseen paikkaan tai siirtää koko animaatiosekvenssi toiseen esitykseen. Main Timelinellä olevia Frameja ja Keyframeja voi kopioida ja poistaa aivan kuten esim. Stagella olevia muotoja. Voit valita aikajanalta Frameja aktiiviseksi hiirellä napsauttamalla, ja Shift-näppäinalaspainettuna voit valita pidempiä yhtenäisiä jaksoja aikajanalta, tai kun pidät Control-näppäintä alaspainettuna voit valita frameja sieltä täältä.

Kätevin tapa Framejen käsittelyssä on napsauttaa hiiren kakkospainiketta valitun Framen (tai valittujen Framejen) päällä, jolloin ilmestyy seuraavanlainen pikavalikko:


Insert Frame: Lisää aktivoituun kohtaan tavallisen Framen

Remove Frames: Poistaa valitun tai valitut framet aikajanalta

Insert Keyframe: Luo uuden avainkehyksen aikajanalle

Insert Blank Keyframe: Luo uuden tyhjän avainkehyksen valittuun kohtaan

Clear Keyframe: Muuntaa valitun Keyframen tavalliseksi frameksi

Convert to Keyframes: Muuttaa aikajanalta valitun alueen avainkehyksiksi

Convert to Blank Keyframes: Muuntaa valitun alueen framet tyhjiksi Keyframeiksi

Cut Frames: Leikkaa framet

Copy Frames: Kopioi

Paste Frames: Liittää framet leikepöydältä valittuun kohtaan

Clear Frames: Tyhjentää valitut Framet

Select All Frames: Kaikki framet tulevat valituiksi ja aktiivisiksi

Reverse Frames: Kääntää valitut framet aikajanalla vastakkaiseen suuntaan. Esim. vasemmalta oikealle kulkeva animaatio muuttuu oikealta vasemmalle kulkevaksi.

Frameja voi myös siirrellä aikajanalla. Valitse framet jotka haluat siirtää ja vedä ne hiiren namiska pohjassa haluttuun kohtaan. Ne voi vetää myös toiseen tasoon.

Harjoitus Framejen kopioinnista ja liittämisestä

Luodaan maskin avulla "sisääntuloefekti" bittikarttakuvalle.

Avaa uusi esitys, File/New

Luomme animaation ensiksi pääaikajanalle. Animaatioon tulee pieni ympyrä, joka kasvaa yli Stagen. Piirrä ympyrä Stagelle ja valitse se aktiiviseksi, mikä jälkeen se muutetaan symboliksi ylävalikon kautta, Insert/Convert to Symbol. Valitse Convert Symbol -ikkunasta tyypiksi Graphic.

Skaalaa symboli pieneksi Free Transform toolilla (Scale). Pidä symboli aktiivisena ja valitse Window/Align. Määritä asetukseksi To Stage ja tasaustavoiksi Align horizontal center sekä Distribute Vertical Center.

Valitse aikaja framen 30 kohdalta aktiiviseksi ja lisää siihen Keyframe. Skaalaa symboli peittämään koko Stage.

Valitse Shift-näppäin pohjassa kaikki framet aikajanalta ja luo Motion Tween animaatio hiiren oikean napin kautta saatavan tilannevalikon kautta: Create Motion Tween - Ota tämä valikko esiin framen 30 kohdalla. Lopuksi voit yrittää lisätä animaation sulavuutta Ease-määrityksillä.

Kun animaatio on kunnossa, valitse ensimmäinen frame aikajanalta aktiiviseksi. Paina Shift-näppäin pohjaan ja valitse viimeinen frame. Nyt myös väliin jäävät framet tulevat valituiksi.

Klikkaa hiiren oikealla korvalla framen 30 päällä ja valitse tilanne-/pikavalikosta Copy Frames. Luo uusi symboli, Insert/New Symbol ja anna tyypiksi tällä kertaa Movie Clip.

Näkymän pitäisi olla nyt Movie Clip -symbolin omalla aikajanalla. Valitse tämän aikajanan ensimmäinen ruutu ja valitse tilannevalikosta Paste Frames. Animaatio kopioituu Movie Clipin sisään.

Palaa takaisin pääaikanalle. Valitse Shift-näppäintä apuna käyttäen kaikki framet ja valitse Remove Frames. Aikajan pitäisi olla nyt tyhjä. Luo frameen 1 Keyframe.

Seuraavaksi tuomme esitykseen bittikarttakuvan. Valitse File/Import ja valitse c:/flashkurssi kansiosta mallikuva1.jpg. Asettele kuva siten että se peittää koko Stagen.

Valitse Insert/Layer ja napsauta hiiren oikeanpuoleista painiketta uuden tason päällä, valitse vaihtoehto Mask. Poista lukitus ko. tasosta ja avaa Library. Vedä sieltä laatimasi Movie Clip -symboli Stagelle (ja mask-layeriin).

Keskitä tämä Movie Clip Align-paneelin avulla.

Nyt pitäisi olla valmista. Huomaa että tehtävässä saatiin mahtumaan 30 framen pituinen animaatio pääaikajanalle siten, että se varaa vain yhden ainoan kehyksen!

Tween-ristikuva

Luo uusi tyhjä movie, kooltaan 320 x 240 pikseliä.

Valitse File-valikosta Import ja tuo esitykseesi kaksi kuvaa, r_kuva1.png ja r_kuva2.png. Kuvat ovat valmiiksi Photoshopissa oikeaan kokoon muokattuja.

Kuvat ilmestyvät sekä Stagelle että Libraryyn. Deletoi aineistot Stagelta. Seuraavaksi luodaan Libraryssa olevista kuvista Graphic-symbolit. Ota ylävalikosta Insert/New Symbol. Anna ensimmäiselle symbolille nimeksi Kuva 1. Raahaa Librarysta ensin esitettävä kuva Symbolin alueelle - keskitä kuva Align-paletin avulla. Palaa pääaikajanalle ja toista samat vaiheet toiselle kuvalle, nimeksi tulee vain Kuva 2.

Nyt Libraryn pitäisi näyttää sisällöltään seuraavanlaiselta:
Tee pääaikajanalle toinenkin Layer. Nimeä tasot nimin Kuva 1 ja Kuva 2.

Siirrä Librarysta Kuva 1 (Graphic) layerille Kuva 1. Toista sama kuvan ja Layerin Kuva 2 kohdalla.

Paina Layerin Kuva 1 framea 15, ja tee siihen keyframe (F6). Valitse seuraavaksi frame 15 Kuva 2 -taoslta ja toista edellinen. Pääaikajanalla on nyt kaksi viidentoista framen tasoa.

Seuraavaksi ristikuvan tekeminen - tarkoituksenahan on siis häivyttää kuva toiseen ilman että valkoinen tausta näkyisi välillä.

Alemmalla tasolla oleva kuva on koko ajan näkyvissä (Alpha: 100%) ja ylempi kuva häivytetään pois (Alpha: 0%), jolloin alempi kuva paljastuu.

Paina ylemmän tason framessa 15 ja klikkaa kuvaa Stagella. Nyt voit asettaa viimeisen avainkehyksen Alpha arvoksi 0. Valitse kaikki Kuva 2 -tason framet ja ota tilannekohtainen pikavalikko esiin viimeisen framen päällä - valitse Create Motion Tween.

Luo vielä yksi taso, nimeltään Actions, ja luo siihen avainkehys frameen 15. Ota esiin Actions-paneeli ja avaa skriptivalikosta kohta Actions/Movie Control ja tuplaklikkaa kohtaa Stop, jolloin koodi ilmestyy skriptailuikkunaan.

Voit hidastaa kuvasiirtymää lisäämällä animaatioon frameja. Klikkaa toistopää jonnekin esityksen keskivaiheille palkkiin, jossa frameluvut ovat näkyvissä. Mikään spesifi layer tai frame ei ole siis valittuna. Näpytä F5-näppäintä, jokainen painallus lisää yhden framen valitsemaasi väliin.

Esikatsele tuotosta: Paina Ctrl+Enter. Samalla Flash luo .swf -päätteisen esitystiedoston samaan kansioon työtiedoston kanssa. Vertaa vielä resurssinhallinnassa tiedostojen kokoeroja.