go to introduction

go to next step

Step 1: Creating the component

The component we're going to create is called Very Simple Button. You can pretty much guess what it's going to be from its name! The component itself is not a real-world component that you would use in a professional application (it is not very customizable, as you shall see.) I have purposefully simplified it so that we can concentrate on the overall process of component creation and packaging rather than wasting time and precious brain cells on the details of creating functionality for a specific component. If you're ready to get started, open up very_simple_button_1.fla in Flash and follow along.

1. Centered on Stage, you will find our simple button component. Right-click (Ctrl-Click) on it and select Edit In Place to edit it.
2. Click on the first frame of the Actions layer. You should see the following script.

#initclip
VerySimpleButton = function() {
        this.icon_mc._visible = false; // hide the icon
        // draw the button
        this.drawButton();
}
// Make VerySimpleButton inherit movie clip methods
VerySimpleButton.prototype = new MovieClip();

// Register the VerySimpleButton class to the verySimpleButton movie clip symbol
Object.registerClass("VerySimpleButton", verySimpleButton);

// drawButton method (private) : Draws the button and label
VerySimpleButton.prototype.drawButton = function() {
        // record the current width and height
        var w = this._width;
        var h = this._height;
        this._xscale = this._yscale = 100;	// reset the scale to 100%
        var button_mc = this.createEmptyMovieClip("button_mc", 1000);
        var borderColor = 0x00000;
        var bgColor = 0xFFFFFF;
        var borderThickness = 1;
        
        with (button_mc) {
                
                // draw the button
                moveTo(0,0);
                lineStyle(borderThickness, borderColor, 100);
                beginFill(bgColor, 100);
                lineTo(w, 0);
                lineTo(w, h);
                lineTo(0, h);
                lineTo(0, 0);
                
                // calculations to center the label textfield
                var ascenderCompensation = this.textSize/3; // compensate for 
                                                  //the ascenders of y, g, etc.
                var txtYCoor = h / 2 - (this.textSize + ascenderCompensation) / 2;
                var txtHeight = this.textSize*2;
                
                // create the label textfield
                createTextField("label_txt", 1001, 0, txtYCoor, w, txtHeight);
                
                // apply the text formatting
                label_format = new TextFormat();
                label_format.font = this.textFont;
                label_format.color = this.textColor;
                label_format.size = this.textSize;
                label_format.align = "center";
                label_txt.text = this.textLabel;
                label_txt.setTextFormat(label_format);
                
        }
        
        // set the callback function
        button_mc.callbackObj = this._parent;
        button_mc.callbackFunc = this.changeHandler;
        button_mc.classRef = this;
        
        // onRelease handler (private) : calls callback function
        button_mc.onRelease = function() {
                this.callbackObj[this.callbackFunc]( this.classRef );
        }
}

// getLabel (public) : Gets the current button's label
VerySimpleButton.prototype.getLabel = function () {
        return (this.textLabel);
}

// setLabel (public) : Sets hte current button's label
VerySimpleButton.prototype.setLabel = function( newLabel ) {
        this.textLabel = newLabel;
        this.drawButton();
}
#endinitclip
    

3. As you can see, the component is very simple. We start off in the class constructor by hiding the icon for the component once the movie runs. The icon is currently what you see when you drag a copy of the component on to the stage. Although we will be implementing Live Preview at some point (which will replace the icon), users can turn Live Preview off in the authoring environment so it is necessary that we implement the icon even if we support Live Preview. After hiding the icon, the class constructor calls the drawButton method.
   
   The drawButton method is similarly straightforward. In it we first save the component's current width and height (since the user/developer may have resized the component in the authoring environment.) We then set the scale of the component to 100% (its original size) so that we don't end up working with a magnified (scaled) version of the clip. This is actually a very standard method utilized by all components that resize themselves automatically. Next, we draw a rectangle with a black border and a white background and place a text field (the button's label) at its center. Finally, we overwrite the button's onRelease handler to call a custom callback function (change handler) if one was specified in the component's parameters.
   
   Besides the private drawButton method, our Very Simple Button component has two public methods: getLabel and setLabel. The getLabel method simply returns the current label of the button and the setLabel method updates it. The setLabel method also causes the button to redraw itself in order to display the new label.
   
4. All right, now that we know the internals of the components let's take a quick look at how it is used. Return to the first Scene by clicking on the Scene 1 link below the Timeline (see image, below.)
   
   
   
5. Display the Property Inspector if it isn't already showing (Ctrl-F3; Window->Properties) and click on the instance of the Very Simple Button component on the Stage to select it. Its component parameters should appear in the Property Inspector as shown below.
   
   
   
6. As you can see, I've given the component an instance name of myButton_mc. Also, The font for the label (textFont) has been set to Times New Roman. The text size is at 18 points and the label should read "My Very Simple Button". The changeHandler is set so that a function called onMyButtonRelease on the parent timeline of the button should be called each time the button is clicked (in our case, the parent timeline of the button happens to be the _root timeline.) Feel free to test the movie and to experiment with changing any of these parameters (as well as resizing the button on Stage.)
   
7. So where do we define the change handler (callback function) for the button? Click on the first frame of the Actions layer and look at the script:

// create the callback function
onMyButtonRelease = function( theButton ) {
        trace (theButton.getLabel()+" released!");
}

// test the setLabel method
// myButton_mc.setLabel("Some other label!");

8. The onMyButtonRelease callback function (change handler) that we define is very simple: It takes as its sole argument a reference to the button that was clicked (this is sent by the component.) In our simple example, we merely trace the label of the button in the Output window. Try running the movie and clicking on the button to make sure it works.
   
9. What about the commented out line? It's an example of how we can call a component's method. Uncomment the second line and run the movie. Simple, isn't it! Some might even say... very simple!
   
10. Well, you should now be familiar with our Very Simple Button component so we can move on to the really tasty bits of the tutorial: Creating a Custom UI, adding Live Preview, writing the documentation and implementing syntax highlighting and code completion for the component's methods.

go to introduction

go to next step