Channels ▼

Web Development

Adobe Creative Suite 5: A Developer's Perspective

Adobe Dreamweaver

Dreamweaver has become the standard by which all other designer-friendly HTML editors are judged. Its ability to split code and representational rendered views dynamically with real-time changes in either has accelerated the creation of many elegant web pages around the world. The built-in site management tools make it easy to connect and synchronize local and remote files, and its support for PHP and ASP make developing the presentation layer for dynamic, database-driven content a far simpler affair compared to a hand-coded alternative. With Adobe's release of the Dreamweaver CS5 11.0.3 update, new HTML5 and CSS3 features are supported in the code hinting and live view rendering among other areas. For sites driven by popular content management systems like WordPress, Joomla and Drupal, Dreamwaever CS5 has integrated a Discover function that auto-detects the dependencies of a page and allows developers to edit these files directly within the Dreamweaver environment.

Also new in this release is a new web service called Adobe BrowserLab that provides comparative views of rendering designed pages in different browsers. This is a terrific addition that greatly minimizes the hassle of having to maintain different computer operating systems loaded with a variety of different browsers and versions, since Adobe can handle this for you as part of the Dreamwaever CS5 package. The only missing feature I have been waiting for is Adobe extending official Dreamweaver support to other popular web frameworks such as Django and Ruby on Rails. While third-party extensions can be downloaded to account syntax highlighting, its not baked into the product. Given the rising popularity of these frameworks (especially Ruby on Rails), its surprises me that Adobe hasn't attempted to give TextMate a run for its money. Perhaps Adobe will reconsider providing such support in the next Dreamweaver release.

[Click image to view at full size]
Figure 7: Adobe Dreameweaver CS5 brings many new features to an already mature product.

Adobe Fireworks is a web developer-friendly image editor geared toward web page graphics. It works in tandem with Dreamweaver for placement of image behaviors (rollovers, fade-outs) and maps (hotspots, actions) and can bounce code into and out of Dreamweaver for a more integrated web page construction and design experience. While it's essentially a raster image editor and can be somewhat redundant compared to Photoshop, its web-centric features for image optimization for GIF, JPEG and PNG formats, transparency masks and tight Dreamweaver integration demonstrate why it remains a standalone product within the suite. Tighter integration with other CS5 applications, especially Flash and Device Central, further elevate Fireworks as a prototyping tool for mobile device-bound Flash content.

[Click image to view at full size]
Figure 8: Adobe Fireworks CS5 is the Photoshop of web developers.

Adobe Flash Catalyst is an application that attempts to put the power of programming Flash portfolios into the hands of graphic designers. In other words, instead of handing off a number of graphic assets to a developer or learning the intricacies of ActionScript, Flash Catalyst automatically generates Flash scripts and harnesses to contain and play back the compiled imagery without the designer having to write a line of code. It works pretty well as long as designers stay within the bounds of the templates that Catalyst provides. Embedded video playback, simple button press triggers and a host of visual transitions can be easily created. Catalyst struck me as a targeted version of Adobe Captivate, one of the few Adobe creative products not included in the Master Collection. However, if the need is more interactivity, designers will either have to learn ActionScript or call upon someone who already knows the language for assistance. Beyond the simple portfolio sites, I can see Catalyst being used for prototyping and canned demos that help refine customer requirements. Once the specifics have been targeted, media assets can be migrated into the Flash Professional environment for expanded interactivity.

[Click image to view at full size]
Figure 9: Adobe Flash Catalyst leverages the power of Flash without having to write a line of code.

Adobe Flash Professional takes Flash development further. Whether you love, hate or are indifferent, Flash has been and will remain a mainstay on the web for years to come. And with Adobe's aggressive push to have their player resident on as many mobile devices as possible, the format will pervade the mobile web as well. Religious battle lines are being drawn between Flash and HTML5, but the reality is that both will co-exist because they can. And until an HTML5 design tools comes along that can replicate the ease of animation builds and event triggers that Flash Professional delivers, the Flash format will remain a prominent option for all but the most ardent of HTML5 supporters.

[Click image to view at full size]
Figure 10: Adobe Flash Professional CS5 adds a new code snippets panel that greatly accelerates development.

Included in the CS5 release of Flash Professional is the ability to export Flash applications to Apple's iOS platform. This was a contentious features due to Apple's surprise announcement earlier this year of only allowing native Objective-C applications for sale in their App Store. However, with Apple's recent reversal of this decision, the Adobe's Packager for iPhone features puts Flash to iPhone conversion option back in action. The ability to export to Apple's .ipa application bundle works equally well on either Mac or PC, but developers still require an Apple iOS developer subscription at a minimum to obtain the signing keys necessary to deploy and test the packaged application on an iPhone. Even so, this is a great boon for developers who have a catalog of Flash applications seeking to further monetize their past work on a platform of voracious app-hungry customers willing to pay for the privilege of running Flash-based apps on their iOS devices. Perhaps future versions of Flash Professional will have the one-step 'publish to App Store' dialog box that many Flash developers had hoped for when the export to iPhone feature was originally announced.

Another welcome improvement in the CS5 release of Flash Professional is a decent ActionScript editor. Previous versions have had an editor that was less than optimal. I know several developers who opted to write and manage their ActionScript code in a separate text editor like TextMate rather than deal with the slow, awkward and unfriendly editor in Flash. Fortunately, the CS5 version offers enough incentive to invite those developers back for a second look. While not perfect, the editor has features like code completion and hinting that most other IDE's take for granted. It's good to see Adobe taking the code editor more seriously. Another new feature in Flash Pro CS5 is the text engine, that works like text frames in InDesign. Once text boxes are linked, text flows between the two the way it does in InDesign or many other page layout programs. It's a small addition that will make many developers and page designers happy, knowing that they won't have to play the careful cut and paste game between text boxes when content changes occur.

[Click image to view at full size]
Figure 11: Adobe Flash Builder is an Eclipse-based IDE optimized for Flex-based Rich Internet Application development.

Adobe Flash Builder 4 Standard, the most code-centric developer tool included in the Master Collection, is the application that will most likely receive Flash and Flex developer's majority of attention. This Eclipse-based IDE retooled for Adobe Integrated Runtime (AIR), Flex and Flash application construction bridges the gap between design-centric Flash Professional and developer-centric models and controllers. Originally called Flex Builder, the name change to Flash Builder 4 shows Adobe's refocus on the Flash brand.

In addition to tighter integration with the other members of the Flash family (ex: Flash Catalyst presentations can be easily imported into the Flash Builder environment for additional code editing and application development needs, Fireworks, Illustrator and Photoshop file imports, etc.), Flash and Flex developers finally get a decent debugging environment with all the features one would expect from a modern-day IDE debugging experience such as conditional breakpoints, expression evaluation, watchpoints and so on. Yet another addition to this release is the ability to introspect and bind exposed REST, SOAP, PHP, ColdFusion and Java web services to user interface elements. This makes data-driven RIA construction much easier to build and debug.


Adobe Master Collection is the Microsoft Office Ultimate Edition for creative professionals and the workflow experts and developers who team with this market. Learning the full functionality of every application in the box could take many months, and mastering each nuance of the Master Collection could take years. Fortunately, developers will be able to become immediately productive with the suite's unified scripting interface, its developer-centric web tools and its vast yet highly accessible feature set organized for creativity and rapid gains in workflow efficiencies. And because the scripting and user interfaces are identical on Mac or Windows, complex workflows can bridge across platforms, making CS5 scripts versatile and less prone to any specific OS dependencies.

Considering how much time would be necessary for even trained design professionals to master the Master Collection, application developers already spending a majority of their time on code may never have the opportunity to fully appreciate the hundreds of nuances found throughout the suite. But with the assurance that nearly every modern day audiovisual design need can be capably satisfied along with the fact that many CS5 applications can be further manipulated by code, Adobe Creative Suite Master Collection delivers the motherload of graphic design tools that can all be used in the compilation of an incredible Adobe Flash, Flex or AIR experience.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.