Flash:ia hieman syvemmälle Animaatiot

1. Edellisen tunnin kertaaminen

1.1 Mitä asioita käsiteltiin?

1.1.1 Mikä Flash on?

1.1.2 Mitä sillä voi tehdä?

1.1.3 Mitä eroa on bittikartta- ja vektorigrafiikalla?

1.1.4 Mitkä ovat Flash käyttöliittymän osat?

1.1.5 Millaiset symbolit kuvavat kehysten eri toimintoja?

1.1.6 Miten animaation nopeutta voi säädellä?

1.1.7 Mistä dokumentin asetuksia voi muuttaa?

1.2 Frame-by-Frame animaation tekeminen

1.2.1 Onion Skin?

1.2.1.1 Mitä hyötyä?

1.2.1.2 Milloin kannattaa käyttää?

1.2.1.3 Mitä merkityksiä eri painikkeilla?

1.2.1.4 Miten voi kasvattaa Onion Skin:n näkymää?

1.2.2 Tehtävä: Täydennä seuraava Frame-by-Frame animaatio toimivaksi, sujuvasti liikkuvaksi animaatioksi

2. Tallentaminen

2.1 Tiedostomuodot swf ja fla

2.1.1 näytä tiedostot moodlesta

2.1.1.1 Mitä eroa näillä on?

Jos tallennat esityksen käyttämällä valikkokomentoa File/Save tai näppäinkomennolla Ctrl+S, järjestelmä tallentaa tiedoston fla -pääteisenä - ei swf -päätteisenä

SWF --> valmis ohjelma

Täytyy erikseen kääntää Flash editorissa

Vaatii toimiakseen Pluginin

Voidaan toistaa mm.

Selaimessa

Flash Xtran kanssa tiedostoja voidaan käsitellä mm. Macromedian Director -ohjelmassa

Ohjelmissa, jotka ymmärtävät ActiveX -tekniikkaa.

Osana QuickTime -esitystä.

Yksittäisenä esityksenä eli Projectorina (esim. cd-romilla oleva Flash -esitys, jonka sisällä on Flash Player)

FLA --> muokattava tiedosto

2.2 Valmiin esityksen kääntäminen .swf -muotoon

2.2.1 Esitys, joka käännetään on Frame-by-Frame -animaatio, joka juuri luotiin.

2.2.2 Muista esityksen optimointi (etenkin WWW -julkaisut)

Käytä harkitusti bittikarttakuvia

Vältä suurikokoisia äänitiedostoja

Tee jokaisesta graafisesta elementistä (joka esiintyy useammin kuin kerran) Graphic -symboli.

Käytä animaatioiden taltioimiseen Movie Clip -symbolia.

Käytä animaatioissa mahdollisimman paljon Tween -animaatioita

Käytä piirtäessäsi mahdollisimman vähän erikoisia Stroke -viivoja, kuten katokoviivoja/pisteviivoja.

Brush -työkalulla tehdyt viivat ovat kilotavuiltaan raskaampia kuin Pencil -työkalulla tehdyt

Optimoi piirretyt viivat

Erittele animoidut ja ei-animoidut elementit omille tasoille

Käytä mahdollisimman vähän erilaisia fontteja ja säästeliäästi upotettuja fontteja

Käytä Color Style -asetuksia muuttelemaan elementtien väripintoja

Käytä säästeliäästi Gradient -väripintoja, sillä niiden koko on hieman suurempi kuin Solid -väripintojen.

Käytä hyuödyksesi eri formaattien omia pakkausvaihtoehtoja.

2.2.3 Esityksen tarkistaminen (ja koon tarkkailu) Test Moviella

Tähän tilaan pääsee

Ctrl+Enter

Control --> Test Movie

Voit tarkkailla kaistan kulutusta valitsemalla

View --> Bandwidth Profile

Kaistan leveys

View --> Simulate Download

Simuloidaan esityksen lataaminen

Movie osiossa näkyvä informaatio

Dim: esityksen koko pikseleinä

Fr Rate: montako kuvaa sekunnissa

Size: esityksen kokonaiskoko kilotavuina

Duration: esityksen kesto Frameina (suluissa sekuntteina)

Preload: kuinka kauan aikaa esityksen esilatautumiseen kuluu nykyisellä yhteisnopeusasetuksilla

Settings-osiossa näkyy

Bandwidth -asetus, joka näyttää käytettävän yhteysnopeuden.

State-osiossa

Frame näyttää Framen numeron

Loaded näyttää reaaliajassa, paljonko esitystä on ladattu.

2.2.4 Esityksen julkaiseminen

File --> Publish Settigns

Voidaan asettaa erilaisia asetuksia

Flash välilehti

version: mikä playerin versio

Load order: tasojen latautumis järjestys

ActionScript version: käytetty actionscript versio

generare size report: erilliseen tekstitiedostoon tiedot flash -esityksen sisällöstä

protect from import: estää .swf -tiedoston tuomisen takaisin editointiin

omit trace actions: estää trace toiminnon näkymisen valmiissa esityksessä

debugging permitted: sallii esityksen debugger toiminnan käyttämisen

compress movie: (vain versiot 6 tai 7) pienentää vielä lisää esityksen kokoa

password: salasana debug ja import toiminnoille

jpeg quolity: kuvien pakkaus

audio stream ja audio event: paikka-asetusten määritteleminen

override sound settings: poistaa äänelle tehdyt asetukset, jotka on tehty flashissä

export device sounds:device soundin aktivoiminen esitykseen

Publish

3. Shape Tween animaatio

3.1 Miten se eroaa frame by frame animaatiosta?

3.2 Miten se tehdään?

3.3 Tehdään esimerkki

3.4 Oppilaiden tulee tehdä shape tween animaatio, jossa pallosta tulee neliö

3.5 Shape Tween ominaisuudet

Ease: Jos arvo on väliltä -1 - -100, animaatio lähtee liikkeelle hitaasti ja nopeutuu loppua kohden. Jos taas arvo on väliltä 1 - 100 lähtee animaatio liikkeelle nopeasti hidastuen loppua kohden

Blend: Osiossa on kaksi määrittelymahdollisuutta

Distributive -vaihtoehto valitaan, kun määritetään ShapeTween -animaatiota epäsäännöllisille ja pyöreille muodoille

Angular valitaan, kun määritetään ShapeTween -animaatiota kulmikkaille tai paljon suoria viivoja sisältille muodoille

3.6 Shape Hint

Käytetään, jos liian monimutkainen muoto

Toimii valitsemalla alueita, joiden avulla helpotetaan tietokoneen laskenta prosessia.

Käydään asia lävitse

1. Avaa esitys moodlesta shapeHint.fla

2. Valitaan Text-työkalu, valitse fonttimääritykseksi Arial Black -fontti ja kirjoita työalueelle R -kirjain

3. Valitse Timelinelta tyhjä kehys 25 -kohta ja luo siihen uusi keyframe.

4. Napsauta Text -työkalulla R-kirjaimen tekstikenttää ja vaihda kirjain K -kirjaimeksi

5. Pidä tekstikenttä aktiivisena ja valitse Modify --> Break Abart (CTRL + B)

6. Toista tämä myös R-kirjaimelle Keyframessa 1

7. Valitse Keyframe 1 -kohta aktiiviseksi MainTimelinelta ja määritä sen Frame Properties -paneelin Tween -kohtaan Shape

ESIKATSELUSSA HUOMAA, ETTÄ ANIMAATIO EI TOIMI OIKEIN KUNNOLLA

8. Varmista, että olet edelleen Keyframe 1 -kohdassa.

9. Valitse Modify --> Shape --> Add Shape Hint (Ctrl + Shift + H)

10. Muodon keskelle ilmestyy punainen ympyrä, jonka keskellä on pieni a -kirjain. Tämä on shape hint. voit siirtää sitä hiirellä vetämällä kohtaa, jonka haluat merkitä.

11. Lisää keyframe 1:ssä kuvaan shape hint -pisteitä tarpeellinen määrä ja sijoita ne kuvan "kriittisiin kohtiin".

12. siirry sitten maintimelinella viimeiseen keyframeen ja siirrä siellä olevat shape hintit niihin kohtiin, joihin haluat keyframe 1:ssä merkittyjen kohtien muuttuvan. (LAITA R:SSÄ VASEN YLÄ (A), VASEN ALAREUNA (B), OIKEA ALA (C) JA K:SSÄ VASEN YLÄ (A), VASEN ALAREUNA (B) JA OIKEA ALA (C))

4. Layerit (tasot)

4.1 Mitä ne ovat, mitä hyötyä niistä on

4.2 Simuloi tasot kolmella kalvolla sekä valkoisella paperilla, kalvoihin piirrettynä jotain kuten paperiinkin

4.3 Käydään Flash:ssä se, että miten homma toimii

4.4 Oppilaat tekevät esityksen, jossa on useampia layereita sekä jokin animaatio, jonka jälkeen julkaisevat sen.