Beyond Basic Soundslides for Photographers

U s i n g

F l a s h & S o u n d S l i d e s i n M u l t i m e d i a S t o r y t e l l i n g

by

Will Yurman

Staff Photographer

Rochester Democrat & Chronicle

http://www.willyurman.com/links

“ Don't tell me the moon is shining; show me the glint of light on broken glass.”

~Anton Chekhov

update march 2009

2

1. SoundSlides is a simple-to-use, fast method for creating audio slideshows for the web. 2. The program is available at www.Soundslides.com for $39.95 or $69.95 depending on ver-sion, for Mac(PPC & Intel) and Windows.

The applications Soundslides and Flash(MX2004 or later) are required

for this tutorial.

THIS TUTORIAL ASSUMES BASIC KNOWLEDGE OF BOTH SOUNDSLIDES AND FLASH. AN UNDERSTANDING OF THE FLASH INTERFACE IS ESSENTIAL.

BASIC SKILLS SUCH AS CREATING BUTTONS AND SIMPLE ACTIONSCRIPTING ARE

ALSO REQUIRED.

Soundslides is the perfect program at the right moment. Just as publications were deciding to invest in multimedia storytelling, Soundslides came along and made the process simple. Soundslide’s creator Joe Weiss calls it ‘Ridiculously simple storytelling’, and he’s right. All of a sudden, audio slideshows built with the software are everywhere. Anyone with a few images and an audio track can create their very own show. BUT, the cost of simplicity is lack of control. The program itself offers a few, limited choices for appearance, Real control over the look, design, and functionality of a show is beyond the capability of the program. The joy and surprise readers have when they open their newspaper to a beautifully designed page is lost in the multimedia experience when every story is presented in the same way. Good design enhances the storytelling. SO, what do we do? Before Soundslides there was Flash. And Flash was good. And Flash was really hard to learn. We can still build shows from the ground up with Flash - but the learning curve is steep, and using the program can be time consuming. Luckily, the Soundslides component allows a way to integrate a Soundslides show with Flash, allowing much more control, with a little effort.

Components in Flash

Components in Flash are pre-built content with parameters that allow you to modify their ap-pearance and behavior. In this case, Flash can control a Soundslides show through the Sound-slides Component, allowing you to create a Flash ‘shell’ with additional content, navigation and design.

3

Working with the Flash Component.

1. You must have the Soundslides application AND (free) component. Download both from www.Soundslides.com 2. You must also have the Flash application, version MX2004 or later. Download from www.adobe.com

After installing both applications, install the Soundslides.mxp component into your Flash application using the Macromedia Extension Manager. Opening the .mxp file should install it automatically.

Once the Component is installed you’re ready to go.

Building a Flash/Soundslides show

Step 1 - Create your Soundslides show.

A. Build your show in Soundslides exactly as you have in the past.

B. Any parameters can be set within Soundslides, but can be overwrit-ten, if you choose, from within Flash.

C. Export the show.

D. Rename your publish_to_web folder. The NAME of this folder is im-portant. You will use the name to link to Flash.

Step 2 - Build your Flash “Shell”

Open the Flash application. Create a new Flash document. Your screen will look something like this(your version of Flash may look different):

4

You may also have different windows, called ‘Panels’, open with other Flash tools. The main panel above contains the Stage - content is placed on the stage. The timeline above the stage shows the layers and frames of the show. A new show has one layer, and no content. You can create and place any content you like within the Flash show – pho-tos, buttons, text, graphics. These can be used as introductions to your Soundslides show or as supplements to the audio slideshow. In essence, we let Soundslides do the heavy lifting of creating the slide show, and then use Flash to provide a custom appearance. Flash is used for the added value of more content and design. Placing the Component 1. Open the Component Panel -- Windows>Components

5

Components Panel(yours may look slightly different)

6

Select the component, from inside the Soundslides folder, and drag it to the stage onto the proper frame. Create separate layers for your content in Flash. Place the component on its own layer. Once the component has been placed on the stage, make sure it has the ‘Instance Name’ soundslides. The Instance Name allows you to control that instance of the component. Click once on the component and enter the name ‘soundslides’ in the instance name box in the properties box panel.

To set parameters for the component, open the Component Inspector from the ‘Window’

drop down menu. -- Windows> Component Inspector

7

The Component Inspector gives you control over the appearance of the Soundslides show. Most of the parameters are self explanatory. The first one is very important: project folder - enter the name you have given your publish_to_web folder. It must be en-tered exactly, and is case sensitive. This is what links your Soundslide show to the Flash shell. For other parameters, click on the box to the right to select an option or enter a value. If the option ‘inherit’ is selected, Flash will use the settings you established when you built the SoundSlides show. Otherwise, Flash will override those settings. Controlling the Component Once in place, you can create actions and content that interact with the Soundslides show. Ac-tionscript in Flash can control the show, and the show can trigger events back to Flash. • Use Flash content for an introduction, then use a button to trigger the Soundslides show. • Create your own customized navigation. • Have multiple Soundslide shows, controlled from a master page or navigation buttons.

Here is the list of actionscripts available for controlling Soundslides: (From the Soundslides wiki)

Soundslides uses Actionscript 2 (not the newer Actionscript 3) If the component has an instance name of soundslides you can use the following functions:

soundslides.ss_play(); //plays from the beginning soundslides.ss_stop(); //goes to the beginning and stops soundslides.ss_pause(); //toggles between pause and resume soundslides.ss_caption(); //toggles between show and hide caption //ss_caption was added with v140 of the component soundslides.ss_credit(); //toggles between show and hide credits //ss_credit was added with v140 of the component soundslides.ss_setVolume(0);

8

//volume can be set from 0 - 100 (quiet - loud) trace(soundslides.ss_getVolume()); //returns volume as a number 0 - 100 (quiet - loud) soundslides.ss_gotoAndPlayImage(imgNumber); //plays from a specific image soundslides.ss_gotoAndStopImage(imgNumber); //advances the timeline to a specific image soundslides.ss_gotoAndPlaySec(second); //plays from from an audio position soundslides.ss_gotoAndStopSec(second); //advances the timeline and stops soundslides.ss_gotoAndPlayPercent(percentage); //plays from a percentage of the timeline soundslides.ss_gotoAndStopPercent(percentage); //advances the timeline and stops soundslides.ss_nextImage(); //advances and stops on the next image soundslides.ss_prevImage(); //rewinds and stops on the previous image soundslides.ss_loadNew("project"); //loads a new project into the component ... may be relative "relative/project"//or full url "/full/path/to/project"

• Note: The above functions cannot be used until after the compo-nent has loaded the soundslide project.

To define the initial project BEFORE the component initializes, use this variable:

soundslides.project = "project"; //may be relative "relative/project" //or full url "/full/path/to/project"

Listener object.

9

The Soundslides component uses a listener object to communicate data from the component to the rest of your actionscript.

The listener object must be defined in the component parameter listener object.

Here’s an example of the actionscript for onAudioEnd and onSoundslid-eData.

ss_listen = new Object(); //create an object for listening ss_listen.onSoundslideData = function(project){ trace(project["headline"]); trace(project["credits"]); trace(project["totalImages"]); trace(project["totalTime"]); } ss_listen.onAudioEnd = function(){ trace("audio end"); } You can also use dot syntax on the array returns like this:

ss_listen.onSoundslideData = function(project){ trace(project.headline); trace(project.credits); }

Listener object functions

All code assumes the component listener is named ss_listen

You must create an object BEFORE assigning functions to it.

ss_listen = new Object(); onStartUp Triggered on initial start. Returns nothing.

ss_listen.onStartUp = function(){ trace("soundslide initializing"); } onControlButton Triggered when any button is pressed. Returns string.

ss_listen.onControlButton = function(control){

10

trace("user pressed " + control); } onFirstImageLoaded Triggered when the first image is loaded and appears.

ss_listen.onFirstImageLoaded = function(){ trace("The first image is loaded and visible"); } onSoundslidePreloaded Triggered when the Soundslides preloads, and the play button is acti-vated.

ss_listen.onSoundslidePreloaded = function(){ trace("Images and audio are preloaded, play is enabled"); } onAudioEnd Triggered when the audio track ends.

ss_listen.onAudioEnd = function(){ trace("The audio has ended"); } onSoundslideData Triggered when the initial file data is loaded. Returns array:

ss_listen.onSoundslideData = function(project){ trace(project.headline); trace(project.credits); trace(project.totalImages); trace(project.totalTime); } onImageChanged Triggered when the image changes. Returns array:

ss_listen.onImageChanged = function(image){ trace(image.caption); trace(image.number); } onTimer Triggered every frame. Returns array:

ss_listen.onTimer = function(info){ trace(info.remaining); //0:30

11

trace(info.elapsed); //0:30 trace(info.remaining_nonformat); //30 trace(info.elapsed_nonformat); //30 trace(info.elapsed_percent); //50 } formatted strings return as 0:00, nonformat return as int(seconds), per-cent returns as 00.00 (2 decimal points)

IF you are NOT familiar with Flash and actionscript this will look like Greek to you.

In essence, you are using the actionscript language to either send mes-sages to Soundslides or back from the slideshow.

Example 1.

You might have an introduction with photos or type or even a separate soundtrack, on Frame 1.

On Frame 2, you’ve placed the Soundslides component.

You need to get from Frame 1 to Frame 2. Create a button with a script that says: on (release) { gotoAndStop(2); }

This simple script says, Click and release the button and the show will go to frame 2 and stop. Once there, the Soundslides show will load auto-matically.

Example 2

You want a credit page to show up, when the show ends.

You would create a frame with the credit information, in this case on frame 3. Place the following code on the same frame as the component.

The script says, when the audio ends, send the show to frame 3. Example 3 ss_listen = new Object();

12

ss_listen.onAudioEnd = function() { _root.gotoAndStop(3); }; You want to give viewers more control over the show.

You could create buttons for advancing to the next, or previous image. Simply create a button and add the actionscript.

on (release) { soundslides.ss_nextImage(); } A second button could have: on (release) { soundslides.ss_prevImage(); } Now you have an easy way for people to click through your show and admire your photography.

With Soundslides and some relatively basic Flash skills, you can tell stories in ways that aren’t possible with Soundlsides alone.

The possibilities are endless and now can be driven by the content of your story.

The goal is to NOT let the ease of use of Soundslides limit your ability to tell stories. Your (renamed) publish_to_web folder and the .swf file from Flash must be kept together when you post them on your website. If you need more information on using Flash, there are many good refer-ence books and websites.