Using media components (Flash Professional only)

With the sharp increase in the use of media to provide information to web users, many developers want their users to be able to stream media and then control it. You might use media components in the following kinds of situations:

• Showing media that introduces a company
• Streaming movies or movie previews
• Streaming songs or song snippets
• Providing learning material in the form of media

Related topics

• Using the MediaPlayback component
• Using the MediaDisplay and MediaController components
• Using the Component inspector with media components
• Controlling media components by using behaviors

Using the MediaPlayback component

Suppose you must develop a website that allows users to preview DVDs and CDs that you sell in a rich media environment. The following example shows the steps involves. (It assumes your website is ready for inserting streaming components.)

To create a Flash document that displays a CD or DVD preview:

1. Select File > New; then select Flash Document.
2. Open the Components panel and double-click the MediaPlayback component to place an instance of it on the Stage.
3. Select the MediaPlayback component instance and enter the instance name myMedia in the Property inspector.
4. In the Component inspector, set your media type according to the type of media that will be streaming (MP3 or FLV).
5. If you selected FLV, enter the duration of the video in the Video Length text boxes; use the format HH:MM:SS.
6. Enter the location of your preview video in the URL text box. For example, you might enter http://my.web.com/videopreviews/AMovieName.flv.
7. Set the desired options for the Automatically Play, Use Preferred Media Size, and Respect Aspect Ratio check boxes.
8. Set the control placement to the desired side of the MediaPlayback component.
9. Add a cue point toward the end of the media; this cue point will be used with a listener to open a pop-up window that announces that the movie is on sale. Give the cue point the name cuePointName.

   Next, you'll set the cue point time such that it is within a few seconds of the end of the clip.

10. Double-click a Window component to place on the Stage; then delete it.

    This places a symbol called Window in your library.

11. Create a text box and write some text informing the user that the movie is on sale.
12. Select Modify > Convert to Symbol to convert the text box to a movie clip, and give it the name mySale_mc.
13. Right-click (Windows) or Control-click (Macintosh) the mySale_mc movie clip in the library, select Linkage, and select Export for ActionScript.

    This places the movie clip in your runtime library.

14. Add the following ActionScript to Frame 1. This code creates a listener to open a pop-up window informing the user that the movie is on sale.

    // Import the classes necessary to create the pop-up window dynamically 
    
    import mx.containers.Window;
    import mx.managers.PopUpManager;
    
    // Create a listener object to open sale pop-up 
    var saleListener = new Object();
    
    saleListener.cuePoint = function(evt){
    
    var saleWin = PopUpManager.createPopUp(_root, Window, false, {closeButton: 
    true, title: "Movie Sale ", contentPath: "mySale_mc"});
    
    // Enlarge the window so that the content fits 
    
    saleWin.setSize(80, 80); 
    var delSaleWin = new Object(); 
    delSaleWin.click = function(evt){ 
    saleWin.deletePopUp(); 
    } 
    saleWin.addEventListener("click", delSaleWin); 
    
    }
    
    myMedia.addEventListener("cuePoint", saleListener);
    

Using the MediaDisplay and MediaController components

If you want a lot of control over the look and feel of your media display, you may want to use the MediaDisplay and MediaController components together. The following example creates a Flash application that displays your CD and DVD preview media.

To create a Flash document that displays a CD or DVD preview:

1. In Flash, select File > New; then select Flash Document.
2. In the Components panel, double-click the MediaController and MediaDisplay components to place instances on the Stage.
3. Select the MediaDisplay instance and enter the instance name myDisplay in the Property inspector.
4. Select the MediaController instance and enter the instance name myController in the Property inspector.
5. Open the Component inspector from the Property inspector and set your media type according to the type of media that will be streaming (MP3 or FLV).
6. If you selected FLV, enter the duration of the video in the Video Length text boxes using the format HH:MM:SS.
7. Enter the location of your preview video in the URL text box. For example, you might enter http://my.web.com/videopreviews/AMovieName.flv.
8. Set the desired options for the Automatically Play, Use Preferred Media Size, and Respect Aspect Ratio check boxes.
9. Select the MediaController instance and, in the Component inspector, set your orientation to vertical by setting the horizontal property to false.
10. In the Component inspector, set backgroundStyle to None.

    This specifies that the MediaController instance should not draw a background but should instead fill the media between the controls.

    Next, you'll use a behavior to associate the MediaController and MediaDisplay instances so that the MediaController instance accurately reflects the playhead movement and other settings in the MediaDisplay instance, and so that the MediaDisplay instance responds to user clicks.

11. Select the MediaDisplay instance and, in the Property inspector, enter the instance name myMediaDisplay.
12. Select the MediaController instance that will trigger the behavior. In the Behaviors panel, click the Add (+) button and select Media > Associate Display.
13. In the Associate Display window, select myMediaDisplay under _root and click OK.

For more information on using behaviors with media components, see Controlling media components by using behaviors.

Using the Component inspector with media components

The Component inspector makes it easy to set media component parameters, properties, and so on. To use this panel, click the desired component on the Stage and, with the Property inspector open, click Launch Component Inspector. The Component inspector can be used for the following purposes:

• To automatically play the media (see Media.activePlayControl and Media.autoPlay)
• To keep or ignore the media's aspect ratio (see Media.aspectRatio)
• To determine if the media will be automatically sized to fit the component instance (see Media.autoSize)
• To enable or disable the chrome background (see Media.backgroundStyle)
• To specify the path to your media in the form of a URL (see Media.contentPath)
• To specify the visibility of the playback controls (see Media.controllerPolicy)
• To add cue point objects (see Media.addCuePoint())
• To delete cue point objects (see Media.removeCuePoint())
• To set the orientation of MediaController instances (see Media.horizontal)
• To set the type of media being played (see Media.setMedia())
• To set the play time of the FLV media (see Media.totalTime)
• To set the last few digits of the time display to indicate milliseconds or frames per second (fps)

It is important to understand a few concepts when working with the Component inspector:

• The video time control is not available when you select an MP3 video type, because this information is automatically read in when MP3 files are used. For FLV files created with Flash Video Exporter 1.0, you must enter the total time of the media (Media.totalTime) in order for the playbar of the MediaPlayback component (or any listening MediaController component) to accurately reflect play progress. FLV files created with Flash Video Exporter 1.1 or later set the duration automatically.
• With the file type set to FLV, you'll notice a Milliseconds option and (if Milliseconds is unselected) a Frames Per Second (FPS) pop-up menu. When Milliseconds is selected, the FPS control is not visible. In this mode, the time displayed in the playbar at runtime is formatted as HH:MM:SS.mmm (H = hours, M = minutes, S = seconds, m = milliseconds), and cue points are set in seconds. When Milliseconds is unselected, the FPS control is enabled and the playbar time is formatted as HH:MM:SS.FF (F = frames per second), while cue points are set in frames.

  Note: You can set the FPS value only by using the Component inspector. Setting an fps value by using ActionScript has no effect and is ignored.

Controlling media components by using behaviors

Behaviors are prewritten ActionScript scripts that you add to an instance, such as a MediaDisplay component, to control that object. Behaviors let you add the power, control, and flexibility of ActionScript coding to your document without having to create the ActionScript code yourself.

To control a media component with a behavior, you use the Behaviors panel to apply the behavior to a given media component instance. You specify the event that will trigger the behavior (such as reaching a specified cue point), select a target object (the media components that will be affected by the behavior), and, if necessary, select settings for the behavior (such as the movie clip within the media to navigate to).

The following behaviors are packaged with Flash MX Professional 2004 and are used to control embedded media components.

To associate a MediaDisplay component with a MediaController component:

1. Place a MediaDisplay instance and a MediaController instance on the Stage.
2. Select the MediaDisplay instance and, using the Property inspector, enter the instance name myMediaDisplay.
3. Select the MediaController instance that will trigger the behavior.
4. In the Behaviors panel, click the Add (+) button and select Media > Associate Display.
5. In the Associate Display window, select myMediaDisplay under _root and click OK.

Note: If you have associated the MediaDisplay component with the MediaController component, you do not need to associate the MediaController component with the MediaDisplay component.

To associate a MediaController component with a MediaDisplay component:

1. Place a MediaDisplay instance and a MediaController instance on the Stage.
2. Select the MediaController instance and, using the Property inspector, enter the instance name myMediaController.
3. Select the MediaDisplay instance that will trigger the behavior.
4. In the Behaviors panel, click the Add (+) button and select Media > Associate Controller.
5. In the Associate Controller window, select myMediaController under _root and click OK.

To use a Labeled Frame CuePoint Navigation behavior:

1. Place a MediaDisplay or MediaPlayback component instance on the Stage.
2. Select the desired frame that you want the media to navigate to and, using the Property inspector, enter the frame name myLabeledFrame.
3. Select your MediaDisplay or MediaPlayback instance.
4. In the Component inspector, click the Add (+) button and enter the cue point time in the format HH:MM:SS:mmm or HH:MM:SS:FF, and give the cue point the name myLabeledFrame.

   The cue point indicates the amount of time that should elapse before you navigate to the selected frame. For example, if you want to jump to myLabeledFrame 5 seconds into the media, enter 5 in the SS text box and enter myLabeledFrame in the Name text box.

5. In the Behaviors panel, click the Add (+) button and select Media > Labeled Frame CuePoint Navigation.
6. In the Labeled Frame CuePoint Navigation window, select the _root clip and click OK.

To use a Slide CuePoint Navigation behavior:

1. Open your new document as a Flash slide presentation.
2. Place a MediaDisplay or MediaPlayback component instance on the Stage.
3. In the Screen Outline pane to the left of the Stage, click the Insert Screen (+) button to add a second slide; then select the second slide and rename it mySlide.
4. Select your MediaDisplay or MediaController instance.
5. In the Component inspector, click the Add (+) button and enter the cue point time in the format HH:MM:SS:mmm or HH:MM:SS:FF, and give the cue point the name MySlide.

   The cue point indicates the amount of time that should elapse before you navigate to the selected slide. For example, if you want to jump to mySlide 5 seconds into the media, enter 5 in the SS text box and enter mySlide in the Name text box.

6. In the Behaviors panel, click the Add (+) button and select Media > Slide CuePoint Navigation.
7. In the Slide CuePoint Navigation window, select Presentation under the _root clip and click OK.