public static function commatizeNumber( n:Number ):String {
      var a:Array = new Array();
      var commatized:String = '';
      var decimal:String = '';
      if( int( n ) != n ) {
        // if the number isn't an integer then get everything after the decimal
        decimal = '.' + n.toString().split( '.' )[1];
        n = int( n ); // make n an integer
      }
      var numString:String = String( n );

      var place:int = numString.length; // start at the end
      while( place > 0 ) {
        var s:String;
        // stop the while-loop
        if( place - 3 < 0 ) {
           place = 0;
           s = numString.substr( 0, numString.length % 3 );
         } else {
           place -= 3;
           s = numString.substr( place, 3 );
         }

         a.push( s );
       }
       var len:int = a.length
       for( var i:int = len - 1; i >= 0; i-- ) {
        // prevents the addition of a comma at the end of the String.
        commatized += ( i != 0 ) ? a[i] + ',' : a[i];
      }
      commatized += decimal;
      return commatized;
    }

This code seems a bit inelegant to me. Maybe it’s because I wrote it this morning before having coffee. :) Let me know if you see a way to make it better.

Add commas to a number for readability originally appeared on polyGeek.com on February 18, 2010.

• A bunch of Sprites
• 1 cup of graphics.lineStyle
• A dash of Vector3D and Matrix3D – adds an extra dimension to the dish ( ha-ha )
• And most importantly a pinch of sin and cosine.

Directions

It is surprisingly easy to make this dish. The entire deal comes down to one line of code:

s.graphics.lineTo( Math.sin( i + rotation ) * r, Math.cos( i + rotation ) * r );

Once you have that the rest just falls into place. The entire WavyCircles class is only a few lines of code:

[cc lang="actionscript3"]package com.polyGeek.patterns {
	import flash.display.Sprite;
	public class WavyCircle extends Sprite {
		public function WavyCircle( s:Sprite, radius:int, amplitude:int, period:int, rotation:Number ) {
			super();
			var step:Number = 0.01;
			var len:Number = 2 * Math.PI + step;
			for( var i:Number = -0.01; i < len; i+= step ) {
var r:Number = radius + amplitude * ( Math.sin( period * i ) * Math.cos( period * i ) );	 				 				if( i >= 0 ) {
					s.graphics.lineTo( Math.sin( i + rotation ) * r, Math.cos( i + rotation ) * r );
				} else {
					s.graphics.moveTo( Math.sin( i + rotation ) * r, Math.cos( i + rotation ) * r );
				}
			}
		}
	}
}[/cc]

Ya see. That wasn’t so bad now was it? Most of the work on this came in the MXML and getting the auto-pilot and sliders going. Not hard. Just time consuming. I did all this coding back in the Spring – 9 months ago. I get a bit distracted over the summer and never published it. Of course I ported it over to Flex4 before putting it up. That was pretty easy. Most of the work was just replacing “<mx” with “<s” and that sort of thing. Not that I had to. Just wanted to.

I’d suggest turning off the auto-pilot and manually changing the radius, amplitude, period and rotation. Then take a look at the source code. It should be pretty easy to make since of it.

And yes, I should hook this up to an MP3 player and throw a few more WavyCircles in there that change based on the beat. Maybe later.

Using the DrawingAPI to make wavy circles and stars originally appeared on polyGeek.com on January 2, 2010.

1. myBitmapData.perlinNoise which is sort of smooth gradiations of patterns. Sort of looks like a nebula to me, or
2. myBitmapData.noise which is much like static, just a bunch of randomly colored dots

It is very easy to use each method but how changes in the parameters can change the output isn’t very obvious. So I created this Explorer because that’s what I do. I’m an Explorer of Actionscript. :)

And now…
Now you can go out and make some noise of your own. Maybe something a little more creative than this. Be sure to drop a comment below if you have anything you would like to share.

Notes
The last parameter passed in the perlinNoise method is for an array of offsets. There’s no easy way to add user controls for editing that many possible arrays – one for each octave. Therefor I just left it out since the default is null. I also did a few experiments with adding an offset array behind the scenes without any user control but the change in visual appearance of the output was so small that I didn’t think it was worth the effort. It’s quite possible I wasn’t doing it right so you should play with it yourself.

Coding conventions
In this Explorer I experimented with changing my coding conventions for giving IDs to components. I usually just give components a descriptive ID and I don’t think about the format that much. This time I placed the type of component at the beginning of the ID string followed by an underscore and then a descriptive name. I often get to a point in an method where I need to access a component and I have to remember the name. The Outline panel is helpful but I don’t use it as much as I should. With this convention all I have to do is type in slid… to get the code hinting for all of the slider components and then just pick it out of the lineup.

What do you think of this convention?

Explorer for BitmapData.perlinNoise and BitmapData.noise originally appeared on polyGeek.com on April 5, 2009.

Well, I’m tired as hell and I’m not going to take it anymore. I figured they had to be a better way so I started digging around in the Application.application properties and found the url property. I should have done this ages ago. In fact, I could swear that I saw a blog post about something like this months ago but I didn’t really pay attention and then couldn’t find it again. So if you blogged about this a few months ago thanks for planting the seed for me to get off my ass and start using this approach.

The very simple way to set this up is to simply ask:

if( Application.application.url.indexOf( 'localhost' != -1 ) {
// this is the localhost
} else {
// you are not on the localhost
}

With this you can set your RemoteObject connection properties depending on the location that the SWF is running from. Now you won’t have to change any settings when exporting.

If you’d like to take this a step further I wrote a static class to help. It will tell you if you’re on the localhost and much more. Look at the Flex app below to see all the properties.

Event Dispatcher
The version above is all ready to go. The only thing that it lacks is an event dispatcher at the end of the init() method. I use my own custom event dispatcher – Zion – which works great for me but might not be your cup of tea. I’d suggest adding your own event dispatcher but if you want here’s the same source code as above with my Zion class dispatching the event for you.

localhost or not localhost, that is the question originally appeared on polyGeek.com on March 22, 2009.

Dragging the mouse inputs the values for the Rectangle parameter. The radio buttons to the right allow you to control the BlendingMode and ColorTransformation parameters.

At the very bottom you can see text output of the exact values that went into drawing the pixels into the BitmapData.

BitmapData.draw originally appeared on polyGeek.com on March 17, 2009.

It can’t get more basic than the Bitmap constructor. Here you can see how changing the pixelSnapping and smoothing both effect visual representation of the BitmapData.

pixelSnapping and smoothing don’t matter much if an image just sits in place and isn’t moved, resized or rotated. But if you do any of those you’ll see a big difference.

No code hinting
One thing I noticed in creating this example is that the code hinting and refactoring do not work on the class names of the embeded assets. Maybe we’ll get that with Gumbo.

BitmapData Explorer originally appeared on polyGeek.com on March 12, 2009.

Here’s the gist of how to apply this technique. You can check out the source to see the whole story.

First you need to listen to the headerRelease event on the datagrid. In your handler you can sort the ArrayCollection ( _nflTeams ) that acts as the dataProvider. Once you have _nflTeams sorted you loop through it and create an array of the teamColors. The _nflTeams AC has four colors per team. I’m using the first color [0] as the background and the second [1] as the font-color.

The background color gets applied as a style using the setStyle method on the Datagrid:

nflTeamsDG.setStyle( 'alternatingItemColors', colors );

The font color is applied in the custom renderer for each column since it is part of the data property of each renderer:

private function onDataChange():void {
var fontColor:String = this.data.teamColors.split( ',' )[1];
labelLink.setStyle( 'color', fontColor );
}

That’s pretty much it. There isn’t much source code to wade through. Unfortunately I worked on this yesterday and didn’t bother cleaning it up this morning before posting. If you notice an mistakes that’s why. ( Note to self: always clean your code before going to bed. )

Using unique background colors for each row of a Datagrid originally appeared on polyGeek.com on March 10, 2009.

Here’s a look at the code for one of the icons:

.icons {
Actionscript: Embed( 'assets/icons/Actionscript.png' );
AIR: Embed( 'assets/icons/AIR.png' );
AMF: Embed( 'assets/icons/AMFPHP.png' );
Flash: Embed( 'assets/icons/Flash.png' );
Flex: Embed( 'assets/icons/Flex.png' );
FMS: Embed( 'assets/icons/FlashMediaServer.png' );
Photoshop: Embed( 'assets/icons/Photoshop.png' );
}

// declare the var as a local
private var _zongyOverEffect:Zongy;
private var _zongyOverEffect:Zongy;

private function init():void {
//initialize the effect/class
_zongyOverEffect = new Zongy( 1.02, 1.2, 250 );
}

private function zongyOver( e:Event ):void {
_zongyOverEffect.start( e.currentTarget as UIComponent );
}

private function getURL( e:Event, s:String ):void {
_zongyClickEffect.start( e.currentTarget as UIComponent );
Tron.openLink( s );
}

<mx:Image source="{ StyleManager.getStyleDeclaration('.icons').getStyle( 'Flex' ) }"
click="getURL( event, 'http://polygeek.com/tag/flex' );"
rollOver="zongyOver( event );"
useHandCursor="true"
mouseChildren="false"
buttonMode="true" />

The first thing you’ll notice is the source isn’t a path to a file. Instead I created one style .icons to hold all the icon paths. And then use the StyleManager to set the specific value of each Image. I’ve found that it’s a handy way of manage assets. ( Thanks to Juan Sanchez and Any McIntosh Creating Visual Experiences with Flex 3.0 for the tip. )

The getURL method applies the _zongyClickEffect and then opens the link using a static method from my Tron class to open a URL. ( Tron is where I keep my generic utility functions that I use on most every project. )

Of course while I’m at it I might as well apply Zongy to the page nav as well. Easy enough.

Then I started messing around and drew my polyGeek logo using the drawing API – more on that later. So now the logo is created with code and is used for the mask of a gradient so that I get the same look as before. Add a drop shadow and call it done.

The hardest thing was figuring out how to rotate a gradient drawn with graphics.beginGradientFill. It’s simple to do just not very obvious.

var matrix:Matrix = new Matrix();
matrix.createGradientBox( 450, 50, Math.PI/2, 0, 0 );

polyGeekcomBG.graphics.beginGradientFill( GradientType.LINEAR,
[ 0xFFFFFF, 0x000000 ],
[ 1, 1 ], [ 1, 255 ],
matrix );

polyGeekcomBG.graphics.drawRect( 0, 0, 450, 50 );

I created a createGradientBox explorer just to see exactly how changing the parameters effected the gradient.

But what about the letters: polyGeek.com? I can’t leave that as a bitmap can I? Nope, so I created a label and used it as a mask, blah, blah, blah. But the problem is that I need to use Arial Black as the font or it won’t look exactly right. In that case I’d have to embed the font but only a few characters. So I created an app for making @font-face declarations with specific only characters embeded. And of course I did the same thing for the mi coda, su code which uses the Lynch font which isn’t likely to be on many computers out there.

Flex apps have now assimilated the banner and comment submission here on polyGeek.com. You will become one with the Flex. Resistance is futile. :-)

polyGeek.com undergoing Flex assimilation originally appeared on polyGeek.com on March 9, 2009.

The font for polyGeek.com is Arial Black. Commen enough but it isn’t universal. ( Is any font? ) So I had to embed it. But I don’t want to embed the entire font. The user can’t type or anything so I only need the characters you see.

It would only take a few minutes to look up the unicode values for the specific characters to embed but why not spend an hour making an app in the off chance that I ever need to embed parts of another font.

The app here removes any duplicate characters you might type in. But it doesn’t look for consecutive characters to make a range out of. It just makes a range of one for each character.

Check out the source code if you’d like to see how it’s done.

There is also an AIR version of this app – thanks or the suggestion Tink – which can be downloaded at the Adobe Marketplace.

Using Unicode ranges in Flex CSS originally appeared on polyGeek.com on March 8, 2009.

Since the beginGradientFill expects a matrix as the 5th parameter I figured that was the obvious place to change the orientation of the gradient. Now the question becomes what sort of matrix do I need to create the effect I’m looking for? After toying around for a while I was able to change the gradient but not in the way I expected. Changing values and the publishing again really isn’t a good way to figure out how something works. So I created an explorer for the createGradientBox method so that I could see it change and better understand how it works. Which reminds me of one of my favorite quotes from DUNE.

A process cannot be understood by stopping it. Understanding must move with the flow of the process, must join it and flow with it.
-First Law of Mentat, DUNE

Now you can explore the createGradientBox to your hearts content.

createGradientBox Explorer originally appeared on polyGeek.com on March 7, 2009.