Flash 101 - Part 1: The Hammer and The Chisel

Welcome to Flash 101 – the 6 part tutorial that’s guaranteed to take you from Flash newbie to know-it-all, fast!

In this, Part 1, we’ll cover the basics – Flash tools and functionality.

Part 2 looks at flash symbols, frames and the library, and then shows you how to export flash files and embed them into Web pages.

In Part 3 you’ll learn the technique of tweening – a handy alternative to frame-by-frame development of your Flash animations.

Part 4 builds on your skills and explores how tweening can be used with Flash text to create some very cool effects.

Next, Part 5 delves into Flash actions and explores the mouse and keyboard triggers that activate them.

And finally, in Part 6 you’ll learn how to integrate audio files into your Flash movies, including synching, looping fading and more!

Let’s get started!

Flashy Sports Cars

Flash-based Web sites have one thing in common with expensive sports cars - each time you see one, you experience a faint tinge of envy that yours doesn't look quite as good...

Well, envy no more.

Designed especially for new users, this tutorial will get you up to speed on everything you need to know to begin designing your very own Flash animations and movies. Before long, you'll be the toast of the town, and people will be throwing themselves (not to mention bags of the green stuff) at you in the hope that you will condescend to apply your Flash wizardry to their dull, boring staton wagons... uhhh, Web sites.

The Wonder That Is Flash

Before we get started, there's one very important thing you should be aware of. Flash is a program designed to create, edit and animate vector graphics only. A vector graphic differs from a traditional bitmap graphic in that it uses lines and/or curves, rather than pixels, to define an image; this offers an advantage in that vector-based graphics can be displayed independent of the resolution of the display device.

What does this mean? It means that your Flash files will look the same regardless of whether they're playing on a 7-inch screen running at 320x240 resolution, or a 21-inch monitor running at 1024x768 resolution - a feature that should immediately endear the program to the millions of Web developers currently struggling with browser- and resolution-dependent interface designs.

It should also be mentioned at this point that the Flash files you create will function exactly as advertised in any browser equipped with a Flash player (free from the Macromedia Web site at http://www.macromedia.com/).

With that out of the way, let's get started. When you first start the program up, you'll be presented with a screen interface which looks something like this.

For the moment, don't worry too much about all the control panels and buttons you see - the two most important areas at this point are the toolbox on the left side, which contains the various drawing and painting tools, and the Stage, which is the main work area in the center. Over the next few pages, I'm going to show you what the various tools are used for, so that you have a broad idea of what you can (and cannot) do with them.

Works Like A Pencil

The drawing tools available in Flash 5 can broadly be grouped into four categories. You have the selection tools, like the Lasso and Subselection tool; the drawing tools, like the Line, Pen and Brush tools; the fill tools, like the Ink Bottle and Paint Bucket tools; and the view tools, like the Zoom tool.

If you take a close look at the toolbar, you'll also notice a couple of "colour pickers" - these are used to select the stroke colour and fill colour for the currently active tool - and a section at the bottom which changes to display tool-specific options.

Let's start with the drawing tools, which allow you to draw clearly-defined geometric shapes like lines, circles and squares, in addition to free-form shapes and irregular curves.

The Pencil tool is primarily used to draw lines and polygons (other than circles and rectangles) - you can also activate it with the keyboard shortcut Y.

Simply select it and then drag the mouse pointer across the Stage to draw a line. Notice how Flash automatically straightens your lines for you - this behaviour can be controlled with the Pencil tool modifiers, discussed below.

Copyright Melonfire, 2000. All rights reserved.