Welcome, Guest

Please login or register

TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

Sponsored Links

Simple Sound Controls


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.


playButton.onRelease = function() {
if (soundOn==false) {
thisSound.start();
soundOn=true;
song.onSoundComplete = function() {
thisSound.start();
}

//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.


on(press){
startDrag("",false,left,top,right,bottom);
}
on(release){
stopDrag();

//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.


_root.thisSound.setVolume((myY-_y)*100/_root.mySliderBar._height);
}

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.

- Tutorial written by bedlam123

Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Last 5 User Comments

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

Reply to this post


User:  bittle21 (#30260)
Date: Sat Jul 22, 2006. 22:57:02

Post #2 of 3

Very informative tutorial--thanks for the info :-)

Reply to this post


User:  dudiedood (#26650)
Date: Fri Apr 21, 2006. 15:04:34

Post #1 of 3

Good tut, there is also a tut that adjusts volume without needing to release the mouse at [link]

Reply to this post


--- View Entire Thread ---
Amazing Font Pack!

Featured Tutorialsmore

Realistic Cigarettes
Realistic Cigarettes
- Adobe Photoshop -
Fancy Stars
Fancy Stars
- Adobe Illustrator -
Choppy Seas
Choppy Seas
- Adobe Photoshop -
Light Swirls
Light Swirls
- Adobe Photoshop -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Advertisements





Special Options
Download Source File
Printer Friendly Version
Forum Threads

hello
Author: anderkober
Posted: Jul 14th, 3:09pm
Activity: 1 replies, 3427 views
 Re: 3ds Max Tutorials for Beginners
Author: 3DSMaxresources
Posted: Feb 22nd, 4:29pm
Activity: 0 replies, 3502 views
Delete Account
Author: Neo824
Posted: Oct 18th, 7:47am
Activity: 1 replies, 4647 views
Back...
Author: unleash
Posted: Jul 02nd, 12:37pm
Activity: 3 replies, 4651 views
Help Please :)
Author: Roosta
Posted: Mar 25th, 5:08am
Activity: 0 replies, 5130 views
thank you
Author: HypepapyHer
Posted: Mar 24th, 9:18pm
Activity: 1 replies, 3643 views
 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 12:16pm
Activity: 1 replies, 4506 views
 changes....
Author: supertackyman
Posted: Sep 12th, 3:56am
Activity: 2 replies, 5955 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 4:50pm
Activity: 0 replies, 4119 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 1:58pm
Activity: 0 replies, 5206 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 3:18pm
Activity: 1 replies, 12251 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 3:33pm
Activity: 0 replies, 19704 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4669