Archive for April, 2010
PHP #4: While Loops
Apr 14th
In programming, loops are used to execute the same lines of code multiple times. The simplest type of loop is called a while loop. The lines of code in the body of a while loop will continue executing over and over WHILE the condition is true. The syntax looks like this:
1 2 3 | while (condition) { //run this code repeatedly while the condition is true } |
Just like with if statements, the condition is evaluated as a boolean. If the condition is true, the block of code is executed and then it starts over my evaluating the condition again. If the condition is false, the block of code is not executed and the loop is terminated. Let’s try making a loop that will print all the numbers from 1 to 10:
1 2 3 4 5 | $i = 1; while ($i <= 10) { print "The number is $i<br />"; $i = $i + 1; } |
We start with a variable $i that we have set at 1. 1 is less than or equal to 10 so the loop body executes. “The number is 1<br />” is printed to the HTML, and then we add 1 to the variable $i. Now the condition is checked again, but this time $i is 2. 2 is still less than or equal to 10, so the loop body executes again. This continues and each time the number is printed and 1 is added to $i. Once $i gets to 11, the condition is no longer true, so the loop terminates.
A word about incrementing
When dealing with loops it is common to have an indexing variable, like $i in the previous example. Usually you will want $i to either increase by one or decrease by one on each iteration of the loop. In the previous example, we used
1 | $i = $i + 1; |
to do this, but there is a simpler way that accomplishes exactly the same thing:
1 | ++$i; |
This is called the pre-increment operator. There is also a pre-decrement operator that will subtract one from the variable:
1 | --$i; |
Important Note: A common misconception is that ++$i is the same thing as $i + 1. They are not the same. ++$i actually changes the value of $i to be 1 greater. $i + 1 keeps $i as is, but gives you the number 1 greater than $i to use as a value.
With that said, we can rewrite our loop above using the pre-increment operator:
1 2 3 4 5 | $i = 1; while ($i <= 10) { print "The number is $i<br />"; ++$i; } |
This loop accomplishes exactly the same thing as the previous one.
More Looping Examples
Looping can be used to accomplish a lot of different things.
In mathematics, the factorial of a positive non-decimal whole number is the product of all positive non-decimal numbers less than or equal to it. For example:
5 Factorial = 1 * 2 * 3 * 4 * 5 = 120
We can use a while loop to calculate the factorial of a number:
1 2 3 4 5 6 7 | $i = 5; //the number to calculate the factorial of $factorial = 1; while ($i > 0) { //once $i is no longer a positive integer, stop looping $factorial = $factorial * $i; //multiply by the current number --$i; //go down to the next number } print $factorial; |
This will print the number 120, the factorial of 5. If we want 10 factorial, all we have to do is change the initial value of $i, and our code will do the rest.
Now let’s apply what we learned in PHP #2: GET and POST to ask a user what number they would like to know the factorial of. First we’ll need an html form where the user enters the number:
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title>Factorial Calculator</title> </head> <body> <form method="get" action="factorial.php"> Calculate the factorial of:<input type="text" name="factorial" /><br /> <input type="submit" name="submit" value="Submit" /> </form> </body> </html> |
Now we’ll create a php file called factorial.php that will process the info from the form using the same method as before.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <title>Factorial Calculator</title> </head> <body> <?php $i = $_GET['factorial']; //the number to calculate the factorial of $factorial = 1; while ($i > 0) { //once $i is no longer a positive integer, stop looping $factorial = $factorial * $i; //multiply by the current number --$i; //go down to the next number } print "The factorial is $factorial."; ?> </body> </html> |
Now view the html page in your browser and you should have a functioning factorial calculator. You can download the full source code for this example here:

Factorial Example
Size: 1.17 KB
Introduction to CSS3
Apr 13th
As you probably know, CSS stands for Cascading Style Sheet and it used in place of HTML frames, and HTML tables. CSS was created to make web site creation easier and more pragmatic. If you have an external style sheet linked on all pages of your website, this will allow you to make changes all across the site with just a few changes.
Traditionally, you would have to open every page of you site and make the necessary changes. If you had a 20 page site and you decided to change you logo then you’d have to open every page and add that new logo into the pages. With CSS, however, you could change the logo just by changing the image name in your style sheet.
Versions of CSS
CSS1
CSS1 became a w3c recommendation in Dec 17th, 1996 and was last revised on Apr 11th, 2008. CSS1 included many CSS3 properties that are still used today such as margin, padding, border, and background. When CSS1 came out HTML 2.0 was the primary version of HTML. We’re now on (X)HTML 4.01 as the standard.
CSS2
CSS2 included improvements on CSS1 such as a box-model, overflow, and aural style sheets for aria required screen readers.
CSS2.1
Many years later the w3c completed a major revision of CSS2 called CSS2.1 that became recommendation on September 8th, 2009. This includes many fixes on CSS2 and included many new values and new properties that made web design even more simple. At this time HTML 4.01, and XHTML 4.01 were standards at this point in time. When CSS 2.1 was birthed it began to phase out web sites made with HTML tables. CSS2 and CSS 2.1 allowed for a designer to make complex HTML table sites simpler and more practical to amend. This also gave way to very complex internet programs such as Drupal, Joomla, and WordPress (though they existed before 2008).
CSS3
As of March 3rd, 2010, CSS3 is still a working draft by the w3c. Some properties such as border-radius, text-shadow, and border-image are already supported by the latest versions of Chrome, Safari, Firefox, and Opera. For more information on CSS3 you can read the documentation here.
Note: A large sum of these selectors will NOT work in IE versions 5.5-8. To test and see which selectors are buggy and are not supported please visit css3.info’s Selector Test. If you’re using the latest versions of opera, chrome, safari, and Firefox then you needn’t worry.
Some things we will cover
We will cover an extremely useful property called the “text-shadow” property. It can look like the following:
Text-Shadow
Border-Radius
and of course opacity/rgba:
Opacity
Sources:
- “Cascading Style Sheets, level 1″, H. W. Lie and B. Bos, 17 December 1996, revised 11 January 1999 http://www.w3.org/TR/2008/REC-CSS2-20080411/
- “Cascading Style Sheets, level 2, CSS2 Specification”, B. Bos, H. W. Lie, C. Lilley and I. Jacobs, 12 May 1998 (revised 11 April 2008),
http://www.w3.org/TR/2008/REC-CSS2-20080411/ - “Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification” B. Bos, H. Lie, I.H. http://www.w3.org/TR/CSS21/
HTML Color Reference
Apr 12th
Sort: A to Z | Z to A | Light to Dark | Dark to Light
| Colors | Color Names | HEX | RGB |
|---|---|---|---|
| AliceBlue | #F0F8FF | 240,248,255 | |
| AntiqueWhite | #FAEBD7 | 250,235,215 | |
| Aqua | #00FFFF | 0,255,255 | |
| Aquamarine | #7FFFD4 | 127,255,212 | |
| Azure | #F0FFFF | 240,255,255 | |
| Beige | #F5F5DC | 245,245,220 | |
| Bisque | #FFE4C4 | 255,228,196 | |
| Black | #000000 | 0,0,0 | |
| BlanchedAlmond | #FFEBCD | 255,235,205 | |
| Blue | #0000FF | 0,0,255 | |
| BlueViolet | #8A2BE2 | 138,43,226 | |
| Brown | #A52A2A | 165,42,42 | |
| BurlyWood | #DEB887 | 222,184,135 | |
| CadetBlue | #5F9EA0 | 95,158,160 | |
| Chartreuse | #7FFF00 | 127,255,0 | |
| Chocolate | #D2691E | 210,105,30 | |
| Coral | #FF7F50 | 255,127,80 | |
| CornflowerBlue | #6495ED | 100,149,237 | |
| Cornsilk | #FFF8DC | 255,248,220 | |
| Crimson | #DC143C | 220,20,60 | |
| Cyan | #00FFFF | 0,255,255 | |
| DarkBlue | #00008B | 0,0,139 | |
| DarkCyan | #008B8B | 0,139,139 | |
| DarkGoldenRod | #B8860B | 184,134,11 | |
| DarkGray | #A9A9A9 | 169,169,169 | |
| DarkGreen | #006400 | 0,100,0 | |
| DarkKhaki | #BDB76B | 189,183,107 | |
| DarkMagenta | #8B008B | 139,0,139 | |
| DarkOliveGreen | #556B2F | 85,107,47 | |
| DarkOrange | #FF8C00 | 255,140,0 | |
| DarkOrchid | #9932CC | 153,50,204 | |
| DarkRed | #8B0000 | 139,0,0 | |
| DarkSalmon | #E9967A | 233,150,122 | |
| DarkSeaGreen | #8FBC8F | 143,188,143 | |
| DarkSlateBlue | #483D8B | 72,61,139 | |
| DarkSlateGray | #2F4F4F | 47,79,79 | |
| DarkTurquoise | #00CED1 | 0,206,209 | |
| DarkViolet | #9400D3 | 148,0,211 | |
| DeepPink | #FF1493 | 255,20,147 | |
| DeepSkyBlue | #00BFFF | 0,191,255 | |
| DimGray | #696969 | 105,105,105 | |
| DodgerBlue | #1E90FF | 30,144,255 | |
| FireBrick | #B22222 | 178,34,34 | |
| FloralWhite | #FFFAF0 | 255,250,240 | |
| ForestGreen | #228B22 | 34,139,34 | |
| Fuchsia | #FF00FF | 255,0,255 | |
| Gainsboro | #DCDCDC | 220,220,220 | |
| GhostWhite | #F8F8FF | 248,248,255 | |
| Gold | #FFD700 | 255,215,0 | |
| GoldenRod | #DAA520 | 218,165,32 | |
| Gray | #808080 | 128,128,128 | |
| Green | #008000 | 0,128,0 | |
| GreenYellow | #ADFF2F | 173,255,47 | |
| HoneyDew | #F0FFF0 | 240,255,240 | |
| HotPink | #FF69B4 | 255,105,180 | |
| IndianRed | #CD5C5C | 205,92,92 | |
| Indigo | #4B0082 | 75,0,130 | |
| Ivory | #FFFFF0 | 255,255,240 | |
| Khaki | #F0E68C | 240,230,140 | |
| Lavender | #E6E6FA | 230,230,250 | |
| LavenderBlush | #FFF0F5 | 255,240,245 | |
| LawnGreen | #7CFC00 | 124,252,0 | |
| LemonChiffon | #FFFACD | 255,250,205 | |
| LightBlue | #ADD8E6 | 173,216,230 | |
| LightCoral | #F08080 | 240,128,128 | |
| LightCyan | #E0FFFF | 224,255,255 | |
| LightGoldenRodYellow | #FAFAD2 | 250,250,210 | |
| LightGray | #D3D3D3 | 211,211,211 | |
| LightGreen | #90EE90 | 144,238,144 | |
| LightPink | #FFB6C1 | 255,182,193 | |
| LightSalmon | #FFA07A | 255,160,122 | |
| LightSeaGreen | #20B2AA | 32,178,170 | |
| LightSkyBlue | #87CEFA | 135,206,250 | |
| LightSlateGray | #778899 | 119,136,153 | |
| LightSteelBlue | #B0C4DE | 176,196,222 | |
| LightYellow | #FFFFE0 | 255,255,224 | |
| Lime | #00FF00 | 0,255,0 | |
| LimeGreen | #32CD32 | 50,205,50 | |
| Linen | #FAF0E6 | 250,240,230 | |
| Magenta | #FF00FF | 255,0,255 | |
| Maroon | #800000 | 128,0,0 | |
| MediumAquaMarine | #66CDAA | 102,205,170 | |
| MediumBlue | #0000CD | 0,0,205 | |
| MediumOrchid | #BA55D3 | 186,85,211 | |
| MediumPurple | #9370D8 | 147,112,216 | |
| MediumSeaGreen | #3CB371 | 60,179,113 | |
| MediumSlateBlue | #7B68EE | 123,104,238 | |
| MediumSpringGreen | #00FA9A | 0,250,154 | |
| MediumTurquoise | #48D1CC | 72,209,204 | |
| MediumVioletRed | #C71585 | 199,21,133 | |
| MidnightBlue | #191970 | 25,25,112 | |
| MintCream | #F5FFFA | 245,255,250 | |
| MistyRose | #FFE4E1 | 255,228,225 | |
| Moccasin | #FFE4B5 | 255,228,181 | |
| NavajoWhite | #FFDEAD | 255,222,173 | |
| Navy | #000080 | 0,0,128 | |
| OldLace | #FDF5E6 | 253,245,230 | |
| Olive | #808000 | 128,128,0 | |
| OliveDrab | #6B8E23 | 107,142,35 | |
| Orange | #FFA500 | 255,165,0 | |
| OrangeRed | #FF4500 | 255,69,0 | |
| Orchid | #DA70D6 | 218,112,214 | |
| PaleGoldenRod | #EEE8AA | 238,232,170 | |
| PaleGreen | #98FB98 | 152,251,152 | |
| PaleTurquoise | #AFEEEE | 175,238,238 | |
| PaleVioletRed | #D87093 | 216,112,147 | |
| PapayaWhip | #FFEFD5 | 255,239,213 | |
| PeachPuff | #FFDAB9 | 255,218,185 | |
| Peru | #CD853F | 205,133,63 | |
| Pink | #FFC0CB | 255,192,203 | |
| Plum | #DDA0DD | 221,160,221 | |
| PowderBlue | #B0E0E6 | 176,224,230 | |
| Purple | #800080 | 128,0,128 | |
| Red | #FF0000 | 255,0,0 | |
| RosyBrown | #BC8F8F | 188,143,143 | |
| RoyalBlue | #4169E1 | 65,105,225 | |
| SaddleBrown | #8B4513 | 139,69,19 | |
| Salmon | #FA8072 | 250,128,114 | |
| SandyBrown | #F4A460 | 244,164,96 | |
| SeaGreen | #2E8B57 | 46,139,87 | |
| SeaShell | #FFF5EE | 255,245,238 | |
| Sienna | #A0522D | 160,82,45 | |
| Silver | #C0C0C0 | 192,192,192 | |
| SkyBlue | #87CEEB | 135,206,235 | |
| SlateBlue | #6A5ACD | 106,90,205 | |
| SlateGray | #708090 | 112,128,144 | |
| Snow | #FFFAFA | 255,250,250 | |
| SpringGreen | #00FF7F | 0,255,127 | |
| SteelBlue | #4682B4 | 70,130,180 | |
| Tan | #D2B48C | 210,180,140 | |
| Teal | #008080 | 0,128,128 | |
| Thistle | #D8BFD8 | 216,191,216 | |
| Tomato | #FF6347 | 255,99,71 | |
| Turquoise | #40E0D0 | 64,224,208 | |
| Violet | #EE82EE | 238,130,238 | |
| Wheat | #F5DEB3 | 245,222,179 | |
| White | #FFFFFF | 255,255,255 | |
| WhiteSmoke | #F5F5F5 | 245,245,245 | |
| Yellow | #FFFF00 | 255,255,0 | |
| YellowGreen | #9ACD32 | 154,205,50 |
Any improvements on this list will give you mention in this blog post and in the downloadable files.

Color Table
Size: 15.03 KB
MMF2 Beginning Video Tutorial Series
Apr 9th
This tutorial series is designed to get beginner’s to Multimedia Fusion 2 up and running, creating their own games. By the end of series you will know all the basics and will have created your own your own Game of “One Player Pong.” The series is presented in chronological order.
Before using this course, you should:
- Have a copy of one of the current clickteam products (TGF2, MMF2 Standard or MMF2 Developer) or a demo version of these products available at www.clickteam.com. (Some of the tutorials may require a full version of MMF2 Standard or Higher.)
- Have some basic knowledge of how to use a computer.
