Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Navigating Pages and Publishing

An important part of any interface is having some kind of navigation or interactivity in the interface. For example, if you have buttons, you need to add some kind of ActionScript so they can work. Because you're working with Flash, there are several ways to accomplish this task. You will add some simple code to the main Timeline at frame 1 that makes the buttons interact with the mouse. Then, you add some code that moves the playhead to a specific frame label when you click the movie clip button.

Exercise 10: Creating interactive buttons

In Exercise 8, you added "over" frame labels within each menu animation. You needed to do this is so the playhead can move to this frame and play the animation from the specified frame to the end. Specifically, you will add ActionScript in this exercise so this happens when the mouse rolls over each movie clip.

1. Make sure that you are on the main Stage. Click Scene 1 in the Edit Bar to navigate back to the main Stage if necessary.

2. Give each movie clip an instance name, so you can control each instance using ActionScript. Select the info clip instance and open the Property inspector. Type info_mc into the <Instance Name> text field.

3. Repeat this step for the other two movie clip instances. Select the portfolio clip instance and type portfolio_mc into the <Instance Name> text field. Then select the contact clip instance and type contact_mc into the <Instance Name> text field.

4. You can add ActionScript to control these instances, now that the instances have instance names. Select frame 1 on the actions layer. Open the Actions panel and type the following ActionScript into the Script pane, following the stop action you added in an earlier exercise:

info_mc.onRollOver = function() {
..this.gotoAndPlay("over");
};
portfolio_mc.onRollOver = function() {
..this.gotoAndPlay("over");
};
contact_mc.onRollOver = function() {
..this.gotoAndPlay("over");
};

The ActionScript you added previously stops the SWF file on frame 1. Then you tell each button (info_mc, portfolio_mc and contact_mc) to do something when the mouse rolls over the instance (onRollOver). You tell each movie clip to move the playhead to the over frame label and play the movie clip. Therefore, the movie clip plays from the over label, which results in a short tween animation.

5. You created several pages and text headings for each of the different areas for the website. Then, you added some interactivity to the buttons you have for the websites menu. Now you need to make sure that the navigation can happen, so visitors can view each page in the site.

Add the following ActionScript to the Script pane, following the code you added previously in step 3.

info_mc.onRelease = function() {
..gotoAndStop("information");
};
portfolio_mc.onRelease = function() {
..gotoAndStop("portfolio");
};
contact_mc.onRelease = function() {
..gotoAndStop("contact");
};

This ActionScript tells the playhead on the main Timeline to go to the information, portfolio, or contact frame labels and then stop the playhead. Therefore, you do not need to add stop actions on each of those frames like you do at the end of each animated movie clip.

6. Select Control > Test Movie to test the animation and each button. If your buttons do not work properly, go back to the Actions panel and make sure that there are no problems with your code. If you see the Output panel appear with errors, there is probably a syntax error with the code in the file.

You should also check to see that the text you added for the title section of each page is correctly aligned with the animated rectangle. If not, return to the main Timeline and modify the position of the text in question.

7. You created a great deal of movie clips in this FLA file. When you look in the Library, there is a great number of assets to sort through. A good practice to adopt is to use Library folders, as mentioned in an earlier chapter. Click the New Folder button (that's in the bottom-left corner of the Library) twice to create two new library folders. Double-click the folder's name to rename those folders movie clips and graphics. Click and drag all the movie clip symbols into the movie clips folder, and likewise for the graphics.