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 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 runtime, 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.

Handle

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 checking 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 runtime, 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 runtime, 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 there 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 FCS) 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 runtime. 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, that 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 _xscale increases until, at 100%, it reveals all of fill_mc. This is not necessarily _xscale = 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 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 _xscale is set to 0, making it invisible. As the percentage grows, the _xscale 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 _xscale = 100 because the clip instance might have been scaled when it was created.