Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Push Flash Interactivity with ActionScript Buttons : Page 4

If you're going to make interactive applications you have to give users clickable apparatus. Learn how to create buttons in Flash MX and then assign complex events to those buttons using ActionScript.


advertisement
Assigning ActionScripts to the Buttons
The final step is to assign ActionScript commands to the buttons in the main timeline to make the Flash movie interactive. Select the Background rectangle in the "Background" layer and delete it from the stage. Replace it with the "Background color shift" Movie Clip from the library. Select the "Background color shift" Movie Clip on the stage and name the instance "Background" in the Properties panel (see Figure 12.)

Figure 12: Give the Background color symbol instance a unique name on the stage.
When using ActionScript with a Symbol, you must give each instance of that symbol a unique name, because you can assign different ActionScript commands to multiple instances of the same symbol. Flash must be able to determine the instance to which the script commands belong.

Select the "Background" button on the stage. In the Actions panel assign the 'with' variable to the button. In the 'Object' field, type in 'background', which refers to the Movie Clip instance on the stage (see Figure 13.)

Figure 13: Naming an instance of a Symbol on the stage.
In the Scripting window of the Actions panel, click on the line that reads

with (background) {

Go to the Actions menu within the Actions panel and assign the 'goto' Movie control to the 'with' variable. From the "Type" pull-down menu, select the "next frame" option. Your ActionScript code should resemble the code in Figure 14. Save the file.

Figure 14: Here's the completed ActionScript for the "background" button.
The ActionScript breaks down as follows: on (release) tells the Flash movie to take the following actions when the mouse is released after clicking the button. With (background) tells the Flash movie to find the instance named "background" and nextFrame(); tells the "background" instance to go to the next frame of the Movie Clip.

Repeat the steps shown above to assign the same ActionScript command to the "type" button.

Select the "COLORS" type graphic symbol in the "COLORS" type layer and delete it from the stage. Replace it with the "Type color shift" Movie Clip from the library. Select the "Type color shift" Movie Clip on the stage and name the instance "type" in the Properties panel. Select the "type" button on the stage and in the Actions panel assign the 'with' variable to the button. In the 'Object' field, input 'type', referring to the Movie Clip instance on the stage. In the Actions panel assign the 'goto' Movie control to the 'with' variable. From the "Type" pull-down menu, select the next frame option. See Figure 15 for an image showing how the Actions panel should appear after you have properly assigned the ActionScript for the "type" button.

Figure 15: Here's the completed ActionScript for the "type" button.
Publish
If you wish to preview your movie as it will appear in a standalone Flash file, click the Control menu and then select the Test Movie option. When you are finished previewing the movie, simply close the window. To create a final Flash file and embed it in an HTML page, click on the Arrow tool, go to the Properties panel, and click on the button labeled Flash Player 6

In the dialog box that appears, simply click the "Publish" button. Clicking the Publish button creates an HTML file with your animated movie embedded in it, located in the directory where you saved your .fla file. To see the completed image, load that HTML file into your browser.

After completing this tutorial, you should begin to see the power of Flash's animation and interactive functions. The movie you just created uses only a handful of letters and a single circle which Flash refers to multiple times, keeping the final file size under 2KB. Try creating a movie using many different Movie Clips that contain the same graphic symbol to see how far you can push and test the Library's capabilities.



John Lee holds a B.F.A. in Graphic Design and is the sole proprietor of John Lee Studios in Louisville, KY where he is a freelance writer, illustrator and Web designer. Samples of his work can be seen at www.johnleestudio.net. Reach him by e-mail .
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date