With the growing popularity of HTML5, the popular notion is that it will be the one to finally kill off Flash. Adobe it seems, has taken this threat quite lightly, and will in fact embrace HTML5 with its CS5 suite.
In a demo showcasing the kind of workflow you will be able to expect with Creative Suite 5, Adobe surprised the attendants by showing how well Dreamweaver worked with the new HTML5 canvas, and how easy it was to leverage the canvas in Dreamweaver to display content generated in other applications.
The three demos they showed featured Dreamweaver CS5, Flash CS5, and Illustrator CS5 where content from Flash and Illustrator was added to Dreamweaver with a workflow involving FXG (Flash XML Graphics). The best thing about the workflow they establish is that it keeps the content in a vector format, making it easier to manipulate and animate afterwards.
For those who haven’t heard of FXG, it is a new XML-based specification developed by Adobe for interchanging graphic data. They have been pushing the format with CS4 as an open means of interchanging data between different Adobe products, or even third-party products, as the specification is open and XML-based. It seems FXG will have an even bigger role in CS5, and in the Flash Platform.
The workflow described in the demos is as follows:
- A chart created in Illustrator CS5 needs to be inserted into a web page created in Dreamweaver.
Simply copy the chart which needs added to the web page.
In the code view in Dreamweaver CS5 select the element which will serve as a container for the vector content.
Run the Smart Paste command, and select the vector graphics option. And there you have it! Dreamweaver will automatically create an HTML5 canvas element for displaying the chart, create an FXG file which describes the vector content copied from Illustrator, and include a JavaScript file which renders the .fxg file on the canvas!
- In the same example above, if we wish to use dynamic data, or data defined in a different file.
Follow the same procedure as above, but instead of Smart Paste-ing the content as vector graphics, choose the Chart option.
This option asks for an FXG file containing the visual description of the chart, and an XML file containing the actual data. The illustrator file needs to be suitably labelled so that it can be bound to the same labels in an XML file.
Select an FXG file created from illustrator and an XML data file, and you’re done.
Dreamweaver will now automatically include a script to render the FXG file using the data from the XML file on a canvas element. - The most impressive workflow of all was the one between Flash and Dreamweaver using FXG. You have an animation created in Dreamweaver which you want to include in a web page.
Select the animation you wish to copy in Flash, and use the “Copy to HTML Canvas” command.
Again in the relevant element in Dreamweaver CS5, use the Smart Paste command, only this time selecting Animation.
Dreamweaver will automatically create a canvas element and include a JavaScript file which will render the animation described in FXG on the canvas element.
And there you have it! Animated content without Flash!
HTML5 has been as much the butt of jokes as it has been a shining light into the future, for everyone who says HTML5 will kill off Flash, there are many there to remind them that HTML5 is still years away, and who knows what Flash will become by then!
Including HTML5 in Dreamweaver CS5 only validates its purpose as an HTML editor. However making these workflows possible just shows that Adobe isn’t just including HTML5 as a specification, but intents to make full use of its functionalities, even if it means that some of it might replace features provided by their own tools.
Hats off to Adobe!
Here’s a video of the MAX session showcasing these amazing demos: