Badge Builder Beta
As mentioned in my previous post, I’ve been putting together an Adobe AIR application that allows the user to quickly create a Badge Install HTML file by filling out a simple form. The aim of Badge Builder is to give access to all of the options available for utilizing the Badge Installer, while not drowning the user with parameters that they don’t wish to change.
You can toggle between the necessary, and optional parameters. It has a built in preview function that will open your browser and display the HTML file. Once you are satisfied with your settings, you simply build the file to the folder of your choice. All of the fields have tool-tips to get you up to speed quickly on the information that is needed. The application is just another way to be more productive.
I’ve set up a page with an Install Badge, screen shots, and a bit more by way of features here.
I have been testing it as I develop and use it. So far is has been pretty stable for me. If you find any issues, please let me know.
Using the Adobe AIR Install Badge
Lately I have developed several small AIR application for clients. Sometimes the apps are the actual project, sometimes they are a tool to allow the clients to do something with project. Either way I find myself building quite a few smaller AIR widget applications for clients lately. David Tucker’s 10 common mistakes when building AIR applications lists not using the badge install for your AIR app at number seven. I have been happy with the results of using the badge install to distribute apps to clients.
The Badge Install is a mechanism that allows the user to install you AIR application from a browser. If the user doesn’t have the necessary AIR runtime installed, it will first install the AIR runtime followed by your AIR application. If the user already has your AIR application installed, it allows the user to choose to re-install, or simply launch the already installed application.
While there are examples of using the latest install badge that Grant Skinner put together. I haven’t seen any examples that use the latest SWFObject (v2.1) and produce html results that validate. The process is actually quite simple. You can download a finished example here
Build your HTML file
Build a simple HTML file with your DOCTYPE, head and body.
<!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'lang='en' xml:lang='en'> <head> <title>Number Converter AIR application</title> <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' /> <script type='text/javascript' src='js/swfobject.js'></script> </head> <body> <div id='badge_div'> To install this application you will need the <a href='http://www.adobe.com/products/flashplayer/'>Adobe Flash Player</a> </div> </body> </html>
In the head I bring in the SWFObject with a relative path via the “js” directory. In the body I have created a div with an id of ‘badge_div’, this is the div that will get replaced with the Install Badge SWF file.
Set up the SWFObject
I usually like to place all my SWFObject JavaScript in an individual .js file. For this example I am using the following JavaScript in a file named ‘badgeInstall.js’.
var flashvars = {}; flashvars.airversion = '1.1'; flashvars.appname = 'Number Converter'; flashvars.appurl = 'http://www.knomedia.com/air/numberConverter/NumberConverter.air'; flashvars.imageurl = 'assets/NumberConverter.jpg'; var params = {}; var attributes = {}; swfobject.embedSWF('install_swf/AIRInstallBadge.swf', 'badge_div', '205', '170', '9.0.115', 'install_swf/expressInstall.swf', flashvars, params, attributes);
These are the required flashvars parameters required to get the badge working:
- airversion is the AIR runtime version required to run your application
- appname is the name of your AIR application
- appurl is the absolute address of your .air file
- imageurl is the address (absolute or relative) of an image file to display in the badge. The image should be 205px by 170px.
The last line is simply using the SWFObject to replace the appropriate div with your Badge Install SWF file.
Back in the HTML head you need to include a reference to the badgeInstall.js which results in the following finalized HTML document:
<!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'lang='en' xml:lang='en'> <head> <title>Number Converter AIR application</title> <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' /> <script type='text/javascript' src='js/swfobject.js'></script> <script type='text/javascript' src='js/badgeInstall.js'></script> </head> <body> <div id='badge_div'> To install this application you will need the <a href='http://www.adobe.com/products/flashplayer/'>Adobe Flash Player</a> </div> </body> </html>
There are lots of optional parameters that can be passed as a flashvar to the badge to customize the badge like changing the button label color, the application name color, etc. For a listing of all of these, see the demo included with the badge install swf.
Badge Builder
I’m actually finishing up a small AIR app called ‘Badge Builder’ that facilitates writing all the necessary HTML, JavaScript, etc to quickly create a Badge Install page. I’ll post it up as soon as I’m finished. Stay tuned.
jason
PixelBlitz Engine Released
Norm Soule has released v1.0 of his new PixelBlitz Engine. It is a system for utilizing BitmapData to represent your MovieClips and Sprites. There are several built in features (layers, pixel level collision detection, etc) but the most impressive reason for using it is the speed. There are several demos, full documentation, and commented examples. Definitely something to look at for highly interactive content, or game development. As I get into it a bit deeper I will put together a more detailed review and an example or two. At first glance this seems REALLY impressive.
jason
AMFPHP: Brimelow does it again
With the Flash / Flex community buzzing about Adobe’s partnering with the PHP Zend framework, Lee Brimelow has put up two fantastic introductions to using AMFPHP within Flash at theFlashBlog.com. Both of the video screen cast are geared towards getting developers familiar with using AMFPHP, and as usual are quick, to the point, and efficient. Absolutely worth a look.
Jason
UIMovieClip Custom Events
I’ve been using the Flex Integration Kit to create my own custom components in Flash for use in Flex lately. Coming from an all ActionScript (not necessarily MXML) background there are a few things to watch for. One of them being Custom Events in your newly created component.
In order for Flex to recognize your Custom Event you need to include the event meta data in your AS Class file. For example, in an AS setting your class could fire off an event like so:
private function updateHandler(e:MouseEvent):void { var evt:MyEvent = new MyEvent(MyEvent.VOLUME); evt.volume =//some volume value; this.dispatchEvent(evt); }
In an all ActionScript setting this works fine. However when you compile this UIMovieClip into a swc file and use it in a Flex Project, Flex has no way to recognize the MyEvent.VOLUME. In the Flex Editor it won’t appear as a code hint. If you manually force it into the MXML, you’ll get an error. In order to allow Flex to know of the event you will need to include some Event meta data at the top of your ActionScript Class. For example:
[Event (name="volume", type="com.knomedia.events.MyEvent")] public class VolumeControl extends UIMovieClip { //Class members here }
The meta data needs the ‘name’ of the Event. This is the string literal that the event constant holds. In this case MyEvent.VOLUME holds the value “volume”. The type attribute is the fully qualified name of your Custom Event Class. The placement of the meta data is important, it needs to be on the line above your class declaration. Once you have that in place you can compile your swc.
My only beef with the technique is that you need to use the actual string literal. I understand the need (for ease of use in MXML), but I am more comfortable using class constants of the Event Class… Anyway.
In MXML you can now set the volume attribute to listen for the event to fire:
<swc:VolumeControl id="vol" volume="{volumeHandler(event);}" />The switch from all ActionScript to MXML is pretty painless. Occasionally a small issue like this will make you feel stupid, but overall it isn’t a big jump.
Jason
Simple Number Converter
I put together a simple AIR app in Flex for a co-worker the other day. It’s a simple panel that allows the user to enter a number in any form (binary, octal, decimal, hexadecimal) and it will display all of the other number types for you. At first I didn’t think it was all that useful. But in a recent project I needed to double check that a value that I had entered as hex was correct. When I traced out the value, the output window displayed it as a decimal number… Hey, my little app came in handy!!! I thought I’d make it available.
The icons were made using Clockmaker Icon Generator another widget type AIR app.
One of the things I love about AIR and Flex is how quickly you can put together a simple little ‘widget’ type of app like this. As I continue to learn more and more about the Flex framework, the more I’m liking it.
You can download the application using the install badge below. (If you haven’t seen it yet, you should check out Peter Elst’s AIR Badge WordPress plugin)
jason
Hello world!
Capitan’s log July 23, 2008
Getting the blog started today. I should be working on a current freelance project, but I’ve wanted to get the blog started for some time now. Plus I needed a break to let my brain chill out a bit. I would post the usual junk about my intentions with the blog… blah blah blah. As I come across issues, and more importantly solutions to flash / flex / actionscript development, I’ll post them. How about that?
jason madsen
Jason Madsen is a web developer who teaches OOP and Flex and acts as a Department Chair at a private university in Orlando, FL.