My new mashups book is out!

Please help support this blog and buy this book. It was seconds in the making!

DryerFox - Updated for Flex 3 Beta 3

I made a few minor tweaks to DryerFox a few weeks ago, but I thought I should post them.

1. Updated the code to resolve breaking changes.
   
   The WebKit control was reworked a fair bit for Beta 3. mx.controls.HTML no longer delegates the heavy lifting to flash.html.HTMLControl. So this meant a code sweep to change snippets like:
   
   
   • html.htmlControl.historyBack() becomes html.historyBack().
     
   • html.htmlControl.window.document.title becomes html.domWindow.window.document.title.
     
   • HTMLUncaughtJavascriptExceptionEvent becomes HTMLUncaughtScriptExceptionEvent.
     
     
2. Updated the -app.xml
   
   Another beta, another -app.xml schema.
   
   All the same values are set, but the precise location and names within the XML have changed again. I can see in the SDK that there is a template for these in sdk/templates/air/descriptor-template.xml. I just wish that Flex Builder provided a config panel interface to set this stuff, just like it does for the HTML wrappers.
   
   
3. Updated the badge installer
   
   This beta included another update to the badge installer, so I have included this in the source update.
   
   
4. Added the new EverythingFlexAIR.SWC library
   
   DryerFox was already using Rich Tretola's UpdateManager class, and Rich has now packaged this (and other useful goodies) in a SWC, available here.
   
   
5. Updated SWFObject to v2 RC1
   
   SWFObject has moved to a release candidate, so I updated my copy. No other changes required.
   

Source for the latest DryerFox can be found here. App can be installed via the "Install Now" button at the top of the sidebar.

DryerFox - Moxie Beta 2 Upgrade Completed

This post updates a couple of earlier posts about DryerFox in particular and how to deploy AIR apps with a seamless install from your web page.

Click on the "Install Now" button in the sidebar to get the latest DryerFox executable, or click here for the source.

Updating from AIR Beta 1 to AIR Beta 2

This step was pretty straight forward. The foo-app.xml schema has changed (again!) in FB3B2, so the simplest thing to do (and the sequence recommended in the release notes) was:

1. Create a new AIR project
2. Cut-n-paste the few project descriptors and icon paths from the old project to the new project. The same information exists in both projects, but the location of each XML node has changed.

So far, each public beta of AIR has changed the app.xml schema, so this seems to be an area of churn. Not a biggie though. It took about 3 minutes to do this.

Once DryerFox was compiling in FB3B2, I found that the stage.window property was renamed to stage.nativeWindow, so I have to update the startMove(), minimize(), and close() handlers. That took another 5 minutes, and then DryerFox was up and running again.

Adding UpdateManager

This was quite straightfoward. Kudos to Rich at the EverythingFlex blog for posting this useful class.

1. I copied the com.everythingflex.air.managers.UpdateManager.as class to my project.
2. I created a version.xml that matched the new version in -app.xml
3. Added the following two lines to the onAppInit() method:

import com.everythingflex.air.managers.UpdateManager;
var um:UpdateManager = new UpdateManager("http://www.dryerfox.com/blog/DryerFox/version.xml");

Seamless Installation update (imageurl is gone!)

I followed the instructions in the AIR release notes, and updated my install badge to the latest version bundled in the SDK. This folder can be found at "installRoot/Adobe Flex Builder 3/sdks/3.0.0/samples/badge".
In doing so I found that the new badge.fla no longer attempts to frame a supplied image with the button. I quite liked the embedded, so I just updated my older badge flash project from here, simply replacing older install.as with the newer, more robust version included in FB3B2.

Feel free to steal my backwards-compatible badge.swf if you want something you can just drop in as a replacement. Also note that Adobe now recommends setting Flash 8 as the minimum flash version. Since Flash 9 has well over 90% market penetration, that's a pretty reasonable setting.

SWFObject 2.0

Geoff Stearns and Bobby van der Sluis have been busy improving their individual SWF-hosting efforts into a combined project, just released on Google code. I've updated my "Install Now" button to use the SWFObject 2.0 script, and it seems to be working well. There is a syntax change from the previous use case, but it is still pretty simple to use.

Here's the new syntax:

<script type="text/javascript" src="swfobject.js"/>

<div id="dryerfox_flashcontent">
Whoa. You need to install <a href="http://www.adobe.com/go/flashplayer">Adobe Flash Player</a>.
</div>

<script type="text/javascript">
var flashvars = {
 appname:  "DryerFox",
 appurl:  "DryerFox.air",
 imageurl:  "dryerfox_badge.jpg",
 airversion:  "1.0.M5",
 buttoncolor: "008811",
 messagecolor: "000000"
};
swfobject.embedSWF( "badge.swf", "dryerfox_flashcontent", "217", "180", "8", "expressInstall.swf", flashvars );
</script>

The first two sections are unchanged. Include the swfobject.js script in a <script> tag, and your app's alternate content in a <div> tag. Then use a swfobject.embedSWF() method call to replace the alternate content with your SWF and viola!

DryerFox demoed at Best Buy!

Thanks for reading this far. I just thought I'd send a shout out to the techs at Best Buy (is that still Geek Squad?) for leaving their Vista demo systems wide open. On the weekend I was able to install DryerFox on a sweet HP 19" touchscreen system, and associate DryerFox with the .HTML file extension. Who sets up demo accounts with admin privileges?

Oh well, it was fun to drag the dryer around with my finger.

DryerFox - Maintenance mode

The DryerFox code is getting a wee bit stale, so it's time for an update. Rather than make incremental changes, I thought I'd lump in the following tweaks:

1. Build it with Flex Builder 3 (Moxie) Beta 2
2. Add in Rich Tretola's UpdateManager class
3. Deploy it with the new badge installer (now called Seamless Installation)
4. Wrap the Install Now badge using SWFObject 2.0

Four framework upgrades at once. What could possibly go wrong? ;-)

Stay tuned ...

So here's the downside of having a dozen designers on staff

So I'm in Seattle for the 360 Flex conference, speaking about DryerFox yet again, and the "Your Mom" jokes start flying fast & furious from the entire EffectiveUI team.

Saying "your mom" to an EUI-er is like saying Aloha to a Hawaiian. You can use it as a greeting, as a goodbye, or in place of whitespace or punctuation.

So I'm feeling a little punchy at the end of a day and I spam this silly self-portrait to the entire company.

Suddenly, our president Anthony spams back with "$20 to the best Photoshop of Doug's pic by Friday". Everyone knows that designers are completely shameless when a twenty is waved in front of them so now I've got the equivalent of Something Awful's PS forum descending like vultures on my boyish good looks.

I'm not the judge of this contest, but I'm pretty sure Patrick will win with this entry, which I absolutely love!

Out of respect for you Patrick, I will always say "Your Mother". :-)

DryerFox - Updated for new AIR runtime

I've finally updated my DryerFox hack for the Adobe AIR runtime. The conversion from the alpha version of AIR to the public beta was pretty straightforward.



One-click Install
I've added "Install DryerFox Now" badge in the sidebar, which should provide a one-click install experience, installing the AIR runtime if required, and then installing DryerFox.

I haven't logged too many test hours on the install badge, so please let me know if you have any problems.

Geek links
The source for DryerFox is available here.
The AIR file (the DryerFox executable) is available here, in case the "Install Now" button gives you trouble. You might need need the AIR runtime too, if "Install Now" chokes.

See you at 360|Flex in August

Apparently there is a bit of interest in pointless app development. I'll be presenting DryerFox at the upcoming 360|Flex conference in Seattle.

And while presenting is a nice boost for my ego, what I really hope to accomplish is:

1. Stimulate discussion for the creative use of the WebKit HTML control.


2. Encourage other Flex or Apollo n00bs to give it a try. I wasn't a Flex or Java developer before I started DryerFox, and I had it up and running in a few days. I think that speaks volumes for the short learning curve.


3. Consume some good espresso and good micro-brew (but not at the same time).

I hope to see you there. Drop me a note if you plan on attending.

Technorati Tags: 360|Flex, Apollo, DryerFox, Flex, Browser Hack, WebKit

I'd like to thank the members of the academy ...

http://mashable.com/2007/05/07/apollo-apps/

There is DryerFox sitting at #6! w000000000000000000000000t! I rule!!!!!!!!!!!!!!!!!!

Nothing warms my heart more than the comments of “useless, but I like it!” or “There’s no sense in explaining it; suffice to say that it’s absolutely useless, but we just had to mention it.”

Hooray for pointless endeavors!

DryerFox even beat out Scout from Adobe Labs! (#9 on the list, and an excellent web developer tool in its own right. I used Scout to help me hack-out DryerFox).

It looks like my blog is getting quite a viewer spike from all of this. More than half of its traffic ever is from the last 6 hrs.

[Update 2007/04/09] Wow. I've had nearly 3000 unique visits over the past 2 days. Way more than the 150 visits from the previous 2 months!

Cheers,
Doug

Inside DryerFox - Part 1: Creating the media assets

Artwork
Just in case my DryerFox post didn't make it apparent, I'm not a graphic artist. But I can hack away with Adobe Fireworks with the best of them, so that's what I did. I googled for the biggest image I could find of a front loading dryer, and I found the image on the left.

Here's what I did to get the one on the right:

I spent a bunch of time learning & fiddling with Fireworks. At least 50% of this project time was due to my lack of design skillz.

1. The black background was easy to turn transparent.
2. I then split the image into 4 layers: the control panel, the lid, the frame, and the drum.
3. I stretched the lid and frame to make the dryer more squarish.
4. I repositioned the unstretched control panel appropriately.
5. I made the drum as large as possible, even making the rim thinner, to maximize the portion of the browser window that will show inside the drum.
6. I got rid of the squarish reflection on the glass bubble. I used the "magic wand" selector in Fireworks to find all the similar connected pixels, and then I just lowered the brightness.
   
7. Then I realized that the image was actually a top-load washer, not a dryer. Agh! Darn you inaccurate search engine metadata! But my result looked pretty, so on I went ...
   

Sound Effects
OK, now I that I had graphics, I needed some decent sound FX. Here I have a bit more of a background, having spent 6 years designing digital audio equipment. Normally, I'd hop on over to Sound Dogs (think iStockPhoto, but for sounds), since they have such a huge library.


But one of the main inspirations for this project is the nagging sound of my own dryer, which is right next to my home office. So I just brought my MacBook Pro into the laundry room and recorded it directly using the built-in mic.

I needed to disable the "Use ambient noise reduction" setting, since ambient noise was exactly what I was after.

I cranked up the input volume and recorded a 40 second run of good heavy load of towels, complete with the wonderful clunk of the relays kicking in when the dryer shut off.

Alrighty, I had all my media assets, so then it was off to Flex Builder to create the app, covered in the next post.