Flash Interface Design Made Simple

Naming and Arranging Layers

Because Fireworks and Flash support layers, we can migrate content from Fireworks to Flash easily. By recreating the layers in Flash and placing the content into each subsequent layer, we can mirror the design we created in Fireworks with a minimum of fuss.

Take a look at this exploded view of the interface we saw above.

We can create these layers, from the top down, in Flash. We can then begin to import and lay out each element relative to the others.

The following diagram outlines the simple process flow. Once we've created the interface in Fireworks, we then create the layers to hold the structure in Flash. From this point, it's simple to copy content from Fireworks and paste it into Flash.

Once the content is in Flash, we can fine-tune the attributes and position of the imported graphics. Once we're satisfied with our work, we can go back to Fireworks and repeat the process until all the integral elements are in Flash.

Note that, when you're importing directly from Fireworks to Flash, objects are imported as Movie Clips or bitmaps and are placed in a folder called 'Fireworks Objects'. The naming of the imported objects leaves a little to be desired ('Symbol 1', 'Symbol 2' etc.), so, after you import each element, it's a good idea to give the item a more descriptive name for the sake of scalability.

This procedure also makes the files more usable in the event that you return to the project at a later date.

We can name the instances of any of the clips we've added to the stage for manipulation via ActionScript. In the following example, after we name the movie clips in the Primary Menu and Secondary Menus layers, we simply add the ActionScript to the Actions layer, and away we go!

Note that, in the included example (contained in the article code archive), no control code is present for the sub-menu items; it's provided for example only.

Effective Use of Gradients

Using Flash to create gradients for your interfaces can be a tiresome and long-winded process and, while Illustrator is good at some things, nothing is as suited to creating complex and easily controlled gradients as Fireworks MX 2004.

With Fireworks MX 2004, you can rapidly create compelling interface elements. The program offers a series of simple gradients, with different colors and opacities, which can be overlaid to create subtle effects.

These creations can then be imported into Flash either by a simple copy and paste, or by export as an Illustrator format file that's subsequently imported into Flash.

The difference between a design that works and one that doesn't usually lies in its subtleties. Use subtle gradients as the fill type for vector paths fading from 100% opacity to 0% opacity and alter the drag handles for the gradient to produce very interesting and subtle effects.

Experimenting with the opacity markers for the gradient fill type, as well as the color and Blend mode, can help you achieve realistic effects, whatever the design.

Creating Drop Shadows

If you import bitmap-based drop shadows into Flash, they can look grainy at best -- dreadful at worst! While it may take a few minutes to create a vector-based alternative, the benefits far outweigh this extra investment in time.

The quickest way to create a vector drop shadow in Flash is to make a solid fill (e.g. black) duplicate of the shape to which you want to add a shadow, then place it on a layer beneath the original object

Then, select the shape, select Modify > Shape > Soften Fill Edges, and select the following settings:

This produces a clean gradated shadow, instead of a hard solid vector line, but play around with the settings to create a look that suits your project.

Once you're happy with the effect, select all the objects you've just created with the 'Soften Fill Edges' command. Group them together and convert the resulting group to a movie clip, altering the opacity of the clip to around 40% for a soft effect.

That's it! While we've only scratched the surface of interface design in this article, hopefully it has given you a taster -- and a few shortcuts for creating interfaces and getting objects into Flash. For more shortcuts and tips, look out for the next instalment!