A Component starts with a movie clip. We are first going to define the visuals for the triangle within a movie clip, and then write the ActionScript within the movie clip for the triangle class, properties, and methods. We then link the movie clip with the class definition. When the Component is placed in a movie, the class constructor is invoked. The triangle is very simple, so we do not need complex visuals or animation. The triangle has a base, a height, and a tint color property, a boolean flag (property) indicating whether or not to apply the tint, as well as a set of methods for reading and setting those values. The methods access the properties and manipulate the visuals.
Step 1. Create the triangle movie clip
The first step is to create the prototype triangle that we will scale and stretch according to the set base and height. Start by creating a new movie clip, naming it "Triangle Component". Inside that clip, draw an isosceles triangle any way you know how. Next, set the width and height of the triangle using the Property panel to be 10 pixels by 10 pixels.
Select the triangle, open the Align panel, select "To Stage", and align the triangle to the center (horizontally) and bottom (vertically). We align it to the bottom center so that when we place the component on the stage, we know that the base will remain in position when we scale the base and height. Your screen should look as follows:
|» Level Intermediate|
Rating: 8 Votes: 55
|Jonathan Kaye, PhD, is the President and CTO of Amethyst Research LLC, an award-winning interactive design and engineering firm specializing in the creation of online device simulations. He and David Castillo are the authors of "Flash for Interactive Simulation: How to Construct and Use Device Simulations", to be published by Delmar Thomson Learning in November, 2002 (the accompanying web site will be www.FlashSim.com).|
|Download the files used in this tutorial.|
|Download (0 kb)|
|More help? Search our boards for quick answers!|