Comping your next design in Flash

Our story begins at the start of your interactive online project. You’ve already brainstormed a ton of great ideas and drawn some interesting sketches of what you’re thinking about. Now it’s time to create something for your client to look at. Where do you go now?

If you’re like most designers, Adobe Photoshop or Adobe Illustrator is the next logical step in the design process. Photoshop and Illustrator are indispensable programs to any graphic designer, but they don’t always have to be the first programs you use to create a comp for a client or an internal review. A comp is a detailed mockup of your design that shows what the final project looks like. Sometimes this means giving a general idea of how the project will work or behave. To show a degree of interactivity that the final project will feature, typical design tools will not suffice. You need something that, in itself, is interactive.

Using the Adobe Flash authoring tool for comping purposes makes a lot of sense. It all depends on the type of project you are working on and the amount of time you have to do it. In many cases, Flash is well suited for comping any project that includes a high level of interactivity, or any project where you create the final product using Flash—for example, websites, rich media applications, banner ads, forms, demos, character animations, and the like.

Here are some arguments for why using Flash to create comps is a good approach:

• A successful interactive piece relies heavily on movement, and movement should be carefully considered early in the project’s timeline. Whether it’s to communicate a concept like “speed” or “luxury,” or strengthen the usability and navigability of a piece, motion is closely tied to the success of the project.
• If the final piece is interactive, why not present a comp that is interactive? Static comps are bound to make the client ask, “What happens when I click here?” It’s common practice for print designers to show working dummies, such as brochures with pockets and die-cut business card holders, so that the client and the printer understand what the piece is about. In contrast, web designers demonstrate rollover states by showing two or three JPEG images they export from Photoshop. Why not build that home page in Flash and give the client the ability to interact with the design in the same way? Presenting your comp with moving elements clarifies functionality and can potentially make a more positive impact on the client.
• Building assets in Flash early in a project’s timeline can help shorten the entire production process. When you create assets outside of Flash, you still need to export, reprocess, or recreate them for use in Flash. If you create and save assets as symbols in Flash, and build out rough animation prior to going into full production, the project will be in good shape from the start. The designer can stay focused on design needs, the client has a better understanding of the final product, and the Flash developer spends more time programming because the structure of the file is already in place.
• There’s no such thing as too much experience. The way we see it, it’s better to spend more time in the Flash authoring environment because we become better Flash developers. Even if you’re just thinking about how a rollover works, how long a piece of text stays on the screen, or how a loading screen transitions onto the main page, using Flash to create comps of these elements makes you more adept at using the authoring tool in the end.

Considerations before comping in Flash

When faced with a deliverable of creating two or three comps for an interactive project, we always consider a few things before choosing the application in which to make the comp. In many cases, personal preference or design style drives this decision.

Comping in Flash isn’t always the best approach; however, you should try to plan which assets will need to be created in Flash early on in the process, and what kind of personality the site will have. We always have the question “should I start building this in Flash now?” in the back of our minds.

Here are some of the things to consider before starting an interactive project:

• What are the budget and time limitations of the project? Unfortunately, not every project has the resources it really needs. If we’re tasked with a project that requires us to create comps on short notice—such as within two or three days on a shoestring budget—then Flash is not the place to start. Photoshop becomes our best friend for the next 20 to 30 hours.
• Does the project require a high degree of creativity and polish? If we have a project on our hands that we think will be truly amazing—perhaps even a strong candidate for a major award—we will spend as much time as needed to make it the best it can be. When this happens, we pull out all the stops by creating a Flash comp because that will illustrate more clearly what we have in mind—whether it’s a unique type of navigation or a particular style of animation to create a memorable experience. Presenting in this format allows us to get the client much more excited about their project because the it’s closer to the final experience.
• How nitpicky is the client? If we know that a client likes to make lots of changes to the initial comps, or likes to choose from among many different possibilities, we are hesitant to show off a Flash comp that contains much more detail than a static comp—and that requires much more work to generate than a static comp. In such cases, we find it best to limit what we show to high-level ideas and general design directions so that we can first lead them down a path that is mutually agreed upon before we devote significant resources to the initial design. Once we get the final signoff, we’re more comfortable spending the extra time to build and animate in Flash whatever the project may need for the next round of comps.

Conversely, if the client reacts positively to solutions that are well thought out, initial comps in Flash work well because we can actually show the client what we want to accomplish, rather than just talk about it. When you show Flash comps to any client, remind them that they are not looking at the final piece. Clients need to know that you are presenting them only with a comp that is intended to mimic the final experience. We have found that Flash comps are typically a better starting place for those clients who understand from the outset what we are presenting them, and we get better feedback as a result.

Comping in Flash

Here is a closer look at the steps you might follow to evaluate whether or not to comp in Flash. We’ll use the following project as an example.

We are to create a promotional site for a popular children’s cracker (biscuit). The site needs to introduce a cast of four animated mascots that represent four different cracker flavors. Each character will have a unique personality that reflects the flavor of the cracker. There is a Flash game for each character.

Step 1: Brainstorm about the personality and features you want on the site

In this example, we decide that this site will show everything that happens under a child’s bed. After drawing some sketches, we discuss our ideas and design direction with the client so that they are on board with what we want to do. Presenting our ideas to the client at this point is an important part of the process because it keeps us from spending time building assets for a concept that the client may or may not approve.

Step 2: Determine which sections to comp, and start building the assets

A big decision at this step is choosing the software to use. Our goal is to produce graphics for the site that are a balance of small file size and high visual quality. For this project, we already know that the final destination will be Flash, so we choose to comp as much as we can in Flash. We use the drawing tools in Flash to create all vector art. Creating the vector art in Flash saves you additional steps and potential problems that could occur when exporting vector art from Illustrator or Macromedia FreeHand.

We create our nonvector art in Photoshop, export them as JPEG images, and then import them into Flash. For the children’s cracker site, we decided that all section backgrounds would be created in Photoshop because they have a certain level of detail we could not achieve with vector art.

We also decided that the best way to explore and present character animation is by creating character sketches using a drawing tablet. We will import the sketches and create some rough keyframe animations in Flash to demonstrate how the characters move. Because we are still in a comping stage for the characters, we don’t want to focus unnecessarily on the details. We want to use motion only to demonstrate each character’s personality.

Remember that all files need to remain editable at this step. We will typically need to make changes to our graphics based on client or internal feedback.

Step 3: After you create all your assets, bring everything together

We like to start by building smaller, less complicated symbols and buttons, and then build on those assets to create more complex movie clips. The main goal at this point is to build a group of movie clips that each have a complete “section” or “page” in it. Once each section movie clip is built, you can begin to construct the final Flash comp. An added benefit of building complete sections as a movie clips is that you can easily move whole sections at a time from one Flash document library to another simply by copying and pasting the movie clip. This comes in handy when you move from comping a design to actually building it.