• May 23, 2011

• Brave New Web: Flash to HTML5 Converter

• by Geoff Blake in Flash

• Genre: Web
• Level: Beginner/Intermediate
• Time to Complete: 5-15 minutes
• 4 comments — Join Discussion

Have you been following the ongoing drama of the "Flash vs HTML5" battle over the past few years? As a software educator, I really try hard to remain agnostic towards technology, but because I love and have used Flash for so long, I took interest with this particular issue. That said, as a web developer, I'm also very excited about the possibilities of HTML5. 

Thankfully, Adobe's been hard at work trying to accommodate HTML5 in it's suite applications. Then in March 2011 they released an Air application called Wallaby. Wallaby allows developers to convert their Flash files to HTML5. It's pretty darn slick, so let's see how it performs.

Step 1

To get started with Wallaby, head to labs.adobe.com and click on the Wallaby download link.

Step 2

Once the download is complete, double-click on the zip file to uncompress it. Next, follow the steps to install the application. 

Once the application is successfully installed, it should launch automatically. Now we're ready to give it a try on our Flash movies. Inside the Wallaby interface, click the Browse button in the top-right corner to browse for and load in your Flash movie.

Next, you may want to click on Preferences and set the pair of options found there, Preview in Default Browser and Enable Logging. I'm going to go ahead and select Preview in Default Browser. Make sure to click Save to lock in your choices.

Step 3

Back in the main Wallaby window, go ahead and click Convert. Notice when you hover your mouse over the Convert button, we get a tooltip telling us exactly what's going to happen, "Convert Selected FLA To HMTL5." When we click Convert, we're presented with a Save As dialog box, which will allow us to specify where we'd like to save our HTML file. Go ahead and navigate to the directory where you'd like to save the converted file; then click Save.

Wallaby goes to work converting our Flash file to HTML5. Once the conversion is complete, you may see some content appear in the Errors And Warnings area of Wallaby's interface. In my case, my primary browser also launches to show me the results, because I selected that option in the preferences. Notice in the image under Step 4 that I've received quite a few warnings for my particular Flash file. And even though these errors have resulted in a less than desirable conversion, you can double-click on any of the warnings to help diagnose the problem, which you could then attempt to correct back in the original Flash file.

Step 4

So while Wallaby may not be 100% perfect, it's still very much in its early stages, and this is a big, bold move for Adobe too. Their take on the whole "Flash vs HTML5" battle is that there's room for both technologies to exist. And with the release of a fantastic tool like Wallaby, it seems they're taking this stance seriously.

Interested in learning more about Flash? Check out the Flash CS5 101 - Core Flash CS5.