All Articles Flash
Brave New Web: Flash to HTML5 Converter
Geoff Blake on Mon, May 23rd | 4 comments
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...

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.

Comments (4)

You must be logged in to comment. Login Now

  • tobypitman
    Have you seen this yet? http://tumultco.com/hype/ Creates Flash type animations in HTML5 and CSS3 with a bit of JS too! Looks pretty cool!
    • 7 years ago
    • By: tobypitman
    Reply
  • Rounik Admin
    Toby. I was just about to post the same link! I downloaded Hype last weekend. It's a great step forward for HTML5 and CSS3. So great to have a timeline like in Flash to use to create animations. Nice!
    • 7 years ago
    • By: Rounik Admin
    Reply
  • Jazzy
    Just bought Hype too, it's a reasonable price and completely standalone - useful. I like Sencha's animation tool too but I have to be logged in to use it. I am eagerly waiting for Animatable...I get the feeling that's going to be a well thought out product. I like to edit/tweek the CSS3 myself, so getting code which is clean and meaningful is high on my wish-list. Got very lost in the Wallaby code!
    • 7 years ago
    • By: Jazzy
    Reply
  • tobypitman
    That looks great! I'm really glad that Andy Clarke is involved. At least your know the code is going to be valid and well laid out!
    • 7 years ago
    • By: tobypitman
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: