1. Slideshow Player
Introduction
The following outlines the requirements for a flex-built slideshow player, hereinafter
referred to as the TOOL, that will be embedded in a web application, hereinafter
referred to as the WEBSITE. We are currently using SlideShowPro
(www.slideshowpro.net), hereinafter referred to as the MODEL.
We like many of the features and UI elements of the MODEL, but need two goal-specific
improvements:
1) Specific control of the ken burns effects (for example: Start centered right, zoom:
125%. End centered left, zoom: 100%.)
2) Ability to play and control the volume for two separate audio files (one music track,
one voice over track)
TOOL Requirements
Ken Burns Effects
Each slide will have a customized ken burns start and finish position that is controlled by
the WEBSITE.
And example of a slide show the user might generate:
1. Slide 1. Start centered, zoom: 100%. End centered, zoom: 125%.
2. Slide 2. Start centered, zoom: 100%. End centered, zoom: 125%.
3. Slide 3. Start centered, zoom: 125%. End centered, zoom: 100%.
4. Slide 4. Start centered left, zoom: 125%. End centered right, zoom: 125%.
5. Slide 2. Start centered, zoom: 100%. End centered, zoom: 125%.
6. Slide 4. Start centered right, zoom: 125%. End centered left, zoom: 125%.
7. Slide 4. Start centered right, zoom: 125%. End centered left, zoom: 100%.
8. Slide 4. Start centered left, zoom: 125%. End centered right, zoom: 125%.
9. Slide 3. Start centered, zoom: 125%. End centered, zoom: 100%.
The TOOL will use XML parameters provided by the WEBSITE to control the ken burns
effects in the slideshow.
See illustrations 3 and 4 for more information.
Slideshow Playback
A slideshow may contain up to 200 images/slides.
Controls:
• Play/Resume: When the user clicks ʻplayʼ the TOOL will begin displaying the
slideshow starting with the current slide and moving forward. When the TOOL first

2. loads the current slide is the first slide. Note: If the TOOL is ʻresumingʼ the slideshow, it
will not transition from the previous slide to the new current slide. It will be like the
slideshow just started.
• Pause: If the user pauses the slideshow, the TOOL will finish showing the current slide
(and any ken burns effects) before pausing. The TOOL will then set the next slide (if it
exists) as the current slide.
• Navigation: The user will be able to jump forwards and backwards in the slideshow by
using thumbnail navigation. When a user clicks on a thumbnail for another slide, the
current slide immediately starts to cross dissolve transition to the selected slide.
Transitions
The transition between all slides will be cross dissolve.
Voice Over Playback
Users will have the option to upload (via the WEBSITE) an MP3 file of their voice giving
a voice over for the slideshow. The voice over will have itʼs own set of XML parameters
and UI controls.
The audio track will begin playing when the user clicks the slideshow play button. The
slideshowʼs resume/pause/navigation will have no effect on the audio track, once the
audio track has started it will play through to the end. The only way to control it is via the
volume/ mute controls.
If the voice over duration is shorter than the slideshow duration, the voice over will play
once and stop.
If the voice over duration is longer than the slideshow duration, the voice over will
continue playing after the last slide then stop when finished.
Controls:
• The TOOL will allow the user to control the volume of the audio track.
• The TOOL will allow the user to mute/unmute the audio track.
Sound Track Playback
Users will have the option of selecting an MP3 file of music to play during the slideshow.
The sound track will have itʼs own set of XML parameters and UI controls.
The audio track will begin playing when the user clicks the slideshow play button. The
slideshowʼs resume/pause/navigation will have no effect on the audio track, once the
audio track has started it will play through to the end. The only way to control it is via the
volume/ mute controls.
If the sound track duration is shorter than the slideshow duration, the sound track will
play once and stop.

3. If the sound track duration is longer than the slideshow duration, the sound track will
continue playing after the last slide then stop when finished.
Controls:
• The TOOL will allow the user to control the volume of the sound track.
• The TOOL will allow the user to mute/unmute the sound track.
Full Screen Mode
Users will be able to expand the TOOL to full screen.
XML File Parsing
The settings for each slide show (including the player setup, slides, and audio files) will
be made available by the WEBSITE as an XML file.
Bitmap Smoothing
The TOOL will use bitmap smoothing to make the ken burns effects and transitions look
good.
Image Preloading
As soon as a slide is loaded, the TOOL will begin preloading the next image so that the
TOOL already has the image stored in cache when it is ready for it.
Maintainable Code
The deliverable for this project will be a TOOL that meets all requirements laid out in this
document (in .swf format) as well as the flex source code for the TOOL. The code
should be well commented, follow flex best-practices, and be something that we may
make changes to in the future, if necessary.
Performance
We understand the inherent performance issues when working with flash and large
quantities of media files, and want to make sure that users do not suffer in the
experience of the slideshow. Our goal is to provide a slideshow that is as fluid as video.
We will expect the final version of the TOOL to perform as smoothly as a video at full
screen on a machine with the following specifications:
OS: Windows XP SP3
Machine: Pentium 4 3Ghz with 1Gb RAM
Display: 1280x1024
User Interface
Stage
Refers to the full dimensions of the TOOL.
Player

4. Refers to the portion of the stage that contains the slideshow and controls.
Letterbox Mattes
Refers to the portion of the stage that letterbox crops the stage down so that the primary
focus is on the player.
Control Box
Refers to the area at the bottom of the player that contains the Navigation, Slideshow
Controls, Voice Over Controls, and Sound Track Controls.
The control box is normally hidden off the bottom of the page. It slides up into view
when there is mouse movement over the stage. It slides down after 2 seconds of
mouse inactivity (unless the mouse is positioned above the control box).
Navigation and Controls
The navigation thumbnails, their size, their hover state, and functionality will behave
similarly to the MODEL.
Slide Show Controls
"Previous Group" left arrow will behave similarly to the MODEL.
"Previous Photo" minus sign will behave similarly to the MODEL.
"Next Photo" plus sign will behave similarly to the MODEL.
"Next Group" right arrow will behave similarly to the MODEL.
"Play/Pause/Resume" button will behave similarly to the MODEL.
"Full screen" button will behave similarly to the MODEL.
Voice Over Controls
The voice over controls will behave similar to the volume controls for many video
players (YouTube, etc). Users will be able to toggle mute states, as well as adjust a
volume slider.
Sound Track Controls
The sound track controls will behave similar to the volume controls for many video
players (YouTube, etc). Users will be able to toggle mute states, as well as adjust a
volume slider.
Slide Countdown Timer
There will be some sort of indication of time remaining for each slide. Similar to the
MODELʼs circle in the top right corner.

5. Slideshow Parameters
These settings will be set via the XML file
playerHeightWidthRatio (float:required)
While the stage may be any dimension (as set by the flash object or by the screen in full
screen mode), the player will always have a specific height to width ratio. Any part of
the stage that is not part of the player will be letterbox cropped. See Illustration 2.
letterboxMatteColor (string)
Sets the color of the letterbox mattes. Passed in via hexadecimal color.
voiceOverUrl (string:optional)
The HTTP URL for the voice over audio file.
If the parameter is not present, there is no voice over for the file.
If the parameter is not present, all UI for the voice over controls will be hidden.
voiceOverVolume (float; range: 0-1)
The starting volume setting for the voice over track.
soundTrackUrl (string:optional)
The HTTP URL for the sound track audio file.
If the parameter is not present, there is no sound for the file.
If the parameter is not present, all UI for the sound track controls will be hidden.
soundTrackVolume (float; range: 0-1)
The starting volume setting for the voice over track.
transitionDuration (float:required)
The amount of time in seconds of the transition between images. See illustration 1.
Slide Parameters
These settings will be set via the XML file and made available for each slide.
slideDuration (float:required)
This is the amount of time in seconds that each image is shown in the slideshow. See
illustration 1.
kbStartPosition (string:required)
One of the nine ken burns positions. See Illustration 3.
kbStartZoom (integer:required)
Zoom factor of the image in the slide at the beginning of each slide. See Illustration 4.
kbEndPosition (string:required)
One of the nine ken burns positions. See Illustration 3.

6. kbFinishZoom (integer:required)
Zoom factor of the image in the slide at the end of each slide. See Illustration 4.
Illustrations
Illustration 1: Duration and transition lengths
Image 1 Tran Image 2 Tran Image 3
sitio sitio
5 seconds n1 5 seconds n2 5 seconds
2 2
sec sec
Total time: 19 seconds
A slideshow with 3 images, slideDuration of 5, transitionDuration of 2 should be 19
seconds long.
The length of the ken burns effect for image 1 is 7 seconds.
The length of the ken burns effect for image 2 is 9 seconds.
The length of the ken burns effect for image 3 is 7 seconds.
Illustration 2: Player sizing
Screen Aspect Ratio: 8:5 (1.6) Screen Aspect Ratio: 4.3 (1.333)
Player Aspect Ratio: 3:2 (1.5) Player Aspect Ratio: 3:2 (1.5)
Letterbox Mattes on Left and Right Letterbox Mattes on Top and Bottom

7. A TOOL with a playerHeightWidthRatio of 1.5 will contain the entire slideshow in a
horizontal box that is 2 units tall and 3 units wide, regardless of the size of the stage/
screen. Any part of the stage or screen that is not covered by the stage will be covered
with mattes (color set by letterboxMatteColor).
Illustration 3: Ken Burns Positions
TL Top Left
TC Top Center
TR Top Right
CL Center Left
CC Center Center
CR Center Right
BL Bottom Left
BC Bottom Center
BR Bottom Right
Illustration 4: Ken Burns Zoom Levels
Note that zoom levels is based on area, not height/width.
For example: 120% zoom on an image that is 150x100px is 164x110px (NOT
180x120px)
90% Zoom - Position: Top Left 100% Zoom - Position: Top Left

8. 110% Zoom - Position: Top Left 120% Zoom - Position: Top Left
130% Zoom - Position: Top Left 140% Zoom - Position: Top Left
Illustration 5: Ken Burns Base Zoom Level
The base zoom level (100%) size will be determined by the size of the player and the
size of the image. A 100% zoomed image positioned in the absolute center of the
player will be completely visible (no cropping) and filled to fit the frame so that two sides
of the image are touching the edges of the player. If the aspect ratio of the image is the
same as the aspect ratio of the player, all four sides of the image will touch all four
edges of the player.
The 100% size of an
image that is has a lower
aspect ratio than the player
will be when the image fills
the player top to bottom.

9. The 100% size of an
image that is has an equal
aspect ratio than the player
will be when the image fills
the player top to bottom,
left to right.
The 100% size of an
image that is has a higher
aspect ratio than the player
will be when the image fills
the left to right.