Creation of a Flash coloring book

Before you start reading this tutorial, there is something you must do.

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 Read more

Color difference algorithm – part 2

It’s time to see how to calculate difference between two colors.

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) Read more

Video tutorial: 5 detailed Adobe Photoshop killer tips

Did you ever want to master Adobe Photoshop?

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 Read more

Color difference algorithm

I will probably write some posts and tutorials about this topic, becaue color differences are very useful when designing a color scheme or some elements to be placed on a given background color.

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. Read more

Understanding MochiAds Publisher Bridge – Part 3

In part 1 we saw how to configure a cross-domain policy file, calling the javascript and send the results to a webpage.

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. Read more

Understanding MochiAds Publisher Bridge – Part 2

This is the second part of Understanding MochiAds Publisher Bridge.

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. Read more

How to make a Media RSS feed to help your games compete for SEO

Hi again, Michael Edlavitch here, ready to give away my secret to improving SEO placement for your games.

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. Read more

Understanding MochiAds Publisher Bridge

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.

How to generate friendly URLs with .htaccess – part 2

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. Read more

How to generate friendly URLs with .htaccess

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. Read more

Next Page →