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

The Process

Follow these steps to create the Live Preview movie.

1. Create a new movie (file). Set the dimensions of the movie clip to be the same size as the triangle component movie clip, which are 10 by 10 pixels.

2. Label the layer "plain triangle" and place a triangle that is aligned to the bottom center of the stage, exactly like in the triangle component (10 x 10 pixels). Convert this into a movie clip called "triangle graphic", and name the instantiation "tc". This triangle will be our non-tinted triangle.

3. Create a new layer above "plain triangle" layer, call it "tinted triangle", then copy tc onto this layer as well. Rename the instance "tctint".

4. Make a new layer and call it "actions". We are going to put our onUpdate function, which will read the property values and scale the triangle appropriately. Depending on whether or not to show the tinting, onUpdate will show and hide the appropriate triangle movie clips. Place the following code in the first keyframe:

// Routine called whenever component properties have been changed.
// Redraw the triangle based upon the new values. If the tint s/b applied,
// use the tctint triangle. If it should not be applied, use tc.
function onUpdate(){
var ac = _root.xch.applyTint, b = _root.xch.tbase, h = _root.xch.theight;

tc._xscale = 10 * b;
tc._yscale = 10 * h;
tctint._xscale = tc._xscale;
tctint._yscale = tc._yscale;

if (ac) {

tctint._visible = ac;
tc._visible = !ac;

// We maintain two copies of the triangle, tc, for regular non-tinted previewing,
// and tctint, for tinted previewing. By default, hide the tinted triangle.
tctint._visible = false;
// Make a Color for tint to apply.
tc_color = new Color(tctint);

5. It is a good idea at this point to see that you have the Live Preview setting turned on. Pull down the Control menu to verify at the bottom that "Enable Live Preview" is checked. If it is not, select it to turn it on.

6. Save your movie, and then test it (Control > Test Movie). This will create the swf you will use for the real Triangle Component.

7. Now we need to connect the Triangle Component to the Live Preview movie. Open the movie in which you have defined the Triangle Component, then open the Library. Select the Triangle Component and choose Component Definition by right-clicking (Windows) or Ctrl-clicking (Mac) on it.

8. Find the line that reads "Live Preview" and press the "Set" button on the right side. Select the line "Live Preview with .swf file embedded in the file." This bundles the Live Preview swf with the component definition fla. Alternatively, you can choose to keep the Live Preview swf external, which may be good for testing. However, you not only have to enter the absolute path to the file, which means that if you use the component on a different platform this has to be adjusted, but also you must distribute both files.

9. Select OK, and then OK on the Component Definition window, and you are done! When you return to the stage, you should see your Live Preview movie running in place of your component.

» 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!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
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.