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 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(){




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: