TUTORIAL: HOW TO MAKE A TOGGLE BUTTON
AUTHOR: MUHAMMAD YAHYA
MACROMEDIA FLASH MX [6.0]
Download the Source file here.
This tutorial, basically, is a continuation of the one I wrote before, describing how to fade in and out a background sound dynamically. You can see this tutorial listed in the tutorials section. Many asked for the secret to the toggle button too. On my site, you can see one button used for both stop and play, fading in and out the appropriate controls with the sound. So in this tutorial, I'll describe how to make a button like that one. If you haven't done the previous tutorial and just want to do this one, download the working file for that tutorial here. Please note that both the tutorials are for Flash MX [ver 6.0], so the flas provided here for your convenience may not work in Flash MX 2004 [ver 7.0].
Note that all the actionscript used here, plus layout and format is Copywright ©2003 yahya3d.tk. You are not free to use the script without mentioning the site's name in the actionscript!
Before we proceed, I would like to thank actionscript.org and flashkit.com for their support. I learned a lot from both these sites. The sound file used in both these tutorials is downloaded from flashkit. I appreciate them for providing such helpful material to us all!
Naturally, I assume that you have a good knowledge of Action Scripting and can work in it in xpert mode. Also, that you know all the concepts relating sounds, variables, symbols and invisible buttons. If not, then this tutorial isn't exactly for you. You need to goto one of the learning sites like actionscript.org, flashkit.com or webforums.macromedia.com and do their beginner tutorials. Then come back and do this one!
I also assume that you have done the previous dynamic sound fade tutorial. So I'll start from where that tutorial ends. Now lets get going!
First of all... we will start from making an invisible button. I hope you all know what that is!! Press ctrl+F8... the 'create new symbol' dialogue box appears. Choose button from the behavior list and click okay. You are now in the button symbol edit space. Leave all other states blank, goto the hit area and press F7. This adds a blank key frame there. Create a small rectangle. That's it! This is your invisible button!
The invisible buttons are useful when you want to mess with movie clips. They are invisible in the run time but you can put them on anything... and as a result that thing starts behaving like a button! Pretty handy eh?
Now create a movie clip symbol. This movie clip will serve as the stop/play toggle button. How?... Lets find out!
You see, you have a task here: you want a button which, on first click, fades the sound out. This task can simply be achieved by a stop button. But that's not all. While doing so, the button, itself, should change into a play button. And, manifestly, when clicked again should fade the sound out while changing into a stop button again. Now this task can only be achieved if you put both the stop and play buttons on two layers, cross fading them. I have used a simple square for the stop button and a simple triangle for the play button with the text 'play sound' and 'stop sound'. Remember that all these are simple graphics... no button is included. Instead, I have chosen the invisible button to do the job.
In my movie clip, there are five layers. On each one of them, I have put all the graphics, mentioned earlier, separately. The invisible button is placed on the fifth layer where the cross fade tweens end. Download the source file and take a look. You will understand what I mean.
You need three "stop" actions in this movie clip. First on the first frame, where the movie is showing the stop button, second where the first cross fade tween ends, showing the play button, and the third stop action on the last frame where the movie again shows the stop button. I have these actions on frame 1, frame 45 and frame 90.
Now that we have created the movie clip, we will goto the first frame of our main timeline and create an instance of the very movie clip there.
Add another layer. We will add our actions on this layer.
|» Level Intermediate|
Rating: 4.89 Votes: 9
|Muhammad Yahya Cheema. 3d/2d artist.|
|Download the files used in this tutorial.|
|Download (124 kb)|
|More help? Search our boards for quick answers!|