building flash templates

17. Adding "Actions" to your buttons using ActionScript

This is the last part of creating a Flash template before publishing it. Now that we have buttons, and different sections of the project separated out, we need to add "actions" to give Flash information telling it what to do when you click a button.

First, we need to identify each button for Flash, so it knows how to reference it. This is called giving each button an "Instance Name."

Unlock your buttons layer, then click on your top button. This will give you a set of options on your property inspector, including a spot to give the button an instance name.

Name your button "video_btn" (all lowercase) with an underscore. Name the next button "photo_btn" and the last button "text_btn".

To add code, first create a new layer in your project and title it"actions".

Then click on the first keyframe of the first frame in your project. This is generally where you will always put your ActionScript, so that it is loaded immediately when your project loads.

While this keyframe is highlighted, go to the Window menu at the top of the screen and click on Actions.

The actions window has a small tab at the bottom that tells you where you are putting your ActionScript. It will display the name of the layer and the frame number. If it says anything different, then you are placing your actions in the wrong spot. The actions window will also stay open even if you click on the stage behind it. Be careful: if you click on a layer other than the actions layer, the actions window will change where you are writing ActionScript. Always check to be sure you're writing ActionScript on the actions layer.

This part requires a little bit of programming with code. While at first sight it might look like Greek, there is one basic set of code that we will show you that can be used for virtually any Flash project involving buttons. This is one of the most basic and fundamental pieces of code in Flash.

//------- FOR FLASH 8 (ACTIONSCRIPT 2.0)-----------

stop(); 

video_btn.onRelease = function(){
    gotoAndStop("video");
} 

audio_btn.onRelease = function(){
    gotoAndStop("audio");
}

text_btn.onRelease = function(){
    gotoAndStop("text");
}

//------- FOR FLASH CS3 (ACTIONSCRIPT 3.0) -----------

stop();

function video(myevent:MouseEvent):void {
    gotoAndStop("video");
}

function audio(myevent:MouseEvent):void {
    gotoAndStop("audio");
}

function txt(myevent:MouseEvent):void {
    gotoAndStop("text");
}

video_btn.addEventListener(MouseEvent.CLICK, video);

audio_btn.addEventListener(MouseEvent.CLICK, audio);

text_btn.addEventListener(MouseEvent.CLICK, txt);

//---------------------------------------------------

Type the exact actionscript above into your actions window. Just to make things more difficult, you must precisely match the capitalization and case (uppercase, lowercase, etc.).

Notice that some of the words turn blue as you type.

This means those words are recognized by Flash. The black words are ones we just made up to name things. If you are naming a function and the word turns blue, then you should use a different name because that word is reserved by Flash.

Now test your movie by press CTRL + Enter (command + return on a Mac) and watch your project come to life! If you get errors, that means you might have typed something wrong. Carefully check the syntax and spelling to the above script. Even the slightest mistake will throw it off!