Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Modifying the Buttons and Video Controls

Modifying the Buttons and Video Controls

The navigation buttons appearing along the left side of the video display are a key feature of the template. These buttons enable users to jump to predefined sections (topics) within the video. The navigation buttons label each section of the video and enable users to understand the content of the movie and how to seek to any topic desired. In this next section of the article, you’ll learn how to do the following:

  • Understand the relationship between cue points and the navigation buttons
  • Add, remove, and change navigation buttons
  • Change FLV custom playback controls

Cue Points and Navigation Buttons

Before you jump into editing the navigation buttons, it’s important to understand what is happening with the video component that makes this all work. The big picture is that you can assign sections in each FLV file that can be used for navigation and synchronization. These sections are called cue points. You can add them to the video when it is initially encoded to the FLV format, by using the cuePoints field in the FLVPlayback parameters, or by using ActionScript while the SWF file plays. For this demonstration, I will explore adding and removing cue points using the Flash Video Cue Points dialog box (see Figure 6).

Flash Video Cue Points dialog box launched from the cuePoints field in the FLVPlayback component parameters

Figure 6. Flash Video Cue Points dialog box launched from the cuePoints field in the FLVPlayback component parameters

As you can see, named cue points can be added to each video to create sections within the video. Cue points have an associated time within the video and may also contain other data that can be referenced as cue points are encountered along the video Timeline.

To change, add, or remove cue points, follow these steps:

  1. Select the video component on the Stage by clicking the Flash video icon. Open the Component Inspector (Window > Component Inspector) if it’s not already open.
  2. Click the cuePoints parameter once to select it and then click it again to launch the Flash Video Cue Points dialog box.
  3. To change one of the existing fields, simply type your own cue point name and time into one of the five supplied fields. Note that there is a pattern you will use with the cue point name and the name of the navigation button that corresponds to it. If you change the names, which you most likely will, be sure to write down the new names so you can update the button instance names later.
  4. To remove a cue point, select the desired field and click the minus (–) button in the dialog box. You should see the cue point disappear from the list there.
  5. To add a cue point, click the plus (+) button. Notice that a new field appears at the top of the list. Enter a name and a time. The new cue point is added to the list in chronological order.

That’s it. After you add your own video to the FLVPlayback component, you will adjust the cue points to match the sections of your video. You can use as many or as few cue points as you want. From there, you will update the navigation buttons to match the cue point entries.

Note: Embedding navigation cue points during encoding is more accurate than using the Flash Video Cue Points dialog box. If you are having problems with the accuracy of seeking to exact cue point times, consider encoding the video and cue points together using the Flash 8 Video Encoder instead.

Understanding the Cue Point Name and Button Instance Name Pattern

As you view the template in action, you’ll notice that the down state for each button appears when the video plays past the related cue point. This template uses a naming convention to find the navigation button when a cuePoint event fires from the video component. The Actions layer contains an event handler function which processes cuePoint events.

When an event occurs, the function looks for a button whose instance name matches the cue point name plus the letters “_btn”. If a button exists, it triggers the button to show its down state. For example, if a cue point event named introduction passes through the event handler function, then the button whose instance name is introduction_btn is highlighted with its down state. There’s no need to adjust any of the code. Simply create cue points and name the corresponding buttons with the cue point name plus “_btn”.

Changing the Navigation Button Text

While reviewing the layers in the template, you may have noticed that two layers are set aside for the navigation buttons. The Button Text layer contains the text for each navigation button. The text is simply static text positioned and typeset in any way desired. The Button Symbols layer contains instances of the CueNameButton symbol used to create the button graphics below the text.

To change the text on a navigation button:

  1. Select the Text tool (T) and click in the text block that you want to edit. You should see the text block become highlighted and show the typing cursor.
  2. Edit the text as needed.
  3. To change the text style, select the text block with the Selection tool and edit the text properties in the Property inspector (see Figure 7). You may also edit only a portion of text by selecting it with the Text tool and then changing the settings in the Property inspector.
  4. You can continue by editing, adding, or removing text fields as needed on the Button Text layer. There is nothing functional about the labels. They should simply provide clear labels for the video.

A selected button label during editing

Figure 7. A selected button label during editing

Changing the Navigation Button Graphics

The CueNameButton symbol uses the new Flash 8 scaling feature called Scale 9. This enables the button to be scaled from instance to instance without seeing the effects of distortion common to most scaled movie clips. The template provides a simple button skin with an up, over, and down state that you can customize to fit your needs. You will edit your graphics in the Library and use the scale guides to control how Flash renders your graphics at different sizes (see Figure 8).

Navigation button Timeline; notice the guides marking off the scaling areas of the button

Figure 8. Navigation button Timeline; notice the guides marking off the scaling areas of the button

To edit the up, over, and down button skins, follow these steps:

  1. Open the Library panel if it’s not already open and double-click the CueNameButton symbol to enter its editing mode. The Timeline view should look similar to Figure 8.
  2. Notice that the Timeline has four sections. Each section is marked by a frame label. The init frame loads the up graphic and some ActionScript code located on the Actions layer. The over frame contains the over graphic and the down frame contains the down graphic. During runtime the playhead jumps back and forth to the up, over, and down frames to display the correct button graphics. The up frame is staggered from the init frame so the button code on frame 1 does not reinitialize.
  3. Select the up graphic on the Graphics layer at frame 1. Notice the scale guides which mark the scalable areas of the graphic. Edit the graphic as desired. You can move the guides as needed.
  4. Select the over graphic on the Graphics layer at frame 10. Edit the graphic as needed. Make sure the general size of the graphics is consistent so the scale guides will work for each skin state.
  5. Edit the down graphic at frame 15 in the same way.
  6. When you’re finished, click Scene 1 in the edit bar to return to the main Timeline.

Moving and Resizing Navigation Buttons

You can move and resize the navigation buttons any way you like. If you resize the buttons make sure that you export the SWF file to view the effects of the Scale 9 feature on your button graphics (it can be seen only in the SWF file).

Removing a Navigation Button

To remove a navigation button, simply select the button instance and the text on top of it and delete the two items from the Stage.

Adding a Navigation Button

You have two options when adding a navigation button to your file. You can either drag a new instance of the CueNameButton symbol from the Library to the Stage or copy an existing button.

To add a new navigation button and associated cue point, follow these steps:

  1. Click the Buttons Symbols layer on the main Timeline of the template to select it. You will add your new button instance to this layer.
  2. Open the Library panel if it’s not open already and drag an instance of the CueNameButton symbol to the Stage. The symbol is located in the Video Assets/Controls folder.
  3. Select the new instance on the Stage and drag it into position. Select the Free Transform tool from the tool box and resize the button so it’s large enough to fit the amount of text you want to use. Take a guess at this point. You can touch up the sizing later.
  4. Click the Button Text layer to select it. With the Text tool, type the button label above the button graphic you just added. Position and format the text until it looks right to you.
  5. Add a new cue point to the FLVPlayback component instance. This will be the cue point that the navigation button calls when you click it. For example, add a cue point with the name conclusion (see the earlier section, “Cue Points and Navigation Buttons,” for more information on adding cue points).
  6. Click the new button instance on the Stage to select it. In the Property inspector, assign an instance name to the button using the naming convention described previously on this page (cue point name plus “_btn”). In the case of this example, the instance name should be conclusion_btn (see Figure 9).
  7. Follow the next set of steps to complete the button setup.

New button instance name in the Property inspector; note that conclusion_btn corresponds to the video cue point named conclusion

Figure 9. New button instance name in the Property inspector; note that conclusion_btn corresponds to the video cue point named conclusion

To trigger a cue point change from a new button:

  1. Click the button graphic on the Stage to select it.
  2. Open the Behaviors panel (Window > Behaviors). With the button still selected on the Stage, click the plus button in the Behaviors panel to add a behavior to the button. Choose the Seek to Cue Name behavior from the FLVPlayback Controls category (see Figure 10).

    The nine FLVPlayback behaviors created for these templates

    Figure 10. The nine FLVPlayback behaviors created for these templates

  3. In the dialog box that appears, enter the name of the cue point that a button click is supposed to trigger. In the case of the example above, the name would be conclusion. Before you exit the dialog box, select the FLVPlayback instance name display (see Figure 11).

    Seek to Cue Name dialog box used to enter parameters for the behavior

    Figure 11. Seek to Cue Name dialog box used to enter parameters for the behavior

  4. Click OK to exit the dialog box.

That’s it. Your new navigation button should trigger the video to jump to the corresponding cue point.

Note: The FLVPlayback behaviors need to be installed by running the FLVPlaybackBehav.mxp file. After you install the behaviors, they should appear in the Behaviors panel shown in Figure 10.

Adding and Removing Custom User Interface Controls

The template contains a basic set of video controls, including a play/pause button, stop button, seek bar, volume bar, and mute button. These controls are placed on the FLV Controls layer alongside the FLVPlayback instance. The controls are associated with the FLVPlayback instance using a small amount of ActionScript code on the Actions layer. You can remove any or all of the controls without making other adjustments to the template. If you want to add additional custom user interface components, you will need to name their instances and update the code on the Actions layer to associate them with the video component.

To remove all the user interface controls, follow these steps:

  1. Select all the controls on the FLV Controls layer except for the FLVPlayback component.
  2. Press the Delete button to remove the controls.
  3. Although it’s not mandatory, it would be good form to clean up the code on the Actions layer. Select the keyframe on the first frame of the Actions layer and open the Actions panel (Window > Actions).
  4. In the Actions panel, select and delete the following code:

    //-----------------
    // Video control assignment
    //-----------------
    // Use the skin assignment properties of the FLVPlayback
    // instance to associate the controls with the player.
    display.playPauseButton = play_btn;
    display.stopButton = stop_btn;
    display.seekBar = seek_bar;
    display.volumeBar = volume_bar;
    display.muteButton = mute_btn;

You may add any combination of FLVPlayback custom user interface controls by dragging instances from the Components panel to the Stage. You must name the instance and assign the instance name to the FLVPlayback instance using assignment properties as seen in the code above.

To add a buffering bar, you would follow these steps:

  1. Drag a BufferingBar component from the Components panel to the Stage.
  2. Select the new instance and move it into position.
  3. With the instance still selected, name it in the Property inspector (for example, bufferingBar_mc).
  4. The last step is to assign the instance name to the FLVPlayback instance named display using a bit of ActionScript. Select the first frame of the Actions layer and return to the Actions panel. At the top of the script, add the following line of code:

    // Assign the buffering bar to the video component
    display.bufferingBar = bufferingBar_mc;

The FLVPlayback component has a handful of control assignment properties that you can use in a similar way as above to assign the other control types to the video component. The property list includes the following:

  1. playButton
  2. pauseButton
  3. playPauseButton
  4. stopButton
  5. muteButton
  6. backButton
  7. forwardButton
  8. volumeBar
  9. seekBar
  10. bufferingBar

You can customize the FLVPlayback custom controls easily to match whatever look and feel you need. For this template I changed the green highlight color to a red to match the video theme better. See my article, Customizing the FLVPlayback Component, for more information on skinning options.

Comments