Twitter: raymondcamden


Address: Lafayette, LA, USA

Flash Professional CC adds HTML5 Canvas Support

12-03-2013 6,471 views Development, Design, HTML5 26 Comments

If you are a Creative Cloud subscriber, be sure to make note of the update to Flash Professional today. Despite being listed as a "Bug Fixes" update, this is actually a quite significant update as it now includes the ability to natively create HTML5 Canvas animations. This is done via the CreateJS library.

After updating Flash Pro, you will see the option right away in the opening dialog:

As a test, I wrote a quick and simple animation and then published it. The result - as expected - wasn't a SWF but HTML and JavaScript. You can see an example of the output here: http://www.raymondcamden.com/demos/2013/dec/3/Untitled-3.html. And of course, being HTML5 based, it works just fine in iOS:

For more information, check out the documentation and let me know what you think.

26 Comments

  • Commented on 12-03-2013 at 3:36 PM
    Hmmm... Canvas...
  • Eman #
    Commented on 12-04-2013 at 9:22 AM
    And how is that (animation overall) useful?
  • Commented on 12-04-2013 at 9:33 AM
    @Eman: What exactly are you asking? Why is canvas useful? Why is animation useful?
  • Eman #
    Commented on 12-04-2013 at 9:46 AM
    @Raymond Camden

    I am asking how animation is useful, fundamentally? IMHO, I see it as another shot at Flash. Kind of "its different" and "its better" gimmik :)
  • Commented on 12-04-2013 at 9:48 AM
    "I am asking how animation is useful, fundamentally?"

    Um, that's kind of a broad question. Animation has been useful, fun, etc, on the web, and elsewhere, for years. If you don't see the use of animation in general then I suppose that's that.

    "IMHO, I see it as another shot at Flash."
    Maybe. I don't see it that way. It's an alternative to SWF but using the same powerful IDE for creating the animation.
  • Eman #
    Commented on 12-04-2013 at 9:53 AM
    BTW All this was done in Flash years ago... Now, at mercy of corporations we are forced to "embrace" "innovation" which at best copies same ol stuff. Again, its IMHO. I am not trying to tell I know The Truth. But as a person I am simply tired of all these "new" "technologies" that simply perpetuate corporate profits under a new label.
  • Eman #
    Commented on 12-04-2013 at 9:59 AM
    Also, CS6 is the last Adobe license I own... No matter how "cool" creative cloud marketing speeches are I am not buying it. CS6 suites me well, does everything that I need. New version of IDE etc. does not make one more talented and creative.

    If company wants me to use creative cloud they have to buy a license for me cause I am not going to buy it. Otherwise, there are other technologies that do not require a corporate trojan horse installed on your system. :)
  • Commented on 12-04-2013 at 10:02 AM
    @Eman: Ok, I'm truly confused. Are you upset about animation? About Flash? About Adobe?
  • Eman #
    Commented on 12-04-2013 at 10:09 AM
    I am not upset :) It's just my point of view, that's all. Please don't take it personally. Some people love Adobe for whatever reason, others do not for whatever reason. It's life. Marketing does not work every time on everyone ;)
  • Commented on 12-04-2013 at 10:09 AM
    I'm not taking it personally, I just couldn't tell exactly what upset you per se. I know CC isn't for everyone.
  • Eman #
    Commented on 12-04-2013 at 10:15 AM
    @Raymond Camden

    "I know CC isn't for everyone.", Amen.

    Raymond, thank you for all the work you do for the community.
  • Commented on 12-04-2013 at 12:45 PM
    I'm glad adobe is adapting to new environments like HTML5 since I already know and love their flash IDE this is just icing on the cake.
  • Commented on 12-04-2013 at 12:46 PM
    Brian, have you seen html.adobe.com?
  • Commented on 12-06-2013 at 5:37 PM
    Hi,
    Does this work for interactive content either ? or is it just for animations ?
    and in case it does, what do you think about the performance ? is it possible to develop a game and published for HTML5 and having the same performance ?
    thank you
  • Commented on 12-07-2013 at 9:46 AM
    @Aladine: I'm ashamed to admit - my Flash skills are weak. I don't know how to add interactivity. I'd assume it works, but I can't promise it. If you want to walk me through the basics of something, I can try, and of course, if you are a Creative Cloud member you can upgrade and try yourself. I'd love to hear what you find.

    As for performance, looking at CreateJS in general (http://www.createjs.com/#!/CreateJS), it seems very impressive.
  • Commented on 12-07-2013 at 2:22 PM
    Check out http://html5maker.com if you need to create HTML5 animation without the coding skills.
  • Peter #
    Commented on 12-20-2013 at 9:04 AM
    Today I made a pentagon.
  • Commented on 01-11-2014 at 12:21 AM
    I want to ask for the final step. I want to build an application runing on ios. What do I do?
  • Commented on 01-11-2014 at 7:59 AM
    You don't have to do anything to get HTML to run on iOS - just open up mobile Safari. But if you really want an app, check out PhoneGap.
  • Randy Miller #
    Commented on 01-21-2014 at 10:17 AM
    I think what people are complaining about is that AS2 and Flash was doing stuff 10 years ago which is now the hot thing for HTML5/JS/CSS now. All the development toward AS3 just got kicked to the side which was a big let down. AS3 was revolutionary and now everyone is expected to go back a decade for the sake of APPLEs new standards of post-Flash vision.

    Finally, I have succombed to the Apple world simply because Windows 8 has been such a farce and many companies are actually standardizing on iOS infrastructure for the first time ever. The reality is that we went back a decade for animation to get access to App stores which is the future of publishing.
  • Commented on 01-21-2014 at 10:35 AM
    Well in my opinion flash will still be the platform of choice for video chat until somebody implements streaming AV to/from common media servers is implemented in HTML/HTML5 video object. I wrote a book about how to achieve video chat with flash as the presenter and the websites front end using HTML5 and Node.js.
  • norris #
    Commented on 03-31-2014 at 5:59 AM
    Hi
    I was wondering if you could help me I can quite easily create a HTML file canvas animation however I am battling to find some information on how I can place it into a specific allocated area inside one of my webpages. there is a ton of information about there about how to create these HTML canvas animations that nothing
    how to place the code into a webpage that has already got other content on it.

    Thanks
    Norris
  • Commented on 03-31-2014 at 6:23 AM
    I'm confused - you are asking how to use the result?
  • Commented on 03-31-2014 at 7:59 AM
    He just wants to position the canvas with CSS <canvas>style = position:absolute; left:200px; top:100px;</canvas>
  • Commented on 03-31-2014 at 8:00 AM
    EDIT:

    He just wants to position the canvas with CSS <canvasstyle = position:absolute; left:200px; top:100px>;</canvas>
  • Commented on 03-31-2014 at 9:07 AM
    Ah cool - thanks Brian.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty