Sound Controls in ActionScript 3
create a new FLA file ActionScript 3.0
Information about the FLA file
- You can create a new file, or use this exercise to put sound buttons in front of an existing Flash ActionScript 3 FLA file.
- If you are starting with a new FLA file, put a graphic in the background as appropriate
- Five button instances on the stage are controlled by ActionScript 3.0
- The play button
- starts the sound file playing
- switches to display the pause button
- The pause button
- pauses the sound playing
- keeps the sound at the same place it stops, so that it resumes playing from that
- switches to display the play button
- The stop button
- stops playing the sound file
- returns the play control to the beginning of the sound file
- switches display from the pause to the play button if the pause button is displayed
- The up and down volume buttons raise and lower the loudness of the sound file.
- This example plays an mp3 file audio.mp3
top
Buttons
- You need 3 buttons: play, pause & stop, to control the playing of the music
- Two other buttons, up and down control the volume of the music
- The pause button sits directly on top of the play button and gets swapped out with it when you hit one or the other button
- you can create your own buttons by drawing them
- Or you can use VCR buttons in the Flash Button Library: Click Window>Common Libraries>Buttons to open the Flash buttons library
- VCR buttons are in the 2 playback button folders
- The play button can be rotated and used for the buttons that raise & loser the volume.
- Name the button instances exactly the names below so you can copy and paste the ActionScript below after you insert the buttons.
- play_btn
- pause_btn
- stop_btn
- up_btn
- down_btn
top
ActionScript 3
- This ActionScript is from the Flash CS3 Help files.
- The name of the sound file being played is audio.mp3.
- You can download it and use it as you experiment, or type in the name of your own audio file.
- the sound file is external to this SWF file that loads it so be sure to upload it to the server so the SWF file can find it.
- Be sure the pathname is correct
top
How to do it
Create Actionscript 3.0 to run movie
- Change the name of layers to Actions
- Click in the first keyframe of the layer
- Open the Actions Panel (Window>Actions)
- Copy and paste the following Frame ActionScript into the Actions Window
- Click the AutoFormat button at the top of the ActionScript window (to the right of the check mark) to format the text.
- Click the check mark to check the syntax
- Save the FLA document.
Flash interface
- Insert image file or open another FLA file to create the background for the sound file.
- Create your own play, stop, pause, volume up, and volume down buttons, or open the Flash buttons library to use the ones that come with Flash
top
Add the buttons
- Turn on the grid (View>Grid) to line up the buttons (you can turn off the visibliity of any layers with graphics so you can see the grid.
- Click on the add layer button at the lower left of the timeline to add a new layer and rename it playButton
- Drag a play button onto the stage from the buttons library or the move library
- give it the instance name of play_btn in the property inspector
- Click the new layer icon at the lower left of the Timeline to create a new layer, & name it pauseButton
- Drag a pause button onto the stage and put it right on top of the play button
- give it the instance name pause_btn in the property inspector
- Create a new layer, & name it stopButton
- Drag a stop button onto the stage
- give it an the instance name stop_btn in the property inspector
- Create a new layer, & name it upVolume
- Drag the start button onto the stage
- give it an instance name of up_btn in the property inspector
- Make it smaller in the property inspector by adjusting the width & height dimensions
- Rotate it up using the Modify>Transform>Rotate and rotate it CCW
- Repeat for the downVolume button, but rotate it CW
- give it an instance name of down_btn
- the sound file should be in the same folder as the SWF file, since it is not embedded in the SWF movie but is played by the SWF movie.
top
Test Movie
- Click Control>Test Movie to see if the movie works.
- Click the play button to start the sound.
- The pause button should then appear in place of the sound button
- Click the up button to raise the volume and the down button to lower it.
- If the sound doesn't play check the pathname of the sound file to be sure it is available.
- If there are errors in the movie they will appear in the Output panel (Window>Output) which will automatically open up to show errors.
top
Publish the movie
- Click File>Publish Preview to create a web page with the HTML code to play the movie.
modify this HTML page & publish it
- open it up in Dreamweaver
- convert the page to XHTML 1.0 transitional (File>Convert>XHTML transitional 1.0) which will fix the opening tags and the script tags.
- Delete the <embed> tags within the <object> tags to make the HTML code XHTML valid.
- Save the HTML page
- View in the browser
- Test validation
- Be sure to upload the audio file and the javascript file that Flash generates ("AC_RunActiveContent.js") into the same folder as the Flash SWF file so that it can be found when the page loads.
top
insert Flash movie into an existing page
- copy and paste the contents of the <script> and <noscript> tags into another web page that is XHTML valid.
- Delete the <embed> tags within the <object> tags to make the HTML code XHTML valid.
- Copy and paste the contents of the two script tags from the HTML page generated by Flash and insert them within the <head> tags
- <script language="JavaScript" type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="JavaScript" type="text/javascript"></script>
- You need to add the language and type attributes (as in the above examples) to the script tags to make them XHTML valid
- Be sure to upload the audio file the ActionScript is loading and the javascript file that Flash generates ("AC_RunActiveContent.js") into the same folder as the Flash SWF file so that it can be found when the buttons are pressed.
top
ActionScript to copy
var soundReq:URLRequest = new URLRequest("audio.mp3");
var sound:Sound = new Sound();
var soundControl:SoundChannel = new SoundChannel();
var volumeControl:SoundTransform = new SoundTransform();
var resumeTime:Number = 0;
sound.load(soundReq);
sound.addEventListener(Event.COMPLETE, onComplete);
up_btn.addEventListener(MouseEvent.CLICK, increaseVolume);
down_btn.addEventListener(MouseEvent.CLICK, decreaseVolume);
function onComplete(event:Event):void
{
play_btn.addEventListener(MouseEvent.CLICK, playSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopSound);
}
function playSound(event:MouseEvent):void
{
soundControl = sound.play(resumeTime);
pause_btn.visible = true;
pause_btn.addEventListener(MouseEvent.CLICK, pauseSound);
play_btn.visible = false;
play_btn.removeEventListener(MouseEvent.CLICK, playSound);
}
function pauseSound(event:MouseEvent):void
{
resumeTime = soundControl.position;
soundControl.stop();
play_btn.visible = true;
play_btn.addEventListener(MouseEvent.CLICK, playSound);
pause_btn.visible = false;
pause_btn.removeEventListener(MouseEvent.CLICK, pauseSound);
}
function stopSound(event:MouseEvent):void
{
soundControl.stop();
play_btn.visible = true;
play_btn.addEventListener(MouseEvent.CLICK, playSound);
pause_btn.visible = false;
pause_btn.removeEventListener(MouseEvent.CLICK, pauseSound);
}
function increaseVolume(event:MouseEvent):void
{
volumeControl.volume += .5;
soundControl.soundTransform = volumeControl;
}
function decreaseVolume(event:MouseEvent):void
{
volumeControl.volume -= .5;
soundControl.soundTransform = volumeControl;
}
pause_btn.visible = false;
top
