A Better way to write Button Click actions in AS3

26 11 2009

If you ask me two of the most painful things while moving from as2 to as3 have been button actions and hyperlinking to a website.. and ironically those are the most common tasks for a flash designer/developer.

According to most of the blogs, forums and even the adobe site the way to code button actions with a hyperlink is like so

myButton_btn.addEventListener(MouseEvent.MOUSE_OVER, mysite);
function mysite(event:MouseEvent) {
var req1:URLRequest=new URLRequest("http://www.mysite.com");
navigateToURL(req1,"_self");
}

While this works great for a button or two, but if you have say a navigation bar of buttons or say hot spots on a map you are going to have to copy paste that whole code multiple times and keep changing the function name and url for each of them, which is totally going against DRY

In such situations I usually prefer to create a single function and pass the site link as a parameter to the function. The new code could look something like this

function siteLink (myurl:String):Function{
return function():void{
var req1:URLRequest=new URLRequest(myurl);
navigateToURL(req1,"_self");
}}
myButton_btn.addEventListener("mouseDown",siteLink("www.mysite.com"));
yourButton_btn.addEventListener("mouseDown",siteLink("www.yoursite.com"));

You could have this function on the first keyframe on the root and reuse the same function for buttons that you’d have within movieclips , you’ll need to slightly modify the code to this

var myroot = root;
ourButton_btn.addEventListener("mouseDown",myroot.siteLink("www.oursite.com"));

and if you need to call a function on a Mouse Over then the code would look like this

ourButton_btn.addEventListener("mouseOver",siteLink("www.oursite.com"));

Hope this helps





Random() function for Flex and AS3

15 03 2009

While moving from AS2 to AS3 and Flex 3, I really missed the Random() function which is now deprecated in AS3

AS3 now supports only the Math.random() function which will generate a value between 0 and 1.  This doesnt quite replace the Random(n) where it would generate a number from 0 till n-1.

So to overcome this I created my own Random function in flex, and a small demo app to show it..

Here’s the code

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
// This is my custom Random(n) function
private function Random(inputVal:int):int
{
var r:Number = (Math.random() * inputVal)+1;
return r;
}
// a Function thats  triggered by the button
private function btnAction():void
{
var a:int = parseInt(enterText.text);
var b:String= Random(a).toString();
myVtext.text = b;
}
]]>
</mx:Script>
<mx:Panel width="250" height="150" x="50" y="150" horizontalAlign="center" verticalAlign="center">
<mx:TextInput x="150" id="enterText" enabled="true" text="Enter a Number" ></mx:TextInput>
<mx:Label  x="150" id="myVtext" text="its null"></mx:Label>
<mx:Button id="myButton" click="btnAction()" label="Generate Random Number"> </mx:Button>
</mx:Panel>
</mx:Application>








Follow

Get every new post delivered to your Inbox.