Using ActionScript 3.0 Components |
|
|
|
| Using the FLVPlayback Component > Customizing the FLVPlayback component > Creating a new skin > Seek bar and volume bar | |||
The seek bar also has two movie clips: seekBar_mc and seekBarProgess_mc. Each clip's position on the Layout layer relative to the other clip is important because this relative positioning is maintained. Although both clips scale, the seekBarProgress_mc cannot be nested within seekBar_mc because seekBar_mc uses 9-slice scaling, which does not work well with nested movie clips.
The seekBar_mc clip has 9-slice scaling applied to it, so the borders won't distort when it scales. The seekBarProgress_mc clip also scales, but it does distort. It does not use 9-slice scaling because it is a fill, which looks fine when distorted.
The seekBarProgress_mc clip works without a fill_mc, much like the way a progress_mc clip works in FLV Playback Custom UI components. In other words, it is not masked and is scaled horizontally. The exact dimensions of the seekBarProgress_mc at 100% are defined by left and right margins within the seekBarProgress_mc clip. These dimensions are, by default, equal and based on the difference between the x (horizontal) positions of seekBar_mc and seekBarProgress_mc. You can customize the dimensions with ActionScript in the seek bar movie clip, as shown in the following example:
this.seekBar_mc.progressLeftMargin = 2; this.seekBar_mc.progressRightMargin = 2; this.seekBar_mc.progressY = 11; this.seekBar_mc.fullnessLeftMargin = 2; this.seekBar_mc.fullnessRightMargin = 2; this.seekBar_mc.fullnessY = 11;
You can put this code either in the SeekBar movie clip Timeline or you could put it with the other ActionScript code on the main Timeline. If you customize with code instead of modifying the layout, the fill doesn't need to be on the Stage. It just needs to be in the library, set to export for ActionScript on Frame 1 with the correct class name.
As with the FLV Playback Custom UI SeekBar component, it is possible to create a fullness movie clip for the seek bar. If your seek bar does not need to scale, or if it does scale but does not use 9-slice scaling, you could set up your progress_mc or fullness_mc using any of the methods used for FLV Playback Custom UI components. For more information, see Progress and fullness movie clips.
Because the volume bar in the Flash skins does not scale, it is constructed the same way as the VolumeBar FLV Playback Custom UI component. For more information, see SeekBar and VolumeBar components. The exception is that the handle is implemented differently. For more information on that, see the following section.
The SeekBar and VolumeBar handles are placed on the Layout layer next to the bar. By default, the handle's left margin, right margin, and y-axis values are set by its position relative to the bar movie clip. The left margin is set by the difference between the handle's x (horizontal) location and the bar's x (horizontal) location, and the right margin is equal to the left margin. You can customize these values through ActionScript in the SeekBar or VolumeBar movie clip. The following example is the same ActionScript code that is used with the FLV Playback Custom UI components:
this.seekBar_mc.handleLeftMargin = 2; this.seekBar_mc.handleRightMargin = 2; this.seekBar_mc.handleY = 11;
You can put this code either in the SeekBar movie clip Timeline or you could put it with the other ActionScript code on the main Timeline. If you customize with code instead of modifying the layout, the handle doesn't need to be on the Stage. It just needs to be in the library, set to export for ActionScript on Frame 1 with the correct class name.
Beyond these properties, the handles are simple movie clips, set up the same way as they are in the FLV Playback Custom UI components. Both have rectangle backgrounds with the alpha property set to 0. These are present only to increase the hit region and are not required.
|
|
|
|