Adobe Converts Flash to HTML5 With Wallaby

By Michael Rohde

HTML5 video looks like the future but Adobe’s Flash is still the de facto for presenting video on websites. Adobe doesn’t want to be left behind when the world eventually moves past Flash and embraces new standards. After all, if you’re not growing and evolving, you’ll eventually be left behind and forgotten. This is especially true with the new breed of tablets and smartphones that don’t support Flash.

So what is Adobe doing to keep in the limelight? The answer comes in the form of Wallaby. According to Adobe Labs, “"Wallaby" is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. This allows you to reuse and extend the reach of your content to devices that do not support the Flash runtimes.

Once these files are converted to HTML, you can edit them with an HTML editing tool, such as Adobe Dreamweaver®, or by hand if desired. You can view the output in one of the supported browsers or on an iOS device.” Wallaby is by no means official as of right now, but it does provide a sneak peak as to how Adobe will keep itself from getting lost in the shadows as more and more devices don’t support Flash; particularly iOS devices.

So, how does Wallaby work? First, Adobe asks you to download and install a stand-alone native AIR application. The initial version of Wallaby converts typical banner ads to HTML5 using a Webkit rendering engine. Because Wallaby focuses on Webkit, it means the output appears best in Chrome and Safari. Once again, as is often the case with HTML5 and CSS3, only time will tell how Internet Explorer will support this standard. Wallaby will not produce the final HTML that you can use on your site. Instead, it provides the content that you can import into your pages. After you install Wallaby, the conversion process happens by entering a URL, browsing or dropping files and folders into Wallaby’s conversion window.

There are a couple of ways to add the converted file to your site. The first option is to use an IFrame and the second option is to load the movie as a resource.

IFrame Approach

According to Adobe, “The easiest way to externalize content is to put it in an IFrame and have it point to your wallaby movie. This is a clean and fast approach but it will cause your animation to run in its own context. This is only a drawback if your HTML wants to interact with the Wallaby HTML.” I chose to directly quote Adobe here because I’m not entirely sure what that means or the consequences and I have not yet tested Wallaby, but it does sound important.

Load the Movie as a Resource

Now, let’s get to the code. Adobe is suggesting that you set up your CSS like this:

div.wlby_movie

{

overflow: hidden;

width: 955px;

height: 310px;

display: none;

}

And in your HTML file you need to add a handler :

$(document).ready(function() {

$('#external_animation').load('wallaby_output.html .wlby_movie', function(){

... // code that sets up the wallaby key frames. 

// check if all images are loaded

var count = 0;

var images = $('.wlby_movie img'); 

// this returns an array with all the images in the wallaby

document

images.bind("load", function() {

count++;

if (count == images.length)

$('.wlby_movie').css('display', 'block'); 
// show the movie once all the images are in

}

});

});

Wallaby is extremely brand new. This article is simply serving the purpose of announcing it’s availability. Probably the most interesting key take away from this information is that Adobe is being proactive about the emergence of HTML5 and the changing face of presenting video on the web.

Flash is still the dominant form of video on the internet today and Adobe is still a viable force in the market. Kudos should be given to the company in recognizing HTML5, iOS and Webkit and what they represent in terms of future web development.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date