Future for Designers & Developers is Collaborative with Flash Catalyst

Posted by MindTree Blog Archives in

 Technology Trends

May 26, 2009 | Total views: 52

0

MindTree Blog Archives

More articles by the author

Adobe believes in revolutionizing how the world engages with ideas and information. In the same direction, Adobe has made significant progress by understanding how designers and developers interact in their workplace and how Adobe can help them produce far more effective designs while reducing the overall production time for both.

In reference is Adobe’s Flash Catalyst, which will be launched soon. Flash Catalyst will empower designers to integrate their static designs from Adobe Photoshop(R) CS4, Illustrator(R) CS4, or Adobe Fireworks(R) CS4 into completely interactive products with desired events, transitions, and motions without losing sanctity and detailing of design with much less amount of documentation (UI specification, interaction pattern specification, style guide, etc.). And that too without touching a single line of code!

The design output from Flash Catalyst is ready-to-publish-on-the-web, in the form of .SWF or AIR application. It can also be transferred to the developers who can later work on the output using Flex Builder for complex database/backend system connectivity and business logic coding.

It seems that legacy prototyping tools such as PPT, Visio, and HTML will succumb to Adobe’s tightly integrated design and development environment. New entrants such as Axure and iRise will take time to make place for themselves because of the widespread use of Adobe products today.

Check out the demo and sample screen shots:

http://labs.adobe.com/technologies/flashcatalyst/

http://labs.adobe.com/technologies/flashcatalyst/views/

Adobe tools allow proper files assets organization, for example, Photoshop allows you to title and group layers in a .PSD file. Many designers keep on adding layer after layer, effects, and elements but do not bother to name them or group them. Designers who wish to be more productive and collaborative with their work would now be required to be more organized this time and will realize the importance of doing so.

In the collaborative design and development environment, organization file assets will work like comments on code. This will prevent developers from getting lost in the code and rather will help them find things faster and work better with defined interaction patterns.

See the video below to understand the easy use of Flash Catalyst if you have organized your files properly:

http://www.adobe.com/newsletters/edge/december2008/video/

When a designer is ready with visual design using Photoshop, Flash or other Adobe tools, s(he) can export designs as skins for Flex. Download and install the required plug-in here:

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex%5Fskins

To draw a parallel, while working on JavaFX (JavaFX Production Suite) you will notice ‘Export for JavaFX’ menu option in Photoshop file menu.

Here are the steps to covert:

* Design different states of UI elements (e.g., tabs and buttons can be created for standard HTML elements such as checkboxes, radio buttons, etc.) in Photoshop. Export them in .PNG or .JPG format.

* If you have already installed Flex Builder, export plug-in for Photoshop. All you need to do is to click on a button named ‘Export Skin for Flex from Photoshop’. If the layers are named properly, the script separates each layer as different state images. For example, if the layer names are upSkin, downSkin, disabledSkin, etc. which is the syntax for Skinning in Flex, all layers will be cropped and stored as different images upSkin.png, downSkin.png, so on and so forth.

* Come back to Flex Builder and take a native UI component such as a button and define its style using the option to ‘toggle’ between style and skin view. Define the skin and assign all the images we have exported to the states desired.