curlingthebrackets / flash /

• 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)

Fra AS2 til AS3 – Kort og Groft

Strict scripting: Type definitioner

var untyped:*; // (or no typing) undefined
var boolean:Boolean; // false
var number:Number; // NaN
var integer:int; // 0
var unsignedInteger:uint; // 0
var string:String; // null
var object:Object; // null

Ingen acctionscripting direkte på knapper
Actionscripting på hovedtidslinien – og helst på første frame – eller i classes.

Knap-actions:

// event
home_button.addEventListener(MouseEvent.CLICK, home_button_handler);
 
// handler
function home_button_handler(event:MouseEvent):void {
gotoAndStop("homeLabel");
}

Properties

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

Tutorials php

Dynamisk data

Tilsammen udgør disse 2 tutorials en gennemgang af flash kommunikation med alt fra tekstiler til databaser. Skrevet af amfPHP’s egen far.
flash-db’s alt om at loade data til flash
og flash-db’s store gemme data tutorial

Email formular

Enkelt formular email-contact-form-as3-php
Med classes og database thetechlabs.com: how-to-create-a-simple-flashphp-mail-contact-form-with-as3-and-mysql

loadSound (as2)

var lyd1:Sound = new Sound();
lyd1.loadSound("musik.mp3",true);
lyd1.stop();
o-knap.onRelease=function(){
	lyd1.start();
	}