INTRODUCTION
This tutorial will teach you how to use flash actionscripting (probably flash 5) to convert between the different number systems (decimal, binary, octal, and hexadecimal). You will know how to use and invoke functions (important feature in flash 5), how to use arrays, and how to exploit literal strings in the hexadecimal number system.
EXPLANATION
Let me tell you what numbers these systems have and the procedure I followed to convert a certain number from one system to another.
a. The decimal system takes numbers between 0 and 9 only
b. The Binary system takes 0 and 1 only
c. The Octal system that takes numbers between 0 and 7 only
d. The Hexadecimal system takes numbers between 0 to 9 in addition to the string charaters (A(10), B(11), C(12), D(13), E(14), F(15))
The procedure for converting is approximately common for all systems. I'll explain the simplest conversion (decimal to binary). If the user types 82 as a decimal number, I try to find all the numbers that are less than to this number such that these numbers are powers of 2. That is:
1, 2, 4, 8, 16, 32, 64 (and not 128)
I take 64 and divide it by 82. I notice that there is one 64 in 82. The result is 1 (first digit in the binary system). I also compute the remainder, which is 18. Then I take 32 and divide it by 18 and notice that there is no 32 in 18 and the division yields zero. So, the first two digits in the binary number are 1 and 0. I proceed in the same manner until I get the binary number: 1010010.
The FLA file is available for download. Well, all we need is a single layer made up of 5 keyframes in the main timeline. The first keyframe contains the definitions of all the functions used. I used 6 functions that do the following:
1) Function decimalToHexadecimal that converts from decimal system to Hexadecimal system
2) Function decimalToOctal that converts from decimal system to octal system
3) Function binaryToDecimal that converts from binary system to decimal system
4) Function decimalToBinary that converts from decimal system to binary system
5) Function octalToDecimal that converts from octal system to decimal system
6) Function hexadecimalToDecimal that converts from hexadecimal system to decimal system
We'll go over the scripts of all these functions line by line to understand how they execute.
I used 4 radiobuttons from Common Libraries/Smart Clips that let the user chooses among the four number systems. For instance, if he chooses Decimal number system, then the second keyframe will be executed. When the user then types in the decimal number and presses the convert button, the corresponding number is converted to binary, octal, and hexadecimal using 3 dynamic variables that exist through out the last 4 frames in the main timeline. The dynamic variables are (output1, output2, and output3).
Well, I think you know the basics of drawing in flash. You need to draw two buttons: 1) The first one is the 'Next' button that, when released, tells flash to jump into a certain keyframe depending on the choice of the number system. This button has the following script:
on (release) {
if (radioBox1.getState ()) {
nextFrame ();
}
if (radioBox2.getState ()) {
gotoAndStop (_currentframe + 2);
}
if (radioBox3.getState ()) {
gotoAndStop (_currentframe + 3);
}
if (radioBox4.getState ()) {
gotoAndStop (_currentframe + 4);
}
}
When the button is released, depending on which radiobutton is active, flash will move to the adequate keyframe. The radiobuttons are characterized by _name property (being smart clips). The first radiobutton, for example, has 'radioBox1' as a _name and it is labeled 'Decimal Number System'.
2) The second button is the 'convert' button. The scripts of this button include calls to the functions mentioned above which will be discussed now.
FUNCTION SCRIPTS
1) The script of Function decimalToHexadecimal is:
function decimalToHexadecimal (number) {
array5.splice(0);
array4.splice(0);
for (i = 0; i <= number; i ++) {
binary = Math.pow (16, i);
if (binary> number) {
arrayelement = i - 1;
break;
}
array5 [i] = binary;
}
for (j = arrayelement; j>= 0; j --) {
if (j == arrayelement) {
binaryelement = int (number / array5 [j]);
binaryremainder = int (number % array5 [j]);
if (binaryelement == 10) {
binaryelement2 = 'A';
} else if (binaryelement == 11) {
binaryelement2 = 'B';
} else if (binaryelement == 12) {
binaryelement2 = 'C';
} else if (binaryelement == 13) {
binaryelement2 = 'D';
} else if (binaryelement == 14) {
binaryelement2 = 'E';
} else if (binaryelement == 15) {
binaryelement2 = 'F';
} else {
binaryelement2 = binaryelement;
}
array4 [ 0 ] = binaryelement2;
} else {
binaryremainder1 = binaryremainder;
binaryremainder = int (binaryremainder % array5 [j]);
binaryelement = int (binaryremainder1 / array5 [j]);
if (binaryelement == 10) {
binaryelement2 = 'A';
} else if (binaryelement == 11) {
binaryelement2 = 'B';
} else if (binaryelement == 12) {
binaryelement2 = 'C';
} else if (binaryelement == 13) {
binaryelement2 = 'D';
} else if (binaryelement == 14) {
binaryelement2 = 'E';
} else if (binaryelement == 15) {
binaryelement2 = 'F';
} else {
binaryelement2 = binaryelement;
}
array4 [arrayelement - j] = binaryelement2;
}
}
return array4.join ("");
}
Explanation line by line:
1. Function header that takes one argument, which is the number the user types in the input variable.
2. Deletes all elements of array5
3. Deletes all elements of array6
4. A for repetition structure which executes (number + 1) times and initializes variable i to zero. The aim of this for structure is to initialize the elements of array5. The elements of this array are simply the powers of 16 that are assigned to the variable binary.
5. The if selection structure that tests whether binary is greater than number.
6. arrayelement is the variable that tells us the number of valid values of binary which corresponds to the position number or subscript of the last element in array5. When binary is greater than number, i must not be the subscript of the last element and hence is decremented by 1 and assigned to arrayelement.
7. The purpose of this Break statement is to terminate the for structure when binary is greater than number.
8. The statement that initializes array5.
9. A for repetition structure that uses a variable j whose initial value is arrayelement and is continuously decremented per loop.
10. If selection structure that tests if j is equal to arrayelement.
11. Divides our number by the last element in the array and truncates the decimal part by converting it to integer and assigns the last value to variable binaryelement.
12. Same as above but by finding the remainder using the modulus operator and assigning the last value to variable binaryremainder.
13. If selection structure that tests whether binaryelement is 10 or not.
14. sets binaryelement2 to be equal to character A. Same explanation for lines 15 till 24
25. If binaryelement is neither 10, 11, 12, 13, 14, 15, set binaryelement2 to be equal to binaryelement.
26. Initializes the first element of array4 to binaryelement2. The elements of this array are the digits of the hexadecimal number.
27. Else structure corresponding to if.
28. Initializes binaryremainder1 to be equal to binaryremainder.
29. Replaces the value of binaryremainder by another value that is equal to the remainder of dividing binaryremainder by a certain element of array5.
30. Replaces the value of binaryelement by another value which is equal to the quotient of dividing binaryremainder1 by a certain element of array5.
Same explanation for lines 31 till 44 as for 14 till 25.
45. Initializes an element of array4 to be equal to binaryelement2. Notice that this array may hold string characters.
46. Displays the elements of the array in the output without being separated.
Although this may sound quite big, but it's just the same as the method I explained in the beginning of the tutorial.
2) Function decimalToOctal has the following script:
function decimalToOctal (number) {
array2.splice(0);
array3.splice(0);
for (i = 0; i <= number; i ++) {
binary = Math.pow (8, i);
if (binary> number) {
arrayelement = i - 1;
break;
}
array3 [i] = binary;
}
for (j = arrayelement; j>= 0; j --) {
if (j == arrayelement) {
binaryelement = int (number / array3 [j]);
binaryremainder = int (number % array3 [j]);
array2[ 0 ] = binaryelement;
} else {
binaryremainder1 = binaryremainder;
binaryremainder = int (binaryremainder % array3 [j]);
binaryelement = int (binaryremainder1 / array3 [j]);
array2 [arrayelement - j] = binaryelement;
}
}
return array2.join ("");
}
Notice that this script is the same as above but with minor differences. We use powers of 8 instead of 16. No characters are involved.
3) Function binaryToDecimal has the following script:
function binaryToDecimal (number) {
array7.splice(0);
array6.splice(0);
for (i = 0; i <= length (number) - 1; i ++) {
array6 [i] = Math.floor (number / Math.pow (10, length (number) - i - 1)) - Math.floor (number / Math.pow (10, length (number) - i)) * 10;
}
decimal1 = 0;
for (j = 0; j
Notice the first for structure. Length (number) specifies the number of digits in the number. Let's trace this for structure to know what it does. Suppose I entered the binary number 11011 in the input variable, then:
Length of the number is 5.
for (i = 0; i <= 4; i ++)
Values of elements of array6:
For i = 0, array6 [0] = floor(11011/10000) - floor(11011/100000)*10 = 1
For i = 1, array6 [1] = floor(11011/1000) - floor(11011/10000) *10 = 1
For i = 2, array6 [2] = floor(11011/100) - floor(11011/1000) *10 = 0
For i = 3, array6 [3] = floor(11011/10) - floor(11011/100) *10 = 1
For i = 4, array6 [4] = floor(11011/1) - floor(11011/10) *10 = 1
Cool, ha?! As you notice, this for structure initializes array6 such that its elements are the digits of the binary number.
Notice the second for structure. Let's have a trace:
for (j = 0; j <5; j ++)
Output:
For j = 0
Array7 [0] = 2*2*2*2 = 16
Decimal = 16*1 = 16
Decimal1 = 0 + 16 = 16
For j = 1
Array7 [0] = 2*2*2 = 8
Decimal = 8*1 = 8
Decimal1 = 16 + 8 = 24
.........
Once execution is finished, decimal1 will be the required decimal number!
4) Function decimalToBinary has the following script:function decimalToBinary (number) { array1.splice(0); array.splice(0); for (i = 0; i <= number; i ++) { binary = Math.pow (2, i); if (binary> number) { arrayelement = i - 1; break; } array [i] = binary; } for (j = arrayelement; j>= 0; j --) { if (j == arrayelement) { binaryelement = int (number / array [j]); binaryremainder = int (number % array [j]); array1[ 0 ] = binaryelement; } else { binaryremainder1 = binaryremainder; binaryremainder = int (binaryremainder % array [j]); binaryelement = int (binaryremainder1 / array [j]); array1 [arrayelement - j] = binaryelement; } } return array1.join (""); }This function has the same script as function decimalToOctal but with powers of 2.
5) Function octalToDecimal has the script:function octalToDecimal (number) { array9.splice(0); array8.splice(0); for (i = 0; i <= length (number) - 1; i ++) { array8 [i] = Math.floor (number / Math.pow (10, length (number) - i - 1)) - Math.floor (number / Math.pow (10, length (number) - i)) * 10; } decimal1 = 0; for (j = 0; jThis function has the same script as function binaryToDecimal but with powers of 8.
6) Function hexadecimalToDecimal has the script:
function hexadecimalToDecimal (string) { array11.splice(0); array10.splice(0); string.split (); for (i = 0; iNotice that all functions take an integer argument except the function hexadecimalToDecimal which takes a string since a hexadecimal number contains characters. Notice some similarities between the script of this function and the scripts of the functions binaryToDecimal and octalToDecimal. String.substr divides our string into a substring whose first element is of index i and the number of elements in it is 1 (as if we're taking a single character of a specific index in the string). Let's have a trace:
Suppose the user enters: AAB2for (i = 0; i <4; i ++) Output: For i = 0, array10 [0] = 'A'. Since we need a decimal number, we have to convert A to 10, array10 [0] = 10. For i = 1, array10 [1] = 'A'. Since we need a decimal number, we have to convert A to 10, array10 [1] = 10. For i = 2, array10 [2] = 'B'. Since we need a decimal number, we have to convert A to 11, array10 [2] = 11. For i = 3, array10 [3] = 2.Now, the second for structure calculates the required decimal number since all elements of array10 are numbers.
Notice that I used different arrays in this program. This is important to store values indispensable for function calculation validity and to refrain from errors.
The 'convert' button does the conversion by calling the necessary functions. Notice that I didn't insert a function that, for example, converts from hexadecimal to binary or hexadecimal to octal. This is useless because when I convert from hexadecimal to decimal, I use the function decimalToBinary to further convert the decimal number to binary. That's a very good translation!
CONCLUSION
I hope this tutorial has given you a great help! I'm ready to accept any comments regarding what I said. If you have anything not clear in Flash, I will be ready to help you!! Just email me at ehab_saredine@hotmail.com!!:)
discuss this topic to forum
