Flash may be an excellent medium for animated vector content, but it is capable
of much more! Via its advanced sound controls and intelligent
scripting, it is also possible to use it to store and play sounds & music, with
all the controls of a standard jukebox. In this tutorial you will be shown
how to create a simple scene capable of turning on/off a music clip and altering
the volume at will. The graphics in this tutorial will be functional
at best... but since we are concentrating on sound manipulation it really does
not matter - you can always add your own spiffy graphics later!
Before we can get started on the scene, we first need
to create a button for the on/off
button and the slider.
Step
1: Choose Insert > New Symbol. Choose Button as the
behavior and name it buttons. Now create a button graphic for
the Up
state in the Up frame. Make the button about 32 pixels wide. Add
keyframes (F6) to the Over, Down, and Hit frames to
copy the graphic to those frames. Sliders don’t usually change in the Over
and Down frames, but, heck, there certainly is no rule that says your slider
can’t be different. Click Scene 1 to return to the main Timeline.
Step 2: With that done, let’s create the vertical bar for the slider.
Choose Insert > New Symbol. Make it a Movie Clip and name it
SliderBar. Draw the slider bar - Mine is just a long, thin rectangle
with a black and white linear gradient fill... plain and simple! Return to
Scene 1.
We
now need to assemble the buttons & slider bar, bring them onto the Stage,
and add a background.
Step 3: Insert four new layers into your document for a total of five layers. From the
top, name them labels, buttons, slider, actions,
and background. In frame 1 of the buttons layer, drag two
instances of buttons from the Library (F11). Select the instance of buttons
that you want to be the on/off button. In the Property Inspector (Window>Properties),
type playButton in the Instance Name text box. Select the
instance of buttons that you want to be the slider. You can use the Free
Transform tool to make it shorter vertically. In the Property Inspector,
type mySlider in the Instance Name text box and choose
Movie Clip from the Symbol Behavior drop-down list to change it to a
movie clip.
Step
4: In frame 1 of the slider layer, drag in an instance of SliderBar.
Position the slider button on the bottom of the slider bar. In the Property
Inspector type mySliderBar in the Instance Name text box. On
the background layer, draw your background.
On the labels layer, use the Text tool to label the button and the
slider bar.
Step 5: You will now want to upload your sound or music clip
and make it configurable via ActionScript. Choose File>Import
and import the sound you want. Choose All Sound Formats from the
Files of Type drop-down list, locate the sound, and click Open.
Right-click the sound in the Library (F11) and choose Linkage. In the
Linkage Properties dialog box, choose 'Export for ActionScript'.
In the Identifier text box, type mySound, and click OK.
With this done, we want to add the ActionScript that will control the buttons.
Step 6: In frame 1 of the actions layer, type or paste in the
following ActionScript. This ActionScript is also included in my
example source
file:
//Create an instance of the Sound object called "thisSound"
//and use the method "attachSound" to attach the sound from
//the library. Remember to link the sound in the library to
//export to an action script. (Right click on the
//symbol and choose "Linkage").
thisSound = new Sound;
thisSound.attachSound("mySound");
//Initialize the soundOn variable to false.
soundOn=false;
Step 7: In frame 2 of the actions layer, insert a keyframe
(F6) and then type or paste in the following ActionScript. This ActionScript is also included in
my example source
file:
//Stop the movie in the main timeline and wait for a
//button to be pushed or slided.
stop();
//playButton is the instance of the on/off button and
//on its release, if the sound is off, then it starts the
//sound playing, and sets soundOn to true. When the sound
//is complete, it begins again. thisSound is the instance of
//the sound object that was created in the action script in
//frame one.
//if the sound is on, while the button is pushed, then
//the sound stops, and soundOn is set to false.
} else {
thisSound.stop();
soundOn=false;
}
}
Step 8: Select the slider button and type or paste in the following
ActionScript. This ActionScript is also included in my
example source
file:
//This button is both a movie clip and a button, because
it
//needs to respond as a button and it also needs to slide.
//To do this, you need to have it as a button in the symbol
// library, then assign it as a movie clip instance in the
//properties box.
onClipEvent(load){
//myY is the position of the slider button
//the button must be positioned at the bottom
//of the slider to start
myY=_y;
//the top of the slider bar is top
top=_y-_root.mySliderBar._height;
//the bottom of the slider bar is bottom, and it
//is set by the position of the button, which must
//be placed at the bottom.
bottom= _y;
//right and left are the _x position of the button
//(the middle of the button)
right=_x;
left=_x;
//set the volume to off. thisSound is created in the
//action script in frame one, and needs to be targeted
//by using the word "_root" in front of it.
_root.thisSound.setVolume(0);
}
//The following lines allow the button/movie clip to be
//dragged, but only up and down and only for the
//height of the slider. Left and right are set to the
//same value, so it cannot go left or right, only up and
//down.
//the volume is a number between zero and 100 and
//represents the difference between the bottom of
//the slider and the current position of the button
//times the ratio of the full volume (100) to the
//height of the slider bar. This gives a value of
//100 when the slider button is at the top of the
//slider bar, and adjusts the volume correctly for
//every position in between the top and the bottom.
Step 9: We now need to select frame 2 in the other layers and add a
frame (F5). If you have done everything correctly you should end up with a
scene that looks a little something like this:
Step 10: Now all that you have left to do is test the movie. Move the volume slider and click the On/Off
button. Fairly simple really, but useful!
Limitations: This method is very simple but comes with a number of
serious problems. First and foremost, each file is bound into the
source Flash document, and must be downloaded before it will play. For
tiny repeating soundloops and simple sounds this is just fine, but load a
few MP3s into there and you'll have your viewers (and even your server)
begging for mercy over the page load times. The solution, of course,
is to stream the sound files in real time. This will also allow you to
have multiple user-selectable songs, more advanced play controls (such as
pause, skip), etc. This is, however, a little more complex and will be
discussed in detail in a future tutorial.
User: karmen(#35521) Date: Sat Dec 09, 2006. 16:32:00
Post #3 of 3
Quote from bittle21;30260: Very informative tutorial--thanks for the info :-)
yes it is good..has lots of useful infos but if u copy paste the actions from here it might have errors like i did....if u download the examples ,,then it works ok . Thx ...it really is good and fun
Step
1: Choose Insert > New Symbol. Choose Button as the
behavior and name it buttons. Now create a button graphic for
the Up
state in the Up frame. Make the button about 32 pixels wide. Add
keyframes (F6) to the Over, Down, and Hit frames to
copy the graphic to those frames. Sliders don’t usually change in the Over
and Down frames, but, heck, there certainly is no rule that says your slider
can’t be different. Click Scene 1 to return to the main Timeline.
We
now need to assemble the buttons & slider bar, bring them onto the Stage,
and add a background.
Step
4: In frame 1 of the slider layer, drag in an instance of SliderBar.
Position the slider button on the bottom of the slider bar. In the Property
Inspector type mySliderBar in the Instance Name text box. On
the background layer, draw your background.
On the labels layer, use the Text tool to label the button and the
slider bar.
