curlingthebrackets / flash / flash-emne / animation /

• Mix
• tech
• web
• flash
• M2
• M5
• WP
• M10a
• About

Biltur

En øvelse med movieclips inden i movieclips inden i movieclips.. – som gerne skulle samle op på det basale animation, flere tidslinier og anvendelsen af playback-actions.

.

Opbygning af bil og knapmenu

Her er det nødvendige konstruktions-overblik, for ikke at fare vild i de indlejrede symboler.
Hovedscenen, har fået et filnavn, og er skitseret som en stor movieclip.
(“hjul” ser beklageligvis lidt grå ud, men er i virkeligheden hvid.. Vejstøv!)

Objekt Diagram

Typebetegnelse

<instancenavn> er angivet i en tag – i modsætning til navnet i library.
Movieclip – indeholder motiontween
Movieclip – indeholder shapetween
Movieclip – indeholder en tidslinie med “sektioner”
Knap – eller movieclip brugt som knap
Movieclip – indeholder kun 1 frame med grafik eller movieclips.

Iscenesættelse

Når bilen er færdigbygget, kan den motiontweenes på scenen, i sit eget lag.
Vær omhyggelig med alle instancenavne, også i de indlejrede movieclips.
Menuen til at interagere med bilens animationer ligger i et nyt lag på hovedscenen (den indeholder de 3 lys-knapper).

Actions

Lav et actions-lag øverst på scenens tidslinie.

Hver lys-knap har en eventListener og en funktion tilknyttet, lav en af gangen og test filmen ofte.
I hver funktion er der denne gang flere tidslinier, som skal stoppe eller spille.. Prøv om du kan identificere dem ved at se eksemplet godt igennem, og tage en kommando af gangen.

Udfordringen er, at udpege den rigtige tidslinie for at aktivere knapper og movieclips. Derfor angives stien hele vejen ned igennem de navngivne objekter, adskilt med punktum.

// Erstat alle "navne.på.en.sti"
// med de rigtige instancenavne - se objekt diagrammet
sti.til.knap.navn.addEventListener(MouseEvent.CLICK, FUNKTIONSNAVN);
function FUNKTIONSNAVN (e:MouseEvent) {
    sti.til.movieclip.navn.play(); // eller var det stop();
    igen.en.sti.til.movieclip.navn.play(); // eller måske stop();
    // osv.
}

.

Brug bilen

Når først sådan en god grundmodel er skruet sammen, kan den pimpes med yderligere udstyr, køre for evigt i al slags terrain, og fortælle historier.. – med lyd ?

.

Turorials Animation

adobeAnimationguide
Den bedste hurtige cs4 rundtur
et par små ulemper med den nye motiontween måske

Frame by frame

walk cycle
walk cycles tricks
Dermot O’connor den proffe walk cycle i 4 dele

bones

bones på photoshop movieclips (lag er jeres venner) | flash-cs4-animating-puppets.html En god og grundig gennemgang af bones på movieclips
part2 target=”_blank” | part3 | part4 | part5 | part6
animate bones

3D

3d-rotation
exploring, animating 3d
bog og sider
scriptede 3d classes på flashandmath

cs4 effekter

spraybrush med moviclips!
deco-tool med movieclips

Blandet

cutout teknik med pelikan

Playback af MovieClips

Dette er anden del af en øvlsesserie. Første del er Animationer i movieClips
Formålet er at lave knapper og kontrolere hvert movieclips tidslinie, med simple knapfunktioner i actionscript3.
.

Knapper

Der oprettes nye symboler af typen “button” (i eksemplet er der lavet 2: en kaldt “play” , en kaldt “stop”).
I eksemplet genbruges samme knap-symboler for hvert movieclip, men der må også gerne laves flere, hvis de skal se forskellige ud.

Knappers tidslinie er begrænset til det strængt nødvendige: det umiddelbare udseende. Knappers funktionalitet, scripter man sig til.
Knappers frames er fordelt på up-, over- og down-stadier. Hit-stadiet bruges kun til at aftegne det “musefølsomme” areal med en shape, som ikke vil kunne ses.
Den ønskede grafik placeres på de relevante stadier i keyframes.
Grafik kan også på knapper, med fordel opbygges i lag – særligt hvis grafiken er kompliceret.

Alle play og stop knapper skal derefter arrangeres ud på hovedscenen – på deres eget lag: knapper.
Selvom der endnu ikke er scriptet noget funktionalitet, kan der med fordel testes, og man vil kunne se at man med musen får en “hånd” over knappen, med den grafik man indsatte på en keyframe i over-stadiet.

Instance navne

Skal man kunne nævne knap- eller movieclip-instances i sit script, og det skal man for at kunne igangsætte hver handling med et klik, så skal de have unikke navne.

Marker på hovedscenen hvert movieclip-instans og hver knap-instans individuelt – og navngiv det fra property-panelet.
De kan i princippet hedde hvad du vil, bare overhold web-navngivnings-konventionerne.

Det er smart at have et navngivnings system, som du – og andre – kan gennemskue.
Prøv at se om du kan gennemskue dette system:

Actions

Stil dig på hovedscenens eneste frame på et nyt lag øverst oppe, som du passende har døbt actions.
Actions panelet åbnes (find det i window-menuen, eller tryk f9, eller højreklik.) – og der tastes.

NB: Vær opmærksom på, at alle kommandoer skrives på samme linie indtil tuborgklammer eller afsluttende semikolon!

Knap funktioner – og fejlmeldinger

Får du en fejlmelding i et output vindue, så læs den og ret den. Det er ligesom med validering bare værre: Intet virker.
Her kommer et par hurtige tips til de mest ofte-forekommende forseelser:

Hver knap har sit eget instance-navn (chek det).
Hver funktion knappen kalder, har også sit eget navn (chek det).
Hver movieclip-instance, hvis tidslinie kontrolleres i funktionen har også sit eget navn (chek også det).
Navne i actionscript skal selvfølgelig staves præcis ligesom objekternes “døber” har skrevet dem i property-panelet.

 
knapNavn.addEventListener(MouseEvent.CLICK, FUNKTIONSNAVN);
function FUNKTIONSNAVN(e:MouseEvent){
	movieClipNavn.play();
}

Her er funktionernes navn stavet med store bogstaver, for at vi nemmere kan se forskel på objekter og funktioner.
MOTIONPLAY refererer til den funktions faktiske gerning: motion_mc’s tidslinie sættes i gang, MOTIONSTOP får samme tidslinie til at stoppe.
Funktionerne for at kontrollere shape_mc’s tidslinie kan du kalde hvad du vil, men det vil være konsekvent at kalde dem for SHAPEPLAY, osv., osv.

Animationer i movieClips

Dette er første del af en øvlsesserie. Anden del er Playback af movieClips

Formålet er at undersøge de forskellige animationstekniker opstillet i animation teknikker – samt at anvende dem hver især i deres eget movieclip for derigennem at kunne håndtere flere symbolers tidslinier og lag.

De 3 Movieclips

Oprettelse af nye movieclips

I eksemplet nedenfor, er der oprettet nye movieclips ved at klikke på nyt symbol – knappen nederst i Library-panelet.

Animerede movieclips

Indeni deres respektive tidslinier ligger der 3 forskellige animationer: en motiontween med rotation, en shapetween, og en frame by frame animation.
Vær opmærksom på motiontween’en, som nødvendigvis kræver endnu et nyt symbol til at “motiontweene” med, da det kun kan foregå med et instancieret symbol. Også når det skal foregå inden i et symbol. En nem måde er at konvertere grafik til symbol direkte med højreklik eller F8.

Instanciering af movieclips

De 3 movieclips er instancieret på scenen: trukket ud fra Library, mens man står på scenen. Hvis scenen er tom, vil en test med CTRL+Enter/Command+Enter ingenting vise, selvom movieclipsene er nok så færdige og animeret.

Eksempel

Download eksempel

Brug højrekliksmenuen for at downloade den færdige løsning, hvis du vil kigge i mine movieclips.
anim.fla (eksempel ovenfor)

Walkcycle slide

Definition

En walkcycle er den sekvens af bevægelser mellem det ene trin i et gangforløb og det andet – lige til bevægelsen gentager sig.

Teknikker

- med flyttet fodfæste – til duplicering
- på stedet /trædemølle – i en movieclip til at tweene
Frame by frame eller mindre tweens
Bones (mest til kagemænd) på en shape, eller på “kropsdele” i movieclips
Efter billeder / video

Inspiration

Se Google og myriaderne af forskellige ‘stickman wars’
Legato (Nicholas Clauss)
En kreativ gif-animation

Ressourcer

Eadweard Muybridge
Preston Blair
Se tutorials på hyperlisten til animation
http://minyos.its.rmit.edu.au/aim/a_notes/anim_contents.html

Animation teknikker

Nedenstående tekniker kan også kombineres efter behov på samme timeline.

Classic Motion tween

anvendes på et symbols ‘instance’.

position = bevægelse
skalering = zoom effekt
rotation
vridning
Color effekt (tint, alpha) = fx. fade effekt
Filters (fx. drop shadow, blur)
Easing (brems, accelerer..) sættes generelt på hele tweenen, også hvis effekterne er kombinerede.

.

“New” Motion tween

anvendes på et symbols ‘instance’.

Kun siden CS4 -
Laver præcis samme forandringer i en movieclips properties som den klassiske motion tween, men danner selv nye keyframes, når objektet forandres.
Dels ved intuitiv “manuel ændring” på scenen –
- eller/og ved at indstille i Motion editor. Der kan man blandt meget andet indstille easing for hver enkelt property.

.

Shape tween

anvendes på en shape.

.

Frame by Frame

frame_by_frame
onion_skin

.