Home / Design Center / Tutorials

Creating a video application with components

Lee Brimelow

This video shows you how to create an application using video components in Flash. You create and customize a play bar (control buttons) for a simple video player. Then, you learn how to write ActionScript 3.0 code to add simple functionality to the application.

Requirements

To follow along with this article, you will need the following software and files:

• Flash CS3 Professional
• Sample file (ZIP, 0.1 MB)

Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Creating a video application with components

1. In Flash, choose File > Open and open the video.fla file. This is an ActionScript 3.0 video with two layers in the main timeline: the actions layer, which will hold the ActionScript, and an empty content layer, which will hold the player components.
2. Select the content layer.

3. Choose Window > Components to open the Components panel. Expand the Video folder and select the FLVPlayback component (see Figure 1).

   

   Figure 1: Player components can be found in the Video section of the Components panel.

4. Drag the component onto the Stage. A black placeholder image appears when you release your mouse button.

   Components, as well as symbols or any other object targeted in ActionScript, must be given an instance name.

5. Make sure the Property inspector is open. If not, choose Window > Properties > Properties to open it. Go to the inspector and type theVideo in the Instance Name text box for this component.

   Now you need to let the component know which FLV file you'd like it to play.

6. Make sure the Parameters panel is open. If not, choose Window > Properties > Parameters to open it. Choose the Parameters panel and click the Search icon next to the Source field. This opens the Content Path dialog box (see Figure 2).

   

   Figure 2: Use the Content Path dialog box to browse to files.

7. Click the folder icon to browse to your hard drive for the FLV file. Choose the bikes.flv file, and click Open.
8. Click OK to close the Content Path dialog box. The FLV component resizes itself based on the dimensions of the source video.
9. To remove the default player skin so that you can add custom buttons and controls to the player, click the Search button next to the Skin field. Choose None from the Select Skin dialog box, and click OK.
10. Now choose the Components panel. Notice that the Video folder contains controls that are standard to most video players. You can pick and choose from these controls to restrict or extend the user's playback abilities.
11. Drag the PlayPauseButton component onto the Stage below the Playback component, and align it with the left edge of the video.
12. Drag the SeekBar component (also known as a scrubber) onto the Stage next to the PlayPauseButton.

13. Drag the MuteButton onto the Stage next to the Seek bar. The Mmute button is a toggle that lets the user mute the video sound (see Figure 3).

    

    Figure 3: Drag custom player components to the Stage below the Playback window.

    Now that the key components are on the Stage, you can start resizing them, adding background graphics, and otherwise customize the appearance of your player. You'll practice aligning and scaling the components.

14. Select the seek bar. Right-click (Windows) or Control-click (Mac OS) and choose Free Transform from the pop-up menu.
15. Hold down the Alt (Windows) or Option (Mac OS) key, and drag the right edge of the seek bar so that it fills the space between the play/pause and mute buttons.

16. Hold down the Shift key and select all three of the controls. Choose Window > Align to open the Align panel; then click the Align Vertical Center button.

    The controls look right, but they won't work properly until you connect them to the video using ActionScript. First things first: if you're using ActionScript with components, you must first assign them instance names.

17. Select the play/pause button and choose the Property inspector. Type player in the Instance Name text box.
18. Select the seek bar and type seeker.

19. Select the mute button and type muter.

    Now you're ready to write the ActionScript.

20. Select the first keyframe in the Actions layer and then press F9 or choose Window > Actions to open the Actions panel.

    Connecting the controls to the playback component is pretty simple: you just set properties of the playback component to the instance names of the custom controls.

21. Insert your pointer in the first line in the Actions panel, and type the following (see Figure 4):

    theVideo.playPauseButton = player;
    theVideo.seekBar = seeker;
    theVideo.muteButton = muter;

    

    Figure 4: The Actions panel

22. Press Ctrl+Enter (Windows) or Command+Return (Mac OS) to test the movie. The video starts playing automatically and the Seek bar should scroll as the video progresses (see Figure 5). Press the Play/Pause button to start and stop playback. The bikes.flv file doesn't have any audio, but if it did, the Mute button would start and stop the sound.

    

    Figure 5: The test movie exports the video and the custom components to a new window.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.