25 April 2011
Prior experience with Flash Professional and ActionScript 3 components is recommended. The media player template is designed for beginning-level developers in its default configuration.
Knowledge of ActionScript 3 programming is required for feature customization and working with the advanced features of Open Source Media Framework (OSMF).
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).
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.
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:
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.
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:
The following sections of this article explain the steps listed above in more detail.
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:
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.
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:
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.
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.
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:
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.
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:
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.
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:
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.
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:
Follow these steps to create a detail content file from scratch:
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.
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:
<?xml version="1.0" encoding="utf-8"?> <config> <!-- PARAMETERS LIST --> <autoPlay>true</autoPlay> <loop>true</loop> <callToActionURL>http://www.adobe.com/devnet/flash/</callToActionURL> <!-- SOUNDTRACK --> <soundtrack>assets/soundtrack/EngageWithFlashSoundtrack.mp3</soundtrack> <soundtrackLoop>true</soundtrackLoop> <soundtrackVolume>1</soundtrackVolume> <!-- CHAPTERS LIST --> <chapters> <!-- Chapter 1: Russian River --> <chapter> <caption><![CDATA[Russian River / Guerneville / Monti Rio]]></caption> <thumbnail>assets/thumbnails/chapter1_thumb.flv</thumbnail> <mediaPlaylist> <media layout="serial"> <source>assets/video/chapter1.flv</source> </media> </mediaPlaylist> <details>assets/details/chapter1_details.swf</details> <callToAction><![CDATA[READ MORE]]></callToAction> </chapter> </chapters> </config>
Notice that the markup example above begins by setting three parameters:
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:
falseif you want to turn off the auto-play feature.
falseif you want to turn off the loop feature.
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.
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:
Follow these steps to update the embedded fonts and text styles:
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:
Follow these steps to edit the control graphics:
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.
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:
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:
For more information on using the AddThis share menu widget, visit the Flash Example Implementations help page on AddThis.com.
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:
Follow these steps to resize the ControlBar component:
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:
Follow these steps to update the code in the ThumbnailScroller class:
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.
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:
Follow these steps to publish your work:
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.
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:
mediaPlaylistparameters are configured correctly in the config.xml file. See Working with OSMF for more details.
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.
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:
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.