(Difference between revisions)

Archived:How to package Flash content in a Widget

From Nokia Developer Wiki
Jump to: navigation, search
Risalmin (Talk | contribs)
kiran10182 (Talk | contribs)
m (Get the Exmple Widget: Little bit formatting)
Line 14: Line 14:
== Option 1. Embedded Flash ==
== Option 1. Embedded Flash ==
=== Get the Exmple Widget ===
=== Get the Example Widget ===
''First, it's probably a good idea to read a bit about the Web Runtime. The best place to start is the [http://forum.nokia.com/widgets 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.''
''First, it's probably a good idea to read a bit about the Web Runtime. The best place to start is the [http://forum.nokia.com/widgets Widget website]. You should be able to create a working package with the following instructions, but if you wish to go deeper into the Widget part, please follow the link.''
* Download the [http://mosh.nokia.com/content/408BC4E8439032A1E040050A453077AB example Widget]  
* Download the [http://mosh.nokia.com/content/408BC4E8439032A1E040050A453077AB example Widget]  
Line 24: Line 24:
** yes, the .wgz -file is only a renamed .zip file.
** yes, the .wgz -file is only a renamed .zip file.
* Extract the contents  
* Extract the contents  
** remeber to maintain the folder structure
** remember to maintain the folder structure
** select a target folder that suits you best
** select a target folder that suits you best

Revision as of 19:15, 25 July 2008

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!

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.

Option 1. Embedded Flash

Get the Example 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 instructions, but if you wish to go deeper into the Widget 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
    • remember 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


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;


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


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


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!

Considering different screen sizes

Since the device can have a variety of different screen sizes you can use put some nifty javascript in your WRT widget to detect the screen size and use that information to make the swf fit better to the available real estate through variables or using multiple swfs. Or you can handle the whole thing in your .swf, like explained in the article Dynamic_Layout_control_for_Flash_Lite

Option 2. Direct play

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.

NOTE If you do not wish to end with a thank you note, but exit directly instead. You need to edit the Flash file and disable the "Exit" command, which is by default in the right soft key, like this:

fscommand2("FullScreen", true); //To hide the softkey labels
fscommand2("SetSoftKeys", "right dummy", "left dummy"); //Replace the dummy values, if you like to use Flash Player's softkey labels instead of creating your own.

If you do this, it's a good idea to also inform the user, that the only way to exit your application is to press the red receiver button. This way there will be no white screen, since the player was started on the WRT engine and therefore the whole package dies.

Option 3. 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 before the url 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">
<title>SWF Launcher</title>
<META http-equiv="REFRESH" content="0; url=MyFlash.swf">
<script type='text/JavaScript'>
function killWRT(){
var WRT = window.open("", "_top");
<div align="center">
You can find more information at <a href="http://www.forum.nokia.com">Forum Nokia</a>.
<input type="button" value="Close this window" onclick="killWRT()" />
<b>Thank you for choosing our Flash Lite application.
- the team -</b>

NOTE You can also use the method of disabling the softkeys and closing with the "end call" button, as shown in Option 2. Direct play

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)

313 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.