go to previous step

go to next step

Step 3: Adding Live Preview

Flash MX allows us to get instant feedback when we change a component's parameters and to have components look (and sometimes, even behave) similarly to how they should when the movie is run, all from within the Flash MX authoring environment. To take advantage of this feature, we need to create a Live Preview SWF and it involves making use of the same Exchange Object that we first encountered when creating our Custom UI. Open up very_simple_button_3.fla and very_simple_live_preview.fla to follow along.

1. Let's start with very_simple_button_3.fla, which demonstrates the Live Preview in action. Open up the FLA, if you haven't already, and click on the component to select it. Now resize it -- using the Free Transform Tool (Q) -- on the Stage. Notice how the button updates its appearance automatically and stretches to fill the size you set for it.
   
2. Click on the "Launch Component Parameters Panel" button in the Property Inspector to display the component's Custom UI and play around with the settings: Change the font, font size and label and see the button update its appearance in real-time from within the Flash authoring environment. That, ladies and gentlemen, is the power of Live Preview. It is absolutely indispensable when you're laying out interfaces (not to mention the coolness factor!)
   
   
   
3. All right, this is cool and all, but how do we do it? Open up very_simple_live_preview.fla and follow along... all will be explained shortly!
   
4. In very_simple_live_preview.fla, click on the first frame of the actions layer. You should see the following script:
   
   

   // don't scale, align with the top-left corner
   Stage.scaleMode = "noscale";
   Stage.align = "LT";
   
   /*
   The onUpdate function gets called every time the parameters 
   for a component get changed in the authoring environment.
   */
   function onUpdate() {
           trace ("onUpdate!");
           
           // remove any existing instances of the Very Simple Button
           _root.preview_mc.removeMovieClip();
           
           // create an instance of the Very Simple Button
           settings = new Object();
           settings.textFont = xch.textFont;
           settings.textSize = xch.textSize;
           settings.textLabel = xch.textLabel;
           settings.changeHandler = xch.changeHandler;
           
           // attach a copy of the Very Simple Button
           _root.attachMovie("verySimpleButton", "preview_mc", 1000, settings);
           
           // make sure that we don't lose the size setting when 
           // user clicks in/out of the component parameters panel
           preview_mc.setSize(Stage.width, Stage.height);
   }
   
   // make sure we update the size of the component 
   // when the live preview is resized!
   function onResize() {
           preview_mc.setSize(Stage.width, Stage.height);
   }
   Stage.addListener(this);
       

5. As you can see, the Live Preview SWF is actually much simpler than the Custom UI. We are doing three things here. First off, we set the Stage so that it doesn't scale and always appears aligned to the top-left edge. This is very important since we want to update the appearance of our component when the user resizes it on the Stage. Next, we create the onUpdate handler. This special handler gets called whenever the Exchange Object changes. This happens when the user updates a component's parameter using either the Custom UI or the built in Component Parameters tab in the Property Inspector. (You can, of course, implement Live Preview without Custom UI and vice-versa, although most professional components will utilize both.)
   
   In the onUpdate handler, we attach an instance of the Very Simple Button component and pass it an initialization object containing the parameters we receive from the Exchange Object. In addition we invoke its setSize method to make sure that it is resized to the width and height of the Stage (in other words the width and height that the user has transformed the component to on Stage.) But wait just a minute... the setSize method? We didn't have a setSize method for the Very Simple Button component! Where did that come from?
   
   Well, the truth is, we're using a Very Slightly Modified Version (tm) of the Very Simple Button in the Live Preview SWF. The only modification, in fact, is the addition of a setSize method. If open up the Library (F11; Ctrl-L) and double-click on the Very Simple Button component to open it up for editing, you will see the handler that we've added to the frame script. Here it is, below:
   
   

   // sets the size -- for live preview only
   VerySimpleButton.prototype.setSize = function(w, h) {
           this._width = w;
           this._height = h;
           this.drawButton();
   }
       

   We also define an onResize handler and set up the current timelime as a Stage listener. This means that whenever the Stage dimensions get changed (i.e., when the user resizes the component on the Stage from within the Flash authoring environment) our onResize handler will get called. All the onResize handler does is to call the setSize method of our component to resize it.

Well, there you go, we now have a component with a Custom UI and Live Preview. You may be tempted at this point to package it up and ship it off. Not so fast, Speedy -- we have a vital feature of professional components that we're missing: the documentation.

go to previous step

go to next step