What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

 How to Build Video Player in Flash

Tutorial: Building a Video Player (Flash Professional only)

Review your task

Examine the completed application

Create a working folder

Encode a video file

Create a new Flash document

Add a media component

Publish your document

The next steps

 

Tutorial: Building a Video Player (Flash Professional only)

TOP

This tutoral guides you through the process of creating a simple video player by using some of the authoring features in Macromedia Flash Basic 8 and Flash Professional 8. After it is created, you can deploy the video player in a web page.
If you have not already done so, Macromedia recommends that before you take this tutorial you read Flash basics.
 

 

Review your task

#TOP

In this tutorial, you will create a type of application known as a flexible messaging area, or FMA. An FMA is a common type of Flash application used for displaying content that conveys some kind of informational or marketing message to the audience. In this case, the FMA displays photographs of items from the restaurant menu. At Macromedia's website, an FMA is used to display information about new software products and other advertising messages. These are called flexible messaging areas because they usually occupy an area of the web page that is set aside for content that can change depending on the needs of the business or website. For example, if Café Townsend has a special event planned, the FMA could change to display the details of that event instead of the restaurant's menu items.


In this tutorial, after examining an existing Flash document, you'll begin by creating a new Flash document and end by publishing the application for web playback. The tutorial should take approximately 20 to 30 minutes to complete.

 

Examine the completed application

TOP

As you examine the finished version of the application you'll create, you will also gain some familiarity with the Flash workspace. As you examine the finished version of an application you'll create, you will also look at the Flash workspace.


In subsequent sections you'll follow the steps to create the application yourself.


Run the completed application


To better understand the type of application you'll create as you work through this tutorial, you can look at a completed FLA file version of the application in the Flash authoring tool. FLA files are the files you work on in Flash. You can also play the SWF version of the file in Flash Player. The SWF version is the version of the file that you would publish in a web page.


To play the SWF version of the file in Flash Player:

  1. In Flash, select File > Open.

  2. Use one of the following paths to browse to the completed file:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\cafe_townsend\completed files\flash and double-click video_pod_finished.swf.

    • On the Macintosh, browse to the Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/cafe_townsend/completed_files/flash and double-click video_pod_finished.swf.

  3. The completed application runs in Flash Player. Click the playback controls at the bottom of the window to watch the video.

  4. After viewing the application, close the Flash Player window.


Open the authoring document


It's helpful to look at the completed authoring FLA file to see how the author designed the application.


To view the authoring version of the file in Flash:

  1. In Flash, select File > Open.

  2. Browse to the authoring document using one of the following paths:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\cafe_townsend\completed files\flash and double-click video_pod_finished.fla.

    • On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/cafe_townsend/completed_files/flash and double-click video_pod_finished.fla.

    You now see the completed tutorial application in the Flash authoring environment.

  3. After you have the file open, you can explore the Stage, Library panel, and the Timeline.

    • On the Stage you will see a FLVPlayback component, which you will learn more about later in this tutorial.

    • In the Library panel, you will see a list of symbols, or reusable assets, that the document uses.

    • In the Timeline, you will see a representation of how and when those symbols appear on the Stage.

     

Create a working folder

TOP

Before you begin, you must create a working folder that includes the sample files used in the tutorials in this guide, Getting Started with Flash. This task consists of creating the working folder on your hard disk and copying the sample files from the Flash application folder to the working folder.

  1. Create a new folder called local_sites somewhere on your hard disk. For example, create a folder called local_sites in either of the following locations:

    • (Windows) C:\Documents and Settings\your_user_name\ My Documents\local_sites

    • (Macintosh) Hard Disk/Users/your_user_name/Documents/local_sites

    NOTE On the Macintosh, a folder called Sites is already in your user folder. Don't use that Sites folder as your local folder; the Sites folder is where you place your pages to make them publicly accessible when you're using the Macintosh as a web server.

  2. Locate the cafe_townsend folder in the Flash application folder on your hard disk. If you installed Flash to its default location, the path to the folders is as follows:

    • In Windows, C:\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial_assets\cafe_townsend

    • On the Macintosh, Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial_assets/cafe_townsend

  3. Copy the cafe_townsend folder to your local_sites folder.
     

Encode a video file

TOP

The first thing you will do is convert a QuickTime video file (MOV) to a Flash video file (FLV).

To convert the video file:

  1. Start the Flash Video Encoder application.

  2. Drag the cafe_townsend_chef.mov file from the cafe_townsend folder onto the Flash Video Encoder application window.

    The Flash Video Encoder window

  3. Click Settings.

  4. In the Flash Video Encoding Settings dialog box, select Flash 8 - Medium Quality (400kbps) from the Flash Video Encoding Profile menu. This setting is the default.

    This action applies only a small amount of compression to the file.

  5. Click OK to close the Settings dialog box.

  6. Click Start Queue.

    The Flash Video Encoder converts the file and saves it in the same folder as the original cafe_townsend_chef.mov file.

    You are now ready to use the FLV file in a Flash document.

  7. Close the Flash Video Encoder application.

 

Create a new Flash document

TOP

Now that you have seen the finished application you will create, it is time to create your own Flash document.


If you haven't already set up a working folder, you must do so before you begin.


To learn how to create an application in Flash, you'll start with the very first step in the process: creating a new file.


Open a new document


Now you're ready to create your own version of the FMA.


To create a new document:

  1. Start Flash.

  2. Select File > New.

  3. In the New Document dialog box, select Flash Document and then click OK.

  4. Select File > Save.

  5. Name the file video_pod.fla and save the file in the cafe_townsend folder you copied to your hard disk.


NOTE As you complete the tutorial, remember to save your work frequently.


Define document properties


Configuring document properties is a common first step in authoring. You can change the document properties at any time, but it is helpful to make certain decisions, such as the Stage size and background color, at the beginning of the process.


Document properties are properties that affect the entire Flash document. You can use the Property inspector to specify these settings.


To define document properties:

  1. If the Property inspector isn't open, select Window > Properties > Properties.

    NOTE If the Property inspector is not fully expanded, click the white triangle in the lower-right corner.

  2. In the Property inspector, click Size.

  3. In the Document Properties dialog box, enter the following values:

    • Width: 360

    • Height: 240

  4. Click OK.

  5. Save your work.

 

Add a media component

TOP

Next, you will add a media playback component to the Stage. This component will contain the video display and provide playback controls.


ABOUT... About components Components in Flash are prebuilt objects that you can use in your own Flash documents. Most components are user interface elements such as buttons, menus, and so on. Some are not meant to be seen on the Stage and are used instead to perform data-handling functions. By using a component, you can avoid the need to build complex user interface elements yourself. Components are implemented in Flash as movie clips with their own internal ActionScript code.


You use the Components panel to set the properties of the component. This tells Flash how you want the component to behave. For the FLVPlayback component, you will tell Flash the location of the FLV file you want to play, and how you want the playback controls to appear.


To add a media component:

  1. Select Window > Components to open the Components panel.

  2. In the Components panel, click the plus sign (+) next to the FLV Playback - Player 8 category.

  3. Drag an FLVPlayback component to the Stage.

    The new component remains selected on the Stage by default.

  4. With the new component still selected on the Stage, enter the following values in the Property inspector:

    • W: 360

    • H: 240

    • X: 0

    • Y: 0

    This makes the component the same size as the Stage and centers it on the Stage.

    The Property inspector with the proper values entered

  5. With the new component still selected on the Stage, select Window > Component Inspector to open the Component inspector.

  6. In the Component inspector's Parameters tab, click the contentPath parameter.

  7. Click the magnifying glass icon that appears next to it.

  8. In the Content Path dialog box, enter cafe_townsend_chef.flv and click OK.

  9. Still in the Component inspector, set the autoRewind parameter to false.

  10. Save your work.

  11. To test your document, select Control >Test Movie.

    The document plays in the Test Movie window. You can control the playback of the video file with the controls at the bottom of the Stage.


 

Publish your document

TOP

The next step is to publish your FLA file as a SWF file that can be displayed in a web browser.

To publish your Flash document:

  1. Select File > Publish.

    Flash saves a SWF version of your file and a simple HTML file in the cafe_townsend folder where you saved the video_pod.fla file. Flash also saves a SWF file called ClearOverPlaySeekMute.swf that contains the graphics for the video controller overlay that appears on top of the video. This SWF file must be located in the same folder as the video_pod.swf file in order for the video controls to appear when you play the SWF file.

    You can customize the look of these video controls.

  2. In your web browser, select File > Open.

  3. Navigate to the cafe_townsend folder and open the video_pod.html file.

    The HTML file opens in the web browser and displays your Flash document.

     

The next steps

TOP

Now that you have completed the Flash video player, you would normally insert the SWF file into a real-world web page.

This illustration demonstrates what a web page containing the video_pod.swf file might look like.



The video_pod.swf file inserted in a web page

 

 

Copyright © ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash