Several months ago we needed a simple slideshow showing some pictures but emphasizing mainly some texts over them. I created a slideshow with the free and open source Flex SDK and TweenMax. You can see a demo here.
How to use it
Download the slideshow and modify the example slideshow.xml. The only other file that you need is slideshow.swf, but if you don’t want to use it on-line but to show images on a local drive use slideshow-local.swf instead. slideshow.xml is the default filename for the configuration file, but you can change it by means of the flashVar “xml“. The most important part of the xml are several slide elements contained in the root element. Each one of them can contain an optional text element and has to contain at least an image element (with its file attribute containing an url or a path depending on the version). The example explains the meaning of other tags and attributes:
<slides>
<!-- style is the css applied to the text (every text block is wrapped in a div) -->
<style>
div{text-align:center;}
.key{font-style:italic;}
small {font-weight:normal;}
</style>
<parameters>
<!-- the first image of every slide shifts vertically and then shrinks toward the bottom of the screen until a size
defined by imagesFinalHeight (e.g. 0.5 means 50% of the height of screen) and with an alpha defined by imagesFinalAlpha
(from 0 invisible to 1 unchanged). If there are extra images in the same slide, these two parameters will define
height and alpha of these images as well -->
<imagesFinalAlpha>0.75</imagesFinalAlpha>
<imagesFinalHeight>0.75</imagesFinalHeight>
<!-- tune is the background music (optional) -->
<tune>http://www.joshwoodward.com/mp3/ht/NoVox/JoshWoodward-HereTodayNoVox-06-LearnToFly.mp3</tune>
<!-- if firstSlideIsBlack is true you need an initial click to start the slideshow (used with a projector) -->
<firstSlideIsBlack>false</firstSlideIsBlack>
</parameters>
<slide>
<image file="http://3.bp.blogspot.com/_N_mOB63qPaE/SwmFueUiiJI/AAAAAAAAMm0/_7CS3KAsp_M/s400/Desktop-Wallpaper.jpg" />
<text>
<![CDATA[<span class='key'>Enter</span>: fullscreen
click on on the left border or <span class='key'>Page Up</span>: go to the previous slide
click or <span class='key'>Page Down</span>: go to the next slide
]]></text>
</slide>
<slide>
<text>If you put more than one image in the same slide the extra images will scroll from the right to the left</text>
<image file="http://1.bp.blogspot.com/_N_mOB63qPaE/SwmFtcpw54I/AAAAAAAAMmc/fmCo9rSEdI0/s400/Beautifull-Birds.jpg" />
<image file="http://4.bp.blogspot.com/_N_mOB63qPaE/SwmF7LSAa7I/AAAAAAAAMm8/WZArZHzJ1Ws/s400/Red-Bird-Wallpaper.Jpg" />
<!-- the optional attribute delay specifies the number of seconds before the image starts to scroll to replaces the previous one -->
<image delay="2.5" file="http://4.bp.blogspot.com/_N_mOB63qPaE/SwmFt7Kxy0I/AAAAAAAAMmk/CW8cMKBduFY/s400/Birds-Wallpaper.jpg" />
</slide>
<slide>
<text>
<![CDATA[When you click on the last slide image,
text and sound fade out
<small>The images are taken from collectionbird.blogspot.com
The song is "Lern to fly", by Josh Woodward (www.joshwoodward.com)</small>
]]></text>
<image file="http://1.bp.blogspot.com/_N_mOB63qPaE/SwmFuGRR8nI/AAAAAAAAMms/WOenHtvajMw/s400/Bird-Wallpaper.jpg" />
</slide>
</slides>
How to build it
Download the same zip file, that contains the source code. It was coded hastily, still I think it’s a good example of what you can do with Flex SDK without framework (that’s with completely free and open source tools and with a target swf really small) and TweenLite or TweenMax. It embeds code of TwinMax that has its own dual license. To build the slideshow you can use Flash Builder (formerly named Flex Builder) or, if you can’t afford to buy it, download the Flex SDK as I did.
An ant script is not provided with the slideshow, but there are a batch file for windows (build.bat) and a shell script for Linux (build.sh) used to build it with Flex SDK 4. You may need to configure them depending on the installation directory of the SDK etc.