var files:Array=new Array("0.swf","1b.swf","3_load text_scroller.swf");
var buts:Array=new Array("but1","but2","but3");
// buts[0] er "but1", buts[1] er "but2", osv.

Her kan loader funktionaliteten indflettes

for (var b:uint; b<buts.length; b++) {
	var but:Object=getChildByName(buts[b]);
	but.addEventListener(MouseEvent.CLICK, butClick);
	// hver but får sin egen variabel:fil med tilknyttet filnavn
	but.fil="eventuel_undermappe/"+files[b];
}
function butClick(e:MouseEvent) {
        SoundMixer.stopAll();
	ldr.load(new URLRequest(e.target.fil));
}

Menuer

flashvalley mouse_events_in_actionscript_3.0

flash-and-silverlight-fish-eye-menu (Classes)

Med en tweener

riacodes.com: smooth-horizontal-menu-with-as3
riacodes.com: circular-menu-with-as3
riacodes.com: create-a-bouncing-menu-with-as3
riacodes.com: sliding-menu-with-actionscript-3-and-tweenlite
flashmymind.com: modern-horizontal-flash-menu

Med xml

xml accordeon

ria-coder.com/blog/creating-xml-based-menus-with-flash-cs4-and-flex

Navigation generelt

riacodes.com: create-a-sliding-content-with-back-and-forward-navigation
Lineær sekvens af swf-filer loadet med en funtion i en samlende film

.

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 ?

.

En grafik-bund (større end scenemålene, men med samme proportioner) og et par “arealer”, som udgør forskelligt præsentations-indhold – samlet i en movieclip: areas. Skaleres op og ned med klik på bunden.
Knapper for at kunne fokusere på disse arealer samlet i en movieclip: menu. Flyttes med musen.
Se fx. billyharveymusic eller sqcircle for inspiration.

//////////////////////////
//Scenens størrelser - NB: angiv værdier i tal
//hvis filmen skal kunne loades ind i en andenswf.
var SW:int=stage.stageWidth;
var SH:int=stage.stageHeight;
//lokale faktiske mål, som nye mål kan beregnes udfra
var aW:Number=areas.width;
var aH:Number=areas.height;
/////////////////////////////
// Antal trin før målet nås (ease in)
var steps:int=12;
// zoom faktorer i forhold til scenestørrelse
var zFactorBig:int=3;
var zFactorSmall:int=1;
////////////////////////////
//Den skalering (stor lille) areas skal vises med nu
var zFactor:int=zFactorBig;
//areas indledende skalering
var targW:Number;
var targH:Number;
// Det mål, som areas haster imod lige nu
var targX:Number=areas.x;
var targY:Number=areas.y;
//////////////////

Start- variablerne er opdelt i 3 kategorier:
- Statiske mål som af praktiske grunde er gemt i variabler, fordi de hele vejen igennem skal bruges i udregninger.
- Parametre som nemt kan justeres. (her er areas beredt til at kunne blive 3 gange så stor som scenen.)
- Dynamiske værdier, som ændrer sig undervejs og som skal være tilgængelige for funktionerne.

menu.buttonMode=true;
menu.addEventListener(MouseEvent.MOUSE_DOWN, drag);
menu.addEventListener(MouseEvent.MOUSE_UP, drop);
menu.a1but.buttonMode=true;
menu.a1but.addEventListener(MouseEvent.CLICK, setTarget);
menu.a2but.buttonMode=true;
menu.a2but.addEventListener(MouseEvent.CLICK, setTarget);
areas.area1.buttonMode=true;
areas.area1.addEventListener(MouseEvent.CLICK, setTarget);
areas.area2.buttonMode=true;
areas.area2.addEventListener(MouseEvent.CLICK, setTarget);
menu.zoombut.buttonMode=true;
menu.zoombut.addEventListener(MouseEvent.CLICK, setTarget);
areas.bund.addEventListener(MouseEvent.CLICK, setTarget);

//////////////////////////
function drag(e:MouseEvent):void {
	e.target.startDrag();
}
function drop(e:MouseEvent):void {
	e.target.stopDrag();
}
///////////////////////////
function setTarget(e:MouseEvent) {
	// op- og ned-zomning (bund og den røde knap)
	if (e.target.name=="zoombut"||e.target.name=="bund") {
		// hvis målet var lille, så sæt det til stort - ellers omvendt!
		if (zFactor==zFactorSmall) {
			zFactor=zFactorBig;
			//areas koordinater, musens klik, skaleret op og centreret
			targX=(-mouseX*zFactorBig)+(SW/2);
			targY=(-mouseY*zFactorBig)+(SH/2);
		} else {
			zFactor=zFactorSmall;
			targX=0;
			targY=0;
		}
	}
	//forskellen mellem areas medfødte mål og det skalerede mål
	//bruges til at finde area1's og area2's præcise koordinater 
	var adifX:Number=((SW*zFactorBig)/aW);
	var adifY:Number=((SH*zFactorBig)/aH);
	if (e.target==menu.a1but||e.target==areas.area1) {
		zFactor=zFactorBig;
		targX=-(areas.area1.x*adifX)+(SW/2);
		targY=-(areas.area1.y*adifY)+(SH/2);
	}
	if (e.target.name=="a2but"||e.target.name=="area2") {
		zFactor=zFactorBig;
		targX=(-areas.area2.x*adifX)+(SW/2);
		targY=(-areas.area2.y*adifY)+(SH/2);
	}
	targW=SW*zFactor;
	targH=SH*zFactor;
	areas.addEventListener(Event.ENTER_FRAME, GETGOING);
}
//////////////////
function GETGOING(e:Event):void {
	areas.x += (targX-areas.x)/steps;
	areas.y += (targY-areas.y)/steps;
	areas.width += (targW-areas.width)/steps;
	areas.height += (targH-areas.height)/steps;
	//Hvis den næsten er i mål, så siger vi den er hjemme og slukker motoren!
	if (Math.abs(areas.x - targX) < 1 && Math.abs(areas.y-targY)<1&&Math.abs(targW-areas.width) < 1 && Math.abs(targH-areas.height) < 1) {
		areas.x=targX;
		areas.y=targY;
		areas.width=targW;
		areas.height=targH;
		areas.removeEventListener(Event.ENTER_FRAME, GETGOING);
	}
}

Præsentation / site

Dette er en traditionel timeline-baseret strukturering af en præsentation.

Indholdet på scenens keyframes er samlet i overordnede movieclips.
Selve knapperne til brug for navigationen kunne ligge direkte på scenens frames eller være organiseret i overordnede movieclips som menuer.
På scenens Labels-lag: keyframes med labels, som indleder de forskellige sektioner.
På scenens Actions-lag: keyframes med actions (som regel stop(); ), som afslutter de forskellige sektioner.
På scenens første action-lag: knapfunktioner, fx.

stop();
home_but.buttonMode=true;
home_mc.addEventListener(MouseEvent.CLICK, gohome);
function gohome(e:MouseEvent) {
	gotoAndStop("home");
}

Se Det konkrete eksempel på Mini site

Varieret indhold

Nedenstående eksempler er sektionerede tidslinier på movieclips.
Navigationen er ikke nødvendigvis tydelig for brugeren, men bliver en metode til at gøre objekter komplekse, på en overskuelig måde. Play-back kommandoer som gotoAndPlay() giver udvikleren mulighed for at kunne variere movieclippets udseende eller ‘adfærd’.

hund_mc.gotoAndPlay("sit");

Denne kodelinie kan optræde i forbindelse med forskellige events eller if-betingelser.
Metoden er praktisk og ligetil – og også god at falde tilbage på, hvis det er uoverskueligt at scripte sig til forskellige tilvalg, eller variationer.

Følgende tidslinier er ikke opdelte i sektioner, der navigeres på deres frames med udregnede tal og ikke labels.

Denne tidslinie ville kunne bruges til et slideshow eller galleri, med et nyt billede på hver frame.
Kommandoen gotoAndSop(currenFrame+1); i en eventlistener kan bruges på en next-knap eller iværksættes af en timer.

Dette eksempel er bare en movieclip med en animeret tidslinie. Med kommandoen gotoAndStop(tal); hvor tallet er en udregning på baggrund af et imput, kan det visualisere en udvikling eller en gradvis forandring i en proces. Fx. i en preloader.

Tilgængelige variabler defineret øverst.
I en class, skal de stå i class definitionen, før constructer’en (hoved-functionen).

var film1:URLRequest = new URLRequest("undermappenavn/anim_playback.swf");
var film2:URLRequest = new URLRequest("undermappenavn/bat_ball_2a.swf");
var film3:URLRequest = new URLRequest("undermappenavn/fruit_extra_new_b.swf");

I en class, vil denne typisk stå i constructor’en:

var ldr:Loader = new Loader();

I nedenstående script loades og vises hver film i hver sin knap-funktion:

film1_but.addEventListener(MouseEvent.MOUSE_DOWN,film1_Handler);
function film1_Handler(e:MouseEvent):void {
    SoundMixer.stopAll();
    ldr.load(film1);
    box_mc.addChild(ldr);
    stage.frameRate=12;
}
film2_but.addEventListener(MouseEvent.MOUSE_DOWN,film2_Handler);
function film2_Handler(e:MouseEvent):void {
    SoundMixer.stopAll();
    ldr.load(film2);
    box_mc.addChild(ldr);
    stage.frameRate=32;
}
film3_but.addEventListener(MouseEvent.MOUSE_DOWN,film3_Handler);
function film3_Handler(e:MouseEvent):void {
    SoundMixer.stopAll();
    ldr.load(film3);
    box_mc.addChild(ldr);
    stage.frameRate=32;
}

Nedenstående knap-funktioner tømmer loaderen, ændrer boksens egenskaber, og til sidst ‘taler’ direkte til den loadede swf’s egen tidslinie :

unload_but.addEventListener(MouseEvent.MOUSE_DOWN,unload_Handler);
function unload_Handler(e:MouseEvent):void {
    SoundMixer.stopAll();
    ldr.unloadAndStop();
    stage.frameRate=12;
}
distort_but.addEventListener(MouseEvent.MOUSE_DOWN,distort_Handler);
function distort_Handler(e:MouseEvent):void {
    box_mc.scaleX = box_mc.scaleY = .6;
    box_mc.rotation=9;
}
normal_but.addEventListener(MouseEvent.MOUSE_DOWN,normal_Handler);
function normal_Handler(e:MouseEvent):void {
    box_mc.scaleX = box_mc.scaleY = .6;
    box_mc.x = 180;
    box_mc.y = 64;
    box_mc.rotation=0;
}
cheat_but.addEventListener(MouseEvent.MOUSE_DOWN,cheat_Handler);
function cheat_Handler(e:MouseEvent):void {
    MovieClip(ldr.content).gotoAndStop("win");
/*
tilsvarende, kaldt fra den loadede swf's tidslinie, ville være:
//////////
MovieClip(parent.parent).play();
/////////
*/
}

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");
}