Check out this demo of Illustrator handing vector art to Dreamweaver, and DW binding the artwork to data so that it can be displayed via the HTML5 CANVAS tag:
Mordy Golding summarizes the demo as follows:
[The engineer] starts by taking art drawn in Illustrator and copies it to the clipboard. Then he goes into Dreamweaver, selects a DIV and chooses a function called Smart Paste. Dreamweaver then pastes an FXG conversion of the Illustrator art directly into the page. If you aren’t familiar with FXG, it’s basically a better SVG* (you can get more information on the open source FXG spec here). In other words, you draw in Illustrator, copy and paste into Dreamweaver (which converts it to code), and the art displays as vector art in a web browser. What’s more, the engineer proceeded to actually bind XML data to the chart.
After that, the presenter copies an animation in Flash Professional as XML, then pastes it in DW as a CANVAS animation.
It’s kind of funny to see this demo now, as Illustrator could export XML vector graphics (SVG) to the Web some 10 years ago. Later people made various efforts to display & manipulate SVG using Flash. This new demo uses different tools & a different display engine to do similar things.
I think this is a key point: Adobe makes money selling tools, not distributing viewing software. Those tools must address customer needs. If Flash Player is the right choice for some projects & HTML/CANVAS for others, no problem: we get paid to help you solve problems, not to force one implementation vs. another.
* I have no idea whether FXG is “better” than SVG overall & don’t want to get into a debate on that subject. FXG is based on SVG but maps more closely to the Flash drawing model.
Postscript: Life keeps spinning in circles for me: I gave up Web design/development in 2000 to come work on an SVG animation tool called LiveMotion. To gain traction (and actually solve customer problems) in the short term we exported Flash SWFs. We never turned on SVG export because the Adobe SVG plug-in was too slow, and of course browsers didn’t offer support. Later Adobe paid $3.6 billion for Macromedia, and now Flash is emitting an SVG-like substance (FXG). And around and around we go.
For me, though, it’s never been so much about *how* things get done, so much as *what* gets done. I just want to express myself, and I don’t care so much whether that means Flash or HTML, VHS or Beta. The fact that I’m a product manager is just an implementation detail: I’m still the guy just trying to make the software he himself wants to use. –J.
Yeah, this was a cool demo!
Around 2005 or so I realized that to make pro-end web pages, I must give up dreamweaver and use a text app (no confusingly wrong wysiwyg or strange sudden-scroll-to-the-top-of-the-page occurrences, etc. in text files). For me, Dreamweaver is only good for taking apart legacy tables.
It looks like this FXG stuff can be edited via text — is that correct? Or does one absolutely need the smart paste button?
(By the way, LiveMotion c.2000 is still more usable than Flash CS4.)
I should have qualified my “FXG is better” statement, considering it doesn’t answer “better at WHAT?”. I meant better regarding support within Adobe apps. Illustrator already supports the format, as does Flash Catalyst/Builder – and it’s the format that AI and FC use to communicate with each other via the round trip functionality. One can imagine that the word FXG will start appearing in more places and more apps as well.
jimhere, yes, FXG can be edited via text – in fact today, in Illustrator CS4, you can choose to Save As FXG and click the View Code button if you want to copy and paste it manually into DW or any text editor.
Thanks for clarifying!
Supporting canvas is awesome. I appreciate Adobe for doing this.
yeah, you get paid to make tools. why use 1 when 3 (or more) will do?
jesus h christ! the future is proliferation of more adobe tools with worse integration at every step! just show me the fxg or whatever it is and get the hell out of the way.
and oh yeah, is photoshop cs5 going to go 64 bit (don’t your colleagues over at premiere and ae listen to you, and how worthless 64 bit is before they go all exclusive on you?)
Just found this blogpost, so hope my comment isn’t too late to get noticed.
Any chance of a better demo video? The motion in this one makes me queasy, and the sound quality so bad that it’s almost inaudible. (Or do you have subtitles/ captions?)
If SVG is good enough Adobe should use SVG. If it’s not they should help make it better. Proprietary file formats are so last millennium.
That said, this is absolutely the right direction – Flash (the plugin) needs to die for Flash (the IDE) to live.
I’m one of the harshest critics of Flash (the plugin) there is, for a myriad reasons, but if Flash (the IDE) were to default to open formats (HTML5’s canvas, SVG, etc.) then I would fast become its #1 fan…
Sam
FYI It looks like they removed this feature in the shipping version of CS5.
[Technically it wasn’t removed as it was always prototype code, but you’re correct that these capabilities aren’t in the box with CS5. To everyone listening: If they’re something you or others would value, please speak up so that the teams involved can make the appropriate trade-offs. –J.]
I was really looking forward to seeing this feature in cs5 but I guess no luck as this seems to be just for the show. I feel misguided and I’m disappointed.
How do I “speak up”? What is the best method? I really would like to have these features…
I think Adobe really need this feature to stay in the game. Just beacause you have almost no competition doesn’t mean you can stop evolving.
This feature is awesome. Today I installed the CS5 Flash and Dreanweaver trials. The download took ages. Very disappointing that it’s not included. I hope this feature is released soon.