×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:How to package Flash content in a Widget

From Nokia Developer Wiki
Jump to: navigation, search
Risalmin (Talk | contribs)
(NEW! another approach)
hamishwillee (Talk | contribs)
 
(41 intermediate revisions by 10 users not shown)
Line 1: Line 1:
One of the biggest issues in delivering [[Flash Lite]] applications is the fact that the user needs to open the [[Flash Player|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.
+
[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:How To]][[Category:Flash Lite]][[Category:Deployment/Installation]]
 +
{{Archived|timestamp=20130223192937|user=[[User:Lpvalente|Lpvalente]]}}
  
Another disadvantage is, that is you have any external resources, they need to be delivered separately, making it tedious for the user. In [[S60|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|signing]] and the target folder might not be always the same in different [[S60 versions|s60 platform versions]].
 
  
== Why not just use a .sis then? ==
+
{{Abstract|This article shows how to package Flash content in a Symbian Web Runtime widget. This provides the convenience of an icon for launching the content from the device UI, and is much simpler than packaging the application as a Symbian SIS file.}}
  
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.
+
{{FeaturedArticle|timestamp=20080727}}
 +
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode= [[Media:MyFlashWidget.zip]]
 +
|installfile= [[Media:MyFlashWidget.zip]]
 +
|devices= <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20071205
 +
|author= [[User:Risalmin]]
 +
<!-- The following are not in current metadata -->
 +
|timestamp= <!-- Following technical re-review of article: YYYYMMDD -->
 +
|reviewer= <!-- Following technical re-review of article: [[User:username]] -->
 +
}}
 +
== Introduction ==
 +
One of the biggest issues in delivering [[Flash Lite]] applications is that the user needs to open the [[Flash Player|Flash Lite Player]] or use the [[Symbian File Managers|File manager]] or [[Gallery]] to open the file. The Flash Lite content is not treated as other applications. It does not have an icon and the application's shortcut cannot be added to any quick access menus.
 +
 
 +
Another disadvantage is that any external resources need to be delivered separately, which is  tedious for the user. In [[S60|S60]] this can be tackled by creating a [[SIS]] file that simply extracts the contents to the correct folder, however, the .sis file requires must be [[Step by Step instructions to Express signing| signed]] and the target folder may vary between  [[S60 versions|S60 platform versions]].
 +
 
 +
== Why not just use a .sis then? ==
 +
There are commercial and freeware solutions and guides on how to do this in Symbian C++, but systems run only on a Windows PC and you need to know at least the basics of C++ coding. Many Flash developers work with Apple Macintosh computers, and the S60 SDK and tools are not compatible with Macintosh.
  
 
== Widget to the rescue! ==
 
== Widget to the rescue! ==
 +
With the [[S60 Web Runtime|S60 Web Runtime]] developing small applications is fairly simple and you do not need to learn Symbian C++. All you need is basic knowledge of [[HTML]], [[CSS]], and [[JavaScript]]. The contents are zipped and the package is renamed with the.[[Symbian Web Runtime File Format (.wgz)|wgz]] extension. This package does not need to be signed and the devices supporting the format recognize it as an installable application. The package contents are  copied to a private folder and an icon for starting the widget is placed in the applications folder.
 +
 +
Since Web Runtime is based on the S60 browser, everything supported by the browser is also supported by WRT - also Flash Lite. This means that a Flash Lite application can be packaged inside a Widget.
  
Nokia has announced a new [[Widget|widget]] platform - [[S60 Web Runtime|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 [[Zip|zipped]] to a packgage and given the .[[Wgz|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|applications folder]]
+
= O.K. already! Show me how. =
 +
== Option 1. Embedded Flash ==
  
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.
+
=== Get the example widget ===
  
== O.K. already! Show me how. ==
+
Before getting started, familiarize yourself with Web Runtime. The best place to start is the [http://www.developer.nokia.com/Develop/Web/ Widget website]. You should be able to create a working package by following these instructions, but if you want to know more about widgets, check out the Web site.
  
=== Get the Exmple Widget ===
+
* Download the [[Media:MyFlashWidget.zip]]
  
''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.''
 
  
* Download the [http://mosh.nokia.com/content/408BC4E8439032A1E040050A453077AB example Widget]
+
* Rename the file to FlashWidget.wgz.
** The download link is to [[Mosh]] Nokia's Mobilise &amp; Share community.
+
** The .wgz file is just a renamed .zip file.
** I recommend you use '''Mosh''' for uploading your sample widgets as well.
+
* Extract the contents to a folder.
* Rename the file to FlashWidget.wgz  
+
** Maintain the folder structure
** yes, the .wgz -file is only a renamed .zip file.
+
** The folder can be in any folder.
* Extract the contents  
+
** remeber to maintain the folder structure
+
** select a target folder that suits you best
+
  
 
=== Modify the icon ===
 
=== 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.
+
You can also use the icon I created.  It is only for demo purposes, however, and must not be used for commercially distributed Flash widgets. The icon must be in [[PNG]] format. [[SVG]] icons are currently not supported.
  
 
=== Modify the info.plist ===
 
=== Modify the info.plist ===
  
Open the <tt>info.plist</tt> file and edit the key values marked with green colour below. The <tt>DisplayName</tt> is used as your application title and the <tt>AllowNetworkAccess</tt> 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 [http://forum.nokia.com/widgets Widget website]
+
Open the <tt>info.plist</tt> file and edit the key values marked with green in the following example. The <tt>DisplayName</tt> is the title of the application and the <tt>AllowNetworkAccess</tt> key defines if the widget can access the Internet. If your application does not need network access, you can set it to "false" and the user will not be asked for permission  when launching the Widget. More information about the info.plist file can be found from the [http://www.developer.nokia.com/Develop/Web/ Widget Web site]
  
 
<tt></tt>
 
<tt></tt>
Line 48: Line 81:
 
  &lt;key&gt;AllowNetworkAccess&lt;/key&gt;
 
  &lt;key&gt;AllowNetworkAccess&lt;/key&gt;
 
  <font color="#008000">&lt;true/&gt;</font>
 
  <font color="#008000">&lt;true/&gt;</font>
 
 
 
  
 
=== The HTML and JavaScript ===
 
=== The HTML and JavaScript ===
  
When you open the file <tt>Main.html</tt> in a text or html editor you find basically three things you might wish to modify:
+
Open the file <tt>Main.html</tt> file in a text or html editor.  You may want to modify the following three values:
  
 
===== CSS file reference =====
 
===== 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 [http://forum.nokia.com/widgets Widget website].
+
Using an external [[CSS]] file is recommended. In this case the file is insignificant, since we are creating full-screen Flash content. The main purpose of the CSS file is, in this case, to color the background black and make sure the full-screen Flash Lite content is positioned correctly. For more information on how to work with HTML and CSS in the widget scope, see [http://www.developer.nokia.com/Develop/Web/ Widget Web site].
  
  
Line 76: Line 106:
 
==== JavaScript ====
 
==== 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 [http://forum.nokia.com/widgets Widget website].
+
According to the [http://www.developer.nokia.com/info/sw.nokia.com/id/fd9cc12e-5eed-40ec-a439-c77f845fed73/Web_Developers_Library.html  Widget documentation], the preferred coding convention is to use separate .js files. In this project JavaScript is used only to set the navigation mode. If you want to use more widget functionalities, see the [http://www.developer.nokia.com/Develop/Web/  Widget website].
  
 
'''Setting tab navigation mode'''
 
'''Setting tab navigation mode'''
Line 87: Line 117:
  
  
The piece of code above embeds a single JavaScript command to the Main.html page: <tt>widget.setNavigationEnabled(false);</tt> 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:
+
The above piece of code embeds a single JavaScript command to the Main.html page: <tt>widget.setNavigationEnabled(false);</tt> This tells the Web Runtime environment to use tab-based navigation. If you want to use pointer navigation instead, change the value to ´´true´´, as in the following example:
  
 
'''Setting pointer navigation mode'''
 
'''Setting pointer navigation mode'''
Line 98: Line 128:
  
  
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.
+
The example file has only an animation, but tests have proven that both tab and pointer navigation work in the Flash Lite application. Feel free to experiment to find out what works best for you.
  
 
==== Embedding the .swf ====
 
==== 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 <tt>main.html</tt> file provided in the example, you need to make sure you change the values to correspond to your .swf. Mainly the <tt>src</tt> and <tt>movie</tt> parameters and the <tt>allowScriptAccess</tt> directive.
+
The following piece of code is basically the code generated by [[Adobe Flash Professional]]. That is why the embedding is done both ways. If you use the <tt>main.html</tt> file provided in the example, you need to make sure you change the values to match your .swf. The values concerned are mainly the <tt>src</tt> and <tt>movie</tt> parameters and the <tt>allowScriptAccess</tt> directive.
<code xml="xml"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="238" height="318" id="MyFlash" align="middle">
+
 
 +
<code xml="xml">
 +
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="238" height="318" id="MyFlash" align="middle">
 
<param name="allowScriptAccess" value="sameDomain" />
 
<param name="allowScriptAccess" value="sameDomain" />
 
<param name="movie" value="MyFlash.swf" />
 
<param name="movie" value="MyFlash.swf" />
Line 111: Line 143:
 
<param name="wmode" value="opaque" />
 
<param name="wmode" value="opaque" />
 
<param name="bgcolor" value="#ffffff" />
 
<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" />
+
<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://get.adobe.com/flashplayer/otherversions/" />
 
</object>
 
</object>
 
</code>
 
</code>
  
 +
== Flash Lite application ==
  
=== Flash Lite application ===
+
If you do not have a sample Flash Lite application you can use for testing, now is a good time to create one, or edit one you have created earlier. I have the stage one pixel smaller on all sides to avoid anti-aliasing. In this case the values are set to 238 x 318 pixels.
  
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 devices supporting with Web Runtime also support Flash Lite 3, you can use that too to create the application!''
  
'''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 you may not know the screen sizes of the devices beforehand, you can use some Javascript in your WRT widget to detect the screen size and use that information to optimize the SWF for the available real estate through variables, or by using multiple SWFs. You can also deal with this issue in the .swf file, as explained in the article [[Dynamic Layout control for Flash Lite]].
 +
== Option 2. Direct play==
  
=== The quick and dirty solution ===
+
Instead of embedding the .swf file into an html page, you can replace the main.html file with your .swf file. This means that you need only three files:
 
+
* A manifest file (info.plist) with the .swf file as the value for the MainHTML key.
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.
+
  
 
  &lt;key&gt;MainHTML&lt;/key&gt;
 
  &lt;key&gt;MainHTML&lt;/key&gt;
 
   &lt;string&gt;myFlash.swf&lt;/string&gt;
 
   &lt;string&gt;myFlash.swf&lt;/string&gt;
  
* the .swf file you named in the info.plist
+
* The .swf file you named in the info.plist file.
* the <tt>'''icon.png'''</tt> file (optional)  
+
* The <tt>'''icon.png'''</tt> 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.
+
The .swf is launched in the Flash Lite player and when you exit it, the application asks if you want to save it. It falls also then back to an "empty widget" screen (plain white), but this is an easy way to package your .swf and get an icon for it if you don't mind the blank screen you get after you quit or exit the swf.
  
=== Meta-refresh and thank you page ===
+
'''NOTE:''' If you do not want 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 softkey. See the following example:
 +
<code actionscript>
 +
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.
 +
</code>
 +
If you do this, inform the user that the only way to exit your application is to press the end key. This way there will be no blank 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. You still get a blank page but this time you can edit the contents. You can, for example, use the page to direct the user to your home page and give some extra information, or you can simply say "cheers".
 +
In the following example, the 0 before the URL means that there is no timeout, which makes the functionality more stable in some devices.
 +
<code xml="xml">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
<html>
 
<head>
 
<head>
<title>SWF Launcher</title>
+
<title>SWF Launcher</title>
<META http-equiv="REFRESH" content="0; url=flashsymbolanimation.swf">
+
<META http-equiv="REFRESH" content="0; url=MyFlash.swf">
 +
<script type='text/JavaScript'>
 +
  function killWRT(){
 +
  var WRT = window.open("", "_top");
 +
  WRT.close();
 +
  }
 +
</script>
 
</head>
 
</head>
 +
<body>
 +
  <div align="center">
 +
  <br><br>
 +
  You can find more information at <a href="http://www.developer.nokia.com/">Nokia Developer</a>.
 +
  <br>
 +
  <input type="button" value="Close this window" onclick="killWRT()" />
 +
  <br><br>
 +
  <b>Thank you for choosing our Flash Lite application.
 +
  <br><br>
 +
  - the team -</b>
 +
  </div>
 +
</body>
 +
</html>
 +
</code>
  
NOTE: This approach has proved problematic to some developers, as the the widget defaults to a white screen with a cursor when launched. In other cases, focus is not properly delivered to the SWF. One current solution is to revert to using an HTML page as the MainHTML key and within the HTML page place a meta-refresh tag that targets the SWF file.
+
'''NOTE:'''  You can also disable the softkeys and close the application with the end key, as shown in [[Option 2. Direct play]].
  
=== Creating the widget package ===
+
== 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.
+
When you have made all the necessary modifications or 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 favorite 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 ==
 
== 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 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. If you do not 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.
+
The installation method 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 has finished, you will find an icon for your Flash widget in the Applications folder.
  
 
== Getting help ==
 
== 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 [http://discussion.forum.nokia.com/forum/forumdisplay.php?f=160 The Web runtime discussion board]. If in need of Nokia specific Flash Lite help, you can use the [http://discussion.forum.nokia.com/forum/forumdisplay.php?f=172 Flash Lite discussion board] or in more general issues, use [http://www.adobe.com/support/flashlite Adobe's service].
+
If you find something wrong in this article, post your issue on the ''Comment'' and I will try to address it in a timely manner. If you need help in developing the widget part of your package, post your question to the[http://www.developer.nokia.com/Community/Discussion/forumdisplay.php?160-Symbian-Web-Runtime Web Runtime discussion board]. If you need Nokia-specific Flash Lite help, you can use the [http://www.developer.nokia.com/Community/Discussion/forumdisplay.php?172-Flash-Lite-on-Nokia-Devices Flash Lite discussion board] or in more general issues, use [http://www.adobe.com/support/flashlite/ Adobe's service].
  
 
Have fun ;o)
 
Have fun ;o)
  
 
--[[User:Risalmin|Ruikku]] 16:15, 5 December 2007 (EET)
 
--[[User:Risalmin|Ruikku]] 16:15, 5 December 2007 (EET)
 
+
<!-- Translation --> [[ja:Widget上でFlashコンテンツをパッケージ化する方法]]
[[Category:Flash_Lite]] [[Category:How_To]] [[Category:Code Examples]][[Category:Web Runtime (WRT)]][[Category:Widget for S60]]
+

Latest revision as of 10:30, 14 May 2013

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

The article is believed to be still valid for the original topic scope.


This article shows how to package Flash content in a Symbian Web Runtime widget. This provides the convenience of an icon for launching the content from the device UI, and is much simpler than packaging the application as a Symbian SIS file.

{{{width}}}
27 Jul
2008
Article Metadata
Code Example
Installation file: Media:MyFlashWidget.zip
Article
Created: Risalmin (05 Dec 2007)
Last edited: hamishwillee (14 May 2013)

Contents

[edit] Introduction

One of the biggest issues in delivering Flash Lite applications is 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. It does not have an icon and the application's shortcut cannot be added to any quick access menus.

Another disadvantage is that any external resources need to be delivered separately, which is tedious for the user. In S60 this can be tackled by creating a SIS file that simply extracts the contents to the correct folder, however, the .sis file requires must be signed and the target folder may vary between S60 platform versions.

[edit] Why not just use a .sis then?

There are commercial and freeware solutions and guides on how to do this in Symbian C++, but systems run only on a Windows PC and you need to know at least the basics of C++ coding. Many Flash developers work with Apple Macintosh computers, and the S60 SDK and tools are not compatible with Macintosh.

[edit] Widget to the rescue!

With the S60 Web Runtime developing small applications is fairly simple and you do not need to learn Symbian C++. All you need is basic knowledge of HTML, CSS, and JavaScript. The contents are zipped and the package is renamed with the.wgz extension. This package does not need to be signed and the devices supporting the format recognize it as an installable application. The package contents are copied to a private folder and an icon for starting the widget is placed in the applications folder.

Since Web Runtime is based on the S60 browser, everything supported by the browser is also supported by WRT - also Flash Lite. This means that a Flash Lite application can be packaged inside a Widget.

[edit] O.K. already! Show me how.

[edit] Option 1. Embedded Flash

[edit] Get the example widget

Before getting started, familiarize yourself with Web Runtime. The best place to start is the Widget website. You should be able to create a working package by following these instructions, but if you want to know more about widgets, check out the Web site.


  • Rename the file to FlashWidget.wgz.
    • The .wgz file is just a renamed .zip file.
  • Extract the contents to a folder.
    • Maintain the folder structure
    • The folder can be in any folder.

[edit] Modify the icon

You can also use the icon I created. It is only for demo purposes, however, and must not be used for commercially distributed Flash widgets. The icon must be in PNG format. SVG icons are currently not supported.

[edit] Modify the info.plist

Open the info.plist file and edit the key values marked with green in the following example. The DisplayName is the title of the application and the AllowNetworkAccess key defines if the widget can access the Internet. If your application does not need network access, you can set it to "false" and the user will not be asked for permission when launching the Widget. More information about the info.plist file can be found from the Widget Web site

<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/>

[edit] The HTML and JavaScript

Open the file Main.html file in a text or html editor. You may want to modify the following three values:

[edit] CSS file reference

Using an external CSS file is recommended. In this case the file is insignificant, since we are creating full-screen Flash content. The main purpose of the CSS file is, in this case, to color the background black and make sure the full-screen Flash Lite content is positioned correctly. For more information on how to work with HTML and CSS in the widget scope, see Widget Web site.


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


[edit] JavaScript

According to the Widget documentation, the preferred coding convention is to use separate .js files. In this project JavaScript is used only to set the navigation mode. If you want to use more widget functionalities, see the Widget website.

Setting tab navigation mode

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


The above piece of code 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 want to use pointer navigation instead, change the value to ´´true´´, as in the following example:

Setting pointer navigation mode

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


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

[edit] Embedding the .swf

The following piece of code is basically the code generated by Adobe Flash Professional. That is why the embedding is done both ways. If you use the main.html file provided in the example, you need to make sure you change the values to match your .swf. The values concerned are 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://get.adobe.com/flashplayer/otherversions/" />
</object>

[edit] Flash Lite application

If you do not have a sample Flash Lite application you can use for testing, now is a good time to create one, or edit one you have created earlier. I have the stage one pixel smaller on all sides to avoid anti-aliasing. In this case the values are set to 238 x 318 pixels.

Tip: Since the new devices supporting with Web Runtime also support Flash Lite 3, you can use that too to create the application!

[edit] Considering different screen sizes

Since you may not know the screen sizes of the devices beforehand, you can use some Javascript in your WRT widget to detect the screen size and use that information to optimize the SWF for the available real estate through variables, or by using multiple SWFs. You can also deal with this issue in the .swf file, as explained in the article Dynamic Layout control for Flash Lite.

[edit] Option 2. Direct play

Instead of embedding the .swf file into an html page, you can replace the main.html file with your .swf file. This means that you need only 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 file.
  • The icon.png file (optional).

The .swf is launched in the Flash Lite player and when you exit it, the application asks if you want to save it. It falls also then back to an "empty widget" screen (plain white), but this is an easy way to package your .swf and get an icon for it if you don't mind the blank screen you get after you quit or exit the swf.

NOTE: If you do not want 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 softkey. See the following example:

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, inform the user that the only way to exit your application is to press the end key. This way there will be no blank screen since the player was started on the WRT engine and therefore the whole package dies.

[edit] 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. You still get a blank page but this time you can edit the contents. You can, for example, use the page to direct the user to your home page and give some extra information, or you can simply say "cheers". In the following example, the 0 before the URL means that there is no timeout, which makes the functionality more stable in some devices.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SWF Launcher</title>
<META http-equiv="REFRESH" content="0; url=MyFlash.swf">
<script type='text/JavaScript'>
function killWRT(){
var WRT = window.open("", "_top");
WRT.close();
}
</script>
</head>
<body>
<div align="center">
<br><br>
You can find more information at <a href="http://www.developer.nokia.com/">Nokia Developer</a>.
<br>
<input type="button" value="Close this window" onclick="killWRT()" />
<br><br>
<b>Thank you for choosing our Flash Lite application.
<br><br>
- the team -</b>
</div>
</body>
</html>

NOTE: You can also disable the softkeys and close the application with the end key, as shown in Option 2. Direct play.

[edit] Creating the widget package

When you have made all the necessary modifications or 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 favorite 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.

[edit] 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. If you do not have a device that supports the S60 Web Runtime, you must use the Remote Device Access service.

The installation method 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 has finished, you will find an icon for your Flash widget in the Applications folder.

[edit] Getting help

If you find something wrong in this article, post your issue on the Comment and I will try to address it in a timely manner. If you need help in developing the widget part of your package, post your question to theWeb Runtime discussion board. If you need 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)

This page was last modified on 14 May 2013, at 10:30.
233 page views in the last 30 days.