4 ms·

Flash CS5 will export to HTML5 Canvas

151 points by terrellm 17y ago

alttab 17y ago
With this as an (awesome) reality, I can see Adobe Flash CS5 merely being an authoring tool for web animations and interactions. The end technology is largely irrelevant as long as most devices (mobile or otherwise) can access it. Adobe as an IDE only in the future?
- watty 17y ago
  Adobe does specialize in IDEs. They don't make money selling the Flash player but it was a requirement at the time because no other technology allowed them to create rich content. It'll be interesting to see if this works with advanced animations and games.
  - jacobolus 17y ago
    Wait a sec. “At the time”, the company making Flash was called Macromedia. Adobe, at the same time, was investing in the open-specced (through W3C) SVG format, as output for its similar tools. But you’re right, both Macromedia and Adobe sold/sell tools, not platforms. (Frankly, SVG is still better than Canvas for many purposes; I hope someday Microsoft decides to implement some of it in IE.)
- daleharvey 17y ago
  exactly, this is what adobe (macromedia) should have done 10 years ago. Instead of trying to lock everyone to the swf format, become the best publishing tools for web content. better late than never.
  - talklittle 17y ago
    I would think that from a business perspective, now is the perfect time for Adobe to make this move. 10 years ago and they would have tons of lost revenues from competing solutions. That is, locking people to a proprietary format worked hugely in their benefit in this case. Now as Flash is finally starting to see its last legs is a good time to change their focus.
  - zyb09 17y ago
    Except this wasn't possible until very recently?
    - daleharvey 17y ago
      it would have been possible 10 years ago if swf was an open format and not a closed plugin.
      - wmf 17y ago
        Even if SWF was open, I doubt browsers would have implemented it since SWF doesn't really fit the spirit of the Web.
  - reitzensteinm 17y ago
    They should have done it for the benefit of who? They had fantastic success locking everyone into the swf format. Sold a ton of very highly priced software. Got acquired by Adobe, probably in no small part due to this lock in. I'm completely in favour of web openness, and I'm personally stung by the SWF monopoly, but I find the assertion that Macromedia should have given up a huge part of their business advantage just to help general web openness ridiculous.
lsb 17y ago
HTML and Javascript are object code at last. As far as I can tell, people use Flash because the development tools are fantastic, not because they're married to the SWF output. This seems like the best of both worlds.
- mcav 17y ago
  I wouldn't describe the flash IDE as fantastic. The only reason it's passable is because it's really the only game in town. It's slow, its UI could use a lot of cleanup, and its code editor is particularly slow and lacking features (as compared to XCode or Visual Studio). I think people use Flash because it's the best (major) browser-targeted tool that handles animation design decently.
  - aaronblohowiak 17y ago
    the IDE isn't fantastic, but Flex is actually one of the nicer UI frameworks. This could get really interesting for developing "thick" clients.
    - camwest 17y ago
      Flex definitely won't output to FXG. FXG is simply a declarative graphics specification. Don't expect ActionScript to port over to JavaScript reliably using this tool.
- reitzensteinm 17y ago
  Anecdotally at least I use an alternative non Adobe compiler to generate my SWF games. So for me the reach of the Flash player, and by extension the SWF format, is the most important thing. I consider the development tools to be poor if you're primarily writing code (and this includes Flex), but they seem great for editing simple animations visually.
  - jxcole 17y ago
    I am a decent coder and I've always been interested in developing games. I am a big fan of your web-site and I think you really know what your doing. I would be really interested in the specifics of what types of development tools you use. Do you think you could provide links? Much appreciated!
wallflower 17y ago
I will reserve judgement until I see the HTML5 output, as generated code has a track record of being either a) unmaintainable, unmodifiable or b) doesn't work very well.
- watty 17y ago
  Good point. How easy will it be to edit the output to add the different browser "hacks" to make sure it renders similar across different browsers?
  - deleted 17y ago
    [deleted]
  - voidpointer 17y ago
    If you consider the output "object code" there would be no need to edit, let alone roundtrip. You don't edit the object-code or byte-code from your compiler either.
  - elpuri 17y ago
    Naturally it's Adobe's job to handle the quirks when generating the output. I would be surprised, if forcing developers to edit generated code even crossed their minds. It just doesn't make any sense.
  - wmf 17y ago
    At the SXSW Flash vs. Canvas panel it was mentioned that canvas has virtually no browser quirks; all browsers that implement it implement it correctly.
- yason 17y ago
  It can't be much worse than the bug-ridden Flash runtime which is horribly slow and has generations and generations of compatibility hacks trying to provide, except the 2D vector graphics, pretty much the same functionality as browsers and JavaScript do. This is a good thing: Adobe/Macromedia's expertise on the authoring tools combined with a good open platform instead of their proprietary backend. I have no complaints against the former, and if the latter will work out it's just a plain good move.
briansmith 17y ago
Wouldn't SVG be a much more natural target for Flash than <canvas> is? What is the benefit of <canvas> over SVG? It seems like it would be easier to do effective hardware acceleration for SVG than it would be to do the same for <canvas>.
- voidpointer 17y ago
  Adobe used to be behind SVG a lot before the acquisition of (referred to as the merger with) Macromedia.
- yason 17y ago
  You need a underlying accelerated 2D operations in both cases, like an implementation based on OpenVG. It's just that <canvas> has a shitload more momentum than SVG ever had.
- daleharvey 17y ago
  with flash being able to export to iphone apps and now canvas, I am guessing they have done more of the work necessary to uncouple the ide format from the swf format and that exporting to svg shouldnt be too hard either. webgl could be another candidate.
- Sephr 17y ago
  Event listeners would be much easier too. You can just add them to svg child nodes instead of doing your own logic on a canvas.
- briansmith 17y ago
  I found the answer in http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Spe.... The HTML5 Canvas support is just a Javascript-based interpreter for these FXG files, as you can see when they zoom in on the source code in the video.: "When initial work on an XML-based graphics interchange format began, the natural first thought was to use SVG. However, there are key differences between SVG and Flash Player's graphics capabilities. These include core differences in SVG and Flash's rendering model with regards to filters, transforms and text. Additionally, the interchange format needed to be able to support future Flash Player features, which would not necessarily map to SVG features. As such, the decision was made to go with a new interchange format, FXG, instead of having a non-standard implementation of SVG. FXG does borrow from SVG whenever possible. "It is important to note that this specification follows much of the SVG specification format organization as well as copying related concept prose. The SVG specification is available at http://www.w3.org/TR/SVG/. http://www.w3.org/TR/SVG/.
melling 17y ago
This is great. Now maybe if people can get as upset about Microsoft not better supporting HTML5, in particular the canvas tag. http://www.webmonkey.com/2010/03/internet-explorer-9-shows-up-faster-but-still-lacking/ http://www.webmonkey.com/2010/03/internet-explorer-9-shows-u... IE9 is a big improvement for Microsoft. However, if they included more support for HTML5, developers could get "all their wood behind one arrow."
- briansmith 17y ago
  Why do you need <canvas>, if you have a high-performance SVG implementation?
  - bd 17y ago
    Different use cases. It's like why there is a need for both Illustrator and Photoshop. SVG is great for vector graphics but for fast bitmap-based graphics you need <canvas>. You do not want to handle bitmaps where each pixel is an object.
    - briansmith 17y ago
      Besides some kind of interactive bitmap editor, where would someone need dynamic bitmap graphics that would be too much for a very fast SVG implementation but not too much for <canvas>?
      - bd 17y ago
        Whenever "vector look" is not what you aim for. One huge example is games - vast majority of games use bitmap graphics. Or if you want to do some pretty data visualizations like heatmaps. ---- Edit: Here are some examples showing what fast canvas bitmap graphics can do (and what would be very very hard to do with SVG): http://29a.ch/2010/3/24/normal-mapping-with-javascript-and-canvas-tag http://29a.ch/2010/3/24/normal-mapping-with-javascript-and-c... http://mrdoob.com/lab/javascript/effects/fire/01/ http://mrdoob.com/lab/javascript/effects/fire/01/ http://mrdoob.com/lab/javascript/effects/water/00/ http://mrdoob.com/lab/javascript/effects/water/00/ http://www.nihilogic.dk/labs/canvas_music_visualization/ http://www.nihilogic.dk/labs/canvas_music_visualization/ http://www.nihilogic.dk/labs/strange_attractors/ http://www.nihilogic.dk/labs/strange_attractors/ http://www.p01.org/releases/512b_jspongy/jspongy.htm http://www.p01.org/releases/512b_jspongy/jspongy.htm http://www.p01.org/releases/20_lines_hypno_trip_down_the_fractal_rug/ http://www.p01.org/releases/20_lines_hypno_trip_down_the_fra... http://www.p01.org/releases/20_lines_dynamic_hypnoglow/ http://www.p01.org/releases/20_lines_dynamic_hypnoglow/ http://www.ehkä.fi/ http://www.ehkä.fi/
lurch_mojoff 17y ago
Precisely this should have been Adobe's response to the lack of Flash plugin on some devices. Instead of all the FUD-ing, blaming, whining, and even insulting that has been going on recently, Adobe should have said in the very beginning - we are working on a better mobile version of the Flash plugin and wherever it is not available, but there is HTML5 support, you can use our authoring tools to do so-and-so.
elblanco 17y ago
Now this is exciting. We've been pining away for a while that there are no good authoring tools for canvas as good as the flash tools. Hopefully this just makes that problem disappear.
briansmith 17y ago
Did you notice that the demo was basically an animated banner ad? Think about what this means for ad-blockers. The nicest thing about Flash is that you can install Flashblock/Click2Flash and most animated advertising goes away. If Flash animated advertising turns into <canvas> animated advertising, how will we block it effectively? For many sites, disabling Javascript isn't a realistic option because they also use Javascript for useful functionality. The Flash CS5 IDE might generate easily-blockable HTML5 animations, but I expect that lots of tools will come out soon that will make it nearly impossible to automatically differentiate advertising from other content on the page. Who knows, this could be the beginning of the success of the "pay to get an ad-free experience" business model.
- wallflower 17y ago
  > If Flash animated advertising turns into <canvas> animated advertising, how will we block it effectively I think you would need to analyze which <canvas> elements are using Adobe's JavaScript library. This is more computation intensive then searching for Flash object embeds, and I think if you did it right - you could sell this plug-in.
  - camwest 17y ago
    To whom? Apple?
    - swolchok 17y ago
      I think that the grandparent meant that you could sell it to end users.
      - briansmith 17y ago
        No, I am saying that soon there will be easy-to-use tools for publishers to obfuscate ads, making ad-blockers much less effective. Consequently, "pay to turn off ads" website subscriptions will become somewhat more viable.
swombat 17y ago
What about Flex apps? Can those be exported to HTML5 too?
gb 17y ago
It looks to me like this only exports animation, which I can certainly see how it might be useful, but isn't really that exciting. The menu they ran the export from is all JSFL scripts (a way of automating operations in the Flash IDE to a certain extent) so they're probably just analysing the timeline and exporting the shape and animation data as JS. I don't expect to see any kind of Actionscript combined export any time soon though, performance is too much of a hurdle in the near future.
deleted 17y ago
[deleted]
bodhi 17y ago
It's not inconceivable that Adobe would then have motivation to contribute to existing open source renderers, so that the exported flash animations run faster. This would be a win/win situation for everyone! Or are my dreams too utopian?
- ordinathorreur 17y ago
  It's already happened, check out Tamarin: http://www.mozilla.org/projects/tamarin/ http://www.mozilla.org/projects/tamarin/

151 points by terrellm 17y ago

With this as an (awesome) reality, I can see Adobe Flash CS5 merely being an authoring tool for web animations and interactions. The end technology is largely irrelevant as long as most devices (mobile or otherwise) can access it. Adobe as an IDE only in the future?

watty 17y ago
Adobe does specialize in IDEs. They don't make money selling the Flash player but it was a requirement at the time because no other technology allowed them to create rich content. It'll be interesting to see if this works with advanced animations and games.
- jacobolus 17y ago
  Wait a sec. “At the time”, the company making Flash was called Macromedia. Adobe, at the same time, was investing in the open-specced (through W3C) SVG format, as output for its similar tools. But you’re right, both Macromedia and Adobe sold/sell tools, not platforms. (Frankly, SVG is still better than Canvas for many purposes; I hope someday Microsoft decides to implement some of it in IE.)
daleharvey 17y ago
exactly, this is what adobe (macromedia) should have done 10 years ago. Instead of trying to lock everyone to the swf format, become the best publishing tools for web content. better late than never.
- talklittle 17y ago
  I would think that from a business perspective, now is the perfect time for Adobe to make this move. 10 years ago and they would have tons of lost revenues from competing solutions. That is, locking people to a proprietary format worked hugely in their benefit in this case. Now as Flash is finally starting to see its last legs is a good time to change their focus.
- zyb09 17y ago
  Except this wasn't possible until very recently?
  - daleharvey 17y ago
    it would have been possible 10 years ago if swf was an open format and not a closed plugin.
    - wmf 17y ago
      Even if SWF was open, I doubt browsers would have implemented it since SWF doesn't really fit the spirit of the Web.
- reitzensteinm 17y ago
  They should have done it for the benefit of who? They had fantastic success locking everyone into the swf format. Sold a ton of very highly priced software. Got acquired by Adobe, probably in no small part due to this lock in. I'm completely in favour of web openness, and I'm personally stung by the SWF monopoly, but I find the assertion that Macromedia should have given up a huge part of their business advantage just to help general web openness ridiculous.

lsb 17y ago

HTML and Javascript are object code at last. As far as I can tell, people use Flash because the development tools are fantastic, not because they're married to the SWF output. This seems like the best of both worlds.

mcav 17y ago
I wouldn't describe the flash IDE as fantastic. The only reason it's passable is because it's really the only game in town. It's slow, its UI could use a lot of cleanup, and its code editor is particularly slow and lacking features (as compared to XCode or Visual Studio). I think people use Flash because it's the best (major) browser-targeted tool that handles animation design decently.
- aaronblohowiak 17y ago
  the IDE isn't fantastic, but Flex is actually one of the nicer UI frameworks. This could get really interesting for developing "thick" clients.
  - camwest 17y ago
    Flex definitely won't output to FXG. FXG is simply a declarative graphics specification. Don't expect ActionScript to port over to JavaScript reliably using this tool.
reitzensteinm 17y ago
Anecdotally at least I use an alternative non Adobe compiler to generate my SWF games. So for me the reach of the Flash player, and by extension the SWF format, is the most important thing. I consider the development tools to be poor if you're primarily writing code (and this includes Flex), but they seem great for editing simple animations visually.
- jxcole 17y ago
  I am a decent coder and I've always been interested in developing games. I am a big fan of your web-site and I think you really know what your doing. I would be really interested in the specifics of what types of development tools you use. Do you think you could provide links? Much appreciated!

wallflower 17y ago

I will reserve judgement until I see the HTML5 output, as generated code has a track record of being either a) unmaintainable, unmodifiable or b) doesn't work very well.

watty 17y ago
Good point. How easy will it be to edit the output to add the different browser "hacks" to make sure it renders similar across different browsers?
- deleted 17y ago
  [deleted]
- voidpointer 17y ago
  If you consider the output "object code" there would be no need to edit, let alone roundtrip. You don't edit the object-code or byte-code from your compiler either.
- elpuri 17y ago
  Naturally it's Adobe's job to handle the quirks when generating the output. I would be surprised, if forcing developers to edit generated code even crossed their minds. It just doesn't make any sense.
- wmf 17y ago
  At the SXSW Flash vs. Canvas panel it was mentioned that canvas has virtually no browser quirks; all browsers that implement it implement it correctly.
yason 17y ago
It can't be much worse than the bug-ridden Flash runtime which is horribly slow and has generations and generations of compatibility hacks trying to provide, except the 2D vector graphics, pretty much the same functionality as browsers and JavaScript do. This is a good thing: Adobe/Macromedia's expertise on the authoring tools combined with a good open platform instead of their proprietary backend. I have no complaints against the former, and if the latter will work out it's just a plain good move.

briansmith 17y ago

Wouldn't SVG be a much more natural target for Flash than <canvas> is? What is the benefit of <canvas> over SVG? It seems like it would be easier to do effective hardware acceleration for SVG than it would be to do the same for <canvas>.

voidpointer 17y ago
Adobe used to be behind SVG a lot before the acquisition of (referred to as the merger with) Macromedia.
yason 17y ago
You need a underlying accelerated 2D operations in both cases, like an implementation based on OpenVG. It's just that <canvas> has a shitload more momentum than SVG ever had.
daleharvey 17y ago
with flash being able to export to iphone apps and now canvas, I am guessing they have done more of the work necessary to uncouple the ide format from the swf format and that exporting to svg shouldnt be too hard either. webgl could be another candidate.
Sephr 17y ago
Event listeners would be much easier too. You can just add them to svg child nodes instead of doing your own logic on a canvas.
briansmith 17y ago
I found the answer in http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Spe.... The HTML5 Canvas support is just a Javascript-based interpreter for these FXG files, as you can see when they zoom in on the source code in the video.: "When initial work on an XML-based graphics interchange format began, the natural first thought was to use SVG. However, there are key differences between SVG and Flash Player's graphics capabilities. These include core differences in SVG and Flash's rendering model with regards to filters, transforms and text. Additionally, the interchange format needed to be able to support future Flash Player features, which would not necessarily map to SVG features. As such, the decision was made to go with a new interchange format, FXG, instead of having a non-standard implementation of SVG. FXG does borrow from SVG whenever possible. "It is important to note that this specification follows much of the SVG specification format organization as well as copying related concept prose. The SVG specification is available at http://www.w3.org/TR/SVG/. http://www.w3.org/TR/SVG/.

melling 17y ago

This is great. Now maybe if people can get as upset about Microsoft not better supporting HTML5, in particular the canvas tag. http://www.webmonkey.com/2010/03/internet-explorer-9-shows-up-faster-but-still-lacking/ http://www.webmonkey.com/2010/03/internet-explorer-9-shows-u... IE9 is a big improvement for Microsoft. However, if they included more support for HTML5, developers could get "all their wood behind one arrow."

briansmith 17y ago
Why do you need <canvas>, if you have a high-performance SVG implementation?
- bd 17y ago
  Different use cases. It's like why there is a need for both Illustrator and Photoshop. SVG is great for vector graphics but for fast bitmap-based graphics you need <canvas>. You do not want to handle bitmaps where each pixel is an object.
  - briansmith 17y ago
    Besides some kind of interactive bitmap editor, where would someone need dynamic bitmap graphics that would be too much for a very fast SVG implementation but not too much for <canvas>?
    - bd 17y ago
      Whenever "vector look" is not what you aim for. One huge example is games - vast majority of games use bitmap graphics. Or if you want to do some pretty data visualizations like heatmaps. ---- Edit: Here are some examples showing what fast canvas bitmap graphics can do (and what would be very very hard to do with SVG): http://29a.ch/2010/3/24/normal-mapping-with-javascript-and-canvas-tag http://29a.ch/2010/3/24/normal-mapping-with-javascript-and-c... http://mrdoob.com/lab/javascript/effects/fire/01/ http://mrdoob.com/lab/javascript/effects/fire/01/ http://mrdoob.com/lab/javascript/effects/water/00/ http://mrdoob.com/lab/javascript/effects/water/00/ http://www.nihilogic.dk/labs/canvas_music_visualization/ http://www.nihilogic.dk/labs/canvas_music_visualization/ http://www.nihilogic.dk/labs/strange_attractors/ http://www.nihilogic.dk/labs/strange_attractors/ http://www.p01.org/releases/512b_jspongy/jspongy.htm http://www.p01.org/releases/512b_jspongy/jspongy.htm http://www.p01.org/releases/20_lines_hypno_trip_down_the_fractal_rug/ http://www.p01.org/releases/20_lines_hypno_trip_down_the_fra... http://www.p01.org/releases/20_lines_dynamic_hypnoglow/ http://www.p01.org/releases/20_lines_dynamic_hypnoglow/ http://www.ehkä.fi/ http://www.ehkä.fi/

lurch_mojoff 17y ago

Precisely this should have been Adobe's response to the lack of Flash plugin on some devices. Instead of all the FUD-ing, blaming, whining, and even insulting that has been going on recently, Adobe should have said in the very beginning - we are working on a better mobile version of the Flash plugin and wherever it is not available, but there is HTML5 support, you can use our authoring tools to do so-and-so.

elblanco 17y ago

Now this is exciting. We've been pining away for a while that there are no good authoring tools for canvas as good as the flash tools. Hopefully this just makes that problem disappear.

briansmith 17y ago

Did you notice that the demo was basically an animated banner ad? Think about what this means for ad-blockers. The nicest thing about Flash is that you can install Flashblock/Click2Flash and most animated advertising goes away. If Flash animated advertising turns into <canvas> animated advertising, how will we block it effectively? For many sites, disabling Javascript isn't a realistic option because they also use Javascript for useful functionality. The Flash CS5 IDE might generate easily-blockable HTML5 animations, but I expect that lots of tools will come out soon that will make it nearly impossible to automatically differentiate advertising from other content on the page. Who knows, this could be the beginning of the success of the "pay to get an ad-free experience" business model.

wallflower 17y ago
> If Flash animated advertising turns into <canvas> animated advertising, how will we block it effectively I think you would need to analyze which <canvas> elements are using Adobe's JavaScript library. This is more computation intensive then searching for Flash object embeds, and I think if you did it right - you could sell this plug-in.
- camwest 17y ago
  To whom? Apple?
  - swolchok 17y ago
    I think that the grandparent meant that you could sell it to end users.
    - briansmith 17y ago
      No, I am saying that soon there will be easy-to-use tools for publishers to obfuscate ads, making ad-blockers much less effective. Consequently, "pay to turn off ads" website subscriptions will become somewhat more viable.

swombat 17y ago

What about Flex apps? Can those be exported to HTML5 too?

gb 17y ago

It looks to me like this only exports animation, which I can certainly see how it might be useful, but isn't really that exciting. The menu they ran the export from is all JSFL scripts (a way of automating operations in the Flash IDE to a certain extent) so they're probably just analysing the timeline and exporting the shape and animation data as JS. I don't expect to see any kind of Actionscript combined export any time soon though, performance is too much of a hurdle in the near future.

deleted 17y ago

[deleted]

bodhi 17y ago

It's not inconceivable that Adobe would then have motivation to contribute to existing open source renderers, so that the exported flash animations run faster. This would be a win/win situation for everyone! Or are my dreams too utopian?

ordinathorreur 17y ago
It's already happened, check out Tamarin: http://www.mozilla.org/projects/tamarin/ http://www.mozilla.org/projects/tamarin/