Home ProjectsThe Computus Engine AS3 component: AnimatedButton

AS3 component: AnimatedButton

by John

Download the code

Now that I have finished the BaseComponent class I think it’s time to build a first component. The secret to creating a scalable framework is to start by building the simplest components, then combine these to build the complex ones. I’m going to start with a simple animated button.

Flash has had a Button primitive since the very early days. Buttons are special MovieClips that contain only four frames. Each frame is designated to one of the states: Up, Over, Down and Hit. The Hit frame defines the active mouse area and the other three contain the graphical presentation states for the button. The main limitation of Button is that you only get one frame per state. Getting the individual states to animate can be done but it’s a bit of hack – you needed to create three MovieClips and place them in each state of the button.

How the AnimatedButton class works
What I’ve tried to do with the AnimatedButton class is to keep all the animation inside a single MovieClip called ‘states’. A standard Button called ‘hotspot’ defines the hit area for the AnimatedButton. The result is an easily editable and smoothly animated button.

AnimatedButton demo: bird animation for Psygnosis by John Dalziel 1990

If you download the source you’ll see just how simple the code is. The class extends BaseComponent so all the memory management is siloed in the init() and destroy() functions – it’s here that the hotspot event listeners are added and removed. Notice that the class does not track clicks. If you need to capture clicks you can listen for Mouse.CLICK events inside the parent movie (Content.as in this demo).

Much like a simple Button, the hit area is kept separate from the graphics. This stops the animation from dynamically changing the size and shape of the hit area. Skinning an AnimatedButton is as simple as editing the ‘states’ movie. Repositioning or resizing an AnimatedButton is as simple as scaling or positioning the ‘hotspot’ movie.

One final old-school Flash trick
This hotspot resizing can even be done in code thanks to an old-school Flash trick. Normally an ’empty’ Flash button (that is a button that contains only a hit area) cannot be resized in code because it has no graphical assets and therefore it has no size! The button I’m using contains a MovieClip block with its alpha set to zero. This stops it being visible but because a graphic exists it can be re-sized from code.

The Code: AnimatedButton.as

package org.computus.ui
{
	import flash.events.*;
	import flash.display.SimpleButton
	import flash.display.MovieClip
	import org.computus.core.BaseComponent
	import org.computus.core.IComponent

	public class AnimatedButton extends BaseComponent implements IComponent
	{

	// ------------------------------------------
	// PROPERTIES

	public var hotspot:SimpleButton // hit area
	public var states:MovieClip // animated states

	// ------------------------------------------
	// CONSTRUCTOR

	public function AnimatedButton():void {}

	// ------------------------------------------
	// MEMORY MANAGEMENT

	override public function init():void
	{
		states.mouseChildren = false
		hotspot.useHandCursor = true
		hotspot.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
		hotspot.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
		hotspot.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
	}

	override public function destroy():void
	{
		states.stop()
		hotspot.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
		hotspot.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
		hotspot.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
	}

	// ------------------------------------------
	// EVENTS

	private function mouseDownHandler(event:MouseEvent):void
	{
		states.gotoAndPlay("down")
	}

	private function mouseOutHandler(event:MouseEvent):void
	{
		states.gotoAndPlay("out")
	}

	private function mouseOverHandler(event:MouseEvent):void
	{
		states.gotoAndPlay("over")
	}
}

You may also like

2 comments

Chetan Sachdev August 21, 02008 - 6:26 am

very nice example ..

Thanks 🙂

Reply
Vic August 22, 02008 - 11:45 am

nice start 🙂

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.