Feb 28, 2012

Export to HTML5 from Flash Professional

Adobe is proud to be a part of FITC Amsterdam again this year. During Mike Chambers’ keynote speech, our team gave those who were in attendance a sneak of the Adobe Flash Professional Toolkit for CreateJS, which is the result of the collaboration between Grant Skinner and the Flash development team.

As many people know, designing for today’s browsers and platforms has become more challenging than ever before. Our goal at Adobe is to continue to provide creative professionals with the most cutting-edge tools that will transform creativity and ideas into tangible assets. We believe that this latest extension will extend the skillsets of ActionScript developers and help them make a smooth transition to the HTML5 world.

The Adobe Flash Professional Toolkit for CreateJS will allow designers to continue to leverage many commonly used animation and drawing tools of Flash Professional. The assets can then be exported to a nicely formatted, readable and editable JavaScript code through CreateJS, an open source framework that provides a comprehensive set of JavaScript libraries—including graphics, sound, preloading and animation.

We encourage you to watch this video to get a better understanding of this extension and how it can help Flash Professional users to make the leap and start creating expressive HTML5 based content.

TAGGED AS: ActionScript, Adobe Flash, CreateJS, Flash Professional, HTML5, open source framework, web development, web toolkit

http://twitter.com/mrattackfrog Geoff Freedman

Interesting and encouraging. Now if only AS3 written in Flash Builder could one day compile down to JavaScript …
http://picturevideo.blogspot.com/ Paul Benavent

Nice project! http://blogadsresearch.blogspot.com
http://www.facebook.com/profile.php?id=1636148230 Faisal Ahmed

Do we have this feature in our Flash Professional CS5.5 or where to get it ?
- Jennifer Kremer
  
  Hi Faisal,
  This is something the Flash team is working on for a future release. This is not included in CS5.5.
  Jennifer
  - Scoch
    
    You mean future CS6 or will it be a long awaiting?
    - Jennifer Kremer
      
      Hi Scoch,
      This will be a feature in CS6 when it is released.
      Jennifer
      - Bramver23
        
        I just got my cs5.5 and it was expensive! Now I have to buy cs6 , if I want to make HTML 5 animations ,,,, is not fair adobe came on…..
      - lisa
        
        I would have to say that I am surely disappointed right now because there are numerous students and instructors out there that have invested money they barely have in the first place to get the education version of the software and have to purchase the entire suite all over again. They are not allowed to upgrade. So, Adobe, we need a solution NOW to let us convert our Flash files for CS5 & CS5.5 users. Wallaby is no longer available either.
      - http://twitter.com/cwoodred ǝɯnɐǝɹ ǝuɐɥs
        
        And this is why I have jumped ship from Dreamweaver to phpStorm at least for the IDE and never use flash unless I have to.
  - http://profile.yahoo.com/S3OHQQHP2GTEDU7G3FY4LK3VR4 AaA
    
    it means this Feature is still not available for developers ?
    - Jennifer Kremer
      
      This feature will be available in Creative Suite 6 when it is released.
  - Bramver23
    
    when is going to be ready this tool?
  - http://www.facebook.com/marshallgisser Marshall Gisser
    
    jennifer, is there now a solution for Flash 5.5 to export as HTML5?
http://www.facebook.com/justin.novelline Justin David Novelline

oh my… game changer
Pingback: EaselJS become CreateJS and will be used in Flash IDE to export in HTML5 canvas | small codes
http://gskinner.com/blog/ Grant Skinner

That example is actually exported and rendered as pure vector goodness. The original SWF is 19kb, the uncompressed JS assets export at 50kb, and with zip compression it comes out to 22kb.

In some cases file size for animations from Toolkit are actually a lot smaller than the original SWF (ex. we have one animation that is 9kb in CreateJS vs 27kb in SWF), but this will vary depending on the specific animation style and content.
- http://www.facebook.com/profile.php?id=502932205 Lamar Wilson
  
  Looks great man. Can’t wait to use it for game development.
Jacky5

you will be more awesome if you opensource “flash”
Shirish

I am wondering if we could export Flex contents similar to Flash?
http://twitter.com/tchalvak Roy Ronalds

Aaaaaaaaaaabout time!
brainfreeze

How about if you had an Adobe AIR product. Can that be converted to HTML5 with all the logic intact ?
Pingback: Flash professional soon to export to HTML5
Bilbo

Odd that he wasn’t using Dreamweaver to show off HTML and Javascript. Don’t get me wrong. I like TextMate as much as the next guy but I’m not making a promotional video for Adobe.
Pingback: html5 | Pearltrees
Daesung Park

Excellent tool I have anticipated. Do you have a release plan?
haibook

great! but when are we going to be able to work with this??
any hint any idea?
CW

Any plans on using the same tool for Flex on the enterprise side?
Dpage

Will this be able to export interactive pieces to HTML5? Will you be able to create buttons and nested control clips with ActionScript and use this toolkit?
- Joseph Wong
  
  The toolkit exports the assets, including nested symbols, but does not convert ActionScript. Interactivity is added separately in JavaScript using the CreateJS suite of open source JavaScript libraries, which provide a set of APIs that will be familiar to AS3 developers.
Aaa

Does this just export animations, or does will it also convert actionscript to javascript.
Pingback: Is Flash Dead? | ChurchMag
Jamesmichaelmahoney

what do you recommend we AS3.0 developers and animators do for now – until exporting to HTML5 is ready for prime-time?
Admin

Reminds me of swiffy from google. Biggest problem with converting to html5 is that the filesize increases ALOT. A 40kb banner with jpgs and pngs is after exporting somewhere between 90kb and 160kb. Flash is so much more advanced as html5 but “the progress” is unstoppable… because the world is full of …
Engine

Flash is a great WYSIWYG animation tool for web and if this export works, Flash has a future in designing for mobile.
Yorch

Great! I´ll wait for more information!
Pingback: gskinner.com: gBlog: Announcing CreateJS
Pingback: Adobe Previews export to HTML5 from Flash professional
http://synthetictone.com Synthetic Tone

This is interesting. I had tried using the Adobe Muse app for creating a simple 300×250 Flash banner which would have been well under 40K as a .swf but the resulting files Muse output including scripts were over 300K which I deemed unusable for my needs in my career.

File size and lack of easily editable code has also been an issue with anything current that will convert .swf to HTML5 such as Google’s Swiffy.

If this extension does as you noted… it will be a HUGE asset to online teams everywhere who are eying the transition from Flash to HTML for banner advertising as the support for Flash flutters and the great learning curve holds many visual designers back from HTML5 due to need of more coding skills.
Rv Khade

Suppose I have created MCQ activity in flash. Is it possible to export this to HTML5 content whithout extra efforts?
Pingback: From Flash to JavaScript and back AGAIN « BCmoney MobileTV
Pingback: Adobe touts tools for Flash-to-HTML conversion | Brian's Blog Site
Pingback: Conexão TE » Blog Archive » CreateJS – Adobe especulando conversão de Flash para HTML
Pingback: Adobe touts tools for Flash-to-HTML conversion | BussinessTree NewsBussiness Tree
http://profile.yahoo.com/ZEUPE7ZWBE2YUHEHL4JLRYVO4M st

Still from flash that all good but i wonder about AS3 to JS conversion
http://profile.yahoo.com/ZEUPE7ZWBE2YUHEHL4JLRYVO4M st

ps
thanks adobe still good news as always looking forward to full release
Garrett

check out http://luxahoy.com, an html5 game, for what you can do with these tools.
Pingback: Adobe touts tools for Flash-to-HTML conversion | Flash To HTML5,convert Flash to HTML,flash to html5 migration
flashcake

Hi,
Flash Team Brillant work, We are waiting…
Matt

Written like a flash developer with a white nuckled grip on hard earned expertise he doesn’t want to become obsolete . I can relate. Unfortunately, the auther doesn’t seem to have a clear understanding of what HTML5 is–he speaks of it like it’s a discrete technology that you can make broad browser compatibility claims against, and then goes on to assign an arbitrary compatibility percentage to it… that’s ridiculous misleading. Virtually all tech leaders agree that HTML5 is the platform the web is moving towards including Google, Mozilla, Apple, and even Adobe who have now completely stopped their Flash on mobile initiatives and are scrambling to develop tools to make the transition to “the new HTML5 world” easier for Flash developers (http://blogs.adobe.com/creativelayer/html5-flash-professional/).
Mgcool

Now that it has been released, and I’ve seen it working…
I found this not so handy or helpfull, because it only exports sprites into images (many) no interactivity since it has to be recoded in JS, so basically would be something like developing for two languages, I mean, my ” flash” website has a lot of backend with PHP, XML and shared objects, this won’t be “exported” and will need to be programed in JS, so I think it will be better to learn the whole JS, because AS won’t be doing the work for HTML.
I know there are a lot of options, but being a flash developer I really think they underestimated the power of mobility and as developers maybe the best choice will be moving to the next platform.
Regards
Mgcool
Judy

I find it strange that when I publish my short animation within Flash CS6 (with CTRL+ENTER) it shows perfectly. But when I publish it to CreateJS the first frame keeps showing all the time throughout the entire animation although it’s supposed to disappear.

Any suggestions?

Thanks,

JudyK
Judy

I find it strange that when I publish my short animation within Flash CS6 (with CTRL+ENTER) it shows perfectly. But when I publish it to CreateJS the first frame keeps showing all the time throughout the entire animation although it’s supposed to disappear.

Any suggestions?

Thanks,

Judy