Archived:How to package Flash content in a Widget
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.
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!
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/>
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.
Setting tab navigation mode
Setting pointer navigation mode
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" />
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 one pixel smaller on all 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!
Different screen sizes
The quick and dirty solution
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.
- 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 your .swf and get an icon for it, if you don't mind the white screen you get after you quit or exit the swf.
Meta-refresh method and thank you page
The third option is to use the meta-refresh tag in the <head> section of the main html file, This still means, that you get a white page, but this time you can edit the contents. You can use the page to direct the user to your home page and give some extra information, or you can simply say "cheers".
Here's an example. The 0 below means there's no timeout. It seems to make the thing more stable in some devices...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<META http-equiv="REFRESH" content="0; url=MyFlash.swf">
You can find more information at <a href="http://www.forum.nokia.com">Forum Nokia</a>.
Or exit this window from the left softkey.
<b>Thank you for using our Flash Lite application.
- the team -</b>
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.
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)
--16:15, 5 December 2007 (EET)