Introduction to Flash CS3

Transcription

1 Introduction to Flash CS3 Danny Bishop, Carol Green & Nick Ford The files used in activities and exercises within this book are not available for evaluation.

2 Introduction to Flash CS3 Danny Bishop, Carol Green & Nick Ford FLCS3 v1.0.0 ISBN: Natcoll Publishing PO Box Christchurch 8013, New Zealand +64 (0) (0) fax Find us on the World Wide Web at: Notice of rights All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of the publisher. For information on obtaining permission for reprints and excerpts, contact Natcoll Publishing. Notice of liability The information in this book is distributed on an as is basis, without warranty. While every precaution has been taken in the preparation of this book, Natcoll Publishing shall not have any liability to be caused directly or indirectly by the instructions contained in this book or by the computer software or hardware products described herein. Trademarks Natcoll and the Natcoll Design Technology logo are registered trademarks of Natcoll Design Technology in New Zealand and/or other countries. All other trademarks are the properties of their respective owners. Rather than place a trademark symbol in every occurrence of a trademarked name, we state we are using the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

3 Contents Introduction to Flash CS3 What is Flash CS What this manual covers... 1 How to use this manual... 1 Acknowledgements... 1 Flash essential facts Flash version history... 2 Vector graphics... 2 Bitmap graphics... 2 When not to use Flash... 3 The Flash player... 3 Starting a new movie... 3 Saving a movie... 4 The work area... 4 The Stage...4 The Timeline...4 The Panels...5 Drawing Starting to draw... 6 Merge Drawing mode vs Object Drawing mode...6 Drawing simple shapes...6 Drawing polygons and stars...7 The Selection tool...7 Combining shapes (ungrouped shapes only)...8 Subtracting shapes and lines (ungrouped shapes only)...8 Editing shapes (grouped or ungrouped shapes)...8 Drawing with Primitives...8 The Timeline... 9 Frames and layers...9 Managing layers...9 Changing the view...9 Quickly editing the Document Properties...9 More drawing tools and techniques...10 Coloured lines with the Pencil and Line tools...10 Painting with the Brush tool...10 Changing a shape s Fill and Stroke colours...10 Sampling with the Eyedropper tool...11 Creating new colour swatches...11 Creating depth with gradients...12 Storing symbols in the Library...13 Creating symbols...13 Movie clip vs Graphic symbols...13 Using the Library...13 Editing symbols slice scaling...14 Filters...14 Importing Library items...15 Working with bitmaps...16 Using bitmap images...16 Importing pixel-based files...16 Setting bitmap properties...16 Importing PSD files from Photoshop...17 Importing AI files from Illustrator...17 Tiling with bitmaps...18 Turning bitmaps into vectors...18 Using text...18 The Text tool...18 Scrolling text...20 The UIScrollBar component...20 Animating Reading the Timeline...22 Frame rates...22 Frames and keyframes...22 Becoming familiar with frames...23 Frame-by-frame animation...23 Making a simple cartoon-style animation...24 Stepping through the animation...24 Onion Skinning...25 Shape Tweening...26 Tweening a shape...26 Easing...26 Troubleshooting shape tweens...26 Motion tweening...28 Symbol instances...28 To motion tween a symbol...28 Troubleshooting motion tweens...28 Copy and paste a motion tween...28 Movie clip symbols...30 To make a simple animated Movie clip...30 Button symbols...30 To make a simple button...31 Common Libraries...31 Layer effects...32 Layer properties...32 Pill buttons cont...32 Motion guide layers...33 To create motion on a path...33 To create oriented motion on a path...33 Troubleshooting Motion Guides...33 Mask layers...34 To create a Mask layer...34 Creating scenes...35 When to use scenes...35 Naming and ordering scenes...35 Editing and previewing scenes...35 Compositing Nested Timelines...37 Movie clips within buttons...37 Buttons within Movie clips...37 Movie clips within Movie clips...37 Working with sound...39 Adding sounds to movies...40 Sound options...40 Sound Envelope...40 Flash as an audio tool...40 Importing video...41 Video compression...41 Importing video files...42 The FLVPlayback component...43 Contents iii

4 ActionScripting ActionScript ActionScript basics...45 The Actions panel...45 Syntax and lettercase...45 ActionScript good practice...46 Controlling the main Timeline...46 Stopping the Timeline...46 Playing the Timeline with a button...46 Starting the main Timeline again...47 Controlling a different Timeline...48 Commenting code...48 The target path button...49 Movie clips and properties...50 Common Movie clip properties...50 Controlling Movie clip properties...50 Setting and using variables...51 Conditional statements (if)...52 Other useful ActionScript techniques...54 Setting dynamic text...54 Drag and drop...55 Outputting Audio Export options...57 Bandwidth Profiler...58 Simulate download...58 Modem speed...58 Publishing your movie...58 Publish settings for a Flash movie...58 Publish settings for HTML...59 AC_RunActiveContent.js...60 iv INTRODUCTION TO FLASH CS3 Copyright 2007 NatcollPublishing

5 Introduction to Flash CS3 What is Flash CS3 Flash is a drawing and animation tool that lets you create anything from simple animations to complex effects for websites, kiosk displays or CD-ROMs. What this manual covers This manual is for first-time users of Flash who wish to: Use Flash to create simple to intermediate-level animations. Add basic ActionScript to movies to enhance interactivity. Export movies for viewing on Macintosh or Windows computers, with or without a browser. How to use this manual This manual contains five chapters. Each chapter covers one of the five main techniques utilised by Flash designers in the creation of Flash animations: 1 Drawing and importing graphics. 2 Animating graphics. 3 Creating composite animations to produce complex effects. 4 Adding ActionScript to enhance animations. 5 Exporting Flash movies for use on the web. Each chapter is set out in the following way: A new tool or concept is introduced, and an explanation is given about when and why you might use it. Instructions are given for how to use it, and there is a simple tutorial to demonstrate those instructions. After one or more sections there will be a set of exercises for you to complete, which will put into practice the things that you have learned so far; the exercises generally increase in their complexity. This manual has been illustrated with screen captures from Flash CS3 Professional on the Mac OSX operating system. If you are using Windows, the interface may vary slightly from the illustrations shown. Shortcuts are given for both Mac and PC together, eg /Ctrl-Shift-S. For this example you would press + Shift + S on a Mac, or Ctrl + Shift + S on a PC. Option/Alt-click would mean that you hold down Option (Mac) or Alt (PC) and click. Drag means to keep the mouse button pressed down as you move the mouse. Acknowledgements This guide was originally written and illustrated by Danny Bishop with Carol Green and Nick Ford. Updated to version CS3 by Carol Green. Introduction 1

6 Flash essential facts Vector and bitmap graphics and the basics of Flash In this section In this section, you will learn: the difference between vector and bitmap graphics when to use Flash how to make a new movie how to save movies about the Flash workspace Flash is easy to use, but does require some basic understanding of how graphics are built. It is also useful to know what version of Flash you are using. Flash version history This manual is written for Flash CS3. The different recent versions of Flash are: Flash 5 Flash MX Flash MX 2004 Flash 8 Flash CS3 Vector graphics Flash movies, when published for the web, are very small. They use vector graphics technology that defines the graphics and animation mathematically. Vectors can be thought of as dot-to-dot drawings. Vector shapes contain points, which are joined by paths to create shapes. Those shapes can have fills. Vector graphics can be reshaped very easily, and you can change their size without affecting the quality of the movie. A vector movie is scalable it doesn t matter how big you make it, the file size and quality will stay the same. Bitmap graphics This vector circle is made up of four points joined by a mathematical equation. This bitmap circle is made up of squares or pixels of colour. This is a bitmap and a vector object at 100%. They are both of equal quality. Flash movies can contain both vector and bitmap graphics. Bitmap graphics are made up of hundreds, thousands or even millions of pixels on a grid. The bigger the image is, the more pixels there are and the more memory the file takes up. Making a bitmap graphic bigger can reduce the quality of the image. This is the same image scaled to 400%. Notice how the oval that was on the left (the bitmap) has become very pixelated around the edges and decreased in quality. The vector oval on the right has been scaled without any loss of quality. 2 INTRODUCTION TO FLASH CS3

7 When not to use Flash Flash cannot edit photographs it is not that kind of imageediting program. Flash is not designed for editing complex, vector (mathematically-based) shapes, although it can perform all the basic tasks. Flash is not a sound-editing tool, although it can play and control sounds. The Flash player You are about to create some Flash content. By now you almost certainly have seen Flash movies on the web if not, browse the Adobe website now and look for Flash movies to get an idea of what is possible. Your Mac or Windows computer can show Flash movies if it has the Flash Player. This is just a player you cannot use it to create Flash movies. If you do not have the Flash Player, your browser will help you locate and download the latest version. The Flash Player has a number of controls which you might find useful: View > Magnification lets you scale the movie up and down when you resize the window (Show All) or snap to a certain fixed size. Control > Loop will play the movie over and over again. If it is not activated, then the movie will stop once it reaches the end. Control > Rewind allows you to restart the movie to the beginning. Starting a new movie Work through these steps to create and save a Flash file. First, launch the Flash application. Then follow these steps to create, modify and save a Flash file: 1 Either from the Flash startup screen, or from File > New, choose Flash File (ActionScript 3.0), click OK. This will produce a new blank Flash file. When you make a new Flash movie, there are a few movie properties you may want to change before you start construction. 2 Choose Modify > Document. This opens the Document Properties box. 3 Set the Dimensions (the width and height) of the movie, or leave the settings as they are for now. The unit px is short for pixels. 4 To change the Background color, click on the white square and choose a new colour. You can also choose to leave the background white if you wish. 5 The default Frame rate is 12 frames per second (fps). To increase or decrease this enter another number. 6 Click OK. tip A Map of Bits To easily remember what a bitmap is, think about the word itself, bitmap. Bits of data that you can see (pixels). Mapped to a grid on the screen, like a world map. This map of visual bits is your picture your bitmap! Flash essential facts 3

8 Saving a movie At regular intervals while making your movie, you must save your work. To do this, do one of the following: If you have not saved the file yet, or want to save it with a different name, choose File > Save As Give the file a name and save it. Make sure your Flash movie has a.fla file extension. Your operating system may apply this extension automatically. If you have already saved the file once and simply want to save any recent work, choose File > Save. You are now able to create and save a blank Flash file. Now it s time to look at the work area so that you can start to create some content. The work area Flash s work area looks complex at first, but really has just a few main parts: The Stage This is where you create all the content in Flash. The Stage is the main drawing area. The Timeline The Timeline is a ruler that measures time instead of centimetres. You construct your animations inside frames in the Timeline. As the playhead moves along the timeline the contents of the current frame are displayed upon the stage. Tools panel Playhead Timeline Stage Properties window Panels 4 INTRODUCTION TO FLASH CS3

9 The Panels Many panels, usually found against the side of the Stage, are provided to give you information and control over parts of your movie. Panels which aren t showing can be opened by choosing its name from the Window menu. To set up your workspace using default settings, follow these steps: 1 Make sure you have a Flash file open, even if it is blank. 2 Choose Windows > Workspace > Default. Info panel Displays information about elements on the Stage such as width and height, position and colour values. Transform panel Lets you change the size (scale), rotation and skew of objects on the Stage. Align panel Lets you line up and distribute selected objects precisely on the Stage. Scene panel Lets you organise the scenes in your movies by naming, ordering and duplicating them. Components panel Lets you choose ready-made items to use in your movie and set the attributes of the selected component. Movie Explorer panel Allows you to manage all the parts of your movie, for example text, buttons, movie clips, graphics, ActionScripts, video, sounds, bitmaps, frames and layers. Tools panel All the tools used to create graphics on the stage are kept in the Tools panel. If the Tools panel is not showing, select Window > Tools from the menu bar. Colour mixer panel Offers you a multitude of ways to manipulate colour. Library panel Stores and displays all elements used in your movie. Actions panel Allows you to enter ActionScript to enhance your movie. tip Moving panels You can dock and undock and rearrange panel groups by clicking and dragging the panel from its title bar. tip Hiding panels Press F4 to hide or show all panels including the Tools panel. Flash essential facts 5

10 Drawing Using the built-in tool set to create artwork In this section In this section, you will learn how to: draw, colour and edit simple graphics draw inside frames on a Timeline re-use graphics with the help of Libraries add filters to artwork Starting to draw Now that you understand what Flash can do, and can create and save a Flash file, it is time to start drawing. Merge Drawing mode vs Object Drawing mode import artwork into Flash trace imported bitmap graphics create text use a component to create scrolling text There are two modes of drawing in Flash. The default mode is called Merge Drawing mode which, where possible, will separate a shape s stroke and fill, and when objects are overlapped they will merge or dissect each other. This mode can be confusing if you are familiar with using other vector drawing applications that do not merge objects, so you can also use Object Drawing mode, which automatically groups the stroke and fill and does not allow shapes to merge or dissect. To use Object Drawing mode: 1 Choose the drawing tool you want to use. 2 Select the Object Drawing option at the bottom of the Tools panel. 3 Create an object as normal. A shape drawn using this mode will be surrounded by a dark blue outline (see far right). Converting to and from object drawing mode Object drawing mode basically groups objects together. Objects that were not drawn using this mode can be grouped later: select their parts and choose Modify > Group. To ungroup grouped objects, select them and choose Modify > Ungroup. You can edit an object by double-clicking it, which will enter Object Editing mode. Object Editing mode shows an ungrouped shape and dims the rest of the artwork surrounding the shape being edited. It also shows your location in the Scene Menu underneath the Timeline (see right). Double click outside the object once you have finished, or click on Scene 1 in the Scene Menu. Main stage Grouped object Drawing simple shapes Dotted pattern indicates a selected ungrouped object. Overlapping objects will affect each other. Choose the Rectangle tool from the Tools panel. Click and drag on the Stage to draw a rectangle. Note: If you hold down the Shift key as you drag you will get a square. Click and hold on the Rectangle tool in the Tools panel and choose the Oval tool, then click and drag to draw an oval. Note: If you hold down the Shift key as you drag you will get a perfect circle. tip Portable picture skills Different drawing programs use the same basic rules to draw vector-based artwork. This means that once you learn a skill, you can probably use it in different drawing programs. Dark blue bounding box indicates a selected grouped object. Grouped objects can easily be moved by dragging. Overlapping objects do not affect each other. tip Undoing mistakes Undo many recent steps by choosing Edit > Undo. Do this as many times as you need to until the shape is whole again. 6 INTRODUCTION TO FLASH CS3

11 Drawing polygons and stars Click and hold on the Rectangle tool again and choose the Polystar tool,. On the Properties window, click on the Options button. The Tool Settings box will appear (see right). Choose settings for your star or polygon (see below). The Selection tool The Selection tool selects and moves objects around the Stage. The Selection tool is probably the most often used tool in Flash and the first tool covered in detail. Selecting a shape (ungrouped shapes only) Choose the top most tool in the Tools panel this is the Selection tool. To select a shape: on the Stage, click once on the centre of the shape. It should darken, showing it is selected. To deselect a shape: click away from the shape, on a blank area of the Stage. The shape is now deselected. To move a shape: drag inside the shape and move it a short distance. The shape s stroke will be left behind (see right). To move a shape and its stroke: double-click on the shape then drag it a short distance. The whole of the shape will move. Try moving your rectangle. Selecting strokes (ungrouped shapes only) You have seen that a shape can have a fill and a stroke. Now you will see how the stroke can be made up of many line segments: Using the Selection tool click once on the stroke of a circle or oval. An oval has only one line segment so the whole stroke is selected (see right). Click once on the stroke of a square or rectangle. A rectangle has four line segments and only one segment is selected (see far right). Double-click the stroke of the rectangle to select all four line segments (see right). Selecting parts of shapes using the marquee tool (ungrouped shapes only) A method called marquee selecting allows you to select a part of a shape: 1 Using the Selection tool, drag on a blank part of the Stage near your shape and keep dragging until your mouse has partially covered the shape (see right). 2 Release the mouse button. Notice that you have selected a part of the shape s fill and stroke (see centre right). 3 Drag on the selected part to move it a short distance (see far right). Polygon, 3 sides Star, 9 sides, star point size: 0.60 Star, 7 sides, star point size: 0.20 Stroke Fill Line segment Chapter 1: Drawing 7

12 Combining shapes (ungrouped shapes only) Shapes that have the same inside colour will weld together if they touch. 1 Move two shapes (without strokes) of the same colour so that they overlap each other (see right). 2 Deselect the shapes then reselect them. The two shapes have merged (see far right). Subtracting shapes and lines (ungrouped shapes only) Shapes of a different fill colour, or which have strokes, will dissect each other, cutting out the back most shape. 1 Overlap two ungrouped shapes which either have strokes, or which are different colours (see right). 2 Deselect the shapes. 3 Select one of the shapes (and its stroke) again, and move it (see far right). Editing shapes (grouped or ungrouped shapes) You have seen that shapes are made up of strokes and fills, and that the strokes in turn are made up of line segments. Those line segments can be edited by simply dragging. 1 Using the Selection tool, move the mouse close to one of the corners of an unselected rectangle shape. The cursor will change into an arrow with a right-angled line. 2 Drag to move that corner. The lines will follow (see right). 3 Move the mouse close to the middle of one of the lines, or close to the stroke of an unselected oval shape. The cursor will change into an arrow with a curve. 4 Drag to stretch the line. The corners will not move (see right). Drawing with Primitives There are two new tools in Flash CS3; the Rectangle Primitive tool and the Oval Primitive tool. These tools allow you to adjust characteristics of the shape (rounded corners, angle etc) at any time. Choose the Rectangle Primitive tool from the Tools window (it hides underneath the Rectangle tool). Click and drag to draw a rectangle. To adjust the corners of the rectangle, either drag one of the rectangle s corner points using the Selection tool, or use the controls in the Properties window to adjust single corners or to turn the corners inside out (see above right and right). Choose the Oval Primitive tool from the Tools window. Click and drag to draw an oval. To make the oval into a wedge, drag the outermost most dot on the oval using the Selection tool, or adjust the controls in the Properties window (see below). To make a hole in the middle of the oval, drag the innermost dot on the oval using the Selection tool, or adjust the controls in the Properties window. Primitive adjustment options tip Getting about easily You can move the Stage around easily by moving the mouse with the Spacebar held down. 8 INTRODUCTION TO FLASH CS3

13 exercise 1.1 Red retro rocketship Build this rocketship (or one like it) using the techniques you have learned so far in this section. This example was built using ovals, rectangles, polygons and stars (distorted and un-distorted), in Merge Drawing mode and Object Drawing mode and using Rectangle and Oval Primitives. Remember to save the file! The Timeline Frames and layers The Timeline is divided into frames and layers (see right). In this chapter, Drawing, layers will be looked at. In the next chapter, Animating, frames will be looked at. Layers Show/Hide layers Managing layers The Timeline can contain multiple layers as well as multiple frames. Layers offer a way to easily deal with multiple graphics. Layers are like Insert Layer Insert Layer folder transparent sheets of paper that sit on top of each other. You can see through empty areas of one layer to the contents of the layer below. Click the Insert Layer button to add a new layer. Always rename new layers, because as your project grows, you ll add many more layers, and named layers are much easier to keep track of. To rename a layer, double click on its name. To delete a layer click on its name to select it, then click on the Delete layer button. Click the Insert Layer Folder button to create a new folder. Click a layer s black dot under the eye icon to hide or show it. Click a layer s black dot under the lock icon to lock it. This prevents changes tip being made to a layer s contents inadvertently. Changing the view To quickly change the size of the view: Using the Zoom tool from the Tools panel, click on the stage to zoom in, or Option/Alt-click to zoom out. Double-click directly on the magnifying glass tool to zoom back to 100%. Quickly editing the Document Properties On the bottom edge of the Timeline, in the centre, you will see a small 12.0 fps. Double-click it to open the Document Properties window, which lets you change the movie s width and height. In the next section you ll learn more about the frame-rate (fps). Lock layers Delete layer Layer folder Frames Rulers Frame rate Under the View menu try turning the Rulers on and off. You will notice that the unit of measurement is always pixels. Chapter 1: Drawing 9

14 More drawing tools and techniques Here are the rest of the main drawing tools and techniques. There will be an exercise at the end that will require all of the following skills. Coloured lines with the Pencil and Line tools To draw lines in Flash, use the Pencil and Line tools. The Pencil tool has three Options associated with it (see right). Those options are at the bottom of the Tools window when the Pencil tool is selected. Straighten tries to straighten the lines you draw. Smooth tries to smooth the lines you draw. Ink reproduces the line exactly the way you draw it. The Line tool is very similar to the Pencil tool except it only draws straight lines. If Snap to Objects is selected (View > Snapping > Snap to Objects) the Line tool will snap to a horizontal or vertical line or onto another object. To change the colour of a line, look at the Colors section of the Tools panel (see right). Choose a stroke colour by clicking on the colour swatch next to the pencil icon. Any lines drawn will now have that colour. Painting with the Brush tool The Brush tool has size and shape Options (see below right). Choose a Brush size and Shape from these two pop-up menus. You can also select from five Brush modes this affects how the Brush paints on the Stage. The modes are: Paint Normal will paint over everything like a normal paintbrush. Paint Fills will paint only the fill (inside) of an object. Paint Behind will only paint behind an object. Paint Selection will only paint the selected areas of an object. Paint Inside will only paint inside the object that you first clicked in. Use the Properties window to set the Color and Smoothing (see below). The larger the smoothing value the more the Brush stroke will smooth itself out. Smoothing set to zero means it will not smooth itself at all. Changing a shape s Fill and Stroke colours Often you will want to change the Fill and Stroke colours of a shape after you have drawn it. You can quickly change the Stroke and Fill of objects using the Paint Bucket and Ink Bottle tools. Using the Paint Bucket tool The Paint Bucket tool is used to apply fills to objects. To change the Fill colour of any shape: 1 Make sure the shape is not selected. Brush modes tip Staying straight Shift-drawing with the pencil tool keeps the line horizontal or vertical. Brush size Brush shape 10 INTRODUCTION TO FLASH CS3

15 2 Select the Paint Bucket tool. 3 From the Colors section of the Tools panel, click on the second colour swatch (see right). 4 Click to choose a new colour. That will set the Paint Bucket to that colour. 5 Click inside the shape to fill the shape with the new colour. Using the Ink Bottle tool The Ink Bottle tool is used to apply different Stroke colours, thicknesses and styles to objects. To change the Stroke of any shape: 1 Make sure the shape is not selected. 2 Select the Ink Bottle tool. 3 Using the Properties window (see below), click the colour swatch to choose a new stroke colour. That will set the Ink Bottle tool to that colour. 4 Type a number to set the thickness of the stroke, in pixels. 5 Select a Stroke style from the drop-down list. 6 Click anywhere on the shape to outline the shape with the new stroke settings. Sampling with the Eyedropper tool The Eyedropper tool Colour To use the Eyedropper tool: 1 Select the Eyedropper tool. is used to sample (copy) fill and stroke settings of other shapes. 2 To sample another shape s Stroke settings, click on the outline. 3 To sample another shape s Fill settings, click inside the shape. The Paint Bucket and Ink Bottle tools will be set to the new settings. Creating new colour swatches To create a new, customised colour swatch: 1 Choose Window > Color. Stroke thickness Stroke style 2 Use the sliders in the Color window to mix a new colour. 3 Adjust the transparency using the Alpha slider. 4 Click the pop-out menu on the top right of the Color window and choose Add Swatch (see right). 5 Choose Window > Swatches to see the new swatch. You may have to scroll down to it (see far right). Pop-out menu tip Hairlines Make your Strokes as fine as you wish. Flash will always make them at least one pixel wide, so they ll always be visible. tip Alpha values In the Color Mixer panel you saw the Alpha setting. This relates to how transparent the colour is. Solid colours have 100% Alpha and completely transparent objects have an Alpha of 0%. Sliders New swatches Chapter 1: Drawing 11

16 exercise 1.2 Creating depth with gradients Gradients are colours that change. Sometimes a light colour will become darker, sometimes one colour will blend into another. There are unlimited possibilities with gradients. There are two kinds of gradient linear and radial. To apply either of these to a shape, simply look in the bottom of the Swatches window or any of the pop up colour palettes for the gradient swatches (see below). To create a new gradient with the Color window: 1 Choose a gradient type. You have two choices; Linear or Radial. The gradient appears with two small colour swatches. 2 Either click on each swatch and set the colours for the gradient using the colour sliders, or double-click to choose from the Swatches window. 3 To add extra swatches for multi-coloured gradients, click underneath the gradient bar. 4 Remove unwanted swatches by dragging them away from the gradient bar. 5 When you are done, choose Add Swatch from the Color window s pop-up menu. The new gradient swatch will add itself to the other swatches in the Swatches window and can be applied to objects. Transforming applied gradients To adjust the size and direction of a gradient applied to an object: 1 Choose the Gradient Transformation tool (which hides underneath the Free Transform tool ) and click the gradient. 2 Drag the Centre point, Focal point, Size, Width and Rotate control handles to suit (see right). Red building block Follow these steps to build a red block. It is best to draw with hairline strokes that can be filled with colour later: 1 Examine this graphic closely. You can see it is really just eight pairs of ovals and a handful of straight lines. 2 Draw one small oval, then duplicate it by selecting it and Option/Altdragging it. 3 Add straight lines where needed. You do not need to be precise. Later, delete the parts of the stroke that you do not want. The finished stroke will have no fill (below 1). 4 Set the Paint Bucket tool to your chosen colour and fill the parts (below 2). Your brick is now outlined and filled. This sketch-and-fill technique can be used to create a wide assortment of shapes. 5 Set the Paint Bucket tool to a gradient colour and experiment with shading instead (right 3). Clicking with the Paint Bucket tool in slightly different parts of a shape will create slight shading differences. Gradient colour swatches Colour sliders tip Turn object snapping off While object snapping can be very useful it can often be very annoying. Choose View > Snapping > Snap to Objects if it is causing problems. Focal point Centre point Width Size Rotate 12 INTRODUCTION TO FLASH CS3

17 Storing symbols in the Library A Flash movie may contain many dozens of graphics, making for a potentially large file size. However, many graphics are often repeated. You can keep your movies small by turning repeated graphics into Symbols and storing them in the Library. There are three types of symbol, but in this section just Movie clip and Graphic symbols will be looked at. Each Flash project has its own Library. Create a new file and open your Library now: Window > Library. The Library will be empty at first. Creating symbols The easiest way to create a symbol is to draw the graphic on the Stage first, then turn it into a symbol. Try it now create a graphic and follow these steps: 1 Select all of the graphic on the Stage (make sure you select the Stroke, if you have one, as well as the Fill) and choose Modify > Convert to Symbol 2 In the Convert to Symbol dialog box (see right), name the symbol (something logical and recognisable) and set the Type to Movie clip or Graphic. The difference between these two symbol types is explained below. 3 Click OK. This graphic is now a symbol and stored in the Library. Movie clip vs Graphic symbols The difference between Movie clip and Graphic symbols is not particularly obvious. Graphic symbols should be used for static images and simple pieces of animation only. Graphic symbols cannot be scripted, cannot have 9-slice scaling applied to them, nor can you add effects (drop shadows etc) to them. Movie clips are the most complex and useful type of symbol. They are really mini-movies, with timelines of their own, which play inside the main Timeline. In addition, movie clips are scriptable with ActionScript. You will probably find it easier in the long run to create Movie clip symbols rather than Graphic symbols, simply because they are more versatile. Using the Library When your Library contains a symbol, you can use this symbol many times by dragging it onto the Stage. Each time you place a symbol on the Stage, you create an instance of it. 1 Drag the symbol onto the Stage now to create an instance of the symbol. Do this several times if you like. 2 Notice that the instances can be placed on top of each other without cutting into each other or merging into one graphic. The symbol in the Library is your master copy. Take care not to delete the symbol in the Library. If this happens, all the instances will disappear too! Main Stage tip Library shortcut: You ll use the Library so often that a good shortcut is essential. /Ctrl-L calls up the Library panel. Symbol currently being edited Editing symbols Instances are linked directly to the master symbol stored in the Library. If you modify a symbol, all the instances of that symbol change too. The easiest way to edit a symbol is to double-click any instance on the Stage. Follow these steps: 1 Double-click an instance of a symbol on the Stage. 2 Note that the Scene Menu shows you that you have left the Stage and are in symbol-editing mode (see right). Scene menu Chapter 1: Drawing 13

18 3 Make any small change to the graphic. 4 Click on the words Scene 1 to return to the main Stage. All instances, plus the symbol in the Library, will have changed. This shows how all instances are interconnected via the symbol. 9-slice scaling Normally Flash scales all parts of a graphic evenly, and sometimes this even scaling can make parts of a graphic distort (see right). 9-slice scaling is a setting which allows you to apply scaling unevenly across a graphic (see right). This type of scaling only works with a Movie clip symbol. To create a Movie clip with 9-slice scaling: 1 Create a graphic and convert it to a Movie clip symbol. 2 Expand the Symbol Properties box by clicking the Advanced button. 3 At the bottom of the window, make sure Enable guides for 9-slice scaling is checked on (see right). This and other symbol properties (including its Type) can be edited later by Control/right-clicking on a symbol in the Library and choosing Properties from the drop-down menu. To edit the guides for 9-slice scaling, double-click on an instance of the symbol on the Stage or on the instance itself in the Library. You will see the guides (below) which can be moved by dragging them. The corners of these guides are the parts which are never scaled. Filters Flash allows you to add a limited number of live filters to Movie clip symbols; filters like drop shadows, blurs and glows. These filters can be edited and updated and can also be adding to animated elements. Filters pane To apply a filter to a Movie clip: Add filter 1 Create a Movie clip symbol and select an instance of it on the Stage. 2 In the Properties window, switch to the Filters pane (see right). 3 Using the Add filter button, choose a filter. 4 Adjust the settings for that filter until you see the effect you want (see below). These filters can be copy-pasted from one instance to another using the copy and paste buttons in the Filters pane of the Properties window (see below). Original graphic Scaled without 9-slice scaling: corner designs distort Scaled with 9-slice scaling: corner designs preserved Enable 9-slice guides Copy filters Paste filters 14 INTRODUCTION TO FLASH CS3

19 exercise 1.3 Importing Library items Many effects from one symbol This exercise will show how the Library can be used to create relatively complex effects with little work: 1 Create a cube using shapes filled with greyscale linear gradients. Transform the shapes and the gradients so that it look somewhat 3-dimensional (see right). 2 Turn the shape into a Movie clip symbol and make sure that 9-slice scaling is switched on. 3 Edit the 9-slice guides so that when the cube is stretched it will just get taller and not distort (see right). 4 Drag and drop the symbol several times on the Stage to create instances. 5 Use the Free Transform tool to make some instances shorter and some taller. 6 Click on one of the instances and look at the Properties window. Find the setting in there labelled Color and change it from None to Tint (see below). 7 Experiment with the tint settings to colour some of the instances. 8 Apply some filters to some of the cubes the ones shown below have a mixture of the Blur and Drop Shadow filters applied. Notice the flexibility that you have with instances. You can distort their shape, change their colour and add filters while they are still part of the same symbol. Entire libraries from other Flash files can be brought into your current movie. Any Flash file can be opened as a Library by choosing File > Import > Open External Library. It is a good idea to save a backup of your own file. If you ever delete a symbol from the Library by mistake, you can import your backup file as an External Library. Any External Library item used on the Stage automatically becomes part of your main Library too. Color settings Chapter 1: Drawing 15

20 Working with bitmaps Using bitmap images You can import JPG, GIF, PNG and PSD files (bitmap images) into Flash. Remember that bitmap images are very large in file size compared to vector graphics, so can considerably increase the size of your final file. Importing pixel-based files Bitmaps (pixel-based files) can be brought into Flash in one of three ways: Copying from almost any other program, and pasting into an open Flash file. The bitmap will appear on the Stage and inside the Library. Make sure the image you are copying from is set to 72ppi or it will not display at its proper size. Choosing File > Import > Import to Stage. Choosing File > Import > Import to Library. Any bitmap used in a Flash movie is added to the Library automatically. You will see a bitmap icon appear in your Library. Depending on the kind of graphic you use and whether you import it to the Stage or directly to the Library, Flash may make a new Graphic symbol for you. Always check the Library after you have imported artwork and rename symbols as you go (see right). Bitmaps should always be imported into Flash at around the size you want them to display. If you resize an image in Flash, the exported swf file will reflect the original size of the imported bitmap. Setting bitmap properties To set the properties of the bitmap, double-click it in the Library window to open the Bitmap Properties dialog box (see right): Bitmap information: displays the name, location, date, and size. Allow smoothing: smooths the edges of the bitmap. Update: re-imports the bitmap if changes have been made to it externally. Import: use this dialog box to import a new bitmap. Compression: choose between Photo (JPEG) for photographic images, and Lossless (PNG/GIF) for graphics with areas of flat colour. Renamed Graphic symbol Bitmap Library item Use document default quality: if this is switched on, your bitmap will be exported with a general compression type and quality set across the whole movie. Turned off, you can set a specific compression type and quality for that image only. Test: you can compare the original file size to the compressed size, and the actual look of the compression in the thumbnail image (unless you are using the document default quality). tip Small is good Sometimes a very small bitmap can take up less memory than a very complex vector graphic. For very small, detailed icons, consider using bitmap images instead of shapes. tip Convert bitmaps to graphic symbols If you are going to use a bitmap many times in your movie, it is a good idea to import the bitmap to the Stage and turn it into a Graphic or Movie clip symbol. Flash may do this automatically for you. 16 INTRODUCTION TO FLASH CS3

21 tip tip Importing PSD files from Photoshop The PSD format is Photoshop s native format, and the best format to use to import bitmap artwork into Flash. When you import PSD files to Flash, you can preserve not only the quality of the file, but also some of the file s editability. To import a PSD file into Flash: 1 Select File > Import To Stage or Import To Library. 2 Find your PSD file. 3 In the PSD Import dialog box, select layers, groups, and individual objects and choose how to import each item. 4 Under Convert layers to, Flash Layers will place each Photoshop layer on its own Flash layer, (inside a Graphic symbol if you have chosen Import To Library). Those layers can then be edited separately in Flash. Keyframes will place each Photoshop layer on an individual keyframes on a new layer (inside a Movie clip symbol if you have chosen Import To Library). This can be useful if you have created a layer-based animation in Photoshop. 5 Under Import this image layer as: Flattened bitmap image will import the layer as a regular bitmap, while Bitmap image with editable layer styles will convert the layer into a Movie clip symbol so that you can add filters to it in Flash. Importing AI files from Illustrator The AI format is Illustrator s native format, and can be imported directly into Flash, preserving layers, some filters, gradients and various other features. Importing AI files can be really useful if you prefer to do your drawing and image generating in Illustrator. To import an AI file into Flash: 1 Select File > Import To Stage or Import To Library. 2 Find your AI file. 3 In the AI Import dialog box, select layers, paths, and individual objects and choose how to import each item. 4 Under Convert layers to, Flash Layers will place each Photoshop layer on its own Flash layer, (inside a Graphic symbol if you have chosen Import To Library). Those layers can then be edited separately in Flash. Keyframes will place each Photoshop layer on an individual keyframes on a new layer (inside a Movie clip symbol if you have chosen Import To Library). 5 You can choose to import text as editable text or as outlines, and you can even choose to import the whole file as a single bitmap image, which can be useful if your AI file is fairly complex and you are not going to use it for anything complex in Flash. 6 You can also select a layer or a path and choose to import just that part as a Movie clip symbol. This can be really useful if you want to animate parts of your artwork separately. Chapter 1: Drawing 17

22 Tiling with bitmaps One small bitmap can be used to fill large areas in Flash, or be used to paint with, as a repeating pattern on a brush. To do this, follow these steps: 1 Import a graphic into your project s Library. 2 Select one of the shape tools or the Paintbrush tool. 3 In the Color window, change the fill Type from Solid to Bitmap. Any bitmaps imported into your project will be available to use as a fill. Select the bitmap that you want to use (see right). 4 The bitmap is now your Fill colour. Painting or making shapes with this setting will use the bitmap as the fill. Altering the bitmap fill using the Gradient Transform tool 5 Use the Gradient Transform tool you can resize, skew, stretch and rotate the fill (see right). The pattern will repeat automatically. Turning bitmaps into vectors The Trace Bitmap command will convert a bitmap into a vector graphic with editable areas of colour. 1 Select a bitmap on the Stage. Make sure it is just a bitmap and not a symbol. 2 Choose Modify > Bitmap > Trace Bitmap. 3 Enter a Color Threshold value. This defines how similar colours must be, to be considered the same. A higher number means fewer colours. 4 Enter a value for Minimum Area. This will define how many surrounding pixels will also be selected. 5 Enter a value for Curve Fit to determine how smoothly outlines are drawn. 6 Enter a value for Corner Threshold to determine whether the corners are sharp or smooth. 7 The Preview button allows you to see the effect on your bitmap before you commit to it. Using text The Text tool Make sure that basic text you add is set as Static Text. This is the most basic type of text. You will use Dynamic Text in later exercises. Move text blocks around Text type by using the Selection tool. To edit text again, you can either doubleclick on the text with the Selection tool or click on it with the Text tool. Anti-alias settings tip File size beware! The file size of the traced bitmap can exceed the file size of the original if the imported bitmap is complex and the tracing is precise. You add text to your Flash movies using the Text tool. As with all other tools the Text tool works together with the Property Inspector (see below). tip Fonts When you use Static Text, any To add text to the Stage you can either just click and type, which adds text font you used will automatically be embedded into the.swf file. of an infinite length, or drag the text tool to define a specific width for However, fonts aren t included in your text. Text automatically wraps to the next line as text fills the box. the.fla authoring file, so if you work on more than one computer you will need the same fonts installed on each machine. 18 INTRODUCTION TO FLASH CS3

23 exercise 1.4 To change the width of a text box, click in it with the Text tool and then drag the handle in the top right corner to resize it (see right). You can change the colour of text, but you can t apply a gradient or bitmap fill to it. Likewise you can t add a stroke to text. To do either of these things you first need to break apart the text (Modify > Break Apart) twice, the first time into individual letters and the second time into outlines which can then have any Stroke or Fill attribute applied to it (see right). Note the anti-alias settings in the Properties window (see previous page). Anti-aliasing attempts to smooth out the edges of objects, and is particularly important for text because too much anti-aliasing and text can become quite hard to read. Always choose a setting appropriate to your use of text. No anti-aliasing Import and trace a logo Anti-aliasing applied Choose a favourite logo, perhaps from the web, and prepare to turn it into an allvector file by tracing the bitmap. Your challenge is to keep the logo looking good, while reducing the file size as much as possible. 1 Create a new blank file and save it with a sensible and recognisable name. Don t forget to make sure it has a.fla file extension. 2 Import a logo to the Stage. This example uses a fictitious logo for the company Buzz s Coffee. 3 Double-click on the bitmap in the Library, uncheck Use document default quality, choose a Quality setting and click the Test button. Make a pencil note of its compressed size. 4 Trace the bitmap. Make a note on paper of the settings you apply. Preview the results. 5 If the result is not good enough, modify the settings and try again. In the example on the right the Color Threshold was too high (300) and Minimum Area too high (20 pixels). 6 You might also choose to tidy up or recreate some parts in Flash. In the example on the far right, the text is static text in a Movie clip symbol with some Flash filters applied. 7 When you have a result that you like, save the file and test the movie by pressing /Ctrl- Enter. This creates a web-ready Shockwave (.swf) version of your Flash movie. 8 Choose View > Bandwidth Profiler. Look in the top right for the movie s size. See if your vector version is smaller than the bitmap version would have been. 9 Close the Shockwave movie. If you managed to make a file size saving while retaining the quality of the image, you have completed this task. If not, try again with different Trace Bitmap settings. Click and drag here to resize text box Chapter 1: Drawing 19

24 exercise 1.5 Scrolling text The UIScrollBar component A seemingly simple thing like adding a scroll bar to a block of text in Flash is surprisingly complicated. However, the last few versions of Flash have all included some pre-built, prescripted objects called Components. Most of them are used for building complex Flash applications, but there is one which is commonly used at a basic level; the UIScrollBar. To use this component, do the following: 1 Create a text box with a fairly large amount of text in it. There has to be enough text to warrant a scroll bar! Text type Instance name 2 Change the text type to Dynamic Text (see right). Dynamic text can be controlled by ActionScript (in-built into the component). 3 Give the text box an Instance name (see right). This should have no spaces in it ( - and _ characters are OK though). Line type 4 Set the Line type to Multiline, (see above) otherwise your text box will only display a single line! 5 Make sure the anti-aliasing is set to Anti-alias for readability. 6 Using the Selection tool, resize the text box so that it s shorter than its contents (so that some of the contents are hidden). 7 Open the Components window and in the User Interface folder find the UIScrollBar (see right). Drag and drop it onto your dynamic text box. The component should snap to the height of the text box and you will see it (and a folder of associated parts) appear in your Library. 8 Test your movie ( /Ctrl-Enter) by creating a.swf file. You will only see the scroll bar working in Flash Player, not in the authoring environment itself. 9 To add edges to your text box, you can either add some graphics in the normal way to create a border, or use the Show border around text button (see above) this will not only show a border but will also give the text box a white background. Create a text layout Using what you have learned about text so far, create a layout which uses several different types of text. Try the following: Create Static Text headings Create a scrolling text box for a large amount of text (change the text type to Dynamic Text!). Try applying some filters to the heading text: filters can be applied directly to text you don t need to make it into a Movie clip first. Break apart some text and try applying gradient or bitmap fills and strokes to the letters. Add borders or other graphics to your scrolling text and to the rest of the movie. Don t forget to save your movie and test it by turning it into a.swf file. Show border around text 20 INTRODUCTION TO FLASH CS3

25 1 project 2 project Group collaboration of Flash graphics Your tutor may choose a theme for this task. Some ideas are: design patterns from different cultures; an animated TV series; everyday household objects. Once a theme has been chosen: 1 Create a sub-set of ten graphics to suit the theme. Take your time with this and practice your drawing skills. 2 Convert each of the graphics into a Graphic or Movie clip symbol. 3 In the Library, organise your symbols by creating a new folder. Click on the New Folder icon in the bottom of the Library (see right), give the folder a name and drag and drop your symbols into the folder. 4 Save your Flash movie with your name. Manual tracing for realistic results Choose an image of a household appliance and render it to screen as realistically as possible. To do this: 1 Find an image you wish to use. It could be a toaster, a kettle, a mug anything that you feel capable of recreating with a little help from these steps. 2 Create a new layer and import the graphic into your movie. It will appear inside one keyframe. 3 Make sure that the layer containing the graphic is moved to the bottom, and lock the layer by clicking the corresponding dot below the padlock symbol. 4 Working in the upper layer, begin tracing the outline of the object. Work without fills at this stage, and make sure the lines connect to each other so there are a series of shapes that can be filled later. 5 Add plain and gradient fills to the shapes to achieve the blends and highlights. 5 Your tutor will tell you how to share files with each other, whether via a network or computer disk. 6 With your Flash movie open, choose File > Import > Import into Library and import each of your group s Flash files into your own. 7 Create an image using the various graphics from other people. Compare your results. The result of this collaborative exercise will be a large Library of themed graphics, sorted into folders by artist or sub-theme. Note how easy and practical it is to create and share libraries! 6 To check your progress against the original image, turn the visibility of the lower layer on and off by clicking the dot that corresponds to the eye symbol. 7 You may try removing all strokes once the fills are applied, for a smoother look. The result of this drawing-intensive exercise will be an awareness of your capabilities to draw with vectors in Flash. You may prefer to use the Trace Bitmap option in future, however it is useful to have a few techniques to draw upon! New folder Illustration by Dave Gardner Chapter 1: Drawing 21

26 Animating Using the Timeline to create movement In this section In this section, you will learn how to: differentiate between frame types in the Timeline make frame-by-frame animation use Onion Skinning to help draw frames make shape tweened animation make motion tweened animation Reading the Timeline make Button symbols make Motion Guide Layers make Layer Masks make and rearrange Scenes Movies of any sort, whether animated or real, are just a series of still pictures, or frames. Flash uses the principles of traditional animation. In the old days, animators would be divided into two groups: The master animators would create the animation s keyframes. Keyframes are the frames where specific things start, or stop, or otherwise change. An animation of a falling tree, for example, might contain two keyframes one showing the tree upright and a later one showing the tree down. The other workers, the in-betweeners, would take on the larger but less-creative task of working out what the dozens of in-between frames should look like as the tree falls. They rely on the few keyframes to show them what to do in-between. So you can see there is a distinction between frames and keyframes, and that a movie relies heavily on those keyframes to start and stop different animation effects. Frame rates There are 12 frames per second (fps) in a new movie. 12 fps is the default value and means that for every second that passes, Flash will play 12 frames. This is the movie s frame rate. For example, a 120-frame movie playing at a frame rate of 12 fps will last for 10 seconds. Frames and keyframes Learning what the different frames look like and do is extremely useful. Empty keyframe This shows a keyframe that contains no graphics yet. Every Flash movie always starts with an empty keyframe. Filled keyframe Keyframes are used to put graphics on the Stage, or to change their position. The black dot and grey background are visual clues that there is a graphic inside. Static frame A static frame contains a non-animated copy of whatever was in the previous keyframe. The grey background shows that the static frame contains a graphic. Static frames always have a filled keyframe somewhere before them. End frame At the end of a row of static frames, you ll see a small rectangle. Don t be concerned about these. All they mean is that the series of static frames has ended. 22 INTRODUCTION TO FLASH CS3

27 exercise 2.1 Red Playhead The red Playhead shows you where you are in time. When needing to work on a particular frame, always make sure the red Playhead is on that frame. Becoming familiar with frames The following steps will help you to become familiar with frames. First create a new Flash movie and draw any simple graphic in the first frame. 1 Add a duplicate keyframe to your Timeline choose Insert > Timeline > Keyframe. 2 Add a static frame to your Timeline choose Insert > Timeline > Frame. 3 Select many frames at once click in the first and Shift-click the last. 4 To move frames, select them as above and then click-drag them (make sure you let go before dragging them). 5 Delete any static frame select it and choose Edit > Timeline > Remove Frames. 6 Delete any keyframe select it and choose Modify > Timeline > Clear Keyframe. All of these options can also be accessed by Ctrl/right-clicking on the Timeline. Reading the Timeline Look closely at this Timeline and answer the questions that follow: Frame-by-frame animation 1 How many frames in this movie? 2 What type of frame is in frame twelve of layer two? 3 In frame one of layer one, are there any graphics? 4 Which frame is the Playhead on? 5 What is the frame rate of the movie? 6 How many seconds will the movie play for? 7 In frames two to eleven of layer two, are there any graphics? 8 What does the symbol in frame eleven of layer two mean? 9 In frame twenty of layer one, are there any graphics? 10 What is the difference between frame eleven of layer two and frame twenty of layer one? The simplest method of animation, called frame-by-frame animation, requires a keyframe for each slight movement of a graphic. For long animations it can be a very slow animation process involving many frames. Frame-by-frame animation is suitable for: Short complex effects, such as a man waving or a horse galloping, are best for frameby-frame animations. It can also be used for long complex animations, however this can be a very laborious process involving hundreds of hand-adjusted frames. Frame-by-frame animations require the least computing power to play, so skilled Flash animators sometimes use it in parts of their movies to make them run more smoothly. tip Copy-pasting frames You are probably aware of the usefulness of copy-pasting on a computer. Flash, via Edit > Timeline, allows you to cut, copy and paste whole frames or chunks of frames. tip Frame and keyframe shortcuts F5: Add frame Shift-F5: Remove frame F6: Add keyframe Shift-F6: Remove keyframe F7: Add blank keyframe Chapter 2: Animating 23

28 Making a simple cartoon-style animation Walk through a simple frame-by-frame animation now. First, create a new blank Flash file. 1 Into the first keyframe, draw a rough line sketch of a wooden crate (see right). Make it about the size of a postage stamp on your screen. Tidy up the lines and fill the shapes with wooden-type colours. Add extra detail if you like (see far right). 2 Select your new graphic and convert it to a Graphic or Movie clip symbol. Name it something sensible and open the Library window to make sure it is there. 3 Add another instance of box to the Stage from the Library. Balance one box on top of the other and add a line below to represent the floor (see right). 4 You are going to rotate the top box around the top corner of the bottom box. Select the top box with the Free Transform tool (Modify > Transform > Free Transform) and move the Rotation Point (see right). 5 Time to animate. To create a new keyframe quickly, press F6. 6 Look at the Timeline. There should be a new keyframe (frame 2) with the red Playhead positioned over it. With the Free Transform tool, point to a corner of the box and rotate it very slightly (see right). 7 Press F6 again and rotate it some more. Repeat this for about six to eight frames (see below left). 8 The box needs to rotate around its bottom corner now. Move the Rotation Point. Continue creating new keyframes and rotating the box slightly. Move the Rotation Point again when the box hits the floor (see below right). 9 By now your Timeline is starting to look like this one (see right). Here we have an animation 24 frames long, running at 12 fps for a total of two seconds. 10 Frame-by-frame animations can take a lot of effort. Stop when you have reached around two seconds-worth of animation. Save the file, and press /Ctrl-Enter to see the animation run. Stepping through the animation There are a few tricks to step through the animation without previewing it as a Shockwave file as you just did: Pressing Enter while you are working in the Timeline causes the movie to play forwards to the end. Pressing Enter again makes the movie play from the beginning. Pressing, or. moves the Playhead forwards or backwards one frame. Moving backwards and forwards with these keys is useful to quickly check the animation. New rotation point Rotation point New rotation point tip Planning an animation With frame-by-frame animation it is especially important to sketch out on paper a rough idea of what your animation will do and when. This saves possibly editing a lot of work on screen later. 24 INTRODUCTION TO FLASH CS3

29 exercise 2.2 Onion Skinning Just like peeling back the layers of an onion, Flash lets you look at many frames of a movie at once. To turn on Onion Skinning in the movie you have just created: 1 Locate one of the three Onion Skinning buttons underneath the Timeline. The first one shows transparent images (see right). 2 Set the scope of Onion Skinning by dragging the handles left and right on either side of the Playhead. These handles determine how many ghost frames before and after the current frame you ll see. In this example, you can see five frames before and five after. Onion Skinning lets you time your animations better and is used in conjunction with the, and. keys to achieve good quality frame-by-frame animations. Rotoscoping Rotoscoping is a technique used by professionals to trace over live action film, frame-by-frame, combining real footage with computer-generated graphics. Rotoscoping was used to animate Gollum, for example, in Lord of the Rings. The PSD file called walk.psd contains eight layers of a walk cycle (see right for a snapshot of Photoshop). 1 Create a new Flash file and import the file walk.psd to the Stage. 2 In the Import dialog box, make sure all the layers are selected and choose to Convert layers to Keyframes (see right). 3 Choose to Set stage to same size as Photoshop canvas (a useful time-saver!) and click OK. 4 When Flash imports the file, it will place each layer on a separate keyframe, instantly creating a frame-by-frame animation. 5 Create a new layer and hand-trace your own artwork on top of the original, frame by frame (see below). 6 Keep creating new layers for new artwork and see how creative you can get! See below for an example. Start Onion Skinning tip Playhead Onion Skinning End Onion Skinning Turning off onion skinning When you no longer need onion skinning, click the Onion Skinning button again. 7 If you think your character is walking too fast, just change the fps of the movie down. The movement will look more jerky but at least he will be travelling at a sensible speed! Chapter 2: Animating 25

30 Shape Tweening When you animate in Flash, you can specify a start keyframe and an end keyframe and Flash will automatically create the steps in between, avoiding the need for lengthy frameby-frame animation. Tweening is short for in-betweening, and it means that Flash will create in-between frames between your keyframes. It also results in smaller file sizes because there is less information to store. There are two types of tweening in Flash; shape tweening and motion tweening. Shape tweening is used less often than motion tweening. It is suitable whenever a shape does more than distort it changes shape. For example, a square becomes a circle (see right). Tweening a shape 1 Create a new blank file and draw a rectangle shape on the Stage in the first keyframe. 2 Insert a new blank keyframe (press F7) further down the Timeline (making sure you leave at least a few frame in between). In this frame, draw a circle in roughly the same place you drew the rectangle. 3 Select the first keyframe again and in the Property Inspector, choose Shape under the Tween pop-up menu (see below). An arrow appears between the two keyframes. These in-between frames are always coloured green (see right). 4 Test your movie. Over time, the rectangle should become a circle, and the movie will loop endlessly. Easing Ease setting Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change (see below). Drag the Ease slider in the Property Inspector (see above) up or down to set the easing. To start an animation slow and speed it up, move the slider down. To start the animation fast and then slow it down, move the slider up. Ease in starts slowly and ends fast Ease out starts fast and ends slowly Troubleshooting shape tweens Tween menu Square tweened A dotted line with a green background, instead of a long arrow with a green background, means that a shape tween is broken. Check the following: Shape tweens cannot be applied to grouped graphics or symbols. The two keyframes on either end of the tween must be on the same layer. Sometimes shape tweens create very strange results. Check the following: Keep the shapes simple. If the tween is complex, consider doing several simple tweens on several layers. Make sure there are not any hidden, very small or white graphics that you cannot see. Flash will see them and try to incorporate them into the tween. to circle A successful shape tween 26 INTRODUCTION TO FLASH CS3

31 exercise 2.3 Electro-cardiograph (ECG) animation This exercise uses a shape tween to simulate a heart rate on an ECG machine. You ll also see some new features in Flash to help you draw even better. Create a new file and follow these steps: 1 Turn on the Grids feature by choosing View > Grid > Show Grid, and choose View > Snapping > Snap to Grid. This creates a grid that your lines will try to follow as you draw. 2 Select the Rectangle Primitive tool and set the Rectangle corner radius option in the Properties window to 18 on all corners (see above right). 3 Draw a box, using a black fill and no outline (see right). 4 Select the box. Choose Modify > Shape > Soften Fill Edges and enter a Distance of 50px and Number of steps as 5 (see far right). Set the Direction to Expand. Four bands will appear, plus the original shape (see right). This will create a vector-based stylised blur. 5 Set the Paint Bucket tool to a radial greyscale gradient and look at the Color Mixer (Window > Color Mixer). In there, soften the greyscale gradient so that the black is dark grey and the white is light grey (see right). 6 Double-click the shape to edit it check that you are inside the shape by looking at the Scene Menu underneath the Timeline. 7 Make sure that Lock Fill at the bottom of the Tools window is switched off (see right), click with the Paint Bucket tool inside the top left corner of the outside band and the bottom right corner of the inner band. Fill the two middle bands with a medium grey colour. This creates a bevelled effect (see far right). 8 Add dark green lines to the black shape (see above right). Switch back to the main Stage. 9 Name this first layer screen. Add a plain frame (press F5) to the Timeline at position 24 and lock the layer. Make a new layer and call it reading. 10 Pick up the Pencil tool and set it to a red 2 px Stroke. Turn off the Snap to Grid feature that you set earlier. Draw a straight red horizontal line (see right). 11 Create new blank keyframes (press F7) at positions 6, 12, 18 and 24. In each one, draw a slightly different red line. Turn on Onion Skinning to help you see the animation (see right). 12 Click in the new keyframes at 6, 12 and 18 and set the tween for each to be Shape. Lock Fill 13 Save the movie and test the animation now. To simulate the tha-thump of a real heartbeat, move some of the frames closer together and some further apart. Exercise extension: An ECG reading really needs a beep, beep sound. Read ahead to the topic on Sound in the next chapter and add a small sound to frames 6, 12 and 18. Enlargement 4 bands of colour Rectangle corner radius Shape tweens Chapter 2: Animating 27

32 Motion tweening The second method of tweening two items in Flash is called motion tweening. There are some rules for motion tweening: The shapes should be symbols. Grouped shapes can also motion tween but their flexibility and predictability is not as good. No more than one motion-tweened symbol per layer. Suitable for Use motion tweening to animate movement, rotation, skewing, colour and transparency changes. Symbol instances In shape tweening, the two keyframes contained different shapes. In motion tweening, the two keyframes must contain the same shape. In fact, it must be two instances of the same symbol, on the same layer. To motion tween a symbol 1 Create a new file, draw any graphic inside it and convert the graphic into a Graphic symbol. Delete the graphic symbol from the Stage. 2 Make two keyframes in your Timeline, leaving at least a few frames between them. 3 Drag the symbol from the Library window to each of the two keyframes. In the first keyframe, put the instance on the left. In the second keyframe, put the instance on the right. 4 Select the first keyframe in the sequence. 5 In the Property Inspector, choose Motion under the Tween menu (see below). An arrow appears between the two keyframes (see right). The purple colour will help you identify this as a motion tween. Troubleshooting motion tweens Flash displays a dotted line between keyframes to indicate that something is wrong. Check the following: Motion tweens must be between two instances of a symbol or a grouped object. Check that you have used a symbol or that all objects are grouped. Make sure there is a keyframe on each end of the tween. Make sure there are not any hidden, very small or white graphics that you cannot see. Flash will see them and try to incorporate them into the tween. Copy and paste a motion tween Tween menu Ease setting Copy and paste motion lets you copy a motion tween, and paste its symbol, frame and tween information to another symbol. 1 Shift-select the frames in the Timeline that contain the motion tween to copy. 2 Select Edit > Timeline > Copy Motion. 3 Select the symbol instance to receive the copied motion tween. 4 Select Edit > Timeline > Paste Motion. tip Frame and keyframe shortcuts F5: Add frame Shift-F5: Remove frame F6: Add keyframe Shift-F6: Remove keyframe F7: Add blank keyframe A successful motion tween 28 INTRODUCTION TO FLASH CS3

33 exercise 2.4 Chef s Special game demo In this exercise, you will create an animated demo to promote a simple arcade game. In Chef s Special, Luigi the chef must travel from one side of the screen to the other without being hit by any of his falling pizzas. 1 The graphics have already been set up for you in the file chefs_special.fla. Open this file. 2 Select the background layer and add a static frame (press F5) at frame 100. This will give your demo some time to run. 3 Select the chef layer and add a keyframe (press F6) at layer 100 also. In frame 100, move the chef symbol across to the right hand side of the screen. 4 Add a motion tween to the chef layer by selecting the first keyframe of that layer and choosing Motion from the Properties window s Tween menu. The chef should now move across the Stage through the duration of the Timeline (see right). 5 Add a new layer and call it pizza1. Drag the pizza symbol from the Library to the Stage. Place it above the top of the Stage, as if it is about to drop on the chef. Resize and/or rotate it if you want to. 6 Add a motion tween to the first frame of the pizza1 layer. In the Properties window, set it to rotate clockwise (CW) between 1 and 4 times (see right). 7 The motion tween will not work yet! Add another keyframe to the same layer, further down the Timeline (but not right at the end). You should now see your purple motion tween arrow correct itself. Move the position of the second instance of the symbol to somewhere below the bottom of the Stage. The pizza should now look as if it is falling from the sky. 8 Repeat steps 5 7 to create two or three more pizza layers. Have each pizza falling from a different position and move the motion tweens so that they are falling at different times (see below). 9 Finally you need to make the chef avoid the pizzas! On the chef layer, keep adding keyframes and moving the chef symbol so that he is never hit by the flying pizzas (see right). 10 You are complete. This is not a real game, but with some ActionScript (see chapter 4) it certainly could be. Chapter 2: Animating 29

34 Movie clip symbols Movie clips are the most complex and useful type of symbol. They are really mini-movies, with timelines of their own, which play inside the main Timeline. They also have the added benefit of being able to be scripted using ActionScript. Everything that you do in the main Timeline, you can do inside a Movie clip too. Movie clips allow you to build animations within animations for example, a shape tween playing inside a motion tween (perhaps a cloud changing shape as it travels across the sky). To make a simple animated Movie clip In a new Flash file, make a rotating wheel. 1 Draw a circle on the Stage, and punch some holes in it with the eraser tool. This extra detail makes it easier to see the circle rotate (see right). 2 Select the object and choose Modify > Convert to Symbol, make this into a Movie clip symbol and call it wheel. The graphic will have a light blue box (see far right). 3 Double-click the symbol to move into symbol-editing mode. The Timeline you see is now the Movie clip Timeline, not the main Timeline. You can see this by looking at the Scene Menu (see right). 4 You are going to apply a motion tween inside this Movie clip. Select the graphic in frame 1 and convert it to a Graphic symbol. Call it wheel_graphic. 5 Press F6 at frame 20 to create a duplicate keyframe. 6 Click back in frame 1 and set a Motion tween. Set the rotation to be CW (clockwise) and make it rotate once. 7 Go back to the main Stage by clicking on Scene 1 (see far right). From the Library, drag and drop two more instances of this Movie clip on the main Stage. Scale these with the Free Transform tool so they are slightly different sizes (see below right). 8 Test the movie now. Note that the main Timeline is still only one frame long, but three other twenty-frame animations play continuously within that one frame. 9 You ll see that the wheel stutters as it encounters frame 20 and then frame 1, which have exactly the same graphic on them. To fix this, edit your wheel symbol by adding a keyframe at frame 19, then deleting frame 20 completely (shortcut: Shift-F5). Any edit that you make to the graphic symbol called wheel_graphic will be applied to the Movie clip symbol called wheel and to every instance of wheel on the Stage. Note: This movie won t play in Flash authoring mode. To preview it press /Ctrl-Enter. Button symbols A button is a type of symbol that can have some simple reaction to user interaction. ActionScript is added to make the button to start or stop the movie, or do some other useful job. Buttons have a four-frame Timeline separate from the main movie s Timeline. The four button frames or states are: Up whenever the mouse is not over the button. Over when the mouse is over the button. Down when the button is clicked. Hit the clickable area of the button. You only ever see the first three frames, Up, Over and Down. The Hit frame tells Flash which parts of the button graphic are active. Main Stage Current symbol Movie clip s timeline 30 INTRODUCTION TO FLASH CS3

35 exercise 2.5 To make a simple button 1 Draw a shape on a new Stage, select it and choose Modify > Convert to Symbol 2 Enter any name and choose Button as the behaviour. 3 Double-click the button to edit the symbol. You could also double-click it in the Library window to edit it. 4 Press F6 three times to create duplicate frames for the Over, Down and Hit states. 5 Click inside the Over frame and change the colour or shape of the graphic. Repeat for the Down frame. 6 The Hit frame only needs to be changed if your button is an irregular shape. Flash will look for any block of solid colour as the Hit state (active area). Go back to the main scene and test the button by previewing your movie. Buttons are most useful when actions (small pieces of code) are applied to control them. This will be covered in chapter 4, ActionScripting. Common Libraries Flash provides some pre-made Buttons inside Common Libraries. This library can help you get started and show you how sophisticated some button graphics can become. To see them, choose Window > Common Libraries > Buttons. If you want to use one of these pre-built buttons, at this beginning stage, only use the ones with regular button icons. Pill buttons In this exercise, you will create some pill shaped buttons. 1 In a new document, choose View > Rulers and then drag from the left ruler to place a vertical guide on the Stage (see right). 2 Draw a circle with no outline and a radial greyscale fill. When you draw it, hold down the Option/Alt key and drag out from guide line. This will draw the circle from the centre (see right). 3 With the circle selected, use the Gradient Transformation tool to position the centre of the gradient higher, but still centred on the guideline (see top far right). 4 Select almost half of the left side of the circle (see right) and hold down the Shift key while moving it left with the arrow keys on the keyboard. This will make sure that it stays fixed horizontally. 5 Select a very small vertical slice from the remaining piece and using the Free Transform Fill tool drag the centre handle on the left hand side to stretch the piece to fill the gap (see above far right). Select almost half of the left side and move it left tip Working in the wrong mode? Keep an eye on the Scene Menu to check you are in the right mode on the Stage for normal work, and in symbol-editing mode when editing Graphic, Movie clip and Button symbols. Guide Main Stage Up Over Down Hit Current symbol Move centre point of gradient upwards Stretch out the tiny centre strip to fill the gap. Chapter 2: Animating 31

36 exercise 2.5 Pill buttons cont 6 Select the whole graphic and convert it to a Graphic symbol. 7 Choose Modify > Convert to Symbol again but this time choose the Button option. Call this symbol pill_button. 8 Double-click on the pill_button symbol to enter symbol editing mode and create a keyframe for each button state. 9 In the Over frame, select the instance of pill_graphic and adjust its Color settings in the Property Inspector. Set Color to Brightness and make the value 30% (see below). Choose your own Brightness setting for the Down state. 10 Go back to the main Stage. Drop one instance of pill_button onto the Stage if it is not already there. In the Property Inspector, give it a Tint in the Color menu (see below). 11 Option/Alt-drag to create two copies of the button. Make sure the buttons are aligned, either using View > Snapping > Snap to Objects or using the Align window. 12 Give each button a different Tint, so that it looks as if you have 3 different buttons. Exercise extension: Edit the pill_graphic symbol now to add some sophistication. For example, you may wish to add extra highlights, a drop shadow and an outline. Look at Window > Common Libraries > Buttons for ideas. Layer effects There are two different layer effects. These effects are applied directly to the layers to produce: Mask layers which hide and show other layers below. Guide layers which guide motion tweens on other layers. Brightness Tint Layer properties To look at or set the properties for a layer, double-click the layer icon to the left of the layer name. The Layer Properties dialog box pops up (see right). Here you can set the Type. 32 INTRODUCTION TO FLASH CS3

37 Motion guide layers Motion Guide layers let you draw paths that motion-tweened symbols can be animated along. The path is drawn in the Motion Guide layer, then motion tweens in the layer below can follow the path. To create motion on a path In a new file: 1 Draw a ball and convert it into a Graphic symbol. 2 Add a keyframe at frame 25 and motion frame 1. 3 Create a new Guide layer by clicking this symbol in the layers area. You will see the Motion Guide layer appear and the layer containing the graphic indent underneath it. An indented layer is affected by the Motion Guide. 4 Set the Pencil tool to a bright pink thin stroke. In the Pencil tool Options, set the stroke to smooth. In one motion, draw a wavy line across the screen. This is the motion guide. It will be invisible in the final movie. 5 In frame 1, move the symbol so that its small empty circular point is at the beginning of the pink line. 6 In frame 24, repeat but move the Graphic symbol to the end of the line. 7 Turn on Onion Skinning (see above) or run the Playhead along the Timeline to see if the guide layer is working. To create oriented motion on a path This Motion Guide technique is really useful for guiding shapes which have a front end and a back end, for example; planes, cars, arrows, birds, triangles. 1 Create a new file and in it create a motion tweened graphic and a Motion Guide layer, just as you did above, but this time use a graphic which has a front and a back. 2 Once your graphic is successfully following the Motion Guide, select the start of the tween and switch on Orient to path in the Properties window (see right). 3 You will also need to make sure, at the start and end of the tween, that your shape is pointing in the direction of where it s going to go (so that Flash knows which is the front!). Troubleshooting Motion Guides Add Motion Guide If the animation does not follow the path (and it often doesn t), check the following: The graphic symbol should snap to the path. Move the graphic symbol slightly, the empty circle visible in the centre of the symbol should be over the guide line. Turning on the Snap option at the start of the tween (see above) may help. The Guide layer should have one unbroken line on it. If you have drawn your guide in two or more stages, Flash might see this as two separate guides. The Guide layer should not have a tween. It is the layer below that is tweened. The icon for the layer below should be indented slightly, showing it is controlled by the motion Guide layer above. If your tween is set to Orient to path, make sure that both the starting and ending instances are pointing in the right direction. tip Pink guides? Use bright pink because it is easiest to see, and you are less likely to have pink graphics to confuse it with. This is a good Flash habit to get into. Orient to path Snap Chapter 2: Animating 33

38 exercise 2.6 Mask layers A Mask layer is a hole through which underneath layers are visible. The masked area is the window through which other layers can be seen. To create a Mask layer 1 Create a new file. 2 Using regular Static Text, write a word of your choosing (see below). This will be revealed by the mask. 3 Make a new layer in the normal way. 4 On it, create a bright blue circle and turn that circle into a Graphic or Movie clip symbol. 5 Motion tween the circle across the word over a duration of about 25 frames (see right). 6 Right-click the icon for the mask layer and set its type to be a Mask layer. Both the Mask layer and the Masked layer will be locked. This allows you to see the mask in action. If you need to edit either of those layers, just unlock them. They will always appear properly in your final movie, even if they are unlocked. 7 Preview your movie to see the final effect. Limitations and multiple layers You can add more layers under a Mask or Guide layer to create sophisticated effects. Make sure the layers are directly underneath each other and their type is set to Masked or Guided. You cannot have a Guide layer that is also a Mask layer, or a layer that is controlled by both a Guide layer and a Mask layer. It is not possible to create a mask that follows a path. End frame You will now create an end frame suitable for an animation using a mask: 1 Some graphics have been provided for you. Open the file called end_frame.fla. 2 Create a new layer and on it, draw a rectangle which covers the Stage, but which is filled with only 40% of any solid colour. Use the Color window to set this semi-transparency (see far right). 3 Make another new layer and on it, create some Static Text which says The End or something similar (see right). Add any effects or fills to the text as you like. 4 Create one more new layer and in it, create a blue circle in the centre of the movie. It doesn t matter how big it is. 5 Convert this circle into a Graphic or Movie clip symbol. 6 Motion tween this symbol so that it starts very small (almost invisible) and over the duration of the scene, enlarges so that it covers the entire movie (see right). 7 Finally, make this layer into a Mask layer, and make sure that it is masking the two layers below it. To make the mask affect the semi-transparent colour layer aswell, drag it up and right slightly so that it indents underneath the Mask layer (see right). tip Blue masks? Another good Flash habit is to create bright blue masks. Like the motion guides, these are never seen in the final movie. It helps to have some colour coding like this when movies get complex. Transparency setting 34 INTRODUCTION TO FLASH CS3

39 exercise 2.7 Creating scenes Scenes are an easy way to set up separate sections of a Flash animation. Scenes play automatically in the order that they sit in the Scene panel. When to use scenes Use scenes when your Timeline is getting too busy too many layers, or too many frames. Scenes should only be used when you are making a linear animation, never for scripted, interactive movies. The only exception to that rule is when you are making preloaders (which will be explained in further detail in the ActionScripting chapter). Naming and ordering scenes The Scene window is where you can rename, reorder, add and delete scenes. Open it by using Window > Other Panels > Scene (see right). To add a scene, click the Add scene button. To delete a scene, click Delete scene. To rename a scene, double-click the scene name and enter a new name. To duplicate a scene, click Duplicate scene. To change the order of a scene in the movie, drag the scene up or down the list. Editing and previewing scenes Quickly jump from one scene to another with the Scene drop-down menu in the top right of the Stage (see right). When you test a movie with /Ctrl-Enter, all scenes play. To play only the current scene, press -Option-Return/Ctrl-Alt-Enter. 3,2,1, action 1 Open up any movie you have created. 2 Create a new Scene and call it countdown. 3 Make a frame-by-frame animation in this new scene. It should show the numbers counting down, 5, 4, 3 and so on down to zero. 4 Arrange the scenes in the Scene panel so that this new scene plays first. Exercise extension: Add some graphics behind the numbers for a more visually interesting countdown effect. Duplicate scene Add scene Delete scene Chapter 2: Animating 35

40 3 project 4 project Banner advert Make an animated banner for a real or fictitious company of your choosing. Here are some ideas; Ship Shop, who sell all manner of boating equipment; Funhouse, a large chain of toy shops; Kau Poi, a New Zealand country music star; Light-Me-Up, a stage and event lighting company. 1 Use the techniques learned in the last two sections to create an animation. 2 Set the Stage to a size of 468 x 60 the standard size of a banner ad. 3 Create shape tweens, motion tweens, motion guides and mask layers where possible and appropriate. 4 Use the Color (Tint, Brightness etc) menu on symbols where possible, to save the file size. 5 Attempt to get your swf s file size to below 16kb; a file size restriction is usually imposed on banner adverts. Animation Use all that you have learned so far to make a short animation. Try to remember the following things: Use scenes to split up different sections of the movie (ie. title, main action, credits etc). Use symbols where possible to reduce file size and simplify editing. Use motion and shape tweens instead of frame-by-frame animation to speed up authoring. Use Color variations on symbols to provide interest. Use filters. Keep previewing your movie and keep checking your swf s file size! 36 INTRODUCTION TO FLASH CS3

41 Compositing Creating complex Timelines, adding sound and video In this section In this section, you will learn how to: make nested Timelines add and tweak sound files add video files You have the skills to draw graphics, create symbols and make simple animations. Now bring those skills together to build effects-upon-effects for sophisticated results. Nested Timelines Probably the biggest challenge to working with Flash is the existence of Timelineswithin-Timelines. Any symbol can contain any other symbol. A button can contain Movie clips in each of its first three frames. Those Movie clips can in turn contain motion tweens, which can contain shape tweens. The combinations are endless. Movie clips within buttons A button has three visible frames, which show depending on what you are doing with the mouse. You can use a Movie clip inside each of those frames to create animated buttons: 1 Create a simple circle and convert the circle to a Button symbol. 2 Double-click the symbol to edit the button. Press F6 three times to add a keyframe to each button state. 3 Select the circle inside the Over state and convert it to a Movie clip symbol (see right). 4 Double-click the symbol to edit the Movie clip. Keep an eye on where you are! Check the Scene Menu and you should see that you are inside the Movie clip symbol which is inside the Button symbol which is on the main Stage (see right). 5 Inside that Movie clip symbol, create a simple shape tween across approximately 7 frames (see right). 6 Navigate back to the main Timeline by clicking Scene 1 and test the movie. The Movie clip plays inside the button when the mouse is held over the button. The Movie clip animation would need some ActionScript to stop it looping; you will learn how to do that in the next chapter. Buttons within Movie clips Buttons are used extensively inside Movie clips. Any Timeline can contain any number of buttons. It is a good idea to keep all buttons on their own layer, just to keep things organised. Movie clips within Movie clips Nested Movie clips can seem complex, but they are very useful. To make a simple example now, in a new Flash file: 1 Choose Insert > New Symbol. Make a Movie clip symbol and call it ball_ squash. A symbol made in this way will not automatically be placed on the Stage. 2 Inside this Movie clip Timeline, make a small red ball (see right). tip Buttons within buttons? This is the one combination that does not work. Never put a button symbol inside any frame of another button symbol! Convert the contents of this frame into a Movie clip Main Stage Button symbol Movie clip symbol tip Naming symbols Name symbols with care. With Movie clips inside each other, it can become confusing to know what animation is what. Carefully descriptive names help a lot. Chapter 3: Compositing 37

42 exercise 3.1 Solar system In this exercise you will create a mini solar system, with the planets revolving around the sun. 1 Create a new file and give it a black background. 3 Add keyframes to frames 11, 12, 13, 14 and 24 (see right). 4 Use the Free Transform tool to adjust the vertical scale of the ball in frames 11, 12 and 13. It should be a little bit squashed in 11 and 13, and very squashed in 12 (see right). So that the button looks as if it s squashing downwards, move the transformation point down to the bottom edge (see right). Transformation point 5 Go back to the main Timeline (click Scene 1) and make another new Movie clip symbol. Call this one ball_fall. 6 Inside frame 1 of the ball_fall Timeline, drop the ball_squash Movie clip. Create keyframes at frames 12 and In the ball_fall Timeline at keyframe 12, move the ball_squash Movie clip down about 120 pixels far enough that it looks as if it s falling. 8 Add motion tweens to frames 1 and 12. In frame 1, push the Ease slider all the way down to -100 (see right). Do the opposite in frame Go back to the main Stage. Find the ball_fall Movie clip and drag and drop it onto the Stage, near the top. 10 Test the movie. The ball_squash Movie clip plays inside the ball_fall Movie clip both are synchronised to frames 12 and 24 so that when the ball falls to an imaginary floor, it squashes (see right). You must preview this movie to see the nested timelines animating properly. 11 Finally, on the main Stage, motion tween the ball_fall Movie clip across the Stage for about 50 frames. Test the movie. It should now look as if the ball is bouncing across the movie. 2 Turn on Rulers (View > Rulers) and drag one horizontal and one vertical guide to roughly the centre of the Stage (see right). 3 Using a red/orange/yellow radial gradient, draw a circle to represent the sun (see right). To draw from the crossover of the guides, hold down the Option/ Alt key as you draw. 4 Make a new layer and on it, draw a circle with a pink stroke and no fill, larger than the sun but centered on the same point (see right). This will become the Motion Guide around which the earth will travel. 5 Convert this pink circle into a Movie clip symbol; call it earth_orbit or something similar. 6 Double-click to edit the earth_orbit symbol. 7 Put an end frame (press F5) at frame 365; this Movie clip will have one frame for each day of the year. 8 Create a new layer, underneath the pink circle, and on it, draw a blue/green circle to represent the earth. It doesn t matter where you draw this new circle. 9 Convert this earth circle into another Movie clip symbol. 10 The pink circle layer needs to be a Motion Guide, so Ctrl/right-click on it and choose Guide from the drop down menu, then drag and drop the earth layer so that it indents underneath the guide layer (see right). Motion guide layer 38 INTRODUCTION TO FLASH CS3

43 exercise Solar system cont 3.1 Break in Motion guide 11 The Motion Guide needs a very small break in it so that Flash can identify the beginning and the end of the line, so zoom close in to a point on the line, and using a thin Eraser, rub out a small break in the line (see right). 12 Add a keyframe in the earth layer at frame 365 and then motion tween the movement of the earth; at frame 1, move the earth symbol to one end of the line and at frame 365 move it to the other end of the guide. Although the two instances will be almost in the same place, the earth symbol should follow the Motion Guide. 13 Test your movie. The earth should orbit the sun in 365 frames. 14 Now you are going to add a moon to the earth in a similar way. Double-click the earth symbol to edit it. 15 Make a new layer, and on it, draw a(nother) pink circle. This will be the motion guide for the moon. 16 Convert this pink circle into a Movie clip symbol; call it moon_orbit. Double-click to edit it. 17 Put an end frame at frame 28; one frame for each day of the lunar month. 18 Create a new layer underneath the pink circle, and on it, draw a grey/white moon. Convert this earth circle into another Movie clip symbol. 19 Make sure this pink circle is behaving as a Guide layer and is controlling the moon underneath it (see step 10 for clues!). 20 Make a tiny break in the circle and then motion tween the moon in the same way that you motion tweened the earth. 21 Test your movie. The moon should orbit the earth in 28 frames as the earth orbits the sun. Exercise extension: Add some more planets in the same way; find out the order of the planets, how long each takes to orbit the sun and whether they have any other moons or stars orbiting them. You may not be able to be accurate, especially in the case of Pluto, which takes about 248 earth years to orbit the sun! Moon Earth Working with sound Flash imports all of the main sound formats, (.wav,.aif,.mp3) which you can then use from your Library just as you would a symbol. To get started with sound, make sure you have access to the file soundlibrary.fla. This is a Flash movie with many sounds in its Library. To bring these sounds into your Flash movie: 1 Choose File > Import > Open External Library. 2 Play the sounds from the Library window if you want to hear them first (see right). 3 Drag the files onto the Stage as you require them. Any sound file that is used in your movie will automatically add itself to your main Library too. Sun Play Chapter 3: Compositing 39

44 Adding sounds to movies Adding a sound is simply a matter of selecting a keyframe, then dragging and dropping the sound anywhere on the Stage. It does not matter where it goes on the Stage because it is not something you can see. It is good practice, however, to make a new layer (or layers) on which to store sounds this helps avoid confusion. Try this now with any one of the movies you have made, especially the ones with buttons: 1 Open your movie and navigate to a keyframe where you would want to hear a sound. On a button, this might be the Over or Down state of the button symbol (see right). 2 Test the sound in the Library by clicking the Play button at the top of the window (see previous page). 3 Make a new layer and make sure there is a keyframe in the appropriate place on that layer (see right). 4 Drag and drop the sound anywhere onto the Stage. Sound options You can set various options and effects for each instance of a sound using the Properties window (see right). 1 Select the keyframe containing the sound that you want to affect. 2 Choose a synchronization option from the Sync pop-up menu: Event synchronizes the sound to the occurrence of an event. An Event sound plays to the end, even if the animation stops. Stream synchronizes the sound for playing on a website. If Flash can t draw animation frames quickly enough, it skips frames. Streaming sounds stop if the animation stops. 3 Enter a value for Repeat to specify the number of times the sound should repeat. For continuous play, select Loop (see above). Sound Envelope In the Properties window is an Edit button. Clicking that button shows the Edit Envelope window (see below). This panel allows you to determine when the sound starts and stops, and the volume for each channel (if you are working in stereo). To start the sound at a given spot, drag the slider in the middle. To control volume, click inside each channel and add handles. Drag those handles down (quiet) or up (loud). Flash as an audio tool Flash is not an audio editor. It has some attractive tools for tweaking sounds, but it cannot actually edit sound properly. If the sound that is brought into Flash is poor quality or needs editing to be useful, it should be edited in a sound editing program. tip Start sound here Volume low here Volume high here Sound and file sizes Repeat/Loop Beware Flash movies containing sound can rapidly become quite large and difficult to manage. Use sound with caution. 40 INTRODUCTION TO FLASH CS3

45 exercise 3.2 Sound-based Movie clips A useful technique to keep Flash movies small is to build up your own longer sounds from a few short sound files. This audio-layering can be used for everything from background machinery noise to music. In this example, you will build an engine noise that can be used as a backdrop for a racing game or car animation. 1 In a new file, import the external sound Library soundlibrary.fla. 2 Insert a new Movie clip symbol and call it engine_noise. 3 In layer 1, add an end frame to frame 24. Drag and drop the sound file Beam Scan onto the Stage. 4 Add a new layer. Add a keyframe to frame 8. Drag and drop the same sound file onto the Stage. 5 Add a new layer. Add a keyframe at position 16. Drag and drop the same sound file onto the Stage (see right). 6 Go back to the main Stage and drag and drop this Movie clip into the movie. The Movie clip will appear on Stage as a small hollow dot. Test the file. 7 Edit the Movie clip to add sounds as you wish. By default, any sound that is added is an Event sound. There is no need to loop the sound with this technique, because the Movie clip loops automatically itself. The sound settings that Flash uses by default are good for most things. It is possible to edit these when the movie is published, as you will see in the last section. Exercise extension: There are quiet spots at the beginning and end of the beam scan audio piece (also in the soundlibrary.fla library). Click in each keyframe and use the Sound Envelope panel to start the sound later and end it earlier. Do this for each instance of the sound. Importing video It is possible to import video into a Flash movie. Video footage behaves just like any other Library item you can overlay text, vector shapes and other graphics, and control the video the way you want. Flash compresses the video into its own format (.flv). You can optimise this compression for quality versus file size. By default, Flash will add a control bar. Flash video is now the standard way to embed video onto a web page; YouTube video uses the.flv format. Although video is now very easy to integrate into Flash, you should always consider that it will increase the file size significantly. Video compression Flash uses the On2 VP6 video compression codec, made specifically for importing video to be played with the Flash 7 and later players. A codec is just an engine for compressing and playing video. The On2 VP6 codec provides the best quality to file size ratio. Quality Mono/stereo Length Size Chapter 3: Compositing 41

46 Importing video files 1 Choose File > Import > Import Video. 2 The Import Video wizard appears. Press the Choose button and locate your video file (see right). You can import these file formats:.avi,.dv,.mpg,.mpeg,.mov (Mac and PC).WMV,.ASF (PC). 3 Next you will be asked how you would like to deploy your movie. Generally choose Progressive download from a web server. Selecting an option will give you a fairly detailed description of the pros and cons of it (see below right). Click Continue. 4 Under the Profiles tab, choose a compression option from the pop-up list (see below left). Higher quality means larger file sizes. Compression can also be customised, using the settings in the Video and Audio tabs. See Flash s help files for a detailed description of what each of these settings does. 5 Under the Crop and Resize tab, you can easily choose to resize your video if you want (see below right). There are also limited options in there for cropping and trimming your video, though most of that kind of editing should be done previously in a video-editing program. 6 Next you are given skinning options. Here you have a range of preset user interfaces to choose from for controlling the movie playback, alternatively you can choose None. 7 The final screen will provide a summary of how the video will be imported. It will explain that you ll need to upload (to a web server) an externally created video file alongside the Flash movie file. 42 INTRODUCTION TO FLASH CS3

47 8 Click Finish. Flash will encode the video (this may take some time see right) and then import the video onto the Stage. Although this process is quite straightforward, what Flash produces is not. Once you have previewed your movie, you will be left with the following files: The Flash file into which you imported the video. The original movie. This does not need to be uploaded to the web server, and is no longer needed unless you want to re-import the video. So you will always need three files to make the video run properly; the regular.swf file, the.flv video file and the skin.swf file. The FLVPlayback component Although the Video Import wizard does the hard work for you, it is also useful to know how Flash refers to all of these files inside the authoring environment, so that you can swap files around if you need to. The ActionScript which controls the video and the video skin is contained inside a component called FLVPlayback. Once you have imported video into your Flash file, this component will appear inside your Library (see right). Don t delete it or your video won t work! You ll see your Flash video on the Stage with its skin and the FLVPlayback icon (see right). Select it and in the Parameters window (which is usually docked with the Properties window see below right) you will see the following information which can be changed; autoplay: True plays the video immediately. The.swf file which is a compressed version of the Flash file on the left. This must be uploaded to the web server. The Flash compressed video file which must be uploaded to the server. The skin control bars for the Flash video. This must also be uploaded to the web server. source: This specifies the location of your.flv file. This can be useful for re-linking video that you have moved or renamed. skin: Allows you to change the skin you have specified. When you preview your Flash movie, the new skin.swf will also be exported. Other parameters also allow you to change some properties of your skin. tip Mac/Flash CS3/QuickTime 7.2 bug! If you are using the combination above and you find your movie stops playing part way through, make sure that the audio in the original video file is encoded with 44.1 khz. If not, you may have to reencode it before you bring it into Flash. See kb Chapter 3: Compositing 43

48 exercise project 6 project Adding video For this exercise, either use a piece of your own video, or use the provided file, demo.mov. Play the video first to familiarise yourself with what s in it. 1 Create a new Flash movie and import your video. 2 Step through the Import Video wizard: If you are using the provided video, make sure you resize the video to an appropriate dimension (for example 450 pixels wide). 3 Choose an appropriate skin. Think about whether the skin should overlap the video or site underneath it. 4 Preview your movie and check that you know the location of these files; the regular.swf file, the.flv video file and the skin.swf file. Exercise extension: Add more graphics to your movie to provide a context for the video to sit in. Parallax effect Create a parallax effect, suggesting travel and distance. Parallax means that some things appear to move faster than others. For example, out of a car window the trees go past faster than the mountains, and near mountains go past faster than far ones. 1 Build a Library of Graphic symbols. You will need all the components for your parallax effect. Some ideas: travel (trees, mountains, cows, clouds); outer space (stars, planets, asteroids); flying over a city; walking past a crowd of people. 2 Create layers for each animation. Animate close things quickly, far away things slowly. Use motion tweens extensively. 3 Use the order of the layers to make some things appear in front of other things. Exercise extension: Use bitmap images to give a truly realistic feel. Create a contraption Plan a Heath Robinson or Rube Goldberg machine on paper. These two people are famous for building contraptions that looked complex but really did very little. For example, a machine full of cogs and pulleys that fries an egg or shaves a sheep. This exercise is about the level of planning that should go into a Flash project with many nested Timelines and complex interactions. 1 Think about a ridiculous machine that does a simple task in a complex way. 2 Produce a diagram of your contraption, plus individual sketches of each of the Movie clip, Graphic and Button symbols that would appear in your Library. 3 Explain to someone else the way the various Movie clip symbols and buttons would work inside Flash. Whenever you sit down to a complex Flash animation task, a stage of paper planning is essential to save time and avoid confusion. Think about the composition in advance. Exercise extension: Build it! (In Flash, not for real!) 44 INTRODUCTION TO FLASH CS3

49 ActionScripting Adding simple interactivity to your movies In this section In this section, you will learn how to: control the main Timeline using a button control a Movie clip s Timeline control a Movie Clip s properties set and use variables use a conditional statement create a preloader set dynamic text create drag and drop actions on Movie clips ActionScript is the name of the scripting (coding) language that Flash uses to add interactivity to a movie. ActionScript is similar to JavaScript, the language that some web pages use. ActionScript can produce some very complex results and this chapter will skim lightly over the most basic techniques don t expect to become an ActionScript expert overnight! In the previous three sections you made components and movies that could all have used some ActionScript. However, in those sections your focus was on using graphics. In this section the focus is on ActionScript, not graphics. Bring the two ideas together in your own time to produce attractive, interactive movies. ActionScript 3.0 Flash CS3 introduces a new standard for ActionScript version 3.0. Its implementation differs quite significantly from earlier versions of ActionScript and will mean that even at this basic level some techniques will need to change. This manual will use the new ActionScript 3.0 standards. ActionScript basics The Actions panel ActionScript is written directly into the main window of the Actions panel. Call up the Actions panel by choosing Window > Actions (Option/Alt F9). Although this is a complex tool, there are a few parts that are used most often: Use the main window to write actions. Add parts of scripts from a list with the button or by dragging-and-dropping from the script list. Point to symbol instances with the target path button. The Movie Explorer (bottom left corner) shows the movie parts. Syntax and lettercase ActionScript must be written in a certain way. Although the rules of ActionScript syntax are too complex for this introductory manual, be aware that the slightest mistake can make your movie stop working. Script list Add a new script item Movie Explorer Find target path to an instance Check syntax Auto format Typical ActionScript Main window Chapter 4: ActionScripting 45

50 For example, there are rules about letter-case: ActionScript is case-sensitive. That means it matters whether something is written with upper or lower-case letters. Words are written in intercap format. That means that words start with a lowercase letter. If a few words are run together, any word after the first word starts with an uppercase letter. For example: play; gotoandplay; nextframe; nextscene. There are also rules about brackets: Parentheses( ) follow words to show that those words are instructions to Flash. For example: stop( ); gotoandplay(3); The purpose of the brackets is to give us something to put extra instructions in. Curly braces { } surround some blocks of code. The most important thing to remember is that for every opening { brace there must be a closing } brace somewhere later. And one more rule about semi-colons: Where there is more than one line of code between your curly braces, each line must be separated by a ; (see right) To help you see what is right or wrong about a block of ActionScript code, notice that the code is coloured to identify different parts. It might also help to click the Auto format button this makes your code nice and neat, which in turn makes it easier for you to spot mistakes, and will also let you know if it finds any errors. ActionScript good practice It is good practice to always keep your scripts on their own separate layer and to keep this layer at the top of the Timeline stack (see right). That way scripts are much easier to keep track of. Controlling the main Timeline Stopping the Timeline The most basic ActionScript you will ever need (and you will need it often) is the stop action. In its simplest form it will stop the playback of the Timeline that it is placed on. There is an action applied to this frame 1 Make a simple animation in a new file. 2 Make a new layer on the main Timeline and name it actions (see right). 3 Select the first keyframe of the actions layer and open the Actions window. 4 In the main part of the window, type; stop(); 5 You will see a small a appear in the keyframe (see right), indicating that an action is applied to that frame. 6 Preview your movie; you ll see that the animation does not play. This is a really useful action to add to the Timelines of Movie clip symbols; where you don t want them to loop forever (eg the animated button state on page 37). Playing the Timeline with a button The main purpose of Button symbols is to trigger actions, and the main purpose of those actions is to stop or start a Timeline somewhere. To make a script which runs when a button is clicked, first you have to identify which button will be pressed. 1 Keep adding to the movie you made in the previous example. 2 Place a button (any button) on the Stage in a new layer. tip Copy-pasting code You can copy and paste code in the Actions window, but you will have to use the shortcut keys ( / Ctrl C and /Ctrl V). Semi-colons to separate lines of code. 46 INTRODUCTION TO FLASH CS3

51 3 Select the button on the Stage and in the Properties window, give the button an instance name (see right). Always start instance names with a lowercase letter and don t use special characters other than _ (underscore). Be descriptive but brief! Don t forget that ActionScript is case sensitive, so you will need to take note of where you have used lowercase and uppercase. The script that you create will have two sections: A listener that waits for something to happen, which triggers: A function that tells Flash what to do 4 Select the first keyframe of the actions layer again (the same place where you placed the stop action) and open the Actions window. You will see the stop action still there. 5 Create the listener: Make a new line underneath stop(); and type the following line of code: start_btn.addeventlistener(mouseevent.click, startclick); The first part start_btn must match the instance name you assigned to the button previously. The last part This must match the startclick is a made up name of your button name, as long as it matches up instance from step 3. with the name of the function in the next step, the code will work. Just make sure whatever name you use makes sense to you! 6 Create the function: Make another new line and add the following lines of code: function startclick(event) { play(); } 7 Now test the movie. Your movie should be stopped when it first loads and should play when you press the button. Starting the main Timeline again To start a Timeline that has been stopped: 1 Add another button instance to your buttons layer. So that you know which button is which, it s a good idea to label them add a new layer with button text on it (see right). 2 Select the new button and give it an instance name (Properties window). 3 Select the first keyframe of the actions layer (you are putting all the actions in the same place!) and open the Actions window. 4 Add another listener to wait for the button to be clicked which triggers another function to stop the timeline. It will be almost identical to the previous listenerfunction pair, but you will need to make sure that the instance names match up, that the function has a new name (different from the previous function) and that you have set the function to stop(); rather than play(); (see right). 5 Test the movie now. You should be able to stop and start the Timeline at will. This is ActionScript code which waits for something to happen. This tells Flash that you are starting a function. This is ActionScript code which detects a mouse click. This is the function name; it must match up with the function name in the listener. This is ActionScript code which makes the current Timeline play it s just the opposite of the stop action. Stops the Timeline first of all. Text for buttons tip Buttons Plays the timeline. Stops the timeline. _btn and _mc Instance name If you end your instance names with _btn (for a button) or _mc (for a Movie clip), Flash will give you code hints in the Actions window. This is the (made up) name of the function that will be triggered in the next section. ActionScript gets event in this case a mouse CLICK from the listener. Listens for start_btn to be clicked, triggers startclick function. Listens for start_btn to be clicked, triggers startclick function. Chapter 4: ActionScripting 47

52 Controlling a different Timeline In the example above, you did not tell Flash which Timeline to stop or play. Flash assumed you meant the Timeline that the script is sitting on. To stop a different Timeline, a path to the Timeline is written using dot syntax. Dot syntax is a type of addressing system for Timelines-within-Timelines. We might write: moviea_mc.movieb_mc.stop(); This suggests that there is a Movie clip instance called moviea_mc, and inside it is a Movie clip instance called movieb_mc that we are stopping. All of the Movie Clip instances which are involved in this kind of script need to have instance names so that ActionScript can take to them. Try this now: 1 Create a new file and in it, make a new Movie clip symbol. 2 Inside that Movie clip symbol, create an animation of some sort. 3 Place that Movie clip symbol on the Stage twice (see right). When you test this movie, both animations will play. 4 On the main Stage, give each instance of the Movie Clip symbol its own instance name. 5 Create a new actions layer and open the Actions window. 6 Instead of adding a simple stop(); action (which stops the Timeline it is sitting on), add the following script: menu1_mc.stop(); which stops the Timeline of the Movie clip symbol with the instance name menu1. Of course you must make sure that your instance name matches up with the script! 7 When you test this movie, you will see that only one of the instances has stopped. 8 To make both of the instances stop, add another line so that your script reads: menu1_mc.stop(); menu2_mc.stop(); 9 So with that knowledge, it should be straightforward to add a button to the Stage which will make only one instance of the Movie clip play: menu1_btn.addeventlistener(mouseevent.click, startmenu1); function startmenu1(event){ menu1_mc.play(); } Commenting code From this point onwards, your ActionScripts will get more and more complex. Commenting is a feature common to all programming languages and allows you to add notes to yourself into the code so that when you look at it again in several weeks time, you can easily see what you meant to do. To add comments to your code, simply add // to the start of a line of text (see above). The comment will go grey and Flash will ignore it. You can write whatever you like as comments and you can write as many comments as you like if it helps you to understand the ActionScript! A real-life version of this might be: myhouse.kitchen.cupboardundersink.flyspray.play(); Which will play (spray!) the fly spray inside the cupboard under the sink inside the kitchen inside my house. 2x instances of Movie clip symbol with motion tween inside it. tip Reserved names When you are naming instances and functions, beware of any name that turns blue in the Actions window this indicates a word that is already part of ActionScript, so you should change your name. For instance myname is fine, name is not. As you type code, Flash will pop-up a list of related code if you have used _mc and _btn as instance names. You can either: press Return/Enter to insert the highlighted code, double-click another option in the list, or just ignore it and continue typing. 48 INTRODUCTION TO FLASH CS3

53 exercise 4.1 The target path button Sometimes when you are building scripts and trying to control a Timeline-within-a- Timeline-within-a-Timeline, it can get confusing trying to figure out which instance names you should use. So the Actions window provides you with a helper, the target path button. As long as you have named all of your instances, this button will help you figure out the path to the instance you want to control. To use this feature; 1 Place your cursor in the Actions window and press the Target path button. The Insert Target Path window appears. In it, you should be able to see all of your named instances (any unnamed instances are shown in brackets). Pick the instance you want to target and its path appears at the top of the window. Always keep the window set to Relative this will create a more flexible script. 2 When you choose OK, the target path will be inserted into the Actions window. Your scripts will probably start with this, which refers to the Timeline that the script is sitting on. You can keep this at the start of your target path, or delete it it will behave exactly the same. Button controls In the last section you created a non-interactive solar system. Using that file (or the provided file) add buttons which stop and start the orbits of the moon and the earth. 1 Give all of the instances of the earth and the moon their own instance names this will mean naming instancesinside-instances, and will also mean naming the two instances at each end of the motion tweens (eg the motion tween inside earth orbit see right). 2 Create a text button which says stop earth orbit. Change the colour of its Over state and importantly draw a solid box over it for the Hit state (see right). This will enlarge the button s active area. 3 Give this button an instance name. 4 Back on the main Stage, make a new actions layer and create an action which stops the earth orbit Timeline when the button is pressed. 5 Test the movie to see whether the button is successfully stopping the earth s orbit. 6 Create new buttons to start the earth s orbit, also to stop and start the moon s orbit. 7 Add to the script to add the appropriate functions to these buttons. When you create the parts of the script which stop and start the moon, you might need to use Part of the completed script. the target path button to correctly access the moon orbit Timeline. 8 Add comments to your script to describe what each part does. Troubleshooting this exercise: make sure that the buttons and Movie clips all have instance names, and that the function names match the triggered function in the corresponding listener. Name the instances on both of these keyframes. Chapter 4: ActionScripting 49

54 exercise 4.2 Movie clips and properties Common Movie clip properties Every Movie clip has many properties. The most common are: rotation: Set a number from 0 to 360 to rotate the Movie clip. x: Set the Movie clip s position on the screen horizontally. y: Set the Movie clip s position on the screen vertically. scalex: Set the horizontal scale of the Movie clip. scaley: Set the vertical scale of the Movie clip. alpha: Set a number from 0 to 1 to set the opacity of the Movie clip. Controlling Movie clip properties Continuing to work with the Solar system example, set some Movie clip properties: 1 Convert the sun into a Movie clip symbol and give it an instance name. 2 Open the Actions window and add to the action you have already made (if you don t have any actions in this file, add a new layer called actions on the main Timeline). Add the following script: sun_mc.alpha =.6; where sun_mc is the name of the sun Movie clip. When you test the movie, the sun will only show at 60% opacity. 3 Then add some new code: earthorbit_mc.addeventlistener(mouseevent.click, moveearth); function moveearth(event){ earthorbit_mc.x +=; } earthorbit_mc.buttonmode = true; When you test this, clicking on the earth will move its axis 10 pixels across the Stage. Setting properties Moves the earth Movie clip s x axis by 10 pixels (relative to its current position). Listens for the earth Movie clip to be clicked. Makes the Movie clip show a hand icon when it s rolled over (like a button). In this exercise, you will build a movie which contains several buttons, each of which affects a property of another Movie clip. 1 Create a new movie. In it, create a box of any colour and convert it to a Movie clip symbol. 2 Give this Movie clip symbol an instance name. 3 Make a new layer an on it, place five instances of buttons. These can be instances of the same button, or several different buttons. Use buttons from the Common Libraries if you like (see right). Give each of these instance a different instance name. 4 Create a new actions layer and open the Actions window on the first keyframe. 5 Add a listener-function pair that makes the box move on the x axis when the first button is clicked (see right). Adds one increment to the x axis. 50 INTRODUCTION TO FLASH CS3

55 exercise 4.2 Setting properties cont 6 Add another listener-function pair that makes the box move on the y axis each time the second button is clicked. 7 Add a listener-function pair that makes the box rotate each time the third button is clicked (see right). 8 Add a listener-function pair that makes the box rotate each time the fourth button is clicked (see right). 9 Add a listener-function pair that makes the box gradually more transparent each time the fifth button is clicked (see right). You now have a movie which shows you how to program each of the common Movie clip properties. These same scripts can be used to affect Movie clips-inside-movie clips. Exercise extension: Try making an action which resets all the properties of the box when the box itself is clicked on (clues below!). Don t forget to add a script which makes the cursor change when the Movie clip is rolled over! Setting and using variables A variable is a container for storing information. Variables are named using simple words and as long as you do not use one of the words reserved by Flash to mean something special, almost any word can be used. Here is an example: var userfirstname = john ; var userlastname = smith ; var username = userfirstname + userlastname; So in this case, username would equal john smith. Variables can be changed while a movie is in progress. For example: var mymoney = 10; var mymoney = 18.5; Match initial x and y values of box Movie clip. So at the end of the movie, mymoney is equal to Variables often come hand-in-hand with if statements. In the next section you will make an if statement which accesses a variable called playstate. Rotates the Movie clip 10 degrees in relation to its current rotation. Scales the x and y values in relation to their current scale. Reduces the alpha (opacity) by 0.1 in relation to its current opacity. Chapter 4: ActionScripting 51

56 Conditional statements (if) It s very useful in ActionScript to be able to say if something happens then do this. In programming terms, this is called a conditional statement. To make a button which does one thing in some cases and another thing in other cases, do the following; 1 Create a simple movie with an animation on the main Timeline and a button. Make sure that the button has an instance name (the example is toggle_btn ). 2 Create a new actions layer and open the Actions window on the first keyframe. 3 The first line of the code will be: var playstate = true; This creates a variable (storage area) called playstate and makes it equal true. This relates to the fact that the Timeline is playing automatically. 4 Then create a listener which, when the button is clicked, will trigger a function called toggleonoff : toggle_btn.addeventlistener(mouseevent.click, toggleonoff); 5 Next, create the toggleonoff function. Instead of having a simple action inside the function, you will be evaluating playstate and running different actions based on the result. First of all, create the first line of the function and the skeleton of the conditional statement; function toggleonoff(event) { if (put evaluation in here) { play(); } else { stop(); } } 6 Then, create the evaluation (between the brackets): if (playstate == false) The == is a symbol in ActionScript which evaluates two values. 7 Finally, when the Timeline is either stopped or played, the variable playstate will need to be changed, so add another line under each of those commands: function toggleonoff(event) { if (playstate == false) { play(); playstate = true; } else { stop(); playstate = false; } } 8 Test your movie. The button should toggle the movement on and off depending on the value of playstate. tip { Curly brackets } It s really easy to forget closing curly brackets! To avoid having statements that don t close properly, always put all of the brackets in first (pairing them up) and then fill in the action in between. Eg: function name() { if (evaluation){ something; }else{ other thing; } } Button toggles motion on and off 52 INTRODUCTION TO FLASH CS3

57 exercise 4.3 Animated preloader In this exercise, you will build a preloader which has a number of variables in it; one to determine the size of the file; another to determine the amount of data already downloaded; and a third which stores that value as a percentage. Work with the provided file preloader.fla. Open the file and you will see that this is a basic text presentation screen (see right). 1 Create a new Scene in which to store the preloader graphics and script; from the Scene window (Window > Other panels > Scene) click the Add Scene button at the bottom. Double click to rename the scene preloader and drag it upwards so that it sits above Scene 1 (see right). Note: Never use Scenes for anything other than preloaders and linear animations! 2 In this preloader scene, make a rectangle with an outline and fill. Select the fill only and convert it into a Movie clip (see right). 3 Name the instance of this Movie clip loading_mc. 4 Double-click to edit this Movie clip. Make a 100 frame (1 frame for each percent) shape tween which tweens the bar from very short to full size (see below). Make sure that on both ends of the tween, you have set the transformation point at the left-hand side of the shape (see right). Frame 1 Frame Back on the main Timeline add any other graphics you think your audience might need to see (eg the word loading ). 6 Create a new actions layer and open the Actions window in the first keyframe. Type in the script shown below. This is a complex script, but you should be able to recognise some elements of it: Stops the movie looping between the preloader and Scene 1 Add scene Move transform point (dot) to here. Listens for the Playhead to enter the frame and triggers the loading function. ENTER_FRAME happens 12 times per second (the movie s frame rate) so the function is running almost constantly. Evaluate whether the whole movie is loaded. If it is, go to the next scene. Variables to determine how big the movie is and how many bytes have been downloaded. Based on previous variables, work out a new variable percent and tell loading_mc Movie clip to go to that numbered frame. Remove the listener so that the function stops. 7 The last thing you will need to do is to go back to the main Scene (Scene 1) and add an action on the first frame to stop the Timeline, otherwise the movie will try to loop between Scene 1 and the preloader scene. 8 Test your movie. Flash Player has a useful tool for simulating download speeds, which will allow you to test your preloader properly. Once you are in Flash Player, choose View > Simulate Download (or press /Ctrl-Enter again). You should see your loading bar increasing in size until the whole movie is loaded, at which point it flicks on to the main Scene. tip Preloaders A preloader ensures that the whole movie is loaded before it plays the content, ensuring that the content behaves correctly. You should add a preloader to your movie if the.swf file is bigger than 100kb. Chapter 4: ActionScripting 53

58 exercise 4.4 Other useful ActionScript techniques Setting dynamic text Previously you have made both Static Text and Dynamic Text. Dynamic text boxes can be populated by ActionScript. To make a dynamic text box 1 Draw a text box in the usual way. Make sure that its text type is set to Dynamic Text (see below). You will see a dotted border around dynamic text. 2 Even though you may not be typing anything into the text box, use the regular formatting tools (size, font, colour etc) to format the text. Any text put into this box will take on those properties. 3 Set the box to Multiline if you think the text might stretch to more than one line (see right). Text type Set text properties 4 Always give your Dynamic Text an instance name this is how ActionScript will talk to it (see right). To fill a dynamic text box Instance name Single/multiline There are two useful ActionScripts to populate a Dynamic Text box: textbox_txt.text = Your text here ; textbox_txt.appendtext( Your text here ); The first one puts the text into the named box, wiping out any text that was there before, while the second adds the text to any text that was in the named box already. Dynamic text In this exercise you will build a text machine, where the person using the Flash movie will determine what text is shown. 1 In a new document, open Window > Common Libraries > Buttons. Open the classic buttons folder then open the Key Buttons folder inside that. Find the key labelled button symbol (see right) and drag and drop it onto the Stage. 2 This button needs editing. Double-click it, to enter symbol editing mode, and edit the text box to read hi instead of A (see right). With the text box still selected, change its type from Dynamic to Static. If you don t do this you will get lots of output errors! You will also need to edit the text in the Down state of the button. 3 Go back to the main Stage. Duplicate this button eight more times. Do this by Control/right-clicking the symbol in the Library panel and choosing Duplicate from the drop-list. 4 Drag and drop one instance of each button symbol on the Stage to make a keypad (see right). Give each one an instance name: hi_btn; ok_btn; r_btn; m_btn; u_btn; i_btn; l8r_btn; c_btn; space_btn. 5 Edit the text in each button s symbol to match the button name. For the space button, just delete the text. 6 Add a text box above the keypad. In the Property Inspector, check that it is set to Dynamic Text (see top). Change Single line to Multiline. Give it an instance name of display_txt. 7 Create a new actions layer, and open the Actions window on the first keyframe. 54 INTRODUCTION TO FLASH CS3

59 exercise 4.4 Dynamic text cont 8 Add listener-function pairs which add the appropriate text to display_txt when the buttons are clicked: hi_btn.addeventlistener(mouseevent.click, hitext); function hitext(event){ display_txt.appendtext( hi ); } 9 For the space button, either ask ActionScript to add a space ( ) or an underscore ( _ )(see below). 10 Add your own skin with simple graphics on another layer. Exercise extension: See if you can add a new button with a reset function. Use the following action inside the function. display_txt.text = ; Drag and drop Another relatively simple piece of ActionScript is the action to drag and drop a Movie clip. To drag and drop a Movie Clip 1 Create a new movie with a Movie clip instance on the Stage. 2 Give the Movie clip an instance name. 3 Add an actions layer, and an action which says; movieclip_mc.addeventlistener(mouseevent.mouse_down, drag); function drag(event){ movieclip_mc.startdrag(); } The listener is waiting for the MOUSE_DOWN event one you haven t used before, but which is distinct from MOUSE_UP which you will use in the next step. 4 Test the movie and you ll find that you will be able to pick up the Movie clip, but you won t be able to let go of it. 5 Add to the script: movieclip_mc.addeventlistener(mouseevent.mouse_up, drop); function drop(event){ movieclip_mc.stopdrag(); } 6 Don t forget to add another piece of script to make the hand cursor appear! movieclip_mc.buttonmode = true; Chapter 4: ActionScripting 55

60 7 project 8 project 9 project 10 project Photo enlargement Make a new movie with a photograph in it, and add + and buttons. Using ActionScript, program those buttons so that the enlarge or reduce the photo every time they are clicked on. Add an action which allows you to drag the photo around once it is zoomed in. Tips: Import the image at a larger size than its initial display, so that when you zoom in you won t lose quality so fast. You will need to convert the photo into a Movie clip. Magnetic poetry Create a movie with pieces of magnetic poetry in it. Add actions which will allow you to drag and drop these pieces around the Stage. There will be a lot of coding to do, so start small and add pieces as you go! Toggle buttons Preloaders Using the solar system exercise one more time, combine the scripts into one toggle on/off button to switch the earth and the moon rotations on and off. You will need to make a conditional statement for each button, but the result will be much more streamlined. Find any of your movies (interactive movies or animations) whose.swf files are bigger than 100kb. Make preloader scenes for these movies. Add appropriate loading graphics be creative! and code the actions to makes the preloader make the necessary evaluations. 56 INTRODUCTION TO FLASH CS3

61 Outputting Making your Flash ready for distribution In this section In this section, you will learn how to: publish your Flash movie in different formats publish an HTML page to contain your Flash movie set audio and bitmap compression for publishing check download progress using the Bandwidth Profiler Flash does not only produce Shockwave files (.swf) although this is the main file format. Flash can also publish several other files at the same time to complement or replace the need for the Shockwave file. For example, a Shockwave file can be accompanied by: an HTML file that will hold the Shockwave file and make it easy to view in a browser; a static or animated GIF version of the file so non-flash viewers can see what they are missing; a self-contained Projector file for either Mac or Windows so the need for the Flash player is removed; and so forth. When preparing a Shockwave file for publication, there are two or three stages at which settings can be adjusted: Authoring stage: when bringing in a sound file, for example, you can set the export options early on. See the heading Audio Export Options for more detail. Testing stage: when testing the movie, you can turn on the Bandwidth Profiler for information on how well the movie compresses and plays. This then helps you to go back and make authoring changes before publishing. See the heading Bandwidth Profiler for more on this. Publishing stage: The Publish Settings panel is used just before publishing to make any last-minute tweaks to the various files that Flash will produce when it publishes. See the heading Publishing your movie for more. Audio Export options You can set options for the export of sounds. Doubleclick the sound file s icon in the Library and the Export Options dialog box will pop up. There is a Compression pop-up menu near the bottom of the box, which allows you to choose a type of compression. Flash s default, and the one you will usually use, is mp3 compression. This usually results in the smallest file size. However, certain types of files will sound better with a different sort of compression; speech files, for example, might sound better using the Speech setting. Most of the formats allow you further control, usually the Bit Rate and the Quality of the compression. At the very bottom of the box is a calculation of the file size compared to the original, which will allow you to compare the different sorts of compression. The Test button will apply the compression and play it back to you. This will allow you to compare the quality of the sound by listening to it. Once again, as with most things web related, it is a compromise between file size and quality. You should always set up export options for sound files, even if you have imported mp3 files. Usually you can cut the file size down by adjusting the Quality setting. Chapter 5: Outputting 57

62 Bandwidth Profiler Download time is a major consideration on the internet, so Flash provides you with a tool called the Bandwidth Profiler. This allows you to see how quickly or slowly the movie will load when viewed on the internet using various connection speeds. To access the Bandwidth Profiler you must first Preview your movie. When the movie has exported and is playing in Flash Player, choose View > Bandwidth Profiler. Certain frames in Flash movies contain chunks of data that must be downloaded before they will play. If the size of the chunk is too large for the modem to download immediately, the movie will pause until the chunk has finished downloading after which the frame will play and the movie will continue on. The size of each chunk depends on what is going on in the movie at that time. To stream a movie smoothly you need to keep the size of the chunks below the red line. This is not always entirely practical, which is why you might need to make a preloader, so that all the data in the movie downloads first. Simulate download In order to properly test a preloader, you need to see how the movie would download from the internet on a slow connection. To do this, use the Show Streaming command. Preview the movie in Flash Player, then choose View > Simulate Download. Modem speed To test a movie s performance using simulations of different modem speeds, choose a setting from the Modem Speed menu in Flash Player. Publishing your movie To view your finished movie on the internet you will need to put it inside an HTML page. You could build that HTML page from scratch, using Dreamweaver, for example, or you could use the Publish command in Flash to generate a Flash Shockwave file (.swf) and an HTML page. You can publish your movie at any time by choosing File > Publish. Note that Flash automatically uses the file name for all the different formats requested (in this case, all formats). Choose the settings to use when publishing files by choosing File > Publish Settings Choose the formats you want to publish. Usually this would be a.swf file and an HTML file, but you can also publish images in GIF, JPEG and PNG format, stand-alone Projector files for both PC and Mac systems and QuickTime videos. Publish settings for a Flash movie Version: This will automatically come up with the latest version of the Flash Player, but if you are producing a movie without ActionScripting, think about selecting an older version of the Flash Player, eg version 6. This will mean that more people (with older plug-ins) will be able to view the file. If you have made an ActionScript 3 file, the ActionScript will not work if you export it with a lower Version than version 9. This is (currently) the only version which will play ActionScript 3. Movie information Playhead Frames tip Always make an HTML page Although you may find that your SWF file works on its own inside a web browser, it is good practice to put it into an HTML page. Some web servers will not handle SWF files properly if they are outside an HTML page. 58 INTRODUCTION TO FLASH CS3

63 Load order: sets the order in which Flash loads a movie s layers for displaying the first frame of your movie. This controls which parts of the movie are drawn first over a slow network or modem connection. Generate size report: generates a report listing the amount of data in the final Flash movie. Protect from import: prevents others from importing the Flash movie and converting it back into a Flash (.fla) document. Compress movie: (Flash Player 6 version and later) compresses the Flash movie to reduce file size and download time. This option is on by default and is most beneficial when a file has a lot of text or ActionScript. JPEG quality: controls default bitmap compression. Audio stream and Audio event: sets the sample rate and compression for all stream sounds or event sounds in the movie. Click the Set buttons and choose options for Compression, Bit Rate, and Quality. Override sound settings: to use the settings selected in the previous step to override settings for individual sounds set in the Property Inspector. Use this feature to create a smaller low-fi version of a movie. Publish settings for HTML Template: uses a predefined format with which to set up the HTML code. Click Info to display a description of the selected template. Detect Flash Version: adds some JavaScript to the HTML page which looks for the nominated Flash version. You can then set the page to display alternative content if the nominated Flash version cannot be found. Dimensions: sets Width and Height values for the movie inside the HTML page. Playback: controls the way the movie plays. Paused at Start: pauses the movie until a user clicks a button in the movie. This can be overridden using ActionScript. Loop: repeats the movie when it reaches the last frame. Deselect this option to stop the movie when it reaches the last frame. This can be overridden using ActionScript. Display Menu: displays a shortcut menu when users Control/right-click the movie. Device Font: substitutes anti-aliased system fonts for fonts not installed on the user s system. Using device fonts increases the legibility of type at small sizes and can decrease the movie s file size. This option only affects movies containing static text set to display with device fonts. Quality: sets the compromise between processing time and applying antialiasing to smooth each frame before it is rendered on the user s screen. Window Mode: sets options for the PC version of later versions of Internet Explorer. HTML Alignment: positions the Flash movie window within the browser window. Scale: places the movie within specified boundaries if you ve changed the movie s original width and height. Flash Alignment: sets how the movie is placed within the movie window and how it is cropped, if necessary. Show Warning Messages: displays error messages if HTML tag settings conflict. Chapter 5: Outputting 59