How to make a magnetic button in Flex 4
Line Break
Author: Janez Feldin (6 Articles) - Author Website
Janez likes to experiment with flash in his own free time. His other hobbies are playing volleyball, listening to the music, watching movies and above all else, paragliding.
I have made a simple example on what most people refer to as magnetic (button) on the web. By extending the standard button you are able to do such a thing with Flex 4.
Finished result:
For this I have made a new class which extands spark button (you should extand the component you want to applay “magnetic” effect to it) and it looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | package com.flexblog.components { import flash.events.MouseEvent; import flash.ui.Mouse; import mx.core.FlexGlobals; import mx.events.FlexEvent; import mx.events.MoveEvent; import spark.components.Button; import spark.effects.Move; import spark.effects.easing.Elastic; public class MagneticButton extends Button { // xAncor and yAncor determine the point to which // the button returns when mouse cursor is too far away [Bindable] public var xAncor:Number = 0; [Bindable] public var yAncor:Number = 0; // Distance on x axis which determine maximum // distance from xAncor in one direction [Bindable] public var xDist:Number = 100; // Distance on y axis which determine maximum // distance from yAncor in one direction [Bindable] public var yDist:Number = 50; // Property that makes transitions between different positions private var _move:Move = new Move(this); public function MagneticButton() { super(); /** * Tries to add event listener for mouse move event to stage. * If stage is null than adds event listener for application * complete and than adds event listener for mouse move */ try { _move.easer = new Elastic(); _move.duration = 1500; xAncor = this.x; yAncor = this.y; FlexGlobals.topLevelApplication.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move); } catch(e:Error) { FlexGlobals.topLevelApplication.addEventListener(FlexEvent.APPLICATION_COMPLETE, app_complete); } } /** * Function that is called when Main application is complete. * It sets easer property and duration property for _move, set ancor * of the button to the buttens current x and y position and as * mentioned above adds an event listener for mouse move */ private function app_complete(e:FlexEvent):void { _move.easer = new Elastic(); _move.duration = 1500; xAncor = this.x; yAncor = this.y; stage.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move); } /** * Sets the ancor of the button and also move it to that position. */ public function setAncor(_x:Number,_y:Number):void { xAncor = _x; yAncor = _y; _move.xTo = _x; _move.yTo = _y; _move.play(); } /** * Function that actually calculates and moves the button to the right position. */ private function mouse_move(e:MouseEvent):void { // Some basic math logic to calculate if mouse cursor // is close enough to move the button to that location if ( Math.abs((xAncor + this.width/2) - stage.mouseX) < 2*xDist && Math.abs((yAncor + this.height/2) - stage.mouseY) < 2*yDist ) { _move.xTo = stage.mouseX - this.width/2; _move.yTo = stage.mouseY - this.height/2; } else { _move.xTo = xAncor; _move.yTo = yAncor; } _move.play(); } } } |
With this we have acctualy created new component and to use it we need to add that component to stage in our mxml component just like we would any other component.
Our main.mxml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="com.flexblog.components.*" backgroundColor="#B9B9B9" width="500" height="300" viewSourceURL="srcview/index.html"> <components:MagneticButton label="I am magnetic button" x="100" y="50" xDist="50" yDist="30"/> <components:MagneticButton label="I am also magnetic button" x="300" y="50" xDist="50" yDist="30" /> <s:Button label="I am normal button" x="150" y="150"/> </s:Application> |
Related posts:
- Image as Button in a DataGrid
- Using baseColor to Style Components in Flex 4
- SWIZ Framework in Flex 4 Example: Part I
- SWIZ Framework in Flex 4 Example: Part II
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(10 votes, average: 4.40 out of 5)
Loading ...Comments
6 Responses to “How to make a magnetic button in Flex 4”
Very Cool… I was wondering if it would be possible to move the Cursor of the mouse to the location of the button if it comes into proximity?
Instead of the button moving towards the Mouse
You can’t actually move the mouse cursor in flash. If you really need this you could create your own cursor and replace the original with yours. And than this could be done by instantly checking where your mouse is and if you clicked near button you would have to make sure you execute the same function as you would by clicking the button.
But even if I really needed this I wouldn’t use it because it is a bad idea, it would require a lot of work to be done just for this… I would encourage you to find another way to complete your goal…
Awesome!!!!
How about a magnetic scrolling Spark List which snaps to its rows once the user stopps scrolling ? Somehow like a “Wheel of Fortune”?
For this you would first need to have an animated spark list. Without animations it would not look good. To achive this you would have to change the spart component a lot. I will look at the list component and maybe put together an example of how to do it (depends on the difficulty).
I have a feeling that it would be easier to make your own component if you don’t need too much functionality of the spark list.