Buttons & Menus Part 2: Animated Button

So here comes the second part, this time we’re going to be making an animated button like this:

CAUTION. While using this way of handeling menus in projects, I found it a little annoying, and I will look into making a re-write when I get the time for it.

So for this part we’re going to make an animation, I want to start all over, but if you like to continue from last part, you can do that just fine.

Start by making a rectangle just like in last part, this time I made it with a fill. After that convert it to a symbol called FadingEffectWithMouse, and export it for ActionScript like this:

When you click ‘Okay’, it will give you this error message:

It just means Flash couldn’t find any ActionScript document for the class ‘FadingEffectWithMouse’ – not strange because we didn’t make it yet. So just click ok!

Now double click it to enter editing mode. Double click the stroke with the selection tool like this (I have zoomed in all of the pictures):

Cut it (Ctrl+x), make a new layer and paste it in place there (Ctrl+Shift+v). Call the layer with the stroke “stroke”, and the one with the fill “fill” – wonder how he made up those names? Make two other layers called “effectUp” and “effectDown”, and arrange them like this:

I’ve locked the ‘stroke’ and ‘fill’ layer so I won’t change anything on those layers now.

My effect is going to be one second long, I have a fps on 24, that means my movie is going to display 24 frames per second, so I’m going to make 24 frames. Select the frames by click and draging, right click and select Insert Frame:

So now we’re set for making our little animation, I’m going to start like this (Making the rectangle above on the effectUp layer and the lower rectangle on the effectDown layer)

You might think that these rectangels are way to big, as they are only going to cover the fill, but we will deal with that in a nice way later.

Go to the last frame you’ve created, select both the effect layers, right click and select ‘Insert Keyframe’ (this can also be done by pressing F6):

This will enable us to move the two rectangels around without affecting the ones on the first keyframe. I’ve put the bottom of the upper rectangel to y = 0, and the top of the lower rectangel to y = 0, you can do that by using the aling tool. My result is this:

So now we could make a lot of keyframes and adjust the y-position on each frame, but that would take a lot of time, and flash has some built in features for this. We’re going to use one of them now: the Shape tween. It will adjust the shape from one keyframe to the next (with all the shapes on the selected layer). Some times when you use a little more complex shapes this get really screwed, so that’s why I’m not going to do that now. Anyway, this is how to do it: Mark both of the effect layers, right click and select ‘Create Shape Tween’:

Now you can try seeing the effect (if you’ve done this yourself, else then you can download the files by the link in the bottom of the post). Make a hit layer – by copying the fill layer, set the alpha to 0%, and put it in the bottom (remember to unlock the fill layer to do this). Now move the fill layer above the two effect layers, right click it and select mask.

The mask makes the everything “under” it show, while the things not “under” the mask will be hidden. So move both the effect layers up “under” the masked fill layer like this:

Now create a Text layer and put some text on it, I made it a strange size like last time to prove that what we did actually works!

So now for the last part of the desing, make an other layer called “flags”, now you should have these layers – I’ve locked them all so I don’t mess anything up:

Go to the first frame of the flags layer and find the properties panel, and in the name property write “startEffect” – make sure it’s the Frame that is selected, just like this:

Go to the last frame and make a new keyframe (F6) and write “stopEffect”. So now we’ve created the design of our button, and I’ve used a lot of space on posting pictures :D

Now for the actionscript part:

Create a new actionscript file called “FadingEffectWithMouse”, this is going to extend the CenterButton:

package
{
	public class FadingEffectWithMouse extends CenterButton
	{
		public function FadingEffectWithMouse()
		{
			super();
		}
	}
}

The super function calls the constructor function of the class it extends. If we didn’t do this, we wouldn’t be centering the text.

So when we’re going to use the mouse to interact, we have to add some eventlisteners:

			this.addEventListener(MouseEvent.MOUSE_OVER, addEffect)
			this.addEventListener(MouseEvent.MOUSE_OUT, removeEffect)

And lets add these functions then:

		public function addEffect(event:MouseEvent):void
		{
			direction = FORWARD;
			this.addEventListener(Event.ENTER_FRAME, update)
		}
 
		public function removeEffect(event:MouseEvent):void
		{
			direction = BACKWARD;
			this.addEventListener(Event.ENTER_FRAME, update)
		}

The ENTER_FRAME event will be dispachted on every frame the object is on the stage, this means 24 times per second. The dirrection is a variable, and FOWARD and BACK are constants:

		private const FOWARD:int = 1;
		private const BACK:int = -1;
		private var direction:int;

We are going to set the direction to either FORWARD or BACKWARD, we could set the direction to 1 in the addEffect and to -1 in the removeEffect, but this makes more sense don’t it?

Now before we move on we need to import some stuff:

	import flash.events.Event;
	import flash.events.MouseEvent;

Remember those frame labels you made? Let’s use them now.
First make these two variables:

		private var startEffect:int;
		private var stopEffect:int;

They are going to store on wich frame we put those labels, we locate those frames like this:

			this.gotoAndStop("startEffect");
			startEffect = this.currentFrame;
			this.gotoAndStop("stopEffect");
			stopEffect = this.currentFrame;
			this.gotoAndStop("startEffect");

Now all we need to do is create the update function. It is going to change the current frame of the movieclip in the specified direction multiplied by how many frames to move per update:

		private function update(event:Event):void
		{
			this.gotoAndStop(this.currentFrame + direction * framesPerUpdate)
			if (this.currentFrame <= startEffect)
 			{
 				this.gotoAndStop("startEffect");
 				this.removeEventListener(Event.ENTER_FRAME, update)
 			} 
			else if (this.currentFrame >= stopEffect)
			{
				this.gotoAndStop("stopEffect");
				this.removeEventListener(Event.ENTER_FRAME, update)
			}
		}

You might be wondering, “that framesPerUpdate variable, I didn’t see that before did I?”. That’s true, you didn’t. I made this variable in case you figure out your animation is way to long, then you can just change framesPerUpdate for that button instead of editing the effect. So let’s add it.

		public var framesPerUpdate:int=1;

if you test it out, you will get this:

And hey that’s great, but try clicking it. That doesn’t really feel right does it? we need to actually see it when we are pushing it. Lets change that. In the end of the contructor function add this:

			this.addEventListener(MouseEvent.MOUSE_DOWN, downScale)
			this.addEventListener(MouseEvent.MOUSE_UP, normalScale)

and make the two functions like this:

		private function downScale(event:MouseEvent):void
		{
			this.scaleX = 0.9;
			this.scaleY = this.scaleX;
		}
 
		private function normalScale(event:MouseEvent):void
		{
			this.scaleX = 1;
			this.scaleY = this.scaleX;
		}

The scale properties define the percentage of the original size the object will get, where 1 = 100 %. The reason I’m setting the scaleY to scaleX is that if we at some point think it should be smaller (fx 80 %), then we only need to change the scaleX value.

We’re finish for now, and now we have a nice button with animation and a true button feeling:

I zipped all the files, get them here.

In the next part we’re going to fix some small errors from this part – you can try finding them yourself.