RGB to Hexadecimal to HSV conversion in AS3

In my previous post, I needed to do a lot of conversion between different representations of color. I think a post on how to convert color would be useful.

private function RGBToHex(r:uint, g:uint, b:uint):uint{
    var hex:uint = (r << 16 | g << 8 | b);
    return hex;
}

private function HexToRGB(hex:uint):Array{
    var rgb:Array = [];

    var r:uint = hex >> 16 & 0xFF;
    var g:uint = hex >> 8 & 0xFF;
    var b:uint = hex & 0xFF;

    rgb.push(r, g, b);
    return rgb;
}

private function RGBtoHSV(r:uint, g:uint, b:uint):Array{
    var max:uint = Math.max(r, g, b);
    var min:uint = Math.min(r, g, b);

    var hue:Number = 0;
    var saturation:Number = 0;
    var value:Number = 0;

    var hsv:Array = [];

    //get Hue
    if(max == min){
        hue = 0;
    }else if(max == r){
        hue = (60 * (g-b) / (max-min) + 360) % 360;
    }else if(max == g){
        hue = (60 * (b-r) / (max-min) + 120);
    }else if(max == b){
        hue = (60 * (r-g) / (max-min) + 240);
    }

    //get Value
    value = max;

    //get Saturation
    if(max == 0){
        saturation = 0;
    }else{
        saturation = (max - min) / max;
    }

    hsv = [Math.round(hue), Math.round(saturation * 100), Math.round(value / 255 * 100)];
    return hsv;

}

private function HSVtoRGB(h:Number, s:Number, v:Number):Array{
    var r:Number = 0;
    var g:Number = 0;
    var b:Number = 0;
    var rgb:Array = [];

    var tempS:Number = s / 100;
    var tempV:Number = v / 100;

    var hi:int = Math.floor(h/60) % 6;
    var f:Number = h/60 - Math.floor(h/60);
    var p:Number = (tempV * (1 - tempS));
    var q:Number = (tempV * (1 - f * tempS));
    var t:Number = (tempV * (1 - (1 - f) * tempS));

    switch(hi){
        case 0: r = tempV; g = t; b = p; break;
        case 1: r = q; g = tempV; b = p; break;
        case 2: r = p; g = tempV; b = t; break;
        case 3: r = p; g = q; b = tempV; break;
        case 4: r = t; g = p; b = tempV; break;
        case 5: r = tempV; g = p; b = q; break;
    }

    rgb = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    return rgb;
}

The code above requires and returns:

• RGB values between 0 to 255
• Hexadecimal in RRGGBB format
• Hue values between 0 to 360
• Saturation and Value between 0 to 100

Notice that the “middleman” is RGB.

And, just in case you only have the Hexadecimal string to work with, here is the code to convert that string into a usable decimal value.

private function HexToDeci(hex:String):uint{
	var deci:uint = 0;
	var power:uint = hex.length - 1;
	for(var i:uint = 0; i < hex.length; i++){
		var char:String = hex.charAt(i);
		if(parseInt(char) >= 0 &&  parseInt(char) <= 9){
			deci += parseInt(char) * Math.pow(16, power);
		}else{
			switch(char){
				case "A": case "a":	deci += 10 * Math.pow(16, power); break;
				case "B": case "b":	deci += 11 * Math.pow(16, power); break;
				case "C": case "c":	deci += 12 * Math.pow(16, power); break;
				case "D": case "d":	deci += 13 * Math.pow(16, power); break;
				case "E": case "e":	deci += 14 * Math.pow(16, power); break;
				case "F": case "f":	deci += 15 * Math.pow(16, power); break;
			}
		}

		power --;
	}
	return deci;
}

EDIT: I’ve just gathered that there is a much much simpler way to convert a Hexadecimal string into a usable number. I feel kind of stupid right now.

private function HexToDeci(hex:String):uint{
        if (hex.substr(0, 2) != "0x") {
                hex = "0x" + hex;
        }
        return new uint(hex);
}

[Learn] Timer class in AS 3.0

It’s been a while since my last post. My connection has been down for a few days, so I haven’t got the chance to post. But during this downtime, I found some time to create some experiments in Flash/AS3.0 (maybe I’ll post it soon). I needed to call a method at timed intervals in this one experiment, and I thought I was in trouble. I never got around to getting how AS2.0 handled timers, if I did manage to do timers, they end up dirty.

AS3.0 has a much much better Timer class to handle just such events. Now, I’m not going to bother comparing the AS3 Timer class with AS2’s timer handling, I’m just going to give a quick intro to the class.

First, you need to create a new Timer object. The constructor has 2 parameters, delay and repeatCount. delay is the time in milliseconds the intervals will be. repeatCount is the number of times the Timer will run, assigning it 0 will set it to run infinitely.

var myTimer:Timer = new Timer(1000, 5);

Now, we want to write a function that will get called when an interval is passed (every 1 second), and when the whole timer finishes counting (after 5 seconds). The Timer class dispatches two events, TimerEvent.TIMER is dispatched when an interval is passed, TimerEvent.TIMER_COMPLETE is dispatched when the timer is finished (I love how simple that is).

stage.addEventListener(TimerEvent.TIMER, everySecond);
stage.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);

function everySecond(e:TimerEvent):void{
    trace("tick tock!");
}
function onComplete(e:TimerEvent):void{
    trace("Timer finished!");
}

Now, we just need to start the timer. The Timer class has 3 methods, start, stop, and reset. Those are fairly self-explanatory. We could now add the following lines:

myTimer.start();
//modify the onComplete function
function onComplete(e:TimerEvent):void{
    trace("Timer finished!");
    myTimer.reset();
    myTimer.start();
}

So now, when our timer finishes, it will automatically start all over again. This will trace

tick tock!
tick tock!
tick tock!
tick tock!
tick tock!
Timer finished!
tick tock!
tick tock!
...

This was just a really quick intro to the Timer class, I just felt like sharing this because I was so relieved at how easy it was to handle timed events now.

[Learn] AS2 to AS3 Basic Liquid Layout

I was just getting the hang of creating liquid layouts in AS2.0 a few months ago, and boy, is it quite a concept to grasp. Now I have to relearn everything I learned using AS3.0.Thankfully, once I understand the concept, all I have to do now is do it with unfamiliar syntax.

In this little tutorial, I’ll show AS2 and AS3 code showing the same end result. This is just very basic, just showing the differences between the two (which isn’t much), and to show how to get started with creating liquid layouts.

By the way, liquid layouts are layouts that change dynamically according the stage’s size. Not unlike liquid in a container, which takes the container’s size and shape, thus the name.

The movie shows 4 boxes I drew on four sides of the stage, changing position according to the stage’s size. Obviously, you could also adjust other properties of the MovieClip, like scale, alpha, rotation, etc.

First, the AS2.0 code:

Stage.scaleMode = “noScale”;
Stage.align = “TL”;

setStage();

var stageListener:Object = new Object();

Stage.addListener(stageListener);
stageListener.onResize = function() {
setStage();
};

function setStage() {
var WIDTH:Number = Stage.width;
var HEIGHT:Number = Stage.height;

box1._x = WIDTH-box1._width;
box1._y = HEIGHT/2-(box1._height/2);
box2._x = WIDTH/2 - (box2._width/2);
box2._y = 0;
box3._x = 0;
box3._y = box1._y;
box4._x = box2._x;
box4._y = HEIGHT - box4._height;
}

AS3.0:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

setStage();

stage.addEventListener(Event.RESIZE, stageResize);

function setStage():void{
var WIDTH:Number = stage.stageWidth;
var HEIGHT:Number = stage.stageHeight;
box1.x = WIDTH - box1.width;
box1.y = HEIGHT/2 - (box1.height/2);
box2.x = WIDTH / 2 - (box2.width/2);
box2.y = 0;
box3.x = 0;
box3.y = box1.y;
box4.x = box2.x;
box4.y = HEIGHT - (box4.height);
}

function stageResize(e:Event):void{
setStage();
}

So, there isn’t really much difference between the two. AS3 is easier to understand because of its better event handling methods.

A little explanation for the 2 codes above, since they are quite similar. The first 2 lines are very important. Basically, they are telling the player to not do anything to objects on the stage when the stage is resized, because we want to control everything that happens when the stage is resized by code. Without those lines, the movie won’t work as expected.

The setStage() function is pretty self explanatory, it is where we do all the positioning of the movieclips. I like to put all of the code that does the positioning, resizing, etc. work in a function (preferably rolled into one), so I could call it at least once anytime I want. This is useful when initializing the movie, where all the movieclips might not be in their right place. And it is easier to put into the listener function too. You could also do it in the listener function, but I don’t recommend it.

We then call the setStage() function at least once, to position our movieclips where they should be, because when I created them in Flash, they are pretty much all over the place. If we don’t call that function, then they’ll only fall into place when we start resizing the stage.

And now to the part where the two codes are most different. Adding listeners to the stage. In AS3, it is quite straightforward. We add a listener, in this case stageResize() and listen to RESIZE events, to the stage object, which does nothing but call setStage(). You could also add other functions in there if you want to do something else when the stage resizes. In AS2, we have to create a listener object, tell that object to listen for the resizing event and execute the setStage() function. Again, you could add other functions in there.

So, there you have it. A basic Flash liquid layout. I hope this helps anyone who is having a hard time understanding this concept (I know I did). Now, this tutorial only showed changing the position of movieclips, by assigning values to them. But you could also change their position and/or size by percentages. Like 30% of the stage (I know this tutorial shows applying 50% of the stage), so you could adjust the visual elements of your movie to fit any size of resolution properly, at a limit of course.

NOTE: Notice the capital ‘S’ in Stage in the AS2 code and the small ’s’ in the AS3 code. Don’t mess those up!

Here are the source files of this tutorial.

AS2 source (Flash 8 )

AS3 source (Flash CS3)

[Learn] How to load images/swf’s in AS3

I am in the process of converting from AS2 to AS3 right now, so I am going to try my best to post everything I learn in this blog. It might help others out there who are still also in the process of converting. To those who aren’t, you should.

This time it is about loading external images/swf’s.

In AS3, there are several types of DisplayObjects you could use to display on the stage (thus the name), along with MovieClips, Sprites(simple movieclips), Bitmaps(for bitmap data) and Loaders.
The Loader object is obviously what we would use to load these external visual data.

Basically, the Loader is just like a MovieClip, since they have a common superclass (well actually MovieClip is derived from Sprite, which is a sibling of Loader). It’s a like a MovieClip that could load objects. So, if you are coming from AS2, it would make things easier to think of it as just a MovieClip.

So, to load an image named “image.jpg”, first you need to create the Loader object. In the first frame of your timeline:

var loader:Loader = new Loader();

Now you need the url of the image to load it. The Loader object has a load() method that takes a URLRequest parameter. It’s just a class that handles url’s very well. Heh, I don’t really know much about it, you could read more of it in documentation.

var imageUrl:URLRequest = new URLRequest("image.jpg");

Now that we have our Loader object and our URLRequest, we could now load our image. It’s just simply calling the load() method of Loader and passing our URLRequest as argument.

loader.load(imageUrl);
addChild(loader);

After loading and adding it to the stage, you could do anything with it as you please.

loader.x = 50;
loader.alpha = .5;

Of course, you would want to have preloading for this kind of stuff. And yes, the Loader object generates similar events to the MovieClipLoader object we so loved in AS2. But all this happens very differently in AS3. All the information about the object being loaded is being held by a LoaderInfo object inside the Loader object.

So here is the code that traces the amount of kilobytes loaded adds the Loader object to the stage if loading is completed.

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loading);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

function loading(e:Event):void{
trace(loader.contentLoaderInfo.bytesLoaded);
}

function loadComplete(e:Event):void{
trace("loaded");
addChild(loader);
}

Hope this post helps others who are still starting to move to AS3. A lot has changed between the two, but AS3 is definitely the better one.

[Learn] AS2 to AS3 EnterFrame events

NOTE: This blog post is inaccurate. I am sorry for the error. I have fixed the error following the comments posted.

So in this blog, I’ll be posting things I learn each day (hopefully), about programming, life, etc. The things I post here might not be completely correct or true, but they are what I learned and I post them as I understand them. Corrections would be very much appreciated.
I’ll call it the [Learn] series.

NOTICE: I am telling this as how I understand it from reading other tutorials on the web. This is possibly very inaccurate, but maybe you could understand things you haven’t understood before by reading how I understand it. :-/

Event handling in AS3.0 is very different from AS2.0. One of my most used events is onEnterFrame events.

In AS2.0, animating a simple box to move to the right every frame would look like this:
(please bear with me and the unformatted code)

box.onEnterFrame = function(){
this._x += 1;  //execute this code everytime the box movieclip enters a frame.
}

but in AS3.0, it is a little longer, and I may still have to see the real benefits of this. But already, I am liking how easy it is to understand.

function moveBox(e:Event):void{
e.target.x += 1;
}
box.addEventListener(Event.ENTER_FRAME, moveBox);

the addEventListener method tells the box MovieClip to execute the function moveBox, everytime an ENTER_FRAME event is generated(which is all the time).

Notice the moveBox function has an Event parameter. When a function has an Event type parameter, it becomes a listener function. Passing a non-listener function to the addEventListener method causes an error. You could also add the moveBox listener to any other MovieClip you might have on stage, already one of the benefits of the new event handling of AS3.0.

There are a lot more events to discuss, but I hope this helps those who have just started converting to AS3 (like me). I’ll keep on posting more things I learn.

[Learn] How to batch resize several images on Mac OSX with iPhoto

Have you ever need or have been asked to resize several images and had to resort to a photo editing software to individually resize those images? Well, it is an effective way of doing that, but what if you had to resize a hundred of them?

Well, today I had to resize 40 photos, and thought that doing it in Photoshop would be crazy, so I did a little research.

Turns out iPhoto has this function. It is indeed very nice and useful.

First you need to import your photos into iPhoto by going [ File > Import to Library... ], then just select your photos or the folder you have your photos in.

After importing,  your photos will be in the “Library” folder of iPhoto, so you have to search for it and sort them into different sub-folders if you want to. Unfortunately, you cant specify a sub-folder while importing. You have to do it afterwards.

Select the photos you want to resize, then go [ File > Export... ]. You will be presented with a dialog box. Choose a format you want to export to (not Original), and click the “Scale images no larger than: ” radio button. Specify the width or height you want, the aspect ratio will be preserved(!). Then click “OK”. Select the directory you want, wait for a few seconds, and voila! Instant resized images, with preserved ratios, at the specified maximum width or height.

Tip: When your images have different aspect ratios (some of them are much longer than others, or wider), select the ones with similar ratios first, export them, and export the longer/wider ones later.

Practical PHP Progamming – Wiki eBook

I have a lot of goals this summer vacation. And one of them is to learn basic PHP. Right now, I don’t really see any need for it, given my current web experience, but I guess it would be a very useful skill to have.
So here is the eBook I am reading to learn PHP. Very comprehensive, and easy to understand.