(Close)
Forgot password?
AskAudio Magazine
Join Now! Watch Tutorials
macProVideo.com
Close

Join macProVideo.com

Access free tutorial videos, premium articles and project files.

Share this article with friends!

Brave New Web: Flash to HTML5 Converter

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.

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

May 23, 2011
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!
May 23, 2011
Rounik
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!
May 23, 2011
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!
May 24, 2011
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!

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2014 macProVideo.com
a division of NonLinear Educating Inc.

About

Our Plans

Tutorials

Community

Help

Legal

Link