Dynamically create a Flash button from a MovieClip

To dynamically create a button (clickable MovieClip) with ActionScript you only have to define the onRelease event. For example this makes a button out of your MovieClip ‘MyMovieClip’.

class com.mywebsite.MyMovieClip extends MovieClip
{

function MyMovieClip()
{}
public function onRelease()
{
//Do Something
}

}

Frustrating thing however is that your MovieClip is now only clickable on its graphics. So say it has some text and some lines, it will be only clickable when the mouse is exactly hovering above character-pixels or precisely above the line-pixels.

I found a real easy trick that makes a user defined region clickable. Dynamically draw a invisible shape(!) defining the region you want to be clickable using the Flash drawing API. This invisible drawing is impossible in the authoring tool. I tried it, but invisible graphics collapse/disappear.

I defined a function handling the onLoadInit event to draw my “click”-region.

public function onLoadInit()
{

drawClickableRegion();

}

private function drawClickableRegion()
{

beginFill(0xFFFFFF, 0);
moveTo(-2.5, -5);
lineStyle(0, 0xFFFFFF, 0);
lineTo(-2.5,5);
lineTo(35,5);
lineTo(35,-5);
lineTo(-2.5,-5);
endFill();

}

As you can see, my code draws a box between -2.5,-5 and 35,5. I use fill- and line-color 0xFFFFFF with an alpha 0. You can use any arbitrarily chosen color but make sure you set the alpha to 0 to make your shape invisible. From now onwards your dynamically created MovieClip is a button. Remember to redraw this region whenever you use the clear() function on this MovieClip elsewhere in your code.