Using the Button Component in FDT

Today I was wanting to use a button component for use while coding in FDT, and ran into lots of issues, so I thought that I would put up a quick post on how to do this.

Frst create a new Flash AS 3 file in Flash CS4

take a button and add it to your Library

right click the button  -» export swc call it Button. This will produce a Button.swc save someplace where you will remember. I wil beplacing mine in /Users/johnbarrett/Documents/workspace/tutorials/assets

WIll be importing this into FDT, so that we can use the button component while in the FDT environment.

Open FDT, create a new workspace(well you don’t need this, but I am) I will call it /Users/johnbarrett/Documents/workspace/tutorials

Go to your workspace, create a new flash project

Call the project a name of your choice, I am using myButton

Once the proect is create in your Flash Explorer pannel, right click on the project — » go to Linked Library — » add new

give it the path of the button.swc file, making sure that your project is the source(it should be)

Click New, and name it something(Button)and define its path

Click OK, and now you will see your new Linked libary adding the core library click OK and  Finished.

When you look now in your Linked Libary folder you will see your Button.swc added

Now we are ready to write a class that can access the Button Component, just as if we were in the Flash IDE,but only much better, becasue we have the power of FDT!

Click on the source folder(src) create a new Test class, and extend the MovieClip class

here is the example code that I am using

package {
    import flash.display.MovieClip;
    import fl.controls.Button;

    public class Test extends MovieClip {
        public function Test() {
            var myButton:Button = new Button();
            myButton.label = "Click me";
            myButton.toggle =true;
            myButton.move(10, 10);
            myButton.addEventListener(MouseEvent.CLICK, clickHandler);
            function clickHandler(event:MouseEvent):void {
                trace("Event type: " + event.type);


now debug the movie (so we can see the trace), and you will see your button in the External swf(created by FDT),
and everytime you click on it, you will see “Event type: click” in the Console

Leave a Reply