« Echochrome
Flash 3D Flight »


onReleaseOutside: AS3 Button Engine revisited

September 22nd, 2007 by Luis

A few months ago I wrote a post with a solution to the missing onReleaseOutside event in AS3.

Unfortunately the post has disappeared completely while upgrading some wordpress plugins.

Here there is a resume of the post, a swf demo and the source code of the Button engine that allows you to set sprites as buttons very easily, with some additional events such onReleaseOutside, onRollOutWhileMouseDown, onRollOverWhileMouseDown and the ability to manage in a very natural and intuitive way all the Button Instances in your project.


Download src code.

Simple Usage:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import com.lessrain.as3lib.utils.stage.TopLevel;
  4.     import flash.display.Sprite;
  5.     import com.lessrain.as3lib.controls.button.Button;
  6.     import com.lessrain.as3lib.controls.button.ButtonEvent;
  7.     import com.lessrain.as3lib.controls.button.ButtonList;
  8.     import com.lessrain.as3lib.controls.button.ButtonListEvent;
  9.  
  10.     public class Test extends Sprite
  11.     {
  12.         private var _myButton : Button;
  13.         private var _mySprite : Sprite;
  14.        
  15.         public function Test()
  16.         {
  17.             TopLevel.getInstance().stage = this.stage;
  18.             initialize();
  19.         }
  20.        
  21.         public function initialize():void
  22.         {
  23.             ButtonList.getInstance().addEventListener(ButtonListEvent.BUTTON_ADDED,buttonAddedToList);
  24.             ButtonList.getInstance().addEventListener(ButtonListEvent.BUTTON_REMOVED,buttonRemovedFromList);
  25.            
  26.             _mySprite   =  new Sprite();
  27.             _mySprite.graphics.beginFill(0x660000);
  28.             _mySprite.graphics.drawCircle(250,250,50);
  29.             _mySprite.graphics.endFill();
  30.            
  31.             addChild(_mySprite);
  32.            
  33.             _myButton   = new Button();
  34.            
  35.             _myButton.addEventListener(ButtonEvent.RELEASE,release);
  36.             _myButton.addEventListener(ButtonEvent.RELEASE_OUTSIDE,releaseOutside);
  37.             _myButton.addEventListener(ButtonEvent.PRESS,press);
  38.             _myButton.addEventListener(ButtonEvent.ROLL_OVER,rollOver);
  39.             _myButton.addEventListener(ButtonEvent.ROLL_OUT,rollOut);
  40.             _myButton.addEventListener(ButtonEvent.ROLL_OVER_WHILE_DOWN,press);
  41.             _myButton.addEventListener(ButtonEvent.ROLL_OUT_WHILE_DOWN,rollOutWhileDown);
  42.  
  43.             _myButton.initialize(_mySprite,'myID','myGroup',false,true);
  44.  
  45.         }
  46.        
  47.         private function press(event_:ButtonEvent):void
  48.         {
  49.             trace(String(event_.type));
  50.         }
  51.        
  52.         private function release(event_:ButtonEvent):void
  53.         {
  54.             trace(String(event_.type));
  55.         }
  56.        
  57.         private function releaseOutside(event_:ButtonEvent):void
  58.         {
  59.             trace(String(event_.type));
  60.         }
  61.        
  62.         private function rollOutWhileDown(event_:ButtonEvent):void
  63.         {
  64.             trace(String(event_.type));
  65.         }
  66.        
  67.         private function rollOver(event_:ButtonEvent):void
  68.         {
  69.             trace(String(event_.type));
  70.         }
  71.        
  72.         private function rollOut(event_:ButtonEvent):void
  73.         {
  74.             trace(String(event_.type));
  75.         }
  76.            
  77.         private function buttonAddedToList(event_:ButtonListEvent):void
  78.         {
  79.             var myButton:Button = event_.getButton() as Button;
  80.             trace('--------------------------------------------------');
  81.             trace('Button has been added to the ButtonList:');
  82.             trace('Button GroupID: '+Button(event_.getButton()).groupID);
  83.             trace('Button ID: '+Button(event_.getButton()).id);
  84.             trace('--------------------------------------------------');
  85.         }
  86.        
  87.         private function buttonRemovedFromList(event_:ButtonListEvent):void
  88.         {
  89.             trace('button has been removed:'+event_.currentTarget);
  90.         }
  91.     }
  92. }




Related Links:

This entry was posted on Saturday, September 22nd, 2007 at 9:09 am and is filed under AS3, Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “onReleaseOutside: AS3 Button Engine revisited”

  1. Flash Obscura » Blog Archive » SimpleButton Says:
    September 24th, 2007 at 3:46 am

    […] moving when you release the mouse button. Get it here. Updated the class Related links: lessrain - AS3 Button Engin revisted Share and Enjoy:These icons link to social bookmarking sites where reade […]

  2. Numiko Labs » AS3 no onMouseReleaseOutside Says:
    December 17th, 2007 at 4:37 pm

    […] re are some classes that manage global contol of your various button states. very useful:- http://www.blog.lessrain.com/?p=5 […]

  3. jankees Says:
    May 25th, 2008 at 7:08 pm

    Thanks for sharing! Looks nice, i wonder why they left the onReleaseOutside out of AS3… I have some serious problems with this…

    Kind regards,
    Jankees

  4. Paul Says:
    July 11th, 2008 at 9:41 pm

    I’m using firefox on a mac and your example doesnt fully work. The release outside only registers if I release inside the plugin space. If I release outside the stage then nothing is triggered. Back in as2 this used to work. There has to be a solution for as3.

  5. Dan Says:
    July 18th, 2008 at 8:59 am

    Thanks

  6. zotos Says:
    April 2nd, 2009 at 11:21 am

    does anyone have a solution for what paul said!
    no one seems to have a solution for that!

  7. Andy Says:
    April 17th, 2009 at 5:27 pm

    @zotos I think the onReleaseOutside is now MOUSEUP or MOUSELEAVE events:

    yourmc.addEventListener(MouseEvent.MOUSEDOWN, onMouseDown);

    function onMouseDown(e:MouseEvent):void
    {
    var target:Object = e.currentTarget;
    target.startDrag(true, new Rectangle(0, 5, 0, 195));
    stage.addEventListener(MouseEvent.MOUSEUP, function():void {
    target.stopDrag();
    });
    stage.addEventListener(Event.MOUSE    LEAVE, function():void {
    target.stopDrag();
    });
    }

  8. Weekly Digest for October 29th — Hello. My name is Václav Vančura. Says:
    October 29th, 2009 at 8:42 pm

    […] onReleaseOutside: AS3 Button Engine revisited […]

Leave a Reply