Featured Website - Planescape Online

The Planescape Online website has been a labor of love. Since the beginning of my time at Conestoga College, in the Web Design and Development program, I have been working very hard on this personal project.
I'm happy to announce that the website is now in regular use (by my friends and I), and we're quite happy with how it works!
To understand exactly what this website is capable of, it helps to know what the basic idea of a table-top role playing game is. The Planescape Online site was named after a Dungeons&Dragons campaign setting.
Table-top role playing games have complex rule systems that can easily fill 400 page books. Translating the Pathfinder role playing game system into an online web-based system has been challenging, and a lot of fun. It's an ongoing process.

One of the more interesting aspects of Planescape Online is the encounter page, because it has a battle-map that I designed using Flash AS3. You can click on the characters on this mini-map and move them about using the arrow keys on the keyboard. It's a neat little feature that will surely see improvement and additional features as I continue to work on the site.

Read More

Preloading Images and Removing Screen Flicker While SWF Loads

There are many options to preload images in HTML pages. The simplest would be to create a div and move it off the screen.

In this div, I created a list to preload background images into (using CSS). The other images that are loaded up are header images for the other pages in the website. Once loaded they stay in the cache, thus the header images appear instantly when the user navigates to those pages.

 <div id="img_preloader">
  <ul>
   <li>button hover</li>
  </ul>
  <img src="images/contact.jpg" />
  <img src="images/fabulous.jpg" />
  <img src="images/fabulous_text.jpg" />
  <img src="images/new_me.jpg" />
  <img src="images/nutrition.jpg" />>
  <img src="images/services.jpg" />
 </div>

I used the following CSS rules:

#img_preloader
{
width:200px;
position:absolute;
left:-9999px;
top:-9999px;
}
#img_preloader ul li {
background-image:url("../images/button_hover.png");
}


Flash SWF content may show a block of white in it's place until it had finished loading. To remove the white box, I added the following parameter to the OBJECT tag:

 <param name="wmode" value="transparent">

For more information about editing HTML tags manually for SWF content, see Object Tag Syntax.

And here is a link to the Adobe support page: Create a transparent background in a SWF file

Read More

MYSQL Query tips

Querying for NULL or non NULL values

Since arithmetic comparison operators do not return meaningful results, use the 'IS NULL' and 'IS NOT NULL' operators in your query.


...to be continued

Read More

PHP here document (also called a here-document, a heredoc, a hereis, here-string or here-script)

Using heredoc in PHP

<?php
echo <<<EOT

    <h1>This will display as an h1</h1>
    <p>I can use "double quotes"</p>
    <h1>and 'single quotes',
    <p>plus $variables too, which will
    be properly converted to their values,
    you can even type EOT.</p>

    <p>Make sure your opening EOT has no spaces after it,
    and the closing EOT has no spaces infront of it!</p>


 EOT;
 ?>

Read More