O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 9 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (17)

Anúncio

Semelhante a Xyz (20)

Mais recentes (20)

Anúncio

Xyz

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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.

×