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

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
Created: 10 May 2009 • by admin
Categories: oevelse •xml
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..
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"); } }
Created: 6 April 2009 • by admin
Categories: eksempel •oevelse
Comments: be the first to comment
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 (!).

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

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; }
Created: 3 April 2009 • by admin
Categories: eksempel •oevelse
Comments: be the first to comment
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

