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)); }
Created: 5 October 2009 • by admin
Categories: events • navigation • snippet
Comments: be the first to comment
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
Med xml
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
Created: 26 April 2009 • by admin
Categories: hyperliste • navigation
Comments: be the first to comment
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:

< instancenavn >
blå: indeholder motiontweens
grøn: indeholder shapetween
gul: indeholder en tidslinie med “sektioner”
grå: knapper
.
Created: 19 April 2009 • by admin
Categories: animation • navigation • oevelse
Comments: be the first to comment
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 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); } }
Created: 6 April 2009 • by admin
Categories: as3 • eksempel • navigation • oevelse
Comments: 2 comments, add one..
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.

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"); }
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.
Created: 31 March 2009 • by admin
Categories: navigation • oevelse • overblik
Comments: be the first to comment
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();
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; } 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(); ///////// */ }
Created: 15 April 2008 • by admin
Categories: as3 • eksempel • navigation • oevelse
Comments: be the first to comment
