×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:How to package Flash content in a Widget

From Nokia Developer Wiki
Jump to: navigation, search
kamalakshan (Talk | contribs)
(Reviewer Approved)
hamishwillee (Talk | contribs)
m (Hamishwillee - Remove link to deleted topic)
(11 intermediate revisions by one user not shown)
Line 1: Line 1:
{{ReviewerApproved}}
+
[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:How To]][[Category:Flash Lite]][[Category:Deployment/Installation]]
{{FeaturedArticle}}
+
{{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.}}
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 [[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.
+
 
 +
{{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]].
 
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]].
Line 9: Line 38:
  
 
== 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.[[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|applications folder]]
+
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.
 
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.
Line 18: Line 47:
 
=== Get the example widget ===
 
=== Get the example widget ===
  
Before getting started, familiarize yourself with 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 by following these instructions, but if you want to know more about widgets, check out the Web site.
+
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.
  
 
* Download the [[Media:MyFlashWidget.zip]]
 
* Download the [[Media:MyFlashWidget.zip]]
Line 35: Line 64:
 
=== Modify the info.plist ===
 
=== Modify the info.plist ===
  
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://forum.nokia.com/widgets Widget Web site]
+
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 56: Line 85:
 
===== CSS file reference =====
 
===== 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 [http://forum.nokia.com/widgets Widget Web site].
+
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 74: Line 103:
 
==== JavaScript ====
 
==== JavaScript ====
  
According to the [http://www.forum.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://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 111: Line 140:
 
<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>
Line 161: Line 190:
 
   <div align="center">
 
   <div align="center">
 
   <br><br>
 
   <br><br>
   You can find more information at <a href="http://www.forum.nokia.com">Forum Nokia</a>.
+
   You can find more information at <a href="http://www.developer.nokia.com/">Nokia Developer</a>.
 
   <br>
 
   <br>
 
   <input type="button" value="Close this window" onclick="killWRT()" />
 
   <input type="button" value="Close this window" onclick="killWRT()" />
Line 187: Line 216:
 
== Getting help ==
 
== 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 the[http://discussion.forum.nokia.com/forum/forumdisplay.php?f=160 Web Runtime discussion board]. If you need 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)]]
+

Revision as of 09:22, 12 October 2012

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.

Featured Article
27 Jul
2008
Article Metadata
Code Example
Installation file: Media:MyFlashWidget.zip
Article
Created: Risalmin (05 Dec 2007)
Last edited: hamishwillee (12 Oct 2012)

Contents

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.

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!

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.

O.K. already! Show me how.

Option 1. Embedded Flash

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.

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.

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

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:

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;
}


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.

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>

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!

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

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.

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.

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.

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.

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)

162 page views in the last 30 days.
×