curlingthebrackets / flash / flash-type / oevelse /

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

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)

Sektioneret movieclip kontrol (as2, as3)

Objektet / Animationen

_ Tegn fx. en frame by frame animation i en movie_clip (opret og navngiv Symbolet i library)
_ Grib et objekt i nærheden af dig og hold det i den ene hånd mens du tegner. Bevæg det lidt efterhånden som du animerer det..
_ (F5,F6,F7 – højreklik for frame-menu) – f7 er en tom keyframe
_ OnionSkin slået til, for at se forrige tegning
_ Brug flere lag for flere elementer der indgår i hver tegning (eks. : gaffel-lag, mad-lag)
_ Træk en ‘instace’ af symbolet ud på scenen og ret det til (flyt, skaler..)
_ gem fla-filen og ‘test movie’ (ctrl+enter)

frame_by_frame
onion_skin

Play Stop knapperne:

_ Opret button-symboler i Library til en stop og en play-knap. Knappernes tidslinie skal bare bruges til deres umiddelbare udseende – og hit-framen til at bestemme hvor stort et område musen skal reagere på.
_ Træk instances af dem ind på scenen.
_ Navngiv alle movieclips på scenen, som skal kontrolleres af actionscript. (properties > instance-name).

AS2
Marker knap på scenen, åbn script-vinduet og tast henholdsvis

on (release) {
	sti.til.objektnavn.stop();
}
on (release) {
	sti.til.objektnavn.play();
}

AS3
Her skal knappen ikke markeres, medn derimod den frame scriptet skal stå på.

//framescript
playknap.addEventListener(MouseEvent.CLICK, mcPLAY);
function mcPLAY(e:MouseEvent) {
	sti.til.movieclipinstancenavn.play();
}
stopknap.addEventListener(MouseEvent.CLICK, mcSTOP);
function mcSTOP(e:MouseEvent) {
	sti.til.movieclipinstancenavn.stop();
}

Brug gerne sigtekornet til at pege på target i actionpanelet. Chek også for fejl før du forlader actions-vinduet.

Objektets Timeline-tabel

_ ‘hjemme hos’ movieclippet (på dens egen tidslinie) skal der laves nogle animerede variationer af den første – nogle forløb, som knapperne senere skal få den til at udspille. Efter den første spiller rækkefølgen ikke den store rolle. Marker flere frames af gangen gennem alle lagene, og træk for at flytte en hel sektion – ALT+flyt laver kopier.
Tidslinien inddeles således i mindre sektioner.
_ På et Labels-lag indsættes en navngivet keyframe (properties > frame name – ingen fancy tegn) for hver gang et forløb starter.
_ På et actions-lag indsættes en keyframe med en afviklings kommando på hver forløbs sidste frame – det vil typisk være stop(); men kunne også være gotoAndPlay("labelname"); hvis den skal loope.

Der kan også være enkelte stillestående frames, man har brug for at navngive – fx. “gul”, “blaa”, eller en tom keyframe: “forsvind”..
Hovedsagen er at hver sektion skal give mening med dens navn – og at tidslinien skal være overskuelig og nem at redigere.

Goto Knapperne:

_ Flere knap-symboler i Library, eller genbrug.
_ Denne gang skal de referere en frame-label

AS2

// buttonscript
on (release) {
	sti.til.objektnavn.gotoAndPlay("framelabel");
}

AS3

// framescript
knap.addEventListener(MouseEvent.CLICK, mcGO);
function mcGO(e:MouseEvent) {
	sti.til.movieclipinstancenavn.gotoAndPlay("frameLabelNavn");
	// Prøv også med gotoAndStop("frameLabelNavn");
}