Volume Controls

 One concept in flash I need to develop is using sound, looping and stopping sound, but more importantly making controls to enable the viewer to change the volume or turn the sound completely off.  This will not only help with my project but will also enable me to improve projects I have completed in previous modules and will enable me to use this application during my final year project for my radio website, where the need for some kind of volume control is essential.

  • Open a new Flash document.
     
  • Create a button symbol.
     
  • Make a new movieclip symbol and label it Sound
     
  • Drag an instance of your new button symbol into the movieclip. Make sure with the button selected within the movieclip that the x,y coordinates for the button are set to “0”.
  • Still working within this new movieclip select the button, open the actions panel, and place the following actions on it.

on (press){

startDrag(“”,false,0,0,0,-100);

}on (release, releaseOutside){

stopDrag();

}

Code Explanation:

  • While pressing the mouse button you will be able to drag the movieclip from 0 of the y coordinate to -100 on the y coordinate. Remember my explanation above, using the graphic artists’ coordinate system, this code will allow you to drag the movieclip 100 pixels going up from it starting point. It goes up because the number is smaller then its origin.
     
  • On release (letting go of the mouse) or ReleaseOutside (dragging away from the movieclip and letting go of the mouse) the drag will end and the movieclip will remain where it was dragged to.

Step 2
Creating the controller

  • Create a new movieclip and call it volume_controller.
     
  • Label layer one meter.
     
  • Starting at the registration point draw a straight vertical line up. You could use creativity here by drawing a crooked line or other meter type of graphic. We will set this line to 100 pixels in height and make sure it is locked center on the registration point. Select the line and use the property inspector to set the height to 100 and the x coordinate to 0. To make sure the line begins exactly at the registration point set the y axis to -50.

Step 3

  • Create a new layer and label it Sound. Drag an instance of your movieclip symbol, “ Sound “, on to this new layer and set it exactly at the registration point. Make sure its x and y coordinates are both set to 0, this is important. Give your movieclip symbol an instance name of Sound. To do this you select it and in the property inspector where it says <Instance name> click and type knob.

Step 4

  • Add a new layer and label it text.
     
  • On this layer add a text box slightly over to the right of the content of the other two layers.
     
  • Select the text box use the property inspector to set the text box as a dynamic text box and set the variable name to vol. I will explain this later.

  Step 5

  • Add a new layer and label it actions.
     
  • Insert a keyframe in frame two and a keyframe in frame three.
     
  • On all earlier layers insert a frame in frame three.

Step 6
Adding the actions

  • Select keyframe one of the actions layer and add the following actions.

smooth_audio = new Sound();Sound._y = -25; Step 7
Finishing the movie.

  • Return to the main timeline. On layer one drag an instance of the movieclip volume_controller to the stage.
     
  • Add a new layer.
     
  • Import an audio track to Flash.
     
  • Select the first keyframe of the new layer and have it play the audio. Go ahead and test your movie.

 Information taken from http://www.webthang.co.uk/Tuts/tuts_fmx/scott4/scott4d.asp 

Other helpful tutorials:

http://www.kirupa.com/developer/mx/volume_slider.htm

http://www.webwasp.co.uk/tutorials/b15-sound-volume/index.php

http://www.youtube.com/watch?v=b6FmgrhLp3s

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: