First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing! | Flash Jobs
Search tutorials
Author: Muhammad Yahya | Website: http://www.yahya3d.tk

TUTORIAL: HOW TO MAKE A TOGGLE BUTTON
AUTHOR: MUHAMMAD YAHYA
MACROMEDIA FLASH MX [6.0]
©2003 YAHYA3D

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!

1.
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?

2.
Now create a movie clip symbol. This movie clip will serve as the stop/play toggle button. How?... Lets find out!

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

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

5.
Add another layer. We will add our actions on this layer.

» Level Intermediate

Added: 2003-10-29
Rating: 4.89 Votes: 9
(10 being the highest)
» Author
Muhammad Yahya Cheema. 3d/2d artist.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.