Sprite.hitArea - property of Actionscript 3.0

[Flep]

I remember when using Flash 8 I needed once in a while to create a 'transparent' area such as an Hotspot onto which I would apply action on determinate mouse events.

As an example, I was creating a MovieClip of the desired size and transparent colour.* Using the 'old' hitTest, I was assigning actions as the mouse was rolling over that area.*
Surely, this method would still be valid using the new method hitTestObject as seen in the article hitTest with Flash CS3 .  Now though Actionscript 3.0 has a new property of the Sprite Class called hitArea (usable also with the MovieClip class as it inherits from the Sprite Class) available.
*Let's see how to use it' As always, I create a FLA and save it as 'main.fla' of the dimension 550x300, into which I insert:
- a MovieClip (registration point top centred) consisting of a rectangle of the size 550x100 and of transparent colour. I name it 'hit_area_mc' and position it at y=10
- a second MovieClip (registration point bottom centred) containing menu items and a rectangle of the size 550x100. I name it 'menu_mc' and position it to y=10.



I create a Document Class, an AS file saved as 'Main.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.Event;
	
	public class Main extends MovieClip
	{
		private var arriveY:int;
		
		public function Main()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			menu_mc.hitArea=hit_area_mc;
			hit_area_mc.mouseEnabled=false;

			menu_mc.addEventListener(MouseEvent.MOUSE_OVER,setOver);
			menu_mc.addEventListener(MouseEvent.MOUSE_OUT,setOut);
		}
		
		private function setOver(m:MouseEvent):void
		{
			arriveY=98;
			m.currentTarget.removeEventListener(Event.ENTER_FRAME,closeMenu);
			m.currentTarget.addEventListener(Event.ENTER_FRAME,openMenu);
		}
		private function setOut(m:MouseEvent):void
		{
			arriveY=10;
			m.currentTarget.removeEventListener(Event.ENTER_FRAME,openMenu);
			m.currentTarget.addEventListener(Event.ENTER_FRAME,closeMenu);
		}
		
		private function openMenu(e:Event):void
		{
			var dy:Number=arriveY-e.currentTarget.y;
			var ay:Number=dy*.2;
			e.currentTarget.y+=ay;
			if(Math.abs(dy)<=.2)
				e.currentTarget.removeEventListener(Event.ENTER_FRAME,openMenu);
		}
		private function closeMenu(e:Event):void
		{
			var dy:Number=arriveY-e.currentTarget.y;
			var ay:Number=dy*.2;
			e.currentTarget.y+=ay;
			if(Math.abs(dy)<=.2)
				e.currentTarget.removeEventListener(Event.ENTER_FRAME,closeMenu);
		}
	}
}

Rolling over the menu, the result is the following:

Let's analyse the code:

Properties
A numerical variable (int) to which I assign an arrival Y point to apply the inertia effect to 'menu_mc'
private var arriveY:int;

Methods
init();
I impost the frame rate
stage.frameRate=31;
now we will see how to declare the property hitArea.
we assign the MovieClip 'hit_area_mc' to the property hitArea of 'menu_mc'
menu_mc.hitArea=hit_area_mc;
to have it function properly, we need to impost the property mouseEnabled of the MovieClip 'hit_area_mc' to false
hit_area_mc.mouseEnabled=false;
I add the two listeners to the MOUSE_OVER and MOUSE_OUT on the 'menu_mc' which will call the respective methods setOver and setOut
menu_mc.addEventListener(MouseEvent.MOUSE_OVER,set Over);
menu_mc.addEventListener(MouseEvent.MOUSE_OUT,setO ut);

setOver();
I impost the variable 'arriveY' to 98 ('menu_mc' will move with the inertia effect to the coordinate y 98 and open the menu)
arriveY=98;
I remove the listener ENTER_FRAME which calls the method closeMenu (explained next)
m.currentTarget.removeEventListener(Event.ENTER_FR AME,closeMenu);
I add a listener ENTER_FRAME which call the method openMenu (explained next)
m.currentTarget.addEventListener(Event.ENTER_FRAME ,openMenu);

setOut();
I impost the variable 'arriveY' to 10 ('menu:mc' will move with the inertia effect to the coordinate y 10 and close the menu)
arriveY=10;
I remove the listener ENTER_FRAME which calls the method openMenu (explained next)
m.currentTarget.removeEventListener(Event.ENTER_FR AME,openMenu);
I add a listener ENTER_FRAME which calls the method closeMenu (explained next)
m.currentTarget.addEventListener(Event.ENTER_FRAME ,closeMenu);

openMenu();
I apply the inertia effect to the y axe of 'menu_mc' based on the value of the variable 'arriveY' (the menu opens)
var dy:Number=arriveY-e.currentTarget.y;
var ay:Number=dy*.2;
e.currentTarget.y+=ay;
if(Math.abs(dy)<=.2)
e.currentTarget.removeEventListener(Event.ENTER_FR AME,openMenu);

closeMenu();
I apply the inertia effect to the y axe of 'menu_mc' based on the value of the variable 'arriveY' (the menu closes)
var dy:Number=arriveY-e.currentTarget.y;
var ay:Number=dy*.2;
e.currentTarget.y+=ay;
if(Math.abs(dy)<=.2)
e.currentTarget.removeEventListener(Event.ENTER_FR AME,closeMenu);

Source files available at downloads section of this site



See you soon!

[Abdul]

Hello Flep and thanks a lot for the wonderful forum and tutorials. Really impressed by how well everything is organized and presented.

Btw ... i couldn't find this tutorials source file! anyways idea?

Hey thanks again and keep up the great work!

Regards,
Abdul

[Flep]

Hi there :) welcome here

Look at this link:
http://www.flepstudio.org/forum/down...?do=file&id=79

[Abdul]

Hey ! Thank you dude!
That was quick ... and i've got it ... thanks a million!

Much obliged!

[Abdul]

When i try to open any of your flash files downloads, it gives me an "Unexpected file format" error msg! am i doing something wrong? :S

[Flep]

Are you using Flash CS3 version ?

[Abdul]

Oops! Nope ... i am using Flash 8!

But am not sure, does a visitor (say to a page that has AS 3 code) need to install the latest flash player? (i guess so ... i mean since the old compiler won't recognize most of the new commands :S ... i think)


I want to be really good with action script ... any resources you recommend would be really great and appreciated.

Thanks dude! You are one helpful person.

[Flep]

You can't use these scripts with Flash 8. You need Flash CS3

[Abdul]

OK thanks a lot mate ... am still looking trying to find a good place to start learning real action scripting and using external as files.

wish me luck and be generous whenever u can :>

[Flep]

Your welcome