nothing yet | jason madsen

I have been using Flex Builder ( and now Flash Builder ) as my ActionScript editor for a few years now. I have put together a nice little workflow for designing in the Flash IDE, while developing, managing, and compiling my projects in Flash Builder. When it came to working with AIR however there was a slight hiccup. In Flash Builder, ( or previous versions of Flex Builder ) there is no option for an ActionScript based (i.e. not Flex) AIR project.

I have seen a few workarounds, but none as simple as a tip I overheard on Twitter from Ted Patrick. So here it is, either read on, or watch a quick two minute screen-cast I put together.

1. Create a new Flex Project in Flash Builder.

2. In the New Flex Project Wizard, give your project a name

3. Choose Desktop (runs in Adobe AIR)

4. Select “Next >” in the wizard

5. Still in the Wizard click “Next >” again to bypass the Ouptut folder ( you can change it if you feel so inclined )

6. Still in the Wizard change the file extension of your Main application file from .mxml to .as

7. Select Finish

When you compile, and run the application in ADL, you won’t actually see the native window. Here is where the tip from Ted Patrick comes in. In your application-descriptor.xml file, change the visible tag to true. Compile and run. You should have a nice native window showing up. You can set the initial width, height, backgroundColor, and frameRate using the [SWF] annotation / meta-tag.

Optionally, if you would rather wait to have the native window be visible, you can do so using ActionScript by setting the visible property of the nativeWindow instance of the stage like so:

stage.nativeWindow.visible = true

So I had a bit of an annoying morning today. I went to update from AIR 1.5.2 to the latest release (1.5.3). The process didn’t go so smoothly. Long story short the updater would just hang up and sit there. I tried uninstalling 1.5.2 to get a fresh version of 1.5.3 rather than an update. No luck, the uninstaller wouldn’t work. I kept getting error messages about possibly not being an admin on my machine. Not true, I am the admin…. So what to do… Looking around the interwebz, it doesn’t seem like others are having the same trouble.

I checked permissions, restarted. Tried again, no luck. Tried again, and what? It tells me that I already have 1.5.3 installed. Huh? On which of the failed attempts did that happen? So I thought I would check the version number somehow. After a bit of googling. I found no easy way to verify the version number. You can do it programatically from within ActionScript. To do so you simply look at the following:

NativeApplication.nativeApplication.runtimeVersion

Looking at that property from within your IDE will tell you which version of the runtime you have in your installed SDK. To see which actual version of AIR is installed for AIR apps that you are running on the machine you need to execute the code within that environment.

So I built a quick little widget that displays the installed runtime version. Nothing too fancy here, just a utility. Feel free to install and use it via the badge installer below…

You can install the widget from the install badge above, or you can download the .air installer here

So originally my work was planning on sending me (and a few others) to MAX NA 08, in San Fran. Without sounding too bitter, they changed the plans on us. So we are left in Orlando reading blog posts, and news updates from the sessions. Hopefully Adobe will put the videos up on Adobe TV like they have been with some of the recent conferences.

Anyhow, in my readings about MAX, I have come across the Tour De Flex application that a few of the Adobe evangelists have put together. It’s an AIR application that gives you samples on using everything Flex, from the very basics, to some interesting third party components, and even some cloud API’s. It has working examples for everything. A great application. They even have a system in place to allow developers to showcase their own work through a submission process. I can see this application being helpful for people just getting into Flex, or as a reference for Flex developers for those ‘how does that component work again…’ moments.

There is also an Eclipse plug in. It allows you to search for components. It will bring up a list of search results, double clicking the result opens Tour De Flex and displays examples, and descriptions.

I’m going to put the install badge in the widgets bar to the right for a while. Feel free to install it directly from the badge, or visit the Tour De Flex page, where they have the same badge in effect.

So, later tonight I’ll be speaking at the Adobe Developers of Greater Orlando (adogo) user group on Adobe AIR. We’ll be looking into File I/O and SQLite as I had previously mentioned. I thought I would post up the Slides as well as a few example flex projects that I will be go through in the presentation so that people can follow along on their own machine. You can download the zipped materials here

Jason

I will be presenting at the next Adobe Developers of Greater Orlando meeting. The presentation is entitled “Adobe AIR File I/O and Embedded SQLite”. I have posted a primer at the user groups page. You can read the details there. I’m hoping to cover both the technical details of the classes involved, as well as putting together examples.

If you are free on November 3rd, and in Orlando, come check it out.

jason

Not to far back I built a small application for the University that I work for. I called it the HelpDesk. I wrote the technical end of an article for Adobe about the application, how Flex was involved and other details. I didn’t realize that the article had gone live at Adobe’s site until this morning when I got an email from a colleague who mentioned the article. The app is described pretty thoroughly in the article so I won’t go into details here. The article is live at Adobe’s site, you can check it out here.

So it was bound to happen. I put out a version of the Badge Builder, and Adobe and Grant Skinner soon there after release a similar application.

It is called Badger, it has a cool flying badger icon, and does a few really cool things. For example when you select your AIR application it will pull your publisher ID, and application ID out of the AIR file itself. Very nice touch.

While I haven’t researched much further yet, it also appears that you can use various template badge SWF files. Doing so should allow you to build your own custom template for use with the application.

You can check out Grant’s post on Badger here

-jason

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.

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

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