(category) LIST of posts

Galleri med XML

I eksemplet her, er navnene og adresserne på de billeder, som skal bruges i galleriet, listet op i en xml-fil.

Get Adobe Flash player

Opbygning og overblik

xmlgalleri0

Billedmapperne thumbnails og images indeholder samme billeder i henholdsvis lille og fuld størrelse.
Xml-filen: images.xml laves som en ganske almindelig tekstfil og lægges til dette eksempel i en mappe data og refererer til billedernes sti, navne og billedtekst:

<?xml version="1.0" encoding="utf-8"?>
<images>
	<image full="images/image1.jpg" thumb="thumbnails/image1.jpg">Description of image 1.</image>
	<image full="images/image2.jpg" thumb="thumbnails/image2.jpg">Description of image 2.</image>
	<image full="images/image3.jpg" thumb="thumbnails/image3.jpg">Description of image 3.</image>
</images>

Forberedelse (brug af classes)

En flashfil: XMLgallery.fla med et tomt movieclip: gallery
Linkage mellem gallery og en as-fil: gallery.as
Instanciering af gallery-class – ved at trække gallery ind på scenen – ELLER som her dynamisk med et framescript på scenen:

var gallery1:gallery=new gallery();
addChild(gallery1);

Opsæt gallery.as og dens class-constructor i sin package:

package {
	/// :::: A :::: /// Import af flash classes
	import flash.display.MovieClip;
	import flash.events.*;
	public class gallery extends MovieClip {		
		/// :::: B :::: /// Oprettelse af variabler og tilgængeliggørelse af objekt-navne
		public function gallery() {	
			/// :::: C :::: /// Indledende handlinger - "constructor"
		}
		/// :::: D :::: /// Tilknyttede funktioner	
	}
}

NB: Bemærk niveauerne A, B, C, D, som opdeler en class, hvori forskellige dele af et actionscript hører hjemme, og som jeg vil henvise til gennem alle nedenstående 3 trin. Hver funktionalitet involverer actions på flere af niveauerne.
Næste trins kode skal ikke erstatte den forrige, men flettes ind i den eksisterende kode på de anviste niveauer, og således implementeres.

Forberedelse (brug af framescript)

En flashfil: XMLgallery.fla med et actionscript-lag på scenen. På dens første keyframe kan niveau-inddeles med kommentarer:

	/// :::: A :::: /// Import af flash classes
 
	/// :::: B :::: /// Oprettelse af variabler og tilgængeliggørelse af objekt-navne
 
	/// :::: C :::: /// Indledende handlinger - "constructor"
 
	/// :::: D :::: /// Tilknyttede funktioner

Kodneanvisningerne i nedenstående trin bruges og flettes sammen i frameskriptet UDEN ORDET “PUBLIC” FORAN VARIABLER OG FUNKTIONER

Resten af arbejdet foregår med en trinvis scripting af funktionalitet i opsætningen, gennem følgende 3 trin:
1 – Load og fortolk xml-filen
2 – Load og vis alle thumbnails
3 – Load og vis det valgte billede

1 – Load og fortolk xml-filen

//Niveau A
	import flash.net.URLRequest;
	import flash.net.URLLoader;
//Niveau B
		public var xmlDoc:String="data/images.xml"; //Adressen på xml-filen
		public var xmlLoader:URLLoader=new URLLoader(); //Opret det relevante URLLoader-objekt
		public var xml:XML; //Navnet på xml-objektet
		public var xmlList:XMLList; //Navnet på den liste, hvori xml.elementerne kommer til at stå
//Niveau C
			// Load xml-filen med adressen
			xmlLoader.load(new URLRequest(xmlDoc));
			// Når xml-filen er færdig-loadet, udføres XMLCOMPLETE funktionen
			xmlLoader.addEventListener(Event.COMPLETE, XMLCOMPLETE);
//Niveau D
		public function XMLCOMPLETE(e:Event):void {
			// Påfyld flash's xml-beholder med xmlLoader-data!
			xml=XML(e.target.data);
			// Oplist elementerne fra xml-filens "rod" i rækkefølge
			xmlList=xml.children();
			// Udfør funktionen LOADTHUMBS
			LOADTHUMBS();
		}

2 – Load og vis alle thumbnails

//Niveau A
	// URLRequest skal kun tilføjes hvis den ikke er importeret på trin 1
	import flash.net.URLRequest;
	import flash.display.Loader;
//Niveau B
		public var thumbLoader:Loader;
//Niveau D
		public function LOADTHUMBS():void {
			var thumbUrl:String;
			// For hvert element i xml-filen dannes en "thumbLoader"
			for (var i:int=0; i<xmlList.length(); i++) {
				//værdien af hver "thumb" attribut overføres til thumbUrl
				thumbUrl=xmlList[i].attribute("thumb");
				thumbLoader=new Loader();
				thumbLoader.load(new URLRequest(thumbUrl));
				//thumbLoader bliver snedigt omdøbt til adressen på det fulde billede
				thumbLoader.name=xmlList[i].attribute("full");
				thumbLoader.x=20;
				// 130=thumb's bredde, 20= passende luft 
				thumbLoader.y=i*130+20;
				addChild(thumbLoader);
				// hver thumbLoader aktiveres til at kunne udføre SHOWFULL
				thumbLoader.addEventListener(MouseEvent.CLICK, SHOWFULL);
			}
		}

3 – Load og vis det valgte billede

//Niveau A
	// URLRequest skal kun importeres hvis den ikke allerede er der
	import flash.net.URLRequest;
	// Loader er allerede importeret i trin 2, skal kun tilføjes hvis den mangler
	import flash.display.Loader;
//Niveau B
		public var fullLoader:Loader;
//Niveau D
		public function SHOWFULL(e:MouseEvent):void {
			// fjern det viste billede, hvis der er et i forvejen
			if (fullLoader) {
				removeChild(fullLoader);
			}
			// Opret en fullLoader til det billede, der skal vises
			fullLoader=new Loader();
			//"e.target.name" er  "thumbLoader.name" fra LOADTHUMBS
			var imgUrl=new URLRequest(e.target.name);
			fullLoader.load(imgUrl);
			fullLoader.x=160;
			fullLoader.y=20;
			addChild(fullLoader);
		}

Ekstra funktionalitet

- En dynamisk tekstboks til at vise billedteksten fra xml-filen
- En Fade-effekt med flash’s indbyggedeTween-class, på selve billederne når de vises.

//Niveau A
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
//Niveau B
		public var imageText:TextField=new TextField();
		public var fadeTween:Tween;
//Niveau C
			// Sæt tekstboksens bredde
			imageText.autoSize=TextFieldAutoSize.LEFT;
			// Opret den tekstboks, som skal indeholde billedtekst
			addChild(imageText);
			// Kan starte med at vise en instruktion til bruger
			imageText.text=" Klik på en af billederne for at se et stort";
//Niveau D, indenfor SHOWFULL funktionen - nederst 
			// Placer tekstboksen lige over billedkanten
			imageText.x=fullLoader.x;
			imageText.y=fullLoader.y-20;		
			// Find den billedtekst, der hører til 
			for (var j:int=0; j<xmlList.length(); j++) {
				// Samlign thumbLoaders navn med alle xml-listens "full" atributter
				// "e.target.name" er "imageLoader.name" fra LOADTHUMBS
				if (xmlList[j].attribute("full")==e.target.name) {
					// Indholdet fra nummer "j" på xmlList er tekst indpakket i tags			
					// Overfør denne tekst til tekstboksen
					imageText.text=xmlList[j];
					// Igangsæt den importerede Tween class med ønskede indstillinger
					fadeTween=new Tween(fullLoader,"alpha",None.easeNone,0,1,1,true);
				}
			}

Yderlig øvelse og info:

Kapitel 14 i “Learning ActionScript 3.0″ handler specifikt om XML i AS: Strukturen, skrive, læse, slette, loade. Kapitlet afsluttes med en menubar som øvelse.
simple image loader

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

biltur

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 ?

.

Panoramic sliders 3

Eksplorativ navigation, se panoramic sliders 1 og panoramic sliders 2.
Her med faste stationer og en flytbar menu.

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.

pan

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

Panoramic sliders 2

se Panoramic sliders 1 for en ‘loopende’ version.
Den panorerende effekt i alle disse eksempler, forudsætter at slideren er “for stor” til scenen, på den ene eller begge leder.

Vandret panorering med selvstop

Klik for at aktivere:

Her er bevægelsen til begge sider den samme som i Panoramic sliders 1 – men den standser i begge yderpositioner, i stedet for at gentage sig. En enkelt movieclip-instance på scenen – med grafik og knapper iinlejret deri:

Scene1
> slider – mc-instance med indhold i form af bund og mc/knapper
> > Eventuelle mc-instances eller knapper, med deres indhold
> > bund – mc-instance med grafik eller billedfil

bunds indsætningspunk (det lille kryds på sliders’ timeline) skal være 0, 0.

Bemærk ændringen i SLIDE funktionen fra Panoramic sliders 1. 2 betingelser standser slideren i stedet for at flytte den hen til et tilsvarende sted med mere grafik. (Igangsættelse af slider’s ENTER_FRAME er her kontrolleret med et klik på sliderens bund):

//  Skift til tal-værdi, hvis du har problemer med at loade denne film
// var SW = 550; // din scenes bredde
var SW:int=stage.stageWidth;
var cStageX:int=SW/2;
var steps:int=15;//antal trin i en ease-bevægelse
var movement:Boolean=false;//Mulighed for at stoppe bevægelsen
slider.bund.addEventListener(MouseEvent.CLICK, startstop);
// et klik på slider's bund tænder eller slukker for slider's SLIDE function
function startstop(e:MouseEvent) {
	if (! movement) {
		slider.addEventListener(Event.ENTER_FRAME, SLIDE);
		movement=true;
	} else {
		slider.removeEventListener(Event.ENTER_FRAME, SLIDE);
		movement=false;
	}
}
function SLIDE(e:Event) {
	//  afpas dine skridt efter afstand mellem mus og scenemidten 
	var difX=(cStageX-mouseX)/steps;
	//  hvis kanten er overskredet, juster afstandens længde til 0
	if (e.target.x+difX <= -(e.target.width-SW)) {
		e.target.x =-(e.target.width-SW);
		difX=0;
	}
	if (e.target.x+difX>=0) {
		e.target.x=0;
		difX=0;
	}
	e.target.x+=difX;
}

Vandret ELLER lodret panorering

Eksemplet ovenfor panorerer vandret på x-aksen. Skal det gøres lodret, må grafikken laves på højkant, og alle x-værdier erstattes med y-værdier, samt width-referencer blive til height.

Vandret OG lodret panorering

Klik for at sætte igang:

Her er også kun en stor movieclip på scenen, med hele scenariet deri. Der er rent faktisk også en knap midt på billedet.
movieclip-hierarkien ser sådan ud (der refereres til instance-navne):

Scene1
> scenario – mc – (kunne sagtens have flere indholds-scener i sin timeline)
> > infobut – mc med 2 labels: but og info, med forskelligt indhold på hver
> > > boble – mc med shapetween
> > bund – mc med grafik eller billedfil – (evt. flere frames med forskellig bg)
> se – mc – øjet med 2 labels: “sened” og “seop” – hver deres indhold

// Hvis du planlægger at loade filmen ind i en anden swf
// vil stage.stageWidth og stage.stageHeight måske udløse fejl
// Nemmeste løsning: at angive statiske tal
// Ellers: Flyt dem ind i de funktioner der bruger dem
// Spørg - eller/og Google: as3 stage.stageWidth in loaded swf
var SW:int=stage.stageWidth;
var SH:int=stage.stageHeight;
var cStageX:int=SW/2;
var cStageY:int=SH/2;
var steps:int=20;//antal trin i en ease-bevægelse
var movement:Boolean=false;//Mulighed for at starte bevægelsen
scenario.bund.addEventListener(MouseEvent.CLICK, startstop);
// et klik på scenario's bund tænder eller slukker for scenario's SLIDE function
function startstop(e:MouseEvent) {
	if (! movement) {
		scenario.addEventListener(Event.ENTER_FRAME, SLIDE);
		movement=true;
	} else {
		scenario.removeEventListener(Event.ENTER_FRAME, SLIDE);
		movement=false;
	}
}

/*
Hvorfor sætte bevægelsen i gang med klik på scenario.bund? hvorfor ikke bare på scenario?
Med et klik direkte på scenario, ville alle dens eventuelle knap-børn arve, og hvert et knap-klik ville automatisk forårsage en on/off effekt.
- bund ligger under børnene, så de arver ikke dens events.
En hvilken som helst anden knap kunne selvfølgelig også kalde den event.
*/

function SLIDE(e:Event) {
	//  afpas dine skridt efter afstand mellem mus og scenemidten 
	var difX=(cStageX-mouseX)/steps;
	var difY=(cStageY-mouseY)/steps;
	//  hvis kanten er overskredet, juster afstandens længde til 0
	if (e.target.x+difX<=-(e.target.width-SW)) {
		e.target.x =-(e.target.width-SW);
		difX=0;
	}
	if (e.target.x+difX>=0) {
		e.target.x=0;
		difX=0;
	}
	if (e.target.y+difY<=-(e.target.height-SH)) {
		e.target.y =-(e.target.height-SH);
		difY=0;
	}
	if (e.target.y+difY>=0) {
		e.target.y=0;
		difY=0;
	}
	e.target.x+=difX;
	e.target.y+=difY;
}

Knap-funktionaliteten

scenario.infobut.buttonMode=true;
scenario.infobut.addEventListener(MouseEvent.MOUSE_OVER, over);
scenario.infobut.addEventListener(MouseEvent.MOUSE_OUT, out);
scenario.infobut.addEventListener(MouseEvent.CLICK, showINFO);
function over(e:MouseEvent) {
	// brems, flere skridt(længere tid)
	steps*=2;
}
function out(e:MouseEvent) {
	// farten op, færre skridt(kortere tid)
	steps/=2;
}
function showINFO(e:MouseEvent) {
	if (e.target.currentLabel=="but") {
		e.target.gotoAndPlay("info");
	} else {
		e.target.gotoAndStop("but");
	}
}

Panoramic sliders 1

Se eventuelt Panoramic sliders 2, for slidere der stopper når de når til kanten.

Koden

/*
slider1 = 2 instances af img1
slider2 = 2 instances af img2
slider3 = 2 instances af img3
Sørg for: 
- at importere aflange billedfiler eller lave aflang grafik, >= scenebredden.
- at aligne hver billedfil til 0,0 - i dens billedmovieclip (img1, img2, img3).
- at placere 2 instancer af billedmovieclippet side om side ind i slideren. 
- at aligne det første instance af billedmovieclippet til 0,0 i slideren. 
- at placere eventuelle knapper i billedmovieclippet - ikke i slideren.
- at sætte frameraten op til 32, for en glidende bevægelse.
*/
// Hvis du planlægger at loade filmen ind i en anden swf
// vil stage.stageWidth her sandsynligvis udløse fejl
// fordi Stage ikke findes mens filmen importeres
// Det kan undgås ved at angive statiske tal
// var SW = 550; // din scenes bredde
var SW = stage.stageWidth;
var cStageX = SW/2;
slider1.steps = 50;
slider2.steps = 30;
slider3.steps = 10;
slider1.addEventListener(Event.ENTER_FRAME, SLIDE);
slider2.addEventListener(Event.ENTER_FRAME, SLIDE);
slider3.addEventListener(Event.ENTER_FRAME, SLIDE);
function SLIDE(e:Event):void {
	var difX=(cStageX-mouseX)/e.target.steps;
	e.target.x += difX;
	if (e.target.x <= -(e.target.width/2)) {
		var underStep = -(e.target.width/2)-e.target.x;
		e.target.x = 0-underStep;
	} else if (e.target.x >= 0) {
		var overStep = e.target.x;
		e.target.x = -(e.target.width/2)+overStep;
	}
}

Pauseknap, mere kode

var pausing:Boolean=true;
butclip.buttonMode= true;
butclip.addEventListener(MouseEvent.CLICK, ON_OFF);
function ON_OFF(e:MouseEvent):void {
	if (!pausing) {
		butclip.gotoAndStop("pl");
		slider1.removeEventListener(Event.ENTER_FRAME, SLIDE);
		slider2.removeEventListener(Event.ENTER_FRAME, SLIDE);
		slider3.removeEventListener(Event.ENTER_FRAME, SLIDE);
		pausing=true;
	} else {
		butclip.gotoAndStop("st");
		slider1.addEventListener(Event.ENTER_FRAME, SLIDE);
		slider2.addEventListener(Event.ENTER_FRAME, SLIDE);
		slider3.addEventListener(Event.ENTER_FRAME, SLIDE);
		pausing=false;
	}
}

Timeline hierarkien:

Fidusen med de dobbelte instancer i hver slider, skal sikre at der ikke bliver “huller” i animationen, når slideren når ud til kanten af scenen i begge retninger. Slideren flyttes bare lyn-hurtigt hen til et tilsvarende punkt i nærheden af dens sammenføjning, og fortsætter bevægelsen derfra. Der skal være to for at opnå denne evighedseffekt (!).

sliders1

Scene1
> slider1 – mc
> > img1a – mc-instance af img1
> > img1b – mc-instance af img1
> slider2 – mc
> > img2a – mc-instance af img2
> > img2b – mc-instance af img2
> slider3 – mc
> > img3a – mc-instance af img3
> > img3b – mc-instance af img3
> butclip – mc-instance med 2 labels stadier:”pl” og “st”, med forskellig grafik

sliders2

Yderligere interaktion

En eventuel knap i panoramaen vil derfor være smart at placere i det movieclip, som tvillinge-instancerne er dannet udfra (og ikke i slideren). For at kunne nå denne knap med actionscript skal instancen navngives, og begge tvillinge-instancerne omkring dem skal have navne – derfor: img1a, img1b, osv.
Koden på scenen for en knap kaldet ‘dut’ vil kunne ligne dette:

// Dobbelte aktiveringer, men deler samme event-function
slider1.img1a.dut.buttonMode= true;
slider1.img1b.dut.buttonMode= true;
slider1.img1a.dut.addEventListener(MouseEvent.CLICK, GROW);
slider1.img1b.dut.addEventListener(MouseEvent.CLICK, GROW);
function GROW(e:MouseEvent):void {
	slider1.img1a.dut.scaleX *= 1.5;
	slider1.img1b.dut.scaleX *= 1.5;
}

Timeline til navigation

Scenen (eller et movieclip) er vandret delt op i kapitler / sektioner / scenarier – som udgør stationerne i en navigation.
En sektion er en sekvens af en eller flere frames – der med fordel kan indledes med en label – og kan afsluttes med en play-back action (fx. stop(); eller gotoAndPlay(en_eller_anden_frame);).
Den første sektion er som regel den, filmen starter med.
Tidslinien er lodret delt op i lag efter keyframes funktionalitet og varighed (fx. actionscript, labels, og forskellige slags indhold).

Præsentation / site

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

minisite

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’.

nav2a

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.

nav2b

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

nav2d 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.

nav2c 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.