Home / Articles / Adobe Flash / Create Custom Media Player Controls in Flash Catalyst CS5

Create Custom Media Player Controls in Flash Catalyst CS5

Article Description

David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, demonstrates an easy way to create video player controls, without the need for Flash or scripting of any kind. You can adapt the simple shapes available in Flash Catalyst, providing them with the power of interaction to make them serve as play, pause, and stop player buttons.
Embedding Media in Catalyst

Embedding Media in Catalyst

There are two basic elements of custom-player video (or audio): the media itself and the controls. The first part of the process of creating a custom player is embedding the media into a Flash Catalyst project. To do that, follow these steps:

  1. Create a new Flash Catalyst project. From the splash screen, click Adobe Flash Catalyst Project. If you already have another Flash Catalyst file open, choose File > New Project.
  2. In the New Project dialog, enter player in the Name box, and leave the default settings of 800 pixels (Width) by 600 pixels (Height). Change the background color to brown (see Figure 1).
  3. Figure 1 Defining the new project.

  4. Click OK in the New Project dialog to generate the new Catalyst project.
  5. Choose File > Import > Video/Sound File. In the Import dialog, navigate to an FLV or FV4 video (or an MP3 audio file), and click Open. The video file (or a player for the audio file) appears on the Catalyst artboard. Click and drag to position the video (or audio player) where you want it.
  6. In the Properties panel for the selected video, expand the Common category and examine the options, including the self-explanatory Auto Play, Loop, and Muted checkboxes. (Don't check any of these options.) In the Accessible Text box, enter a description to be displayed in environments that don't support Flash. For example, in Figure 2 I've entered the accessible text Video, which will display in devices that don't support Flash. This message indicates to the visitor that a video goes there, even if it isn't playable in the user's browsing environment.
  7. By default, two sets of prefab controls are available in the Video Controls list: Wireframe or Standard. Since we'll be defining custom video controls, select None.

    Figure 2 Select None for preset video controls.

Feel free to experiment with other video properties, but the default settings work fine for purposes of this article. Our video is now embedded, but stripped of any player controls. We'll create those next.

3. Defining Custom Player Controls | Next Section Previous Section