Web video template: Media presentation with details

This web video template is a media gallery sample project for use with Adobe Flash Professional that you can populate and customize with your own theme, content, soundtrack, and graphics (see Figure 1). This article provides an overview of the template's features along with instructions for customizing the layout to suit your needs. Explore the media gallery below to see its features in action.

(The concept for this template derives from the Engage with Flash microsite that Adobe unveiled in 2006. This sample project combines the video gallery experience from that microsite with the power of Open Source Media Framework media player components that I developed as an alternative to using the default FLVPlayback component in Flash Professional.)

The Media Presentation with Details template is supplied in the form of a Flash project containing source files and published files for deployment. The project includes content in the form of a travel journal which you can use to take apart and compare with your own work.

This section of the article describes the features in the media player template and the key concepts you'll need to know in order to work with the supplied files (see Figure 2).

Extending the Flash OSMF media player components

Open Source Media Framework (OSMF) is an Adobe open-source solution for improving media player development and deployment to Adobe Flash Player. The goal of the Flash OSMF media player components is to leverage the features of OSMF while providing a development experience similar to working with the FLVPlayback component included in Flash.

Using the MediaDisplay component, for example, you can assign any of the media formats supported by OSMF to the media display and thumbnails. This means you can use SWF files, images, and audio content in addition to video files. The MediaDisplay component also supports serial and parallel sequencing of content to display composite groups of media. You'll use the ControlBar component to easily customize which media controls appear on the screen.

This article refers back to the documentation of the Flash OSMF media player components for more detailed descriptions of functionality. The control bar graphics and related ActionScript code have been updated but the documentation from the OSMF components article still applies in most cases.

For more information on the OSMF media player components, check out Using the Flash OSMF Media Player template and Overview of the Flash OSMF Media Player Template ActionScript 3.0 API.

Understanding the layout of the template

The template uses the concept of "chapters" to describe how content is grouped together. Bcause your content is external to the media player SWF, you need to define the content in an XML file. You do that by creating a very simple list of chapters, which represent the sections of the media player. The result is that each chapter's content maps to the thumbnails, media display, and details areas of the template.

A chapter includes the following values:

• Caption (or title)
• Thumbnail (URL to a SWF file, image file, or video file)
• Media element (media or composite media URLs to display)
• Call to action (caption bar text used to trigger a click to the detail content)
• Detail content (URL to a SWF or image)

This template is designed to display seven chapters of content. When a thumbnail is clicked, the corresponding media element plays in the display area. When the display area is clicked, the media pauses and shows the corresponding detail content file.

Tip: If you define more than seven chapters of content, the thumbnail area will scroll when the media auto-plays the eighth chapter or when the user clicks the forward and back arrows.

Workflow for using the media player template

The media player template is fully functional with minimal editing. You may choose to customize the look and size of the template, or you may simply update the content and use the existing theme in the provided sample files.

The general workflow follows these steps:

1. Download and explore the supplied sample files from the beginning of the article.
2. Prepare your content (including the text, audio, and media files).
3. Update the config.xml file to match your content file names and settings.
4. Modify the template graphics and layout (optional).
5. Publish and deploy the files to your server.

The following sections of this article explain the steps listed above in more detail.

Working with the sample files

The provided sample files contain both source files used to publish the project and published files used to deploy to your server. Take a moment to explore the files and folders before making any changes. If you run into problems, you can return to these files to compare notes.

Follow these steps to take a quick tour of the sample files:

1. Download the media-preso-details.zip file from the link at the beginning of the article.
2. Unzip the archive to your desktop and open the project folder.
3. Notice that there are two subfolders: _source and assets. The _source folder contains the source files for the project and is not included in the deployable files. The assets folder contains the config.xml settings file, along with four folders that contain the media, thumbnails, soundtrack, and detail content.
4. Review the contents of the assets folder and subfolders.
5. Take a look in the _source folder. You'll find the FLA files and ActionScript files in this location. You won't need to edit the ActionScript files if you use the default features in the template, but the com and libs folders must remain next to the FLA files so that the code can be published when you export the SWF. The details folder contains the detail content FLA files for the project.
6. Double-click the MediaPresoWithDetails.fla file to open it in Flash Professional. You'll use this file to edit the look and layout of the template if desired.
7. Analyze the layers on the main Timeline to identify the main elements of the template. Also, look in the Library to see the symbols that make up the controls.

Once you've explored the sample files, save the project folder in an easy to access location on your hard drive. Use this folder as your project folder to edit and publish the files.

Flash Player security settings

If you launch the MediaPresoWithDetails.swf file from your desktop, you may encounter a Flash Player security warning (see Figure 3).

This message appears because the AddThis share menu widget is trying to load icon images from a third-party website, AddThis.com. Flash Player is designed not to load content from the Internet when the SWF is launched from your desktop, unless you allow it to do so.

While working with the files locally, you can dismiss the security warning by clicking on the Settings button, and then setting the option to allow the project folder as a trusted location in your Global Flash Player Security Settings.

Follow these steps to set the project folder as a trusted location in the Flash Player:

1. When you see the Adobe Flash Player Security warning shown in Figure 3, click the Settings button to launch the Flash Player Global security settings page in a browser.
2. Click the Edit locations menu and choose Add location.
3. In the dialog box that appears, click the Browse for folder button and browse to select the project folder. You'll see the folder appear in the settings manager.

You can also visit the Global security settings for content creators web page directly to manage your trusted local folders.

Tip: If you work on a lot of Flash projects, it's a good idea to designate a specific folder on your hard drive as a trusted location where you can store your work during development.

This template supports video, image, SWF, and audio content in the media display area along with a soundtrack that can play over the top of the media sections. For each section of the presentation, you create a caption, thumbnail file, media or composite media file, and optional detail overlay content file. If you'd like to have a soundtrack play over the top of the sections, you can create an audio file of any length and set it to loop (or not).

The following section describes how to gather content for the project.

Define your text content

Setting up the text content in the template is fairly straightforward. Define a title for the header area, text for the call-to-action button in the lower right of the screen, and captions and call-to-action text for each chapter. The chapter captions appear under the thumbnails on rollover and in the caption bar overlaying the media display area. The chapter's call-to-action text is the text that appears in the red area of the caption bar. You can customize this text or use the default "Read More" text.

At this point, you can start creating a text file and compiling the list of chapters, related text, and URLs which you'll create in the next steps.

Set up your soundtrack

The template uses a second media player to play an audio track over the top of the chapter media content. In the sample files, the video file does not contain any embedded audio. Instead, a soundtrack created from an Adobe Soundbooth score plays in a loop over the top of the video.

You can create an audio file of any length and set it to loop or play once. This feature is optional, if you prefer to use audio embedded directly in your chapter videos.

Follow these steps to add a soundtrack file:

1. Create an MP3 file (or other supported format) with a duration that is roughly as long as the collective length of your chapter media.
2. Add the file to the soundtrack folder inside the project's assets folder.
3. Write down the file name of the audio file so you can add it to the config.xml file later.

You can also layer audio tracks over the top of your chapter media by creating composite media elements in the mediaPlaylist definition in the config.xml file. This means that you could either loop an ambient soundtrack over the entire presentation while individual soundtracks play with the chapters, or else omit the ambient soundtrack altogether and supplement each chapter with a supporting soundtrack.

Composite media elements allow you to play two or more media elements at the same time or sequentially. Check out the Working with OSMF section of the article, "Using the Flash OSMF Media Player template," for more information.

Set up your media files

The media files are the chapter content that appears in the media display area when a chapter is selected. In most cases, the media files will be video files. However, I'll refer to them as media because they could also be SWF files, image files, or a combination of content types.

Whatever the media format happens to be, your goal is to create an external file sized to fit the display area of the template. The easiest option is to resize the media to the default size of the template (800 x 450 pixels) but you can also modify the layout of the template to match your media size, if needed.

Follow these steps to gather the media files:

1. Open the full-resolution version of your media file in the editor of your choice (such as Adobe Media Encoder for video files, Adobe Photoshop or Adobe Fireworks for image files, Adobe Flash Professional for SWF files, and so on).
2. Resize the media file to match the target size of the template display area. (The default size of display area is 800 × 450 pixels.)
3. Publish the media file to a compressed format.
4. Add the file to the media folder inside the project's assets folder.
5. Write down the filename of the media file so that you can add it to the config.xml file later.

Tip: Be sure to save the media source files in the project folder so that you can easily find and edit them, if needed, in the future after the project is completed.

Set up your thumbnails

The thumbnails also utilize the MediaDisplay component and therefore can display video, image, or SWF content. The process for creating the thumbnails is the same as the media elements, except that you need to target the default thumbnail size of 110 × 62 pixels.

Follow these steps to gather the thumbnail files:

1. Resize and publish your thumbnail file to a compressed format. (The default size of thumbnail area is 110 × 62 pixels.)
2. Add the file to the thumbnails folder inside the project's asset folder.
3. Write down the filename of the image file so that you can add it to the config.xml file later.

Tip: If you're making video thumbnails, it's best to limit the length of the video to a couple of seconds. A short burst of video playback looks good and performs well.

Set up your detail content

The detail content is a SWF or image file that appears as an overlay layer above the media area when the media area is clicked. When a user clicks this area, the media pauses while a related detail element pops up and transitions into view. You can use this feature to add text, links, animations, or any content you prefer to expand upon the chapter's theme.

To recreate the design of the sample files, use the provided DetailsTemplate.fla file in the _source folder. This file provides a simple preloader along with a background transition animation. You can add your content to frame 5 of the content layer or build the content into the file as needed.

Follow these steps to customize the DetailsTemplate.fla file:

1. Open the DetailsTemplate.fla file in Flash Professional.
2. Choose File > Save As to save the template in the _source folder. Name the file as desired.
3. Select the keyframe on frame 5 of the content layer on the main Timeline and then add your text, image, and link content. You can also extend the Timeline and add animations or any other content, as desired.
4. Make sure the file dimensions match the dimensions of the media display area, and then publish the SWF file.
5. Add the file to the details folder inside the project's assets folder.
6. Write down the filename of the SWF file so that you can add it to the config.xml file later.
7. Save your FLA file.

Follow these steps to create a detail content file from scratch:

1. Create a SWF or image file sized to the media display area. (The default size of display area is 800 × 450 pixels.)
2. Add the file to the details folder inside the project's asset folder.
3. Write down the filename of the file so that you can add it to the config.xml file later.

Tip: This feature is optional. You can omit the detail content URL in a chapter definition to turn it off. Doing so eliminates the call-to-action part of the caption bar.

Update the config.xml file

Once you map out your chapters and create the content for your project, you're ready to update the config.xml settings file to match. The config file is a simple text file that describes the template parameters and a list of chapters in XML markup format.

The config.xml file uses the following format to define the content:

Notice that the markup example above begins by setting three parameters: autoPlay, loop, and callToActionURL. The autoPlay and loop parameters determine whether or not the chapters auto-play and loop when the playback reaches the last chapter. The callToActionURL defines the link that launches from the call-to-action button in the lower right of the screen.

After setting the three general parameters, the markup defines the audio soundtrack parameters. If you omit the soundtrack value, the feature is automatically disabled.

After the three soundtrack parameters, the markup defines a list of chapter nodes which supply all the media information to the template.

Follow these steps to update the config.xml file:

1. Locate the config.xml file in the assets folder. Open it in Adobe Dreamweaver or another text editor.
2. Change the autoPlay value to false if you want to turn off the auto-play feature.
3. Change the loop feature to false if you want to turn off the loop feature.
4. Add the path to your soundtrack file or omit the value to turn the feature off.
5. Update the chapter nodes with your text and content URLs. After editing, you'll have as many chapter nodes as intended chapters:
• caption (text)
• thumbnail (URL)
• mediaPlaylist (XML/URL)
• details (URL)
• callToAction (text)
6. Save the file.

For more information on which media formats are supported by OSMF, how you can configure the mediaPlaylist parameter with composite media, and options for formatting the media playlist, see Working with OSMF.

To get details on preparing video content, check out the Video Learning Guide for Flash.

Check out Video project: Planning is everything by Matt Snow if you're interested in how the marketing department planned the content for the original Engage with Flash microsite.

The template includes the branding used in the Engage with Flash marketing presentation. You can use the default graphic theme or modify the template to fit your own needs.

This section provides an overview of the instructions you'll use to modify the look and layout of the template.

Changing the look and feel

The simplest way to modify the template theme is to change the background graphics, color theme, and font style. You can do this by editing the MediaPresoWithDetails.fla file.

Follow these steps to change the background graphics:

1. Open the MediaPresoWithDetails.fla file in Flash Professional.
2. Lock all of the layers except for the background layer.
3. To retain the look of the line art against the background color, change the color of the background by changing the Stage color in the Properties inspector.
4. To add your own background graphics, delete the line art on the background layer and then add your own graphics and branding as desired.
5. Save the file.

Follow these steps to update the embedded fonts and text styles:

1. In the FLA file, select each text field and change its styles in the Property inspector as desired. As you change the text styles, click on the Embed button in the Property inspector to confirm that you are embedding Basic Latin, or some other intended character range.
2. The following template items contain a text field:
• Title
• BackButton symbol
• CaptionBar symbol
• Thumbnail symbol
• CallToActionButton symbol
3. Save the file.

Tip: You'll see Font symbols appear in the Library for every new font style that you embed. Delete any Font symbols that you decide not to use because they can add file size to the published SWF file. In Flash Professional CS5, you can manage the list of embedded fonts by choosing Text > Font Embedding from the main menu.

Follow these steps to update the title and call to action button text:

1. To change the title field content, unlock the title layer on the main Timeline. Double-click the text field to switch to the Text tool and then edit the text content as desired.
2. To change the call-to-action button text in the lower right of the screen, unlock the controls layer and double-click the button instance on the Stage, or double-click the CallToActionButton symbol in the Library to enter its timeline. Edit the text on the up frame and the over frame.
3. Save the file.

Follow these steps to edit the control graphics:

1. The easiest way to edit the graphics for the buttons, seek bar, caption bar, and other controls is to work your way through the Library and edit the graphic elements that exist in the folders.
2. To edit the control bar's buttons, caption bar, and seek bar, open the Assets/Media Player (OSMF)/controls folder in the Library and double-click each control to enter its timeline. You can change the color theme of the background graphics or experiment with more dramatic changes. Note that most of the graphics to edit are located in the controls/_skins folder.
3. To edit the border line that appears above the media display area, open the Assets/Media Player (OSMF)/overlays folder in the Library and edit the background graphic in the DetailsScreen symbol.
4. To edit the thumbnail border, highlight, and forward and back arrow buttons, open the Assets/User Interface/thumbnails folder in the Library and edit the symbols as needed.
5. Save the file.

The ActionScript in the ControlBar component expects that the controls appear on the screen in the default design of the template. In other words, the buttons are located at the top-right region of the media display area and the seek bar is located along the bottom. For best results, try to keep this layout in mind as you make edits. If you change the layout and update the size of the controls, you'll also need to update the code in the ControlBar (com/devnet/osmf/application/ControlBar.as) class to handle the sizing of the alternate layout you create.

Note: You can seek using the scrub bar by clicking along the timeline. Dragging to scrub is disabled in this version due to a bug related to seeking in the current version of OSMF.

Adjusting component parameters

You can adjust the component parameters of the MediaDisplay and ControlBar components to add detail-level customization to the template.

Follow these steps to explore the MediaDisplay component parameters:

1. Return to the main Timeline and lock all layers except for the media player layer.
2. Click the media display area to select the MediaDisplay component. Notice that the component parameters appear in the Property inspector (see Figure 4).

3. In most cases, leave these parameters at their default settings for this template. But you can experiment with changing the layout properties, volume, and other settings as desired.
4. Save the file.

Tip: Be sure to leave the configFile and source fields empty. The MediaDisplay component has the ability to load its content from these parameter settings, but the template for this project provides the media settings via ActionScript at runtime.

Follow these steps to customize the ControlBar component:

1. On the main Timeline, lock all of the layers except for the control bar layer.
2. Click the media display area to select the ControlBar component. Notice that the component parameters appear in the Property inspector (see Figure 5).

3. If you are working with HD video, set the hdHeight and hdWidth parameters to match the size of your HD video source at 100%. Doing so enables hardware acceleration during full-screen mode.
4. Deselect the seekEnabled check box if you're working with a progressive video and its encoding produces undesirable seek results. When you disable seeking, the seek bar switches to a progress bar.
5. Set up the AddThis share menu by defining the number of columns, display state style, and URL to share. These parameters are optional, but be sure to enter a value in the shareUrl field if you leave the Share button control enabled.
6. Choose which predefined control to display by selecting the corresponding check boxes to enable them. The control bar automatically lays itself out and adjusts the interface based on your settings.
7. Save the file.

For more information on using the AddThis share menu widget, visit the Flash Example Implementations help page on AddThis.com.

Changing the size of the media display area and thumbnails

Many of the elements of the template determine their size by matching the size of the media display area. If you need to change the size of the media area from 800 × 450 to a different dimension, you can do that by updating the MediaDisplay component, the ControlBar component, and the Stage assets.

Follow these steps to resize the MediaDisplay component:

1. Return to the main Timeline and lock all of the layers except for the media player layer.
2. Click the media display area to select the MediaDisplay component.
3. In the Property inspector, enter the width and height to resize the component.
4. Save the file.

Follow these steps to resize the ControlBar component:

1. The control bar sizes itself to the media area at runtime, but if you resized the dimensions of the MediaDisplay component as described in the previous set of steps, it's helpful to update the layout so that the interface looks right in the authoring environment.
2. Lock all layers on the main Timeline except for the control bar layer.
3. Click the media display area to select the ControlBar component. Then double-click the instance to enter its Timeline.
4. Lock all of the layers except for the details overlay layer. Double-click the media display area to enter the DetailsScreen timeline. Set the size of the background rectangle to the new media area size and position the back button and caption bar so that they are located where you want them to appear.
5. Return to the ControlBar timeline, lock all of the layers except the seekbar layer, and double-click the seek bar to enter its timeline. Resize the background track graphic to match the new width of the media.
6. Return to the ControlBar timeline and unlock all the layers. Position the four buttons at the top right of the media area so that they are aligned properly within the new media size.
7. Save the file.

Tip: When editing the graphics, take care that you don't accidentally delete any of the instance names applied to the symbols. The ActionScript code references the instance names of the control elements and the project will display errors if the instance names are deleted.

The thumbnail view is generated dynamically in the ThumbnailScroller class. You can edit the size of the thumbnails by editing the Thumbnail symbol in the Library. You can also edit the size of the thumbnail view mask area and the number of thumbnails which appear on the screen by editing the ThumbnailScroller ActionScript code.

Follow these steps to resize the thumbnails:

1. Double-click the Thumbnail symbol in the Library to enter its timeline.
2. Click the rectangle on the border layer to select it, and then set its new width and height in the Property inspector.
3. Lock the border layer.
4. Click the border area to select the MediaDisplay component instance, and then set its new width and height in the Property inspector.
5. Position the caption text field as needed.
6. Save the file.

Follow these steps to update the code in the ThumbnailScroller class:

1. Open the ThumbnailsScroller class (com/devnet/osmf/controls/ThumbnailScroller.as) in Flash Professional, Flash Builder, or another text editor of your choice.
2. Take a look at the variable definitions located between lines 42–46. You can update these values so that the dynamically created thumbnail area fits with the new size of the thumbnails.
3. Set the _thumbOffset value to the width of the thumbnail plus five pixels for a margin. For example, if the thumbnail width is 80, set the offset value to 85.
4. Set the _thumbIndexMax value to the number of thumbnails to display minus 1. For example, if you want to display seven thumbnails, set the maximum index value to 6.
5. Set the _thumbAreaWidth value to the _thumbOffset times the number of thumbnails to display. This value sets the mask area for the viewable thumbnails. For example, if the offset is 85 and there are seven thumbnails, the area width should be set to 595.
6. Set the _thumbAreaHeight value to the height of the thumbnail plus 50 pixels to account for the caption field.
7. Save the file.

Tip: When determining your custom thumbnail size, you may want to start with the width of the media area divided by the number of viewable thumbnails. Subtract the value of the margin displayed between thumbnails from that value to arrive at the thumbnail width size.

From here you can change the Stage size and position the elements on the main Timeline as needed.

As you've followed along with the earlier sections of this article, you've probably published your SWF file and checked your work to make sure that the elements are positioned as desired. At this point, if you added your content and updated the config.xml file, you're ready to test the project to ensure that everything is working.

Testing your work

You can test your work by publishing the SWF file in the Flash Professional workspace or you can publish the SWF file and view the related HTML page in a browser. Even though you've been publishing the SWF file while authoring the project, it's important to test the project online in a browser window before beginning the final deployment of the files.

Follow these steps to test your work while authoring:

1. While the MediaPresoWithDetails.fla file is open in Flash, choose Control > Test Movie from the main menu.
2. The stand-alone Flash Player opens and the SWF file is displayed above the FLA file.
3. After viewing it, close the SWF file to return to editing the FLA file in Flash.

Follow these steps to publish your work:

1. While the FLA file is open in Flash Professional, choose File > Publish.
2. The FLA is set to publish just the SWF file to the directory above the _source folder.
3. Open the project folder and then open the MediaPresoWithDetails.html file in a browser.
4. Check your work. If everything looks good, upload the files online to a private directory and test the media player to make sure the media downloads as expected.

Tip: Some versions of Flash Player 10 may display errors while viewing content containing the OSMF and Text Layout Framework. If you can view your work successfully while authoring in Flash, but can't view the work in your browser, try updating your version of Flash Player to the latest version.

Problem-solving

Hopefully the steps in this article will help you to navigate the template successfully. However, problems do arise from time to time and problem-solving is part of the development process.

The following list describes possible issues that may occur:

1. Double-check that the config.xml file is well formatted after editing it. It's easy to accidentally remove a closing tag or add an extra character. You can check your work by viewing the XML file in a browser. The browser will point to the line number of the error if it discovers any issues.
2. Verify that the paths to your media files match the URLs you entered in the config.xml file. If the file path is incorrect in the config file, the media won't load and the presentation may not play back as expected.
3. Be sure that your chapter mediaPlaylist parameters are configured correctly in the config.xml file. See Working with OSMF for more details.
4. Check that the FLA files are located next to the com and libs folders in the _source folder. The com and libs folders contain the ActionScript that the template uses the code in these files to function. If the FLA files relocated, they will not work.
5. If you encounter a Flash Player security warning while testing the files locally, update the Flash Player global security settings as described at the beginning of this article.

Tip: If you run into problems and can't determine what is wrong, remember to compare your edited files with the working examples in the provided sample files.

Deploying the published files

When you're ready to deploy your work to your server, upload all the files in the project folder except the files located in the _source folder. Be sure to save the _source folder so that you can return to it in the future if you need to make additional edits.

Refer to the following resources to learn more about some of the concepts covered in this tutorial, or to build upon the skills you learned here:

• Using the Flash OSMF media player template (Dan Carr)
• Open Source Media Framework: Introduction and overview (Greg Hamer)
• Building streaming video players in Flash with Open Source Media Framework (R Blank)
• Mastering OSMF – Part 1: Working with the Flash Platform (David Hassoun and John Crosby)