How to use FDT and Aptana to create a Flash Lite enabled WRT widget

We’ve seen, in this previous post, how to setup Eclipse in order to develop both Web Runtime widgets and Flash Lite applications, thanks to Aptana, the Nokia Web Runtime plugin and FDT. This article will focus on how to create a Web Runtime widget that includes some Flash Lite content.

First of all, be sure to have installed all the required Eclipse plugins, as described here.

Create a new Web Runtime widget

To create a Web Runtime widget, just open up the “New Project” wizard and select the “New Nokia Web Runtime Widget”.

The wizard will now let you choose from some predefined widget templates. In this article, it is enough to start with an empty widget.

And finally enter the name and identifier of your new widget. The identifier has to be a string in the reverse domain format, and will uniquely identify your own widget.

Once created, the widget’s structure should be the one shown below.

Create the Flash Lite content

First, create a new Flash Lite project by using the “New Flash Project” template. Then, create the project’s main class. One example is the MainMovie class shown below:

class com.jappit.flashlitetest1.MainMovie
{
	public function MainMovie()
	{
	}
 
	public static function main(container : MovieClip) : Void
	{
		Stage.align = "TL";
		Stage.scaleMode = "noScale";
		container.createTextField("tf", 1, 0, 0, 100, 100);
		var tf : TextField = container["tf"];
		tf.text = "I'm the Flash Lite content!";
	}
}

Changing the MTASC launch configuration

Now, the MTASC command has to be changed a bit, so that the generated SWF will automatically end up in the Web Runtime widget project’s folder.

To do this, open up the MTASC launch configuration, and change the generated SWF path to be a subpath of your widget’s main folder. You can see an example of the command in the picture below.

Now, run the project launch configuration, and check the widget’s folder: the SWF generated by MTASC should be there, together with the other widget’s files.

Including the SWF content in your widget

Forum Nokia Wiki has a comprehensive article explaining the possible ways of integrating Flash content into a Web Runtime widget. In this article the first described approach, the same used on the Web, is implemented.

So, take the widget’s index.html file, and add this HTML code:

<object id="MyFlash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200" height="200" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
	<param name="align" value="middle" />
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="loop" value="false" />
	<param name="menu" value="false" />
	<param name="quality" value="high" />
	<param name="wmode" value="opaque" />
	<param name="bgcolor" value="#ffffff" />
	<param name="src" value="default_mtasc.swf" />
	<param name="name" value="Finish" />
	<embed id="MyFlash" type="application/x-shockwave-flash" width="200" height="200" src="default_mtasc.swf" name="Finish" bgcolor="#ffffff" wmode="opaque" quality="high" menu="false" loop="false" allowscriptaccess="sameDomain" align="middle"></embed>
</object>

Packaging and deploying

If all went well, all is ready to be packaged and deployed.

Right click the project, choose “Package widget”, deploy and enjoy! :)

You can download the widget built in this article here: Flash Lite enabled WRT sample widget.

Be Sociable, Share!