Globale linker

Flash

Motion Tweening

Nå skal vi endelig begynne med litt «serriøs annimàssjon». Vi bruker Motion Tweening til å få elementer til å flytte på seg.

Som du kanskje husker fra tidligere, baserer en animasjon seg på Keyframes og «Tweens», rammer hvor Flash selv beregner animasjone. Vi behøver kun å fortelle Flash hvor vi skal begynne og hvor vi skal ende. Alt som ligger mellom er Flash's jobb å finne ut av for oss.

Det er to typer av animasjon i Flash; Motion Tween og Shape Tween.

Motion Tween bruker vi altså når vi vil forflytte et element fra punkt A til punkt B.

VIKTIG!!! Motion Tweens fungerer bare på symboler og grupperte elementer
  1. Åpne et nytt blankt dokument
  2. Tegn inn et element (f.eks. en sirkel)
  3. Sett inn en Keyframe (F6)i Frame 24
  4. Flytt elementet til der du vil det skal ende
  5. Klikk et eller annet sted mellom de to Keyframene i Timeline
  6. I Frame paletten velger du «Motion»

Feil i TimelineHvis du titter opp i Timeline nå, vil du se at du har en stiplet linje mellom de to Keyframe'ne, og hvis du prøvekjører animasjonen, ved å trykke Enter, vil sirkelen stå stille inntil den kommer til siste Keyframe. Da vil elementet hoppe til den nye posisjonen du ga den. Ikke særlig imponerende animasjon!

Løft blikket litt og se på hva som står etter VIKTIG!!!Vi har ikke konvertert sirkelen til et symbol, eller gruppert den. Alle i kor nå: SHAPE TWEEN FUNKER KUN PÅ SYMBOLER ELLER GRUPPERTE ELEMENTER!

  1. Lukk dokumentet og åpne et nytt blankt et
  2. Tegn inn et element
  3. Konverter til Graphic Symbol (F8)
  4. Sett inn nytt Keyframe (F6) i Frame 24
  5. Flytt elementet til der du vil det skal ende
  6. Klikk et eller annet sted mellom de to Keyframe'ne
  7. I Frame paletten velger du «Motion»

Korrekt TimelineNå inneholder Timeline'n for Layer 1 en pil mellom de to Keyframene på en blålilla bakgrunn. Fargen betyr at her foregår det en Motion Tween.

Konklusjon: Shape Tween fungerer bare på symboler eller grupperte elementer!

Klikk et eller annet sted mellom de to Keyframe'ne

  1. Klikk og markèr Frame 1 i Timeline og skriv inn en tekst som beskriver animasjonen

Navngi Timeline i Frames palettenVed å venne seg til å navngi de forskjellige animasjonene, kan vi senere lett finne fram til riktig sted når vi skal begynne med Action Scripting. Så venn deg til det først som sist.

Skalere elementer i Motion Tween

Samtidig som vi flytter et element fra et sted til et annet kan vi også skalere det, enten gjøre det større eller gjøre det mindre.

  1. Klikk og markèr Frame 24 i Timeline
  2. Pass på at du har Arrow Tool (V) aktivt, og velg Scale fra Optionsdelen i verktøykassen.
  3. Skalèr elementet til ny størrelse
  4. Prøvekjør animasjonen
  5. Klikk og markèr Frame 1
  6. Ta en titt i Frame paletten

ScaleNå vil du se at det er haket av for Scale. Denne er haket av som standard og det er egentlig ingen grunn til å ta den bort, men gjør det nå. Hvis du nå tar tak i Playhead og drar den mot Frame 24, vil du se at elementet beholder sin originale størrelse inntil den kommer til Frame 24, hvor den plutselig får sin nye størrelse. Med denne på, gjør Flash alt det vanskelige arbeidet med å beregne de mellomliggende framene for oss.
Skru den på igjen, du.

Rotere elementer i Motion Tween

I en Motion Tween kan vi også rotere elementer, der de vandrer på sin vei fra A til B.

Rotere

  1. Klikk og markèr Frame 1
  2. I Frame paletten velger du Rotate CW (Clockwise) (CCW=CounterClockWise) og antall ganger den skal rotere fra A til B.
  3. Prøvekjør ved å trykke Enter
  4. Hvis du i begge Keyframene velger Modify > Transform > Edit Center, og flytter midtpunktet til noe annet enn midten, kan du få morsomme resultater av rotasjonen.
  5. Prøvekjør igjen

Easing

EasingEasing bruker vi til å kontrollere akselerasjonen i animasjon. Som default står den på 0, og da skjer tweeningen med samme fart gjennom hele animasjonen.
Dette er kanskje ikke helt naturlig. Det er naturlig at det begynner sakte og går fortere mot slutten.

Ved å velge en negativ verdi, begyner elementet sakte i punkt A og akselererer mot punkt B.(easing in)
Ved å velge en positiv verdi, begyner elementet raskt i punkt A, og de-akselererer mot punkt B.(easing out)

  1. Klikk et eller annet sted mellom de to keyframe'ne og test ut med forskjellige verdier for Easing

Tone inn/ut elementer

I en Motion tween kan vi også tone inn/ut elementer, altså få elemenetene til å bli mer, eller mindre, synlige.

  1. AlphaKlikk og markèr Frame 1
  2. I Effect paletten velger du Alpha fra nedtrekksmenyen
  3. Sett Alpha = 0
  4. Test (Enter)

Forandre farge

I en motion Tween kan vi også forandre farge på elementene i animasjonen.

  1. Klikk og marker Frame 36
  2. Sett inn nytt Keyframe (F6)
  3. I Effect paletten velger du Tint og velger en ny farge. (Legg merke til at hele elementet får ny farge, inklusive kantstreken.)
  4. Klikk et eller annet sted mellom de to frame'ne (24 og 36)
  5. I Frame paletten velger du Motion (evt. høyreklikk på Timeline og velg Motion Tween)
  6. Klikk og markèr Frame 24
  7. I Frame paletten skriver du inn et navn som beskriver hva som skal skje
  8. Prøvekjør

Motion Guides

En Motion Guide er en Path, eller sti, du tegner opp som du vil at elementet ditt skal følge i animasjonen. Denne Path'en er usynlig utenfor Flash og vil ikke synes i det publiserte resultatet.

  1. Åpne et nytt, blankt dokument
  2. Lag et enkelt element, f.eks. en sirkel.
  3. Navngi Layeret
  4. Konvertèr elementet til Graphic Symbol (F8)
  5. Plassèr elementet der du vil det skal starte, gjerne utenfor scenen, slik at det kommer flyvende inn.
  6. Lag et Keyframe litt lenger bort på Timeline, f.eks. i Frame 36
  7. Nå har vi bare et Layer i animasjonen, men ellers må du passe på at du har riktig Layer valgt før neste steg.
  8. Velg Insert > Motion Guide (evt. høyreklikk på elementlayeret og velg Add Motion Guide). Motion Guide Layeret dukker automatisk opp ovenfor det markerte Layeret, og det arver navnet til layeret det skal være en guide for, med Guide foran navnet, og et lite symbol som kan se ut som en sprettball.
  9. På dette Motion Guide layeret tegner du inn banen du vil at elementet skal følge f.eks med Pencil Tool (Y) (her kan du bruke et hvilketsomhelst tegneverktøy, det viktige er at du har en LINJE). Fargen på denne linjen har ingenting å si, utenfor Flash vil den være usynlig.
  10. Lås Motion Guide Layeret ved å klikke på plassen for låssymbolet. Dette gjør for at vi ikke skal kunne flytte på det.
  11. Markèr Frame 1; ta tak i elementet som skal animeres og flytt det bort til begynnelsen av streken. Har du på View > Snap to Object, vil elementet snappe til linjen.
  12. Markèr Frame 36 og trekk elementet til slutten av linjen. Pass på at den snapper til linjen.
  13. Velg en frame mellom de to Keyframe'ne, og i Frame paletten velger du Motion.
  14. Test (F12)

Det som er viktig å huske på, er at Timeline'n i Motion Guide Layeret må være like langt som Timeline'n i elementets Layer.

Neste sideGå til neste side hvor i skal se på Shape Tween