Check out Flash Pro generating HTML5

Let’s get a lot more people making animated HTML5 content. To do that, we need to lower the barriers to entry.  That means making content run reliably across browsers, and letting the hundreds of thousands of people with Flash skills apply those skills to a new output format.

Because HTML is so broadly useful (Web pages, mobile apps, magazines, etc.), there’s no one-size-fits-all solution. In this 10-minute demo, Adobe VP Paul Gubbay shows:

  • Animating in the new Adobe Edge app (download it from Labs)
  • Turning that output into an app using PhoneGap [jump]
  • Using Flash Professional to export animation as HTML [jump]
  • Running CSS Shaders in WebKit [jump]
  • Enabling “liquid layout” from InDesign [jump]



I find the Flash Pro HTML export demo especially exciting, because it helps you reach your audience across configurations (e.g. letting an ad run with or without Flash installed), and it helps migrate content from Flash into HTML.

I should emphasize that this technology remains a work in progress, but here’s some of what I’ve learned:

  • This path will be most useful for relatively simple pieces–think ads, microsites, & other animated branded experiences, not complex games.
  • Output will be editable in Edge where it can be choreographed with other Edge motion content and where you can add interactivity in JavaScript. Flash Pro can play to its strengths, such as frame-by-frame character animations, feeding these into Edge.
  • The Flash Pro team is experimenting with converting ActionScript to JavaScript, again with ads being a key use case.
  • Sprite sheet export (see separate demo) will be useful across a variety of tools & runtimes (CSS, Canvas, Starling, and more).

I find all this extremely exciting. What’s your take? Anything else Adobe should be doing here?


PS–This demo was excerpted from last week’s Adobe financial analysts meeting. You might find some of the complete recordings & slide decks interesting. (Paul spoke during the David Wadhwani segment.)

18 thoughts on “Check out Flash Pro generating HTML5

  1. Exciting? Meh… In all these years I’ve yet to see Adobe generated code be anything more than a steaming pile of crap.
    [Out of curiosity–and I mean this sincerely–have you ever seen machine-generated code that you liked and respected? Ever since the HTML WYSIWYG wars, I’ve heard people bemoan what comes out of apps like GoLive & Dreamweaver, yet I can’t think of anyone pointing at a well regarded counter example. This leads me to think that *any* generated code is thought suspect/unworthy, if for no other reason than it isn’t one’s own. –J.]
    That and the fact that an Edge animation weighs in at like 2mb compared to a comparable SWF at around 30kb. Wake me up in 10 years…
    [I’ll admit I’ve had no time to mess with Edge. Do you think the file size problems you’ve observed are due to the tool itself, due to limitations in what/how HTML defines animated content, or both? If there are shortcomings in the standards, I’d hope that people at Adobe would work to define more efficient approaches. (They may well be doing so right now; it’s a big company and I can’t know all of what’s going on.) –J.]

  2. By biggest concern over these demos is the file size. Sprite sheets will never work for banner ads. 40K is the file size limit.
    [Cue old man voice: “Why in *my* day (specifically the 90’s) the limit was 9.9Kb, and we liked it–we liked it fine!” (Seriously, I was a surgeon with GIFBuilder, Debabelizer, etc. –J.]
    Considering HTML5 is targeting mobile, I can’t imagine users will be happy with their bandwidth caps and data overages.
    I feel like the people clamoring for HTML5 have no idea what impact it’s going to have to performance. But still keep up the good work, we definitely need tools like these, but just be mindful of file size.
    [Absolutely. –J.]

  3. Likewise Flex to HTML5 made for Application Development, as opposed to Flash to HTML5 Animation.
    Nevertheless these are the types of features that needs to be exported to. I wish it started a little earlier though.

  4. Flash to HTML5 is very nice feature 🙂
    Flash developer and designers can use their Flash skills and by exporting application into HTML to target more platforms and mass audience.

  5. Your Subject is : Flash Pro generating HTML5 ?
    is that idea a good idea ?
    is-it the truth to only tell : generating HTML5 ?
    Is-it not more accurate to say : Flash Pro generating HTML5+Javascrit+CSS
    and to tell us in which extended versions (.x) if accepted by the HTML5 community with Apple, Microsoft and others ?
    or in the very limited actual versions with one different flavour for each member of the “pseudo community” ?
    Are the capabilities and qualities of Flash and HTML5 the same ?
    So in the real world and in every day practice, this generation will fail very often, no ?
    and it will be necessary to always verify and return to Flash to simplify and adapt the flash source
    to the extreme limitations of the HTML5 targets and flavours, no ?
    And all this “bad work” is not a “forward work” but a “regressive work” and a “not efficient work”
    which consist to go from a more powerful tool like Flash with its “code once” and “play everywhere the same result”
    toward a less powerful tool like HTML5+Javascrit+CSS.
    IT’S A NONSENSE WORK ! for Flashers of dream team !
    And how to explain now to our client that we have been obliged to extremely simplify and cut into his needs
    because of the impossibility to generate that he was waiting for in HTML5 + Javascript + CSS ?
    And to explain him also that the size of this simplified and truncated version generated in HTML5
    is far more heavy than the flash full and complete version and also far more slower and with less performance ?
    What a good job Adobe anti-Flash GUYS !
    Thank-you Steve and Apple and Microsoft and financial analysts !
    What a good Future you build GUYS for Flash developers !
    I hope you are not paid at ADOBE with our Flash Pro license fees
    but only with your Apple and Microsoft arrangements…
    We are NOT so STUPID !
    If there is a good Job to do, there is only one WAY :
    to completely open source the Flash Player code for the world community
    and integrate it in the basic WebKit code for all browsers in the full and same way
    for a full web experience everywhere on every browser and device platform mobile and not mobile.
    And then : the problem is resolved ! not transformed in a no way pseudo solution that doesn’t work !
    So I say you GOOD BYE !

  6. It is a start, but take a look at the haxe nme
    Project. That looks promising. And i agre open up the flash player.

  7. One of the things that I love about Flash is that something I built 12 years ago and published to swf works. It simply works today in the newest player on any platform.
    The awful thing about this HTML5 transition is that this encapsulated, single file transport that simply works anywhere will be a thing of the past.
    Flash was one respite shelter from the madness that is developing for compatibility in nutty browser city. It’s sad to see this respite come apart at the seams as the misguided influence continues to spread. “Kill Flash” is a common mantra. It’s not a pretty sight. And it seems to get worse every week.
    While these moves and opaque news releases that do real damage to your Flash developer community may end up increasing your revenues, you’re doing even greater damage to the trust relationship you have with the Flash development community by not dealing with these problems in a positive way.

  8. … [… it’s a big company and I can’t know all of what’s going on.) –J.]
    there is hardly anyone who knows what is going on in this company.

  9. I’d say this feature is a good thing. Even with all those debates over two technologies that aren’t even exactly in overlapping areas, outputting to more formats is a good thing. Flash’s rival Unity is planning for SWF output.
    I hope output to JavaScript isn’t the only thing Flash can do though – I use Flash mainly for generating SWF files, which are conveniently packed into one single file that can be executed whenever desired. There is no web equivalent to do that, save for the MHT format.

  10. I’ll be curious to see what comes next. There’s no question that even Web developers who adore Flash are going to want to dip their toes into HTML5 in the coming months and years; there’s no question that Adobe must create outstanding HTML5 authoring tools if it wants to keep on being the indispensable tech company that it’s been for the past three decades. Whatever happens, it’s going to be fascinating–and Wallaby is a first step in a general direction that seems inevitable to me.

  11. I think this is a great potential step forward… Adobe never made it’s money from the Flash player but from tools for creating Flash content. If I can continue to use Flash for my design projects and have the choice to export to Flash for desktop or HTML5 / CSS for mobile and tablet (which are always smaller / simplified versions) then the whole debate about Flash being dead can come to an end.
    My clients simply aren’t interested in technology or long conversations about the future of Flash / HTML etc – they simply want the websites to work and look great (without spending huge sums of money on development).
    My question is whether this new export to HTML features will work with AS2 code and not just AS3 (a lot of us designers simply can’t get our heads around AS3 code which takes much longer to code – we like hacking ideas together quickly in AS2) – and of course whether it is just limited to animation (ie like Google Swiffy) ?

  12. The create JS is a brilliant solution – I can’t see anyone could complain about it, now I can publish to html5 or swf – fanastic.
    Although i haven’t figured out how to centre the finished html5 in the browser window yet. It’s all positioned at top left of screen.

  13. Help.. ! How do I centre the stage in the browser.. ! css and html codes don’t seem to do the trick nor any action script.

Leave a Reply

Your email address will not be published. Required fields are marked *