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 2

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
Creating Movie Clips with Frame Actions
You will use the two Graphic Symbols you created in the previous section to create the color-shifting Movie Clips to be controlled by buttons and ActionScript. As you create these Movie Clips, you will also place simple ActionScripts in each frame. Deselect all the objects that are present on the stage. Choose the Create New Symbol option from the Insert menu. In the dialog box that appears, name the new symbol "Background color shift" and choose the Movie Clip option. Click OK. Flash will take you to the stage and timeline for the "Background color shift" Movie Clip. Remember that the stage and timeline for a clip is independent of the timeline and stage for the main movie.

Drag the "Background Rectangle" symbol from the library to the center of the stage. Insert a keyframe at frames 2, 3, 4, 5, and 6 in the timeline. Select frame 2 in the timeline, and then use the Arrow tool to select the rectangle symbol on the stage. Go to the Properties panel and change the Tint of the symbol instance in this frame to a different color. Repeat this process of tinting the rectangle Symbol for frames 3, 4, and 5, choosing a different color for the tint in each frame. When you get to frame 6 however, choose the same tint you chose for frame 5. Use Figure 4 as a reference if you need a reminder of how to alter the tint of an instance.

Figure 4: Use the Properties panel to alter the tint of a graphic instance in the IDE.
After setting the colors for each keyframe of the background rectangle Movie Clip, click on keyframe 1 in the timeline. Go to the Actions panel and click on the Actions index in the left sub-panel to open the ActionScript directory. Then click on the Movie Control option to see the available script commands for keyframe one in the timeline. Double-click the "stop" command to assign it to the frame. This command tells the Movie Clip to stop playing when frame 1 is loaded. Repeat this process for frames 2 through 5, assigning the stop script in each one. Issuing the stop command at each frame prevents the Movie Clip from cycling through all the colors when you place it on the main stage. Figure 5 shows the Actions panel as it should appear when applying the ActionScript.

Figure 5: The Actions panel looks like this when you assign ActionScript commands to frames 1-5.
Select keyframe 6 in the timeline. Keyframe 6 will issue the ActionScript command gotoAndPlay. Double click on the Movie Control command goto and make sure the other options in the Actions panel appear as they do in Figure 6. The gotoAndPlay command tells the Movie Clip to return to frame 1, where it will then receive the command to "Stop." The end result is that clicking the "Background" button cycles the colors of the rectangle in the final movie.
Figure 6: Assign the "goto" command to frame 6.
Now that the colors and script commands are in place for the dynamic background, you need to return to Scene 1, or the Main timeline. Click the button labeled "Scene 1" directly under the Timeline panel (see Figure 7.)


Figure 7: The Main timeline should look like this when you return from the Background Rectangle Movie Clip.
Now that you are back in the Primary timeline, you need to create the Movie Clip that features the "COLORS" type. The process is identical to the one you just went through to create the color-changing background, so you should have no problem following these condensed steps. Deselect all the objects on the stage and from the Insert menu choose the Create New Symbol option. In the dialog box that appears, name the new symbol "Type color shift" and choose the Movie Clip option. Click OK. When you're in the new Movie Clip's timeline, drag the "COLORS type" symbol from the library to the center of the stage. Insert keyframes at frames 2, 3, 4, 5, and 6 in the timeline. Change the tint of the symbol at each keyframe to a different color except for frame 6, which you should set so it's identical to the tint in frame 5. After that, assign the stop ActionScript to keyframes 1 through 5 and the gotoAndPlay ActionScript to frame 6. Return to Scene 1 and save your file.



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