Adobe Creative Suite 6: The Scoop on Other CS6 Changes

This is the third part of a series about Adobe Creative Suite 6. Read about Photoshop CS6 changes and InDesign CS6 changes.

upgrade to adobe creative suite 6In Adobe Creative Suite 6, as with previous versions, Adobe has added an assortment of productivity and performance enhancements and other new features. This time, many of these tools are aimed at interactive designers who want to create content for tablets and smartphones. Here’s the scoop on what’s new in Dreamweaver, Illustrator, Flash Pro and Fireworks CS6.

Dreamweaver

Responsive web design refers to websites that automatically adapt themselves to the end-user’s device, be it a smartphone, tablet or desktop PC. Enabled in large part by the media queries feature in CSS3, it’s one of the hottest trends in web design. However, coding even a standard CSS layout can be a daunting task, let alone one that reconfigures itself for different screen sizes.

Fluid Grids

Dreamweaver CS6 addresses this problem in a big way with its new Fluid Grid Layout feature, which provides a set of visual tools that let you define layouts for each device. You do by inserting Fluid Grid Layout div tags that appear as containers that you can resize and position for each layout. For example, you can stack containers so they appear in a single column on a smartphone, but position them side-by-side when viewed on a tablet or desktop computer. As you build the layout, Dreamweaver automatically generates the necessary CSS code.

CSS3 Transitions

CSS3’s new Transitions feature lets web developers define properties that change over time. And so Dreamweaver has introduced a CSS3 Transitions panel that lets you create these transitions through a visual interface. For example, you can add properties that cause an element to move or change color when the mouse hovers over it. It’s a bit tricky to use, and you’ll want to view a tutorial to get the hang of it, but it’s much easier than coding the transitions by hand. It’s also pretty cool that you can do this in CSS rather than JavaScript.

jQuery Mobile

Dreamweaver CS5.5 added integration with jQuery Mobile, a set of software components for building mobile applications. The new version builds on this with a new jQuery Swatches panel that lets you apply built-in interface themes—or those you’ve created yourself—to these applications. The videos above show how this works.

Also new is enhanced support for PhoneGap, a software framework that enables creation of native applications for iOS and Android devices.

Illustrator

Performance Enhancements

Much of what’s new in Illustrator CS6 is under the hood. It’s now 64-bit native on Macs and Windows PCs, offering improved performance when running memory-intensive operations.

Interface Changes

Adobe has also revamped the user interface. As with Photoshop CS6, it now has a default dark-gray color theme, but you can revert to the previous light-gray theme via Preferences. One difference is that whereas Photoshop is limited to four color themes, Illustrator has a slider control that lets you select any shade of gray.

But the UI changes go much deeper than that—Adobe says it’s re-designed every panel and dialog box in the program. For example, you can now edit names of layers, brushes, swatches, symbols and other items from directly within panels. Font lists now display previews of the fonts. The Transform panel now gives you the option to scale strokes and effects as you’re transforming objects. And you can now make or release opacity masks from the Transparency panel.

Gradient Strokes

Pattern Creation

Beyond the UI and the improved performance, Adobe has added a handful of new features, including the ability to create gradient strokes and tools that make it much easier to create patterns.

Image Trace

Another big improvement is the new Image Trace panel, which replaces Live Trace for performing raster-to-vector conversion. If you use the maximum quality setting, it can be hard to distinguish the tracing from the original photograph, but you can also try different presets or tweak the simplified tracing controls to reduce the number of anchor points or colors.

Flash Professional

Flash has taken a bit of a beating over the past couple of years, as Apple refused to allow the Flash Player on the iPhone and iPad, and Adobe eventually pulled the plug on the Flash Player for Android devices. Flash is still widely used on many websites, particularly entertainment sites, but developers are increasingly turning to native apps or some combination of CSS3, HTML5 and JavaScript to recreate the Flash experience.

However, Flash Professional isn’t just a tool for authoring SWF content—it can also create applications based on Adobe’s AIR technology, which in turn can be packaged as native iOS or Android apps. And so with Flash Professional CS6, Adobe is placing more emphasis on the program’s ability to support other formats.

For example, Flash developers can now create AIR applications that incorporate the AIR runtime, meaning that end-users can run the apps even if they haven’t installed AIR. Developers can also take advantage of “native extensions,” which provide access to device-specific hardware functions. For example, a Flash developer can now write code that causes a smartphone to vibrate when a specified event occurs in a game.

For game developers, Flash Professional now has the ability to generate sprite sheets— bit-mapped image files containing the animations and symbols used in a game.

But if you’re a designer who uses Flash primarily as an animation tool, you’ll probably be more interested in the new Toolkit for JS. This is an extension that allows you to export Flash animations as JavaScript code inserted into an HTML5 document. It’s a free extension, but it’s not included in the basic installation—you’ll have to download it from Adobe’s website and install it using the Extension Manager.

Also new is the Simulator panel, which lets Flash developers test touch gestures and device motions they’ve incorporated into their projects. It replaces Device Central, the mobile device emulator that was also available for Photoshop and Illustrator. (Adobe is also offering an early look at a new application called Shadow that lets you preview web designs on mobile devices wirelessly connected to your computer).

Another casualty of CS6 is Flash Catalyst, a program introduced in CS5 that enabled designers without programming skills to create interactive Flash presentations. Adobe has ceased development, though company reps say it will continue to provide technical support.

Fireworks

Perhaps the coolest new feature in Adobe’s web graphics program Fireworks is CSS Code Extraction. You can use Fireworks to apply attributes such as gradient fills, stroke colors and rounded corners to an object. The program then generates the CSS code needed to replicate those attributes.

Another big time-saver is the ability to generate CSS sprites. This is a popular technique for generating navigation elements with rollover effects. The old clunky way was to use image slices and JavaScript. With CSS sprites, you create a single file containing your rollover states, then use the CSS background-position property to control which state is shown to the user. In Fireworks CS6, you can now export slices as a sprite image, along with the corresponding CSS code.

Also new is the ability to create and modify themes used in jQuery Mobile, making it easier to create new looks for mobile applications.

Fireworks CS6 also provides a number of productivity enhancements for working with colors, gradients and patterns.

More great resources for web designers:

COMMENT