* From the Archives *

This article is from March 8, 2011, and is no longer current.

From InDesign to HTML5 via Flash

Update: I corrected a comment I made in the last paragraph about my problems with a gradient. I was having problems with a transparent gradient, not a normal gradient.

Today Adobe announced the beta release of their Flash to HTML5 conversion tool, Wallaby. Adobe demoed this software last Fall at Adobe Max. With todays release, you can download Wallaby (a free Adobe AIR app) and test out the conversion yourself.

In order to convert from Flash, you need to have access to the actual FLA (native Flash authoring file), unfortunately published SWFs will not work. According to various reports, the following items will not be converted in this beta:

Blend Modes
Flash TLF Text
Filters
Audio
Video
ActionScript

From InDesign to FLA

Since InDesign is able to export to FLA, I thought it would be interesting to see if an exported FLA file would convert cleanly into HTML5 code. I started out inside InDesign and created a simple banner ad with two animations. Click the graphic below to see the finished HTML5 banner ad. Note: you need a webkit browser (Safari or Chrome) to view the animation.

After creating the ad inside InDesign I exported the layout to a FLA. Upon exporting, I changed the text engine to Flash Classic Text since Flash TLF Text is not supported. At this point I could have converted the FLA file into HTML5, but I needed to stop the animations from looping. Whenever you export a FLA file, InDesign strips off the ActionScript code that controls the order and timing of animations. Because of this, every exported FLA from InDesign runs in a loop.

Stopping the Animation in Flash Pro

After opening the simple banner inside Flash, I double-clicked on the page to drill down to the two animations. After selecting the top animation, I double-clicked again to get down to the actual motion path.

With the object selected, I moved the playhead of the timeline to the last frame.

At this point I needed to add a stop command. If I wanted to write the ActionScript code, I could have opened the Actions panel and taken care of it manually. Being code-averse myself, I used the new Code Snippets panel in Flash CS5 to simply the process. I opened the panel and double-clicked on Stop at this Frame (inside the Timeline Navigation Folder) and Flash wrote the code for me.

I repeated this process to add the stop command for the other animation in the movie. With the stop commands working, I saved the FLA file and was ready to convert it to HTML5.

Converting to HTML5

Next, I opened up Wallaby and browsed to the FLA file. After clicking convert, I created a directory for all of the newly converted HTML5 assets.

Inside the folder was a collection of files including: HTML, CSS, JavaScript and images (png and svg).

Not Bad for a Beta

Overall, I am impressed that I was able to convert a simple banner ad from InDesign to HTML5 with relative ease. However, I don’t think this is really for primetime just yet. First of all, these animations will currently only run on webkit browsers like Safari and Google Chrome. Firefox and IE do not support HTML5 and CSS3 animation yet. Secondly, transparency and blend mode support does not work well. I tried adding a transparent gradient and it fell apart in the conversion. Finally, the file size of the exported HTML is actually bigger than an exported SWF. The HTML5/CSS3 file banner weighed in at 175k vs. 45k for the SWF. Obviously, this is still beta software and it will improve over time, but I wouldn’t count on this to save on file size right now.

Regardless of these issues, I am hopeful that this technology will improve over time. The Adobe Digital Publishing Suite (iPad/Android Magazines like Wired, New Yorker, etc) already support HTML stacks & web overlays from InDesign. That means “in theory” you could create an animation inside InDesign, export to FLA (via help from Flash for stop commands and ordering the animations), convert it to HTML5 and insert it right back into InDesign. Hopefully at some point InDesign will be able to just export directly to HTML5 and we can avoid all of this conversion nonsense. (update: Johannes Henseler wrote up his own how to article on using the the DPS system with an animated headline here.)

Petteri Paananen says:

March 9, 2011 at 7:41 am

Very nice article, thanks. I noticed this tool myself too and ran some tests. I used it with Adobe Digital Publishing Suite with very promising results. I hardly can wait to see what next versions will bring along…

By the way, if you don´t have Flash around… you can stop your animation with text editor as well… open the css-file wallaby creates and find the line:

-webkit-animation-iteration-count: infinite;

and remove it… (I tested it with only couple of files, so I´m not 100% sure it works with all animations)

Johannes Henseler says:

March 9, 2011 at 12:12 pm

Petteri, this is an awesome trick.

James Fritz says:

March 9, 2011 at 2:24 pm

@ Petteri That is really good point. If you are comfortable editing the CSS, you really can just go straight from InDesign to HTML 5 via the FLA export.

Jess B says:

March 10, 2011 at 7:34 am

Thanks for posting this, it’s great to see people testing this out! I don’t think a lot of this is Wallaby’s fault itself, though; HTML5/CSS3 animation’s spotty support is, as you point out, still browser-related, and all the tricks in the world won’t get them to make it work seamlessly. You might be able to stick in a JS workaround, but overall, I’m just going to keep hoping for a day for across the board equal implementation… :)

I will love HTML5/CSS3 animation and ditch Flash for it the second they are equals in speed, size and smoothness of animation. Until then, it’s still Flash for me.

March 16, 2011 at 7:33 am

I made a detailed explanation of an animated headline for an article in a digital magazine with adobe DPS, focusing on the production needed for DPS.

I gave you and Petteri credit, of course.

https://digitalpublishing.tumblr.com/post/3898796141/animate-headlines-or-other-things

Thank you for sharing :-)

March 16, 2011 at 8:10 am

@Johannes

Thanks for the link and your great article. I am updating the post and putting your link in my closing paragraph.

March 16, 2011 at 8:19 am

Nice tutorial Johannes! And thank´s for the credits….
One thing that popped into my mind is that if you are doing a fly-in title like you had in that tutorial… you can also use Export as Selection -feature. That way you can simply select animated title in InDesign and export only it as FLA. Afterwards you can remove original animated title (or hide it from Layers panel) and place a web-view to it´s place.

March 16, 2011 at 11:50 am

@James: thanks, too.

@Petteri: awesome idea! unfortunately, when the animation starts outside the document, it gets messy with the dimensions of the animation.
see here: https://goo.gl/NSYIG
when it is inside the document, it works, but then the webview has to begin outside, I don’t know if its possible.
a simple fade-in-transition works with the selection-export.

March 16, 2011 at 1:39 pm

Oh, I see… I have tried that with animate “To current location” property and it worked pretty nicely.

I did following steps:

1) First I created title animation, I put the title to the place animation ends and choosed fly in left and To current location -animation property
2) Then I selected my animation and exported selection as FLA
3) Then I converted FLA to Html with Wallaby
4) After that I removed original animation and created empty rectangle to it´s place, and input a web-view to that rectangle… I drew that rectangle partially into paper, partially outside, where original animation was placed
5) Finally I bundled it and sideloaded it to my iPad and it worked properly….

Eugene Tyson says:

March 24, 2011 at 5:36 am

Found this write up today – thought it might be interesting to some https://www.informationweek.com/news/internet/webdev/showArticle.jhtml?articleID=229300574&cid=iwk_RON_Server&wc=4

Heather Grimstead says:

March 31, 2011 at 7:48 am

Great article – thanks for sharing your experiences. Can you confirm that you’re using CS5? I’m trying this out with CS4 and getting an error, which I believe is CS4 related.

March 31, 2011 at 7:51 am

@Heather – Yes, I did use CS5 for this test. CS4 does not let you export a .fla, but it does export a .xfl. Therefore you could export to .xfl and open it in flash CS4 or CS5 and save it as an .fla for use in the converter.

March 31, 2011 at 9:13 am

Thanks for the info, James. I did save the xfl as fla before trying Wallaby. I think CS5 is in my near future! If I discover anything that works for us hold out CS4 users, I’ll post a note.

March 31, 2011 at 9:15 am

Sounds good. Good luck upgrading to CS5, you will really enjoy the new interactive features.

cwc video says:

April 19, 2011 at 10:10 pm

Thanks for the great article about html5 and flash. I wonder if this will make a difference apple, since they dont want to support flash. Interesting to see what happens.

Matthew Laun says:

June 29, 2011 at 8:22 pm

Great stuff!
Re: “Secondly, transparency and blend mode support does not work well. I tried adding a transparent gradient and it fell apart in the conversion.”

Transparent gradients are likely getting rasterized. If you stick with constant colors and set only opacity and blend modes, you’ll probably be safe.

John Va says:

July 25, 2011 at 7:28 pm

Hi, good stuff here! Could anyone please tell me how to make the animation restart everytime the page is viewed? At the moment it plays once (works great) but only once, if you return to the page the animation will still be where it finished at last keyframe… I want it to run everytime page is viewed… I have a deadline end of week so any help asap would be appreciated! thanks