Buttons

Buttons allow for interaction between Flash and the viewer. There are many things you can do with buttons - we will cover the basics. A button has its own characteristics and is created off the stage, then it is placed onto the stage. Buttons are symbols. To create a simple button, you need to create a new symbol - Insert...New Symbol. Name the symbol and be sure to select the Button behavior. The button editing window will open. Each button is edited on its own stage. Notice that there is only one layer for the button. This layer has four states - up, over, down, and hit. You can add drawings for each of these states. The up state is what the button normally looks like, over is the appearance of the button when the mouse is moved over it, down is its appearance when pressed, and hit is the area that will do something when clicked (the hot spot).

To create the button, you must add a drawing to the Up state and the Hit state. Each state that is defined must have a keyframe. The Up state already has an empty keyframe. With the Up state selected, draw something on the stage - try to make it look like a button. The cross in the middle of the stage is going to be the middle of the button, so try to center your drawing on the cross. You can draw anything that you would like. This will be the normal button. To make it a true button, you must define the hit area, or the area that is clickable. Usually this will be the same as the area of the button, but it doesn't have to be; you have an entire stage to play with. Click in the Hit state frame and press F6 to insert a keyframe. Just as before, this new keyframe contains the contents of the previous keyframe or what was drawn in the Up state. The Hit state never displays in your animation, it only defines the clickable area of the button, so it doesn't matter what it looks like. We now have a button! Here is what mine looks like:
Notice that it doesn't do anything except change your mouse to a hand when you move it over the button.

If you want the button to look different in different states, just add keyframes to the Over and Down states and either redraw or modify the existing drawing. Try out this button to see the different states. Try clicking.

Make sure that each state contains a keyframe. When you are done creating the button, click on the Scene 1 button. It is located just above the Layers, to the left of the timeline. This will return you to the movie. The button is added to the library. To add the button that you just created to your movie, you must open the Library - Window...Library. Select the button from inside the library, then click and drag it from the library to the stage. The button should now display on the stage. You can move it around within the stage. If you want further edit the button, double click it in the library or right click in the library and select edit.

To add an action to a button (something that will happen when the button is clicked) double click the button on the stage. You may have to turn off Enable Buttons - Conrol...Enable Buttons. Select the Actions tab and add the action you want. The most common actions used with buttons are Play, Go To, Go To and Play, and Get URL. Get URL allows the button to open a link in the browser window. You can even specify frame names in which to open the link in. Here is an example (be sure to hit the back button):

You can do all sorts of fun things with buttons. You can even make the different states of the button appear in different places, like this:

Sound

Flash gets really fun when you add sound to your animations. There are basically two ways sound is used in Flash - Events or Streams. A Streamed sound is used for background sounds or music. Events are typically used for interaction, like when you press a button. To add sound to your animation, you must first have a sound file. You can create your own or there are plenty ont he Internet to download. Sound is the largest contributor to large Flash file sizes. Sound files must be in the wave (.wav) file format, which means if you have an MP3 file that you want in your Flash animation, you must convert it to a wave file. Don't worry about the file size, because Flash will convert it back into an MP3.

Once you have the sound file, you must Import it - File...Import. The sound is automatically added to the Library. To add the sound to your movie, just click and drag it onto the stage. SOUND SHOULD BE ADDED TO A KEYFRAME ON A NEW LAYER. Try not to combine too many elements in one layer. Sound is easier to manage if it is on its own layer. The sound will then display in the timeline for its length.

To make changes to the sound, double click on the keyframe that the sound is in (or begins in) and select the Sound tab. The Effect dropdown list allows you to add special effects to the sound. As you change the effect, watch how the two sound windows are changed. The top section represents the left channel of a stereo sound the bottom section represents the right channel. You can add your own custom effects by clicking and dragging within these windows. The line through the sound windows represent volume. Experiment with these. If you don't have stereo speakers, then you won't recognize a difference. If you add your own effects, be sure to change the Effect list to Custom.

The Sync button defines the type of sound it is. Stream should be used for most sound files. Flash is smart and can tell if your computer can't quite handle an animation with sound. If the viewer's computer can't quite keep up the frame rate for the movie and play all the animations and sound too, then the Flash Player or Plugin will start dropping frames (less fps) and/or decrease the sound quality if it is a streamed sound. Setting the sound to stream ensures that the movie will continue to play at the correct pace (maybe less frames per second are displayed, but the movie plays at the same pace). Event sounds are used for very short sounds, usually accompanied with buttons or other viewer interaction. Most event sounds are preloaded and won't have an effect on the display of the movie.

The Loops box allows you to set the number of times the sound should repeat. If you want it to continue playing, set it to a very high number like 999 (no one is going to sit around and listen to the same sound 999 times and keep their sanity, so be careful with looping).

To add an event sound to a button, you add it to either the Over or Down states of the button, depending on when you want it to play - on mouse over or on click. Be sure you are in the Button Edit mode, select the state in which you want the sound to play, then drag the sound from the Library to the stage. Here is an example with the sound set in the Down state, so click to hear it (unless I am in the middle of lecturing, then you'll be really embarrased.)

You can get some great effects by looping music clips. Not only does looping make the music last longer, but it can entertain your viewers for quite some time before they realize that the music is actually looping. Because the sound clip appears in the timeline, you can link different sound clips together seamlessly. If you use music, give your viewers an option to turn it off.

There is much more to Flash than has been presented here. FlashPlanet.com offers some great tutorials and examples to help you learn new aspects of Flash animation. There are also many excellent Flash books on the market. But, you will probably learn the most by experimenting and playing. Have fun!!