Turn off the lights, close your eyes, raise your hands, and say:

« Hail, Lord of Flash Game. Shall I read this tutorial and forget it before I try to flood the web with another silly Coloring Book Game »

Really, seriously… I am showing you how do it but please, please… don’t do it.

Finding the right image

If you can’t draw your image, you’ll have to download it from the web. Try to Google for coloring book and you’ll know what I mean.

Just remember the “copyright” word… I don’t think you’re allowed to use Ben 10 or Hello Kitty images… but if you are about to create a Flash coloring book, you are an evil person and stealing artworks won’t be a problem.

The image I’ll use is taken from www.coloringbook.info

Main concept

Every colorable part is a distinct movieclip, and its color is dynamically changed with Actionscript

Converting the image

First, you need to import it into Flash

File->Import->Import to Stage

Then, select the image on the stage, and convert it from bitmap to vector

Modify->Bitmap->Trace Bitmap

with these settings:

Color threshold: 100

Minimum area: 1

Curve fit: Very Smooth

Corner threshold: Few Corners

Now you have your bitmap converted into a Flash shape. Select all the black outline clicking on every black line you see while pressing Shift, then convert it to a symbol

Modify->Convert to Symbol

name it outline and don’t check Export for Actionscript

Now do the same thing with the head…

Then with the remaining body parts and eventually the background. Once the shape has been divided into objects, select all objects on the stage and convert them as a unique symbol you will call teddy_mc.

This time remember to check Export for Actionscript

Now you can delete everything from the stage and remove the image from the library.

Now your library should look like this one:

Now edit teddy_mc movieclip, selecting every movieclip inside it (head, outline, …) and giving it a proper instance name… head for the head, feet for the feet and so on

Obviously tracing a bitmap won’t give the same quality results as if you were able to draw your coloring book by yourself

Finally you are ready to code some interesting lines

Actionscript

The aim of this script is putting on stage the teddy bear, a three color palette, setting a default color, allowing people to change color clicking on the palette, and painting the teddy bear.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

package {
	import flash.display.Sprite;
	import flash.geom.ColorTransform;
	import flash.events.MouseEvent;
	public class coloring extends Sprite {
		public var teddy:teddy_mc = new teddy_mc();
		public var palette:palette_mc;
		public var pal_color:ColorTransform;
		public var colors:Array=new Array(0xFF0000,0x00FF00,0x0000FF);
		public var current_color:int=0;
		public function coloring():void {
			addChild(teddy);
			teddy.addEventListener(MouseEvent.CLICK,on_teddy_click);
			for (var i:int=0; i<3; i++) {
				palette = new palette_mc();
				pal_color=palette.transform.colorTransform;
				pal_color.color=colors[i];
				palette.transform.colorTransform=pal_color;
				palette.x=40+i*60;
				palette.y=300;
				palette.ind=i;
				addChild(palette);
				palette.addEventListener(MouseEvent.CLICK,on_palette_click);
			}
		}
		public function on_palette_click(e:MouseEvent):void {
			var palette_clicked:palette_mc=e.currentTarget as palette_mc;
			current_color=palette_clicked.ind;
		}
		public function on_teddy_click(e:MouseEvent):void {
			for (var i:int = 0; i < teddy.numChildren; i++) {
				if (teddy.getChildAt(i).hitTestPoint(mouseX,mouseY,true)) {
					pal_color=teddy.getChildAt(i).transform.colorTransform;
					pal_color.color=colors[current_color];
					teddy.getChildAt(i).transform.colorTransform=pal_color;
				}
			}
		}
	}
}

Line 3: ColorTransform class lets you adjust the color values in a display object

Line 6: Declaring the teddy bear object

Line 7: Declaring the palette: it’s a simple white circle that will be instanced three times in three different colors

Line 8: Variable used to handle color adjustment

Line 9: Array with possible colors… in this case red, green and blue

Line 10: Setting the default color

Line 12: Placing the teddy bear on stage

Line 13: Adding a listener to know when I’m clicking on it

Line 14: Beginning of the loop that will create the three-color palette

Line 15: Creating a new palette object

Lines 16-18: Giving the palette object the i-th color in the colors array

Lines 19-20: Setting the palette position on the stage

Line 21: Giving the palette an index, to easily recognize it

Line 22: Adding the palette on stage

Line 23: Adding a listener to know when I’m clicking on a palette

Lines 26-29: Changing the current color according to the index (see line 21) of the palette I clicked

Line 31: Looping through all teddy’s children (the colorable parts)

Line 32: Checking which movieclip I clicked

Lines 33-35 Changing its color in the same way shown at lines 16-18

And this is the result:

Play with colors… as you can see the antialiasing sucks… but you can make it perfect if you draw the image by yourself.

Download the source code.

I am using the CIE1994 formula because it’s quite accurate and not that complex to calculate.

Here it is, assuming I have two colors in Lab format

where

(thanx to Bruce Lindbloom)

First, I am turning the scripts explained at Color difference algorithm into functions, this way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

function rgb_to_xyz($rgb){
     $red = $rgb[0];
     $green = $rgb[1];
     $blue = $rgb[2]; 
     $_red = $red/255;
     $_green = $green/255;
     $_blue = $blue/255;
     if($_red>0.04045){
          $_red = ($_red+0.055)/1.055;
          $_red = pow($_red,2.4);
     }
     else{
          $_red = $_red/12.92;
     }
     if($_green>0.04045){
          $_green = ($_green+0.055)/1.055;
          $_green = pow($_green,2.4);     
     }
     else{
          $_green = $_green/12.92;
     }
     if($_blue>0.04045){
          $_blue = ($_blue+0.055)/1.055;
          $_blue = pow($_blue,2.4);     
     }
     else{
          $_blue = $_blue/12.92;
     }
     $_red *= 100;
     $_green *= 100;
     $_blue *= 100;
     $x = $_red * 0.4124 + $_green * 0.3576 + $_blue * 0.1805;
     $y = $_red * 0.2126 + $_green * 0.7152 + $_blue * 0.0722;
     $z = $_red * 0.0193 + $_green * 0.1192 + $_blue * 0.9505;
     return(array($x,$y,$z));
}

and…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function xyz_to_lab($xyz){
     $x = $xyz[0];
     $y = $xyz[1];
     $z = $xyz[2];
     $_x = $x/95.047;
     $_y = $y/100;
     $_z = $z/108.883;
     if($_x>0.008856){
          $_x = pow($_x,1/3);
     }
     else{
          $_x = 7.787*$_x + 16/116;
     }
     if($_y>0.008856){
          $_y = pow($_y,1/3);
     }
     else{
          $_y = (7.787*$_y) + (16/116);
     }
     if($_z>0.008856){
          $_z = pow($_z,1/3);
     }
     else{
          $_z = 7.787*$_z + 16/116;
     }
     $l= 116*$_y -16;
     $a= 500*($_x-$_y);
     $b= 200*($_y-$_z);
     return(array($l,$a,$b));
}

Now, it’s time to determine color difference, using the above formula:

1
2
3
4
5
6
7
8
9
10
11
12
13

function de_1994($lab1,$lab2){
     $c1 = sqrt($lab1[1]*$lab1[1]+$lab1[2]*$lab1[2]);
     $c2 = sqrt($lab2[1]*$lab2[1]+$lab2[2]*$lab2[2]);
     $dc = $c1-$c2;
     $dl = $lab1[0]-$lab2[0];
     $da = $lab1[1]-$lab2[1];
     $db = $lab1[2]-$lab2[2];
     $dh = sqrt(($da*$da)+($db*$db)-($dc*$dc));
     $first = $dl;
     $second = $dc/(1+0.045*$c1);
     $third = $dh/(1+0.015*$c1);
     return(sqrt($first*$first+$second*$second+$third*$third));
}

And you’ll find the difference between colors.

Next time, a real application using all this boring theory… (you will be surprised…)

In this video I unveil 5 killer tips I use almost every day.

Follow some simple steps and you will be able to:

1) Remove objects from a photo

2) Correct red eyes

3) Make a photo look older

4) Create realistic fog

5) Turn a night scene into a day one

All in a single video, quick and easy to understand

And for a wide range of applications working with color spaces.

Anyway, at the moment just know Wikipedia says there is a International Commission on Illumination (CIE) who calls distance between colors dE.

Obviously the meaning is removing subjectivity… I can see two colors “almost identical” while you can see the same ones “slighty different”.

In theory, a dE of under 1.0 is supposed to be indistinguishable unless the samples are adjacent to one another

To make things a little bit harder, there are different ways to calculate color difference… three formulas the CIE refined during the years… CIE76, CIE94 and CIEDE2000.

If you want to study in depth color difference, or even small color differences may be critical for your work, then the CIEDE2000 is the most advanced way to determine color difference, and the one with the most complex formula.

Complex formulas aren’t what I am looking for because I have in mind something a little bit complicated than just measuring color difference, and the CIE76 is maybe too basic, so at the moment I am testing the CIE94 formula.

Before examining the formula, let me introduce you some ways to define colors.

If you are used to web design, you’ll probably know the RGB color model. The name of the model comes from the initials of the three additive primary colors, Red, Green, and Blue, that are added to reproduce all colors.

But RGB is not the only way you can code colors.

Color models

Here it is a brief list of color models… some of them are useful, some others not that useful, anyway let’s see them…

RGB: The most famous color encoding, as explained before

CMY: The complement of RGB, named after Cyan, Magenta and Yellow.

CMYK: Same as CMY with the added K parameter which is blacK. It is the system used by printers.

HSV or HSB: A system which represents color as Hue, Saturation and Value. Hue is what is seen as the color. Saturation is how “pure” is the color. 0% is grey and 100% is a pure color. Value represents the Brightness.

HSL: Just like HSV but instead of Value we have lightness. This time, maximum saturation is at the mid-point (50%). 0% is black and 100% is white.

XYZ: This is also called “norm color system” and it’s a superset of RGB. It uses tristimulus values when encoding. X, Y and Z are all calculated through color-matching functions and are always positive.

The human eye has receptors (called cone cells) for short (S), middle (M), and long (L) wavelengths. Thus in principle, three parameters describe a color sensation. The tristimulus values of a color are the amounts of three primary colors in a three-component additive color model needed to match that test color.

Yxy: Known as the Trichromatic coordinates. Y represents the brightness and (x,y) hue and saturation.

CIE Lab: This color scale is based on the opponent color theory. L represents light-dark, a represents red-green and b represents yellow-blue.

There are some more systems, anyway, at the moment we are interested in Lab color space that unlike the RGB and CMYK color models, is designed to approximate human vision.

Since we are used to RGB (and eventually to CYMK if you work in print), we need to convert these formats into Lab color space, and in order to do it we must first convert them in XYZ color space, and then convert them again to Lab values.

RGB -> XYZ conversion

On the Standard Default Color Space for the Internet page on the “Colorimetric definitions and digital encodings” chapter you will find the matrix used for color conversion and the previous adjustments to do.

So, having a RGB value with red, green and blue values as base 10 integers from 0 to 255, you can convert RGB to XYZ this way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<?php 
 
// RGB values
$red = 39;
$green = 176;
$blue = 165;
 
// same values, from 0 to 1
$_red = $red/255;
$_green = $green/255;
$_blue = $blue/255;
 
// adjusting values
if($_red>0.04045){
     $_red = ($_red+0.055)/1.055;
     $_red = pow($_red,2.4);
}
else{
     $_red = $_red/12.92;
}
if($_green>0.04045){
     $_green = ($_green+0.055)/1.055;
     $_green = pow($_green,2.4);     
}
else{
     $_green = $_green/12.92;
}
if($_blue>0.04045){
     $_blue = ($_blue+0.055)/1.055;
     $_blue = pow($_blue,2.4);     
}
else{
     $_blue = $_blue/12.92;
}
 
$_red *= 100;
$_green *= 100;
$_blue *= 100;
 
// applying the matrix
$x = $_red * 0.4124 + $_green * 0.3576 + $_blue * 0.1805;
$y = $_red * 0.2126 + $_green * 0.7152 + $_blue * 0.0722;
$z = $_red * 0.0193 + $_green * 0.1192 + $_blue * 0.9505;
 
// displaying the values
echo "$x $y $z";
 
?>

Now, next step:

XYZ -> Lab conversion

In order to convert XYZ to Lab, first we must set the white point, that is a set of tristimulus values or chromaticity coordinates that serve to define the color “white” in image capture, encoding, or reproduction.

Then, following the formula found on this page, we can solve the problem this way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?php
 
$_x = $x/95.047;
$_y = $y/100;
$_z = $z/108.883;
 
// adjusting the values
if($_x>0.008856){
     $_x = pow($_x,1/3);
}
else{
     $_x = 7.787*$_x + 16/116;
}
if($_y>0.008856){
     $_y = pow($_y,1/3);
}
else{
     $_y = (7.787*$_y) + (16/116);
     echo $_y."<br>";
}
if($_z>0.008856){
     $_z = pow($_z,1/3);
}
else{
     $_z = 7.787*$_z + 16/116;
}
 
$l= 116*$_y -16;
$a= 500*($_x-$_y);
$b= 200*($_y-$_z);
 
// displaying the values
echo "$l $a $b";
 
?>

And in the end, the orginal RGB 39,176,165 is converted in Lab 65.12, -37.39, -4.54 that is very close to Photoshop CS4 Lab 65,-38,-5 that probably uses a different white point.

Next time we’ll see something interesting to do with these formulas.

In part 2 we saw how to prevent cheating.

In this 3rd part we’ll make something useful with it. I am going to add to my Triqui MochiAds Arcade theme for WordPress a WordPress widget showing the latest scores submitted from my portal, triqui.com, but once you understand how to do it, you can easily change the script to make it fit your needs.

The first thing to do is creating a new table in your WordPress database. At this time, I only want to save player name, score and obviously the game unique id.

So my MySQL query is:

1
2
3
4
5
6
7
8

CREATE TABLE IF NOT EXISTS `wp_mochi_scores` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `when` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `gameid` text COLLATE utf8_unicode_ci NOT NULL,
  `name` text COLLATE utf8_unicode_ci NOT NULL,
  `score` text COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

as you can see, I added a primary auto increment key and a timestamp field, to determine when the score has been saved.

Then I need to change postscores.php this way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?php
 
// your secret key
$key="f26ebddd6fcfb796ac1841bcc57af057";
 
// initializing an empty string - not strictly necessary
$string = "";
 
// ordering the associative POST array by keys
ksort($_POST);
 
// loop scanning through all POST array
foreach($_POST as $varname => $varvalue){
     // if the key is not "signature" then append key and url encoded values to the string
     if($varname!="signature"){
          $string.=$varname."=".rawurlencode($varvalue)."&";
     }
}
 
// removing the last character (a "&"")
$string = substr($string,0,strlen($string)-1);
 
// appeding the secret key to the string
$string.= $key;
 
// comparing the md5 encryption of the string with the "signature" variable
if(md5($string)==$_POST[signature]){
     // requiring the relative path to your wp-config.php file
     // according to your wp installation, this path may change
     // but in most cases it will work this way
     require("../../../wp-config.php");
     // connecting to wp database
     $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
     // selecting the proper database
     $db = mysql_select_db($link,DB_NAME);
     // inserting the game tag, the score and the player name
     $result = mysql_query("insert into ".$table_prefix."mochi_scores (gameid,name,score) values('$_POST[gameID]','$_POST[name]','$_POST[score]')");
}
 
?>

Now I have a script that silently populates the mochi_scores table with the latest scores.

It’s time to show them in a widget.

If you don’t know what is a widget or how to create and activate it, follow How to create a WordPress Widget.

I created a file called mochi_lastscores.php with this content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<?php
/*
Plugin Name: Mochi lastscores
Plugin URI: http://www.emanueleferonato.com/
Description: Displays last scores submitted in your MochiAds Arcade
Author: Emanuele Feronato
Version: 1.0
Author URI: http://www.emanueleferonato.com/
*/
 
function mochi_lastscores_widget() {
     global $wpdb;
     echo"<li><h2>LATEST SCORES</h2>";
     // selecting the latest 10 scores
     $query = "select * from ".$wpdb->prefix."mochi_scores order by id desc limit 0,10";
     // saving scores inside an array called "scores"
     $scores = $wpdb->get_results($query,ARRAY_A);
     if($scores){
          echo "<ul>";
          // scanning all scores
          foreach($scores as $score){
               // looking for the entry in my mochi game table with the same game tag as the one I saved
               $query = "select * from ".$wpdb->prefix."mochi where game_tag = \"$score[gameid]\"";
               // saving the entry in an array called "game"
               $game = $wpdb->get_results($query,ARRAY_A);
               // if the entry has a blog_id...
               if($game[0][blog_id]){
                    // selecting the post in the wp post table with the same id as the game found in the mochi games table
                    $query = "select * from ".$wpdb->prefix."posts where ID = ".$game[0][blog_id];
                    // saving the entry in a variable called "post"
                    $post = $wpdb->get_results($query,ARRAY_A);
                    // printing the entry in the theme
                    echo "<li><span class = \"turnwhite\">$score[name]</span> just scored <span class = \"turnwhite\">$score[score]</span> on <a href = \"".$post[0][guid]."\">".$game[0][name]."</a></li>";
               }
          }
          echo "</ul>";
     }
     echo "</li>";
}
 
function init_mochi_lastscores(){
     register_sidebar_widget("Mochi Last Scores", "mochi_lastscores_widget");     
}
 
add_action("plugins_loaded", "init_mochi_lastscores");
 
?>

And you can find the result in the left sidebar in my triqui.com portal.

This feature will be added in my next Triqui MochiAds Arcade theme for WordPress update, but meanwhile you can easily set it up on your own.

In the first step I showed you how to configure a cross-domain policy file, calling the javascript and send the results to a webpage.

Now it’s time to prevent cheating.

As you can see, it’s very easy to send some POST variables to a webpage, and it’s even easier to do it when you know the name of such webpage… and in our case you can know it simply looking at the html.

If you look at the html of the page containing Mazeroll, it’s clear the name of the page I send the POST array to is postscores.php.

So we have to prevent cheating.

That’s why in your MochiAds publisher settings page you’ll find a secret key that can be used to authenticate the score data sent from the Bridge to your server.

In your POST variables you can find one called signature.

This is an MD5 hash of the POST vars + your secret key. So the MD5 hash of the POST vars + your secret key and the signature must match.

In order to use this for authentication, you have to follow these steps:

1. Populate an array of all parameter names as keys and their values
2. Remove out the signature parameter
3. Sort the array alphabetically by the key name
4. Turn the array into a url encoded string
5. Append your secret key
6. Compute the MD5 hash with the string
7. compare your MD5 hash with the signature parameter sent by the Bridge

So I prepared this little script that does the job:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
 
// your secret key
$key="xxxxxxxxxxxxxxxxxxxxxxxxxx";
 
// initializing an empty string - not strictly necessary
$string = "";
 
// ordering the associative POST array by keys
ksort($_POST);
 
// loop scanning through all POST array
foreach($_POST as $varname => $varvalue){
     // if the key is not "signature" then append key and url encoded values to the string
     if($varname!="signature"){
          $string.=$varname."=".rawurlencode($varvalue)."&";
     }
}
 
// removing the last character (a "&"")
$string = substr($string,0,strlen($string)-1);
 
// appeding the secret key to the string
$string.= $key;
 
// comparing the md5 encryption of the string with the "signature" variable
if(md5($string)==$_POST[signature]){
     // it's a valid submission!
}
 
?>

Now you can check for valid submissions, next time I’ll show you what to do with them

Just do me a favor and visit my blog, Top Five Blog or Swag Games as your donation :)

What is a Media RSS feed?

Media RSS was originally created by Yahoo so that people could send in there Videos, Images, etc.

More importantly: Google uses MRSS feeds for there Video Search. Google offers a format for video sitemaps, but those don’t seem to work like MRSS feeds.

Have you noticed lately, that when you search for a game on google, some sites have a thumbnail image of the game? That is because some arcades are sending in MRSS feeds.

First of all, it took me forever to to figure out how to make one that actually works, reading numerous articles and many attempts. I did this first with Hooda Math, and it took only a few hours for the thumbnails to start showing up, probably because Hooda Math has a PR5.

Recently, I tried it with my sister site to Top Five Blog, Top Five Games, and it took about a week, but then I noticed my video thumbnails showing up on Google Web Search or at least in there video search.

Just today, I took the time to make a MRSS for my newest arcade: Swag Games, I’m pretty excited about this site, because the only Niche is my preferences for games. Finally I get to have some freedom in sponsoring and producing any type of games. So check to see if that MRSS worked in a few days, a week, or a month.

The example I will walk you all through is for “Line Bounder” a game recently featured on Addicting Games and “Coffee Shop Game” which I already had at about #6 on google search, but this bumped it up to #3, plus it now has a thumbnail next to it.

Feel free to google search the games for yourself, they should show up with thumbnails depending where in the world you are located.

Ok, here is an example of the feed.xml I use:

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
 
<channel>
<title>Math Games</title>
<link>http://hoodamath.com/games/</link>
<description>Cool Math Games like Bloxorz, Coffee Shops, Super Stackers 2. Fun Games get you an A Plus in Math.</description>
<lastBuildDate>Thu, 09 Jul 2009 23:00:00 EST</lastBuildDate>
 
<item>
<title>Line Bounder</title>
<link>http://hoodamath.com/games/linebounder.php</link>
<description>Play Line Bounder. Turn based strategy game, your aim is to reach enemy ground and stop him from reaching yours.</description>
<guid>http://hoodamath.com/games/linebounder.php</guid>
<media:content url="http://hoodamath.com/games/linebounder.swf" fileSize="981080" type="application/x-shockwave-flash" width="550" height="550" medium="video"/>
<media:title>Line Bounder</media:title>
<media:description>Play Line Bounder. Turn based strategy game, your aim is to reach enemy ground and stop him from reaching yours.</media:description>
<media:thumbnail url="http://www.hoodamath.com/images/g-linebounder.gif" width="160" height="120"/>
</item>
 
<item>
<title>Coffee Shop Game</title>
<link>http://hoodamath.com/games/coffeeshopgame.php</link>
<description>Play Coffee Shop Game. Run your own Coffee Shop! You have a limited # of days, so make sure to maximize cash, save inventory, and if you reputation gets high enough you might even get a visit from a special guest. :D</description>
<guid>http://hoodamath.com/games/coffeeshopgame.php</guid>
<media:content url="http://hoodamath.com/games/coffeeshop.swf" fileSize="2080000" type="application/x-shockwave-flash" width="640" height="480" medium="video"/>
<media:title>Coffee Shop Game</media:title>
<media:description>Play Coffee Shop Game. Run your own Coffee Shop! You have a limited # of days, so make sure to maximize cash, save inventory, and if you reputation gets high enough you might even get a  
visit from a special guest. </media:description>
<media:thumbnail url="http://www.hoodamath.com/images/g-coffeeshop.gif" width="160" height="120"/>
</item>
 
</channel>
 
</rss>

Now I will take you through this step by step.

1) Save it as feed.xml

Let’s take a closer look at the code

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">

Extremely, necessary, since Yahoo came up with the format. Needs to be closed at the end with
</rss>

<channel>

You can have these separated into different categories, but I put them all under my main games page, rather than separating them out. Needs to be closed at the end with </channel>

<title>Math Games</title>

This is the Title of my Main Games Page.

<link>http://hoodamath.com/games/</link>

this is the URL for my Games page, notice no quotations.

<description>Cool Math Games like Bloxorz, Coffee Shops, Super Stackers 2. Fun Games get you an A Plus in Math.</description>

This is the exact same description located in the <meta tag> of my main games page.

IMPORTANT: Match up as much as possible to please the Google Bots

ALSO: You still want all of your urls located on your sitemap.xml

<lastBuildDate>Thu, 09 Jul 2009 23:00:00 EST</lastBuildDate>

Again very important to update, every time you change your feed, it is also very hard to get this right, please feel free to copy my format, also the FEED Validator I recommend can check this for you.

<item>

This will be used for each individual game page. Remember to close each one with </item>

<title>Line Bounder</title>

Again, make sure it matches the <title> tags on the URL you are about to add to <item>

<link>http://hoodamath.com/games/coffeeshopgame.php</link>

This is the URL for your page containing the .swf file. Whatever it says in your browser when you go to your game page.

<description>Play Line Bounder. Turn based strategy game, your aim is to reach enemy ground and stop him from reaching yours.</description>

Ok, I know this sounds redundant, but remember to match your <meta description> and also make sure you have different <meta description> on all of your pages.

<guid>http://hoodamath.com/games/linebounder.php</guid>

I repeated the URL again. Why? I don’t know, just do it. If you want more details read the Webmonkey link at the bottom of this post.

<media:content url="http://hoodamath.com/games/linebounder.swf" fileSize="981080" type="application/x-shockwave-flash" width="550" height="550" medium="video"/>

Finally we are at the meat of your new MRSS feed.

<media:content

This <tag> does not use a closing </tag> all of the info is kept between the < and />

url="http://hoodamath.com/games/linebounder.swf"

Now we are finally at the .swf Flash file. Notice how it is in the /games/ folder. This is wrong, because I keep it in a /flash/ folder, but the MRSS feed seemed to work on Google anyways. I recommend doing it correctly though, and I probably will fix it soon, like in the next year.

fileSize="981080"

This is the Size of your .swf in bytes. This is optional I think, but I HIGHLY RECOMMEND IT. Give the Google Bots as much information as you can and they are more likely to include your pages in Google Search.

type="application/x-shockwave-flash"

Just add it, again giving full disclosure to Google, it also probably tells Google, that it needs to be played at your site, rather than in Google Video, this is VERY GOOD for you.

width="550" height="550"

Again take the time to give Google as much information as you can.

medium="video"

Well do you want it in Google Video or not?

/>

REMEMBER to close up the <tag>

<media:title>Line Bounder</media:title>

Just Get use to repeating everything twice, it may work without it, but why take the chance.

<media:description>Play Line Bounder. Turn based strategy game, your aim is to reach enemy ground and stop him from reaching yours.</media:description>

repeating twice again…

<media:thumbnail

Oh, So Important, This will be the image that if you are lucky will show up in Google Web Search, with a higher rank than you probably deserve for your game page.

url="http://www.hoodamath.com/images/g-linebounder.gif"

I would get this right! Also notice I used .gif, I don’t recommend, because google likes .jpg

width="160" height="120"

These are the minimum dimensions Google states on their site.

I HIGHLY RECOMMEND, you take the time to make a .jpg that is 160×120 and make sure it looks like something you would click.

/>

Again this is a different kind of <tag> so close it up properly. Also, notice everything is contained in quotations.

</item>

Finally, close up the <item>, but you aren’t done on to the next game and the next game.

I included a second example, Coffee Shop Game.

</channel> </rss>

DON’T FORGET TO CLOSE UP ALL YOUR OPEN <TAGS>

2) Upload it to the url of your site, for example: http://hoodamath.com/feed.xml

3) Validate it at: FEED Validator.

4) Submit it to Google, Yahoo, and where ever else you want to.

I highly recommend using Google Webmaster Tools to keep track of your MRSS feed’s progress.

**Sources: I know there was one article out there that was a big help and I believe it was from Webmonkey, which can explain each in more detail. Also Yahoo has a tutorial on Media RSS that even Google Help Recommends.

Now that the secret is out, and there goes a ton of SEO. Please donate by visiting my blog, Top Five Blog or my new arcade, Swag Games, or both.

Now that you have a WordPress theme and plugin in order to set uo your own MochiAds arcade site like triqui.com, let’s see how we can add some interesting features with the Publisher Bridge.

Every step explained in this tutorial will be included in the next upgrade of Triqui MochiAds Arcade theme, but it’s very interesting to see how does it work in order to custom it or install it in your own arcade site.

First, let me explain why you should use the Publisher Bridge… the reasons are listed in the official page:

1. Leverage the hundreds of MochiAds leaderboard enabled games to attract new players.
2. Receive new traffic – MochiAds’ Challenges feature will drive new players back to your site to compete in top scores.
3. Build exciting site features – Save player scoring info for all MochiAds leaderboard-enabled games.
4. Encourage competition – In-game scores are listed for your community only.
5. Maintain consistency – Display your own community usernames when players post scores.
6. Promote your brand – Put your site logo directly in the game.

but, as usual, it’s up to your creativity finding the best way to use them.

Cross-domain policy

From the Cross-domain policy file specification you cana cross-domain policy file is an XML document that grants a web client – such as Adobe Flash Player (though not necessarily limited to it) – permission to handle data across multiple domains. When a client hosts content from a particular source domain and that content makes requests directed towards a domain other than its own, the remote domain would need to host a cross-domain policy file that grants access to the source domain, allowing the client to continue with the transaction.

So the first thing you should do is to create a file called crossdomain.xml in your root, with this content:

1
2
3
4
5
6
7
8

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
     <site-control permitted-cross-domain-policies="master-only"/>
     <allow-access-from domain="x.mochiads.com"/>
     <allow-access-from domain="www.mochiads.com"/>
</cross-domain-policy>

This will allow Mochi client to communicate with your server.

Javascript call

Once your server is able to communicate, you need to insert the javascript provided by Mochi in the same page where you host (or leech) a game.

You don’t need to know if the game has a leaderboard, if the game does not support highscores, nothing will happen.

This is the one I used:

1
2

<script src="http://xs.mochiads.com/static/pub/swf/leaderboard.js" type="text/javascript"></script>
               <script type="text/javascript">var options = {partnerID: "3b7a2ab2368e1d2d", id: "leaderboard_bridge",globalScores:"true",gateway : "http://www.triqui.com/wp-content/themes/triqui/postscores.php",callback : function (params) {document.getElementById('latest').innerHTML="Your latest score: "+params.score;}}; Mochi.addLeaderboardIntegration(options);</script>

I used only a few options among the ones provided by Mochi, let me explain them:

partnerID: this is the ID MochiAds gave you when you signed up as a publisher. Remember: the Publisher ID, not the Publisher Secret Key!!!

id: The id of the HTML element you want to place the Bridge SWF into. Place such element wherever you want, it’s not important since it does not contain anything.

globalScores: Set to true if you wish to display global scores and not just those submitted from your site. I recommend to set it to true if your portal does not have that much visits per day (under 10,000).

gateway: the absolute path of a file that will receive posted data with POST method. I’ll explain how to use such data in next tutorial

callback: a JavaScript function which will be called when the player submits a score. In my case, I simply display in the page the latest score the player got, but obviously you can use Ajax to improve the interactivity.

Try to see it in action playing a leaderboard enabled game on Triqui.com, such as Mazeroll and see what happens when you submit a score.

But the most exciting feature lies in the gateway: having all score data in the POST array will allow you to create custom leaderboards and some other interesting things I’ll explain during next tutorial.

Meanwhile, look at the variables the bridge passes to postscores.php page when I submit a score, obtained with a simple var_dump:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

array(14) {
  ["signature"]=>
  string(32) "(had to omit it)"
  ["sessionID"]=>
  string(0) ""
  ["userID"]=>
  string(0) ""
  ["username"]=>
  string(0) ""
  ["scoreLabel"]=>
  string(6) "Points"
  ["sortOrder"]=>
  string(4) "desc"
  ["datatype"]=>
  string(6) "number"
  ["description"]=>
  string(0) ""
  ["title"]=>
  string(10) "Highscores"
  ["gameID"]=>
  string(16) "98c536dbf70a1cbc"
  ["boardID"]=>
  string(32) "4b2ac948de239f8853a3bc6a1b771d9d"
  ["name"]=>
  string(4) "ququ"
  ["score"]=>
  string(3) "520"
  ["lcId"]=>
  string(1) "1"
}

Next time I’ll show you how to use these values.

Once you read part 1, you should know how to have a friendly url to play a game in your Flash game portal.

In the previous example, I showed you how to transform this link:

http://www.triqui.com/play.php?id=1713

into this one:

http://www.triqui.com/id/1713/

playing with .htaccess file

This is called “friendly” url, and now I’ll show you how to improve it. Starting from…

Your database game table

There are thousands of ways you can store your games data into your database, but all should follow a rule that in the table that stores your games information you have a column where you saved the game name.

No matter if you called the table “games” or “entries” or “bananas” and you called the column “game_name” or “title” or “apples”… you should have a table with all games with a column for the game name.

We can say the “game_title” column is a text one (or something that works in the same way) where basically you save stuff like this one:

Jamag: A simple one-word game name

Pillage the Village: A more-than-one-word game name

~TimedHouse~: A game name with one or more special chars, where in this example I am calling “special char” every character that is not an alphanumeric one

As every game developer is free to choose the name for his game, we must convert it in our standard way to name games.

There is not a right way or a wrong way, just choose your way.

I’ll clear this concept with an example. Let’s Google for a popular game like Desktop Tower Defense and you will notice that, as example, Kongregate’s urls is this one

http://www.kongregate.com/games/preecep/desktop-tower-defense-1-5.

while Jay is Games’ url is

http://jayisgames.com/archives/2007/06/desktop_tower_defense_15.php.

It’s easy to see that the first one coded the spaces with a - whine the second one coded the spaces with a _

So it’s time to introduce you my own rule:

All non-alphanumeric characters will be removed, with the only exception of spaces that will be changed with a -. The string will be lowercased too.

No matter the rule you will follow, you will have to create a new column in your game table that will contain the “translated” name.

The following picture will show the “game_name” and the “translated_game_name” columns for the last 30 entries

once you updated your database, it’s now time to update your…

.htaccess file

In the previous example, our .htaccess file was

1
2
3

ErrorDocument 404 /index.php
RewriteEngine on
RewriteRule ^id/([^/\.]+)/?$ /play.php?id=$1 [L]

Now it’s time to add a line in this way:

1
2
3
4

ErrorDocument 404 /index.php
RewriteEngine on
RewriteRule ^id/([^/\.]+)/?$ /play.php?id=$1 [L]
RewriteRule ^game/([^/\.]+)/?$ /play.php?game_url=$1 [L]

Line 4, the new one, acts in the same way as line 3, explained in part 1, just waiting for the game string to redirect to
play.php?game_url=translated_game_name

and that’s all for the .htaccess

Now, you can play Jamag in four ways:

1) http://www.triqui.com/play.php?id=1713

2) http://www.triqui.com/id/1713/

3) http://www.triqui.com/play.php?game_url=jamag

4) http://www.triqui.com/game/jamag/

As long as your play.php page detects if you are passing the id or game_url variable.

I did this way.

Hope you will find it useful

Ok, now you have your own game portal. Let’s call it triqui.com.

You want to share a link with your friends, or want search engine to index it properly.

If I want you to play Jamag, I have to give you this link
http://www.triqui.com/play.php?id=1713.
Now, I would like you to tell me how can you understand I am talking about Jamag from this link http://www.triqui.com/play.php?id=1713.
You can’t.

Now let’s understand why I have to write that play.php?id=xxxx to play a game.

All information about the games is stored in a database, and every game has an unique id assigned by the script.

Jamag’s id is 1713, so when I pass this value, the php script knows where to retrieve information about the game.

If you want to play Jamag on Kongregate, this is the link:
http://www.kongregate.com/games/triqui/jamag.

Seems like Kongregate has a directory to store my games (triqui) and a subdirectory for every game I made.

Obviously that’s not true. This is possible thanks to…

.htaccess file

Normally .htaccess is used to implement custom error pages or password protected directories. But you can do a lot more with this file.

First, let me point that .htaccess is the file extension, not the filename. The filename does not exists.

That’s what I created with my favourite text editor (notepad…)

1
2
3

ErrorDocument 404 /index.php
RewriteEngine on
RewriteRule ^id/([^/\.]+)/?$ /play.php?id=$1 [L]

Let’s see what is it:

Line 1: ErrorDocument detects any document error. If you don’t know what I am talking about, here it is a brief list:

401: Unauthorized – The request requires user authentication.

403: Forbidden – The server understood the request, but is refusing to fulfill it.

404: Not Found – The server has not found anything matching the Request-URI.

So ErrorDocument 404 refers to a “not found” error… that happens when the user looks for a page that does not exist

/index.php is the path where to redirect the user if he requested a page that does not exist

We can say that ErrorDocument 404 /index.php means “if someone requested a page that does not exist, then redirect him to index.php”.

And that’s what happens: go to http://www.triqui.com/dfgretre (a page that does not exist) and you will be redirected to home page.

Just in one line of code…

Line 2: Activation of the RewriteEngine module, a rewriting engine to rewrite requested URLs on the fly.

Not all servers support the rewrite engine.

In order to determine if your server supports it, you have to upload a php file with just:

1
2
3

<?php
phpinfo();
?>

and see what happens. In the result page, search for “mod_rewrite”.

If you find it in the “Apache loaded modules” section, then you know your server supports the rewrite engine, although in a server with php version 4.4.7 I was able to make it work even if the search returned a negative result.

Line 3: The core instruction: RewriteRule looks if the current URL matches with the regular expression passed as first parameter.

That ^id/([^/\.]+)/?$ is a regular expression, and even if I am planning to make a tutorial about regular expressions (reg exps from now on), at the moment I am just recommending you this Wikipedia article.

The second parameter of RewriteRule is the substitution.

Basically this instruction says: if the page starts with id (^id/) then copy everything that’s not a slash, a backslash or a period (([^/\.]+)) and make sure that after the starting matched id there is only a slash (/?$)… then load the page /play.php?id=$1, pasting the characters previously copied in place of $1.

The final [L] tells not to search for any more rule if this one was satisfied.

In an even basic way, the script says:

If you find an URL like
http://www.triqui.com/id/1713/
just redirect to URL
http://www.triqui.com/play.php?id=1713

And that’s what happens if you go to http://www.triqui.com/id/1713/.

I hust had to upload that .htaccess file in my root directory.

You may say there is not a big difference between play.php?id=1713 and /id/1713/ but this is the first step to friendly URLs generation.

Stay tuned for the next update.