Designer, Developer Nirvana - A Look Inside Flash Catalyst
Join the DZone community and get the full member experience.Join For Free
DZone recently spoke with Doug Winnie, Principal Product Manager for Adobe Flash Catalyst, a interaction design tool for rapidly prototyping user interfaces and interactive content. In this interview, Doug describes the process for creating application prototypes and communicating application intent using wireframes and the DataList feature. He also talks about Flash Builder support for Flash Catalyst, and how designers can optimize their prototypes to facilitate better workflow with the development team.
DZone: Doug, can you tell us a little bit about some of the work you're doing at Adobe?
Doug: I'm the product manager for Flash Catalyst, which is our newest product at Adobe. And over the last three years, since I've been at Adobe, my role has been making it easier for the Creative Suite design tools to work better with Flash Catalyst. So, a lot of the things that you see in Flash Catalyst CS5, where it works with Illustrator or Photoshop, where you can export artwork from Fireworks, a lot of that has been the work that I've been doing over the last three years to get all the product teams to work together.
DZone: Who are you primarily targeting with Flash Catalyst?
Doug: Flash Catalyst has two specific audiences that we're targeting. First are designers that partner with developers to create applications using the Flash platform. And in the past, that work has been very artificial in terms of how I hand materials or assets from designer to developer. In the past, you'd have to take a Photoshop file or Illustrator document, and you'd hand it off to the developer, and you'd have to do your best to explain, either in a specification or try to sit down with the developer to explain your intent about what it is you're trying to make. The developer then has to approximate and do their best to understand the design tools so that they can get into those designs and then refactor them for Flex or for Flash.
Flash Catalyst makes that process a lot more streamlined. Inside of Flash Catalyst, you can import directly in your Illustrator or Photoshop artwork, convert them into interactive components, start building animations, building interactions, so that when I click on a certain button, this type of animation's going to happen or I go to a specific state of my project. So it gives the designer much more ownership of the design and can ensure that their vision about what they want it to visually look like is going to be preserved once the developer inherits the project.
The other audience that we're targeting for Flash Catalyst are designers that feel that they've hit a limit when it gets to working with interactivity. Flash Professional has always been a great tool for doing animations and to start allowing a designer to create more interactive content. But it's always had this requirement that you have to know ActionScript to be successful. Flash Catalyst allows a designer to use their existing skills in Photoshop and Illustrator and add a layer of interactivity on top of that that doesn't require them to know ActionScript, but they can still successfully create browser or desktop‑based applications.
What's great is, as designers start working more with interactivity and they want to grow further and start working with developers, they don't have to change their tool. They can continue to use Flash Catalyst and go from a designer that's doing interactivity themselves to then partner with a developer, to then collaborate with them.
DZone: At what stage in the design process do I need to think about creating a wireframe?
Doug: I actually did talk a little bit about wireframes in a series I have on Adobe TV that I host, called "Flash Catalyst One on One." And the basis of that is to start your design as a wireframe. And sometimes for designers, it's going to be a little bit of a change, because some designers focus on the visual fidelity of the design as opposed to the intent or what they want the user experience to be like in terms of how does someone interact with a component, how do the different elements of the application move or transition, going from state to state or from page to page of a website. So, starting with a wireframe gives your design the structural pieces that are part of the overall user experience. And later on, you'll then apply the full‑fidelity design using Creative Suite tools later.
Flash Catalyst specifically has wireframe drawing tools and components to make it easy to create this wireframe design. So you can say, "The layout of my application is going to look like this. When I click on this button, this component's going to move to the left. This is going to move to the right. This is going to fade in. This is going to fade out." So they're able to capture the essence of the experience of the project without having to worry about the full design quite yet.
This is really cool because this is one of the pieces of the design processes that can be very volatile, especially when I'm working with a client or a customer that I need to iteratively manage how I design and build out the structure of my site or application. So when a client or a customer comes back to me and says, "Hey, I need you to change the layout of this, " it's a lot easier to do as a wireframe than with the full design. I don't have to refactor that much.
Once the wireframe is all finished‑‑and with Flash Catalyst, the wireframe is actually interactive‑‑and then my client says, "Hey, this is great. Let's go ahead and do the final design of this, " a designer, in Catalyst, can take those different elements of components or the graphics that are part of the website or application in Catalyst and then, piece by piece, bring them into Illustrator and Photoshop, redesign them, and then ultimately have a final product that they can hand off to a developer.
DZone: What is the DataList feature in Flash Catalyst and why is it so powerful?
Doug: The DataList is one of those hidden gems of Catalyst. And it's funny. When you actually drag out a DataList component from the wireframe components panel, it doesn't look like much. It looks like text with a scrollbar. But the DataList is actually much more powerful than just a list of text because, if I create a design in Photoshop or Illustrator that represents repeated information‑‑let's say I have a menu, or I have some sort of product selector, or an example that I use in my online series is a suit‑ordering system. A lot of these things are based on a single item that I'm going to drive with dynamic data, either when I hand it off to a developer or, as the designer, I actually want to control multiple instances of the same thing.
The DataList allows me to do that in Catalyst, where I can bring in artwork, convert them into a DataList, and then, through the design‑time data panel, say how many instances of this object I'm going to have. Each instance of that, I can change text, I can change bitmaps, and really customize how I want that DataList to look.
What's really cool is, when that project is finished and I'm ready to hand that off to a developer, since I'm using it as a DataList, it's actually driven by data. And when the developer gets that, they can change the data connectivity from what we call the dummy DataList, which is a placeholder DataList that you might create inside of Flash Catalyst, and then really quickly reconnect that to a live data service that they would build using Flash Builder, and then they instantly get the new data inside the component.
So it makes it much easier for a developer to connect a component to live data, so a designer can mimic how it's going to look like using the design data inside of Catalyst.
DZone: How can designers communicate application intent in their prototypes?
Doug: So there's three areas where designers can think about their intent. First is the intent of what someone is going to do when they interact with a button or a scrollbar. What are the actions that are going to take place, based on that human interaction with the application? So that is an intent that you can use in Catalyst, through the interactions panel, where you can, without having to go through ActionScript, actually rig what is going to change or how the application is going to transform based on how the user actually interacts with the different pieces.
The other is how the flow of the application works. And this is enabled through the animated transitions that we've been talking about. So when I go from one state of my application to another state‑‑so let's say that I have an application that I'm creating in Catalyst that has a login screen, and when I successfully log in, I want it to transform the user interface into the actual application.
There is an intent there in how I want to carry and bring the users through the application flow. A lot of the times when people do applications, they do it in such a way where there are very dramatic or very sudden changes going from one state to another state.
You always want to keep your user with you. You want them to follow along with you through the flow of your application. That's one of the areas of intent that you can build a Catalyst to help guide the user through the product.
The last one is how you can show how live data is represented inside of the product. The intent here is how a designer can build the user interface of what the user is going to see in terms of working with data sources.
If I am working with an application that might be working with, say we're building a Twitter based application where I'm working with the feed of information coming from Twitter. I need to show visually and also through interactions how that user is going to interact with that data and the intent of what the user is going to do with that data.
I can show that in Flash Catalyst. Capturing that intent there then makes it easier for me to hand that project off to a developer for them to then actually connect to that live data source using Twitter or whatever the basis of the application is.
DZone: Is there a way for me to optimize these prototypes in Catalyst to make it easier for developers to work with?
Doug: Yes. There is actually a library panel inside of Flash Catalyst that's very similar to what you might be familiar with in Flash Professional. Inside of that panel, you can setup all of your individual component names. You can give them unique things so that they are easily identifiable by the developer when bringing that project into Flash Builder. Another thing is, all the objects that are saved as Specter Graphics inside of Flash Catalyst‑‑there are features inside the product that allow you to take all that vector data and convert those into external files. The artwork of the application can be fully extracted from the lab of the application.
It gives the code a much cleaner appearance when you bring that into Flash Builder. In addition, you can do lots of other things including wraparounds in graphics, creating layer groups, and organizing your layout and layers inside of Catalyst to make sure that your project looks its best when bringing it over to the Flash Builder.
Now, something I would suggest is that anyone that is going to be using Flash Catalyst in partner with the developer is to always, at the beginning of your project, meet and discuss how you want to structure your project, because there are lots of different ways that you can use Catalyst with Flash Builder. But it's working with your developer and building out a contract between the designer and the developer that will really assure success working across design and development.
DZone: What support does Flash Builder provide for Flash Catalyst?
Doug: Flash Catalyst is always using the Flex framework underneath everything you're doing in the product. In fact, when you're using Catalyst if you go from the design workspace to the code workspace, you actually can see all the MXML, CSS, and ActionScript that's being created by Flash Catalyst using the Flex framework. In Flash Builder, when I hand a project off from Flash Catalyst, that's in FXT which is the native file format for Flash Catalyst, I can import that directly into Flash Builder. An FXT in Catalyst is basically a compressed Flex project, so when I import that in Flash Builder, it uncompresses it and it creates the entire Flex project inside of Catalyst.
It's as if I'm just handing off the entire Flex project from design to development. Flash Builder then has all the capabilities of the Flex framework inside of it that I can then use when working with Catalyst.
There is one other workflow that I just wanted to call out as well, that isn't quite apparent when you look at the product. You can also take a library of components from Flash Catalyst and export that as a component library for Flash Builder.
Inside Catalyst -- if I've skinned all my different components but I don't necessarily want to hand off an entire application; I just want to send over the skinned components for the developer to take advantage of -- inside of the library panel, I can export my component as a library package.
In Flash Builder, when I import that, it will import them in as a Flex library. Then I can reference those library components in any other Flex projects for multiple projects.
DZone: What kind of features can we expect to see at the next major release of Flash Catalyst?
Doug: One of the things I've been working on in the first version is integrating how designers can use their existing skills of Photoshop and Illustrator and work them with Catalyst. We're going to be making the innovation tighter and allowing people to have more control over how they work with Photoshop and Illustrator when they go into Catalyst. In addition, the hand‑off between Catalyst and Flash Builder for Version 1, is you have a project under Catalyst and you hand that off to Flash Builder. We're going to be making that much more flexible over the next version or two so that developers and designers can work more collaboratively as they execute their projects and their designs.
Then, obviously as the Flash platform evolve and Flash Player 10.1 and AIR two become more prolific on devices and on other pieces of hardware, I think that you'll see that Flash Catalyst will support interactivity for designers to build and target all these devices and mobile handsets.
DZone: On behalf of the DZone community, thank you for speaking with us today.
Doug: Well thank you. We're all really excited here to adapt the release of Catalyst. Having it bundled in with all the premium editions of Creative Suite, we feel is really going to open up the doors for so many different designers in all kinds of different industries. Thank you very much for having me.
Opinions expressed by DZone contributors are their own.