You can create interactive, prototype applications quickly and easily in Adobe Flash Catalyst CS5 by "faking" the business logic - the code that does not directly affect the display of the user interface (UI). However, the capabilities of Flash Catalyst CS5 go far beyond this, extending into the enterprise application development life cycle. This article demonstrates how to do this through a simple example that shows the designer/developer workflow, which you can then apply in a much greater context. The most immediate benefit is greater productivity in the development of rich, highly interactive applications that are fun to use.
However, there is one thing to address before continuing: there is some confusion over whether Flash Catalyst CS5 is made for designers or developers. The simple answer is that both groups should familiarize themselves with Flash Catalyst CS5. An optimized application development workflow involves both designers and developers, which makes the team more versatile because project managers can allocate resources to project tasks with a much greater level of flexibility. That said, it is important for technical leads and project managers to encourage designers and developers both to learn Flash Catalyst CS5.
This article will focus on data-centric applications. Simply put, you can complete and publish a micro-site from Flash Catalyst CS5: no other development is needed beyond that because there is no data to be consumed.
I had a friend ask a favor of me that turned out to be a great way to start things off for this article. He had created a banner for a website in Adobe Photoshop CS5. The banner was for a real estate site, and it was a graphic of a front yard with three "for sale" signs in it for buttons. Above it was a text field in which a user could input his or her e-mail address. When the user clicked GO, the banner app needed to do three things:
It just so happens that my friend comes from the camp of designers who have gotten away with only working in Photoshop and Adobe Illustrator for years (until recently, when I finally convinced him to learn Adobe Flex), so I made sure this was a collaborative effort by insisting that we do the Flash Catalyst CS5 work together. Figure 1 shows what the Layers panel looked like after the first import of his Photoshop file.
Figure 1. The first import: This is what a Photoshop file with no sub-layers looks like in the Flash Catalyst CS5 Layers panel.
Notice that there are no sub-layers. I took this opportunity to facilitate an important lesson: it is much easier to think in terms of components and organizing layers accordingly. From a big-picture perspective, my friend now understands the programmatic concepts of components and component skinning much better as he gets deeper into the Flex framework down the road.
The key to having an optimized workflow starts at the beginning with the way UI elements are organized in the Layers panel of your Adobe design program of choice. This is where I start, as I show you what my friend discovered on a more granular level using an example I created specifically for this article.
I created an example based on something every Flex developer inevitably has to create at some point: the "Create an Account" form. Figure 2 shows the result so that you have some context as this discussion on optimizing workflow progresses.
Figure 2. The result of the Create Account example
Following a few general rules will save you a lot of time. The most important (in my opinion) is always to be thinking ahead. This section provides examples to illustrate what this means in the context of the workflow.
First, be sure to group layers using layer folders in your Adobe design program. Figure 3 shows an example of doing so in Photoshop.
Figure 3. The Layers panel in Adobe Photoshop CS5.Notice that all display elements belonging to the respective component are placed in a folder called Create Account Form.
Using such an organization not only keeps things tidy but saves a lot of time when you import the file into Flash Catalyst CS5 and convert it into a component with states.
The key here is to avoid creating more work for yourself than you have to, which could happen if you don't take advantage of the convenient features included in the integration between Adobe design programs and Flash Catalyst CS5. For example, if you're using Photoshop and you want to create a text field with a stroke and a shadow, draw a white rectangle as you normally would, and then use the blending options for the layer that the rectangle is on to create the stroke and shadow. This is illustrated in Figure 4.
Figure 4. Use blending options to add a stroke and shadow to a text field. Flash Catalyst CS5 automatically separates the stroke and shadow onto individual layers when you convert the rectangle into a
Text Input component.
When you import the file into Flash Catalyst CS5, the stroke and shadow are automatically placed on their own layers as separate graphic elements—a behavior that could leave you scratching your head at first if you didn't know what to expect. Figure 5 shows what the Layers panel looks like in Flash Catalyst CS5 after importing the Photoshop file.
Figure 5. The Layers panel in Flash Catalyst CS5 immediately after importing the Photoshop file
The next step is to select all three graphic elements for each of the text fields. You can then convert the group into a useful interactive component by right-clicking it and choosing Convert Artwork to Component > Text Input, as seen in Figure 6.
Figure 6. Select the graphic elements that belong to each individual text field one at a time, then right-click the group and choose Convert Artwork to Component > Text Input.
After you convert each set of graphic elements to a component, the components will be combined in the Flash Catalyst CS5 Layers panel and assigned the generic name Text Input. Make sure you rename the layer to something useful at this point: (I show you why this is so important later, when you move from Flash Catalyst CS5 to Adobe Flash Builder). To rename the layer, simply double-click the layer's label.
I mentioned earlier that the layers you selected are combined into one. However, Flash Catalyst CS5 didn't actually put all three elements on a single layer. Flash Catalyst CS5 has what I refer to as visual object introspection, which is something you are probably familiar with already if you've ever worked in Adobe Flash Professional. Double-clicking a newly created component in Flash Catalyst CS5 is similar to double-clicking a button, graphic, or movie clip created in Flash Professional. You effectively drill down (the introspection) into that object and are presented with an environment specifically for editing its visual behavior. Put simply, you are able to edit the layers and the parts of which it is composed. Now, if you double-click one of the Text Input components you just created, your Layers panel should look like Figure 7.
Figure 7. The Layers panel in Flash Catalyst CS5 after double-clicking one of the newly created Text Input components
In many cases, you will need to tell Flash Catalyst CS5 about the pieces of the new component; but in this case, Flash Catalyst CS5 is able to detect where the text should show, and it automatically places a Text Display object over the white rectangle. By default, the text input you just created has two states: normal and disabled. At this point, you can create additional states if you need to.
Let's take a quick look at the Submit button created for this form. Looking back at Figure 5, notice a subfolder of the Create Account Form folder named Button. This folder contains the artwork for the up, over, down, and disabled states of the button. Of course, I could have modified the artwork of the up state for the other states of the button within Flash Catalyst CS5, but I wanted to simulate a real-world scenario that I've run into quite a few times: when developing business applications in an enterprise-development environment, a product development group runs side by side with the marketing team.
Product teams are usually responsible for telling the designers what needs to be included and excluded from a UI based on usability sessions conducted with real people that have the same demographics as the target market for that application. It's common for situations to arise where something isn't clear based on a user's perception of the interface. For example, a user may not perceive a button as such if the change to the display of the button when entering the over state does not make it obvious. When this occurs, you may be asked to incorporate some custom artwork to show that a component is in a specific state—in this case, the over state of the button.
To use this technique, you must select Import non-visible layers when importing the artwork into Flash Catalyst CS5. Figure 8 shows the layers for the button in Photoshop.
Figure 8. The Layers panel displaying the layers inside the Button folder in Photoshop CS5
Notice the fx on each shape layer in Figure 8. These effects become separate graphic layers when imported into Flash Catalyst CS5 and can then be further manipulated for state changes and transitions. Figure 9 shows what this looks like.
Figure 9. The button appears in the Flash Catalyst CS5 Layers panel with the effects from Photoshop converted to graphic elements and each placed on a separate layer.
Now, I can show you what I meant by making layers visible for specific states. As you can see in Figure 9, only the graphics for the up state are visible in Flash Catalyst CS5, which is exactly how I left it in Photoshop when I saved the PSD file for import into Flash Catalyst CS5. The next step is to right-click the Button folder holding the layers and choose Convert Artwork to Component > Button, as you did earlier with your Text Input components—this time using the Button component. Double-click the button on the graphics display area inside Flash Catalyst CS5 to access its individual parts and states. You could also click the button on the stage and select one of the options that appear in the heads-up display (HUD), which is shown in Figure 10.
Figure 10. When you select the Button component, the HUD gives you the option to edit the appearance of the button.
Once you've introspected into the Button component in Flash Catalyst CS5, you'll see four states at the top of the interface: up, over, down, and disabled. Now, you simply select each state individually and change the visibility of the button parts in the Layers panel according to the state you select. For example, when you select the over state, the Layers panel should appear as shown in Figure 11.
Figure 11. The Layers panel in Flash Catalyst CS5 while editing the Button component, with the over state selected
You could even add transitions and have the states do a cross-fade into each other. Ultimately, this method of simply changing the visibility of layers based on the state of the component allows for an incredible amount of versatility, especially when you factor in the ability to create transitions between states.
The last thing to point out is a relatively small thing for this example but scales in its relevance based on the complexity of your component. In many cases, you will need to give Flash Catalyst CS5 some knowledge of your component that it is unable to gather on its own—in this case, which layer of the button is supposed to be the button's Label field. To do this, simply click the text while you're still in edit mode for the button. The HUD now looks like Figure 12.
Figure 12. The HUD allows you to convert individual items into component parts when you double-click a newly converted component.
When you click the Choose Part drop-down menu, you will only see one option—Label—because the label is the only skin part that Flash Catalyst CS5 needs you to identify for the Button component. You're ready to move over to Flash Builder now, so save your project.
With Flash Builder open, click File > Import > Flash Builder Project. Select File in the Import window, and then click Browse. Locate the FXP file that was created when you saved your project in Flash Catalyst CS5, and then click Finish. You should see something similar to Figure 13 in the Flash Builder Navigator.
Figure 13. The Flash Builder Navigator after importing the project
The first thing you should notice about Figure 13 are the names of the component files. When I converted the confirm password layers to a Text Input component, I renamed the layer from Text Input to confirm pass input so I could tell it apart from the others. However, I did not rename the others after I converted them to demonstrate the default behavior that occurs if you don't take this necessary step. As you can see, Flash Catalyst CS5 automatically assigned generic names to them. As an application grows and the number of components increases, imagine how difficult it would be to tell your components apart without renaming the layers after converting elements to components in Flash Catalyst CS5.
Unless you've already opened one of the files in the components package, you're probably wondering what's in them. These are simply the skins for the components that reside within your interface. The Main.mxml file that is generated declares the components and their respective positions on the display and uses the SkinClass tag to attach the respective skin to the component. If you expand the assets package, you'll find your graphic elements, which are brought in by the skin classes in the components package. You now have the display layer for your interface, and it is completely independent of the business layer that you can now create within Flash Builder. After you create the business logic for the form, debug and export your release build from Flash Builder. If you need to go back and make some changes in Flash Catalyst CS5, you can always save the project in Flash Builder as an FXP file and import it into Flash Catalyst CS5.
The integration of Flash Catalyst CS5 into the application development life cycle is well worth the small amount of time it takes to get the development team used to the new workflow. My suggestion for technical leads is to play with the program, going back and forth between design program and Flash Catalyst CS5, and especially Flash Catalyst CS5 and Flash Builder. The more comfortable you are with this workflow, the quicker your development team will be able to pick it up and enhance their productivity with it. I also encourage you to look at the new Flash Catalyst CS5 Developer Center on the Adobe Developer Connection. There, you will find a wealth of resources as well as links to outside resources as new content and tutorials are added to the Web. It's also worth watching the available video tutorials.
Integrate Google Maps into your application
Breadcrumbs: Formatting Money, Money, Money