Getting ready to program

<< Home

Aptana or any other Javascript development environement

You will need some kind of development environment to program your extension. The choice of Javascript IDE is vast. I personally use Aptana, which I think is a stable and consistent environment. You are free to choose whatever you want, as long as you can launch the runtime in it.

Loading the HTML5 runtime

• The sources of the runtime are contained in the RuntimeHTML5\src folder. The html file to load the code is RuntimeHTML5\RuntimeHTML5.Dev.html
• Create or load the project in your favorite IDE
• Create an application in MMF2, with your new object
• Choose "HTML5 application" as build type, build your application replacing the file "Application.cch" located in the RuntimeHTML5 folder of this SDK. MMF will save the image and sounds beside the cch file.
• Start debugging in your IDE by launching the RuntimeHTML5.Dev.html file
• Important note: for MMF to recognise your extension (so that it is displayed in the Insert Object dialog, and recognised when you build your application), there must be a file named "yourextension.js" in the data\runtime\HTML5 directory of MMF2.

At first, copy a dummy file and rename it. When the extension is complete, replace the dummy file with the real js code.

Creating a new extension

To create a new extension:

• The simplest way to proceed is to use the existing source code on one of the extensions, provided with this extension kit. The filename of your extension should be its name followed by ".js". Example : myextension.js. You should not put "CRun" in front of the name (as you had to do for the Flash SDK). Please respect the higher/lower case for the name.
• Your class should be derived (or anything like it in Javascript) from CRunExtension. We use the "CServices.extend" function to create a class from another one. Have a look at one of the sources of the extensions provided with this SDK.
• The name of your extension object class must be in the form of "CRun_my_extension", as I have done for the provided examples. For example, the "ObjectMover" object class will be "CRunObjectMover".
• Start programming your extension.

You will have to incorporate your extension in the main HTML5 runtime.

• Add your extension.js source to the list of includes in "RuntimeDev.js". Just copy one of the lines and change the name of the file included
• Open the file "Extensions.js", locate the "CLoadExt" class. In the "loadRunObject" method, go to the end, and enter the following code:

if(this.name == "Name_Of_Extension")
  object = new CRunName_Of_Extension();

This line will incorporate your extension in the runtime. The name in quotes must be the name of the extension as it is on disc.

You are free to create any classes you want for your extension, but the classes must lie in the one extension.js file.

I have included some of the extensions I converted already.

Please note that as ActionScript is very close to Javascript, it is quite easy to port the code from a Flash extension to Javascript.

The only difference being in the display routines. The second part of this document contains a step-by-step procedure on how to convert a Flash extension to a HTML5 extension.