Monday, May 30, 2011

Seamless installation in AIR: Part 2

Today we continue learning about seamless installation badges.

Although you can use HTML and Javascript to import the swf file to the web page and pass it flash vars like that, it is recommended to use the SWFObject class to handle the badge.

You can download SWFObject here. Head to the downloads section and grab the final release file. When you've extracted that on your computer, the swfobject folder will have a few files in it. The only one we care about is the swfobject.js file.

We will need to have swfobject.js, badge.swf, the image file (myappimage.jpg in the example below) and our HTML file with the code in the same directory. Now, what's the HTML code?

We'll first create an Object with Javascript on the page, which we use to set flash vars for our badge as properties of the object. When that's done, we can call the embedSwf() method of the swfobject class.

The embedSwf() class has 10 parameters, 5 of which are required. Here they are (taken from the official documentation):

  1. swfUrl (String, required) specifies the URL of your SWF
  2. id (String, required) specifies the id of the HTML element (containing your alternative content) you would like to have replaced by your Flash content
  3. width (String, required) specifies the width of your SWF
  4. height (String, required) specifies the height of your SWF
  5. version (String, required) specifies the Flash player version your SWF is published for (format is: "major.minor.release" or "major")
  6. expressInstallSwfurl (String, optional) specifies the URL of your express install SWF and activates Adobe express install. Please note that express install will only fire once (the first time that it is invoked), that it is only supported by Flash Player 6.0.65 or higher on Win or Mac platforms, and that it requires a minimal SWF size of 310x137px.
  7. flashvars (Object, optional) specifies your flashvars with name:value pairs
  8. params (Object, optional) specifies your nested object element params with name:value pairs
  9. attributes (Object, optional) specifies your object's attributes with name:value pairs
  10. callbackFn (JavaScript function, optional) can be used to define a callback function that is called on both success or failure of embedding a SWF file

We'll need to fill all the required parameters, and pass the flashvars object as the flashvars parameter. Here's how our html code will look like:

<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var myvars = new Object();
myvars.appurl = "http://www.mysite.com/myapplications/example.air";
myvars.airversion = "2.0";
myvars.buttoncolor = "666666";
myvars.imageurl = "myappimage.jpg";
swfobject.embedSWF("badge.swf", "mybadge", "217", "180", "10.3", null, myvars);
</script>
</head>
<body>
<div id="mybadge">
This is alternative content!
</div>
</body>
</html>

And that's pretty much it about the seamless installation in AIR.

When you use this badge on your website, when a user clicks it, the script first checks whether AIR runtime is installed on the user's computer. If it isn't installed, or it is but it isn't the needed version installed, then the user is warned that AIR is not installed on his computer and he can press "Continue" for the installator to install AIR runtime too. After that, the .air file is launched, starting the installation process for your application.

Thank you for reading!

Related:

Seamless installation in AIR: Part 1
Seamless installation in AIR: Part 3

No comments:

Post a Comment