What is MochiAds Games?
MochiAds is an advertising network for flash games. Being a developer, you can make your flash games and put an ads on the loading scene. Then you will get your revenue every time the player click the ads.

Being a publisher, like who make the game portal with MochiAds games. They will give you 10% revenue share every time player click the ads. Yes, you host other developers' flash games and you will get revenue. You just need to sign up at MochiAds and download the game it provides and host it on your webpage, blog, wordpress, facebook etc.

Read the games feed
To make a game portal, you need to become a publisher. After you sign up, you will be able to access to the MochiAds Feed. You can choose both JSON or XML. I will use JSON in this tutorial.

The feed is updated every day. That means you will keep having new content for you game portal. And there are already almost 3000 games available now. You are able to kick off your portal without worrying no games on it.

Ok, let's get start on reading the games feed.

I am using python to download the feed and parse the json.

 
!/usr/bin/python
 
import urllib,json,sys
 
# Downlaod the feed
m = urllib.urlopen("http://www.mochiads.com/feeds/games/{your key}/all/all?format=json")
f = m.read()
 
# Use Python-json to parse the feed
obj = json.read(f)
 

Now we are accessing the feed with almost 3000 flash games. Next step we will use python to download all swf of the games. You need to download the games because you need to host the game on your domain to get revenue share.

More »

There is a way to toggle full screen terminal and hide it with only a hot key in Leopard or Tiger. It is Visor from Blacktree

It is a terminal plugin that make a terminal window look like a console window in Quake or Counter-Strike. When the hot key (default CTRL+F1) is pressed, a terminal will appear on the top of the screen.

I changed the transition time to 0.1s. And then changed the terminal height from 24 to 62. 62 rows fits in a 1440x900 macbook pro for a fullscreen visor terminal.

Now I can toggle my vim very fast by just typing CTRL+` (the default visor key is CTRL+F1). It is really very nice and handy.

And here is a screenshot of my working project on vim in visor terminal with full screen:

More »

The problem is this black screen problem did not show up every time. Sometimes when I could boot the mbp with screen on after trying for many times. Sometimes the screen will suddenly work if I press some boot up key combination, such as 'c', 'shift', 'reset p ram', 'eject' button. But most of the time the screen did no work and kept black.

This problem has been annoying me for more than a month. I tried not to put the mbp sleep or not shut it down. But when times passed, the problem were getting more serious. At last, I try two whole days and failed to boot the mbp with screen. Then I brought it to Apple Repair Center in Hong Kong.

Luckily my mbp is still with 1 year so I got my mbp fixed without paying any money.

I got my fixed mbp within one week I sent to the center. And the reason seems to be Logic Board failed. I got a new Logic Board inside my mbp now. And now I can keep on writing great things here.

Cheers! 

More »

The player played this basketball game beyond godlike. The scroll counter overflow and reset to 000 after count over 999. It's really crazy. The hands move like a machine robot.

More »

Today let's try to build our online assistance to help visiting the website. Here is my requirement of the online assistance. Basically, the chatterbot can show me the pages I want to visit. For example, if I type "Please show me the company history". Then the page will got to "Company_history.htm".

There are several chatterbot program that can be download and used on the web. Most of them need sever-side script such as PHP / ASP and a database. Here I used a Javascript chatterbot that I talked in previous post about "Build your own chatterbot". However it need some code modification to make it work as a navigator and online assistance of your website.

First, you need to download the script from Alkali's Website or here. Then include the script within HEAD section.

Afterwards we need to an onLoad statement in the BODY tag:

 
  <body onLoad="document.AI.BOT.value = beginPhrase;">
 

and the chat box for conversation:

 
<form name=AI onSubmit="return doAI();">
      Chatbot:<br>
   <textarea cols=50 rows=4 name=Bot wrap=virtual></textarea>
 
 
      You:<br>
<input type=text size=50 name=User>
   </form>
 

Of course you can modify the style to make it user-friendly. For example you can put your avatar image there or some other decorations.

Here we come to the main point.

Open the chatbot.js file and you will see a guideline to make your own respond:

//Prefixes:
//  >    Display this text to change the subject or as a response.
//  !    Display this text only as a response.
//  ^    Evaluate this JavaScript expression (placed below > or !).
//  &    Require one of these words to match a response.
//  *    Provide these words as context.

Here we need to use "^" prefix to execute javascript such as change webpage. (so that the chatbot can guide the customer to the webpage they want to go)

The pattern will look like it:

"I","&YEARS","&OLD",
"!Wow, that's old!",
"HOW","&OLD","YOU","YOUR","&AGE",
"!I do not remember my age.",

// add here (anywhere between the conversation pairs)
"&HELP","&SITEMAP","SHOW",
"!Get lost? Let me show you the sitemap now.",
"^location.href='sitemap.htm'",

//...other conversation pairs

The ^ statement will always follows an ! statement. The chatbot answers the ! statement and execute the ^ statement at the same time.

You can add as many pairs of keywords and responds script as you want here.

You may think your chatterbot can work fine now. Actually it is not. You can try chat with your bot now with newly add keywords. You will find that your chatbot responds well on the first time but on the second times the chatbot will respond another thing rather then your preset respond. And of cource the second time your navigation script will not run.

This is because the javascript chatterbot is designed to keep the previous chat state and it never repeats the same respond twice.

PS. This problem appeared if the page navigate to another page without reset your chatterbot state. For example, you call Ajax called but not a whole page refresh at the respond.

In Part 2, I will suggest some methods to avoid it. Although the solution is not so good

More »

Dojo toolkit provides an XMLHttpRequest for Ajax and it also provides a Dojo.back for history management. There should be no problem by using it because you should know how to use it by reading its documentation. This is what I thought before I try to use Dojo. Later on, I found that the XMLHttpRequest is easy to use but the Dojo.back is not. The documentation for Dojo.back is not helpful because it only show me how to alert a message saying "Back button is clicked". I tried for almost an hour but fail to make the browser back to my page. At last, I made it. Here is how I do:

First, include the Dojo script in in >Head< >/Head<

 
<script type="text/javascript" src="js/dojo/dojo.js"
    djConfig="parseOnLoad:true, isDebug:true, preventBackButtonFix: false">
</script>
 

Then, put the require statement in the <head> too

 
dojo.require("dojo.back");
 

For XMLHttpRequest, I used the code from DojoCampus.org. It provides an elegant way to call the xhr.

 
function loadFromQuery(url){
    var get = dojo.xhrGet({ url: url });
    return function(node){
      get.addCallback(function(data){
        node.innerHTML = data;
        return data;
      });
    }
  }
 

Then I wrote an initial function which will set the initial state of history

 
function init(url){
    dojo.back.setInitialState({
    back: function(){ openPage(this.urltrack); },
    forward: function(){ openPage(this.urltrack);},
    changeUrl: url,
    urltrack: url });
    dojo.query('#container').forEach(loadFromQuery(url));
  }
 

And another function to replace <a>

 
  function openPage(url){
    dojo.back.addToHistory({
        back: function(){ openPage(this.urltrack); },
         forward: function(){ openPage(this.urltrack);},
         changeUrl: url,
         urltrack: url });
     dojo.query('#container').forEach(loadFromQuery(url));
  }
 

All the code above are put within <Head> </Head>

Now we come to <Body> and add this line to load the first page:

 
<body onLoad="init('news.htm');">
 

At last we need to call Dojo.back.init() in within <Body> </Body>

 
Dojo.back.init();
 

We've already setup the code for XMLHttpRequest with History supports. When we add link, just simply use:

 
<a href="javascript:openPage('another_page.php')">a link</a>
 

More »

The traditional workflow for Flash Developer is to draw graphic in Flash IDE and then open the Action window to program the movieclip. A newer workflow is to draw graphic in Flash IDE and then make the movieclip linkable to a Actionscript 2 class.

The newer approach can make the designer and programmer works separately. The designer draw the graphic and make it linkable. The developer code there Actionscript class in their favorite editor. This seems to be a good workflow. The workflow is good but it can be better.

After the developer coded the script and they want to compile the swf to debug or see the result. They have to use Flash IDE again. The developer need a license of Flash IDE and the worst is that they have to wait the fla project to compile for a long time every time. You know, pressing Ctrl+Enter (or Cmd+Enter in mac) means you have to wait.

Thanks to MTASC and SWFMILL, developers now can optimize the workflow without Flash IDE. Once after the designer draw the graphic and output it as swf files (Let's call library.swf). The developer can use the library.swf and code the Actionscript class. Then compile the classes with MTASC and use SWFMILL to combine the library.swf and the classes files and build the last working swf file (Let's call it app.swf). Flash IDE is not needed anymore in the whole workflow of a Fash developer. Below I will show how I setup the project.

MTASC is a Actionscript 2 compiler that generate swf files without Flash IDE. MTASC is free and open source so that you do not need to pay $$$ to make flash. It supports Windows, Linux and Macintosh platform. I use this compiler to compile Actionscript classes for the movieclip that the designer provides.

SWFMILL is an xml to swf processor that you write an xml file and then it will generate a swf files for you. You can specify what to put in the library or what to put in frame1, frame2 etc. I use this tool to combine the swf files from designer and the swf files compiled from Actionscript classes by MTASC.

Here is how my files setup:


/Clean
this folder can be treat as an empty project. I duplicated the Clean folder for a new project.

/Clean/build/
This is the folder where the output of MTASC and SWFMILL put.


First, you need to download the MTASC and SWFMILL binary from their websites and unzip it.

Then create a folder and write some .as code there. For example:
Application.as

 
class Application extends MovieClip {
	var helloworld_txt:TextField;
	function Application() {
	}
 
	function onLoad() {
		createTextField("helloworld_txt", 2, 10, 75, 100, 20);
		mytf = this["helloworld_txt"];
		mytf.text = "Hello World!!";
		trace("Hello!");
	}
}
 

You may also need to write other actionscript classes to program other movieclip.
Here is the app.xml:

 
<movie width="400" height="300" framerate="12">
	<background color="#f0f8ff"/>
	<clip import="build/classes.swf" />
	<import file="lib/library.swf" url="lib/library.swf"/>
 
	<frame>
<library>
			<clip id="app" class="Application" />
		</library>
<place id="app" name="myApp" depth="0" />
	</frame>
</movie>
 

Then it is time to compile them:
make.sh:

 
cat /dev/null > ~/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt
 
cp lib/*.swf build/lib/
 
mtasc -swf build/classes.swf -header 1:1:12 *.as
 
swfmill simple app.xml build/app.swf
 
open build/app.swf
 
echo " ";
echo "Showing trace message: "
 
tail -f ~/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt
 

You will see I tail the flashlog.txt. This is a method to see the trace code because you do not have Flash IDE so you cannot see the trace output in the output window.

For further documentation of the flashlog.txt. please see Adobe Developer Center.

Here is the source files of the project

More »

Tonight I found a song that is sung by a computer, macintosh. the Fitter Happier is a song in album OK Computer by Radiohead in 1997. A vocal application in macintosh "sing" or speak the lyrics.

The song may be a little boring because of the flat tone. However, I cannot stop until I listen the whole song.

More »

There is a big list of chatterbot available on internet now. There are also some websites which provides chatterbot services such as MyCyberTwin. There are some open source chatterbot created with javascript or some server side script available too. Alkali Javascript Chatterbot is one example.

1. MyCyberTwin

Once you create a free account there, you will get a embed code that provides an interface for other people to chat with your chatterbot. You can input your personal info and personality in the setting panel so that your bot know how to respond like you. You can also "teach" the chatterbot to respond certain keywords. For example, if people say "hello", you can set three sentences that response it. There is a good things is that you can view the conversation history that the bot chat with others. Than you can know how well your bot respond and what keywords make your bot answer like a stupid. Then you can optimize the bot.

Here is an example with my MyCyberTwin. (The bot come with default now and I have not "teach" it anything yet)

2. Javascript Chatterbot

Alkali Software provides an open source javascript based chatterbot program. I put this chatterbot on the right-hand side of the blog. Compare to the MyCyberTwin. The Javascript chatterbot come with a plain interface that you may work on an hour to decorate it. It provides similar teaching function but you have to edit your respond inside the code. It may be a little bit painful compare to MyCyberTwin if you are not familiar with javascript. However, the style of this javascript bot is free to edit so that you can make it fit anywhere on your website.

Compare:

• Both chatterbot can edit responds text
• MyCyberTwin provides a nice interface on both the conversation and the setting panels
• MyCyberTwin let you input your own personality to act much like yourself.
• MyCyberTwin is easy to embed into blog
• Alkali Chatterbot is free distribution with source so can change style and even the program to make it suitable in anywhere
• Alkali Chatterbot require blogger to know a little bit javascript and html to put it on website
• Alkali Chatterbot responds faster then MyCyberTwin. (Alkali run in client side only and MyCyberTwin is client-server model)

More »

Have you try playing Space Invaders with mouse?
Try to get yourself in the Ranking list!

refresh page and scores

More »