Accessibility

Flash Article

 

Flash video template: Video presentation with navigation


Dan Carr

Dan Carr

Dan Carr Design

Table of Contents

Created:
17 March 2008
User Level:
Beginner, Intermediate
Products:
Flash

This Flash template is great for basic video presentations—situations when you want the user to see the main topics of a video and be able to navigate quickly to them. It does not contain some of the more sophisticated features, such as synchronizing content on the screen with the video playback, as described in my other tutorial, Spokesperson presentation with synchronized graphics. However, you should have little trouble modifying this template to work well for your own purposes.

The Flash video template provided with this article provides you with the basis of a navigational system for user-initiated playback of video clips (see Figure 1). Before beginning this tutorial, preview the online example of the Flash video template to explore how it works.

User interface of the Flash video presentation template

Figure 1. User interface of the Flash video presentation template

This is the third version of the Flash video template. Although the video dates from the Macromedia days, this article has been updated to work with the new Adobe Flash CS3 Professional FLVPlayback component and ActionScript 3.0. The updated template is built on a standard Timeline in Flash and has been simplified for easier editing and customization. The template features a video with playback controls, as well as navigation buttons, which allow the user to jump to specific topics within the video.

Consider applying the following special touches to bring this presentation to life in your company:

  • Add your own video, resize it, and then position it anywhere on the page
  • Add your company graphics and colors to any part of the presentation, including the background
  • Update the text, graphics, or colors of the buttons
  • Move the navigation bar to the top, or to either side—anywhere you like

You can easily change this template to fit your needs.

This article describes how to modify all the basic characteristics so your project looks as desired. For example, you will certainly want to add your own video to this presentation. After swapping the video source, you can update the button text that provides navigation to the presentation. Finally, you can change the color schemes and logos to match your own designs and collateral materials.

Note: If you are still using Flash Professional 8, please see the previous version of this article.

Requirements

To complete this tutorial you will need to install the following software and files:

Flash CS3 Professional

Sample files:

Prerequisite knowledge

This article is geared towards beginning Flash users and developers who are interested in working with a simple video navigation template. While programming experience is not necessary to understand the tutorial, you may find it beneficial to review the Flash Video Learning Guide.

About the author

Dan Carr is owner, lead developer, and trainer for Dan Carr Design in San Francisco. With years of history 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 San Francisco and develops e-learning and web applications for the public, as well as for Adobe product teams.