AS3 – Amazing Map Function.

In: Actionscript|Classes and Functions|Flash|Source Code

9 May 2009

One of the things that makes the Flash community so strong, is the willingness of coders to share their work. I learned actionscript from people sharing code, and that’s what’s inspired me to start sharing some of the things I’ve been working on too. So I thought a good starting point would be to draw peoples attention to a few of the great Classes and Functions that I’ve found on blogs and messageboards, which I regularly use in my projects.

One brillaint function I’ve used in practically all of my projects since finding it, is Joel Gillman’s Map Function.

Joel’s Map function “Re-maps a number from one range to another“, which might sound like quite obscure functionality, but I use it for all sorts of different things. Let’s say you want a movieclip’s alpha to vary based on the user’s X mouse position and its rotation to vary based on the Y mouse position. Instead of writing lots of math, you can wrap it up in the map function.

Let’s take a look at the code -

?View Code ACTIONSCRIPT3
function map(v:Number, a:Number, b:Number, x:Number = 0, y:Number = 1):Number {
    return (v == a) ? x : (v - a) * (y - x) / (b - a) + x;
}

Now that might look pretty confusing – but it’s usage is actually really simple. The map parameters are structured like this – map(value, low1, high1, low2, high2);
So you feed in the value you’re altering (for example mouseX), the lowest that value can be, the highest that value can be, the lowest return value you want, and the highest return value.
Right, let’s take a look at this simple example –
[kml_flashembed fversion="9.0.0" movie="flash-content/MapClass/UsingMapCircleBlog.swf" targetclass="flashmovie" publishmethod="static" width="400" height="300"]

Get Adobe Flash player

[/kml_flashembed]

And the code that made it -

?View Code ACTIONSCRIPT3
var SW:Number = stage.stageWidth;
var SH:Number = stage.stageHeight;
 
var c:MovieClip = new MovieClip();
	c.graphics.beginFill(0xff0000,1);
	c.graphics.drawCircle(0,50,50);
	c.graphics.endFill();
	c.x = SW/2;
	c.y = SH/2;
	c.addEventListener(Event.ENTER_FRAME, circleEvents);
	addChild(c);	
 
function circleEvents(e:Event):void{
	trace(mouseX)
	e.currentTarget.alpha =    map(mouseX, 0, SW, 0, 1);
	e.currentTarget.rotation = map(mouseY, 0, SH, 0, 360);
}
 
function map(v:Number, a:Number, b:Number, x:Number = 0, y:Number = 1):Number {
    return (v == a) ? x : (v - a) * (y - x) / (b - a) + x;
}

So in that swf, the circle’s alpha varies between 0 and 1, based on the mouse’s X position, between 0 and the width of the stage. So, every frame I calculate the alpha using the map function. To set that up, I use the line -

?View Code ACTIONSCRIPT3
	e.currentTarget.alpha =    map(mouseX, 0, SW, 0, 1);

I’m monitoring the mouse’s X position, with a minimum value of 0, a maximum value of the stage width, and I want it to return a value between 0 and 1. Simple.
Similarly, the circle’s rotation ranges from 0 to 360, based on the mouse’s Y value – which ranges from 0 to the height of the stage. So -

?View Code ACTIONSCRIPT3
	e.currentTarget.rotation = map(mouseY, 0, SH, 0, 360);

I hope you find this great function as useful as I did.
Cheers.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon

9 Responses to AS3 – Amazing Map Function.

Avatar

Joel

May 10th, 2009 at 1:28 am

Glad you’ve enjoyed it!

Avatar

Freelance Flash Games

May 15th, 2009 at 1:34 am

Nice website Lawrie. I code in as2, but your tutorials look great.

Mapping seems like it could be useful. Was it used in your Super Letter Game?

Avatar

Lawrie

May 15th, 2009 at 9:04 am

Thanks, glad you like the site!
I didn’t use mapping in Super Letter Game, but only as I made it quite a while ago and it’s in AS2.
I could use it for setting the properties of the letters – relative to their perceived depth, something like –

clip.scaleX = clip.scaleY = Map(clip.depth,minDepth,maxDepth,minScale,maxScale);
clip.alpha = Map(clip.depth,minDepth,maxDepth,0,1);

Avatar

MichaelJW

May 17th, 2009 at 2:53 pm

Wow, this is brilliant! So simple, and yet so powerful. Thanks for sharing it :)

Avatar

Henner

May 25th, 2009 at 10:05 pm

Nice function! Thanks for sharing!

Avatar

LnddMiles

July 21st, 2009 at 9:44 pm

Great post! I’ll subscribe right now wth my feedreader software!

Avatar

JB

July 24th, 2009 at 11:42 pm

Saw the example on wonderfl. Thats going to come in handy. Nice one!
ps
If you have the time, post an example on the PV3D fourm.
cheers

Avatar

Lawrie

July 27th, 2009 at 12:16 pm

Glad you like it John, it’s a great time saver. Hopefully I’ll get the time to write up a PV3d example tonight.

Avatar

Rodrigo

October 28th, 2009 at 12:48 pm

Thanks! works perfect :)

Comment Form

About this blog

This is the blog of Lawrie Cape, an Actionscript developer from Leeds, England.

Photostream

  • 3
  • 2
  • 1
  • sketch(5)

Donate

Found any helpful code? Why not donate a quid or two. Cheers!