Manipulating Colour in Flash - #3 - Successfully Converting Decimal to Hexadecimal Using the toString Method (even with user defined variables)

My last two posts looked at how you can use Actionscript to change the colour of a MovieClip, and to convert decimal colour values into hexadecimal.

Teething Trouble

But as I work towards harnessing these techniques to make a simple colour mixer in Flash I suddenly ran into difficulty converting decimal to hexadecimal when the user defines the decimal values in text input fields.

I must confess that to begin with I spent a while being stumped by this. As I Googled around for a solution there were similar questions, but no answers. Anyway, I am happy to say, there is a solution.

No doubt some of you will have a similar problem, so let me talk you through the problem I experienced and then the solution (I hope it helps).

The Problem

In my tests the toString method easily converted a decimal defined as a variable in a keyframe to a hexadecimal as follows:

/* This works */
var R = 255;

mybutton_but.onPress = function () {
hex = R.toString(16);
trace(hex); //Returns FF
}

However, when the value of R was defined by the user through a text input box it suddenly stopped working, as follows:

/* This DOESN'T work */
/* value of R is defined as 255 in a text input field by the user */

mybutton_but.onPress = function () {
hex = R.toString(16);
trace(hex); //Returns 255
}

For some reason, when the value of R was defined in the keyframe the toString method successfully converted the decimal value 255 and returned FF, but when the value of R was defined in a text input field the toString method failed to perform any conversion on the decimal value 255 and returned 255.

Preparing to Find a Solution

When I struggle with solving these niggly little problems I often find that taking some time out and doing something else gives the mind time to unwind (and also mull over the problem without having to try out every idea instantly). The brain is a fantastic problem solver, if it is given the right conditions. As a college lecturer I know that the ideal conditions come when an individual is relaxed but alert. So, if needed, take a break, unwind, get some sleep or remove distractions. I spent the morning cutting the grass and sorting out the chickens, then in the afternoon found the solution.

The Solution

As I said before, none of my Googling revealed an answer to my problem, but as I hunted around for anything I could find that might give me a hint, or prompt an idea I came across this snippet on WikiBooks.org:

var i = new Number(555);
trace(i.toString());

I must have seen several similar examples yesterday evening and got nothing from them (too tired no doubt). But having taken a break from the problem since then, and relaxed, my brain was ready to spot the significant detail that was the solution:

var i = new Number(555);

And there it was, staring out at me. Something I had not yet tried. So I modified my code as follows:

/* This DOES work */
/* value of R is defined as 255 in a text input field by the user */

mybutton_but.onPress = function () {
var decimalred = new Number(R);
hexred = decimalred.toString(16);
trace(hexred); //Returns FF
}

Why it Works

So why didn't it work before, and what's the big difference that makes it work this time?

I suspect that the reason it did not work before was because the user defined variable 'R' was already being treated by Flash as a string and so using the toString method to convert to a string did nothing, because it was already a string to start with.

Result: 255 (string) in, 255 (string) out.

The solution is really hidden within the problem (as are so many design solutions). We are converting a decimal value (representing a colour channel intensity) into its hexadecimal equivalent. We want to do this using the toString method. However, the toString method is for datatype conversion. This means converting one datatype to another datatype, in this case a non-string into a string. For this to work we need to force Flash to treat the user input 'R' as a number so that we can use toString to convert it into a string in hex format.

The script above does this by passing the user defined decimal value 'R' to a new variable 'decimalred' - with 'decimalred' specifically defined as being a new Number. This forces Flash to treat the user defined value as a number datatype thereby allowing toString to work as expected and convert the decimal number value to a hexadecimal string.

Result: 255 (number) in, FF (string) out.

And that's a wrap.

It is precisely this kind of problem that I see as being the drawback of having come to Flash and Actionscript from a graphic design, rather than a programming background. Nevertheless, I hope that by posting my solution I have helped at least one other poor designer get to grips with with one small area of Actionscript. If my Googling is anything to go by, this may well be the only explanation of this problem on the web (at time of posting of course).

Happy coding.

Manipulating Colour in Flash - #1

Following on from my previous post, I have begun to look into how I can use Actionscript to work with colour.

This experiment looks at how we can convert decimal RGB values into hexadecimal using Actionscript.

It's very simple...

The Code

/* First we set the RGB values as decimal integers (whole numbers) from 0-255, as you would see them defined in any graphics program. This example would reproduce white, but you can change the values to be anything you like between 0-255. */

var R = 255;
var G = 255;
var B = 255;

/* Then we convert the RGB decimals to their hexadecimal equivalents. The toString method is the easiest way I have found of doing it (thanks to Colin Moock). This script takes the value of each of the variables and converts the datatype from a numeric value (in this case 255) into a string using '16' as the radix argument of the method. As a result 255 becomes FF, the hexadecimal equivalent. The code below then simply stitches the converted values of the R, G and B variables together to form a 6 digit hex number for the colour. */

trace(R.toString(16)+G.toString(16)+B.toString(16)); //Returns FFFFFF

What I like about this method is its simplicity. It would form the basis of a very simple colour mixer program, since the R, G and B values could easily be set by sliders, or the user keying in decimal values for each of the channels.

Over to you... meanwhile, I play with colour some more.