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: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)); }
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
flashmymind.com: modern-horizontal-flash-menu
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.
.
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 ?
.
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 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); } }
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"); }
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.
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();
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(); ///////// */ }
Created: 15 April 2008 • by admin
Categories: as3 •eksempel •navigation •oevelse
Comments: be the first to comment
