×
Namespaces

Variants
Actions
Revision as of 14:29, 3 April 2008 by Risalmin (Talk | contribs)

Archived:How to package Flash content in a Widget

From Nokia Developer Wiki
Jump to: navigation, search

One of the biggest issues in delivering Flash Lite applications is the fact that the user needs to open the Flash Lite Player or use the File manager or Gallery to open the file. The Flash Lite content is not treated as other applications. You don't get an icon and you cannot pin the applications shortcut to any quick access menus.

Another disadvantage is, that is you have any external resources, they need to be delivered separately, making it tedious for the user. In s60 this can be tackled by creating SIS file that simply extracts the contents to the correct folder. There are some issues in this as well. The .sis file requires signing and the target folder might not be always the same in different s60 platform versions.

Contents

Why not just use a .sis then?

There are commercial and freeware solutions and guides on how to do this with Symbian C++, but all of these require at least that you are running Windows PC and have some minimal C++ coding experience. Many Flash developers work with Macintosh computers, where you cannot install the S60 SDK and tools.

Widget to the rescue!

Nokia has announced a new widget platform - s60 Web Runtime. With the WRT It's fairly simple to develop small applications without needing to learn Symbian C++. All you need is basic knowledge of HTML, CSS and JavaScript. The contents are zipped to a packgage and given the .wgz exension. This package requires no signing and is recognised by the supporting handsets as an installable application. Anything inside the package get copied to a private folder and an icon for starting the Widget is placed in the applications folder

Since the Web Runtime is based on the s60 browser, everything supported by the browser is also supported by the WRT - including Flash Lite! knowing that, we are able to package a Flash Lite application inside a Widget.

O.K. already! Show me how.

Get the Exmple Widget

First, it's probably a good idea to read a bit about the Web Runtime. The best place to start is the Widget website. You should be able to create a working package with the following istructions, but if you wish to go deeper into the Wdiget part, please follow the link.

  • Download the example Widget
    • The download link is to Mosh Nokia's Mobilise & Share community.
    • I recommend you use Mosh for uploading your sample widgets as well.
  • Rename the file to FlashWidget.wgz
    • yes, the .wgz -file is only a renamed .zip file.
  • Extract the contents
    • remeber to maintain the folder structure
    • select a target folder that suits you best

Modify the icon

That is, if you wish... You can of course use the one I created, but it's only for demo purposes, not to be used for commercially distributed FlashWidgets. The icon needs to be in PNG format. SVG icons are currently not supported.

Modify the info.plist

Open the info.plist file and edit the key values marked with green colour below. The DisplayName is used as your application title and the AllowNetworkAccess key defines if the widget can access the internet. If your application does not use the network, the you can set it to "false" and the user will not asked about it when launching the Widget. More information about the info.plist file can be found from the Widget website

<key>DisplayName</key>
<string>MyFlashWidget</string>
<key>Identifier</key>
<string>textcom.forum.widgets.MyFlashWidget</string>
<key>Version</key>
<string>1.0</string>
<key>MainHTML</key>
<string>main.html</string>
<key>AllowNetworkAccess</key>
<true/>


The HTML and JavaScript

When you open the file Main.html in a text or html editor you find basically three things you might wish to modify:

CSS file reference

It is recommended you use an external CSS file. In our case the file is insignificant, since we are creating the Flash content to full screen. The CSS file in this case does not do much. Mainly it's there to make the backgound black and make sure the positioning of the full screen Flash Lite content is correct. Again, no reason in going into details here. You can find more information on how to work with HTML and CSS in the Widget scope from the Widget website.


body {
background: rgb(0,0,0);
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}


JavaScript

According to the [Widget documentation], the preferred coding convention is to use separate .js files. In this project the JavaScript is only there to set the navigation mode. If you wish to use more of the Widget functionalities, again please refer to Widget website.

Setting tab navigation mode

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
widget.setNavigationEnabled(false);
//-->
</SCRIPT>


The piece of code above embeds a single JavaScript command to the Main.html page: widget.setNavigationEnabled(false); This tells the Web Runtime environment to use tab-based navigation. If you wish to use pointer naviagtion instead, change the value to ´´true´´, like this:

Setting pointer navigation mode

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
widget.setNavigationEnabled(true);
//-->
</SCRIPT>


The example file only has an animation in it, but test have proved, that both tab and pointer navigation work in the Flash Lite application. Feel free to experiment what works best for you.

Embedding the .swf

The following piece of code is basically the code generated by Adobe Flash Professional. That's why there are the embedding is done in both ways. If you use the main.html file provided in the example, you need to make sure you change the values to correspond to your .swf. Mainly the src and movie parameters and the allowScriptAccess directive.

	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="238" height="318" id="MyFlash" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="MyFlash.swf" />
<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" />
<embed src="MyFlash.swf" loop="false" menu="false" quality="high" wmode="opaque" bgcolor="#ffffff" width="238" height="318" name="Finish" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>


Flash Lite application

If you don't already have a sample Flash Lite application to test, now is a good time to create one, or edit one you made earlier. I made the stage 2 pixels smaller on both sides, just to make sure there is no indescent antialiasing where I don't want it. In this case the values are set to 238 x 318.

TIP: Since the new phones with the Web Runtime support also support Flash Lite 3, you can use that too!

NEW! another approach

I just discovered, that instead of embedding the .swf into a html page, you can actually just replace the main.html with your .swf file. This means, that you only need three files:

  • a manifest file (info.plist) with the .swf file as the value for the MainHTML key.
<key>MainHTML</key>
 <string>myFlash.swf</string>
  • the .swf file you named in the info.plist
  • the icon.png file (optional)

This works so that the .swf gets launched in the Flash Lite player and when you exit it, you are asked if you wish to save it. It also then falls back to an "empty widget" screen (just white), but this is an easy way to package you .swf and get an icon for it, if you don't mind the white screens etc.

Creating the widget package

When you have made all the necessary modification, or indeed created all the needed files, you are ready to test your Widget. As mentioned earlier, the wgz file is a renamed zip package, so all you need to do is to use your favourite method of zipping a file and rename it. You must include the folder where your .html, .css, .swf, etc. files are in the zip package.

Testing the widget

The Emulator in the Widget SDK does not support Flash Lite. You can still test the validity of the widget package with the emulator, but you will not see the Flash content. So if you don't have a device, that supports the s60 Web Runtime you must use the Remote Device Access service.

The method of installation is always the same. Use bluetooth, memory card or any other method to transfer the .wgz package to your device and run it. The device or emulator will start the installation process. When the installation is finished, you will find an icon for your FlashWidget in the Applications folder.

Getting help

If you find something wrong in this document, please use the comment tab to post you issue and I will try to address it in a timely manner. If you need help in developing the Widget part of your package, it's best to post your question The Web runtime discussion board. If in need of Nokia specific Flash Lite help, you can use the Flash Lite discussion board or in more general issues, use Adobe's service.

Have fun ;o)

--Risalmin 16:15, 5 December 2007 (EET)

474 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×