Communicating with Flash Lite from JavaScript in a widget (WRT)
Article Metadata
Code Example
Article
21 Sep
2008
Requirements:
- Knowledge of Flash Lite from Adobe and JavaScript.
Contents |
Flash Lite
Steps:
1) Create a Flash file.
In Frame 1 (ActionScript layer):
Define the following variables in the ActionScript window.
var total_ram; var free_ram;
In Frame 5:
Create a new layer that holds the textboxes on the screen (objects layer).
Create two textboxes on the screen in a separate layer and assign the following variables in ‘var’ for the textboxes.
Total_ram_txt Free_ram_txt
Next, create a movie clip to indicate the memory level on the screen.
Note: When converting to symbol, set the registration as shown in bottom the picture.
In Frame 5 (ActionScript layer):
//Set the Interval of updating text boxes on the screen.
var intervalId = setInterval( updateScreen, 1000 ); //1 Second
function updateScreen()
{
if(total_ram != undefined && free_ram != undefined )
{
total_ram_txt = total_ram + " M"; //set Total ram in textfield
free_ram_txt = free_ram + " M"; //set Free ram in textfield
_root.mem_lvl_mc._height = (free_ram*50/total_ram); //Update Level on the screen
}
}
The SetInterval() function is a built-in ActionScript function that periodically calls a piece of code or function after the set interval.
The Flash part is now ready. Publish the .swf file and name it memInfo.swf.
Main HTML
Now create a .html file with the following content.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml/"> <head> <title>Memory Info</title> <script language="javascript">AC_FL_RunContent = 0;</script> <script src="AC_RunActiveContent.js" language="javascript"></script> </head> <BODY BGCOLOR="#FFFFFF" onload = "load();"> <embed id="systeminfo" type="application/x-systeminfo-widget" hidden="yes"></embed> <script language="javascript"> if (AC_FL_RunContent == 0) { alert("This page requires AC_RunActiveContent.js."); } else { AC_FL_RunContent( 'codebase', '[http]://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0', 'width', '240', 'height', '320', 'src', 'network_signal240x320', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'align', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'memInfo', 'bgcolor', '#ffffff', 'name', 'memInfo', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess','sameDomain', 'movie', 'memInfo', 'salign', '' ); //end AC code } </script> <noscript> <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0', ID=memInfo align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="memInfo.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="memInfo.swf" quality="high" bgcolor="#ffffff" width="240" height="320" name="memInfo" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </OBJECT> </noscript> </div> </BODY> </HTML>
Note: <embed id="systeminfo" type="application/x-systeminfo-widget" hidden="yes"></embed> is used to allow the widget to gain access to system attributes such as battery level, signal level, available memory, and so on. This value needs to be defined under the <body> tag.
The value inside the ‘name’ property (for example, “memInfo”) of the Flash embedded object will be used by JavaScript to communicate with Flash.
JavaScript
In the JavaScript file:
//USER DEFINED VARIABLES
var sysinfo = null;
var drives = 0;
var totalRamSize;
var freeRamSize;
var space;
var loop = 0;
//---USER FUNCTIONS
function load()
{
sysinfo = document.embeds[0]; //Must for accessing system attributes
Runtimer();
}
function Runtimer()
{
//Calls itself every 2 second and calls AC_communicateWithFlash() function
t=setTimeout("Runtimer()",2000); //2 Second
if(loop != 0)
{ AC_communicateWithFlash();}
loop = 1;
}
function checkRamSpace()
{
// get total RAM size in bytes
totalRamSize = sysinfo.totalram;
space = Number(Number(totalRamSize) / Number(1048576)); //MB
totalRamSize = space.toFixed(2);
// get free RAM size in bytes
freeRamSize = sysinfo.freeram;
space = Number(Number(freeRamSize) / Number(1048576)); //MB
freeRamSize = space.toFixed(2); //Display 2 Decimal Place
}
function getFlashMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(movieName);
}
}
function AC_communicateWithFlash()
{
//this function checks for Current Ram Space and Drives Space
//and sets the values inside flash.
checkRamSpace();
//memInfo defined in HTML file used for referencing flash Object
var flashMovie=getFlashMovieObject("memInfo");
//following steps assigns the JAVASCRIPT variables values to flash variables placed on
the root timeline.
flashMovie.SetVariable("/:total_ram",totalRamSize);
flashMovie.SetVariable("/:free_ram",freeRamSize );
}
Download
Download the source code Media:MemInfo.zip.
The package contains the Flash source file, the JavaScript file, and other related material.
See also
Author
--raheal_akh 15:42, 5 December 2007 (EET) RAHEAL AKHTAR
Featured article, September 21st 2008 (week 39)
30 Sep
2009
Nowadays, the mobile web technologies have been very much implemented with the help of developing new technologies like Flash Lite, WRT widgets, etc. This article provides basic aspects for developing application in Flash Lite using JavaScripts.
Before studying this article, you need to know the basic knowledge of Flash Lite from Adobe and JavaScripts. In the article, the author has provided step by step instruction for developing Flash Lite application with the help of suitable Javascripts. This article also consists of the Flash sources file, the JavaScript file, and other related important documentation. The author has also provided links for conveniently download the full source code.
This is very beneficial article for beginners who wants to develop Flash Lite application using JavaScripts.