Flash CS4 Resources
Skin FLV Playback Custom UI components individually
The FLV Playback Custom UI components allow you to customize the appearance of the FLVPlayback controls within your FLA file and allow you to see the results when you preview your web page. These components are not designed to be scaled, however. You should edit a movie clip and its contents to be a specific size. For this reason, it is generally best to have the FLVPlayback component on the Stage at the desired size, with the scaleMode set to exactFit.
To begin, simply drag the FLV Playback Custom UI components that you want from the Components panel, place them where you want them on the Stage and give them instance names.
These components can work without any ActionScript. If you put them on the same timeline and frame as the FLVPlayback component and there is no skin set in the component, the FLVPlayback component will connect automatically to them. If you have multiple FLVPlayback components on Stage, or if the custom control and the FLVPlayback instance are not on the same Timeline, then Action is needed.
After your components are on the Stage, you edit them as you would any other symbol. After you open the components, you can see that each one is set up a little differently from the others.
The button components have a similar structure. The buttons include the BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton, and StopButton. Most have a single movie clip on Frame 1 with the instance name placeholder_mc. This is usually an instance of the normal state for the button, but not necessarily so. On Frame 2, there are four movie clips on the Stage for each display state: normal, over, down, and disabled. (At run time, the component never actually goes to Frame 2; these movie clips are placed here to make editing more convenient and to force them to load into the SWF file without selecting the Export in First Frame check box in the Symbol Properties dialog box. You must still select the Export for ActionScript option, however.)
To skin the button, you simply edit each of these movie clips. You can change their size as well as their appearance.
Some ActionScript usually appears on Frame 1. You should not need to change this script. It simply stops the playhead on Frame 1 and specifies which movie clips to use for which states.
PlayPauseButton, MuteButton, FullScreenButton, and CaptionButton buttons
The PlayPauseButton, MuteButton, FullScreenButton, and CaptionButton buttons are set up differently than the other buttons; they have only one frame with two layers and no script. On that frame, there are two buttons, one on top of the other—in the case of PlayPauseButton, a Play and a Pause button; in the case of MuteButton, a Mute-on and a Mute-off button; in the case of FullScreenButton, a full-screen-on and a full-screen-off button; in the case of CaptionButton, a caption-on and a caption-off button. To skin these buttons, skin each of these two internal buttons as described in Skin FLV Playback Custom UI components individually; no additional action is required.
The CaptionButton is for the FLVPlaybackCaptioning component and must be attached to that component and not the FLVPlayback component.
BackButton and ForwardButton buttons
The BackButton and ForwardButton buttons are also set up differently than the other buttons. On Frame 2, they have extra movie clips that you can use as a frame around one or both of the buttons. These movie clips are not required and have no special capability; they are provided only as a convenience. To use them, simply drag them on the Stage from your Library panel and place them where you want them. If you don’t want them, either don’t use them or delete them from your Library panel.
Most of the buttons, as supplied, are based on a common set of movie clips so that you can change the appearance of all the buttons at once. You can use this capability, or you can replace those common clips and make every button look different.
The buffering bar component is simple: It consists of an animation that is made visible when the component enters the buffering state, and it does not require any special ActionScript to configure it. By default, it is a striped bar moved from left to right with a rectangular mask on it to give it a “barber pole” effect, but there is nothing special about this configuration.
Although the buffering bars in the skin SWF files use 9-slice scaling because they need to be scaled at run time, the BufferingBar FLV Custom UI Component does not and cannot use 9-slice scaling because it has nested movie clips. If you want to make the BufferingBar wider or taller, you might want to change its contents rather than scale it.
SeekBar and VolumeBar components
The SeekBar and VolumeBar components are similar, although they have different functions. Each has handles, uses the same handle tracking mechanisms, and has support for clips nested within to track progress and fullness.
There are many places where the ActionScript code in the FLVPlayback component assumes that the registration point (also origin point or zero point) of your SeekBar or VolumeBar component is at the upper-left corner of the content, so it is important to maintain this convention. Otherwise, you might have problems with handles and with progress and fullness movie clips.
Although the seek bars in the skin SWF files use 9-slice scaling because they need to be scaled at run time, the SeekBar FLV Custom UI component does not and cannot use 9-slice scaling because it has nested movie clips. If you want to make the SeekBar wider or taller, you might want to change its contents rather than scale it.
An instance of the handle movie clip is on Frame 2. As with the BackButton and ForwardButton components, the component never actually goes to Frame 2; these movie clips are placed here to make editing more convenient and as a way to force them to be loaded into the SWF file without selecting the Export in First Frame check box in the Symbol Properties dialog box. You still must select the Export for ActionScript option, however.
You might notice that the handle movie clip has a rectangle in the background with alpha set to 0. This rectangle increases the size of the handle’s hit area, making it easier to grab without changing its appearance, similar to the hit state of a button. Because the handle is created dynamically at run time, it must be a movie clip and not a button. This rectangle with alpha set to 0 is not necessary for any other reason and, generally, you can replace the inside of the handle with any image you want. It works best, however, to keep the registration point centered horizontally in the middle of the handle movie clip.
The following ActionScript code is on Frame 1 of the SeekBar component to manage the handle:
stop(); handleLinkageID = "SeekBarHandle"; handleLeftMargin = 2; handleRightMargin = 2; handleY = 11;
The call to the stop() function is necessary due to the content of Frame 2.
The second line specifies which symbol to use as the handle, and you should not need to change this if you simply edit the handle movie clip instance on Frame 2. At run time, the FLVPlayback component creates an instance of the specified movie clip on the Stage as a sibling of the Bar component instance, which means that they have the same parent movie clip. So, if your bar is at the root level, your handle must also be at the root level.
The variable handleLeftMargin determines the handle’s original location (0%), and the variable handleRightMargin determines where it is at the end (100%). The numbers give the offsets from the left and right ends of the bar control, with positive numbers marking the limits within the bar and negative numbers marking the limits outside the bar. These offsets specify where the handle can go, based on its registration point. If you put your registration point in the middle of the handle, the handle’s far left and right sides will go past the margins. A seek bar movie clip must have its registration point as the upper-left corner of its content to work properly.
The variable handleY determines the y position of the handle, relative to the bar instance. This is based on the registration points of each movie clip. The registration point in the sample handle is at the tip of the triangle to place it relative to the visible part, disregarding the invisible hit state rectangle. Also, the bar movie clip must keep its registration point as the upper-left corner of its content to work properly.
So, for example, with these limits, if a bar control is set at (100, 100) and it is 100 pixels wide, the handle can range from 102 to 198 horizontally and stay at 111 vertically. If you change the handleLeftMargin and handleRightMargin to -2 and handleY to -11, the handle can range from 98 to 202 horizontally and stay at 89 vertically.
Progress and fullness movie clips
The SeekBar component has a progress movie clip and the VolumeBar has a fullness movie clip, but in practice, any SeekBar or VolumeBar can have either, neither, or both of these movie clips. They are structurally the same and behave similarly but track different values. A progress movie clip fills up as the FLV file downloads (which is useful for an HTTP download only, because it is always full if streaming from FMS) and a fullness movie clip fills up as the handle moves from left to right.
The FLVPlayback component finds these movie clip instances by looking for a specific instance name, so your progress movie clip instance must have your bar movie clip as its parent and have the instance name progress_mc. The fullness movie clip instance must have the instance name fullness_mc.
You can set the progress and fullness movie clips with or without the fill_mc movie clip instance nested inside. The VolumeBar fullness_mc movie clip shows the method with the fill_mc movie clip, and the SeekBar progress_mc movie clip shows the method without the fill_mc movie clip.
The method with the fill_mc movie clip nested inside is useful when you want a fill that cannot be scaled without distorting the appearance.
In the VolumeBar fullness_mc movie clip, the nested fill_mc movie clip instance is masked. You can either mask it when you create the movie clip, or a mask will be created dynamically at run time. If you mask it with a movie clip, name the instance mask_mc and set it up so that fill_mc appears as it would when percentage is 100%. If you do not mask fill_mc, the dynamically created mask will be rectangular and the same size as fill_mc at 100%.
The fill_mc movie clip is revealed with the mask in one of two ways, depending on whether fill_mc.slideReveal is true or false.
If fill_mc.slideReveal is true, then fill_mc is moved from left to right to expose it through the mask. At 0%, it is all the way to the left, so none of it shows through the mask. As the percentage increases, it moves to the right, until at 100%, it is back where it was created on the Stage.
If fill_mc.slideReveal is false or undefined (the default behavior), the mask will be resized from left to right to reveal more of fill_mc. When it is at 0%, the mask will be scaled to 05 horizontally, and as the percentage increases, the scaleX increases until, at 100%, it reveals all of fill_mc. This is not necessarily scaleX = 100 because mask_mc might have been scaled when it was created.
The method without fill_mc is simpler than the method with fill_mc, but it distorts the fill horizontally. If you do not want that distortion, you must use fill_mc. The SeekBar progress_mc illustrates this method.
The progress or fullness movie clip is scaled horizontally based on the percentage. At 0%, the instance’s scaleX is set to 0, making it invisible. As the percentage grows, the scaleX is adjusted until, at 100%, the clip is the same size it was on the Stage when it was created. Again, this is not necessarily scaleX = 100 because the clip instance might have been scaled when it was created.
Connect your FLV Playback Custom UI components
If you put your custom UI components on the same Timeline and frame as the FLVPlayback component and you have not set the skin property, FLVPlayback will automatically connect to them without the need for any ActionScript.
If you have multiple FLVPlayback components on Stage or if the custom control and the FLVPlayback are not on the same Timeline, you must write ActionScript code to connect your Custom UI components to your instance of the FLVPlayback component. First, you must assign a name to the FLVPlayback instance and then use ActionScript to assign your FLV Playback Custom UI component instances to the corresponding FLVPlayback properties. In the following example, the FLVPlayback instance is my_FLVPlybk, the FLVPlayback property names follow the periods (.), and the FLV Playback Custom UI control instances are to the right of the equal (=) signs:
//FLVPlayback instance = my_FLVPlybk my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc. my_FLVPlybk.pauseButton = pausebtn; my_FLVPlybk.playPauseButton = playpausebtn; my_FLVPlybk.stopButton = stopbtn; my_FLVPlybk.muteButton = mutebtn; my_FLVPlybk.backButton = backbtn; my_FLVPlybk.forwardButton = forbtn; my_FLVPlybk.volumeBar = volbar; my_FLVPlybk.seekBar = seekbar; my_FLVPlybk.bufferingBar = bufbar;
The following steps create custom StopButton, PlayPauseButton, MuteButton, and SeekBar controls: