FlexMan » Tutorial 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 14+ Basic Tutorials For Away3D http://flexman.info/2009/09/11/14-basic-tutorials-for-away3d/ http://flexman.info/2009/09/11/14-basic-tutorials-for-away3d/#comments Fri, 11 Sep 2009 14:18:15 +0000 admin http://flexman.info/2009/09/11/14-basic-tutorials-for-away3d/ In previous articl :How to Create Flex/Flash 3D Application by Away3D , we have known something about Away3D. As you know Away3D is a very very powerful 3D engine. It will help you saving more time when develop the flash game. But it is not so easy for the beginners. Following is more than 14 very simple and basic tutorials for Away3D. Hope you will enjoy them.


Away3D: Make your 3D program Easily( 14+ great tutorials )

Related Posts

]]> http://flexman.info/2009/09/11/14-basic-tutorials-for-away3d/feed/ 0 Beginning Tutorial For ActionScript Learner http://flexman.info/2009/03/22/beginning-tutorial-for-actionscript-learner/ http://flexman.info/2009/03/22/beginning-tutorial-for-actionscript-learner/#comments Sun, 22 Mar 2009 09:39:52 +0000 admin http://flexman.info/2009/03/22/beginning-tutorial-for-actionscript-learner/ If you are the beginner of ActionScript, you must be interested in the following introduction. There are some basic tutorials teach you how to learn it step by step. Then it’s time to threw away your book, hope you will enjoy them


http://ntt.cc/category/programming/actionscript-tutorials

Related Posts

]]> http://flexman.info/2009/03/22/beginning-tutorial-for-actionscript-learner/feed/ 1 A Video Tutorial About PHP Working With Flex http://flexman.info/2008/11/06/a-video-tutorial-about-php-working-with-flex/ http://flexman.info/2008/11/06/a-video-tutorial-about-php-working-with-flex/#comments Thu, 06 Nov 2008 13:25:57 +0000 admin http://flexman.info/2008/11/06/a-video-tutorial-about-php-working-with-flex/ How to realize the PHP working with Flex? It seems not a problem for the senior Flexer but if you are a beginner then following video tutorial will be helpful to you. It is about 1 hour 19 minutes equal to a lesson. If you have time why not see the video?



Related Posts

]]> http://flexman.info/2008/11/06/a-video-tutorial-about-php-working-with-flex/feed/ 3 A Classical Tutorial: How to Create Sector Menu http://flexman.info/2008/10/05/a-classical-tutorial-how-t-create-sector-menu/ http://flexman.info/2008/10/05/a-classical-tutorial-how-t-create-sector-menu/#comments Sun, 05 Oct 2008 15:51:34 +0000 admin http://flexman.info/2008/10/05/a-classical-tutorial-how-t-create-sector-menu/ Ok, we have introduced a Classical Skin Tutorial of Flex: KingnareStyle. Now let’s continue classical tutorials, this time we will put eyes on Sector Menu. It seems a little complex but this article is very detail in fact teach you step by step. I believe you could well understand it. If you have interesting please read it and create one by yourself.


clip-image008

The Tutorial URL:

http://ntt.cc/2008/09/22/tutorials-step-by-step-to-create-your-sector-menu.html

Related Posts

]]> http://flexman.info/2008/10/05/a-classical-tutorial-how-t-create-sector-menu/feed/ 0 A Classical Skin Tutorial of Flex: KingnareStyle http://flexman.info/2008/10/04/a-classical-skin-tutorial-of-flex-kingnarestyle/ http://flexman.info/2008/10/04/a-classical-skin-tutorial-of-flex-kingnarestyle/#comments Sat, 04 Oct 2008 15:08:02 +0000 admin http://flexman.info/2008/10/04/a-classical-skin-tutorial-of-flex-kingnarestyle/ If you are bored with your application skin availabled now and want to built one by yourself. If you are looking for the tutorial as this. Now I will introduce the following article for you. It has very detail description and explained how to built a skin step by step. If you have read it I believe you must could built a skin of your own style. Why not try it at one? Say Goodbye to the boring skin and change a new one with your mood everyday.


Following is the tutorial URL:

Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle skin produce introduction

Related Posts

]]> http://flexman.info/2008/10/04/a-classical-skin-tutorial-of-flex-kingnarestyle/feed/ 2 An Excellent PureMVC Tutorial http://flexman.info/2008/09/25/an-excellent-puremvc-tutorial/ http://flexman.info/2008/09/25/an-excellent-puremvc-tutorial/#comments Thu, 25 Sep 2008 15:27:31 +0000 admin http://flexman.info/2008/09/25/an-excellent-puremvc-tutorial/

In article Renju Game Builted on PureMVC, we have introduced the excellent frameword: PureMVC. It is not difficult for those developer who have rich development experience of AS3. But to the beginners maybe have some problems. Althout it belongs to lightweight, still has a certain amount of code and the structure is not so simple. The following is a very detail tutorial for PureMVC with code explanation. Although it just explain the Pipes a part of PureMVC. But through the part you could know more about the whole.


Following is an image:

pipessimple

Following is the tutorial address:

http://www.joshuaostrom.com/2008/06/15/understanding-puremvc-pipes/

Related Posts

]]> http://flexman.info/2008/09/25/an-excellent-puremvc-tutorial/feed/ 0 How to use ArrayUtil Class? One of the as3corelib Tutorial http://flexman.info/2008/09/04/how-to-use-arrayutil-class-one-of-the-as3corelib-tutorial/ http://flexman.info/2008/09/04/how-to-use-arrayutil-class-one-of-the-as3corelib-tutorial/#comments Thu, 04 Sep 2008 15:11:06 +0000 admin http://flexman.info/2008/09/04/how-to-use-arrayutil-class-one-of-the-as3corelib-tutorial/ as3corelib is an excellent open source package. The class inside is very convenient to use. But so pity we could only find a JSON sample on its official website. It is so difficult for Flex beginners to understand these classes. Now let’s thank Hydra1983, he has written the serial tutorial for as3corelib. Now the work is still in progress. We could read some first.


Following is an article about the usage of ArrayUtil class with the Demo and code.

as3corelib Tutorial:How to Use ArrayUtil Class in Flex

Related Posts

]]> http://flexman.info/2008/09/04/how-to-use-arrayutil-class-one-of-the-as3corelib-tutorial/feed/ 0 Create a Nano War Game Tutorial by Flash http://flexman.info/2008/08/29/create-a-nano-war-game-tutorial-by-flash/ http://flexman.info/2008/08/29/create-a-nano-war-game-tutorial-by-flash/#comments Fri, 29 Aug 2008 14:34:51 +0000 admin http://flexman.info/2008/08/29/create-a-nano-war-game-tutorial-by-flash/ Nano War is a good RTS/action game. Emanuele Feronato has tried to realize the similar function by Flash and has released the source code. By the way his code comment is very very detail… It’s a so good habit.


Image:

nanowar

 

Following is the Emanuele Feronato Tutorial URL：
http://www.emanueleferonato.com/2008/08/05/create-a-flash-game-like-nano-war/#more-381
Following is the Nano War URL：
http://www.kongregate.com/games/badben/nano-war

Related Posts

]]> http://flexman.info/2008/08/29/create-a-nano-war-game-tutorial-by-flash/feed/ 0