ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
Creating a component preview
http://www.actionscript.org/resources/articles/576/1/Creating-a-component-preview/Page1.html
Tolga Ozdemir
Tolga Özdemir is professionally interested in the usage areas of the internet namely for education and for marketing. Both topics convey somehow the meaning of information engineering, to him. He is a flex/flash developer who has a view on designing but he is indifference to become a designer.

You can reach his writings on actionscript, internet marketing, and e-learning via his web site http://www.tolgaozdemir.net 
By Tolga Ozdemir
Published on March 24, 2007
 

In this tutorial, I’m going to show you how to create a component with a live preview. It is help ful with components which does not have a view or components which starts with alpha zero. This is a powerful aspect of Flash programming.

Creating a component preview

In this tutorial, I’m going to show you how to create a component with a live preview. As you may already guess, sometimes a compiled clip might be annoying if the clip is not seen on the scene. We may solve this problem by making a live preview.

Before we get started, I am telling you about a simple movieclip: xch. xch behaves as a gateway with your component and your preview in design time. All parameters you have comes and goes over this tiny, empty, little movieclip. So, be careful and do not forget to exploit it.

Let's start creating a movieclip and name it as myComp. Then, create a class called myComponent.as and associate it with our myComp movieclip. Our class will be like that:

 

class myComponent extends MovieClip{

   private var frame:String;

   public function get Frame():String{

      return frame;
   }

  [Inspectable(name="Frame number", defaultValue='one', type='String', enumeration="one,two,three")]

  public function set Frame( val:String ):Void{

      frame = val;

  }

  function myComponent(){

      this.gotoAndStop(this.Frame);

  }

}


All work, done up to now, are attached to attachments section of this article at the end of this tutorial, so you may download it and work on that zip file.

Here the hard stuff comes in, now we are ready make a preview for our component. Now, please follow the instructions on the next page:


Creating a component preview
  1. Create a new Flash document and give a name it. I gave myPreview.fla
  2. Resize it, I prefer a 50x50 scene.
  3. Then plot a dynamic text and giv e it a name. Mine is txt_preview
  4. Now, create an empty movieclip, then put it on the scene and give a name. It is not OPTIONAL, it is a MUST. Its name will be xch. This is our gateway.
  5. Finally put the code below on the first frame of your action layer, then publish your movie:

 

function onUpdate(){
     txt_preview.text = xch.Frame;
}


***

Now, we are ready for the second part. We add preview.swf to our component’s view. From the library panel, open our component definition window



You may see the Live preview option. Click the set button and then write the name of your preview swf file.



Then, click ok. Yes, you have done!