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
 

Activate Your Flash Animations with ActionScript : Page 3

Not all animations should run automatically and continuously. ActionScript gives you the ability to provide users with control over animations and other Flash actions. In this fifth Flash MX tutorial you'll learn how to create complex buttons that use ActionScript commands to cause movie clip objects to disappear and reappear.


advertisement
Assigning ActionScript to the Buttons
The final step in creating this movie is to program the buttons onstage with ActionScript so that clicking on them causes the movie clips to disappear and reappear. Start by assigning names to the instances of the movie clips so that your ActionScript commands have an object name to refer to (see Figure 13). Select the Shape Tween movie clip on the left side of the stage. In the Properties panel name the instance "shape." Then select the Motion Tween movie clip and name its instance "motion."

Figure 13: You assign names to Instances of Symbols using the Properties panel.
Select the Toggle Shape button on the stage and go to the Actions Panel. In the Actions panel, open the "Actions" index at the top of the left subpanel, and then open the "Miscellaneous Actions" index and drag the "Evaluate" action to the blank Script subpanel. Adding the Evaluate action to your script code implements an event handler that looks like this:

on (release) { ; }

The preceding code causes the button to execute a command after the user has released the mouse button while over the button. The next step is to type

_root.shape._visible = !

in the Expression text field in the Actions panel. You may get a message having to do with a syntax error. Ignore it for now.

The line of code _root.shape._visible = ! breaks down as follows: _root. is the path of the Movie clip symbol as it relates to the parent movie. Shape._visible is the name of the movie clip and the property (visibility) that the script is controlling. The exclamation point (!) is a logical NOT operator. Enter _root.shape._visible again in the Expression text box after the exclamation point as well. The final line of command code:



_root.shape._visible = !_root.shape._visible;

Tells Flash to toggle the visibility of the "shape" instance. If the "shape" instance is visible, make it invisible, and if it's invisible, make it visible again. See Figure 14 for an example of how the final code should appear in the Actions panel.

Figure 14: Here's how the visible/invisible toggle code for the Shape button should look.
Repeat this scripting process for the Motion Toggle button, but this time replace the word "shape" in the code with the word "motion." Doing that tells Flash to issue a visible/invisible command to the "Motion" movie clip when a user clicks the Motion Toggle button.

Publish
To preview your movie as it will appear in a stand alone Flash file, select the Test Movie option from the Control menu. When you're 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 then click on the button labeled "Flash Player 6."

In the dialog box that appears, 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 movie, load the generated HTML file into your browser.

From this lesson, you can see how Flash MX's simple scripting language can issue dynamic commands depending on the states of independent objects. This tutorial is the last to heavily feature art elements and animation, so you may want to practice creating more elaborate animations for buttons and movie clips. The rest of this series will focus on ActionScript and interaction among UI elements and external HTML coding.



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