Archive for April, 2010

PHP #4: While Loops

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
Factorial Example
Size: 1.17 KB

Introduction to CSS3

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:

HTML Color Reference

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
Color Table
Size: 15.03 KB

MMF2 Beginning Video Tutorial Series

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.

MMF2 Beginning Video 40: Pong Part 6

You need to install or upgrade Flash Player to view this content, install or upgrade by clicking here.

Download WMV