Accessibility
Dan Carr

Dan Carr

Dan Carr Design

Table of Contents

  1. Introduction
  2. Understanding the project layout
  3. Adding video, playback controls, and cue points
  4. Making changes to the navigation buttons
  5. Adding text, graphics, and animations
  6. Working with streaming video
Created:
3 March 2008
User Level:
Intermediate
Products:
Flash

Flash video template: Spokesperson presentation with synchronized graphics

Synchronizing text with a video presentation is a great way to bring a corporate-type presentation to life on the web. Compared to standard static slide shows, this simple-looking presentation captivates audiences because it combines audio, video, and animation. The template features video, labeled content keyframes that synchronize text and graphics to the video, and navigation buttons along the bottom. While the video plays, the labeled keyframes appear at preset times and the navigation buttons highlight the relevant topic. When the user clicks one of the buttons, the video and content update themselves to that topic automatically.

Preview the synchronized text/video presentation template

Preview the synchronized text/video presentation template

Here are some examples of how you can jazz up this presentation for your needs:

  • Add your own video, resize it, and position it anywhere on the page
  • Add company graphics and colors to any part of the presentation, including the background
  • Add buttons, text, and so on to the navigation bar at the bottom
  • Move the navigation bar to the top or the sides
  • Add your own text and graphics that appear synchronized with your video
  • Add FLVPlayback UI components for customizable video controls

This article provides an overview of the template structure and process required to transform the supplied file into a customized presentation suited for your own needs. The article and the supplied files are an ActionScript 3.0 update to the previous Flash Professional 8 version of the article.

Updated features include the following:

  • ActionScript 3.0 source file and ActionScript 3.0 code syntax
  • ActionScript 3.0 FLVPlayback component
  • Full-screen button and full-screen mode
  • Timeline-based synchronization method
  • Updated user interface graphics

If you are using Flash Professional 8 or an ActionScript 2.0 file in Flash CS3 Professional, please see the previous version of this article.

Requirements

To make this most of this tutorial, you need to install the following software and files:

Flash CS3 Professional

Flash Media Server 3

Note: Although it is optional for this tutorial, Flash Media Server enables you to use streaming video downloads instead of progressive video downloads. For more information, see the "Working with streaming video" section of this article.

Flash Player 9 (ActionScript 3.0 files require Flash Player 9)

Sample files:

Prerequisite knowledge

This article is geared towards beginning Flash users and developers who are interested in getting up to speed on video synchronization techniques. While programming experience is not necessary to understand the article, you may find it beneficial to review the Flash Video Learning Guide.

Page 1 of 6
Next Page

About the author

Dan Carr is owner, lead developer, and trainer for Dan Carr Design in San Francisco. With years of experience developing for Macromedia and Adobe, Dan has created a range of features available in Flash, including e-learning templates, UI components, and Developer Resource Kit extensions. Dan teaches Flash design and ActionScript classes in Northern California and develops e-learning and web applications for the public, as well as for Adobe product teams.