Creating a Simple Volume Bar in Flash

In this tutorial, we'll learn how to create a simple volume bar in Flash. We'll create a rectangle that grows bigger or smaller whenever we click on the volume buttons.

[VIEW SAMPLE FILE]

Step 1

Use the rectangle tool to draw a vertical bar. This will be our volume bar.

Step 2

Convert the bar into a Movie Clip symbol.

Step 3

In the properties inspector, give it an instance name. I'm going to name it volBar.

Step 4

Double-click on the volume bar on the stage to go inside its timeline.

Step 5

Inside the volume bar movie clip's timeline, insert another keyframe on frame 2. Then insert another keyframe on frame 11. So you should have 3 keyframes.

Step 6

Select the first keyframe, then delete the rectangle on the stage. So now, the first keyframe should be blank.

Why did we make this a blank keyframe?
This frame will be used to represent a volume level of 0, which is why we're making it empty.

Why do we have 11 frames in total?
There's no specific reason for this. You can add or remove more frames if you want. The more frames you have, then the more volume levels you can represent.

Step 7

Select the second keyframe. Then right click on the rectangle shape on the stage and choose Free Transform. Then scale the rectangle down until it's about 10% of its original size.

Step 8

Right-click anywhere in between frames 2 and 11, and choose Create Shape Tween. If you test the movie, you should see the animated bar growing and then disappearing and then growing again repeatedly. We'll be fixing that later when we add the ActionScript code.

Step 9

Go back to the main timeline by clicking on the Scene 1 link in the edit bar.

NOTE: When you go back to the main timeline, the volume bar will disappear. That's ok. It really should disappear because the first keyframe of the volume bar is empty.

Step 10

Create and add 2 button symbol instances on the stage. One will be used as the volume bar increase button, the other will be the volume bar decrease button. Make sure to give them instance names in the properties inspector. I will name them volUp_btn and volDown_btn.

Step 11

Let's add the ActionScript. Create a new layer and name it Actions. Then make sure that layer is selected and then open up the Actions panel.

Step 12

First, we must make the volume bar movie clip animation stop by adding this line:

volBar.stop();

If we don't make it stop, then the volume bar will just keep animating. We only want it to move up or down when we click on the buttons.

Step 13

Next, let's add the event listeners for the buttons so that we can click on them and make the volume bar go up or down. In one of the previous steps, I named the buttons volUp_btn and volDown_btn. For the event listener functions, I will name them volUp and volDown.

volUp_btn.addEventListener(MouseEvent.CLICK, volUp);
volDown_btn.addEventListener(MouseEvent.CLICK, volDown);

function volUp(e:MouseEvent):void
{

}

function volDown(e:MouseEvent):void
{

}

Step 14

When we click on the buttons, we either want to move forward or backward through the frames inside the volume bar movie clip, which I've named volBar. The way our animation is made, moving forward makes the volume bar bigger, so it would make sense to move forward in the animation if we want the volume bar to increase. And then moving backwards would be used to do the opposite. To move forward to the next frame of a movie clip, we can use the nextFrame() method of the MovieClip class. To move back, we can use the prevFrame() method. So in the volUp event listener function, we should use nextFrame(). And in the volDown function, we should use prevFrame(). So go back to the event listener functions and add the following lines:

function volUp(e:MouseEvent):void
{
     volBar.nextFrame();
}

function volDown(e:MouseEvent):void
{
     volBar.prevFrame();
}

So now, this means that whenever we click on volUp_btn, the volBar movie clip will move to the next frame of the animation nested inside it. And if we click on volDown_btn, it will go back to the previous frame of the animation nested inside it.

Step 15

Test the movie. You should now be able to click on the buttons and make the volume bar go up or down.

And that concludes this tutorial. For the tutorial on controlling the actual sound volume, go here.