Your SlideShare is downloading. ×
Xyz
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
797
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Slideshow PlayerIntroductionThe following outlines the requirements for a flex-built slideshow player, hereinafterreferred to as the TOOL, that will be embedded in a web application, hereinafterreferred 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-specificimprovements: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 RequirementsKen Burns EffectsEach slide will have a customized ken burns start and finish position that is controlled bythe 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 burnseffects in the slideshow.See illustrations 3 and 4 for more information.Slideshow PlaybackA 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.TransitionsThe transition between all slides will be cross dissolve.Voice Over PlaybackUsers will have the option to upload (via the WEBSITE) an MP3 file of their voice givinga voice over for the slideshow. The voice over will have itʼs own set of XML parametersand UI controls.The audio track will begin playing when the user clicks the slideshow play button. Theslideshowʼs resume/pause/navigation will have no effect on the audio track, once theaudio track has started it will play through to the end. The only way to control it is via thevolume/ mute controls.If the voice over duration is shorter than the slideshow duration, the voice over will playonce and stop.If the voice over duration is longer than the slideshow duration, the voice over willcontinue 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 PlaybackUsers 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. Theslideshowʼs resume/pause/navigation will have no effect on the audio track, once theaudio track has started it will play through to the end. The only way to control it is via thevolume/ mute controls.If the sound track duration is shorter than the slideshow duration, the sound track willplay once and stop.
  • 3. If the sound track duration is longer than the slideshow duration, the sound track willcontinue 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 ModeUsers will be able to expand the TOOL to full screen.XML File ParsingThe settings for each slide show (including the player setup, slides, and audio files) willbe made available by the WEBSITE as an XML file.Bitmap SmoothingThe TOOL will use bitmap smoothing to make the ken burns effects and transitions lookgood.Image PreloadingAs soon as a slide is loaded, the TOOL will begin preloading the next image so that theTOOL already has the image stored in cache when it is ready for it.Maintainable CodeThe deliverable for this project will be a TOOL that meets all requirements laid out in thisdocument (in .swf format) as well as the flex source code for the TOOL. The codeshould be well commented, follow flex best-practices, and be something that we maymake changes to in the future, if necessary.PerformanceWe understand the inherent performance issues when working with flash and largequantities of media files, and want to make sure that users do not suffer in theexperience 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 fullscreen on a machine with the following specifications:OS: Windows XP SP3Machine: Pentium 4 3Ghz with 1Gb RAMDisplay: 1280x1024User InterfaceStageRefers to the full dimensions of the TOOL.Player
  • 4. Refers to the portion of the stage that contains the slideshow and controls.Letterbox MattesRefers to the portion of the stage that letterbox crops the stage down so that the primaryfocus is on the player.Control BoxRefers to the area at the bottom of the player that contains the Navigation, SlideshowControls, Voice Over Controls, and Sound Track Controls.The control box is normally hidden off the bottom of the page. It slides up into viewwhen there is mouse movement over the stage. It slides down after 2 seconds ofmouse inactivity (unless the mouse is positioned above the control box).Navigation and ControlsThe navigation thumbnails, their size, their hover state, and functionality will behavesimilarly 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 ControlsThe voice over controls will behave similar to the volume controls for many videoplayers (YouTube, etc). Users will be able to toggle mute states, as well as adjust avolume slider.Sound Track ControlsThe sound track controls will behave similar to the volume controls for many videoplayers (YouTube, etc). Users will be able to toggle mute states, as well as adjust avolume slider.Slide Countdown TimerThere will be some sort of indication of time remaining for each slide. Similar to theMODELʼs circle in the top right corner.
  • 5. Slideshow ParametersThese settings will be set via the XML fileplayerHeightWidthRatio (float:required)While the stage may be any dimension (as set by the flash object or by the screen in fullscreen mode), the player will always have a specific height to width ratio. Any part ofthe 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 ParametersThese 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. Seeillustration 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.IllustrationsIllustration 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 secondsA slideshow with 3 images, slideDuration of 5, transitionDuration of 2 should be 19seconds 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 ahorizontal 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 coveredwith 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 RightIllustration 4: Ken Burns Zoom LevelsNote that zoom levels is based on area, not height/width.For example: 120% zoom on an image that is 150x100px is 164x110px (NOT180x120px) 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 LeftIllustration 5: Ken Burns Base Zoom LevelThe base zoom level (100%) size will be determined by the size of the player and thesize of the image. A 100% zoomed image positioned in the absolute center of theplayer will be completely visible (no cropping) and filled to fit the frame so that two sidesof the image are touching the edges of the player. If the aspect ratio of the image is thesame as the aspect ratio of the player, all four sides of the image will touch all fouredges 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 animage that is has an equalaspect ratio than the playerwill be when the image fillsthe player top to bottom,left to right.The 100% size of animage that is has a higheraspect ratio than the playerwill be when the image fillsthe left to right.