Creating the Custom UI
To create the custom UI, you create a new Flash presentation. The swf file will run either within the regular property inspector (dimensions are approximately 406 x 72 pixels) or within the component property panel (used when you need a larger area than what would fit in the property inspector).
You will need to create a means in this movie to retrieve the property values the component user will set, namely tbase, theight, tcolor, and applyTint. To build the fuqu index, you will include an indicator of the fuqu, with a warning when it departs from the ideal setting, and an alert when it violates the fuqu grossly.
The key element you need in your custom UI is a movie clip instance you create called "xch". You pass values to your component by having the custom UI write values to properties of xch, such as xch.tbase = 20;.
The custom UI should allow the user to enter new values. In our case, the interface will also show the fuqu warning, as necessary. When the movie with the triangle component is tested or published, Flash copies the properties and values on xch to the component so that it is ready to initialize itself with the values that the user entered.
Take the following steps to create a custom UI:
1. Create a new movie and change its dimensions to 406 x 72.
2. Create an empty movie clip by using Insert > New Symbol and calling it "exchange". Drag an instance of this clip onto the stage and name the instance "xch".
3. Create Static Text for "base", "height", "Red", "Green", "Blue", "fuqu =", "Rating:", and "0-255", and place them as in the illustration.
4. Now, define the text fields we use to retrieve our tbase and theight property values. Create a base and a height text field (type: Input Text), place them above the corresponding Static Text field, and set the instance names to 'bs' and 'ht', respectively.
5. Next, define input text fields we use to retrieve the tint color. Create three more Input Text fields, naming them 'rc', 'gc', and 'bc', (for red color, green color, and blue color), and place them above the corresponding Static Text field. The user will enter an integer between 0 and 255 to represent the amount of that particular color. Numbers below 0 will be set to 0, and numbers above 255 will be set to 255.
6. So that the user can preview the color, we make a tile that shows the current tint setting. Use the drawing tool to create a square. Convert that square into a movie clip, and name the instance 'tintSq'.
7. We can use a pre-defined Flash component, FCheckBox, to set whether or not the user wants to apply the tint color. Open the Components Panel and drag out a Check Box into its place on the stage. In the Properties window, set the text to "Apply Tint?" and its default value to false. Under the property Change Handler, enter tintApply.
8. Now we create the indicators to help the user make friendly triangles. To make the user aware of the fuqu value for the new triangle, create a Dynamic Text field, name it "fuquTF", and place it alongside the "fuqu =" static text.
9. Next, create the fuqu rating indicator, which tells the user if the fuqu is PERFECT (4.211), ACCEPTABLE (between 2.211 and 6.211, but not 4.211), or FAIL. Create a new movie clip called "fuqu text" with three frames. In frame 1, place Static Text "PERFECT", in frame 2, place Static Text "ACCEPTABLE", and in frame 3, place Static Text "FAIL!". Make sure that these texts are left-aligned with respect to one another. In frame 1 of a new layer (label it "actions"), open the Actions editor for the keyframe and enter the instruction "stop();". Finally, close this movie clip and name the instance 'fuquEval'.
|» 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!|