Internet Cross Logo
Internet Cross your one stop web tutorial website
Search Internet Cross Shop:

Power Bar with Macromedia Flash MX

by Diego Park
In this lesson we are going to develop a power bar, especially useful for arcade games. This is a dynamic rectangle that changes its width when the right arrow of the keyboard is pressed. An indicator displays the percentage reached by the power bar, from 0 to 100%.


Power bar

Our visual indicator, or powerbar from the Library window, is a simple rectangle filled with a linear gradient (Figure 1). We have chosen a gradient to make our example more attractive. In consequence, our power bar is a static movie clip. ActionScript statements control the width and the dynamic module. One fact to remember is that the width of the graphic is 100, to make the script easier, since 100 represents 100% too.

IMAGE


Figure 1. The power bar is a coloured rectangle.

Basically, our main scene will have two components: the power bar and the text field, which displays the numeric percentage of the scale.

Then, please drag the movie clip powerbar from the Library window to the main scene, Scene 1. Click on it and instance it as powerbar.

Please right-click on this movie clip and insert:

onClipEvent(load)
{
this._xscale=0;
speed=10;
scale=0;
}

onClipEvent(enterFrame)
{
if (Key.isDown(Key.RIGHT))
{
if (this._xscale<100)
this._xscale+=speed;
}

else
{
if (_xscale>0)
this._xscale-=speed;
}

scale=this._xscale;
}

The first event handler sets the width of the movie clip to zero. Note how it is set from ActionScript and not with the Properties or Transform windows. The other possibility would be set its width (W in the Properties window) to 0, but in this way it would be not easy to handle the movie clip, since it is shown in the screen with 1-pixel width. So we recommend using the ActionScript statement.

We create two variables. The first one is speed, which is used as read-only constant. Its value is not changed. The reason we use a read-only variable instead of straight inserting the constant is because in this way -using the variable speed-, we make this code more flexible and easier to maintain. Suppose we have developed the movie clip with the alternative form, and we wanted to change the speed to 5; we would have to re-inspect the thorough code and replace 10 with 5. Using the variable, we just have to change 10 with 5 a single time.

The second variable is to be used with the text field. It holds the percentage of width of the power bar, and it is a copy of the _xscale property (measured in percentage values, 0 means no width and 100, the original x-scale). The reason we copy the value of _xscale to another variable is because it is not supported by text fields in the way we need --up-to-dating its content.

This is the way we access the variables of this movie clip:

[...] powerbar.varible [...]

For example, if we want to view the value of the variable scale of powerbar, we use:

powerbar.scale

Then, we use this for the content of the text field (Figure 02): please write powerbar.scale in the Var field.

IMAGE


Figure 2. By inserting powerbar.scale in the Var field, the text is automatically up-to-dated as the scale variable changes.

The second handler is to increase or reduce the width of the power bar. Then, every time the pointer enters the frame, it checks if the right arrow of the keyboard is pressed. If it is, its width –_xscale- is increased by 10% or 10 pixels.

If the arrow is not being pressed, and if the width is greater than 0, it is restored by 10 pixels.

Finally, the value of the variable scale is modified with the current width of the power bar.


Conclusion

Using a movie clip and a text field, we have developed a dynamic power bar, thoroughly controlled with ActionScript. To modify the width of the movie clip, we have used the _xscale property. Then, every time the user presses the right arrow of the keyboard, the bar increases its width; and when this key is not being pressed, it tends to restore its width to zero.
[Download File][Page 1]
Visit our forums to discuss / post your problems.