Flash Interface Design Made Simple

Many people have tried to create interfaces in Flash, but have become overwhelmed by the whole process and never come back to it. That's a real shame. This article outlines tips and methodologies for creating Flash interfaces using graphics applications, good planning and simple logic.

The Flash drawing tools have been around since the earliest versions of the software, and have not progressed a great deal over the past few years. The creation of an effective interface using only the tools in Flash can be painstaking, difficult and downright frustrating for newbies and hardened professionals. This is why most people tend to develop their graphics in external graphics packages and then import them into Flash for fine-tuning.

Interface design for any end medium can be a tricky business; finding an effective balance between usability, functionality and aesthetics is the Holy Grail for designers. There are several different platforms for which you might create a design, but none is as tricky to design for as the Flash Player.

I don't know how many times I've seen a good concept let down by poor execution and hap-hazard interface planning, but both issues can easily be remedied if you follow a few simple rules of thumb. These rules aren't set in stone, but they will help you along the path to designing effective interfaces in Flash.

I've packaged up the files we'll use in the tutorial -- download the working files here.

Planning the Interface

There's an old maxim that my father used to tell me: 'Prior Planning Prevents Poor Performance'. It's so true! If your interface design is poorly planned (or largely unplanned), it will take much longer to create, and you'll undoubtedly introduce flaws that will require additional work to fix.
If you take time to plan the interface -- the way it looks and the way it will function -- you are already most of the way to an effective design.

What's the simplest way to plan out a design? Well, for me, its either old fashioned paper and pencil or, if I'm at my computer, my tablet and pen. I usually start by sketching out the interface, its components, menu system and content areas. I then create extra sketches for each section, as can be seen below.

This process may take several iterations before I'm happy with the plans, but, being a bit of a hoarder, I never throw anything away. This way, I can always refer to interface ideas and sketches I made years ago (though my office does tend to become a bit of a maelstrom of paper during my design phases).

Once I'm happy with the initial layout, I move into a digital format -- usually Fireworks or Illustrator -- to create a compositional interface.

Wireframing Your Design

The concept of wireframing may already be familiar to many of you. You may already wireframe your designs subconsciously without realising it.

To put it simply, wireframing involves creating tangible skeleton structures that acts as placeholders for content. For example, if your design will hold a lot of text, you may need to consider a scrolling design rather than a paging design (in which content is held on different pages).

There are many points to consider during the creation of a layout for your designs. These issues are outside the scope of this article, but once you start to layout your designs in this manner, you'll soon see what works and what doesn't.

You can create your interfaces using any of the wide range of tools that are now available; I usually plump for Fireworks MX 2004. This program makes it easy to create interface prototypes, then resize and repurpose elements quickly using Flash's vector tools. Everyone has their favourite application, but Fireworks MX 2004 really does make the creation of complex vector graphics a painless exercise.

Consider the following interface. While it may seem simple, it was created from a series of rounded rectangles that were aligned and joined using the Union tool (Modify > Combine Paths > Union). Standard vector and text tools were then used to create the composition as a usable interface.

At first glance, it doesn't appear complex, yet the creation of this type of interface using Flash's standard tools would be a daunting task. Just look at the number of curves and control points that are present in this close-up of the design.

In the below design (source PNG files can be found in the code archive), I have create a series of simple rounded and non-rounded rectangular boxes. The content areas in which the logo, extra icons and main content areas are to be positioned are clearly noted, as are the main and sub-menu options.

Creating this design with a series of solid fills and simple strokes took about 15 minutes from start to finish and, because Fireworks MX 2004 makes it so easy to group interface components (such as each main menu), I could fine tune the attributes and positioning until I was happy with the final design.

One of the beauties of the Macromedia range of products is their tight integration, and the integration between Flash and Fireworks is no exception.

From the initial concept (and using the relevant layer structure within Flash), I can copy and paste quickly between applications. Because the design was created in vector format (and provided no live effects, such as drop shadows or glows, are applied to the items), integrity is maintained between the applications, and vector format imagery is imported successfully into Flash.

Understanding Layer Ordering

To pull into Flash the interface elements we created in the external application, we need to understand how the individual interface elements fit together.

In the following diagram, you can see how the interface constituents layer on top of each other to create the interface. From the header bar forwards, items are stacked on top of each other to produce the final effect.

Depending upon how you work in Flash, the easiest way to create an interface rapidly is to import integral parts of the design as single components, arranging the items in separate layers within the stage. Not only does this make your design more scalable and easier to manage, it also gives you much more control over the position of each individual part of the interface relative to the others.

Note in the above diagram how the sections of the interface sit atop each other; this is called the stacking order of the layers. Those that appear at a lower point in the stacking order will essentially be hidden from view if a larger object is placed in a higher layer. This can be a useful concept – you can use the layers to mask other layers without changing layer types or using complex masking techniques. This ability can allow you to create an interface rapidly.