Showing MochiAds leaderboards in any Flash movie or web page

July 31, 2008 by Emanuele Feronato
Filed Under Actionscript 2, Flash, Php •  

Ok, so you created your awesome game, embedded MochiAds leaderboards and want to publish high scores in your homepage, in another Flash movie, or wherever you want, just outside the game.

Just think about Kongregate, that shows top scores on the right of the game you are playing.

That's what we are going to do.

Information stored into MochiAds leaderboards

Every player who enters the leaderboard is saved with its name, the score (obviously), the ISO 3166-1 alpha-2 Country code and the timestamp of his score.

ISO 3166-1 alpha-2 country codes are two-letter country codes in the ISO 3166-1 standard to represent countries and dependent territories.

They are published by the International Organization for Standardization (ISO) as part of its ISO 3166 standard.

Read this page for further information.

The timestamp is the number of millisecond passed from January 1st, 1970

There are other information you can get from MochiAds leaderboards such as the number of entries for each leaderboard, but in this example I am only showing an all-time top 10 chart, so I already have enough information.

Refer to MochiAds Developer Support for the full list of options.

Flash Vs Php

If you just want to display your top 10 in a Flash movie, then you are lucky... MochiAds proviedes an API that does almost all the job.

Problems come when you want to show results in an HTML page.

There isn't any API to do it and there won't be any in the future, as soon as I know.

Too good I am a PROgrammer and I can arrange it anyway.

Let's say I want to display the Top 10 scores for Summer Couples.

Flash Top 10

This is the movie with the name of the dynamic text instances I created

And this is the commented actionscript:

PLAIN TEXT
ACTIONSCRIPT:
  1. // connecting to mochi services the id below is the id of your game
  2. mochi.MochiServices.connect("summer couples id");
  3. // setting the board id - the id below is the one of your leaderboard and NOT the one of your game
  4. mochi.MochiScores.setBoardID("summer couples board id");
  5. // sending the request for leaderboard datas
  6. // "display table" is the funcion to be called once the request is done
  7. mochi.MochiScores.requestList(this, "display_table");
  8. // ... and here it is the function
  9. function display_table(leaderboard:Object) {
  10.     // changing the "Loading..." text
  11.     messagetxt.text = "Top 10";
  12.     // creating a variable called array_with_leaderboard that will store all rows of the ALL TIME leaderboard
  13.     // change alltime with:
  14.     // daily — scores for the daily table
  15.     // weekly — scores for the weekly table
  16.     // monthly — guess what?
  17.     array_with_leaderboard = leaderboard.scores.alltime.rows;
  18.     // scanning through top 10
  19.     for (x=0; x<10; x++) {
  20.         // updadint place field
  21.         place.text += (x+1)+"\n";
  22.         // updating points field
  23.         points.text += array_with_leaderboard[x][0]+"\n";
  24.         // updating names field
  25.         names.text += array_with_leaderboard[x][1]+"\n";
  26.         // updating country field
  27.         country.text += array_with_leaderboard[x][2]+"\n";
  28.         // updating timestamp field
  29.         timestamp.text += array_with_leaderboard[x][3]+"\n";
  30.     }
  31.     // sending the variables to /downloads/showmochitable.php page with POST method and display it on "mochiframe" iframe
  32.     // you don't need it if you only want to display values in flash
  33.     getURL("/downloads/showmochitable.php", "mochiframe", "POST");
  34. }

And here it is my chart for Summer Couples

I did not convert the timestamp and the Coutry code because it's not the aim of this tutorial. Feel free to do it for me and I'll publish your version.

I also did not include any check for errors, so if you see a lot of "undefined", that's because at the moment MochiAds is suffering of some technical problem and cannot display leaderboards.

But when leaderboards work, the script works too.

Remove line 33 if you don't want to show leaderboards in HTML.

HTML (with Php) Top 10

The key of HTML top 10 is in the getURL at line 33.

Now some of you will say it would be better to use something like sendAndLoad but I am going to use getURL for two reasons:

1) In this example I am going to display top 10 in a table, but I would want to do it with an alert called by JavaScript (or any other JS function)

2) I don't have to store anything in a database, just processing POST results

The downside is I am getting a CSV string and not an array... this means sometimes (in example if the name of the player has a comma) I can get wrong result.

The perfect solution would be parsing results in JSON format and post them with getURL (anyone willing do do it?)

Anyway, you can just hide the previous Flash movie (or make it 1x1 pixels sized) and have your results in an iframe with this Php script:

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. //exploding POST variable removing all commas
  4. $scores = explode(",",$_POST[array_with_leaderboard]);
  5.  
  6. // displaying results
  7. for($x=0;$x<10;$x++){
  8.     $count = $x*4;
  9.     $html .= "<tr>";
  10.     $html .= "<td>".($x+1)."</td>";
  11.     $html .= "<td>".$scores[$count]."</td>";
  12.     $html .= "<td>".$scores[$count+1]."</td>";
  13.     // showing a flag according to Country code
  14.     $html .= "<td><img src = \"flags/".$scores[$count+2].".gif\"></td>";
  15.     // converting timestamp in readable format
  16.     $html .= "<td>".date("M d Y",round($scores[$count+3]/1000))."</td>";
  17.     $html .= "</tr>";
  18. }
  19.  
  20. ?>
  21.  
  22. <html>
  23.     <body>
  24.         <table cellpadding = "3" cellspacing = "0" border ="0">
  25.             <?php echo $html; ?>
  26.         </table>
  27.     </body>
  28. </html>

That outputs this page:

This page too will work only after the leaderboard is correctly displayed in the Flash movie.

No check for errors in this page too, but you are free to improve it.

I used some free flag icons you can find on famfamfam and called with the proper Country code, so the italian flag is it.gif, the french one is fr.gif and so on.

Timestamp is converted using Php date() function, but remember to divide the original timestamp by 1,000 because the original one is in milliseconds while Php accepts timestamps in seconds.

The first thing I'll do now, is enabling leaderboard browsing for my games... if everything goes ok I would like to ask MochiAds developers to share their leaderboard IDs in order to have a lot of games with highscores on Triqui.com.

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (14 votes, average: 4.57 out of 5)
Loading ... Loading ...

» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

2 Responses to “Showing MochiAds leaderboards in any Flash movie or web page”

  1. Bob Ippolito on August 1st, 2008 12:29 am

    For the flags you can also use the ones on our CDN… here’s an example for the US flag in PNG format:
    * http://xs.mochiads.com/static/lib/flags/us.png

    These are also in SWF format for loadMovie usage:
    * http://xs.mochiads.com/static/lib/flags/us.swf

Leave a Reply




Trackbacks

  1. Create a Wordpress MochiAds Leaderboards Widget : Emanuele Feronato on October 17th, 2008 1:39 pm

    [...] time ago I blogged about Showing MochiAds leaderboards in any Flash movie or web page with a script made by myself that displayed MochiAds leaderboards on your [...]