+ Reply to Thread
Results 1 to 10 of 10

Sprite.hitArea - property of Actionscript 3.0

This is a discussion on Sprite.hitArea - property of Actionscript 3.0 within the Tutorials forums, part of the Flash English category; I remember when using Flash 8 I needed once in a while to create a 'transparent' area such as an ...

  1. #1
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11

    Sprite.hitArea - property of Actionscript 3.0

    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.

    2 MovieClip

    I create a Document Class, an AS file saved as 'Main.as', implemented the following way:
    Code:
    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!

    Attached Files

  2. #2
    Junior Member Settled In Abdul is on a distinguished road
    Join Date
    Oct 2007
    Posts
    16
    Rep Power
    0
    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

  3. #3
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11
    Hi there :) welcome here

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

  4. #4
    Junior Member Settled In Abdul is on a distinguished road
    Join Date
    Oct 2007
    Posts
    16
    Rep Power
    0
    Hey ! Thank you dude!
    That was quick ... and i've got it ... thanks a million!

    Much obliged!

  5. #5
    Junior Member Settled In Abdul is on a distinguished road
    Join Date
    Oct 2007
    Posts
    16
    Rep Power
    0
    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

  6. #6
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11
    Are you using Flash CS3 version ?

  7. #7
    Junior Member Settled In Abdul is on a distinguished road
    Join Date
    Oct 2007
    Posts
    16
    Rep Power
    0
    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.

  8. #8
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11
    You can't use these scripts with Flash 8. You need Flash CS3

  9. #9
    Junior Member Settled In Abdul is on a distinguished road
    Join Date
    Oct 2007
    Posts
    16
    Rep Power
    0
    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 :>

  10. #10
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11
    Your welcome

+ Reply to Thread

Similar Threads

  1. Z property Flash CS4 sample 2
    By Flep in forum Flash CS4 Tutorials
    Replies: 4
    Last Post: 09-01-10, 12:48
  2. Name property problem
    By xPINKMERCEDESx in forum advanced Actionscript 3.0
    Replies: 1
    Last Post: 19-04-09, 01:35
  3. Sprite.hitArea una proprietą di Actionscript 3.0
    By Flep in forum Articoli e tutorials
    Replies: 13
    Last Post: 03-04-09, 17:24
  4. Understanding MovieClip z property of Flash CS4
    By Flep in forum Flash CS4 Tutorials
    Replies: 0
    Last Post: 23-11-08, 07:38
  5. hitArea arbitrariamente complessa da bitmapdata???
    By giovapaglia in forum Actionscript 3.0 avanzato
    Replies: 4
    Last Post: 01-10-07, 10:49

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts