Animation Techniques Guide

Animation
Techniques

Prepared by: Dave Parkinson
Duncan Bottrill
(Feb 2011)

Animation Techniques Page 2

Animation Techniques
The module runs for 12 weeks - 2 hours / week

Course Content
The Flash Environment
The Stage, Timeline, Tools Panel, Properties Panel
The Library
Getting around in Flash

Drawing and Painting
Flash Tools Panel
Importing Graphics into Flash
Using the Library
Understanding Layers

Animating in Flash
Frames and Framerate, Keyframes
Tweening
Using layers in your animation
Movie clips and Graphic Symbols

Sound and Video in Flash
Importing Sound files
Using and Editing Sound
Importing Video files
Using and Editing Video

Interaction in Flash
Creating Standard, Animated, and Invisible Buttons
Adding Sound to a button
Using ActionScript to control a movie
Advanced use of ActionScript
Creating a Quiz
Creating a Shoot-up Game
Creating a Jigsaw Game

Publishing your Flash Movie
Changing the Publish Settings
Publishing your movie

Assessment
The assessment of this module consists of:-
1 Assignment - Flash Animation 100% of module


Animation Techniques - Lecture Plan

Week 1 Introduction to Flash. The Flash Environment
Exercise 1 – Your first Animation

Week 2 Drawing and Painting (Exercise 2 and 3)
Importing Graphics (Exercise 4)
Using the Library (Exercise 5)

Week 3 Animation in Flash, Frames and Framerate. Using Keyframes. Using
layers in your animation

Week 4 Using the Masked Layer.
Movie clips and Graphics Symbols

Week 5 Adding sound and video to your animation

Week 6 Interactivity using buttons
Creating Standard, Animated and Invisible Buttons

Week 7 Introduction to ActionScript
Controlling movie clips with Buttons

Week 8 Advanced ActionScript. Publishing your Flash Movie.
Issue Flash Assignment

Week 9 Writing a quiz program

Week 10 Writing a shoot-up game

Week 11 Writing a jigsaw game

TBA Demonstrate and Mark Flash Assignment


ANIMATION TECHNIQUES CONTENTS

Chapter 1 : Introduction to Adobe Flash CS5 ......................................................................... 6
1.1 Introduction ..................................................................................................................................... 6
1.2 The Flash Environment .................................................................................................................. 6
1.2.1 The Stage .................................................................................................................................................... 7
1.2.2 The Tools Panel .......................................................................................................................................... 8
1.2.3 The Timeline .............................................................................................................................................. 8
1.2.4 The Properties Panel ................................................................................................................................... 9
1.2.5 The Library ................................................................................................................................................. 9
1.2.6 Getting around in Flash ............................................................................................................................ 10
1.2.7 Document Properties ................................................................................................................................ 11
1.2.8 File Types ................................................................................................................................................. 11
1.3 Exercise 1 - Your First Animation............................................................................................... 12
Chapter 2 : Drawing and Painting ......................................................................................... 14
2.1 Introduction ................................................................................................................................... 14
2.2 Flash Tools Panel .......................................................................................................................... 14
2.2.1 Exercise 2 – Flash Lesson “Illustrating in Flash” ..................................................................................... 15
2.2.2 Exercise 3 – Flash Lesson “Adding and Editing Text” ............................................................................ 16
2.3 Importing Graphics into Flash .................................................................................................... 16
2.3.1 Exercise 4 – Importing Graphics .............................................................................................................. 16
2.4 Using the Library .......................................................................................................................... 17
2.4.1 Symbols and Instances ............................................................................................................................. 17
2.4.2 Exercise 5 – Flash Lesson “Creating and Editing Symbols” .................................................................... 18
2.5 Understanding Layers .................................................................................................................. 18
2.5.1 Exercise 6 – Flash Lesson “Understanding Layers” ................................................................................. 18
Chapter 3 : Animating in Flash ............................................................................................. 19
3.1 Introduction to Animation ........................................................................................................... 19
3.1.1 Frames and Framerate .............................................................................................................................. 19
3.1.2 Keyframes and Blank Keyframes ............................................................................................................. 20
3.1.3 Tweening .................................................................................................................................................. 21
3.1.4 Motion Tweens v Classic Tweens .......................................................................................................... 21
3.2 Using Layers in your Animation.................................................................................................. 22
3.2.1 Exercise 7 – Using Layers to animate two circles .................................................................................... 22
3.2.2 Layer Properties ....................................................................................................................................... 23
3.2.3 Exercise 8 – Flash Lesson “Creating Tweened Animation” ..................................................................... 24
3.2.4 Exercise 9 – Creating a Bouncing Ball Animation using a Motion Guide ............................................... 24
3.2.5 Exercise 10 – Using a Masking Layer to create a Spotlight Effect .......................................................... 25
3.3 Movie Clips and Graphics Symbols ............................................................................................ 26
3.3.1 Exercise 11 - Using a Movie Clip to create a Rotating Wheel ................................................................. 26
3.3.2 When to use Movie Clips ......................................................................................................................... 27
Chapter 4 : Using Sound & Video in your Animation .......................................................... 28
4.1 Introduction ................................................................................................................................... 28
4.2 Sound in Flash Movies .................................................................................................................. 28
4.2.1 Supported File Formats ............................................................................................................................ 28
4.2.2 Using Sound ............................................................................................................................................. 28
4.2.3 Sync Settings ............................................................................................................................................ 29
4.2.4 Effect Settings .......................................................................................................................................... 30
4.2.5 Loop Settings ............................................................................................................................................ 30


4.2.6 Exercise 12 – Using Sounds in your Animation ....................................................................................... 30
4.2.7 Exporting your Sound Clips ..................................................................................................................... 31
4.3 Video in Flash Movies ................................................................................................................... 32
4.3.1 Exercise – Making a Playback Controller for an External Video ............................................................. 32
Chapter 5 : Interactivity in your Animation .......................................................................... 35
5.1 Introduction ................................................................................................................................... 35
5.2 Buttons in Flash............................................................................................................................. 35
5.2.1 Exercise 13 – Making a Flash Multiple States Button .............................................................................. 35
5.3 Advanced Buttons ......................................................................................................................... 36
5.3.1 Exercise 14 – Making an Animated Button .............................................................................................. 36
5.3.2 Exercise 15 – Adding Sounds to a Button ................................................................................................ 38
5.3.3 Exercise 16 – Making Invisible Buttons ................................................................................................... 38
5.4 Using Action Script ....................................................................................................................... 39
5.4.1 Using Actions ........................................................................................................................................... 39
5.4.2 Exercise 17 – Controlling a Simple Movie with ActionScript ................................................................. 40
5.4.3 Exercise 18 – Movie Clip Actions ............................................................................................................ 42
5.4.4 Exercise 19 – Linking to another Web Page using Flash ......................................................................... 43
Chapter 6 : ActionScript for Advanced Interactivity ............................................................. 45
6.1 Introduction ................................................................................................................................... 45
6.1.1 Using Scenes ............................................................................................................................................ 45
6.1.1 Exercise 20 – Using Scenes ...................................................................................................................... 46
6.2 Drag-and Drop Interactions......................................................................................................... 46
6.2.1 Exercise 21 – Making a Simple Draggable Object ................................................................................... 46
6.3 Programming in Flash .................................................................................................................. 48
6.3.1 Variables................................................................................................................................................... 48
6.3.2 Exercise 22 – Using a Variable to get the User‟s Name ........................................................................... 49
6.3.3 Condition Statements (If statement) ......................................................................................................... 52
6.3.4 Exercise 23 – Incrementing a Variable ..................................................................................................... 53
6.3.5 Advanced ActionScript Programming ...................................................................................................... 54
6.3.6 Exercise 24 – Writing a Quiz Program (see Blackboard for a detailed „how to‟ guide) .......................... 55
6.3.7 Properties .................................................................................................................................................. 55
6.3.8 Exercise 25 – Writing a Shoot-up Game .................................................................................................. 56
6.3.9 Exercise 26 – Writing a Jigsaw Puzzle ..................................................................................................... 57
Chapter 7 : Publishing your Flash Movie.............................................................................. 59
7.1 Introduction ................................................................................................................................... 59
7.1.1 Changing the Publish Settings .................................................................................................................. 59
7.1.2 Publishing your Movie ............................................................................................................................. 61
7.1.3 Embedding Fonts in a Flash Movie .......................................................................................................... 61


Chapter 1 : Introduction to Adobe Flash CS5

1.1 Introduction
Although there are many different techniques for generating animations for web sites there
is one method that far outweighs all the others (i.e. Adobe Flash). Adobe describes Flash
as “the professional standard for producing high-impact Web experiences”. Flash movies
are graphics, text, animation, and applications for web sites. They consist primarily of
vector graphics, but they can also contain imported bitmap graphics, video, and sound.
Flash movies can incorporate interactivity to allow input from viewers, and they can also
create movies that can interact with other Web applications. Web designers use Flash to
create navigation controls, animated logos, long animation sequences, and even complete
sensory rich web sites. Flash movies use compact vector graphics, so they download
rapidly and scale to the viewers screen size.

In order to view a Flash movie you must have the Flash player installed on your computer.
The Flash player is included in all browsers later than version 4 and it is estimated that in
excess of half a billion computer users now have the Flash player installed. We will be
using Adobe Flash CS5 with ActionScript2.0 in this module.

1.2 The Flash Environment
The Flash environment is deceptively simple. It is possible to get started drawing and
animating right away. However in order to get the best out of Flash it is important to
understand the Flash environment in detail. The key to understanding Flash is to always
know where you are and exactly what you are editing. It is easy be become disorientated
as to which element you are actually editing.

The Flash environment consists the following main elements:-

The Stage is your visual workspace. Any elements placed in this area will be
visible within your Flash movie

The Tools panel contains all the drawing tools used in Flash

The Timeline panel contains the sequences of images that make up an animation.
The timeline can include many layers of animations, enabling graphics to appear
above and below other graphics, and several animations to play simultaneously.

Panels contain other important information regarding your animation (e.g. the
properties panel, the library). Panels can be docked to other panels around the
outside of the stage. You can organise panels to suit your work style.


The Stage Timeline Properties Panel Tools Panel
Panel

1.2.1 The Stage

The stage is the large white rectangle in the centre of the screen. It is the place where all
the items in the flash movie are placed. Sometimes you may wish a graphic to begin
outside the stage and move onto it. Off the stage is the grey area outside the white central
area.

By default, the stage is a rectangle set to 550 pixels wide and 400 pixels high. However,
the specific dimensions in pixels are less important than the resultant shape of the stage (or
aspect ratio). The pixel dimensions are unimportant because when you put your Flash
movie on the web you can specify that Flash scales the movie to any dimension.

By using the zoom control you show areas of the stage in as much detail as you require.


1.2.2 The Tools Panel

Any time you create or edit anything on Stage you will need a tool selected from
the Tools panel. Although the tools panel is used primarily to draw onto the stage it
is also used to edit what you have already drawn. The tools panel is broken down
into several sections: Tools, View, Colour, and Options.

The tools section enables you to create graphics and text (via the Line tool and the
Text tool), to edit graphics (via the Eraser tool and the Paint Bucket tool), and to
select graphics (via the Arrow tool, the Subselect tool, and the Lasso tool).

The View section lets you change your view of the Stage.

The Colours section gives you control over the colours of the objects drawn on the
Stage.

The Options section is used to provide additional modifiers for certain tools.
Dependant on the tool selected you may or may not see anything in this area.

1.2.3 The Timeline

The timeline contains the sequence of individual images that make up an animation. When
the user watches your animation he sees the images on frame 1 followed by frame 2 etc.
When you start to create animations, the timeline includes information such as the length
of the movie and how the movie will be displayed. In addition to frames, the timeline lets
you have as many layers as you want in your animation. Objects in one layer can appear in


front of, or behind, objects in other layers. Each layer can contain a separate animation,
allowing multiple animations to occur at the same time. By using special effects, such as
masking, you can create complex animations.

1.2.4 The Properties Panel

The properties panel displays properties of the currently selected object so that you can
make adjustments. For example, if you select a block of text the properties panel lets you
view and change the font face and size. When you select a filled shape, you can adjust the
fill colour of that shape.

1.2.5 The Library

The Library is the area in which you store all the media elements used in your Flash file.
Any media placed in the library can be used repeatedly within your file and regardless of
how many times you use the media it doesn‟t significantly add to the final size of your
Flash movie (e.g. if you have a picture of a cloud in the library, you can drag 100 copies of
the cloud onto the stage without increasing the size of your movie).


The library is used for either editing the contents of the library (symbols) or for accessing
its contents for use on your stage (instances).

A symbol is the name given for anything you create and place in your files library.

An instance is the name given to one copy of a symbol used in a movie. Every time you
drag a symbol from the library onto your stage you are creating an instance of that symbol.
An instance is not a copy in the traditional sense of the word because there is only one
master of the symbol and each instance you create will have a negligible impact on the
final size of your movie.

The library behaves like any other panel. It‟s available under Window_Library or by
pressing Ctrl+L.

1.2.6 Getting around in Flash

An important concept in Flash is to understand where you are and what you are viewing. If
you think you are in the library editing a symbol you should check you are actually there
rather than editing a frame within the animation. Information on where you are is given in
the interface.

Current Layer
Although there is just one timeline you can have many different layers within the timeline.
One important concept in Flash is that you can only be in one layer at a time. If you draw
or paste graphics they are added to the current active layer. You can identify the active
layer within the timeline as it has a pencil icon next to it. You can change the active layer
by clicking on a new layer in the timeline.


Current Frame
In the timeline, a red marker indicates which frame is currently being viewed. This red
current frame marker can only be in one frame at a time, and that is the frame you are
currently editing.

Current Scene
In Flash you can divide the timeline into a number of different scenes. This enables you to
work on smaller sections of your movie or change the order and sequence of your scenes.
The name of the current scene is always listed in the address bar directly above the stage.

1.2.7 Document Properties

When you start a new movie you will need to specify a few settings. Most of these settings
can be found in the Document properties dialog box accessed by the Modify_Document
menu. First make sure the Ruler Units is set to pixels. You can also change the
background colour of the movie. Frame rate specifies the rate at which Flash attempts to
play the movie. Dimensions will affect the aspect ratio of the stage.

1.2.8 File Types

Source .fla files
This is the source file for your Flash movie. It uses the file extension .fla. If you wish to
change your Flash movie you must edit the .fla file. Note that you cannot put a .fla file on
the web for people to view; these files only contain your source content.

Exported .swf files
When you have finished editing your source file and are ready to create and distribute your
movie, you can simply export a .swf “Flash Player” file. A .swf file can be viewed by
anyone with an Internet browser and the Flash player plug-in. Note that you cannot edit a
.swf file. The completed .swf can be placed with your HTML pages using Microsoft
Expression Web or Adobe Dreamweaver.


1.3 Exercise 1 - Your First Animation
It is actually possible to jump right into Flash and create a simple animation in a matter of
seconds. Although you will only use very few Flash features this exercise shows how
simple Flash can be to use.

Follow the steps shown below:-

1. Open Adobe Flash CS5. Select File_New and choose Flash File (ActionScript2.0).
Throughout this module we will always use these settings when opening a new Flash
File.

2. Select the Circle Tool from the tools panel.

3. On the left side of the stage, click and drag down to draw a medium size circle.
This will be how the animation begins.

4. Flash will only allow you to animate an object that is stored as a symbol in the
library. Use the arrow selection tool to select the circle. Select it, and convert it to
a symbol by right clicking on the object and selecting Convert to Symbol
(alternatively press F8, or drag the object into the library). Name it circle, select
the movie clip behaviour, and click OK.


5. Select the instance of your circle on the stage and right click on the circle and
choose Create Motion Tween. Note that Flash has extended the timeline to frame
24 (one second into your animation) and created a keyframe (identified by a
diamond shape in the timeline). With frame 24 selected (identified by the red
marker – the current frame indicator), drag the circle to the opposite side of the
stage. Note that Flash will automatically create a motion guide.

6. Finally, return to frame 1 by clicking the dot underneath the “1” in the timeline.

7. To view your animation, simply press the Enter key. Save you completed program
as Exercise1.fla.

8. Modify the animation by changing the position of the circle in frames 1 and 24.
Also modify the properties of the circle in frame 24 and look at the effects on your
animation. Try moving the motion guide to alter the path of your animation. You
can also change the length of your animation by dragging the end point in the
timeline to a new location. Note that if I move the position of the circle within the
animation a new keyframe will automatically be created. This enables more
complex animation paths to be created.


Chapter 2 : Drawing and Painting

2.1 Introduction
Originally Flash was designed as a drawing tool. Its creators intended it to be a “more
natural” drawing tool than products like Photoshop or Illustrator. Since then it has evolved
to become an animation tool, and because you will be animating images it is more
convenient to draw the images you require inside Flash. The latest version of Flash
(Adobe Flash CS5) has exactly the same drawing tools interface as Photoshop CS5 and
Illustrator CS5.

Graphics created in flash are vector graphics, and hence they can be scaled. They are also
very small in size and hence are perfect for use on the web.

2.2 Flash Tools Panel
Everything your audience see is drawn on the stage using tools in the tools panel.
Sometimes you may even draw an object of stage and animate it into view. Note that
drawing of the stage requires that you have Work Area selected in the View menu.

The drawing tools should appear, by default, at the right side of the screen. If they are not
visible use the Windows_Tools drop down menu.

Some of the tools let you create artwork (Pencil and Brush Tools) while others simply help
you modify or View your artwork (Arrow and Zoom Tools).

Within the Tools menu both the View tools (Hand and Zoom) have no effect on the
artwork. They are simply used help you see your artwork.

To use Flash effectively you must become familiar with these drawing tools

We will be using a series of Flash Tutorials with this course. The zip file containing these
tutorials can be downloaded from Blackboard (download Flash Lessons from the
Animation section on Blackboard) or from the Help section on www.webdesigninfo.co.uk.

To run the tutorials open Flash CS5 Professional and then open the menu.swf file within
the Flash Tutorials directory as shown below:


2.2.1 Exercise 2 – Flash Lesson “Illustrating in Flash”

The best way to explore the drawing tools within Flash is to undertake and complete the
lesson “Illustrating in Flash”. When you open the lesson you are presented with an
instruction screen which remains on top of Flash and leads you through the lesson.

To complete this lesson you need to open the Illustrate.fla program in Flash from within
the work files folder you downloaded. This lesson should take approximately 20 minutes
to complete.


2.2.2 Exercise 3 – Flash Lesson “Adding and Editing Text”

To create text in Flash you simply select the text tool, click, and start typing. You can
modify the font, colour, and style of what you‟ve typed after you create it.

The best way to explore the drawing tools within Flash is to undertake and complete the
lesson “Adding and Editing Text”. This lesson should take approximately 10 minutes to
complete.

2.3 Importing Graphics into Flash
Despite how powerful Flash‟s graphics creation facilities are they will be occasions when
you want to import graphics created elsewhere. Two good reasons are importing a
photographic image or importing an existing graphic. Flash has the capability of importing
either vector graphics or bitmap graphics in almost any format. Given the capability of
Flash to create vector graphics there is little reason to import vector graphics created in a
different program. With bitmap graphics although Flash can import them it is not
recommended due to the large increase in file sizes (and hence download times) this will
create.

If you do wish to import a bitmapped graphic (i.e. a photograph) then you can do so using
The File_Import drop down menu. Flash supports .jpg , .png , .gif , .bmp , or .pct formats.
When you import a graphic you not only place it on the stage but Flash also puts the
master bitmap item in the Library. Even if you delete the onstage item the master bitmap
will still be preserved in the Library (as a bitmap icon). This bitmap icon provides a way
to specify how the image should be exported when you create a movie for the web.

Flash imports all kinds of bitmap formats but only uses JPG (and its compression level) or
GIF/PNG (lossless) in the exported movie. JPEG compression is usually the most efficient
option. With a JPEG image you can experiment with the Bitmap Properties dialog box
(available in the Library), clicking the Test button after each change to see the effect of
changing the type of compression and compression levels on both image quality and file
size.

2.3.1 Exercise 4 – Importing Graphics

1. In a new Flash file, import (select file – import – import to library) a graphics file
(.jpg , .png , .gif , .bmp , or .pct) to the library

2. Open the Library (Ctrl+L) and select your imported graphic.

3. From the Library‟s Options menu (inside library window, top right drop down
menu) select Properties. This should open the dialog box as shown below :-


4. Change the settings for the bitmap and note the effect on image quality and file
size.

2.4 Using the Library
The library in flash is fundamental to creating a movie. Using the library as much as
possible is your key to productivity and efficiency. You will improve productivity by
using the library because you will have „master‟ versions of your graphics, which with one
edit, will reflect the change throughout your movie. You will improve efficiency because
graphics stored in the library, despite how many times they are used within your movie,
are stored and downloaded only once, in the library.

2.4.1 Symbols and Instances

Symbols are what you put in the library. Anything created in Flash (shapes, other
symbols, animations) can be placed in the library and will then be called a symbol. In
addition the library also contains three media types that can only be imported into Flash
(bitmaps, audio, and video).

Instance is the term given to a symbol anytime it is used outside the library. Each instance
is a copy of the original symbol. The key feature of using an instance of a symbol is that it
does not add to the overall file size of the movie.

The process of using the library involves creating symbols and then using instances of
those symbols throughout your movie. You always have the master version of the symbol
stored in the library. You can drag multiple instances of the symbol from the library to any
other part of the movie (even inside other symbols). The individual instances of the
symbol can be edited without affecting the symbol held in the library.


2.4.2 Exercise 5 – Flash Lesson “Creating and Editing Symbols”

The best way to explore the library facilities within Flash is to undertake and complete the
lesson “Creating and Editing Symbols. This lesson should take approximately 10
minutes to complete.

2.5 Understanding Layers
Layers are like transparent sheets of acetate stacked on top of each other. Layers help you
organise the artwork in your document. You can draw and edit objects on one layer
without affecting objects on another layer. Where there is nothing on a layer, you can see
through to objects on the layers below.

To draw, paint, or otherwise modify a layer, you select the layer to make it active. A
pencil icon next to the layer indicates it is active. Only one layer can be active at a time.
When you create a new Flash document, it contains only one layer. You can add further
layers to organise the artwork, animation, and other elements in your document. The
number of layers you can create is only limited by your computer‟s memory.

You can organise and manage layers by creating layer folders and placing layers in them.
You can expand or collapse layers in the Timeline without affecting what you see on the
stage.

2.5.1 Exercise 6 – Flash Lesson “Understanding Layers”

The best way to explore layers within Flash is to undertake and complete the lesson
“Understanding Layers”. This lesson should take approximately 10 minutes to complete.


Chapter 3 : Animating in Flash

3.1 Introduction to Animation
Animation is made up of a series of individual images that are displayed sequentially so
quickly that the eye is fooled into thinking it is seeing continuous motion. This is the same
principle as film or television. For example a motion picture consists of a series of still
pictures presented in the cinema at a rate of 24 pictures per second.

3.1.1 Frames and Framerate

Animation is a series of still images. Each image is called a frame. In Flash the frames are
the rectangular cells in the timeline. They are numbered at the top of the timeline. The
frames are shown in white with every fifth frame being in grey. The timeline will display
all the frames but you can only view one frame at a time on the stage. The red frame
marker indicates the frame you are currently viewing.

When you open a new Flash movie, by default the timeline will only be one frame long
and the current frame marker will be unmovable as there is only one frame in your
animation. To understand how a completed animation we will examine in more detail the
Flash animation we created earlier. Open the file “Exercise1.fla”. When opened the
animation appears as follows.

We can use this animation to illustrate a few of the important concepts in Flash. :-

To view a particular frame in the animation just click in the numbered area at the top of the
timeline at the position of the frame you wish to view.


If you click and drag the current frame marker in the timeline all the way from frame 1 to
20, you will see a quick preview of the animation. This technique is called scrubbing. The
preview you see will depend on how fast you scrub.

When you watch an animation the framerate (the rate at which frames are played back to
the user, measured in frames per second) is locked to the value set by the designer of the
animation. When you select Control_Play (or just click Enter), you will see the
animation played at its correct framerate.

It is easy to confuse framerate with speed, but they are not the same. A 10 frame movie at
10 frames per second will take the same time to play as a movie of 20 frames at 20 frames
per second (1 second) and will probably look identical. A higher framerate may produce a
smoother animation but if it is played back on a slow computer it may appear slow or
appear to stutter. Flash sets a default framerate of 12 frames per second and this should
prove adequate for most applications.

Current frame number Current time

Frame rate

The status area in the timeline contains three important numbers related to the timeline.
The current frame number indicates the location of the red current frame marker.
The framerate normally indicates the framerate for your movie (from the menu
Modify_Movie Properties). This number will be changed if after playing the movie Flash
estimates that it cannot actually keep up with your “requested framerate”.
The current time indicates how long it takes to reach the frame you are viewing from the
start of the movie.

3.1.2 Keyframes and Blank Keyframes

A keyframe is simply a frame in which you establish what should appear onstage at that
particular point. This might include an image, or it may be blank (if blank it is called a
blank keyframe).

In traditional film animation every frame is a keyframe. In Flash you can make every
frame a keyframe or you can take shortcuts. If the first keyframe occurs in frame one and
the next change (or next keyframe) occurs at frame 10, then there will be no change
onscreen during frame 2-9. By leaving a gap between keyframes you are effectively telling
Flash to place the material on the stage and leave it there until the next keyframe occurs.


Establishing a keyframe is simply a matter of clicking the cell in the timeline exactly
where you want a keyframe to occur. When you have selected the cell where you want the
keyframe, select Insert_Keyframe (or press F6). Flash indicates you have inserted a
keyframe by placing either a solid or a hollow circle in that frame, and by copying the
onstage contents of the previous keyframe. If at the previous keyframe you have nothing
onscreen then a blank keyframe is inserted. If at the previous keyframe you have
something drawn onscreen, that shape or symbol instance is copied onstage at the new
keyframe. This can be very convenient, as often in your animation, you will just require a
small change to the previous keyframe and this can be easy to achieve if you start with a
copy of the previous keyframe rather than drawing it from scratch.

3.1.3 Tweening

You can put what you want in keyframes. The space between two keyframes effectively
“holds” the content of the onscreen image from the previous keyframe. Alternatively you
can tell Flash to interpolate the change; a process known as tweening. Tweening is the
process of interpolating two keyframes. Tweening will smooth out a big change by
breaking into little steps. For example, suppose in one keyframe there is a car on the left
side of the stage. The next keyframe show the car on the right side of the stage. Flash will
calculate how to move the first image to the second and create the intermediate frames to
smooth out the animation.

3.1.4 Motion Tweens v Classic Tweens

Flash supports two different types of tweens for creating motion. Motion tweens,
introduced in Flash CS4 Professional, are powerful and simple to create. Motion tweens
allow the greatest control over tweened animation. Classic tweens, which include all
tweens created in earlier versions of Flash, are more complex to create. While motion
tweens offer much more control of a tween, classic tweens provide certain specific
capabilities that some users may want.

To use a classic tween follow the steps shown below:-

1. Open Adobe Flash CS5. Select File_New and choose Flash File (ActionScript2.0).

2. Select the Tool from the tools panel.

3. On the left side of the stage, click and drag down to draw a medium size oval. This will
be how the animation begins. Convert the oval to a symbol and call it circle.

4. Make sure the timeline panel is visible. Click the cell directly under frame 20. Then
insert a keyframe (from drop down menu). Note that the instance of the circle has been
copied to frame 20. Move this instance to the right hand edge of the screen


5. Finally, return to frame 1 by clicking the dot underneath the “1” in the timeline. Right
click on the dot and select „Create Classic Tween‟

6. To view your animation, simply press the Enter key.

3.2 Using Layers in your Animation
Like all other graphics editing tools, layers in Flash can be used for visual layering
(placing different images above and beneath other images). However this is not the main
purpose of layers within Flash. In Flash multiple layers are in fact multiple timelines. The
images contained in layers are stacked above and below other layers, but their primary
value is to provide you with separate timelines in which you can control animations
independently. Flash only allows you to animate one item per layer (and that item has to
be an instance of a symbol). If we wish to animate two objects in the same scene then we
must place them on separate layers.

3.2.1 Exercise 7 – Using Layers to animate two circles

In this exercise we will create two circles on the screen and move the circles
independently, at different speeds.

1. Open a new Flash file, draw a circle, select it, and convert it to a symbol (press F8).
Name it circle, select the movie clip behaviour, and click OK.

2. We need to name our current layer. To name a layer double click on the name of the
layer in the timeline and name it „fast‟.

3. To create the motion tween, right click on the circle in frame 1 and select „Classic
Motion Tween‟. With frame 24 selected, drag the circle to the opposite side of the
stage. Test this simple animation by pressing the enter key.

4. Now create a new layer by selecting Insert-Layer from the drop down menus or by
clicking the Insert Layer button at the bottom of the timeline. Name this new layer
slow. From this point forward you need to be aware of which layer you are currently
editing. You can only be „in‟ one layer at a time, and this is indicated by the pencil
icon in the layer.

5. Now open the library (Ctrl+L), and drag a new instance of the circle onto the stage in
the slow layer, in the same path, but slightly to the right of the previous circle in the
fast layer. To identify this second circle easily, select it, select tint from the Properties
menu, and change the colour of the circle.

6. In the same manner as before, create a „Classic Motion Tween‟ on the slow layer to
move to circle to a position just short of where the fast layer finishes (perform this
motion tween over the same 24 frames as used by the fast layer).


7. Test the movie by pressing the Enter key, you should see the two circles moving at
different speeds across the screen. Save your movie as Exercise7.fla.

8. You can hide the contents of a layer by clicking the dot underneath the „eye‟ icon in
the timeline. Test this by hiding each layer in your movie independently and testing
your movie.

9. Which layer appears on top in your movie depends on its position in the timeline. You
can alter the order of layers in your movie by dragging the layers to different
positions. Change the relative positions of the fast and slow layers in your movie and
observe the effects.

3.2.2 Layer Properties

In the previous exercise we have seen how the pencil icon indicates which layer is
currently being edited. Other icons in the timeline indicate layer properties that can be
modified.

Layer Name – lets you name the layer.

Show/Hide Layer – allows you to temporarily hide the contents of a layer by clicking the
dot beneath the eye.

Lock/Unlock Layer – lets you individually lock or unlock layers.

Show Layer as Outlines – lets you view the contents of a layer in outline format. Each
outline will have a separate colour corresponding to the colour shown underneath the
square in the timeline.

When you create a new layer you can assign it one of several properties:-

Normal Layer – this is the standard layer of the type used in the last exercise.

Regular Guide Layer – this is a special layer into which you can draw anything you want
(usually shapes to help you align graphics or notes in different sections of your movie).
Everything contained in a Guide layer is excluded from your final exported movie (your
.swf file).


Motion Guide Layer – this contains a line to which you associate a Motion Tween. It is
how you make a Motion Tween follow a path.

Guided Layers – are available only if the adjacent layer above it is set to Motion Guide. In
the Guided layer you can create a Motion Tween that follows the path drawn in the Motion
Guide layer.

Mask Layers – let you place any shape or movie clip symbol that will define the visible
(and nonvisible) portion of the layer below it, which is set to masked. In the mask layer
you draw where you want „holes‟ in the mask.

Masked Layers – are only available when the layer above is set to mask. The contents of a
masked layer will be invisible except in areas where objects are placed in the mask layer.
This effect is not visible until you test the movie or lock both the Mask and Masked layers.

3.2.3 Exercise 8 – Flash Lesson “Creating Tweened Animation”

The best way to explore tweened animation tools and motion guides within Flash is to
undertake and complete the lesson “Creating Tweened Animation”. This lesson should
take approximately 15 minutes to complete.

3.2.4 Exercise 9 – Creating a Bouncing Ball Animation using a Motion Guide

You are required to create a simple animation that shows a ball bouncing across the screen.
The ball should follow a similar path to the one shown below.

Save your completed program as Exercise9.fla

Hint –use a „Classic Tween Guide‟ and make sure the guide path is one continuous line
that does not overlap.


3.2.5 Exercise 10 – Using a Masking Layer to create a Spotlight Effect

When you use masking to create special effects you need at least two layers; one for the
mask and one that gets masked. The graphical contents of the masked layer will determine
which parts of the masked layer will show through. It is as if you are drawing holes to see
through the mask layer. This exercise will create the effect of a spotlight moving across a
City skyline.

1. First we need to create the spotlight and its motion. In a new file, draw a filled circle
in the middle left hand side of the stage and convert it to a Movie Clip symbol called
Spot. Name the layer in the timeline Spot Motion.

2. Insert a keyframe in frames 10, 20 and 30. In frame 10 move Spot to the middle of the
stage, and in frame 20 move Spot to the right hand side of the stage (leave frame 30
matching frame 1). Set up „Classic Motion Tween‟ between frames 1 to 10, 10 to 20
and 20 to 30.

3. Change the Spot Motion layers type property to Mask (double click the page curl icon
for this layer to access its properties). The page curl icon should change to a mask
icon. Lock the layer so it cannot be changed accidentally.

4. Insert a new layer below the Spot Motion layer and change its type to Masked. Name
the new layer Skyline. In the skyline layer, draw lots of boxes. Make them different
colours, as shown below, to represent a city skyline. Change the background colour of
the movie to black. Test the movie (you will need to lock the Mask and Masked layers
for the animation to function).

5. Although the animation works it is not very effective as the background is to dark. We
can improve this by adding another layer with a dim version of the skyline to make
the animation more believable.

6. First, select all the boxes you drew in the skyline and convert this shape into a movie
clip symbol called Building Graphic. Create a new layer at the bottom of your
timeline called Dim Skyline. Change the properties of the new layer to Normal.
Copy an instance of Building Graphic (from the Skyline layer) and paste it into the
Dim Skyline layer (Ctrl+Shift+V). Hide all the layers except Dim Skyline and then
with the instance of the Building Graphic selected change the Colour Effect to
Brightness and change the value to -40%. Test the movie and save as Exercise10.fla.


3.3 Movie Clips and Graphics Symbols
When you create a symbol in the library, Flash asks if the symbol should have the
behaviour of a Movie Clip, Graphic or Button. It would be reasonable to assume that
Graphic symbols are only for symbols that contain a single frame and Movie clips are for
multiple frames. For example we could make a graphic symbol of a wheel with spokes.
We could then animate an instance of the wheel, making it rotate, and saving the
animation in a movie clip. We could then create a graphic symbol of a car and add the
movie clip of the wheel to it. If we then animate the car to move it across the stage, then
the wheels will also rotate as the car moves across the screen. However this method of
working is not always the best approach and there are many times when it is more sensible
to define a single frame graphic as a movie clip.

3.3.1 Exercise 11 - Using a Movie Clip to create a Rotating Wheel

1. Draw a circle with two lines crossing it to look like a spoked wheel as shown below.
Select the entire shape; convert it to a symbol (F8). Name it Wheel, and save it with
movie clip behaviour. We are going to make a movie of the spinning wheel, but first
we need a plain wheel (note we can only Classic Tween symbol instances).


2. Onscreen you should now have an instance of the Wheel symbol. Select the onscreen
instance and convert it to a symbol. Name it Rotating Wheel and select movie clip
behaviour (what we have done is to take an instance of the Wheel and put it in the
rotating wheel symbol).

3. Open the master version of Rotating Wheel (by double-clicking the instance
onscreen). You should see Scene1 : Rotating Wheel in the address bar. Single-click
this instance in order to select the Instance of : Wheel (this should appear in the
properties panel).

4. Animate the master version of Rotating Wheel. Click in frame 20 and insert a
keyframe (F6). Select the first frame and select „Classic Motion Tween‟ and in the
properties panel select Rotate, CCW, 1 time. Test the movie using ctrl + enter.

5. Create another instance of Rotating Wheel by dragging a copy of it from the Library
(Ctrl+ L). Position the two rotating wheels side by side and draw the outline of a car
around them. Select everything and convert to a symbol with movie behaviour called
Car.

6. Insert a keyframe at frame 30 (in the main timeline). Move the car to the right hand
side of the stage. Select frame 1 and move the car to the left hand side of the stage.
Select a Classic Tween. Test the movie. Save the movie as Exercise11.fla

3.3.2 When to use Movie Clips

As a general rule you should consider using movie clips for everything you can, including
static Graphic symbols. Movie Clips usually contribute less to the overall file size than
graphic symbols, so using them is a sensible choice. However there are some instances
when you should use graphic symbols instead.
Multiframe graphic symbols must be used if you want to use the „scrub‟ facility to preview
your animation (Movie clips cannot be „scrubbed‟). In addition, movie scripts
automatically loop and if you want it to stop you have to put in a script to make it stop.

One major problem with Graphics scripts is the way in which they lock themselves to the
timeline. Although his makes synchronisation easy, it does cause other problems. If we
were to use graphic symbols for the rotating wheel described earlier, we would have to
ensure that if the car was to travel over 20 frames of animation, then the rotating wheel
would have to contain 20 frames of animation or else the results would be unpredictable. A
movie clip, in contrast will continue to play regardless of how many frames it is used in (in
fact it will continue to play even when the animation containing it has stopped).


Chapter 4 : Using Sound & Video in your Animation

4.1 Introduction
Sound and Video are a very powerful addition to your animation. However if you create a
movie with poor sound or video, the audience will notice immediately. It is important to
use audio and video effectively because sound and video will inevitably be the largest
portion of your exported movie‟s file size. Unfortunately Flash does not contain a “make
my sound and video come out good option” and the choice has to be made between good
quality audio and video, and small file size.

4.2 Sound in Flash Movies
Flash has excellent support for audio but it provides no internal way to record or create
sounds. You must import an existing sound clip into the library in the same way as we did
for bitmap graphics.

4.2.1 Supported File Formats

Flash can import digital audio in the following file formats :-

MP3
WAV
AIF
AU

The first two formats are PC formats, AIF is an Apple Mac format and AU is a Sun
Microsystems format. MP3 is a compression format that offers much smaller file sizes at
lower quality.

4.2.2 Using Sound

The usual place for using sounds in Flash is in keyframes. When you select a keyframe,
the properties panel provides a way to control what sounds play when you reach a selected
keyframe.
In order to add a sound to a keyframe you must first import it into the library. Then when
you select a keyframe the properties panel will contain the option to add a sound to the
keyframe as shown below :-


After selecting which sound should be attached to the keyframe you need to control how it
should play. Various options are provided within the properties panel to control your
sound.

4.2.3 Sync Settings

This controls how your sound will play, or more specifically, the priority of sound
compared to the visual elements in your animation.

Event – this is the default setting and when chosen will cause the selected sound to start to
play when the keyframe is reached, and keep playing until the sound clip is completed.
Sounds will always play at the same speed but if you are on a slow machine the graphics
may not keep in sync with the sound.

Start – this is similar to event except it does not allow multiple instances of the same
sound to be actioned.

Stop – this will stop a particular piece of music. It only stops the selected sound, all other
sound clips continue playing.

Steam – this causes the sound to remain perfectly synchronised with the timeline. If visual
elements are playing slower then the sound, Flash will skip frames to retain
synchronisation. Stream sounds are previewed as you „scrub‟, making the process of
synchronising audio to images possible.


4.2.4 Effect Settings

The properties panel provides many effects you can add to the selected sound. In the drop
down box next to effect, you will find effects such as fade in, fade out etc

In order to customise these setting you can click the edit button. This opens the Edit
Envelope dialog box as shown below:-

The displays show both left and right channels. Time In and Time out lets you select the
section of the sound clip you wish to play, and the envelope facilities let you set the
volume level at a particular section of the sound clip.

4.2.5 Loop Settings

The properties panel has a field that lets you specify the number of loops a particular
sound should play. If you wish the sound to „loop forever‟, the recommended practice in
Flash is to put a large number (99999999999) into the Loop Field.

4.2.6 Exercise 12 – Using Sounds in your Animation

You are required to create a simple animation that plays a sound clip as follows

1. Import a sound clip into the library (a .wav file)
2. Attach the sound clip to a keyframe in your movie.
3. Use the effect controls to edit the sound clip. Try out the various envelope features.

Save your completed movie as Exercise12.fla


4.2.7 Exporting your Sound Clips

To set the default sound format for every sound in a Flash movie, select File_Publish
Settings. When you select the Flash tab you should see the dialog box shown below.

The dialog box contains two different sound settings, Audio Stream and Audio Event.
Audio Stream affects sound affects sound instances using the Stream sync settings,
whereas Audio Event affects sounds using the Event sync setting (plus sounds set to
Start). Each option contains a Set button enabling you to set the sound quality. There are
five options :-

Disable – tells Flash not to export sounds

ADPCM – only use this setting if you wish your movie to play in Flash 3 or earlier.

MP3 – this is the usual setting for sound. When exporting your movie you should always
use the quality setting „best‟. However, when working on you movie it will go quicker if
you use the „fast‟ setting. The bit rate should be set to the download speed you expect the
clients modem to operate at. If the clients for your movie are using a 56K modem then you
should set the bit rate to a maximum of 56Kbps.


Speech – this is a new setting which will operate is users have the Flash 6 player installed.
It is a compression optimised for the human voice.

Raw – leaves your sounds in there original format

The overall sound settings check box will cause the settings you apply in this dialog box to
be imposed on all sounds in your movie regardless of their individual export settings.

In addition to a movies globally specified sound settings, each sound item in the Library
can have its own individual settings which can override the Publish Settings. The choice of
settings is virtually identical to the publish settings with additional information on the
effect on file size and quality.

4.3 Video in Flash Movies
Flash CS5 has excellent support for video, it is the format used on YouTube. There are
two ways to play video in Flash, either embedded within a Flash movie or as an external
.flv file. Flash plays videos progressively i.e. the video starts playing before all the video
has been downloaded from the hosting web site. Flash can import most types of video files
(.mov, .dv, .mpg, .mpeg, .wmv, .avi) but it must compress then using one of two supported
codecs before it can play the video. Flash supports two codecs, the older Sorenson Spark
(which works on Flash 6 or later) and the newer, much better quality, On2 VP6 codec
(which requires Flash 8 or later).

4.3.1 Exercise – Making a Playback Controller for an External Video

1. In a new file (create a new directory to hold this exercise), select File, Import, Import
Video.


2. Flash only supports video created in FLV or F4V format. Before you can use your
video clip you must convert it to F4V format using Adobe Media Encoder. Launch the
encoder and convert your video clip (a sample .dv video clip can be downloaded from
Blackboard). The encoder can be used to edit and crop your video as well as offering a
wide choice presets to change the quality (and hence the size) of your video.

3. Browse to find your F4V video clip and click next. You can now choose the video‟s
„skin‟ which determines the position and appearance of the play controls. Select the
SteelExternalAll.swf


4. In the Flash movie you will now have an instance of the FLVPlayback component on
stage. Select the instance and open the parameters panel. You can modify the
parameters (including the skin) if required. You can also transfer the sizeof the
instance to fit it within your Flash movie.

5. Save your flash movie as video.fla.


Chapter 5 : Interactivity in your Animation

5.1 Introduction
A simple linear animation can be quite powerful on its own. However, when you add
interactivity with the user, Flash becomes a very powerful web design tool. The easiest
way to add interactivity is by adding buttons to allow the user to interact with the movie.

5.2 Buttons in Flash
Any time you create a new symbol, you must specify the Behaviour as a Movie Clip,
Button, or Graphic. To create a button you select the Button behaviour. When you create a
button you need to create multiple states. Button states are simply the different visual
versions of a button which change as a user interacts with it. A button will usually have a
normal state, a down state (what it looks like when the user clicks on it), and an over state
(what it looks like when the user moves the mouse cursor over it). A button can also have
a hit state. The hit state is never visible to the user but it defines where the user must
position their cursor to show a button‟s over state. For small buttons it is usual to make the
hit state slightly larger than the button size to make it easier to click.

5.2.1 Exercise 13 – Making a Flash Multiple States Button

1. In a new file draw an oval shape that will become your button.

2. Select the shape, convert it to a symbol (ensuring you select the button option for its
behaviour), and name the symbol MyButton.

3. Test your movie (Control – Test Movie menu option). Notice the way the cursor
changes as it is moved over the button.

4. Double-click the instance of the button to be taken to the master version of the
symbol. Note that the symbol consists of four frames (Up, Over, Down, and Hit). In
each frame you draw how the button will appear in each state. The Up state already
contains how the button looks normally.

5. To create an Over state, insert a keyframe into the second frame of the button (click in
the timeline under Over and press F6). Select the Paint Bucket tool and fill the shape
with a colour slightly lighter than the original.

6. Insert a keyframe in the Down frame. Select the entire contents of the Down frame
and nudge the shape to a new position using the arrow keys (click three times with the
right arrow and three times with the left arrow). Test the movie.


7. Add a large hit state over your button as follows. Insert a keyframe in the Hit frame
and draw a large filled oval over the button (ensure the hit state oval is larger than the
button). Test the movie. Save the movie as Exercise13.fla

5.3 Advanced Buttons
You can create advanced buttons by placing animated movie clips in the appropriate states
of the button. You can make the button animate at all times or just animate when the
cursor passes over it.

5.3.1 Exercise 14 – Making an Animated Button

1. In a new file, use the Text tool to type the word Enter on stage (make it fairly large –
approx 48 point). Select the text with the Arrow tool and convert it to a symbol. Name
it Plain Text and select the Movie Clip Behaviour.

2. The text onscreen is now an instance of the „Plain Text‟ symbol. We can now create a
Movie Clip symbol that animates the „Plain Text‟ symbol onstage. To do this select
the instance and convert it to a symbol with Movie Clip behaviour and call it
Animating Text.

3. Now edit the Animating Text symbol. You can access the contents of this symbol by
double-clicking it. Inside the master Animating Text symbol, insert a keyframe at
frame 30 and one at frame 15. Scale the Plain Text symbol instance in frame 15 so it


is noticeably larger. Go back and set tweening in frame 1 and frame 15 to Motion
(right click on each keyframe individually and select Create Classic Tween). Scrub
the timeline to quickly view your animation.

4. Go back to the main scene (click Scene 1 at the top left of the Timeline). Delete
everything onstage (select Edit, Select All; then Edit, Clear). Open the Library
(Ctrl+L) and drag an instance of the „Plain Text‟ onstage. With the „Plain Text‟
instance selected, convert it to a symbol, name it Animating Button and save it with
the button behaviour set.

5. Now we can edit our button and animate it. Double-click the instance onstage (the
Animating Button symbol) and you are taken inside the button which should have an
instance of „Plain Text‟ in frame 1. [We could place an instance of the Animating
Text Movie clip in the buttons Over state but there is an easier way.]

6. Insert a keyframe in the Over state (this will copy everything from the Up state). In
the Over state of the button (as shown below), access the properties panel and select
the Plain Text instance onstage. Click Swap button in the properties panel. A Swap
Symbol dialog box will open showing all the Symbols in your library with a dot next
to the one your current instance is linked to. Select Animating Text and click OK.

7. The button is lacking a large Hit state. Create a large Oval hit state as we did in the
previous exercise to cover the word „Enter‟. After you draw the oval you can delete
the instance of „Animating Text‟ that was automatically place in your Hit state as it is
not necessary. Test the movie. Save the movie as Exercise14.fla


5.3.2 Exercise 15 – Adding Sounds to a Button

There are several ways to include sounds in your buttons. The simplest way is to place it in
a keyframe. For a button this usually means putting in the Over state so it will play as the
cursor moves over the button. Other more complex methods of using sound with buttons
involve using Action Scripting which will be covered later in the course.

1. In a new file draw a rectangular shape that will become your button. Select the shape,
convert it to a symbol (ensuring you select the button option for its behaviour), and
name the symbol Audio Button.

2. Double-click the instance of the button to be taken to the master version of the
symbol. Convert the shape in the Up frame to a symbol called Shape of Button and
save it with Graphic behaviour. Select the Over state and add a keyframe (you can tint
the instance of the button in the Over state if you want a visual as well as audio effect
when the cursor moves over the button).

3. With the Over frame selected, access the properties panel. There will be no sounds in
the Sound drop down list as we have not imported any. We could import a new sound
we have created ourselves but instead we will import one from that comes with Flash.
Open „Common Libraries‟ (under the Windows drop down menu) and select „Sound‟,
drag a copy of the Breaker Switch sound item into your Library (opened by pressing
Ctrl+L). Use the properties panel to select this sound for your buttons Over state. Test
the movie. Save the movie as Exercise15.fla

5.3.3 Exercise 16 – Making Invisible Buttons

Invisible buttons are very useful. They enable you to make hot spots on particular areas of
you movie (e.g. clicking on different areas of a map causing different effects to occur).
When you create an invisible button the user cannot see the button but the author will see
the button as semi-transparent blue.

1. In a new file select Insert, New Symbol, name the symbol Invisible, select Button
behaviour and click OK. This takes us to the master version of the symbol being
created.

2. Leave all the frames in the button blank, but in the Hit frame insert a keyframe. Draw
a circle around the centre (the plus) in the Hit frame. Your timeline should look as
shown below :-


3. Go back to your main scene and drag an instance of the Invisible button from the
Library onto the stage. It should be blue. Test the movie; you should see nothing
except for the cursor changing as it moves over the invisible button.

4. Draw several large boxes on your main stage and add different size invisible buttons
over them (to size the button select scale). Test the movie. Save the movie as
Exercise16.fla

5.4 Using Action Script
Flash‟s programming language is called ActionScript. It allows you to write instructions
that your movie will follow. For example if you wish the user to start and stop your movie
with buttons you will need ActionScript. Individual elements of ActionScript are called
Actions. It is not necessary to learn ActionScript to add Actions to your movie. Using the
Actions panel, you can select pre-programmed Actions and put them in almost any order.
We will use Actions (like „Stop‟ and „Play‟) to add interactivity to the buttons we created
in the previous exercises. We will be using ActionScript version 2.0 within this module.

5.4.1 Using Actions

When using Actions, you place the Actions you require in the order in which you want
them to take place. Flash makes available hundreds of different Actions to allow you to
perform most tasks you wish to accomplish.

All Actions are inserted into your movie using the Actions panel. To open the Actions
panel select Window_Actions (or press F9).


The Action Panels provides the following features :-

The Toolbox is on the left hand side of the panel and it provides access to all available
Actions. They are organises in folders.

The Script Area (bottom right) shows your Actions in their order of execution.

The Parameters Area (above the Script Area) lets you see and set parameters for Actions
added to the Script area.

The Options Toolbar area includes buttons for the following features :-

Insert Target Path Turn on Script Assist

Find & Replace

Delete statement Move Action Up/Down

Add statement

The Script Assist menu lets you change between Normal mode and Expert mode. Normal
mode ensures that the syntax of your ActionScript is correct. This is the mode to use if you
are using Flash‟s predefined Action Scripts. If you wish to write the ActionScript code
yourself you should use Expert mode.

The Reference button provides online help with any selected Action.

5.4.2 Exercise 17 – Controlling a Simple Movie with ActionScript

1. In a new file, use the Text tool to create a text block containing the word Hello. Select
the block and convert it to a symbol. Make it a Movie Clip and name it Hello text.

2. Position the clip instance in the centre of the screen, and insert keyframes at frame 20
and frame 30.


3. Move the current frame marker to frame 1 and move Hello Text completely of the
stage to the left. Set Classic Tweening for Frame1 which will cause the text to move
from the left hand side of the stage into the centre. In Frame 20 set Classic Tweening,
and use the Properties panel to make the tween rotate the text one time clockwise
(CW) on its way from Frame 20 to Frame 30. Test the movie. It should move the text
from the left hand side to the centre of the screen and then rotate. The whole movie
should keep repeating.

4. We are now going to use ActionScript to make just the rotation section repeat forever.
You can add Actions to any keyframe, but instead of mixing Actions with your
animation it is often easier to make a whole new layer just for Actions. Name the
current layer Animation then add a new layer called Actions. Click frame 20 in the
Animation layer, add a keyframe and in the Properties panel in the Frame area name
the frame Loop Start.

5. Select frame 30 in the Actions layer, insert a keyframe, and then open the Actions
panel. To insert a gotoAndPlay Action, click the plus button and then Actions,
Timeline Control, goto. You should see the action added to your script. In the
parameters area we need to specify the details for the selected Action. First change the
Type to Frame Label, and then select Loop Start for the Frame. The Actions Panel
should then appear as shown below (make sure the wizard tool is on):-

6. Test the movie (ctrl + enter). Save the movie as Exercise17.fla

This type of action is called a Frame Action since the Action is placed in a keyframe.
There are two other places we can put Actions. These are on Button instances and on
Movie Clip instances.

While putting Actions in keyframes causes the Action to execute when that frame is
reached, putting Actions on instances of buttons makes the Action execute when the user
clicks a button. Actions on buttons require that you specify which mouse event you want
to respond to (e.g. mouse press, mouse release).


We will now add buttons to the previous exercise that let the user stop and continue the
animation.

7. Insert a new layer for the buttons called Buttons. Draw a rectangle to use as a button.
Select it and convert it to a Symbol with a button behaviour called MyButton.

8. Drag another instance of MyButton from the library. Use Tint in the properties panel
to colour the first button Red and the second button Green.

9. Select the Red button and access the Actions panel. From the plus button select
Action, Movie Control, stop. This adds several Action statements to the script area (it
puts the stop Action inside the default mouse event, which is Release as shown
below).

10. Select the Green button and attach a play event to it. Test the movie. Save the movie
as Exercise17.fla

5.4.3 Exercise 18 – Movie Clip Actions

We have now placed Actions on keyframes and on Button instances. Another place we can
attach actions is on instances of Movie Clips. Unlike buttons we can actually put Actions
inside a master Movie Clip in a Library. However, the rule that you can only put Actions
in keyframes, Button instances and clip instances remains. So if you put any Actions
inside a Movie Clip then it must go in one of these three places.

1. Create a Movie Clip that contains several frames and some animation within the clip
(see making the rotating wheel in Exercise 11). Place the movie clip onstage and test
it is animating.


2. Return to the main stage and select the instance of the movie clip and open the
Actions panel. From the plus button select Actions – Movie Clip Control – stop. Note
that the Actions attached to the Movie Clip event are contained inside an
onClipEvent as shown below :-

Test the movie. When the movie loads it should stop.

3. We can now add two more actions that respond to the mouse down and mouse up
events. When the user clicks the movie will start to play, and when he releases the
mouse click the movie will stop playing. We need to add these actions as additional
actions outside the curly brackets of the previous action. To add more clip events drag
a play action (from the Toolbox section) below the last line of your script. Repeat this
to add a third clip event. We now should have three versions of the onClipEvent
(load). Click on the first line of the second clip event. With this line selected we can
change the parameters of the clip event to respond to a mouse up instead of load.
Repeat this procedure to change the third event to respond to mouse down.
Change the action attached to the second event to play and the action attached to the
third event to stop as shown below. Test the movie. Save the movie as Exercise18.fla

5.4.4 Exercise 19 – Linking to another Web Page using Flash

The getURL action jumps the user to another web page. In the getURL action you need to
specify which URL you wish to navigate to.

1. In a new file, create a Button symbol and place an instance onstage.

2. With the Button instance selected, open the Actions panel (F2).


3. Insert the getURL Action (from the plus button-Actions-Browser Network. With the
getURL Action selected, type http://webdesigninfo.co.uk into the URL field as
shown below. Change the event from load to mouse down.

4. Test the movie (by selecting File-Publish Preview-Default, so you will watch it in a
browser). Save the movie as Exercise19.fla


Chapter 6 : ActionScript for Advanced Interactivity

6.1 Introduction
We have learnt how Actions can control how your movie plays. An action on a button
instance gives the user the power to make an action execute when a button is clicked. Also
you can put actions in a keyframe to make the movie jump back to another frame,
effectively looping. Other actions can add even more interactivity to your movie.

6.1.1 Using Scenes

To organize a large Flash movie you can use scenes. For example, you might use separate
scenes for an introduction, a loading message, and credits. Though using scenes has some
disadvantages, there are some situations in which few of these disadvantages apply, such
as when you create lengthy animations. When you use scenes, you avoid having to manage
a large number of FLA files because each scene is contained within a single FLA file.
Using scenes is similar to using several FLA files together to create a larger presentation.
Each scene has a Timeline. Frames in the document are numbered consecutively through
the scenes. For example, if a document contains two scenes with ten frames each, the
frames in Scene 2 are numbered 11–20. The scenes in the document play back in the order
they are listed in the Scene panel. When the movie reaches the final frame of a scene, the
movie automatically progresses to the next scene.
Disadvantages of scenes:
When you publish a SWF file, the Timeline of each scene combines into a single Timeline
in the SWF file. After the SWF file compiles, it behaves as if you created the FLA file
using one scene. Because of this behaviour, scenes have some disadvantages:
Scenes can make documents confusing to edit, particularly in multi-author environments.
Scenes often result in large SWF files.
Scenes force users to progressively download the entire SWF file, even if they do not plan
or want to watch all of it.
Controlling scene playback:
Display the Scene panel
Select Window > Other Panels > Scene.
Add a scene
Select Insert > Scene, or click the Add Scene button in the Scene panel.
Delete a scene
Click the Delete Scene button in the Scene panel.
Change the name of a scene
Double-click the scene name in the Scene panel and enter the new name.
Duplicate a scene
Click the Duplicate Scene button in the Scene panel.
Change the order of a scene in the document
Drag the scene name to a different location in the Scene panel.
View a particular scene
Select View > Go To, and then select the name of the scene from the submenu.


6.1.1 Exercise 20 – Using Scenes

Create a Flash movie that allows the user to jump back and forward between different
scenes within the movie. The movie should contain a “home” page and at least two other
“pages”, each of which should contain a separate, short animation. Each of these “pages”
should be contained within a separate scene. It should be possible to jump back and
forward from page to page and the movie should also enable the user to jump to the
“home” page from any other section. Save the movie as Exercise20.fla

6.2 Drag-and Drop Interactions
A very effective way of improving user interaction is to allow users to drag items around
the stage. In Flash, the simplest way to determine when a user clicks a specific area
involves the use of buttons. The startDrag Action requires you to specify (as a parameter)
the instance name of the object you want to start dragging, which is probably the button
just clicked. (Note that you can also give instance names to text objects and Movie Clips-
so they can be dragged). In many ways, the easiest object to drag is a button, but you do
need to specify the button's instance name.

6.2.1 Exercise 21 – Making a Simple Draggable Object

1. In a new file, draw a square, select it, and convert it to a symbol. Name the symbol
Button and make sure its behaviour is Button.

2. Select the button instance and use the Properties panel to give it the instance name
box. Next we'll attach an Action to the button that effectively says drag me. Turn on
the coding wizard Select the button instance and open the Actions
panel (F9). Click the plus button, Global Functions, Movie Clip Control, startDrag.

3. Modify the startDrag Action's parameters by typing box into the target field. Go
ahead and test the movie to see what works and what doesn't. If you click and drag,
the button doesn't move. However, if you click and let go on the button, you'll start
dragging, but that's after you let go!

4. To fix this, go back to the button instance and change the mouse event from the
default Release to Press, as shown below (because you can have more than one
mouse event, you'll have to deselect Release and then check Press). If you do a Test
Movie now, you'll see that it works fine, except you can't let go of the button after you
start dragging.


5. You need the button to respond to two events. For the Press event, it needs to start
dragging (which it does), and for the Release event, it needs to stop dragging.
Therefore, drag the stopDrag Action, as shown below.

6. The second mouse event (using the stopDrag Action) uses the Release event by
default. Although this will work, you should also click Release Outside, which will
also work if the user releases outside this button. Basically, this is a failsafe way to
make sure the user can let go of the clip.

7. Test the movie. Save the movie as Exercise21.fla

In the above diagram you can see a parameter named Lock mouse to center. This
parameter makes the object snap into position so that the mouse is centered on the object.
You can test how this changes the behaviour of the draggable object you just created. The
user really knows this button is draggable because as soon as he or she clicks it, the button
snaps into place.


The other parameter is the Constrain to rectangle option. This lets you specify a
rectangle inside which the object will be draggable. If you select the Constrain option,
you'l1 have to specify the sides of this imaginary rectangle outside which the user will not
be able to drag the clip. You must specify the left (L), top (T), right (R), and bottom (B)
sides. This can be used to prevent the user dragging the clip off the Stage entirely. You can
calculate these numbers by hand. Just position the button in each extreme position on the
Stage and note the appropriate coordinate using the Info panel.

6.3 Programming in Flash
If you want your movie to play back the same each time (like a narrative or a cartoon, for
example), you don't need to do any programming. Even if you want relatively
sophisticated interactivity (buttons, draggable objects, and so on), you can achieve it with
basic Actions. However, for a much more dynamic (changing) movie, you're going to need
to do some programming. Fortunately, ActionScripting is fairly easy to use. Using Flash's
Action panel makes it easy because you just fill in the parameters as needed.

6.3.1 Variables

Variables are a place to store information. A key concept with variables is that each one
has both a name and a value. You can do two things with variables:

Set or change their values
Read or check their values

Note that unlike many formal programming languages you do not need to create or declare
variables, they simply exist as soon as you set the value for one.
You can view variables right on the Stage. First, use the Text tool to place some text on the
Stage and then select the block of text (with the Arrow tool). From the Properties panel
change the type from the default Static Text to Dynamic Text (which will be updated
from the variables you set), or Input Text (if you want the user to be able to change the
variable's value). Next, you need to associate a variable with this (Dynamic or Input) text.
The field Variable: lets you specify the name for the variable (see below). After you've
done this, the text becomes attached to the variable. In Dynamic Text, if the variable's
value changes, the text reflects the change. If it's Input Text and the user changes the text,
the variable's value changes. This is pretty useful because you can change (or let the user
change) a variable's value at any time-that way, the text onscreen changes.


In practical terms, common tasks that you'll need variables for might include the follow-
ing:

Asking the user for his or her name (so you can use it later)

Counting how many times the user has been to part of your movie (so you can
change the course after he or she has seen something several times)

Quizzing the user and tracking his or her score

Displaying text that changes frequently, such as a prompt. You can use Dynamic
Text to reflect the current value of a variable that you keep changing.

6.3.2 Exercise 22 – Using a Variable to get the User‟s Name

1. In a new file, open the Properties panel and select the Text tool. Set the drop-down list
for Text type to Input Text. Also, press the Show Border Around Text button.
Click once to create a block of text and type: Please enter your name.

When you are allowing the user to enter text in an application you should be
embedded the font for any text that may be edited at runtime. To do this select
Embed from the character menu.


Then choose the characters you wish to allow the application to use (for this example
select all):

Then choose the characters you wish to allow the application to use (for this example
select all):


2. With the text block selected, set the Variable: field in the Properties panel, Options to
read username.

3. Put a stop Action in Frame 1.

4. Select a button out of the common library and put an instance next to the text block
you have just created. Put a playAction on the button instance. The default mouse
event, Release, is fine; however, in the event the user clicks Enter on the keyboard,
this should effectively press the button too. Therefore, select the first line in the button
script and click the check box labelled Key Press (in the parameter area). Make sure
the I-beam cursor is blinking in the field next to Key Press and go ahead and press
your Enter key. Notice that Flash fills in the key press option.

5. At frame 10, insert a blank keyframe (press F7) and create another text field. This one
should be Dynamic Text (so the user can't edit it) and be associated with the variable
message.

6. Now you're going to put a couple of Actions in the keyframe on frame 10. Select the
keyframe and then open the Actions panel. The first thing you'll do is to use the set
variable Action (found under Actions, Statements, Variables) to change the value of
that variable message. Insert a set variable Action while frame 10 is selected. Now
you can specify the parameters.

7. The Variable field requires that you input the name of the variable. Type message into
the Variable field.

8. The Value field is where you specify what goes into the variable. You're going to
make it read "Welcome ????," where "????" is whatever name the user types into the
field on frame 1. This is going to require you to build the string dynamically. Select
the Expression check box to the right of the Value field, because you want Flash to
evaluate what is typed (not automatically place quote marks around anything you
type). With Expression checked, in the Value field, type "Welcome " + username.
The plus sign concatenates (or connects) these two items. The first part is simply the
string "Welcome " (notice the extra space). Because it's in quotes, Flash will display it
exactly as typed. The second part refers to the variable username. Because this is not
typed between the quotes, Flash will use the value of the variable, not its name.

9. Add another stop Action at frame 10. Test the movie. Save the movie as
Exercise22.fla.

The preceding task lets you experiment with two basic features of variables: controlling
variables (by setting values) and showing variables to the user. You let the user directly
affect the variable (by typing right into the Input Text) and then you displayed it on the
screen. Often, you'll need to use variables but you have no need to show them to the user.
For instance, maybe you're tracking the total number of questions users have answered
correctly. The next task shows you how to increment a variable. It's very simple: A
variable named "count" will increase every time the user clicks a button.


6.3.3 Condition Statements (If statement)

Most programs involve the use of conditional statements to control the flow of the
program. Decision-making constructs allow your application to examine conditions and
choose courses of action.
Most programs involve taking different actions dependant on the result of some operation
or the value of some parameter. In Action Script this type of action is accounted for using
the if statement. The general syntax of the single-alternative if statement is :-

-
if ( condition) {
sequence of statements;
}

This is interpreted as if the condition-expression is true then carry out the action(s)
denoted in the following statement(s). If the condition-expression is not true the
statement(s) are bypassed.

Examples :
if (x < 20)
x = 20;

The general syntax of the dual-alternative if-else statement is :-

if ( condition) {
sequence of statements A;
}
else {
sequence of statements B;
}

This is interpreted as if the condition-expression is true then carry out the action(s)
denoted in the sequence of statements (A). If the condition is not true then carry out the
sequence of statements (B).
The general syntax of the multiple-alternative if-else statement is :-

if ( condition 1)
statement 1; or {sequence of statements 1}
else if (condition 2)
statement 2; or {sequence of statements 2}
........
else if (condition n)
statement n; or {sequence of statements n}
else
statement; or {sequence of statements}

The multiple-alternative if-else statement performs a series of cascaded tests until one of
the following occurs :-

Animation Techniques Guide

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Similar to Animation Techniques Guide

Similar to Animation Techniques Guide (20)

Recently uploaded

Recently uploaded (20)

Animation Techniques Guide