Blogcritics The critical lens on today's culture & entertainment
This is the seventh of a series of reviews that will cover what is contained in the Adobe CS6 Master Collection. Adobe releases CS6 with four separate suites of products. They are Design Standard, Design & Web Premium, Production Premium, Master Collection. Add to that, they also have the Creative Cloud – a subscription based suite that gives you access to all of the individual products for a $49.99 per month subscription fee. You can go online to compare what is contained in each version. The goal of this series is to define what each product does and provide information of what the new version brings to the table.
Adobe Dreamweaver CS6
Adobe Dreamweaver CS6, a hybrid based web development software application that was originally developed and distributed by Macromedia. It was acquired by Adobe in 2005, and it is available for both the Mac and Windows operating systems.
As a hybrid, Adobe Dreamweaver CS6 is both a WYSIWYG editor that allows you to see the results of what you are developing before having to publish to your website as well as a code-based editor that lets you hand code your sites as well. The goal of Dreamweaver is to provide an intuitive visual interface for making and editing standards based websites and applications for desktops, smartphones, and tablets.
So what is new with Dreamweaver CS6?
• Fluid grid layout – starter templates are introduced in CS6 to help you create adaptable layouts for pages using a versatile multi-column design grid. This way you can visually construct fluid grid layouts in Design view and then use CSS3 authoring tools to enhance your design. By generating adaptive, scaling layouts, you avoid the issues that can occur when attempting to display fixed-width layouts across a wide variety of screens. This way, when you preview designs, the pages resize, as do the page regions (including inserted images) and scale to fit the available screen area.
• Multiscreen previews – enable you to view three different screen sizes and run your HTML5 and CSS3 code in real time. This updated functionality allows you to quickly and easily preview your designs for smartphones, tablets, and computer screens—all at the same time. You can also preview custom screen sizes and test the behavior of HTML5 and CSS3 code for each device. The new support for HTML5 and the updated Multiscreen Preview panel can help you create websites and web applications using the latest technologies as well as giving you the ability to build mobile apps and configure them to display separate CSS3 style sheets for each device.
• JQuery mobile themes – provides a new level of support for mobile app development. Updates to the Dreamweaver user interface include the ability to preview and apply themes and attributes to your designs to help you be more productive as you design and develop applications for mobile devices.
• PhoneGap build integration – lets you easily package native mobile apps for Android, iOS, Blackberry, WebOS, and Symbian platforms. With the newly updated PhoneGap support in Dreamweaver CS6, all the hassle of configuring local device IDEs and development tools is a thing of the past. You can author HTML5, CSS3, and JavaScript-based applications and let the PhoneGap Build service handle building the applications. Use your existing web development skills, graphic files, and media assets—there’s no need to learn how to use a new development model.
• Revised Live view – provides you with more accurate renderings of HTML5 and CSS3 code. The latest version of Live view enables you to preview and manage your web and mobile projects to ensure they display as expected. Live view makes it easy to test real-time rendering of your code and JavaScript. You can preview HTML5 video content as well as other rich media.
• CSS3 translations – are accessible through the new CSS3 Transition panel that enables you to visually create smooth animation effects and color fades between two CSS states without writing any code. Using the panel, you can target any CSS selector (including custom classes and IDs) and create transitions that morph between any changes of a CSS property.
Dreamweaver CS6 is a good solid upgrade with the addition of further enhancements to HTML 5 and CSS3 technologies, the jQuery mobile elements, the ability to improve on the interactions with a wide variety of devices including smartphones, tablets, and desktop computers, and the addition of PhoneGap, make this a very worthy upgrade.
Adobe Fireworks CS6
Adobe Fireworks CS6 is an environment for creating and optimizing vector and bitmap images, themes, content, comps, wireframes, mockups, and more—all with high quality and small file size. It contains a set of easy-to-use tools that will speed up and benefit your workflow for today’s web and mobile design.
Being positioned as the tool to prototype website and web applications, now you can use it to do the graphic design and layout that goes into creating a website before it gets into Dreamweaver. The fact that it has been a part of the Dreamweaver workflow for so long is what makes it a reliable companion.
So what is new with Fireworks CS6?
• JQuery Mobile – with support for mobile themes makes it possible to apply a complete unified visual design theme to mobile sites and applications. You can quickly create visual textures and rich designs with jQuery Mobile in Fireworks CS6. For example, the jQuery Mobile themes include multiple color variations. Each color variation consists of a header bar, content body, and button states that you can freely mix and match. These open-ended themes support up to 26 unique options per theme, which adds up to an almost unlimited variety for your designs.
• CSS Sprites – help you stay current with the latest HTML5 innovations and standards. Even more importantly, CSS sprites can help you improve performance and loading time for web pages and mobile apps to boost customer satisfaction and the overall user experience. In Fireworks CS6, you can simultaneously export both the CSS code and corresponding sprite image for your web page.
• CSS Properties panel – lets you can automatically extract the CSS code from the image—all within Fireworks to save time and increase accuracy. CSS sprites can boost performance by caching the image locally so that it is physically placed in your file only once, but can be called multiple times in the code. No matter how many times you use the image in the design, it always refers back to the one original instance, resulting in smaller page sizes and through this improved performance means that your web and mobile pages load quicker and open faster.
• Fast access to color – as well as an improved color swatch means that squeeze every bit of time out your workflow so you can get back to optimizing your designs and interactive content for mobile, web, and desktop devices.
While Fireworks has long been a companion to Dreamweaver, I think it sometimes gets lost between Photoshop and Illustrator. The commitment of resources doesn’t seem have been applied to this version and so, at least to me, there is not a lot of freshness – in fact even in the interface, there are a lot of left over remnants of the Macromedia days. I would say that if you are a user of Fireworks, and especially if it comes as a part of the one of the suites, then the upgrade is worth it, otherwise, Photoshop may still be the better answer.
Adobe Flash Professional CS6
Adobe Flash CS6 Professional is the multimedia authoring program that can be used to create Web applications, games, movies, as well as content for mobile phones and other embedded devices. Adobe Flash CS6 Professional is geared for interactive designers, Web designers, graphic designers, and motion graphics designers and video editors.
As the flagship product for designing and developing content for the Adobe Flash platform it is an integral part of many of the Adobe Creative Suites. Flash Professional provides a comprehensive toolset for design for web, mobile, and video workflows.
So what is new with Flash CS6 Professional?
• Wide platform – and device support means that you can extend your reach to devices that run on Android and iOS platforms by targeting the Adobe AIR 3.2 runtime on devices such as desktop computers, mobile devices, tables, and Internet-enabled televisions.
• Sprite sheet generation – gives you the ability to put multiple frames of one or more animations and symbols and combine it with a separate data file that contains all of the coordinates of each of the states. Through the use of these Sprite sheets, a browser or a game can load a single image and simply use the coordinates in the data file to show the specific state that is needed instead of loading these clips one at a time. Until now, you might generate your own sprite sheets manually, but with Flash Professional CS6, you can easily combine multiple symbols and animation sequences into a single optimized sprite sheet. Flash Professional CS6 generates the sprite sheet as well as the data file that contains the coordinates of each of the individual image states.
• Prepackaged AIR app creation – means that you can create and deliver applications with a prepackaged Adobe AIR captive runtime. This allows you to quickly test your content on different devices without having to install runtimes first, and end users can download, install, and use your content without requiring additional steps or downloads (other than accepting the licensing agreement).
• Platform and device-specific access – gives you free prebuilt native extensions allowing you to access to these platform- or device-specific capabilities in your code. New extensions are added as new devices and capabilities are released in the market.
• Adobe AIR mobile simulation – gives you the ability to add engaging expression and interactivity to your content. When designing and developing content on the desktop, it is challenging to test these advanced touch gestures and device features. Normally, you would have to install the content and test it on your device, but with new support for simulating these functions on the desktop in Flash Professional CS6, you can speed up testing and spend more time creating your content instead of debugging it.
• Stage3D targeting – means that you can define hardware-accelerated 2D content by using a Direct render mode, leveraging the open-source Starling framework or other frameworks that are built on Stage3D, such as Away3D. Where most animated content and games are usually limited to 24 frames per second (fps), you can use direct mode in Flash Professional CS6 to achieve performance of up to an incredibly smooth 60 fps.
• Multiple AIR SDK support – makes it easier to manage the process of using updated SDK for the new, regularly updated releases of Adobe AIR.
While it may not be apparent on the surface, it does seem to me that Flash Professional CS6, really seems to be taking on gaming much more aggressively and in a big way. With improvements to workflow and making Flash more extensible, it also made improvements to HTML5 in new sprite sheet export and improvements in animation. If you work with AIR, there is also a lot to like as well
Taking in all three of these applications – Dreamweaver, Fireworks, and Flash Professional, they make for a really well deserved upgrade. I do feel that if you are a web developer and especially one who has been using these products, overall you will find it well worth it to upgrade and so I can easily recommend these products.
