Miraz Tutorials

This tutorial will teach you how to create a reusable button class to use in all your futureactionscript projects. Creating custom classes and writing reusablecode are the key factors that elevate AS3 from AS2 aside from speed and performance that is. classes when written are saved as .as files andcan be called into action with a simple copy paste and inner class call. This Tutorial requires you have a knowledge of programming and prior knowledge of how to use flash.

Your Ad Here

Firstly start off by opening 2 files one .fla file and the other a .as file and name them as button.fla and buttonTute.as make sure they are in the same folder. Set the stage colour to a darkish grey for added visibility.

Then make sure that the name of your .as file is set up as your document class this is so the code is runs at runtime with flash player. All you do is type the name of your main .as file into the illustrated text field within the properties pannel.

 Thats all the prep work done now we get into the coding side of things. Not to worry all shall be explained

first off set up the package that all the codes going to be inside

 package{

Then i imported all the classes i was going to be using within this custom button class

it is important that you use the import to basically have all the ones you need listed and ready for runtime

    import flash.display.MovieClip

    import flash.display.Shape

    import flash.display.SimpleButton

    import flash.events.MouseEvent

Then name the class the same as the file name remember this is important so that everything works correctly. class names should always be the same as file names

    

    public class ButtonTute extends MovieClip{

And the on with the constructor function named the same

        

        public function ButtonTute() {

Here i set a variable button with functionality of SimpleButton this carries the states of a button like the upState and downState as im sure you have come across when using buttons in photoshop, flash, fireworks.

        

        var    button:SimpleButton = new SimpleButton();

        

Here i have set the variable up as Shape that means its more like a movie clip and a Sprite

then drawn out a simple black square with a white border along with adding it to the stage for runtime using addChild()

this code has set the state of the button in its upState

        

        var up:Shape = new Shape()

        up.graphics.lineStyle(0, 0xFFFFFF, 1);

        up.graphics.beginFill (0×000000);

        up.graphics.drawRect (0, 0, 100, 50);

        up.graphics.endFill();

        button.upState = up;

        button.x = 200

        button.y = 200

        addChild(button);

The same process was repeated for the over state note that all the settings were changed over to the new var for the overState cleverly named over.

        

        var over:Shape = new Shape()

        over.graphics.lineStyle(0, 0xCCCCCC, 1);

        over.graphics.beginFill (0×000000);

        over.graphics.drawRect (0, 0, 120, 60);

        over.graphics.endFill();

        button.overState = over;

        

and the same again for the down state

        var down:Shape = new Shape()

        down.graphics.lineStyle(0, 0xCCCCCC, 1);

        down.graphics.beginFill (0×000000);

        down.graphics.drawRect (0, 0, 80, 40);

        down.graphics.endFill();

        button.downState = down;

A hitTestState is not visible on the stage at any point its a sort of container if you like that sets the hitTestState

        

        button.hitTestState = up;

Now we do have to set this setting to true as the default is set to false so that we can also trace a double click as well as any others

        

        button.doubleClickEnabled = true;

        

Here i have added event listeners for each of the types of mouse events we want to check the button. The trace messeges we will set for each of these will only be triggered when the button is click.

        button.addEventListener(MouseEvent.CLICK, onClick)

        button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);

        button.addEventListener(MouseEvent.MOUSE_UP, mouseUp);

        button.addEventListener(MouseEvent.DOUBLE_CLICK, onDoubleClick);

        }

        

I set each of the functions along with relevant trace messages


    private function onClick (event:MouseEvent):void{

        trace ("Click");

    }

    private function mouseDown(event:MouseEvent):void{

        trace ("mouse down");

    }

    private function mouseUp (event:MouseEvent):void{

        trace ("Mouse up");

    }

    private function onDoubleClick (event:MouseEvent):void{

        trace ("Double clicked");

    }

    

    }

}

And there we have a very simple yet Reusable button class

please comment and request a tutorial

Similar Posts:

• Photo Viewer tutorial in Flash CS3 using Actionscript 3 part 3
• Mouse Events Actionscript 3 in Flash cs3 Tutorial
• Remove Child () tutorial in Flash CS3 using Actionscript 3
• How to use Event listeners/Handlers in Flash CS3 using Actionscript 3
• Photo Viewer application tutorial in Flash CS3 using Actionscript 3 Part 2