Adobe® Flash® Catalyst™ CS5 represents a revolution in the designer-developer workflow. In the first instalment of this three-part series, you’ll discover how to import your existing mockup artwork into Flash Catalyst and convert the various elements into working Flex components. We assume some basic familiarity with Flex and its component library, and an elementary understanding of Photoshop and Illustrator. You can download the design file and the finished Flash Catalyst project and make sure to test yourself on the quiz afterwards.
The catch-22 of web and software development is that the client always wants to see what they’re paying for before it exists. Up until now, we have done the best we can to represent our applications with screenshots and mockups to demonstrate any actual functionality. In the best case, when there’s time and budget for a prototype, a developer works closely with a designer to build a working facade from the mockups. Flash Catalyst changes all that, allowing a designer to create original artwork in Photoshop, Illustrator, or Fireworks, then import it into Flash Catalyst and turn it into a working prototype, complete with moving parts, transitions, and components. This lets the client see it all working and moving, which can make all the difference in delivering exactly what they want.
As an example, we’ll be creating a prototype for a very simple contact list that the client will put on their intranet. After consultation, the client has indicated that they’d like the following features:
-
A list of contacts ordered by name.
-
The contact pane to be displayed on the right-hand side once you have clicked on a contact in the list.
-
Each contact has these fields: name, address, phone, email, and place for a photo.
-
A search box for searching contacts.
From this brief, our designer has come up with the fabulous mockup in Adobe Illustrator that you can see in Figure 1, “Adobe Illustrator mockup”.
The client is happy with the look, but they want to be able to test it out before agreeing to go ahead with the rest of the project. To see the job over the line, we need to provide a working prototype without spending money on engaging our developer. Flash Catalyst to the rescue!
Open Flash Catalyst, and on the Welcome screen under the Create New Project From Design File header on the right-hand side, choose From Adobe Illustrator AI File.
Browse to the location where you extracted the project archive from this tutorial, and choose the file mockup.ai. Click the button, and when the Illustrator Import Options dialog pops up, leave the defaults in place and click . Flash Catalyst will take a few moments to import the Illustrator file, and then you’ll be presented with the interface shown in Figure 2, “Flash Catalyst Interface”.
-
As the name indicates, the PAGES/STATES panel, shows the pages or states available in the application. There’s just the default base state to start with, but you can add new states here. This works the same way as modifying states in the design mode in Flash Builder. If you duplicate the base state, select the new state, and delete some visual components from it—they’ll be removed from just that new state, remaining available on the base state. We’ll see an example of this later in the tutorial.
-
This is the artboard, which is where your imported artwork appears. You can drag and drop artwork around and use a limited selection of Illustrator style tools to manipulate it, as well as create new artwork, including simple lines, shapes, and text.
When an artwork element or component is selected on the artboard, a Heads Up Display or HUD (like the one shown in Figure 3, “The HUD”) will appear, offering you options related to the selected item.
-
This is the LAYERS panel; you can see that the layers from the original Illustrator file have actually been imported and preserved. This panel lets us play with the individual elements of the mockup and convert them to components. The LIBRARY panel works similarly to the library panel in Adobe Flash Professional, showing the various components you have available in the application. At first, you won’t have any components defined so this will be empty.
-
The bottom pane contains the DESIGN-TIME DATA panel, which lets you add data items that can be used in list components, for example. The other panel is the TIMELINES, which will allow you to manipulate artwork in a similar manner to the timeline in Adobe Flash Professional, and create transitions and behaviors.
-
The PROPERTIES panel will show the properties of selected components or artwork elements and allow you to edit them. The WIREFRAME COMPONENTS panel is a small library of components you can add to the design, such as scrollbars, buttons, and text inputs.
One of the greatest strengths of Flash Catalyst is the way it lets you designate items of artwork as actual Flex components. To begin with, we’ll make a very simple component by turning the search box into a TextInput element. Click on the search box underneath the “Contacts” text, or select its layer in the LAYERS panel. Your HUD should change to look like Figure 3, “The HUD”. Click on the button, and from the drop-down menu, choose . Now save your project, open the menu, and choose . This will compile an SWF file from the project. You should now be able to click inside the search box and see that it works as a proper TextInput element!
Believe it or not, Flash Catalyst has just converted the rectangle in our artwork into a genuine Flex TextInput component, and even generated the code for it. In the top right-hand corner of the Flash Catalyst interface is the Workspaces pop-up menu (shown in Figure 4, “Design workspace”), which allows you to switch between design and code workspaces. Currently, it will say DESIGN.
Click on it and switch to the CODE workspace shown in Figure 5, “Code workspace”.
You can see (on or near line 91) that Flash Catalyst has generated a proper <s:TextInput/> MXML tag, even adding a skinClass attribute value. If you expand the PROJECT NAVIGATOR panel on the right-hand side you can find the skin as well, and you’ll see that a full Spark skin has been created.
Best of all, the skin is rendered using the Flash drawing API instead of embedded images, making our application that much lighter and more scalable.
Go back to the Design workspace in Flash Catalyst and select both the button and the text on it (make sure you have both selected). Then use the HUD to convert them into a Button component. When you’ve done this, the HUD will change to show four new buttons (shown in Figure 6, “Button state editing”); these new buttons represent states of your new button, and we can edit these various states here.
Click on the button, and Flash Catalyst will move you into isolation mode for editing on the Down state of the button. When in the Down state, select the button and move it one pixel down and to the right. This will give us a bit of movement in the button when we click it, so we can see that it’s working.
In normal development you’d ideally create each of the states as layers in Illustrator, then assign them in Flash Catalyst—but we’re going to keep it simple for now. If you now run your project again, you can click on the button and see it respond.
Now we come to the more complicated part. Buttons and TextInputs are fairly straightforward, but the real functionality of our little application centers around the list of contacts. Flash Catalyst can actually convert our artwork into a working List component, complete with data and an itemRenderer.
Make sure you’re out of isolation mode by hitting the Escape key, or going to the menu and choosing . Start by selecting the following layers on the right-hand side: List, little @, list item name, and Item. When they’re all selected, use the HUD to convert the artwork to a Data List. You should see the HUD change to look like Figure 7, “Data List HUD”.
At the top-right of the HUD you can see a warning message, telling us that there are issues with the component. Click on the button and you’ll find yourself in isolation mode with the four layers you previously selected. Select all the layers except the List layer and you’ll see the HUD change to show a button labeled . Click it, then from the drop-down list choose . Flash Catalyst will think for a moment, then some cool stuff happens.
Flash Catalyst recognizes that the repeated item is a data item in the list and generates a few more for you, so now you’ll have five items in the list all looking the same. If you escape out of the isolation mode and click on the DESIGN-TIME DATA panel, you’ll see it has even separated the little image and text for us! Change the text of the four new items to other names so we can tell the difference, like I have in Figure 8, “Add fictional names to the list”.
You can even add more data items or remove some from the list by using the controls at the bottom of the DESIGN-TIME DATA panel. If you switch to the code workspace briefly, you’ll be able to see that the list component has been created with its own skin, which specifies the item renderer skins and all the subcomponents we need.
Ideally, you’d now modify the item renderer to include a hover state and selected state for usability, but again we’ll just keep it simple for this example.
Finally, we’ll try our hand at adding a new state to the application. You’d expect that when the application is loaded the contact pane on the right-hand side is hidden, as the user has yet to select a contact. We’ll set up that panel to work with a new state, triggered by the selection of an item in the list.
Right-click on the state thumbnail in the PAGES/STATES panel at the top of the interface, and choose . Double-click the new state thumbnail and rename it to contactView. Double-click the original state, which should be already named Page1, and rename it listView. Make sure that the listView state is selected, then in the artboard go and delete the big @ symbol and the contact details on the right-hand side. Don’t worry, they’ll be preserved in the contactView state.
That’s all there is to it—Flash Catalyst has now created the state code behind the scenes telling Flex to remove those components from the screen when the user is viewing the listView state, and add them when they move to the contactView state.
Now click on the TIMELINES panel at the bottom of the interface and you’ll see the state transitions listed there, as shown in Figure 9, “State transitions”.
Click on the listView > contactView layer on the left-hand side.
You can see in the middle of the timeline, Flash Catalyst has added a transition for us for each element that we removed from the listView state. If you mouse over the little vertical bar to the left of the words “Fade In” on one of the layers, you’ll see a resize handle appear, as in Figure 10, “Resize handle”.
Click on the resize handle and drag the bar out to the right until the tooltip shows Duration 2.0s, and it will look like Figure 11, “Increasing the duration”.
If you hit the play icon now you’ll see the transition take effect. It will look a bit simple as we’ve only adjusted the one component, but you can still see that it’s working.
Go down and make the same adjustment for every layer on this transition. Then switch to the contactView > listView transition and do the same with the Fade Out effects that are there.
Now all we need to do is hook up the transitions to a user interaction. In the artboard, right-click on the contact list component, and choose . A dialog will pop up to allow you to set the interaction rules; change the values to match Figure 12, “Setting interaction rules”.
Now save and run your project, and try clicking on an item in the contact list. You should see the contact details fade in nicely on the right-hand side, showing our transition to the new state.
Already we can see how powerful Flash Catalyst can be, both for prototyping and for the initial set up of a Flex project. The code that Flash Catalyst generates can actually be opened directly in Flash Builder and manipulated because the two applications share a common project format. In the next article in this series, we’ll examine the code in Flash Builder and look at some of the PHP-specific functionality Flash Builder provides to help us start hooking the application up to some real data.
In the meantime, play around with the demo application in Flash Catalyst. Try adding some new transitions and complete states for the various components. And remember to take the Adobe-sponsored quiz to test your knowledge.
Toby TremayneA writer and software developer of more than 14 years experience, Toby is passionate about helping new and small businesses make the most of the internet and cloud technology. When he's not writing or telling stories he's busy trying to make technology easier to use for the average business person, and can often be found in dark corners practicing magic tricks or lock sport.
