TUTORIALS SUBMENU ---->

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING

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: