By Adam Phillips 

BCA: Flash 
Animation 
Chapter 1: The Animator’s Flash 

Note: I use a little rough language in this book.

  Ch 1: The Animator’s Flash 

The first chapter of this Bitey Castle Academy ebook is free. Go ahead and download,
print and distribute it amongst your friends, enemies and colleagues. You may not sell it
or reproduce any part of it in your own animation tutorials/books/articles in any medium,
including print and online, without express written permission from me.

Feel free to email me with cash, questions, comments, errata, etc through my website:
www.biteycastle.com

Table of Contents 

The Animator’s Flash ......................................................................................... ‐ 2 ‐ 
Flash for Animation ........................................................................................... ‐ 3 ‐ 
Flash Interface ................................................................................................... ‐ 4 ‐ 
1. The Stage ............................................................................................... ‐ 5 ‐ 
2. The Tools ............................................................................................... ‐ 5 ‐ 
3. The Timeline .......................................................................................... ‐ 6 ‐ 
4. The Panels.............................................................................................. ‐ 6 ‐ 
The Workspace .................................................................................................. ‐ 6 ‐ 
Customising the Workspace .......................................................................... ‐ 6 ‐ 
Working with Panels ...................................................................................... ‐ 7 ‐ 
Panel features ............................................................................................ ‐ 8 ‐ 
Essential panels for the animator ................................................................ ‐ 10 ‐ 
Stacking and docking ............................................................................... ‐ 11 ‐ 
Saving the Workspace ................................................................................. ‐ 13 ‐ 
More elbow room? ...................................................................................... ‐ 14 ‐ 
Animating! ....................................................................................................... ‐ 15 ‐ 
Setting up the movie ................................................................................... ‐ 15 ‐ 
Stage Zoom Shortcuts ............................................................................. ‐ 17 ‐ 
Create some graphics .................................................................................. ‐ 18 ‐ 
Simple Frame‐by‐frame Animation ............................................................. ‐ 20 ‐ 
Export the animated GIF ............................................................................. ‐ 26 ‐ 
Summary ......................................................................................................... ‐ 27 ‐ 

Adam Phillips Page | -1-

  BCA: Flash Animation 

The Animator’s Flash

If you’re reading this, chances are you want to learn to use Flash for animation, whether
it’s for a simple animated GIF or forum signature, a splash intro for a website or a full
animated short.
When we learn anything, it’s natural to want to dive right into the deep end and start
hammering out results. That’s why, in this very chapter you’ll complete a piece of frame-
by-frame animation, step by step.
Before you can really start to use Flash, you’ll need to know where everything is, and
what everything does. Well, that’s the reason for this chapter: to introduce you to the
Flash environment, help you set up and customise the work area, and best of all, get your
face wet with some animation.

This entire book is about animation, so don’t expect to see much ActionScript on these
pages. That said, later on we will cover the very basics of adding interactivity to a Flash
movie, for the purposes of play/replay buttons and a simple preloader.

- 2 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

Flash for Animation

The most successful animated shorts and movies on the web today are a combination of
entertaining material that is appealing in any number of ways. It’s the aim of this book to
demonstrate what’s important for animation, storytelling, online recognition and success.

For many years now the online world has seen Flash as a web and application
development program. However as many of us know, Flash at its heart is and always was
an animation program, specifically designed for creating vector graphics and simple
animation for the web.
Unfortunately due to an early but sticky reputation for clunky, low-quality toons and
shitty slideshows, the animation tools have evolved with all the speed of a crippled snail.
The makers of Flash have thrown money and resources into improving the developer’s
tools, while comparitively speaking, the animation side of things is sadly left in a dark
corner with a few meagre food scraps occasionally thrown at it.

Now don’t get me wrong! Flash is and has been for many years, a remarkable piece of
animation software. The slow evolution of its animation side hasn’t stopped animators
the world over from using Flash and pushing its limits. Occasionally we do hear some
high-profile animator whining publically about Flash’s shortcomings, slamming doors
and threatening to migrate to some other software. The fact is that despite its limitations,
Flash is a fantastic little program and anyone vowing never to return will soon miss the
things that Flash does better than others.

You don’t need to look far to find examples of ground breaking Flash animation and
graphics. Aside from the personal websites of individual animators, there are thriving
communities out there dedicated to showcasing great Flash animation. These animators
have embraced what appears on the surface to be a limited tool, and then set about
showing the world that Flash is not as limited as it might seem.

With that in mind, let’s get started by looking at the various parts of Flash CS3’s
interface, then towards the end of the chapter we’ll move on to creating a simple piece of
frame-by-frame animation.

Adam Phillips Page | -3-

  BCA: Flash Animation 

Flash Interface
Start Flash CS3 and before you can explore the authoring environment, you’ll need to
create a new, blank file to work in. The image below shows the start page that presents
you with a number of options:

Fig. 1.01 – Flash CS3 Start page

In the central column named ‘Create New’, click on the first option: ‘Flash File
(ActionScript 3.0)’ and Flash will open with a blank movie.
We’ll now look at the individual parts of the interface but just to be sure we’re all looking
at the same thing, go to Window > Workspace > Default, then cast your eye over the
interface.

- 4 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

1. The Stage
See Fig. 1.02 below. The blank white space in the main window of a new Flash
document is the Stage. It’s where you assemble your cast and play out your story. The
Stage shows us one frame of the movie, like a single page in a flipbook.

Fig 1.02: The Flash CS3 interface

2. The Tools
The Tools panel contains all the tools you need to create and transform your movie’s
graphics. We’ll deal with some individual tools in depth a little later, but look over all of
the icons there and you can see that pretty much everything is covered, not only for
creating vector graphics and text, but for colouring and transforming them too. Some of
them may look a little alien right now, but don’t worry.. we’ll be using each and every
one in the chapters to come.

Adam Phillips Page | -5-

  BCA: Flash Animation 

3. The Timeline
The numbered strip is the Timeline, which shows a sequence of frames. In a new movie,
the Timeline contains one blank frame on a single Layer. We’ll touch on the concept of
Layers a bit further into the chapter.

4. The Panels
A Panel is where you control various tools or functions in Flash. One that you’ll be using
very frequently is the Properties Panel. It’s a context-sensitive panel, meaning that it
displays options and information specific to the selected tool or item.
Other panels such as the History Panel, the Color Panel, the Scene Panel and the
Library will be discussed in greater depth a bit later.

The Workspace
In Flash there are many individual panels dedicated to particular tools or effects. In time
as you become accustomed to working in the interface, you’ll come to know what you
use most and what you don’t need. In this section we’ll talk about the Flash tools and
panels favoured by the Flash animator. Keeping those tools, panels or options within
reach is the key to streamlining your workflow.
Each new version of Flash has introduced more customization options and better ways to
tailor the interface, none more so than Flash CS3. In the following couple of pages you’ll
customize the work area to give you some room to move. Following that we’ll move on
to look at the most essential tools and you’ll create a customised animator’s workspace.

Customising the Workspace

The animator working in Flash ideally requires as much space as possible; the more, the
better. If you have a dual (or triple!) monitor setup, then you can spread Flash out over a
large area, putting your stage on the main monitor while your panels and tools sit on a
secondary monitor. If you use a single monitor though, you’ll need to carefully organise
the work area.
As you gain more experience with Flash you’ll soon come to know what workspace
works best for you and exactly which interface items you’ll want to hide and unhide. We
all like a lot of elbow room though, so here are some ways to free up space. This section
will also serve as a further introduction to the Flash CS3 authoring environment.
Follow me – open Flash
If you don’t have Flash CS3 open already, start the program and choose ‘Flash Document
(Actionscript 3.0)’ from the ‘Create New’ heading. A new movie called Untitled-1 with
a blank stage appears, just like Fig. 1.02.

- 6 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

The first step toward maximizing your workspace is getting rid of things you don’t need.
We can’t expect you to know much about that at this stage, so I’ll start you off. First
though, let’s look at what panels are and how they work.
For the purposes of this exercise, load the default layout (Window > Workspace >
Default) and you’ll see a few panels in the right-hand column, called the dock. The dock
is a versatile kind of tray that allows us to load up with every panel in the list without
cluttering the screen.

Working with Panels

Follow along now as we take a look at some more features of the panel dock. First up,
note the tiny double-arrow at the top right of the dock. Click this and the entire dock will
minimise. Click it again to expand the dock.

Fig. 1.03 – The panel column minimise button

As seen in Fig. 1.04 and 1.05, you can minimise the dock even further by dragging the
left-hand handle at the top of the dock. In this state, the panels are reduced to icons. Very
nice!

Fig. 1.04 – Drag the left handle Fig. 1.05 – The iconised panels

Adam Phillips Page | -7-

  BCA: Flash Animation 

In these minimised states, you can click the panel icons to expand that panel out of the
dock, just like pulling a drawer from a cabinet (see Fig. 1.06). You can work in a panel
while it’s hanging out of the dock and clicking anywhere outside the panel will
automatically put it away tidily into the dock.

Fig. 1.06 – The expanded panel outside the dock

Panel features
Now let’s look closer at the panels themselves and the features common to each. Every
panel can be opened, closed, docked, moved and shuffled with other panels. You can
undock it so that it floats free, or it can be stacked with other panels in tabbed form, as
shown in Fig. 1.07.

Fig. 1.07 – Tabbed panels in a floating stack

Here is an outline of the features common to all panels. Go ahead and test out these
features as we go along:
• Title Bar features: The title bar is the strip at the top of each panel. It contains the
Close and Minimise icons on the right. Clicking this title bar will expand or collapse
the panel. This can also be done with the minimise icon on the top right. The title bar
can be dragged to move and dock/undock the panel.

Fig. 1.08 – A minimised stack of panels

- 8 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

• Closing a panel or stack: A single panel or a whole stack of panels can be closed
with the close icon. Don’t worry if you accidentally close a panel or stack. You can
always bring it back from the Window menu at the top of the Flash window.
• Re-ordering panel tabs: As seen in Figs. 1.07 and 1.08, a panel is brought to the
front of a stack by clicking its tab. You can drag these tabs to reorder the stack, too.
Note that an active tab has its own Close button.
• Context menu: In the upper right of every panel there is a tiny menu icon. Click
this icon to open up a list of options for that panel. See Fig. 1.09.

Fig. 1.09 – The panel’s context menu

• Special extras: A few panels have additional buttons, icons and info at the bottom.
One such panel is the History panel (Window > Other Panels > History) which has
buttons to replay, copy and save History steps.

Fig. 1.10 – Buttons along the lower bar of a panel

Adam Phillips Page | -9-

  BCA: Flash Animation 

Essential panels for the animator

Open the Window menu and check out the list of panels. Working more often on graphics
and animation, the panels you will probably need and use most are:
• Color
• Swatches
• Align
• Info
• Transform
• Library
In Window > Other Panels, you’ll find the Scene and History panels, which are also
very useful for animators.
One by one, select these from the Window menu and the Window > Other panels sub-
menu. You’ll see that as you select each one, it appears in the dock, but some appear
floating in the middle of the Stage. For any that are floating on the Stage, you can
organise them by dragging them into the dock using the panel handle (drag the title bar).
In the image below (Fig. 1.11) you’ll see which panels I have in my dock. Feel free to
load up your dock with the same ones. Next we’ll talk about how to shuffle and re-
order the dock.

Fig. 1.11a – Panels stacked in the dock

- 10 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

Stacking and docking

In the dock, it’s possible to re-order and stack the panels however you like. Do this by
dragging the title bar of the panel. To get rid of any panel you don’t need (for now at
least) simply click its close icon.

Fig. 1.11b – Panels docked and stacked

When dragging a panel into the dock, a blue indicator will appear to help you to put the
panels in the desired order.
Follow me – shuffling panels
Let’s run through a quick exercise in shuffling the panel stack. You can do this with any
panel you like but I’ll be demonstrating with the Transform panel.
1. Click and drag the Transform panel tab away from the stack until it detaches.
As long as you click and hold, you’re dragging a ghosted Transform panel.

2. Without dropping it, drag the panel around the dock and note how the blue
indicator changes, depending on where you’re hovering.

Fig. 1.11c & 1.11d – the blue indicator

Adam Phillips P a g e | - 11 -
  BCA: Flash Animation 

3. Watching the blue indicator as you drag, now place the Transform panel in the
same stack as the Color panel.

Fig. 1.11e & Fig 1.11f – Stacking a panel with others

You will notice that a panel opens when you drop it in a stack. As we saw
earlier, you can simply collapse the stack again by clicking the title bar, or
the tab itself.
Stacking works whether the panels are collapsed or expanded so you may
choose to work either way, it doesn’t really matter.

4. Now move it into its own stack between two existing stacks.

Fig. 1.11g & 1.11h – Stacking a panel between other stacks

Now you know how panels operate, go ahead and customise your dock with the
animator’s panels (refer to the list on Page 9). Once again, any panel is available from the
Window menu and the Window > Other Panels menu.
If you open a panel you don’t want, just use its close button. If you accidentally close a
panel that you want to keep, simply retrieve it from the Window menu or the Window >
Other Panels menu.
When you’re finished, we’ll save the workspace so Flash will remember the
configuration you worked so hard to customise.

- 12 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

Saving the Workspace

If you were to close Flash now and reopen it, all your shuffling and ordering would be
gone. After all the work you’ve done organising the dock, you can save the workspace.
You can also revert back a saved layout, should you accidentally close a bunch of panels
or otherwise make a complete mess of the workspace later on.
Go to Window > Workspace > Save Current… Enter the title ‘Animator’ and click OK.

Fig. 1.12 – Saving the workspace

Now if you go to Window > Workspace, you will see your new Animator layout as part
of the Workspace menu (see Fig. 1.13)

Fig. 1.13 – The saved workspace

Later, if you find some new way of improving your workspace, you can overwrite the
Animator layout at any time, simply by saving the layout with the same name.

Fig. 1.14 – The “Overwrite Workspace?” warning.

Adam Phillips P a g e | - 13 -
  BCA: Flash Animation 

You’ll notice that we haven’t touched those panels at the bottom of the Flash window.
Here in this special horizontal stack you’ll see the Properties, Filters and Parameters
panels.
Properties and Filters are definitely very useful for us as animators, but unless you’ll be
using special add-on components, or creating your own, the Parameters panel is quite
useless to us. You can close it now by bringing it to the front of the stack (click the
Parameters tab) and clicking the close icon on the tab.

Fig. 1.15 – Closing the Parameters panel

Note: if you accidentally close the entire stack by clicking the wrong
close icon, just choose Window > Properties > Properties. This will
bring back the stack and you can now close the Parameters tab.

More elbow room?

If you’re really obsessed with freeing up more space in the work area, you will like the
F4 key, which hides all the panels. Just hit F4 to bring them back. Simple!
You may like to even hide the Timeline, which you can toggle on and off by choosing
Window > Timeline. You can also hide the Tools panel from the Window menu.
Check this out: Hide the timeline and tools, then press F4. Now press
Ctrl 2 (maximises the stage). My, what a big Stage you have! I would
show you a screenshot of that but trust me, it’s mostly white.

Bring everything back when you’re done though, as we’ll need a functional workspace
for the following exercises.
When you’ve got a work space that you’re happy with, save it once again by choosing
Workspace > Save Current and overwrite your Animator layout.
With the workspace saved, close Flash now and reopen it. Everything should be as you
left it and your saved workspace is ready for work.

So far we’ve opened up a lot of room for an uncluttered work space by customising the
Flash CS3 interface. With docking, grouping, stacking and keyboard shortcut keys, you
can pretty much hide everything, yet still have it all at your fingertips. Awesome.

- 14 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

Animating!
The worst thing about learning to use a new program is wading heavily through all the
crap about what tool does what and this doesn’t do that and pull my finger, blah blah.. So
before we go into any depth about rules, tools, panels, animation or even planning, we’re
simply going to get stuck in and create some animation. After all, we just wanna animate,
right?
I’ve always said that one of the best ways to learn is by experience, so let’s whet your
appetite by making a simple animated image in Flash. Along the way you’ll learn some
basics that’ll prepare you for upcoming chapters.
We’re going to step through this exercise quickly, so if there’s anything you don’t fully
understand, just follow along for the time being and all will be explained in later
chapters.

Setting up the movie

In this exercise you’ll create an animated avatar. It’ll be a small image that can be used
online as a profile page, an email signature or wherever you like.
We’ll need to set up the movie’s dimensions and background colour, but first be sure
you’ve reset your workspace to the saved Animator layout (Window > Workspace >
Animator).
Follow me – movie setup
1. Start Flash, and from the ‘Create New’ column, choose ‘Flash File
(ActionScript 3.0)’. A brand new document called Untitled-1 appears.

Fig. 1.16 – The new movie’s Timeline

The very first step is to set some basic Document Properties, such as dimensions and
background colour.
2. Choose Modify > Document
The window that opens presents you with some document properties, like dimensions,
frame rate and background color (see Fig. 1.17).

Adam Phillips P a g e | - 15 -
  BCA: Flash Animation 

Fig. 1.17 – Document Properties window with default settings

To create an animated GIF for use as a forum avatar, let’s set the dimensions of this
movie to 64 x 64 pixels, which is a pretty standard avatar size for most online forums.
3. The default dimensions are height: 550, width: 400. Change both of those fields
to 64.
Note: it’s not necessary to type ‘px’ into each field.

4. Click the background colour swatch and choose black.

Fig. 1.18 – The settings for our animated GIF avatar

5. Done! Click OK to finish and close the window.

- 16 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

Your Stage has shrunk to the size of a postage stamp but you can
zoom in. At the top right of the Stage, the zoom percentage field
probably shows 100%. Stage Zoom Shortcuts
• Ctrl 1 = 100%
• Ctrl 2 = Fit in window
• Ctrl 3 = Show All
• Ctrl 4 = 400%
• Ctrl 8 = 800%
Fig. 1.19 – The Stage zoom percentage
When you’re working at small dimensions, you can use the zoom
dropdown list shown above, or the Zoom Tool from the Tools panel. While it’s generally easier
to work with a higher stage
The Zoom tool magnification, it’s always
a good idea to check how
With the Zoom tool click on the Stage to zoom in, Alt+click your movie looks at 100%,
to zoom out (that is, hold down your Alt key while clicking). because when working at
Additionally, there are some nice little default keyboard shortcuts for greater magnification, it’s
Stage zooming: very easy to put in a level
of detail that is overkill.
See the sidebar on this page for a full list of zoom shortcuts.
Zooming back out to 100%
now and then gives you a
better idea of what it will
Follow me – adding frames
look like, and what detail
1. Choose 800% from the Stage Zoom dropdown list (see Fig. you need.
1.19), and your Stage will zoom in to a more comfortable
working size.
Now for a forum avatar we’re going to create a simple ball of light
with an animated electricity effect over about 10 frames.
Currently the movie consists of just one frame (not much of a movie),
so we’ll now add more frames to the movie.
2. Click once on frame 10 of the timeline.

Fig. 1.20 – Click once on frame 10

Adam Phillips P a g e | - 17 -
  BCA: Flash Animation 

3. Press your keyboard’s F5 key and the timeline now has 10 blank frames..
oO0oh!

Fig. 1.21 – F5 extends the exposure to the selected frame

Create some graphics

When you have a frame selected in the timeline, the Stage shows you what is on that
frame. Currently we still have nothing in the movie, so selecting the frames shows no
content on the Stage. Let’s change that now.
Follow me - painting
1. Choose the Paint Brush tool from the Tools Panel. The keyboard shortcut for
this tool is (B).
In the Properties Panel at the bottom of the Flash window, you should see the Brush tool
properties displayed.
2. Set the Smoothing to 20. Higher brush smoothing makes smoother strokes, but
we don’t want that just yet.

Fig. 1.22 – Brush Smoothing

3. You can also choose the paint colour here in the Properties panel. Click the Fill
Color swatch (next to the paint bucket icon) and choose white paint from the
palette.

Tip: Other places to select the Fill colour are from the Tools panel and the
Color panel, as shown in Fig. 1.23.

- 18 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

Fig. 1.23 – The Color panel’s Fill Color swatch

4. You’re ready for painting now, so paint a white circle in the centre of the Stage.
Don’t worry if it’s a little uneven. This is a simple introductory exercise and
later you’ll be able to create much better things.
5. Choose the Paint Bucket (or press its keyboard shortcut - K) and click inside
your white circle to fill it with paint.

Fig. 1.24 – White circle on the Stage

Fig. 1.25 – Filled using the Paint Bucket

You’ll notice that the timeline now indicates 10 frames are filled with content (see Fig.
1.26). Select any frame of these ten and you’ll see the same white blob on the Stage,
meaning that if we were to test the movie, we would see a white blob sitting there for ten
frames. Quite boring at this early stage, so let’s make it do something.

Fig. 1.26 – One blob, ten frames

Adam Phillips P a g e | - 19 -
  BCA: Flash Animation 

Simple Frame-by-frame Animation

The white blob is a ball of light that won’t change throughout the movie. It’ll remain
stationary while we make little electrical arcs crackle around it. It would be time-
consuming to draw that ball of light for each frame of the movie, but thanks to Timeline
Layers, we don’t need to.
We’re going to add a second Layer to the Timeline so that we can add electricity that
moves independently of the ball of light.
Follow me – working with Layers
1. Click the Insert Layer button as shown in Fig. 1.27 below.

Fig. 1.27 – The “Add Layer” button

You will now have two layers in the timeline. The first, lower layer contains the ball of
light which is held for ten frames. Let’s now create our animated electricity effects on
this new layer.
2. We’ll be drawing the animated electricity in the new layer, so now lock the
lower layer so that we don’t accidentally draw on our precious ball of light.

Fig. 1.28 – The “Lock Layer” padlock

- 20 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

Before we move on, a bit of house-keeping. Naming layers is very good practice,
making it easier for you to find elements of your scene quickly. Sure it may seem a little
pointless to you now, but trust me, later there will be more than two layers and ten frames
in your movies.
3. Double-click the name of Layer 2, and rename the layer ‘electricity’. You
should rename the lower layer while you’re at it.

Fig. 1.29 – Renaming the layers

4. You should develop a habit of always selecting the frame you’re about to start
working on, so select the first frame of the electricity layer.

Fig. 1.29a – Select the frame you’ll be working on

Important Note: Whenever you select something in Flash, you’ll

always see some kind of selection effect, to let you know that it’s the
active item.
In the Tools panel, a selected tool is highlighted. In the timeline,
selected frames turn black. In a drop-down list, the selected item is
ticked/checked.
Always keep this in mind as you use tools and select items, especially
with frames. If frame 10 is selected, you can’t add content to frame 1!

Adam Phillips P a g e | - 21 -
  BCA: Flash Animation 

Follow me - animation
OK let’s go:
1. With the Brush Tool still selected, notice at the bottom of the Tools panel
there’s a Brush Size section. Choose a finer brush size from the drop-down list
in the Brush Options.

Fig. 1.30 – Smaller Brush size

2. Now on the stage, draw an electrical arc from the ball of light to the edge of the
Stage. It doesn’t matter if you go outside the Stage, because anything outside
that edge will not show up in the final movie.

Fig. 1.31 – The first electrical arc!

We now have a ball of light held for 10 frames and one electrical arc, also held for 10
frames. Testing the movie now would still result in an incredibly boring playback! To
liven things up we need to animate this electricity.

- 22 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

Each electrical arc should last for 1 frame only, so we need to split this layer into 10
individual “keyframes”. Sound complicated? Well it’s not:
3. In the Timeline, select frame 2 of the ‘electricity’ layer, then press F7 (Create
Blank Keyframe)

Fig. 1.32 – One frame electricity, nine frames blank

The electricity layer is now blank except for frame 1, which contains the first electrical
arc.
Notice in the screenshot above (Fig. 1.32) that the timeline displays frame 1 with a solid
black dot, indicating that this frame has something on it. Frame 2 has a hollow dot, which
indicates there’s nothing on it.
What we want to do for this entire layer is create blank keyframes for all nine remaining
frames, then one by one, create electricity for each.
4. In the electricity layer, double-click any frame between 2 and 10. This selects
all frames between the blank keyframe (2) and the end of the scene (10).
5. Press F7 (Create Blank Keyframe) and all of your selected frames become blank
keyframes.

Fig. 1.33 – Nine blank keyframe, awaiting orders

Adam Phillips P a g e | - 23 -
  BCA: Flash Animation 

Now we’ve split the electricity layer into individual keyframes and as indicated by the
hollow circles, those keyframes are empty. Each blank keyframe is just like a blank page
in an animation flip-book. Let’s proceed by adding drawings to those blank “pages”.
6. Again, always remember to first select the frame you want to draw on. So select
frame 2 of the electricity layer, then on the Stage draw another electrical arc,
maybe even 2 or 3 of them.

Fig. 1.34 – The second electricity drawing

If you’d like to see your previous drawings as you create new ones, you should use the
Onion Skin tool. This handy little button simulates the effect of a traditional animator’s
lightbox, which shines light through sheets of paper in order to see previous drawings.
7. Select frame 3 now, before clicking the Onion Skin tool. You will faintly see
your first two drawings. Now you can create the artwork for frame 3 while
keeping the other frames in sight, a technique essential for good animation.

Fig. 1.35 – The Onion Skin tool

- 24 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

8. Go through and create different electrical arcs for each frame now. Stay in the
habit of selecting each frame before you draw on the Stage.
9. When you’re done, turn off the Onion Skin tool.
While you are animating the electricity, it’s OK to be completely random – this is the
first exercise after all! However, you should always keep your previous drawings in
mind. While electricity can appear random and chaotic, it can often have flow and
rippling arcs.

Tip: When an animator works traditionally with pencil and paper on a

lightbox, he constantly “rolls” his drawings (flipping drawings between
fingers) with the non-drawing hand. This allows him to see a mini playback
as he works, so that he can see how the animation is flowing.
You can do this too by dragging the play head (the red ‘current frame’
indicator) back-and-forth across the frames. This is called ‘scrubbing’ the
timeline.
Turn off the Onion Skin tool before you scrub the Timeline and you’ll be
able to see the animation more clearly.

When you’ve created electricity on all 10 frames, your timeline should look like this:

Fig. 1.36 – The animated electricity layer

The ball of light layer with only one piece of artwork is held for all 10 frames. The
electricity layer however has 10 individual key frames, each with its own unique artwork.
When played in sequence, the ball of light stays motionless while each frame of
electricity is displayed consecutively.
No doubt, you’ll want to see the animation working now. To do this from the Stage, first
go Control > Loop Playback. Now press Enter and each frame is displayed
consecutively as the play head moves rapidly across the frames. IT’S ALIVE!
Press Enter to stop the playback. Sometimes when previewing animation like this within
the Flash Timeline, there’s a frustrating pause in the loop (usually around frames 2-4). To
see the sequence as the animation god (that’s you) intended, test the movie by going
Control > Test Movie. This will play the movie at the proper dimensions (100%), looping
seamlessly in a separate Flash Player window. Impressive huh?
Close the playback window and now save your progress (File > Save), giving it an
appropriate name like ‘bzzt’ or ‘electricity’. It will be saved as a .FLA file type, which is
an editable Flash file. If you ever want to improve on this animated electricity or
add/remove stuff from it, the .FLA file is the one you will open in Flash.

Adam Phillips P a g e | - 25 -
  BCA: Flash Animation 

Export the animated GIF

You’ve successfully created a working piece of animation. Congratu-bloody-lations!
Now let’s finish it off by turning it into an animated GIF. The .FLA file that you created
in the authoring environment now needs to be compiled and compressed into a
standalone playable movie file. To do that you will need to export the movie.
Follow me - export
1. Go to File > Export > Export Movie…
2. Type a name for your animated GIF, and then from the ‘Save as type’ dropdown
list, choose Animated GIF.

Fig. 1.37 – Saving as Animated GIF

3. I suggest saving it to your desktop or somewhere easy to find. Then click Save.
4. You will be presented with several other options for your exported GIF, but
leave them as they are for now. Click OK to create your first animated GIF.
You can watch the GIF crackling away by locating it on your desktop (or wherever you
saved it on the computer) and opening it. If all has gone according to plan, you’ll have a
small animated ball of electricity that you can use as an avatar for a forum, blog profile or
whatever.

Fig. 1.38 – Locate the image, open it and bzzzt!

- 26 - | Page www.biteycastle.com
  Ch 1: The Animator’s Flash 

Summary
Proud of yourself? You should be!
My finished electricity GIF has a file size of just 3k, which is way under the average
avatar limit imposed by even the tightest forum administrators. Of course, this little
experimental GIF consists of only 10 frames, very simple animation and just two colors.
Creating a more complex GIF will result in much bigger files but at least now you’ve
started the journey and you can work up from here.
Why not build on what you’ve learned by making a more interesting ball of light?
Experiment with colours and brush strokes. You might even like to add more layers to the
Timeline for extra animated detail.
After this short introduction to the Flash CS3 working environment, you should have a
basic idea of where everything is and how the interface works. Not only have you
customised the interface but you’ve also used it to create some impressive frame-by-
frame animation.
In the next chapter we’re going to look more closely at the tools you’ll be using to create
graphics for Flash animation. We’ll put some of these into practice by completing some
drawing exercises.

BCA: Flash Animation 
by Adam Phillips 
 

Copyright ©2008 Brackenwood Entertainment. All rights reserved. 
Published online from Sydney, Australia 
 

Published by  
Brackenwood Entertainment,  
PO Box 177, Croydon NSW,  
2132 AUSTRALIA 
www.biteycastle.com 
 

Technical Editor: Jeanette Imer 

Adam Phillips P a g e | - 27 -