(category) LIST of posts

Knapper i array

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:String=buts[b];
	this[but].addEventListener(MouseEvent.CLICK, butClick);
	// hver but får sin egen variabel:fil med tilknyttet filnavn
	this[but].fil=files[b];
}
function butClick(e:MouseEvent) {
        SoundMixer.stopAll();
	ldr.load(new URLRequest(e.target.fil));
}

Tutorials Navigation

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

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.

Hierarkien for objekterne er som følgende:
biltur
< instancenavn >
blå: indeholder motiontweens
grøn: indeholder shapetween
gul: indeholder en tidslinie med “sektioner”
grå: knapper

.

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

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.

Load presentation

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.unload();
    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();
/////////
*/
}