New Software Spotlight: Adobe Creative Cloud for Web June 2014

With Adobe Creative Cloud now reaching its one-year mark, Adobe is coming out with a major update to the platform. In this release are updates to 14 separate applications. There are also new connected mobile apps as well as new hardware devices that you can use with your iPad to enhance your experience. In the last installment I looked at Adobe Creative Cloud for Designers; this time I am going to look at Creative Cloud for Web.

Adobe’s goal for the web since the release of Creative Cloud 2013 has been to create the best tools for web development. With the release of CC 2014 they have upped the ante with some significant improvements.

The tools that come with CC for web are Adobe Dreamweaver CC, Adobe Edge Animate CC, Adobe Edge Reflow CC, Adobe Edge Code CC, and Adobe Flash CC. You can see more online about this package or check out the various membership plans at Adobe Creative Cloud.

Adobe Dreamweaver CC 2014

Adobe Dreamweaver CC is a hybrid web development application, both a WYSIWYG editor that allows you to see the results of what you are developing before having to publish to your website, and 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 CC?

• Element Quick View lets you visualize the markup in your document, but also renders an interactive HTML tree that will allow you to navigate your page layouts and click, drag, rearrange, delete, copy, paste, and duplicate items.

• Live Insert lets you inspect any of the HTML elements that are in the Live View and change them with the ability to see the change without having to refresh anything. This has been upgraded to use the Chromium Embedded Framework (CEF), which allows your page views to be consistent with your favorite current browser.

• Live View Property Inspector can now be used in Live View. This gives you the ability to make edits quickly to your page without having to move into and out of either Design or Code View. You can examine and update the most common properties for the current page and make your adjustments right here.

• CSS Designer improvements include an enhanced user interface for Border Control that will let you set all four border properties; copy-paste styles that retain layout and text styles; Quick-edit text boxes where you can use shorthand code for properties; new keyboard shortcuts for CSS selectors; and other enhancements to custom properties workflow.

• Site management and Certificate support lets you connect to your servers over SFTP via public pairs and identity keys, providing you with much more streamlined access to multiple servers.

• Help center has been updated to give you the ability to discover new features and provide more streamlined help services.

Adobe Edge Animate CC 2014

Adobe Edge Animate is a tool for motion graphic artists, web designers, and web developers for creating motion and interactive projects for HTML5. Animate can be used to create interactive banner ads, add motion to existing content in a web page, and create content in iBooks and other devices.

So what is new with Edge Animate CC?

• HTML5 video is now supported, with a user interface that is intuitive and easy to use. It will let your import an HTML5 video and then use it as part of an overlay which can have other composition elements animated around the video. Since the format for the video is native HTML5, it can play on both iOS and Android devices.

• Sprite sheets are now importable, allowing you to add advanced multi-frame animations to your compositions. They let your graphics download faster with fewer HTTP requests, and the automatic keyframing saves time spent manually positioning frames.

• Article linking for DPS means that you can link your InDesign or DPS folio articles using the options on the user interface without writing code. You can create title pages, TOC, and advanced navigation to the target articles easily and quickly.

• Actions editor has been updated to be more user friendly reduce the need to code. This will let you add interactivity and be easier for designers to use.

• Copy and paste from Illustrator CC means you no longer have to save an illustration as an SVG file and import it; you can now just use your copy and paste commands to import it in to Edge Animate.

• Hand and zoom tools are now included in your toolbar to help you navigate your composition more easily.

Adobe Edge Reflow CC 2014

Adobe Edge Reflow is a responsive design tool built on HTML and JavaScript. Everything created in this design surface is going to render in a browser. It is meant to help you create responsive design sites that rearrange themselves for different devices. It is also geared to quickly prototype more advanced layouts on the fly.

So what is new with Edge Reflow CC?

• Photoshop import has made it easier to import your web design. The interface has been updated.

• Local font support means you are not limited to web-safe or web fonts for your Reflow project; you can now use your local fonts as well, giving you more design options.

• CSS and HTML export lets you export code into a code editor of your choice such as Dreamweaver or Edge Code instead of just being able to copy snippets of CSS as was the case before this release.

Adobe Edge Code CC 2014

Adobe Edge Code is a lightweight code editor made for web developers and web designers. It is built on the open source brackets project, which means it is written with HTML, JavaScript, and CSS. This means that you can add your own functionality directly to the editor by creating extensions that work with Edge Code.

So what is new with Edge Code CC?

• Multiple cursor support will let you split your cursor into multiple cursors to make edits in more than one place at a time. This means that if you are changing the same thing in more than one spot, you need only do it once; the others are changed at the same time.

• File search and replace is now much more user-friendly with a better interface to allow you to search and replace more quickly.

• CSS Shapes Editor extension allows you to edit CSS Shapes values in the Live Preview mode. Install it using the Extension Manager.

Adobe Flash Professional CC 2014

Adobe Flash CC Professional is a multimedia authoring program for creating web applications, games, movies, and content for mobile phones and other devices. It provides a comprehensive toolset geared for interactive designers, web designers, graphic designers, motion graphics designers and video editors.

So what is new with Flash Professional CC?

• Variable-width strokes for shape tweening means that you can now tween fancy strokes created using the Variable Width tool. You can also tween solid strokes associated with default or custom Width Profiles.

• Smoother Motion Tweens are a result of the reintroduction of the Motion Editor, which is now much more intuitive and streamlined to provide a smoother experience when refining Motion Tweens.

• SVG export lets you export artwork to the Scalable Vector Graphics (SVG) format so you can use your creations within most web pages.

• WebGL for animation is now supported natively so you can create and publish WebGL content from within Flash Professional CC. Flash Professional CC leverages the GPU-accelerated processing and rendering of WebGL content, which is integrated with most modern-day browsers.

Overall the majority of the improvements are to Dreamweaver. Its Quick View, Live Insert, Live View Property inspector, CSS designer, and site management improvements are really huge. Edge Animate’s improvements, with HTML5 Video, sprite sheets, DPS article linking, and copy and paste from Illustrator are just as important.

The rest of the improvements, while smaller in nature, are also really nice additions and show Adobe’s commitment to making the design platform both incredibly useful and very streamlined and functional. Normally I would say I very highly recommend this upgrade, but if you have a subscription to Creative Cloud then you already have upgraded.