Adobe DreamWeaver CS5 and Illustrator CS5 integration

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 Adobe CS5 suite.

In a demo showcasing the kind of workflow you will be able to expect with Adobe 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 Adobe Dreamweaver CS5, Adobe Flash CS5, and Adobe 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 Adobe CS5, and in the Flash Platform.

The workflow described in the demos is as follows:

A chart created in Adobe 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 Adobe 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 Adobe 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 Adobe 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.

Share


27 Responses to “Adobe DreamWeaver CS5 and Illustrator CS5 integration”

  1. Ant says:

    If Dreamweaver CS5 will support CSS3 gradients, shadows, and transition, I might consider it as my second tool for coding.

    Current score: 0
  2. ADS says:

    I use Dreamweaver to create web sites and have not had any problems, I see these updates with optimism and they make it possible to make Web sites more advanced and based on the best programming standards.

    Current score: 0
  3. Hello says:

    Is an upgrade really necessary??
    I think DW CS4 works great for me :-) he he

    Current score: 0
  4. David Hoe says:

    Will DW CS5 include HTML5′s new tags and CSS3 new properties in the code hints?

    If it does I will probably purchase!

    Current score: 0
  5. ADOBEslave says:

    Really nice to watch ADOBE follow that global HTML5 shift while neglecting to fix the bugs that brought their initially brilliant FLASH into trouble. I recognize the same pattern they exhibited with mentoring Acrobat which plagues administrators with buggy network-account behaviour (organizer-database: a nightmare) for at least 3 generations of Acrobat now and users with broken update-functionalities (Acrobat 9.3.1 can’t get installed without reinstalling Acrobat 9 from scratch, and of course the promised fix from Adobe does NOT work.

    I really would appreciate they would start to fix long time bugs in Dreamweaver (MAC at least: HTML-copy from Firefox still doesn’t work, still can’t start Dreamweaver by doubleclicking a dreamweaver-file, styling tables still cumbersome, still hate that interface cluttered into palettes, and so on …) prior to involve new bugs with new features.

    I really dream of a time when i can live without that crappy software…

    Current score: 0
  6. Emmanuel says:

    I hope adobe will consider integrating JQuery with dreamweaver cs5. Adding custom JQuery that will do things people usually do. e.g made a div slide down on fired event, make a modal dialog box with a div, like the alert box with grey out bg etc.

    Current score: 0
  7. Rob A. says:

    Agree with ANT, the lack of gradients, shadows, and other basics is disappointing. If they add CSS3 support it will be significant.

    Even Microslop WPF can do that … but WPF has extremely poor performance (almost not viable) with no acceleration support.

    What I don’t want to see is yet another “new technology” to add more bloat to client browsers. Microsoft keep doing that and fail miserably.

    Current score: 0
  8. Darrel says:

    I can hardly understand a word the speaker says. Could you add subtitles?

    Current score: 0
  9. çeviri says:

    I am eagerly waiting for dw cs5

    Current score: 0
  10. peakseolab says:

    it was said that cs5 can support joomla and the othere cms deisng,is it really?

    Current score: 0
  11. Butch Bush says:

    Can’t Adobe find someone who can A-R-T-I-C-U-L-A-T-E in fluent english? :-/
    DO A FRESH VOICE OVER OR SOMETHING, mainly DO SOMETHING!
    If the sound track on this video reflects what CS5 is, we can safely conclude that it’s pure crap.
    WILL ADOBE EVER DEBUG PRIOR VERSIONS OF IT’S PRODUCTS BEFORE EVEN THINKING OF MOVING ON TO CS5?

    Current score: 0
  12. tazmikella says:

    One product to go and our entire pipeline will be Adobe free! For the last 5 years our studio has been showing Adobe products the door and what a difference it has made! Unfortunately there isn’t yet a viable pro alternative for Photoshop. But that day is coming!

    Current score: 0
  13. Studiostefan says:

    This looks like fun additions. :)

    And I didn’t have any problems understanding every word sait. ;)

    Current score: 0
  14. Studiostefan says:

    (said) B)

    Current score: 0
  15. dezign says:

    You (likely tech challenged “designer”) who are moaning about not hearing video because of the Adobe speaker – DUH!! if you plan on being in the digital MEDIA industry get a BASIC understanding of MEDIA technology (your TOOLS!) – 1. extremely noisy presentation hall acoustics & sound system are echoing extremely badly 2. recorded using a consumer hand-held, using only the cheesy, built-in camera mic in that noisy echoing hall with people yakking loudly around it.
    3. bandwidth is compressed/reduced for YouTube
    4. you’re probably listening on tiny tinny laptop/computer speakers… need I say more?
    – blame it on the speaker??? Get a Media Technology education!

    Current score: 0
  16. Michael says:

    Why would you need html 5 and css3 in the new dreamweaver cs5?????

    I mean these are things you should be able to do on your own with limited experience and easier then ever.

    Better integration with other cs products is the real winner, and 3rd party integration support would be a plus e.g Codelobster

    Current score: 0
  17. Seattle SEO says:

    I really look forward to CS5. I personally like and dislike dreamweaver in CS4. It is a decent development tool but has poor manageability when it comes to things like PHP code.

    However it does render sites moderatelly well. I have noticed some discrepancies at times when switching between design and live view.

    While Zend works better for my larger projects when it comes to simple PHP code I still prefer dreamweaver.

    Current score: 0
  18. Johnny says:

    Why dont you simplify few things:
    1.For the web – need the sketch at paper.
    2.Second – in few steps create in DW 6 pages.
    3.And – than -integrations problem with a Flash?!
    4.How to make a whole WEB in FLASH?!Where I can find really someone with a just a bit of
    brain to answer that?!Tutorials?!Thats bla..bla..bla..dont understand anything,you are in the ‘magic wheel’ running arround….
    5.PROCCESS is IMPORTANT!Explanation in SHORT way,INTERNATIONALY UNDERSTANDIBLE TO ALL,and the picture talks a thousands words.From a different aspects, show few different videos about creation real pages with a video, with a carroussel galery,rollover pictures.
    6.Thats how I see CS

    Current score: 0
  19. ccthien says:

    Why I can not see “Copy to HTML canvas” menu on Flash Professional CS5 like it on this demo?

    Current score: 0
  20. Artzy66 says:

    @AdobeSlave:

    You said “… still can’t start Dreamweaver by doubleclicking a dreamweaver-file”

    What? Are you using CS4… I have no problem opening DwCS4 by double-clicking a Dw file

    As far as some of the other comments here go, I just completed a 40-page website, and all I’ll say is I LOVE DREAMWEAVER

    Current score: 0
  21. ccthien says:

    Is there any sample website used this?

    Current score: 0
  22. Im going to get lunch.

    Current score: 0
  23. Brian McCarthy says:

    Hello all, back surgery has forced me into a career change because travel is a problem and need to work from home. Thinking seriously of learning web design. I’m not technical at all and although DwCS5 seems to have great reviews, as a complete novice it looks very hard to understand. I’m really keen to learn but can anyone tell me if I am being way too ambitious expecting to be able to start learning web design from scratch using CS5?
    Thanks Brian

    Current score: 0
  24. ankur says:

    Hi,

    I have downloaded CS5 web suite trial version. but not able to find this both command
    1) copy to HTML canvas(Flash CS5)
    2) smart paste(Dreamweaver CS5)

    anybody know where to download this commands?

    Thanks

    Current score: 0
  25. Des says:

    All this talk of HTML 5… most people are still browsing with old browsers!

    Current score: 0
  26. uk says:

    RELATED FILES

    Dreamweaver CS5 is totted for being excellent to develop WordPress sites, but you open a wordpress site in live view….the related files are all wrong. It tries to select them from the wrong local folder, so it renders the facility useless.

    Take for example you are working on site 1 in your site definitions and you also have site 2 in your list

    Go to live view http://www.domain.com/blog for site 1 and live view that page
    It shows the related files, but some are wronga nd don’t even apply to that site, for other it tries to say all the related css files etc are all in the folder on your hard drive for site 2 in the site definitions!!

    This is extremely annoying because when you try to edit the css file so you can view the cange in live view “file doesn’t exist”… well no, because its looking in the wrong place.

    THIS IS THE SECOND MAJOR FLAW AND RENDERS THE WHOLE WORDPRESS, DRUPAL DEVELOPMENT SIDE OF DREAMWEAVER USELESS UNTIL FIXED.

    Current score: 0
  27. WebPaws says:

    I have been building websites using the Adobe Suites for many years now, have not tried 5, but the several suite versions I have used have been very powerful and impressive. My clients are always impressed (my sites are custom built to their requirements) and get results (because of my built in SEO work). I highly recommend the the Adobe Creative Suite packages to anyone serious about building and maintaining hundreds of websites on an ongoing basis. Every version increase has an increase in apps/power/control saving much time compared to using notepad or lower end XHTML editor.

    Current score: 0

Leave a Reply


9 - = seven