BCA_Flash_ch03

N o t e : I u s e a l i t t l e r o u g h l a n g u a g e i n t h i s b o o k .

By Adam Phillips

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

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 ‐

A d a m P h i l l i p s P a g e | - 1 -

Summary ......................................................................................................... ‐ 27 ‐

http://www.biteycastle.com/

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 - | P a g e w w w . b i t e y c a s t l e . c o m


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.



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.



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.



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.


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



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



• 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



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

- 1 0 - | P a g e w w w . b i t e y c a s t l e . c o m


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



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.



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.



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.



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).


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.



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%.

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.

The Zoom tool

With the Zoom tool click on the Stage to zoom in, Alt+click to zoom out (that is, hold down your Alt key while clicking).

Additionally, there are some nice little default keyboard shortcuts for Stage zooming:

See the sidebar on this page for a full list of zoom shortcuts.

Follow me – adding frames

1. Choose 800% from the Stage Zoom dropdown list (see Fig. 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


Stage Zoom Shortcuts • Ctrl 1 = 100%

• Ctrl 2 = Fit in window

• Ctrl 3 = Show All

• Ctrl 4 = 400%

• Ctrl 8 = 800%

While it’s generally easier to work with a higher stage magnification, it’s always a good idea to check how your movie looks at 100%, because when working at greater magnification, it’s very easy to put in a level of detail that is overkill.

Zooming back out to 100% now and then gives you a better idea of what it will look like, and what detail you need.


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.



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



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



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!



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.



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



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



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.


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!



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

nment. All rights reserved. Copyright ©2008 Brackenwood Entertai

ne from Sydney, Australia Published onli

Published by

t, Brackenwood Entertainmen

on NSW, PO Box 177, Croyd

2132 AUSTRALIA

ww.biteycastle.com w

Technical Editor: Jeanette Imer

Date post:	16-Mar-2016
Category:	Documents
Upload:	loren-helgeson
View:	214 times
Download:	2 times

BCA_Flash_ch03

Documents