Phy-gital Roundtable: Breakfast Roundup from Germany and Netherlands

02 May '15 | Debjyoti Paul

German Shoppers: Meet Them in the Fast Lane to Phy-gital

15 January '15 | Ralf Reich

Shoppers Will Share Personal Information (But They Don’t Want to be “Friends”)

15 January '15 | Anil Venkat

Modernize or Perish: Property and Casualty Insurers and IT Solutions

14 January '15 | Manesh Rajendran

Benelux Reaches the Phy-gital Tipping Point: Omnichannel Readiness is Crucial

13 January '15 | Anil Gandharve

The New Omnichannel Dynamic: Finding Core Principles Across Industries

13 January '15 | Debjyoti Paul

Technology does not disrupt business – CIO day 2014 Roundup

02 December '14 | Anshuman Singh

Apple Pay – The Best Is Yet To Come

02 December '14 | Indy Sawhney

Digital transformation is a business transformation enabled by technology

01 December '14 | Amit Varma

3 Stages of FATCA Testing and Quality Assurance

06 October '14 | Raman Suprajarama

3 Reasons why Apple Pay could dominate the payments space

18 September '14 | Gaurav Johri

Beacon of Hope: Serving Growth and Customer Satisfaction

05 August '14 | Debjyoti Paul

The Dos and Don’ts of Emerging Technologies Like iBeacon

30 July '14 | Debjyoti Paul

What You Sold Us On – eCommerce Award Finalist Selections

17 July '14 | Anshuman Singh

3 Steps to Getting Started with Microsoft Azure Cloud Services

04 June '14 | Koushik Ramani

8 Steps to Building a Successful Self Service Portal

03 June '14 | Giridhar LV

Innovation outsourced – a myth or a mirage or a truth staring at us?

13 January '14 | Ramesh Hosahalli

What does a mobile user want?

03 January '14 | Gopikrishna Aravindan

Future for Designers & Developers is Collaborative with Flash Catalyst

Posted on: 26 May '09

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:

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:

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:

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.

Mindtree Blog Archives

Mindtree blog Archives are a collection of blogs by various authors who have independently contributed as thought leaders in the past. We may or may not be in a position to get the authors to respond to your comments.