Interesting Tutorial: Make a Magnetic Button in Flex 4

By admin | July 9, 2010

This interesting tutorial explains how to make a magnetic button in Flex 4 with a simple example. Here is the source code of this class which extands spark button:


  1. package com.flexblog.components
  2. {
  3.     import flash.events.MouseEvent;
  4.     import flash.ui.Mouse;
  5.   
  6.     import mx.core.FlexGlobals;
  7.     import mx.events.FlexEvent;
  8.     import mx.events.MoveEvent;
  9.   
  10.     import spark.components.Button;
  11.     import spark.effects.Move;
  12.     import spark.effects.easing.Elastic;
  13.   
  14.     public class MagneticButton extends Button
  15.     {
  16.         // xAncor and yAncor determine the point to which
  17.         // the button returns when mouse cursor is too far away
  18.         [Bindable] public var xAncor:Number = 0;
  19.         [Bindable] public var yAncor:Number = 0;
  20.       
  21.         // Distance on x axis which determine maximum
  22.         // distance from xAncor in one direction
  23.         [Bindable] public var xDist:Number = 100;
  24.       
  25.         // Distance on y axis which determine maximum
  26.         // distance from yAncor in one direction
  27.         [Bindable] public var yDist:Number = 50;
  28.       
  29.         // Property that makes transitions between different positions
  30.         private var _move:Move = new Move(this);
  31.       
  32.  
  33.         public function MagneticButton()
  34.         {
  35.             super();
  36.           
  37.             /**
  38.              * Tries to add event listener for mouse move event to stage.
  39.              * If stage is null than adds event listener for application
  40.              * complete and than adds event listener for mouse move
  41.              */
  42.             try
  43.             {
  44.                 _move.easer = new Elastic();
  45.                 _move.duration = 1500;
  46.               
  47.                 xAncor = this.x;
  48.                 yAncor = this.y;
  49.                 FlexGlobals.topLevelApplication.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move);
  50.             }
  51.             catch(e:Error)
  52.             {
  53.                 FlexGlobals.topLevelApplication.addEventListener(FlexEvent.APPLICATION_COMPLETE, app_complete);
  54.             }
  55.         }
  56.       
  57.         /**
  58.          * Function that is called when Main application is complete.
  59.          * It sets easer property and duration property for _move, set ancor
  60.          * of the button to the buttens current x and y position and as
  61.          * mentioned above adds an event listener for mouse move
  62.          */
  63.         private function app_complete(e:FlexEvent):void
  64.         {
  65.             _move.easer = new Elastic();
  66.             _move.duration = 1500;
  67.           
  68.             xAncor = this.x;
  69.             yAncor = this.y;
  70.           
  71.             stage.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move);
  72.         }
  73.       
  74.         /**
  75.          * Sets the ancor of the button and also move it to that position.
  76.          */
  77.         public function setAncor(_x:Number,_y:Number):void
  78.         {
  79.             xAncor = _x;
  80.             yAncor = _y;
  81.             _move.xTo = _x;
  82.             _move.yTo = _y;
  83.             _move.play();
  84.         }
  85.       
  86.         /**
  87.          *  Function that actually calculates and moves the button to the right position.
  88.          */
  89.         private function mouse_move(e:MouseEvent):void
  90.         {
  91.             // Some basic math logic to calculate if mouse cursor
  92.             // is close enough to move the button to that location
  93.             if ( Math.abs((xAncor + this.width/2) - stage.mouseX) < 2*xDist &&
  94.                  Math.abs((yAncor + this.height/2) - stage.mouseY) < 2*yDist )
  95.             {
  96.                 _move.xTo = stage.mouseX - this.width/2;
  97.                 _move.yTo = stage.mouseY - this.height/2;
  98.             }
  99.             else
  100.             {
  101.                 _move.xTo = xAncor;
  102.                 _move.yTo = yAncor;
  103.             }
  104.             _move.play();
  105.         }
  106.     }
  107. }

This component can be used just like we would any other component.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.                xmlns:s="library://ns.adobe.com/flex/spark"
  4.                xmlns:mx="library://ns.adobe.com/flex/mx"
  5.                xmlns:components="com.flexblog.components.*"
  6.                backgroundColor="#B9B9B9" width="500" height="300"
  7.                viewSourceURL="srcview/index.html">
  8.  
  9.     <components:MagneticButton label="I am magnetic button"
  10.                                x="100" y="50" xDist="50" yDist="30"/>
  11.     <components:MagneticButton label="I am also magnetic button"
  12.                                x="300" y="50" xDist="50" yDist="30" />
  13.     <s:Button label="I am normal button" x="150" y="150"/>
  14.   
  15. </s:Application>

More details can be found here.

Topics: Adobe-Flex | No Comments » | Tags: , , , ,

Related Posts

Leave a Comment

Name:

E-Mail :

Website :

Comments :

RSS

Search Posts

Categories

Archives

Blogroll

Sponsor Links