Flash CS5 will export to HTML5 Canvas | Hacker News Reader

Flash CS5 will export to HTML5 Canvas

9to5mac.com

151 pointsterrellm52 comments

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.

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.

the IDE isn't fantastic, but Flex is actually one of the nicer UI frameworks. This could get really interesting for developing "thick" clients.

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.

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.

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!

Hey, glad you like my games!

I'm using Haxe with FlashDevelop currently, which you can find at:

http://haxe.org/ http://www.flashdevelop.org/wikidocs/index.php?title=Main_Pa...

Everything else I've written in house, so that's about all there is to it. If you have any further questions, my email is in my profile...

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?

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.

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.)

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.

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.

Except this wasn't possible until very recently?

it would have been possible 10 years ago if swf was an open format and not a closed plugin.

Even if SWF was open, I doubt browsers would have implemented it since SWF doesn't really fit the spirit of the Web.

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.

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>.

Adobe used to be behind SVG a lot before the acquisition of (referred to as the merger with) Macromedia.

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.

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.

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.

I found the answer in 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/.

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-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."

Why do you need <canvas>, if you have a high-performance SVG implementation?

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.

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>?

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-c...

http://mrdoob.com/lab/javascript/effects/fire/01/

http://mrdoob.com/lab/javascript/effects/water/00/

http://www.nihilogic.dk/labs/canvas_music_visualization/

http://www.nihilogic.dk/labs/strange_attractors/

http://www.p01.org/releases/512b_jspongy/jspongy.htm

http://www.p01.org/releases/20_lines_hypno_trip_down_the_fra...

http://www.p01.org/releases/20_lines_dynamic_hypnoglow/

http://www.ehkä.fi/

Flash isn't bitmap-based though. SVG is more like Flash in so many more ways that would make the implementation easier and better (scalability, for example).

Flash can do both vector and bitmap graphics (which is BTW much faster than current canvas implementations, even in fast browsers like Chrome [1]).

Adobe used canvas probably because you can redo vector graphics with a decent performance in canvas, while it doesn't work the other way around.

Flash exporter to SVG could be marginally better for vector parts of what Flash can do, but it would lose all bitmap capabilities, while Flash exporter to canvas can potentially replicate everything what Flash can do.

----

[1] Flash bitmap graphics is fast enough to do pretty decent full-screen 3d graphics with textures and shading:

http://away3d.com/

http://dailypv3d.wordpress.com/

Flash is vector based for the most part, but a few versions back they added objects that deal with bitmaps the traditional way, it works pretty well. But on the other hand, why bother with the vector stage at all? The image will have to be rasterised before being displayed anyway, so what difference does it make whether you have a bitmap surface you can draw bezier curves on, or a vector environment that ends up as a bitmap?

An aside, bizzarely I find it's often faster to redraw some graphics "vector style" (calling the lineTo/bezierCurveTo etc methods again) on canvas than it is to use drawImage and use a cached version of the same graphics.

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.

> 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.

To whom? Apple?

I think that the grandparent meant that you could sell it to end users.

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.

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.

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.

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.

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?

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.

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.

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.

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.

Looking at the code from the video, it looks like they're just putting out an FXG file (http://en.wikipedia.org/wiki/FXG) and have a JS library to read that format and execute it on the canvas. This is actually very interesting because then the Flash plugin is really just boiled down to a Javascript library (which some folks have already done before with the SWF format).

Combined with HTML5 <video> and <audio> elements, there's really only webcam and cursor access that I can think of missing in this kind of implementation. Cool!

It doesn't matter what the generated code looks like because you will only edit it in the Flash IDE. In fact, its users want it be completely obfuscated for performance reasons and to make reverse-engineering annoying.

It'll matter if it's slow, bloated and buggy.

If that's the case, you wouldn't use it in the first place, regardless of if it's unmaintainable or unmodifiable.

Good point. I think Flash developers will be more keen to use CS5's new export feature if there is a poor chance of reverse-engineering or modifying the exposed HTML5 code.

The FXG format basically describes the layout to pixel precision. Anyone using the HTML5 export would have to be willing to expose their layout secrets.

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.

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?

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

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

Reply on news.ycombinator.com