Flash Slide Show Presentation

 

This is a small slide show presentation that you can customize for your own personal needs. I publish the slide show here and it is free for you to use as you like, but I would like you to link back to my site from yours if you choose to use the slide show presentation.

Download version 1.2

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

Get Adobe Flash player

Settings

The slide show is managed using an XML file called settings.xml that it is located in the folder 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>

You can change the values in file to make the slide show fit your own requirements:

  • viewTime specifies the length of time each image will be shown
  • moveTime specifies the length of time the transition between images will take
  • navigation specifies if the navigation panel should be shown or not when the mouse cursor is over the slide show
  • source specifies the path to the image that you would like to show in the slide show presentation

You can also change the looks of the navigation panel, the background colour and the width and height of the application. More information about how this is done bellow.

Which images to display

You specify which images to show in the slide show presentation with the code <image source='my/path/image.jpg' /> in the file settings.xml. The attribute source is the path to the image relative to the flash application, ImgView.swf. The images will be loaded dynamically after the application has started and the presentation will start as soon as the first image has finished loading. This will minimize the waiting time. The current image will be displayed for a longer time than specified if the next image to be displayed has not finished loading yet. This will eliminate the risk of an empty image in the slide show on the drawback that some images might have to be displayed for a longer time than expected. The images will of course be loaded in the order that they will be shown. Three images will be shown in the code example bellow. If you want more images in your slide show then you just add more lines in the same way. The first line is the first image to be shown in the slide show and so on in the order that they are specified in the XML file.

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

The length of time each image is shown

You can specify for how long time each image will be shown before the slide show changes to the next image. The attribute viewTime in the XML specifies for how many milliseconds the image will be shown.

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

The value in the slideShow node is general for all images in the slide show. You can specify the same attribute, viewTime, in any of the image nodes to have a different length of time for that image. The images flower1 and flower3, in the code example bellow, will be shown for two seconds while flower2 will be shown for three seconds.

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

The time it takes to change picture

You can also specify the length of the animation during image swap. You do this with the attribute moveTime in the settings XML. The value is in milliseconds and is global for all images in the slide show presentation.

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

The navigation panel

You can choose to display a navigation panel when the user moves the mouse cursor over the slide show. You set navigation='true' to activate the navigation panel and navigation='false' to inactivate it.

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

Change how the navigation panel looks

You can change how the navigation panel looks by replacing the images located in the folder media/nav/. The replacement images must be named exactly as the original images. For that reason it is only possible to use PNG files at the moment. The plan for the future is to add the paths for the navigation images to the settings XML. Then it will be possible to use any file name that you like for the navigation images.

Background colour

The background colour will only be visible if any of the images is smaller than the application or if any images contains transparent parts. You can specify the background colour in the HTML file that starts the application by passing along the parameter bgcolor. See the included HTML file for an example of how this is done.

The slide shows width and height

You can specify the width and height for your slide show presentation in the HTML file that runs the application. You do this by passing along the width and height as parameters to the application when it starts. See the included HTML file for an example of how this is done. Images that is smaller than the application will be centred on the stage with the background colour surrounding it.

Legal notice

You can use this image slide show presentation for free as long as you place a link back to my site somewhere on your site.

Final words

Pleas let me know if you have any question, ideas for improvements, comments or if you have any problem. You can contact me here. This flash slide show presentation is programmed with ActionScript 3.0.