Flash tutorial - XML Slideshow

XML bliver for tiden mere og mere udbredt, og også indenfor Flash kan det med stor fordel bruges. Her gennemgåes hvordan man kan bruge XML til automatisk at hente billeder ind i en Flash fil.

Tilbage

1. Først starter vi med at lave vores xml dokument.
   
   Åben Notesblok og skriv følgende:
   
   
   1. <?xml version="1.0" encoding="ISO-8859-1"?>
   2. <slideshow>
   3. <!-- url attributterne indeholder adresserne på billederne -->
   4. <!-- alt attributterne indeholder en passende tekst til billederne -->
   5. <billed url="billed1.jpg" alt="Udsigten til de nærliggende bjerge." />
   6. <billed url="billed2.jpg" alt="En lille sø højt oppe i bjergene." />
   7. <billed url="billed3.jpg" alt="En af de mange broer over floden." />
   8. <billed url="billed4.jpg" alt="Bjergene set fra havet." />
   9. <!-- Her kan tilføjes flere billeder -->
   10. </slideshow>
   
   
   NB. XML er et meget frit programmeringssprog og du kan derfor selv bestemme navnene i dine XML dokumenter. Navnene slideshow, billed, url og alt er altså blot navne jeg selv fandt passende, du kan derfor bruge andre navne hvis du vil.
   
   
2. Når du har skrevet dit XMl gemmer du filen under navnet billeder.xml. Husk at ændre kodningen til UTF-8 hvis du benytter æ, ø og å (Når gemmer filen foreslår Notesblok selv ANSI).
   
   
3. Åben så Flash og start et nyt dokument som er lidt større end dine billeder så der også er plads til teksten og to knapper.
   
   
4. Lav et nyt layer så du har to. Dobbelklik på det ene layer og kaldt det "indhold", det andet kalder du "action"
   
   
5. Lav så et nyt movieclip som du kalder "holder" hvori du tegner en firkant som har samme størrelse som dine billeder. Markér din firkant og åbn dit Align panel(Ctrl+k). Sørg for at "To stage" er valgt og klik så på "Align left edge" og "Align top edge" således at registreringspunktet ligger i øverste venstre hjørne.
   
   
6. Ny skal vi have lavet en ny knap (Ctrl+F8 og vælg "Button") som du kalder "pil" og tegner en pil i. Skift evt. farven eller størrelsen i "Over" og "Down" stadierne.
   
   
7. Træk så en instance af dit movieclip "holder" ind på scenen på dit "indhold" layer samt to instancer af din knap.
   
   Markér den ene knap og vælg Free Transform Tool(Q) og drej knappen 180 grader.
   
   
8. Lav så et tekstfelt og gør det dynamisk nede i Properties(Ctrl+F3).
   
   Nu skulle din scene gerne se nogenlunde sådan ud:
   
   
   
   
9. Inden vi begynder at skrive vores ActionScript skal vi lige have gives vores objekter nogle navne.
   
   Markér din firkant og giv den instance navnet "holder" nede i Properties(Ctrl+F3). Giv pilene henholdsvis navnene "frem" og "tilbage". Tekstfeltet giver du navnet "alt".
   
   
10. Så mangler vi kun at skrive vores ActionScript. Vælg frame 1 på dit "action" layer og skriv følgende ActionScript.
    
    
    1. //laver variabler klar til XML dokumentet
    2. var slideshow:XML = new XML();
    3. slideshow.ignoreWhite = true;
    4. var urls:Array = new Array();
    5. var alts:Array = new Array();
    6. var aktuel:Number;
    7. slideshow.onLoad = function() {
    8.     //putter billederne og alt værdierne ind i to arrays
    9.     var billeder:Array = this.firstChild.childNodes;
    10.     for (i=0; i<billeder.length; i++) {
    11.         urls.push(billeder[i].attributes.url);
    12.         alts.push(billeder[i].attributes.alt);
    13.     }
    14.     holder.loadMovie(urls[0]);
    15.     alt.text = alts[0];
    16.     aktuel = 0;
    17. };
    18. //henter XML doukumentet
    19. slideshow.load("billeder.xml");
    20. tilbage.onRelease = function() {
    21.     //Hvis den ikke viser 1. billed går den et billed tilbage
    22.     if (aktuel>0) {
    23.         aktuel--;
    24.         holder.loadMovie(urls[aktuel]);
    25.         alt.text = alts[aktuel];
    26.     }
    27. };
    28. frem.onRelease = function() {
    29.     //hvis den ikke viser sidste billed går den et billed frem
    30.     if (aktuel<urls.length-1) {
    31.         aktuel++;
    32.         holder.loadMovie(urls[aktuel]);
    33.         alt.text = alts[aktuel];
    34.     }
    35. };
    
    
    
11. Tryk Ctrl+enter for at teste filmen.
    
    
    
    Så er vi færdige
    
    NB. Umiddelbart var dette måske nemmere at lave uden XML, men når det først er lavet er det let at opdatere uden at du behøves Flash, og hvis du har mange billeder kan det også være en fordel.

Tilbage

Skriv din kommentar til denne tutorial  (eller gå til forummet)
Navn	Kodeflet

kommentar 2	Skrevet af hans 6/12-2007
heyhey

kommentar 1	Skrevet af gotoAndLearn 15/3-2007
Denne tutorial er stjålet fra www.gotoandlearn.com

Optimeret til Internet Explorer og Firefox min. 1024x768 | Designet og programmeret af jweber