On a recent project, I needed to produce a simple slide show, like this one, so I used SlideShow Pro (SSP) to create it. The difference was that I needed to have captions appear below the slide show and a click through button on top of it to let the viewer know that there was a profile attached to the image. Since SSP doesn’t do this “out of the box” I had to resort to using some ActionScript.
Note: All code here is AS2 and I assume you already know how to use SSP.
Create your slide show
I already figured out how to make my captions display externally, so review that post for more detailed info. For this project, here’s a quick overview:
- Create your Flash document using ActionScript 2 (code here is in AS2).
- Place your SSP instance and give it an instance name of
my_ssp. - Publish your slide show and make sure it’s working.
Create the caption area
- Increase the size of your flash document to allow space for your caption below the slide show component.
- Draw a text box in the space you created.
- Make it a dynamic text field with these properties:
- Give it an instance name of
caption_ta. - Set it to a multiline field.
- “Selectable” and “Render Text as HTML” buttons pressed.
- Adjust your font and color options.
- Give it an instance name of
Create your button
Next, create a button object in Flash. You will want to give it “Up”, “Over”, “Down” and “Hit” layers.
The “Hit” layer is the part of the button that is clickable by the user. For this example, I made the “Hit” layer the size of our entire Flash movie. When you put the captions outside the SSP component, they aren’t clickable. By making the “Hit” area of your button the size of your movie, everything becomes clickable.
- Place the button on top of the SSP instance where you want it.
- Give it an instance name of
link_btn. - Double check the “Hit” layer and make sure it covers the movie completely.
Add the ActionScript (2)
Next, we need to create an empty layer to hold all of our ActionScript.
- Create a new layer in your timeline and name it “a”.
- select this layer and open the “Actions” window.
- Paste this code into it.
If anyone has a version of this code in AS3, let me know and I’ll include it too.
sspListener = new Object();
sspListener.onImageData = function(eventObject) {
currentImage = eventObject.data.number;
caption_ta.htmlText = eventObject.data.caption;
link_btn.onPress = function() {
getURL(eventObject.data.link, "_self");
}
}
my_ssp.addEventListener("onImageData", sspListener);
Test your slide show
Save everything and publish out your files just like you normally would. If everything is goes right, you should now have captions below the slide show and a click through button that has a clickable area the entire size of your slide show.
Tweaking caption space
Since Flash doesn’t expand to fit content, you have to make the caption field tall enough for your longest caption. If you don’t have enough room, Flash will just cut it off. Remember, if you change the dimensions of your flash file, you also have to change the dimensions in the HTML embed code or your captions will still get cut off on the bottom.
Simple but handy tweak - thanks for sharing. Yet I guess it is by now a bit outdated, since AS3 and its powerful language is out.