curlingthebrackets » navigation

Knapper i array

admin — Mon, 05 Oct 2009 02:27:40 +0000

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

admin — Sun, 26 Apr 2009 22:19:54 +0000

Biltur

admin — Sun, 19 Apr 2009 20:44:08 +0000

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:

< instancenavn >
blå: indeholder motiontweens
grøn: indeholder shapetween
gul: indeholder en tidslinie med “sektioner”
grå: knapper

Panoramic sliders 3

admin — Mon, 06 Apr 2009 20:45:05 +0000

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

Timeline til navigation

admin — Tue, 31 Mar 2009 11:36:10 +0000

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.

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.

Load presentation

admin — Mon, 14 Apr 2008 22:22:36 +0000

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

Sektioneret movieclip kontrol (as2, as3)

admin — Sun, 04 Mar 2007 22:10:53 +0000

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

Hvornår	skal Hvem	gøre Hvad
Under hvilke omstændigheder

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