Featured Flash FLA 11211 Flash Movies | 9 New Flash Movies Added What's New | Top 100 Featured FLA » Author: jacek14 » Title: Clouds » Description: Cloud-bank generated across attachmovie, placing perspectives, speeds, alpha, quantities of clouds, angle speeds. » More by jacek14 Random FLAs | Add Flash Movie Featured Flash Site 6569 Flash Sites | 4 New Flash Links What's New | Top 100 Flash Site Featured Site » Posted in the Flash Kit Links section » Title: Indigo Art Gallery » Comments: Indigo, a Norfolk, VA based art gallery and studio Random Links | Add your own Flash Related Links

1170 Tutorials 7 New Tutorials Added! What's New | Top100 » Create Graduation Photo Slideshow to Cherish School Memories » Making movieclips point at the mouse » Create Flash slideshow for Youtube » Move a sprite with the keyboard » Convert FLV to AVI video with DIVX codec to author a desired video with your favorite FLV movie! » Flash Video Conversion Guide for Apple TV » How to Convert FLV to iPhone movies » Convert FLV(Flash Video) video to Cell Phone » Convert FLV to AVI with XviD video codec to enjoy a DVD quality video with half of its size » Unknown Tag: Title10 Random Tutorial | Add Site

BBM.net - Music Solutions for Designers BBM.net is designed to save you time and deliver the highest quality royalty-free music for your multimedia projects. Features include: over 450 Music Loop Packages from some of the best composers in the business, our music search engine to speed your selection process, alternate music versions & bonus sounds to use for rollovers or transitions, free technical support and free consulting. Click here for details »

Flash Designer for Interactive Ad Agency Aquent US-CA-San Diego Post A Job | Post A Resume

Tutorials Home What's New Top Rated Submit myTutes Random!

Tutorials » Interactivity/Navigation

How to make a toggle button
Author: Muhammad Yahya | Website: 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.

» Forums
	More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.

10 9 8 7 6 5 4 3 2 1