Flash bildspel

 

Detta är en är ett litet och effektivt bildspel skapat i Flash som du enkelt kan skräddarsy efter dina egna önskemål om design och funktion. Jag lägger upp bildvisaren här och låter er använda den fritt. Väljer ni att använda bildspelet hoppas jag att ni länkar tillbaka till min sida som tack.

Ladda ner version 1.2

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Inställningar

Bildspelet styrs av en XML, settings.xml, som finns i mappen media.

<slideShow viewTime='2500' moveTime='400' navigation='true'>
   <image source='media/img/flower1.png' />
   <image source='media/img/flower2.png' />
   <image source='media/img/flower3.png' />
</slideShow>

I filen kan du göra en rad ändringar så att bildvisaren passar dina önskemål:

  • viewTime anger hur länge varje bild visas innan ditt bildspel byter till nästa bild
  • moveTime anger hur länge animationen för att byta bild ska pågå
  • navigation anger om navigationspanelen ska visas eller ej när musen förs över bildspelet
  • source anger sökvägen till bilden som ska visas

Du kan även ändra utseendet på navigationspanelen, bakgrundsfärg samt bredd och höjd på flashapplikationen. Mer info om detta nedan.

Vilka bilder som ska visas

Du anger vilka bilder som ska visas i ditt bildspel med <image source='min/sökväg/bild.jpg' /> i settings.xml. source är sökvägen till bilden relativt flashapplikationen, ImgView.swf. Bilderna laddas in dynamiskt efter att applikationen har startat. Så fort den första bilden har laddat klart börjar bildspelet vilket minimerar väntetiden. Skulle en bild ej vara klar när den ska visas väntar bildspelet på föregående bild så att man inte riskerar att få en tom bild i bildspelet. I nedanstående exempel visas tre olika bilder. Vill du ha fler bilder i ditt bildspel lägger du naturligtvis till fler noder på samma sätt.

<slideShow>
   <image source='media/img/flower1.png' />
   <image source='media/img/flower2.png' />
   <image source='media/img/flower3.png' />
</slideShow>

Hur länge bilderna visas

I settings.xml kan du ange hur länge varje bild ska visas innan ditt flashbildspel byter till nästa bild. Attributet viewTime anger hur många millisekunder som bilden visas.

<slideShow viewTime='2000'>
   <image source='media/img/flower1.png' />
   <image source='media/img/flower2.png' />
   <image source='media/img/flower3.png' />
</slideShow>

Värden i noden slideShow är generella för alla bilder. Vill du ha ett avvikande värde på en enskild bild kan du även ange viewTime på noden för den specifika bilden. I exemplet nedan visas flower1 och flower3 i två sekunder medan flower2 visas i tre sekunder.

<slideShow viewTime='2000'>
   <image source='media/img/flower1.png' />
   <image source='media/img/flower2.png' viewTime='3000' />
   <image source='media/img/flower3.png' />
</slideShow>

Hur lång tid det tar att byta bild

Du kan även ange hur länge animationen för att byta bild i ditt bildspel ska pågå. I settings.xml gör du detta med attributet moveTime som anger hur många millisekunder som animationen ska pågå. Värden i noden slideShow är generella för alla bilder.

<slideShow moveTime='2000'>
   <image source='media/img/flower1.png' />
   <image source='media/img/flower2.png' />
   <image source='media/img/flower3.png' />
</slideShow>

Navigation

Du kan själv välja om panelen med navigeringsknappar ska visas när man för muspekaren över ditt bildspel i Flash. För att aktivera navigeringspanelen sätter du attributet navigation='true'. Vill du inte visa panelen sätter du navigation='false'.

<slideShow navigation='true'>
   <image source='media/img/flower1.png' />
   <image source='media/img/flower2.png' />
   <image source='media/img/flower3.png' />
</slideShow>

Utseende på navigationspanelen

Du kan ändra utseende på navigeringen genom att byta ut bilderna som ligger i media/nav/. De nya bilderna måste heta exakt samma som de gamla för att fungera. Därför fungerar det bara med PNG-bilder nu men i en framtida version av bildvisaren är det tänkt att man ska kunna ange egna bilder i en XML.

Bakgrundsfärg

Bakgrundfärg visas bara om någon bild är mindre än SWF eller om en bild innehåller transparenta delar. Om en bild är mindre än SWF så centreras bilden och bakgrundsfärgen visas i utrymmet runt bilden. Du sätter bakgrundsfärgen för bildspelet i HTML-filen genom att skicka med bgcolor som parameter i koden när du startar flashapplikationen. Se HTML-filen som följer med för exempel på kod.

Bredd och höjd på din bildvisare

Du sätter dimensionerna på ditt bildspel när du startar flashapplikationen från HTML-filen genom att skicka med width och height som parametrar. Se HTML-filen som följer med för exempel på kod. Om någon bild är mindre än SWF så centreras bilden och bakgrundsfärgen visas i utrymmet runt den.

Legalt

Ni får fritt använda denna bildvisare som ni själv önskar så länge som ni länkar tillbaka till min sida från er.

Övrigt

Har ni några frågor, kommentarer, önskemål eller har ni hittat en bugg kan ni kontakta mig här. Detta bildspel i Flash är programmerat i ActionScript 3.0.