animation

Animation Techniques

Prepared by: Dave Parkinson Duncan Bottrill

(Feb 2011)


Animation TechniquesThe module runs for 12 weeks - 2 hours / week

Course ContentThe Flash EnvironmentThe Stage, Timeline, Tools Panel, Properties PanelThe LibraryGetting around in Flash

Drawing and PaintingFlash Tools PanelImporting Graphics into Flash Using the LibraryUnderstanding Layers

Animating in FlashFrames and Framerate, KeyframesTweeningUsing layers in your animationMovie clips and Graphic Symbols

Sound and Video in FlashImporting Sound filesUsing and Editing SoundImporting Video filesUsing and Editing Video

Interaction in FlashCreating Standard, Animated, and Invisible ButtonsAdding Sound to a buttonUsing ActionScript to control a movieAdvanced use of ActionScriptCreating a QuizCreating a Shoot-up GameCreating a Jigsaw Game

Publishing your Flash MovieChanging the Publish SettingsPublishing your movie

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


Animation Techniques - Lecture Plan

Week 1 Introduction to Flash. The Flash EnvironmentExercise 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 buttonsCreating Standard, Animated and Invisible Buttons

Week 7 Introduction to ActionScriptControlling 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...................................................................................................................61.2.1 The Stage......................................................................................................................................................71.2.2 The Tools Panel............................................................................................................................................81.2.3 The Timeline................................................................................................................................................81.2.4 The Properties Panel.....................................................................................................................................91.2.5 The Library...................................................................................................................................................91.2.6 Getting around in Flash..............................................................................................................................101.2.7 Document Properties..................................................................................................................................111.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...........................................................................................................................142.2.1 Exercise 2 – Flash Lesson “Illustrating in Flash”......................................................................................152.2.2 Exercise 3 – Flash Lesson “Adding and Editing Text”..............................................................................16

2.3 Importing Graphics into Flash.....................................................................................................162.3.1 Exercise 4 – Importing Graphics................................................................................................................16

2.4 Using the Library...........................................................................................................................172.4.1 Symbols and Instances...............................................................................................................................172.4.2 Exercise 5 – Flash Lesson “Creating and Editing Symbols”.....................................................................18

2.5 Understanding Layers...................................................................................................................182.5.1 Exercise 6 – Flash Lesson “Understanding Layers”..................................................................................18

Chapter 3 : Animating in Flash..............................................................................................19

3.1 Introduction to Animation............................................................................................................193.1.1 Frames and Framerate................................................................................................................................193.1.2 Keyframes and Blank Keyframes..............................................................................................................203.1.3 Tweening....................................................................................................................................................213.1.4 Motion Tweens v Classic Tweens............................................................................................................21

3.2 Using Layers in your Animation...................................................................................................223.2.1 Exercise 7 – Using Layers to animate two circles.....................................................................................223.2.2 Layer Properties.........................................................................................................................................233.2.3 Exercise 8 – Flash Lesson “Creating Tweened Animation”......................................................................243.2.4 Exercise 9 – Creating a Bouncing Ball Animation using a Motion Guide................................................243.2.5 Exercise 10 – Using a Masking Layer to create a Spotlight Effect............................................................25

3.3 Movie Clips and Graphics Symbols.............................................................................................263.3.1 Exercise 11 - Using a Movie Clip to create a Rotating Wheel..................................................................263.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...................................................................................................................284.2.1 Supported File Formats..............................................................................................................................284.2.2 Using Sound...............................................................................................................................................284.2.3 Sync Settings..............................................................................................................................................294.2.4 Effect Settings............................................................................................................................................304.2.5 Loop Settings..............................................................................................................................................30


4.2.6 Exercise 12 – Using Sounds in your Animation........................................................................................304.2.7 Exporting your Sound Clips.......................................................................................................................31

4.3 Video in Flash Movies....................................................................................................................324.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..............................................................................................................................355.2.1 Exercise 13 – Making a Flash Multiple States Button...............................................................................35

5.3 Advanced Buttons..........................................................................................................................365.3.1 Exercise 14 – Making an Animated Button...............................................................................................365.3.2 Exercise 15 – Adding Sounds to a Button..................................................................................................385.3.3 Exercise 16 – Making Invisible Buttons....................................................................................................38

5.4 Using Action Script........................................................................................................................395.4.1 Using Actions.............................................................................................................................................395.4.2 Exercise 17 – Controlling a Simple Movie with ActionScript...................................................................405.4.3 Exercise 18 – Movie Clip Actions.............................................................................................................425.4.4 Exercise 19 – Linking to another Web Page using Flash...........................................................................43

Chapter 6 : ActionScript for Advanced Interactivity..............................................................45

6.1 Introduction....................................................................................................................................456.1.1 Using Scenes..............................................................................................................................................456.1.1 Exercise 20 – Using Scenes.......................................................................................................................46

6.2 Drag-and Drop Interactions..........................................................................................................466.2.1 Exercise 21 – Making a Simple Draggable Object....................................................................................46

6.3 Programming in Flash...................................................................................................................486.3.1 Variables.....................................................................................................................................................486.3.2 Exercise 22 – Using a Variable to get the User’s Name............................................................................496.3.3 Condition Statements (If statement)...........................................................................................................526.3.4 Exercise 23 – Incrementing a Variable......................................................................................................536.3.5 Advanced ActionScript Programming.......................................................................................................546.3.6 Exercise 24 – Writing a Quiz Program (see Blackboard for a detailed ‘how to’ guide)...........................556.3.7 Properties....................................................................................................................................................556.3.8 Exercise 25 – Writing a Shoot-up Game....................................................................................................566.3.9 Exercise 26 – Writing a Jigsaw Puzzle......................................................................................................57

Chapter 7 : Publishing your Flash Movie..............................................................................59

7.1 Introduction....................................................................................................................................597.1.1 Changing the Publish Settings....................................................................................................................597.1.2 Publishing your Movie...............................................................................................................................617.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.


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.

The Stage Timeline Panel

Properties Panel Tools Panel


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 LayerAlthough 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 FrameIn 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 filesThis 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 filesWhen 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:

http://www.webdesigninfo.co.uk/


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 statesof 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

http://webdesigninfo.co.uk/


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 symbolButton and make sure its behaviour is Button.

2. Select the button instance and use the Properties panel to give it the instance namebox. 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 :-


1. One of the conditions in the if clause or in the else if clause is true. In this case the accompanying statements are executed.

2. None of the tested conditions are true. The program then executes the statements in the catch-all else clause (note this else clause is optional).

6.3.4 Exercise 23 – Incrementing a Variable

1. In a new file, create a button and a Dynamic Text block (and be sure to type a zero in it). Associate the variable count with the text. This automatically creates the count variable. Remember to embed the font characters you require.

2. On the button, insert the evaluate Action (under Miscellaneous Functions). This Action lets you type anything you want. Type count++. This means to increment the value of the variable count. (That is, add 1 to it.)

3. Test the movie and you should see the count variable increment.

To Increment the value of the variable count you simply used the script count++. You can also decrease a variable's value with the script count--. Finally, if you want to increment by a larger number than 1 use: count+=5 which will increase the variable count's value by five.

Flash ActionScript also has the capability of using conditional statements (e.g. the If statement) and loop statements (Do Loops). For example you can use an If statement to stop the counting operation once the count has exceeded 10.

4. On the button insert the if Action (under Actions, Statements, Conditions/Loops). Modify the if statement to check that the value of count is less than 10 before incrementing the count value as shown below. Test the movie. Save the movie as Exercise23.fla.


6.3.5 Advanced ActionScript Programming

ActionScript contains many of the features found in other languages (such as Visual Basic or JavaScript). You can add to your ActionScript program using normal mode (allowing Actions be selected from the list), or expert mode (where you type in each line of ActionScript).

Flash provides significant help, and an overview of all the ActionScript commands (including code examples) in the Help menu, accessed from the ActionScript panel.


6.3.6 Exercise 24 – Writing a Quiz Program (see Blackboard for a detailed ‘how to’ guide)

You are required to write a quiz containing three questions as shown below:

The questions are answered by clicking on what you think is the correct answer. When the question is answered (correctly or incorrectly) the user of the program is automatically taken to the next question. After all three questions have been answered a completion screen is shown giving the number of correct answers. A button should also be provided to allow the user to try again.

6.3.7 Properties

Every object has properties that can be changed during authoring. You can think of prop-erties as visual attributes (although some properties are not visible). For example, every object has two position properties (one for x and .one for y). Common built-in properties include _x (X position), _y (Y position), _alpha (current alpha setting), and _rotation (the current rotation of a clip). All the built-in properties are listed in the Properties category of the Toolbox list in the Actions panel. Clip instances, button. instances, and dynamic or input text objects work differently from other objects in Flash. Not only can you set these objects' properties during authoring in Flash, but through ActionScript you can change them dynamically during runtime, too. For instance, you can effectively move a Movie Clip instance by changing its _x and _y properties.

Setting PropertiesAlthough instances of Graphic symbols can have color styles and other properties changed while authoring, only instances of the three object types (button instance, clip instance, and dynamic or input text) can change during runtime. To change a property of an object


with ActionScript, you simply address the object , specify the property, and set it to a new value.

6.3.8 Exercise 25 – Writing a Shoot-up Game

You are required to write a game program to allow the user to test his reactions by trying to hit a random target:

The initial screen should welcome the user to the game and explain the rules. When the start button is pressed the game should commence as shown above. Every second the target should move to a new random position on the screen. The game player should attempt to hit it by clicking on it with the mouse. After 30 seconds the game should stop and you should display the number of times the target has been hit.

Hints:1. You can specify the position of the target within Action Script by specifying its x and y coordinates e.g.target._x = 100target._y = 200

2. A random number between 0 and 200 can be generated with the code Math.Random( ) * 200

3. To set a timer equal to 1 second allow the flash program to loop back to the start after 12 frames.


6.3.9 Exercise 26 – Writing a Jigsaw Puzzle

You are required to write a game program to allow the user to assemble a jigsaw.

The initial screen should welcome the user to the game and explain the rules. When the start button is pressed the game should commence as shown below.

The object of the game is to drag the individual squares onto the background so the coloured squares are assembled in alphabetical order. If a square is positioned within 20 pixels of its final position it should ‘snap’ into the correct position to indicate the user is correct. When all the squares are in position the game should go to the final screen as shown below.


Hints:1. Draw the initial background for the board as a light colour with a size of 300 x 200

pixels. Position the background rectangle at position x=100, y=100.2. Draw a coloured square (100 x 100) and save it as a button. Use new instances of this

button pulled from the library and tinted to the various different colours for the remaining jigsaw pieces. Give each coloured square a unique instance name.

3. You can specify the position (or test the position) of the jigsaw pieces within Action Script by specifying their x and y coordinates e.g.

blue._x = 200 blue._y = 100


Chapter 7 : Publishing your Flash Movie

7.1 Introduction

Whenever you save your Flash movie it will automatically create a .swf movie for you (this is the default setting for Flash). A .swf movie can also be created by choosing File-Export Movie. However Flash has many more publishing capabilities. In addition to producing a .swf movie, you can also produce an associated HTML file to run your .swf file; you can produce a QuickTime movie; or GIF and JPG graphics file.

7.1.1 Changing the Publish Settings

When your movie is complete you need to decide what format you wish to publish it in. If you select File-Publish Settings you open the following dialog box which allows you to chose the publish format.

The Flash tab allows you to decide which versions of Flash plug-in you wish your movie to work under.


The HTML tag allows you to make some adjustments to the HTML that Flash will create to run your .swf file. For example if you select Detect for Flash 4 form the template drop down list, then you movie will only be displayed if the user has Flash 4 or higher installed.

Similarly if you select any if the other publishing options then a tag allowing you to change the exported movies properties will be displayed (for example, with a GIF image you can create either a static or an animated GIF).


7.1.2 Publishing your Movie

Once you have set the Publish settings dialog boxes to your required output then you can Publish your movie directly from the Publish settings dialog box, or by selecting File-Publish from the drop down menu. All you files will be placed in the same directory as your .fla movie.

7.1.3 Embedding Fonts in a Flash Movie

When the Properties panel is set to either Dynamic Text or Input Text, there are several extra options. Of particular interest is the Embed... button. When you click this button you can opt to embed character outlines of all characters in the font or just certain characters. These options only apply to Dynamic and Input Text because the actual words and letters that appear may change. Flash needs to know whether you expect the user to have the font installed already. If you use a fancy font that your users don't have (and you leave these buttons deselected), another font will be used as a substitute. The overall look and the spacing may change drastically if you do this. (Of course, it won't be an issue on your machine when you test because you have the font installed.)

If you're not sure your users have the selected font (the safest bet is that they don't), youcan opt to "embed" the entire font outline (of your special font), so it will appear properly no matter what the contents of the text block may become. This, naturally, adds to the file size significantly. The Embed Options (shown below) let you selectively include a subset of the whole font (i.e. just uppercase characters, just lowercase characters, or justnumbers). You could even specify just the characters you type into the Characters Option dialog box. Including the minimum necessary will help maintain a small file size.


Footnote:-There are a range of other components that can be added to your Flash using the Window – Components menu (or press Ctrl+F7).

animation

Technology

assignment flash animation

flash environment exercise

flash moviechanging

flash lesson illustrating

mark flash assignment

graphics exercise

adobe flash cs5

issue flash assignmentweek