Creating
a Sound Bar
by Reed Morse
Now a-days, clients and visitors are looking
for more in a Flash website. One way to add an entire new
dimension to your website is to add sound. This tutorial
will show you how to build a one song sound controller for
your website.
For an example of
what you will be creating, press the Play button
in the animation below:
[
press 'play' ]
Supplied in this
tutorial are a sound clip, various ActionScript,
and two finished FLA files. Since cutting and
pasting ActionScript does not aid much in the
learning process, an explanation of the
ActionScript is provided at the end. For more
detailed explanations, please refer to the
KirupaForum, and/or your ActionScript Dictionary
(in Flash: Help > ActionScript Dictionary)
Steps to Create
Animation
The following steps will guide you in creating the
above sound animation:
-
First of all, you will need a
sound loop to play. While generally it’s better to
use a longer loop (say fifteen to thirty seconds),
I have included a very short audio clip for you to
play with.
Download it and unzip it. Please keep in mind that
I didn’t make this clip, it came free with
FruityLoops:
Download Sound Loop Here.
-
Now that you have your audio file,
fire up Flash. Create a new document (File > New)
and change the dimensions of the movie to 700
pixels (width) by 15 pixels (height). You can
modify the movie by pointing to Modify > Document.
-
We will begin by creating the play
button. In the main timeline, name the current
layer “buttons” (without quotes). On the stage,
create some text. Type something descriptive like
“Play” (without quotes) in the textbox.
-
Make sure the text type is Static
Text. Select the text and make it into a button
(F8 or Insert > Convert to Symbol…). Modify the
button for your desired aspects.
-
In the main timeline, create a new
layer. Name the layer “Actions” (without quotes).
Click the first frame of this layer and bring up
the Actions panel. Copy the following code in
(code will be explained at the end of the
tutorial):
stop();
-
Save the document (File > Save) as
“sound” (without quotes).
-
Now click on the button we made
back in step c. Bring up the Actions panel again
(right-click on the button and select Actions),
and copy the following code:
-
Replace [absolute location of
movie] with the path of the directory where you
saved the movie.
-
Example:
C:/Program
Files/Macromedia/Flash MX/kirupa
Example:
http://www.yourwebsite.com/flash
Save the document again, and
publish it.
We will now begin creating the
playing sound and the stop button. With sound.fla
still open, point to File > Save As…, and
re-save the movie as “sound1” (without
quotes).
After you have re-saved your movie
(see above step), change the descriptive button on
the stage to something like “Stop” (again without
quotes). Add the following ActionScript to the
button
-
Excellent, we’re almost done.
Create a new layer below the Actions one. Name
this new layer “loading” or something of this
sort. Throw some text up there and a small
animation to indicate that your movie is loading.
Don’t make it too complex; you want this to load
as soon as possible.
-
Select the second frame of the
loading layer, and press F5 (or point to Insert >
Frame). Find the fourth frame of the buttons layer
and again press F5 or point to Insert > Frame.
-
Try to stick with me here, it’s
not that confusing. In the Actions layer, select
the first frame. Bring up the actions panel. Copy
and paste the following code:
-
Ok, now select the second frame of
the Actions layer. In the actions panel, paste
this code:
gotoAndPlay(1);
-
Lastly, select the fourth frame of
the Actions layer. This frame’s action should be a
single stop() command:
-
Close the action panel and point
to File > Import... Find the audio file you
downloaded and unzipped earlier. Import it. Select
the third frame of the Actions layer, and in the
properties window find the sound dropdown box. In
this box select the sound file you just imported.
Set the loop to 9999. You may also want to add a
fade in for grins.
Code Explanation
The following section explains the reasons behind the code
added:
stop()
Stops the movie’s play
head
on (release) {
Calls the following
action when a button is released
loadMovie("[absolute location of movie]/sound1.swf",
this);
Loads an external swf
file into the current one.
}
Closes the action that will execute when the
button is released
totalb =
_root.getBytesTotal();
Declares the variable
“totalb” and assigns it the value of the total size, in
bytes, of the movie clip
loadedb =
_root.getBytesLoaded();
Declares the variable
“loadedb” and assigns it the value of the number of bytes
loaded so far
if (loadedb ==
totalb) {
If statement, saying
that if the two values of “loadedb” and “totalb” are the
same, the enclosed action is to be executed
_root.gotoAndPlay(3);
The action to be
executed if the if statement returns true
gotoAndPlay(1);
Tells the timeline’s
play head to return back to, and play from, the first
frame
Also, I have provided the final FLA files
for your perusal:
If you have any questions, please do not
hesitate to post on the forums at:
kirupaForum.
Reed Morse
|