Flash Slide Show

Bill Tait Nov 2011

 

The Flash Application

The Flex Code

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="600" height="500" backgroundColor="#445566">

<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>

<s:Image id="image" source="Slide1.jpg" width="480" height="360"/>

<s:HGroup>
<s:Button label="1" width="40" click="image.source='Slide1.jpg'"/>
<s:Button label="2" width="40" click="image.source='Slide2.jpg'"/>
<s:Button label="3" width="40" click="image.source='Slide3.jpg'"/>
<s:Button label="4" width="40" click="image.source='Slide4.jpg'"/>
<s:Button label="5" width="40" click="image.source='Slide5.jpg'"/>
<s:Button label="6" width="40" click="image.source='Slide6.jpg'"/>
<s:Button label="7" width="40" click="image.source='Slide7.jpg'"/>
<s:Button label="8" width="40" click="image.source='Slide8.jpg'"/>
<s:Button label="9" width="40" click="image.source='Slide9.jpg'"/>
<s:Button label="10" width="40" click="image.source='Slide10.jpg'"/>

</s:HGroup>

</s:Application>

The Explanation

The first line sets the version of XML to be used and is standard for all Flex applications.

The next four lines define an Application tag starting with <s:Application and ending with />. In between are some attributes to specify the namespaces of the Flex components and the width, height and background colour of the application. Between this tag and the closing application tag, </s:Application> is the Flex program, SlideSow.mxml, that compiles into a Flash application, SlideShow.swf.

The next three lines specify a vertical stack layout of all the following components which are also to be aligned in the centre of the window and the middle, vertically.

The next line specifies the first of these vertically stacked components as an image. Its attributes declare the source of the image to be the file Slide1.jpg and its size to be 600 pixels wide by 500 high. This image file must be located in the same folder as the application file and, whatever size it is, it will be resized to 600 by 500 pixels. It is best to create image files with the same 4:3 aspect ratio or they will be distorted in the presentation. They can be obtained from a digital camera of graphics software.

Then there is an <s:HGroup> tag that locates ten buttons horizontally along the bottom of the containing vertical stack. You can add or remove buttons to fit the number of slides you have. Each button has an image.source attribute whose value (in the quotes) can be edited to the name of the file it is to display. When a button is clicked it will display the corresponding image in the image window. Also the widths of the buttons are designed to cope with 10 images. If you have more or less you may have to adjust these width values.

Then the HGroup and the Application end with closing tags.

You can modify most of the properties of the Slideshow application by editing the code and recompiling it in the Flex SDK or Flash Builder.You must be careful to maintain all the punctuation, including the double and single quotes, and the exact tag and attribute names.