FlexMan » Button http://flexman.info Everything is Flex Sun, 30 Oct 2011 12:46:12 +0000 en hourly 1 http://wordpress.org/?v=3.0 Interesting Tutorial: Make a Magnetic Button in Flex 4 http://flexman.info/2010/07/09/interesting-tutorial-make-a-magnetic-button-in-flex-4/ http://flexman.info/2010/07/09/interesting-tutorial-make-a-magnetic-button-in-flex-4/#comments Fri, 09 Jul 2010 01:52:53 +0000 admin http://flexman.info/?p=358 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.

Related Posts

]]> http://flexman.info/2010/07/09/interesting-tutorial-make-a-magnetic-button-in-flex-4/feed/ 0 How to create a button and assign a value to a text box within it in actionscript? http://flexman.info/2008/04/21/how-to-create-a-button-and-assign-a-value-to-a-text-box-within-it-in-actionscript/ http://flexman.info/2008/04/21/how-to-create-a-button-and-assign-a-value-to-a-text-box-within-it-in-actionscript/#comments Mon, 21 Apr 2008 10:17:27 +0000 admin http://flexman.info/?p=4 Can we create an instance of a button from the library dynamically?

If you have already a button Symbol in your Library with the linkageName buttonSymbol just attach the button on Stage and asign values to it via the button’s name.

The full code:

  1. this.attachMovie("buttonSymbol", "btn", 1);
  2. this.btn.txtField.text = "a Text";


The above is not a good way to resolve it.

The problem:

Creating buttons dynamically and updating the button text per button.

Failed solution 1: multiple buttons with attachMove(). While the buttons can be duped and thus have unique instance names the dynamic text fields in them do not – though we have seemingly unique buttons all the text fields within them are considered the same and updating one will update them all with the same thing. Essentialy this does not work for multiple attached buttons:

dynamicButtonInstanceName.dynamicTextFieldVarName = arg;

Failed solution 2: dynamically create text fields on top of the dynamically created buttons. This fails because it effectively “turns off” the button’s behaviour – the text when appearing over the button kills the button – no rollover, no events – nothing. Must be a bug/limitation of some kind.

Succesful solution - encapsulate the button & text in a move clip. Dupe the clip as many times as needed. The movie clip consists of a blank button (no text) on one layer and a dynamic text field on another layer. use AttachMovie to dupe this movie clip and you will be able to succesfully update the contents of the text field and the button will still work. The bonus is that you only need to position the encapsulating movie clip and not the button and text individualy.

dynamicMovieClipInstanceName.dynamicTextFieldVarNa me = arg;

Related Posts

]]> http://flexman.info/2008/04/21/how-to-create-a-button-and-assign-a-value-to-a-text-box-within-it-in-actionscript/feed/ 0