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.
States
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.
Written By:
