First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Jonathan Kaye | Website: http://www.amethyst-research.com

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

Added: 2002-04-16
Rating: 8 Votes: 55
(10 being the highest)
» Author
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
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.