flash_mx_manual.pdf

7/27/2019 flash_mx_manual.pdf

1/139

Version 3 - 24/07/2007 - Flash MX

Happy Computers 2007 - 24/07/07 V3

H

Happy Computers Essentials Manual for

Flash MX

This course guide is produced for the Happy Computers Flash MX courseFor all your computer training needs contact:

Happy Computers40 Adler Street

LondonE1 1EE

Help-line: 020 7375 [email protected]

Bookings: 020 7375 7300

Copies of this guide can be obtained from Happy Computers, fully bound, at a cost of 15 each,

or 10 for extra copies for organisations who have booked courses

Happy Computers allows this guide to be copied, provided that permission is sought and thename and phone number of Happy Computers remains on the copies


2/139

Flash MX - About This Manual

Page 2 Happy Computers 020 7375 7300

ContentsContents ................................................................................................................................. 2

Happy Computers: For All Your IT Training Needs .................................................................. 4The Happy Computers Web Site ............................................................................................ 5

About This Manual ............................................................ 6Who It Is For And How To Use It............................................................................................. 7What do the Icons Mean? ....................................................................................................... 8Getting Help............................................................................................................................ 9

What is Flash MX?........................................................... 11Flash Overview ......................................................................................................................12

About Images.........................................................................................................................14

The Flash Environment................................................... 15Starting & Exiting Flash ..........................................................................................................16

The Flash Environment ..........................................................................................................17

Panels & the Property Inspector..................................... 18Panels ...................................................................................................................................19Property Inspector..................................................................................................................22

New Document ................................................................ 23New Document ......................................................................................................................24

Simple Objects ................................................................ 26Simple Objects.......................................................................................................................27Changing the Fill Colours .......................................................................................................42

Aligning Shapes .....................................................................................................................45Adding Type...........................................................................................................................47

Converting Existing Shapes into Graphic Symbols ...... 50Converting Existing Shapes into Graphic Symbols .................................................................51

Frames, Layers & Scenes ............................................... 52What are Frames & Layers?...................................................................................................53Scenes ..................................................................................................................................58

Mask Layers..................................................................... 60Mask Layers ..........................................................................................................................61

Symbols ........................................................................... 64Symbols.................................................................................................................................65Organising Symbols...............................................................................................................69

Animation: Frame-by-Frame ........................................... 70Simple Frame-by-Frame Animation ........................................................................................71Frame Rate............................................................................................................................73

Animation: Motion Tweening.......................................... 74Motion Tweening....................................................................................................................75

Animation: Shape Tweening........................................... 82Shape Tweening ....................................................................................................................83

Animated Masks .............................................................. 87Animated Masks ....................................................................................................................88

Buttons ............................................................................ 91Basic Rollover Buttons...........................................................................................................92Buttons with Text ...................................................................................................................95Buttons that Change Shape ...................................................................................................97


3/139


Happy Computers 020 7375 7300 Page 3

Invisible Buttons.................................................................................................................. 100Buttons with Multiple Hotspots............................................................................................. 102

Actions........................................................................... 104Actions................................................................................................................................ 105

Animation: Movie-Clips................................................. 109Movie-Clip Symbols ............................................................................................................ 110Movie Clips ......................................................................................................................... 113

Movie Explorer............................................................... 115Movie Explorer.................................................................................................................... 116

Interactive Movies ......................................................... 118Interactive Movies ............................................................................................................... 119

Testing & Publishing..................................................... 126Testing & Optimising Movies ............................................................................................... 127

Publishing...................................................................... 129Publishing your Movie......................................................................................................... 130

Appendices.................................................................... 132System Requirements......................................................................................................... 133Optimising Movies............................................................................................................... 134On MouseEvent Options ..................................................................................................... 135

Index............................................................................... 137Index................................................................................................................................... 138


4/139



Happy Computers: For All Your IT Training Needs

Manuals for You to UseWe hope you enjoy this manual and find it useful. If it is for personal use, or for use in statefunded schools, please feel free to copy it. Our full range of manuals, in MS Office and more, areavailable from:

www.happymanuals.com

For other organisations (including companies, charities, universities, colleges and trainingproviders) there is a licence fee. Full details of the costs are on the site.

Award Winning Classroom Training in the UKThese manuals are produced by Happy Computers, recognised as one of the leading providersof quality training in the UK. Our awards include:

IT Training Company of the Year (Institute of IT Training Awards)2000: Finalist 2001: Gold 2002: Bronze 2003: Bronze2004: Bronze 2005: Finalist 2006: Silver 2007: Silver

IT Trainer of the Year (Institute of IT Training Awards) 1999: Gold 2000: Silver 2004: Gold 2005: Silver2007: Bronze

Best Customer Service in the UK

(Management Today/Unisys Service Excellence Awards)2002 Section Winner (Business to Business)2003 Overall UK Winner

All our training is designed to fully involve you, based on the age-old principle:

Tell Me & I Will ForgetShow Me & I May Remember

Involve Me & I Will Understand

Find out how we can make learning IT fun and effective:

020 7375 7300, [email protected], www.happy.co.uk

E-Learning: Anywhere in the WorldSee the section below on Happy eLearning or simply try our free trial:

http://www.happyelearning.co.uk/freestuff/


5/139



The Happy Computers Web Site

Where is it?http://www.happy.co.uk

Why should I visit it?The Happy Computers web site is dedicated to providing you with information about both thesoftware you use, and the courses we run. Youll find copies of manuals to download and tips onthe programs you use, designed to make your work quicker and easier. Youll find up-to-datenews about Happy Computers and the team, and you can of course find information on all ourcourses and book your place on one.

Who runs it?If you have any comments, ideas or just fulsome praise, you can e-mail our web editor at:[email protected].

Alternatively, write your comments when you do your evaluations on-line at the end of a courseat Happy Computers.

What is all that stuff above about?If the above means nothing to you, and you are interested in learning more about the World

Wide Web and the Internet, Happy Computers run a wide range of courses in Internet software.


6/139



About This Manual


7/139



Who It Is For And How To Use It

Who is it for?This manual is designed for use with the Flash MX course with Happy Computers.

It is also meant as a back up for when you get back to work in combination with the two yeartelephone help-line you get free with every Happy Computers course.

It is not meant as a replacement to the full reference manuals that come with Flash.

How should I use it?

This manual is a step-by-step guide to the functions taught in the Flash MX course.

You should be able to find the part youre after by looking in the index, and contents and notingthat the general course will follow the pattern of the manual.

The step-by-step parts are in italics. Simply do the things on the left, and read the things on theright for further information

This is what you do This is a description of what is happening


8/139



What do the Icons Mean?

Tips

Handy tips that make your work easier

Essential

Essential points to understand how to do the work in hand

TechnicalTechnical (non-essential) points for the technically minded

Traps

Hints to help you with certain features that may just trip you up if you are notaware of them!

Right Mouse Button

This means that pressing the right mouse button (instead of the left mousebutton) will bring up a short cut menu that can achieve the same things as listed

in the text

You can also

use the rightmouse

button here


9/139



Getting HelpFlash keeps the screen fairly simple. But dont expect to have to remember the functions. There

are several levels of help:

Using this GuideThis guide contains all the basic functions of Flash MX. Use the Table of Contents and the Indexto find the functions that you need explained.

Help Function

1. Press F1 Opens the Help screen

2. Within the Contents tab chooseone of the 3 options

3. Within the Index tab choose theletter

4. Within the Search tab type akeyword(s)


10/139



Closing HelpAlt + F4

Or1. Click on the File menu2. Choose Exit

The official Flash MX ManualSoftware manuals have improved. Use them as a reference on specific functions, rather than fora general read on how to use the software.

Ring Happy ComputersIf you received this manual at a Happy Computers course, we will provide phone support on anyfunctions covered on the course for two years from the date of the course. This is a guarantee ofthe quality of our training:

Ring: 020 7375 7373 and we will help you with your difficulty. You can do this as many times asyou like.


11/139

Flash MX - What is Flash MX?


What is Flash MX?


12/139



Flash Overview

Flash Overview Flash MX movies contain graphics (which you can create from scratch or import from

other software), text and animation. Flash movies are likely to be interactive and permit input from users. Many Web designers use Flash to create navigation controls, animated logos and

animations with sound. Flash movies use vector graphics, so they download rapidly and can be scaled to the

users screen size.

Do I have The Flash Player on my PC at home/work?

Yes, probably. 97% of all web users have the Flash Player on their PC (source:Macromedia). You've probably watched and interacted with Flash movies on

many Web sites. The player is installed automatically when Flash is installed oryou can download it from the Macromedia Web site. (www.macromedia.com).

What is a Flash Player and Why do I need it?

The Flash Player lives on the local computer. It plays back Flash movies inbrowsers or on stand-alone applications. Viewing a Flash movie on the FlashPlayer is similar to viewing a DVD on a DVD playerthe Flash Player is thedevice used to display the movies you create in the Flash authoring application.

Animation in FlashIn Flash, you can animate objects to make them appear to move across the stage and/or changetheir shape, size, colour, opacity, rotation, and other properties. You can create frame-by-frameanimation, in which you create a separate image for each frame. You can also create tweenedanimation, in which you create the first and last frames of an animation and direct Flash to createthe frames in between.You can also use ActionScript, which is an object-oriented programming language, to createinteractive animation in Flash.

The Two Parts of Flash

Built-in vector-based graphics and type tools such as Macromedia Freehand and AdobeIllustrator

Programming and animation tools to animate and build interactivity into your websiteusing buttons and action scripts.

Other Uses of FlashAnimation is not limited to web pages - it can be used to:

License Flash Player and distribute Flash movies on CD-ROM

Create movies for stand-alone projectors

Export Flash to other formats such as QuickTime or Windows .AVI movies.


13/139



What are the Flash formats?Flash files are referred to asmovies,during creation and in their final form.

Flash files have the extension .fla.

To view these files, you must convert the files to Flash Player format these files have

the extension .swf (pronounced swif).This stands for Shockwave Flash. Shockwave was the system to deliver movies beforeFlash.

What is the Flash Player?To view a Flash movie on the Web, the Flash Player must be installed on the user's computer.This is a plug-in application that allows the user to see the Flash movie playing.

What Flash does well

J Presents text and images in sequence on screenJ Allows you to move text and images on screenJ Looks slick and smoothJ With proper layout presents a lot of information in a single windowJ Lets you create Flash files that can be viewed by anyone with the free viewerJ Flash files will use the entire browser window whatever the browser window size and

screen resolutionJ Offers interactivity using buttons and actionsJ Flash files are streamed, which means they can start to play while they are downloadingJ Using all vector-based images the Flash file size remains small, which means faster

downloading time

Flashs LimitationsL You need the Flash/Shockwave plug-in installed. This can be downloaded for free from

the macromedia site (www.macromedia.com ) . Newer versions of Netscape and InternetExplorer come with the plug-in already installed or as an option in the installationprocess

L Flash files do not play at a consistent speed on all machines, on older and slowermachines files are played slower than newer ones

L You may need to learn about programming (Action Scripts) if you want to go beyond thebuilt-in barriers in Flash

L Learning the language and terminology Flash uses


14/139



About Images

Images on the WebImages on the web have traditionally been bitmaps, i.e. images made up of pixels. The morepixels in an image, the higher the quality of the image. However, pixels also increase the size ofthe file. Also you may have noticed when a bitmap is increased, the quality deteriorates, becauseeach pixel has to cover a larger area on the screen. This results in the image looking jagged.

There are 3 main types of bitmap images used on the web

GIF (Graphical Interchange Format)

JPEG (Joint Photographic Experts Group)

PNG(Portable Network Group)

One of the main features of Flash is to create graphics it achieves its high quality images byusing a vector-based system.

A vector-based system is where objects are created using mathematical equations.

Advantages of Vector-Based Images Images do not consist of pixels, so they are usually smaller in file size.

Vector-based images lose very little image quality when they resized.

This combination of small file size and consistent high quality make vector-based graphics an

excellent choice for Web pages.

Drawing programs such as Macromedia Freehand and AdobeIllustrator use vector-based systems for graphics creation.

StreamingOften you have to wait for a site to download, especially one that is rich in images or sounds.Flash is able to stream the content of the web site. Streaming means that as soon as some of

the vector graphic has downloaded, Flash can quickly display it while the rest of the datacontinues to download. Flash downloads each frame at the specified frame rate, so the viewersees a continuous flow of images.


15/139

Flash MX - The Flash Environment


The Flash Environment


16/139



Starting & Exiting Flash

Starting Flash

1. Click on the buttonThe Start menu appears

2. Click on Programs3. Select Macromedia Flash MX4. Choose Flash MX Flash opens

Exiting Flash1. Click on File menu

2. Choose Exit

Or

Alt+F4 on the keyboard

Or

Click on the cross in the top right corner of the screen


17/139



The Flash Environment

The Screen

A movie consists of

The Timeline This is like the "table of contents" of your Flash movie.

o Layers Where different layers are added to a movie.

The Stage The content for each movie is placed here.

The Work Area Animation can start here.

About the TimelineThe easiest way to describe the Timeline is to imagine your Flash movie as a book. The timelinewould be the table of contents, each chapter is like a scene, and each page is like frame.

However, each frame may actually contain several transparent sheets sitting on top of eachother. These "sheets" are layers.

In this window, you arrange the timing of your animation on separate layers.

About the StageThis is the area containing all the graphics that will make up the movie. It is possible for you tocontrol the size, colour and many other parameters of your stage.

Timeline

Stage

Work area

Toolbox

Modifiers


18/139

Flash MX - Panels & the Property Inspector


Panels & the Property

Inspector


19/139



PanelsPanels in Flash give you more information about the object you are using and help you view,

organize, and change elements in a document. The choices available on panels control thefeatures of symbols, instances, colours, type, frames, and other elements. Flash allows you tocustomise its interface by displaying the panels you need for a specific task and hiding otherpanels.

About Panels

Panels let you work with objects, colours, text, instances, frames, scenes, andentire documents.

For example, you use the Colour Mixer to create colours, and the Align panel toalign objects to each other or the Stage.

Where are the Panels?

To view all panels available in Flash, see the Window menu.

PanelsMost panels include a pop-up menu with extra options.

Info Panel1. Click on the Window menu2. Choose Info

Colour Mixer1. Click on the Window menu

This shows thesize of theshape in pixels.

This shows theposition of the s hapeon the stage.

This showsthe colour ofthe shape.

This shows the positionof the cursor.

Click on the Collapse arrow toclose a Panel.

Click and dragto move thePanel.

Click here to see the Optionsmenu control for the Panel.


20/139



2. Select Colour Mixer

Scene Panel1. Click on the Window menu2. Choose Scene

Transform Panel1. Click on the Window menu2. Choose Transform

Colour Swatches1. Click on the Window menu2. Choose Colour Swatches

Stroke Colour

Used to choose over

500 colours from acolour palette

Current openscene

Fill Style

Click here to extend the Panelso you can choose morecolours.

Duplicating a scene

Adding a new scene

Deleting a scene

Change the size of the shape.


21/139



Components1. Click on the Window menu2. Choose Components


22/139



Property InspectorYou can use the Property inspector to easily access and change the most commonly used

attributes of a document. Changes can be made to document attributes using the Propertyinspector without accessing the menus or panels that contain these features.

The Property inspector is content sensitive, which means it reflects the tool or asset you areworking with, giving you quick access to frequently used features.

The Property Inspector

Viewing the Property inspector

1. Click on the Window menu2. Choose Properties

This is the Property inspector with nothing on the stage selected.

Changing Document Properties Using the Property Inspector1. Click on the Size button Dialog box opens

2. Click on the Background icon Choose a background colour for thestage

3. Change the frame rate (see later)

Changing the Properties of a Shape Using the Property Inspector

This is the Property inspector showing the properties of a shape.


23/139

Flash MX - New Document


New Document


24/139



New DocumentHere you will create the Flash .fla document with objects and animation.

Creating a new Document in Flash1. Click on File menu2. Choose New You can change the properties of the

document using the Property inspector3. Click on the Size button Dialog box opens

4. The default movie size is 550 x400 pixels.

5. Change the Background colour forthe stage

Colour palette appears

6. Enter the number of animationframes to be displayed everysecond

7. To set the Ruler Units, click on thedownward arrow by Pixels

8. Click OK

To view gridlines on the movie, click Ctrl+#.

Movie Sizes

The default movie size is 550 pixels by 400 pixels. The minimum size is1pixel by 1 pixel. The maximum size is 2880 pixels by 2880 pixels.

Frame Rate

For most computer-displayed animations, especially those playing from a Website, 8 fps (frames per second) to 12 fps is sufficient. (12 fps is the default frame

rate.). If the frame rate is too high, the movie becomes blurred, but if it is tooslow, the viewer will see each frame as a separate image.


25/139



Setting the properties

To make the new settings the default properties for your new documentonly, click OK

To make these settings the default properties for all new documents,click Make Default.


26/139

Flash MX - Simple Objects


Simple Objects


27/139



Simple ObjectsThis is a very powerful feature in Flash. They are not only lines and shapes, but can be

transformed into eye-catching graphical images.Flash also allows you to import images from other graphic packages such as Illustrator andFreehand.

Images in FlashComputers display graphics in either vector or bitmap format. In Flash, you can create andanimate vector graphics. You can also import and manipulate vector and bitmap graphics thathave been created in other applications.

Vector Graphics v Bitmap Images

Vector graphics form images using lines and curves. These are calledvectors.Bitmap images are made from coloured dots calledpixels.

What is Special about Vector Graphics?

When you modify the properties of a vector graphic you do sowithout changingthe quality of its appearance. Vector graphics can be displayed on output

devices of varying resolutions without losing quality.

About Bitmap Graphics

When you edit a bitmap graphic, you modify pixels. Editing a bitmap graphic canchange the quality of its appearance because the image is fixed to a grid of aparticular size. Resizing a bitmap graphic can make the edges of the image

ragged as pixels are redistributed within the grid. A bitmap graphic on an outputdevice that has a lower resolution than the image itself degrades the quality of

its appearance.

Flash Terminology

Basic shapes are made from strokes (outline) and solid colours known asfills.

What you can do with a Shape Change the stroke colour Change the fill colour


28/139



Viewing the Toolbox1. Click on the Window menu2. Choose Tools

To find out what a tool does, just rest the cursor on the icon and atool tip appears. For example, if you rest your cursor on the text

tool, you will see a tool tip with Text tool (T). By pressing T on thekeyboard you can activate the Text tool.

Moving the Toolbox1. Click on the grey bar at the top of the toolbox window

2. Hold down the left mouse button3. Drag the toolbox to another part of the screen

Using the Oval ToolThe Oval tool can be used to draw ovals or perfect circles.

Flash terminology

Basic shapes are made from strokes(outline) and solid colours known asfills.Each can be edited independently.

1. Click on the Oval tool Keyboard shortcut is O

Arrow (V)

Pen (P)

Oval (O)

Pencil (Y)

Transform (Q)

Ink Bottle (S)

E edro er I

Subselection

Lasso (L)

Text (T)

Rectangle (R)

Brush (B)

Fill Transform (F)

Paint Bucket K

Eraser (E)

Hand (H)

Stroke colour

Fill colourTool modifiers


29/139



2. Choose the Fill and stroke coloursfor the shape

3. Click and drag to draw the shape

To create a perfect circle

Hold down the shift key while you are dragging the Oval tool.Or

Whilst dragging to create the circle, a small black circle appears in the bottom rightside of the cursor. This indicates it is a perfect circle.

Ovals can be created with just a fill or just an outline

To create a shape without a stroke

1. Click on the No colour icon2. Draw the shape

Changing the Look of a Shape Using the Transform Panel

Ensure you can see the Transform Panel. If not

1. Click on the Window menu2. Choose Transform

1. Create a shape

2. Click on the Arrow tool3. Double-click the shape Double-click ensures you select both

the stroke and the fill4. Change the percentage on the

Transform panelIf the Constrain box is checked

, the size of the shape willchange proportionally

5. To rotate or skew the shapechange the number in the boxes

6. Press Enter

Changing the Fill Colour Using the Property Inspector

1. Click on the Arrow tool2. Single-click inside the shape to select it3. Click on the drop down for Fill colour4. Use the palette to choose a different colour

Changing the Stroke Using the Property Inspector

1. Click on the Arrow tool2. Double-click on the outside border of the shape to select it


30/139



3. Click on the drop down for Stroke style4. Click on the drop down for Stroke height5. Use the slider to choose a different thickness for the stroke

To customise the style of the stroke click on the Custom button,

on the Property inspector and make your changes.

You can also use the Colour Mixer panel to change the fill andstroke colour of a shape

To view the Colour Mixer panel1. Click on the Window menu2. Choose Colour Mixer3. Select either the fill or the stroke of the shape4. Change the colour using the palette of the RGB values

Moving a Shape (Stroke And Fill)1. Create a shape2. Click on the Arrow tool

3. Double click the shape to select it Stroke and fill appear selected4. Click and drag the shape to a new

destination

Moving a Shape Using the Keyboard

1. Double-click to select the shape2. Press the arrow keys on the keyboardThis moves the shape one pixel at a time

Or

Hold down the Shift key whilst pressing the arrow keys on the keyboardThis moves the shape eight pixels at a time

Moving the Fill1. Create a shape

2. Click on the Arrow tool

3. Click once in the centre of theshape

4. Click and drag the fill to anotherdestination

5. Click elsewhere on the stage


31/139



Moving the Stroke1. Create a shape2. Click on the Arrow tool

3. Click on the edge of the shape The stroke will appear speckled. Notethat if your shape has more than oneedge, e.g. a square, you might need todouble click on the stroke

4. Click and drag the stroke toanother destination

5. Click elsewhere on the stage

To move part of the shape

1. Click on the Arrow tool2. Position the cursor outside the shape before clicking and dragging

part of it to select it3. Click and drag to move the selected part of the shape

Resizing a Shape

1. Click on the Arrow tool2. Double-click the shape to select it3. Click on the Free Transform tool

on the Toolbox

Black handles appear around theshape and Options appear at thebottom of the Toolbox

4. Click on the Scale icon5. Click and drag on any black handle

on the shapeThe shape changes (proportionally ifyou drag on any of the corner handles)

Rotating a Shape


on the Toolbox



32/139



4. Click on the Rotate & Skew icon

5. Position your cursor on anycornerblack handle on the shape

Cursor looks like the following

6. Click and drag to rotate the shape

If you need to be very accurate when changing the size of a shapeyou can use the Transform Panel

See Changing the look of a shape using the Transform panel on page 29

Skewing a Shape1. Click on the Arrow tool2. Double-click the shape to select it3. Click on the Free Transform tool

on the Toolbox


4. Click on the Rotate & Skew icon

5. Position your cursor on anycentreblack handle on the shape


6. Click and drag to skew the shape

Distorting a Shape


on the Toolbox


4. Click on the Distort icon5. Position your cursor on any black

handle on the shapeCursor looks like the following

6. Click and drag to distort the shape


33/139



Using the Envelope ToolThe Envelope tool helps you to change the shape of a selected shape(s) by using Bzier curves.

1. Create 3 rectangles

2. Select all 3 shapes3. Click on the Free Transform tool

on the Toolbox

4. Click on the Envelope toolMore handles appear around theselection

5. Position the cursor on any of thehandles


6. Click and drag to distort all theselected shapes

Changing the Shape of Existing Shapes1. Create a shape

2. Click on the Arrow tool3. Position cursor on the edge of the

shape Mouse shape changes to

4. Click and drag to change the

shape

Changing the Shape of Existing Shapes Using the Subselection Tool

You can use the Subselection Tool to reshape any shape


34/139



1. Create a shape

2. Click on the Subselection Tool

3. Click on the border of the shape Bzier handles appear around the

shape

4. Position your cursor over one ofthe Bzier handles

A small white square appears next tothe arrow

5. Click and drag to change theshape

6. Position your cursor on a part of aborder without a Bzier handle

A small black square appears next tothe arrow

7. Click and drag to move the shape

Reshaping a Curve1. Create a shape2. Click on the Subselection Tool

3. Click and drag one of the Bzierhandles to change the definition ofthe curve

Using the Line Tool

This option only allows you to draw straight lines.

1. Click on the Line tool

2. Select a stroke colour from theProperty inspector

3. Select a thickness and line style onthe Property inspector

4. Move the cursor to the stage The cursor is a cross5. Click and drag to create a line6. Release the mouse

Click here


35/139



Drawing a straight line

Holding down the shift key as you draw the line forces the line to a vertical,horizontal or at a 45

0angle.

Editing Lines1. On the toolbar click on the Arrow

icon2. Move the cursor over a portion of

the line

Curve point Clicking and dragging allows you to adjustthe curvature of the line

Corner point Clicking and dragging adjusts the end pointof the line

Moving a Line

1. On the toolbar click on the Arrow icon2. Click on the line

Deselected line Selected line

3. Move the line by clicking and dragging4. Click away from line

Selecting more than 1 line - Hold down Shift and click on the lines.

Selecting lines which are touching each other Double-click a line

Selecting Part of a Line1. On the toolbar click on the Arrow icon

2. Click and drag cursor over part of the line Box appears around line

3. Click and drag to move this part of the line

Corner pointCurve point


36/139



Using the Pen ToolYou can use the pen tool to draw straight lines or smooth curved lines. You start off by drawing astraight line and adjusting the angle of the line. Using the Pen tool allows you to create points onthe line, which you can click and drag to make curved.

When you are creating curves switch the grid on

1. Click on the View menu2. Choose Grid3. Choose Show Grid

To change the stroke colour of an existing shape

1. Click on the Arrow tool2. Double-click the outside border of the shape

3. Click on the Stroke Colour Tool on the Property inspector4. Choose a colour from the palette

Drawing an Upward Curve

1. Click on the Pen tool2. Move cursor to the stage Cursor shape changes to a X3. Click and drag upwards in a

straight vertical line

4. Click about a centimetre away fromthe anchor and drag downwards

Uneven curve appears

Uneven curve changes to a perfectcurve

5. Press the Escape button when youhave finished

Or

Click on the Arrow tool

Bzier handles

Anchor

Click on the Pen tool


37/139



Making Changes to an Existing Line

1. Click on the Pen tool2. Click on the line Bzier handles appear

Drawing an S Curve

1. Click on the Pen tool2. Move cursor to the stage Cursor shape changes to a pen3. Click and drag upwards in a

straight vertical line

4. Click about a centimetre away fromthe anchor and drag upwards

Uneven curve appears

Uneven curve changes to an S shaped

curve

5. Press the Escape button when youhave finished

Or

Click on the Arrow tool

Drawing Shapes Using the Pen Tool1. Click on the Pen tool2. Click on the stage Anchor appears

3. Click somewhere else on the stage Straight line appears

4. Continue clicking to create yourshape

Bzier handles

Anchor


38/139



To change the fill colour of an existing shape

1. Click on the Arrow tool2. Single-click inside the shape

3. Click on the Fill Colour Tool on the Property inspector

4. Choose a colour from the palette

To change the stroke colour of an existing shape

5. Click on the Arrow tool6. Double-click the outside border of the shape

7. Click on the Stroke Colour Tool on the Property Inspector8. Choose a colour from the palette

Using the Rectangle Tool1. Click on the Rectangle tool icon

2. Choose the stroke, fill, stroke styleand stroke colour from theProperty inspector

3. Move the cursor to the stage4. Click and drag to create a

rectangle

To create a perfect square

Hold down the shift key while you are dragging the rectangle tool.

To change the look of the shape use the Free Transform Tool on

the Toolbox .

Rectangles can be created with just a fill or just an outline.

To create a shape without a stroke

1. Click on the Rectangle Tool2. Click on the Stroke colour on the Property inspector

3. Choose the No colour icon option4. Draw the shape

To move rectangles

See page 30 (Moving shapes)


39/139



Creating a Lozenge ShapeThis is simply a rectangle shape, but the corners are rounded. The corner-radius settings arefrom 0-999 points. A larger the value creates a more-rounded corner.

1. Click on the Rectangle tool2. Click on the Round Rectangle icon This icon appears in the Options part of

the ToolboxDialog box opens

3. Change the corner radius to 10points

4. Click OK

5. Change the stroke and fill colours6. Click and drag to create the shape

Using the Pencil ToolThis is a freehand drawing tool. It can be used to create patterns and curved lines.

1. Click on the Pencil toolOn the Property inspector

2. Click on the Stroke style dropdown

3. Choose a style4. Change the height on the line

using the Stroke height drop downslider

5. Draw the line

Using the Brush ToolThis tool gives the effect of actual lines created by paintbrushes.

Click on theBrush tool


40/139



Brush ModePaint Normal Paints over everythingPaint Fills Paints over fills but not linesPaint Behind Paints behind the shape

Paint Selection Paints inside a selected shapePaint Inside Paints the fill of a shape but not the line

Creating Shapes Using the Brush Tool1. Click on the Brush tool icon2. Click and drag to create a line3. Draw another line Ensure the two lines are touching and are the

same colourThe 2 lines are now part of the same shape

To move the shape

1. Click on the Arrow tool2. Click and drag around the shape to select it3. Position the cursor anywhere within the shape4. Click and drag the shape

To move part of the shape

1. Click on the Arrow tool2. Select part of the shape by clicking and dragging over it3. Click and drag to move the selected part of the shape

Grouping ShapesMore than one object can be grouped to form a new single object. It is useful to group objects ifyou need to edit the objects simultaneously.

1. Click on the Arrow tool2. Select all the shapes by clicking

and dragging all of them

Or

Shift-click each object3. Click on the Modify menu4. Choose Group

Brush shape

Brush size

Fill colour

Brush mode

Brush size


41/139



5. A thin border appears around thegrouped shapes

If you overlap objects that are the same colour and have no strokecolour, they too become grouped.

To ungroup shapes

1. Select the group2. Click on the Modify menu3. Choose Ungroup4. Click away from the shapes


42/139



Changing the Fill ColoursFlash can change the colour of an existing shape. It is possible to have a solid colour or a colour

with gradients. Gradients can make a 2-dimensional shape appear 3-dimensional.

Changing the Colour of an Existing Shape1. Select the fill of the shape2. Click on the Paint bucket tool on

the Property inspector

Changing the Gradient1. Select the fill of the shape2. Click on the Fill colour icon3. Click on the Paint bucket tool on

the Property inspector4. Select the fill gradient from the

selection at the bottomColour is applied to the shape

You can change the centre point of a gradient colour

1. Deselect the shape2. Click on the Paint bucket tool on the Toolbox

3. Click on the Fill colour icon on the Property inspector4. Choose a different gradient colour5. Click somewhere on the shape

Creating a New Gradient

How do I open the Colour Mixer panel ?

1. Click on the Window menu2. Choose Colour Mixer panel

1. Select the fill of the shape Colour Mixer panel

2. Click on the one of the pointers

Gradient Pointer

Fill Style


43/139



On the Mixer box3. Choose a colour Either choose a colour from the Mixer

or Swatches4. Click on the other pointer5. Choose another colour6. Continue for all of the pointers

Place the pointers closer together to make the transition from onecolour to another more abrupt.

Adding more PointersAll gradients must have at least 2 pointers, but you can make your gradient more complex byadding more pointers.

Click just below the gradient bar

How many gradient pointers can I have?

8 is the maximum number

Removing PointersClick on the pointer (underneath the gradient bar) and then drag it away, downwards

To move a gradient pointer, simply click and drag it to where youwant it.

Saving a new Gradient Colour1. Click on the Options menu on the

Colour Mixer panelin the top right corner

2. Choose Add Swatch

Using the new Gradient Colour

1. Click on the Fill colour icon theProperty inspector2. Choose the new gradient

Click here

Click on the pointer anddrag downwards


44/139



Removing a New Gradient Colour1. Click on the Colour Swatches

panel2. Choose the gradient colour to

remove

3. Click on the Options menu4. Choose Delete Swatch


45/139



Aligning ShapesIt is possible to align shapes (particularly useful with rectangles) to the top and left of the stage.

In this example we will create the 3 black rectangles below

Aligning Shapes

To view the entire stage

1. Click on the View menu2. Choose Magnification3. Select Show Frame

1. Click on the Rectangle tool2. Change the line colour to None3. Change the fill colour to a colour of

your choice4. Draw a long and thin rectangle

across the length of the stageThe actual length is unimportant at thisstage

5. Click on the Arrow tool6. Click on the rectangle once to

select it7. Click on the Info icon Info box appears

8. Change X and Y to zero Moves the rectangle to the top left

corner of the stage9. Change W to 55010. Change H to 4511. Create another rectangle Change the dimensions, W=550,

H=10, X=0, Y=5012. Create another rectangle Change the dimensions, W=550,

H=2.5, X=0, Y=6513. Close the Show Info box

Aligning Shapes Using the Menu1. Select the object(s) to align

2. Click on the Window menu3. Select Align Dialog box appears

W and H are the width and heightof the shape. Remember thewidth is 550 pixels. Check this inModify menu, then Document.

X and Y will move th eshape to the top and leftof the stage

Cursor position

Colour of the document


46/139



Align horizont ally

Distribute evenly (horizontally)

Match width, height or both

Align vertically

Align relative to t he stage

Distribute evenly (vertically)

Equal spaces in betweenobjects


47/139



Adding TypeThe text tool allows you to control text and paragraph attributes.

Using the Text Tool1. Click on the Text tool on the

Toolbar2. Click on the stage A text box appears

3. Start typing Text will expand automatically alongone line

To create a text box with set width and word wrap1. Click on the text tool2. Click and drag the text box so it is the width you want

3. Start typing. The text will expand to the next line once the width thatyou have set has been reached.

Character Attributes Using the Property Inspector

Changing the Size of a Text Box

1. Position your mouse on the shapein the top right corner of the textbox

Text Type Font Type

Font Size

Font ColourBold & Italics

Text Direction

Paragraph Alignment

Text box width,height and x

and y positions

Letter Spacing

Superscriptand Subscript

Kerning

Text Rotation

Format optionssuch asIndenting andMargins

Link text toURL


48/139



2. Click and drag to the size you want Text box has a square in the top right

Formatting your Text

1. Click on the Arrow tool2. Click on the stage and type

3. Click on the Arrow tool4. Click on downward arrow for Font

size and use the slider to changethe font size

5. Click on the downward arrow for

Character Spacing anduse the slider to change thespacing between the characters

0=-3= letters are closer together

10=

Kerning

This is the space in between the letters. Some letters, like T, will have morespace around it due to the horizontal line, whereas some letters may seemcloser together, like o and a. Flash takes care of this if you keep kerning on

.

Changing your text into a hyperlink!

1. Select your text, using the arrow tool

2. Click on the Expand button on the Property inspector (in thebottom right corner)

3. In the URL box type the URL of the page to link to4. Press Enter (your text will have a dotted underline in Flash)

Rotating & Enlarging TextIt is possible to manipulate the text as though it is a shape.

1. Create a text box2. Click on the Arrow Tool3. Click on the Text box A thin line appears around the text

4. Click on the Free Transform Tool

on the Toolbox5. Click on the Arrow tool

6. Click on the Rotate & Skew icon Black square handles appear aroundthe text box

Rotate &Skew Scale


49/139



7. Position the cursor on anycornerhandle

8. Click and drag to rotate the textbox

9. Click on the Scale icon10. Position the cursor on any handle

11. Click and drag to change the sizeof the text box

You can be more accurate when you are rotating and enlarging byusing the Show info box.

1. Select the text box2. Click on the Transform Panel3. Change the dimensions


50/139

Flash MX - Converting Existing Shapes into Graphic Symbols


Converting Existing

Shapes into GraphicSymbols


51/139

Flash MX - Converting Existing Shapes into Graphic Symbols


Converting Existing Shapes into Graphic

SymbolsIt is straightforward to create and edit static objects, but Flash can do so much more! Once it isdecided that an object is going to be animated, it needs to be converted to a Symbol. Symbolsare the basic building blocks of Flash.

You may want to use the same symbol more than once in the same or different Flash movie.Flash stores these symbols in a Library.

When you create animation you use a copy of the symbol. This copy is called an Instance.

Why do I need to create Symbols?

Symbols are reusable elements (which are stored in aLibrary). The advantageof using symbols is that they keep the size of your Flash file down to minimum.

Converting an Existing Object into a Symbol

Viewing the Library

F11

Or

1. Click on the Window Menu2. Choose Library

1. Create an object

2. Select it3. Click on the Insert menu4. Choose Convert to Symbol5. Type a name for the symbol By default Graphic is the behaviour6. Click OK The symbol is placed in the Library

7. The object on stage becomes aninstance Bounding box

for symbolCross-hair in

the centre


52/139

Flash MX - Frames, Layers & Scenes


Frames, Layers & Scenes


53/139



What are Frames & Layers?Layers are like transparent sheets of acetate stacked on top of each other. If there is nothing on

a layer, you can see through it to the layers below. A new Flash document contains one layer. Itis good practice to organise your graphics on more than one layer.Layers contain a number of frames. A document can have one frame or several hundred.

Number of layers

The number of layers used does not affect the file size of yourdocument.

Which frame?

If the shape is going to move (or be animated), the shape must be on theKeyframe. See page 64 - Animation.

Frames & layers jargon Frames and layers come from when all animation was drawn by hand.

Keyframes are special frames where a specific event in the animation occurs, such as acircle changing shape or moving position.

Frames (also known as in-between frames) contain static information. This is whereFlash takes the name "Tweening" from, which means adding frames in betweenkeyframes.

Mask layers are used to help you create sophisticated effects.

Flash allows you to combine different shapes together to create complex objects. To work bestwith these complex images, it is vital to understand layers and how Flash interacts with objectson the same of different layer.

Keyframe Tip 1

Keyframes need to be added to create animation

Keyframe Tip 2All movies must have at least one keyframe

Keyframe Tip 3

When creating a background for a movie, place it on a layer on its own andposition the layer at the bottom of the list of layers. Call the layer background.


54/139



Different Representations of Your TimelineMotion Tweening

Keyframes have a black dot In between frames have a

black arrow. Background is pale blue

(pale blue)

Shape Tweening

Keyframes have a black dot In between frames have a

black arrow. Background is light green

(pale green)

A dashed line shows means the finalkeyframe is missing (pale green)

Here there is only one keyframe, thelight grey frames after show thatthere is no change in the content.

There is an empty rectanglein the final frame.

No tweening has beenspecified in keyframe 1.

If you change the tweeningto shape or motion, it willchange to the exampleabove.

(light grey)

A small a indicates there is a frameaction associated with this frame

A red flag indicates the framecontains a label or a comment

The Timeline

Current Scene

Playhead

Framenumbers

List of scenes

List ofsymbols

Frame

Frame rate

Add layer

Layername

Keyframe


55/139



An Example of the Use of Layers

Creating a Layer

Why create layers?

It is good practice to insert a layer for every type of object on your scene.

1. Click on the New layer icon2. New layer appears above existing layer

Moving a Layer1. Select the layer name in the

Timeline2. Click and drag it to a different

position (up or down)A grey line appear showing the positionof the new layer

Renaming a Layer1. Double-click the layer name2. Type the new name Give it a descriptive name

Locking a layer1. Select the layer to lock2. Click on the bullet in the column

under the Lock icon

Bullet replaced with a padlock

Deleting a Layer1. Select the layer in the Timeline

2. Click on the Trash button on the Timeline

Hiding a Layer1. Select the layer to hide

2. Click on the Hide iconon the Timeline

Flash replaces the bullet with a redcross

All thedifferentelements of

the movie liveon separatelayers


56/139



Layer Properties1. Double-click on one of the small

boxes in the Show all layers asoutlines column

Layer properties dialog box appears

2. Click OK

Showing a Layer as an Outline1. Click on a small box in the Show all Layers as Outlines column

2. The object(s) in this layer appears only as an outline

Adding a Shape onto a Layer1. Select the layer the shape will be on2. Insert a keyframe3. Create a shape

Keyframe is not empty now

As soon as you add an object to a frame, a black circle appears in theKeyframe.

Drawing on layers

You can draw and edit objects on one layer without affecting objects on anotherlayer

Click on oneof these

Double- clickhere

Change the name of the layer

Specify the type of layer this is

Change the colour of the outline.This is the colour you will seewhen you are using onion skins

(see later p72)


57/139



Changing the Stacking Order of ShapesAs you add more and more layers, you may need to arrange them so some shapes appear in thebackground or the foreground. By changing the order of the layer in the timeline it is possible tohave shapes overlapping one another.

1. Select the layer2. Click and drag the layer Flash shows you the new location with a thick

line3. Release the mouse Flash moves the layer and selects it

Does the stacking order matter?

If a layer is at the bottom of all the layers, objects on it will appear in thebackground of the movie


58/139



ScenesScenes are similar to scenes in a play. They are created separately, but run sequentially in the

movie. Scenes can be used to break up a long movie into smaller more manageable chunks.

What's the difference between a Scene and a Document?

You can have a number of scenes in a Flash document. Once a scene hasbeen "played" it will play the next scene and so on. For example, there may bea shape moving on the stage in one scene and when that is over it will play the

next scene.

Important points about Scenes

When creating a new scene, there is no evidence of other scenes. Scenes play sequentially in the order they are created, but can be reordered.

Adding a New Scene1. Click on the Insert menu2. Choose Scene

Duplicating a SceneIf you have created a scene with all the correct buttons, colours and animations on, and youneed to replicate this, it is easier to duplicate the scene.

1. Click on the Window menu2. Select Scene

3. Select the Scene you want toduplicate

4. Click on the Duplicate Scene

button5. Double-click the name of the new

scene6. Type a new name Scene names can have spaces7. Close dialog box

Renaming a Scene1. Click on the Window menu2. Choose Panels

3. Select Scene4. Select the Scene you want to


59/139



rename5. Double-click the scene name6. Type a new name7. Close dialog box


60/139

Flash MX - Mask Layers


Mask Layers


61/139



Mask LayersMask layers are layers that allow you to hide and show parts of the layer below. It is like a

window envelope where you can only see certain parts of the letter in the envelope. Once youhave created the mask layer, it is easy to animate the mask layer to create special effects.

Creating a Mask Layer

You can switch the gridlines on so you can align your shapes.

1. Click on the View menu2. Choose Grid3. Select Show Grid

1. Create a new scene

2. Rename the layer "Circles"3. Create lots of circles on this layer,

you decide on the colourDont overlap the circles

Creating perfect circles

Hold down the Shift key whilst creating the circle.

4. Click on the Insert Layer icon5. Rename the layer Ovals6. Create lots of ovals on this layer,

you decide on the colourYou can hide the layer if you want to

7. Click on the Insert Layer icon8. Rename the layer Mask layer


62/139



9. Ensure the Mask layer is selected10. Create 2 large circles in the centre

of the stage

11. Lock all three layers12. Ensure the Mask layer is selected13. Click on the Modify menu14. Choose Layer15. Click in Mask

16. Click OK There is a Mask icon next to the Masklayer

17. Click on the Ovals layer18. Click on the Modify19. Choose Layer20. Click Masked

21. Click OK22. Click on the Circles layer23. Click Modify24. Choose Layer

25. Click Masked26. Click OK27. Hide the circle layer28. Unhide the circle layer

The Circles and Ovals layers are seen through the Mask layer


63/139



Masks use a lot of processing power, so keep masks to a minimum.

What Shapes can I use in the Mask and Linking layers?

This is completely up to you!Masking is a very powerful tool in Flash, go ahead and experiment.

Unlinking a Layer from a Mask LayerOften when you create a new layer below a Mask layer it is associated with it.

1. Right-click on the Mask layer2. Choose Mask

Animated Masks

This type of animation is like a spotlight effect.See page 88 for an example.


64/139

Flash MX - Symbols


Symbols


65/139

Flash MX - Symbols


Symbols

Types of SymbolsA symbol is an object that is going to be used more than once it can be a static element, a buttonor an animated movie clip.

There are 3 types of symbols:

Graphic These are objects created in Flash. i.e. a shape or some textButton These areinteractive objects that will perform an action e.g. a Home

button activated when the user clicks on it Movie Clip These are independent animationswithin a movie i.e. a moving image

that runs continuously

Why should I use symbols?

If you need to use an element again and again, use a symbolsince it will help to reduce your file size.

If you change the symbol (for example change the colour) every copy ofthe symbol will be changed throughout the Flash document.

Where are symbols stored?

Each Flash document has its own library. To view the library press F11.

Useful jargon

When an object is in the library it is know as a symbol When a symbol is on the stage it is known as an instance of the symbol

Creating a SymbolThere are 2 methods:

Converting an existing object into a Graphicsymbol (See p 51)

Creating a symbol from scratch

Creating a Symbol fromScratch1. Click on the Insert menu2. Choose New Symbol3. Type a name for the symbol4. Ensure the behaviour is Graphic5. Click OK You are now inSymbol-editing mode


66/139

Flash MX - Symbols


How do I know I am in Symbol-editing mode?

A cross-hair is placed in the centre of the stage and in theLibrary.

Just below the Timeline you will see the name of the new symbol

The entire stage appears white

6. Create the symbol Use the cross-hair on stage to positionyour symbol in the centre of the stage

How do I centre the symbol on the stage?

1. Select the symbol by double-clicking it2. Use the arrow keys on the keyboard to move the symbol a pixel at

a time

7. Click on the scene name You will be returned to the stage

You now need to add an instance of the symbol to the stage8. Press F11 The Library for this document opens

9. Click and drag on the Symbol orSymbol name in the Library

An instance of the symbol is placed onthe stage

Editing a Symbol

This changes the symbol permanently and all instances of thesymbol on the stage.

1. Right-click the symbol name in thelibrary

or

Right-click an instance of thesymbol on the stage

2. Choose Edit You are in symbol-editing mode3. Make your changes4. Return to the movie-editing mode

by clicking on the scene name


67/139

Flash MX - Symbols


Changing the Colour of an Instance

You may decide you only want to change the instance on the stageand not the symbol in the library.

1. Add an instance to the stage2. Select the instance

On the Property inspector3. Click on the down arrow next to

Colour

Brightness

TintAlpha

Advanced

-100 makes the object black, 0 remains the same and 100 makesit whiteChanges the colour of the objectChanges the transparency of the instance. 0 makes it invisible

and 100 remains the sameChanges the instances tint and transparency in one go

4. Choose Tint5. Ensure the Tint is at 100%6. Click on the Colour icon7. Choose a colour from the palette

Duplicating a Symbol

If you have made changes to an instance then find you will need to

reuse the instance then convert it to a symbol.

1. Right-click the symbol on the stage2. Choose Convert to Symbol3. Type a new name for this symbol4. Ensure the behaviour is graphic5. Click OK

Deleting a Symbol from the Library

1. Right-click on the symbol name inthe library

2. Choose Delete Confirmation message appears3. Click Delete

Adding a Library from another Movie1. Click on the file menu2. Choose Open as Library3. Choose the Movie Library you

want to open4. Click Open


68/139

Flash MX - Symbols


Using a Symbol from Another LibraryClick and drag the symbol from thesecond library onto the stage

The symbol becomes part of the libraryof this document

Changing a symbol/instance from another libraryThis is just as before, the symbol is now part of the current library. You can

either change the symbol or an instance.

Updating a Symbol from the Shared Library1. Click and drag a symbol from the

second library onto the stage2. Close this document3. Open the original document and

make changes to a shared symbol

4. Close the original document5. Open the document with the

shared symbol6. Press F11 to open the Library7. Open the original document as a

LibraryYou now have 2 Libraries open

8. Click and drag an instance of thesymbol you have just amended

Dialog box appears

9. Choosing the first option meansthe current instance will not beupdated to reflect any changemade to the symbol

or

Choosing the second option willupdate the current instance

10. Click OK

Swapping one Instance of a Symbol for Another1. Select the instance on the stage

you want to replaceOn the property inspector

2. Click on the Swap button3. Choose the symbol you want to

replace the existing symbol4. Click OK


69/139

Flash MX - Symbols


Organising SymbolsIt is good practice to organise your files in general, and this includes your symbols. Instead of

just storing your symbols in the Library, it is better to arrange them within folders, particularly ifyour movie is going to have a large number of symbols.

Creating Folders in the Library1. F11 Opens the library for this movie2. Click on the New Folder icon at the

bottom of the Library

A new folder appears in the library

3. Type a name4. Press Enter

Moving Symbols into the Folder1. Select the symbol name in the

library2. Drag it to the folder name until

there is a thin black line around it3. Release the mouse

Moving adjacent symbols into a folder

1. Click on the first symbol2. Hold down the Shift key3. Click the last symbol

All the symbols are selected4. Drag to the folder5. Release the mouse

Moving more than one symbol not adjacent into a folder

1. Click on a symbol2. Hold down the Ctrl key3. Select the other symbols4. Drag to the folder5. Release the mouse


70/139

Flash MX - Animation: Frame-by-Frame


Animation: Frame-by-

Frame


71/139



Simple Frame-by-Frame AnimationThis is a very simple animation using a series of images, each of which are slightly different from

one another. Each of these images needs to be placed on a separate keyframe. The entireanimation can be made up of a series of keyframes.The keyframe will duplicate the symbol from the previous frame, then you can change it. Thismeans you dont have to keep recreating the symbol in each keyframe.

How do I add Keyframes?

1. Click in the frame in the Timeline2. Press F6

Example of "Bouncing ball" AnimationChange the view so you can see the entire frame.

1. Click on the View menu2. Choose Magnification3. Select Show Frame

You will see the entire stage

1. Open a new document2. Rename the layer Bouncing ball3. Select frame 14. Select the Oval tool on the Toolbar5. Set the Line colour to None6. Create a perfect circle about 1 inch

in diameter in the top left of thestage

Hold down the Shift key to make aperfect circle

7. Click into the second frame8. Press F6 A Keyframe is added9. Click on the Arrow tool10. Move the circle to the bottom of the

stage11. Click into the third frame12. Press F613. Move the circle to the centre of the

stage14. Repeat steps 12 and 13 until the

circle is in the bottom right cornerof the stage

Previewing the SceneIt is only necessary to play a scene at a time if you play the movie it will play each sceneconcurrently.

1. Click on the Window menu2. Choose Toolbars3. Choose Controller Use Play, Stop, Forward, or

Rewind buttons


72/139



Playing the Frames in the Flash PlayerClick Ctrl+Alt+Enter

Or

1. Click on the Control menu2. Choose Test Scene

Flash exports the scene to a Shockwave Flash Format file and opens it inFlash Player.This .swf file takes the same name as the Flash movie

3. Press Escape to stop the scene4. Closing the window returns you to the flash scene

Adding More Frames to Make the Animation Smoother

This first movie is not very smooth and a bit crude. By adding more keyframes and moving thecircle in each one, the bouncing ball can appear smoother.

Before you add more keyframes, switch on onion skinning. This allows you to see the circle incontext with the other circles in the keyframes.

Switching on Onion Skinning1. Click on the Onion skin icon on the

Timeline

2. Click on the right Onion skin

marker3. Drag it so it extends over all the

frames you are using

This is what you will see on the stage

Onionskin IconsOnion skinning shows dimmed or outlines of the content of your other frames in the animation.This helps if you need to align shapes and in refining your animation.

Turns on Onion skinning

Onion skinoutlines

Edit multiple

Modify Onion

markers

Onion skinmarker


73/139



Frame RateThe Frame Rate controls the speed at which Flash will show the images. If the frame rate is too

high, the movie will appear as a blur, if it is too slow, the viewer will actually see each frame asseparate images. A good frame rate setting for animation over the web is 12fps.

Setting the Frame RateIn the frame rate box on the Timeline,

Double-click the frame rate Document Properties dialogue box opens up

Enter a value for the frame ratePress OK

Slowing Down the AnimationAnother way of slowing the animation is to add blank frames between the keyframes

1. Select keyframe 1

2. Click on F5 This inserts a Frame3. Select the second keyframe4. Click F55. Repeat the steps so there is a

blank frame between eachkeyframe

6. Press Ctrl +Alt + Enter to test thescene

Blurred animation

If the animation appears blurred in the movie, try reducing the frames persecond (fps).


74/139

Flash MX - Animation: Motion Tweening


Animation: Motion

Tweening


75/139



Motion TweeningFrame-by-frame animation produces large files and is a lot of work. So, Flash gives you an

alternative, which isTweening. Tweening is when you instruct Flash to fill in the frames inbetween(this is where "tweening" come from) the keyframes.

What can Flash Motion Tween?

Symbols

Grouped objects

Text

Examples of Motion Tweening

Animating objects that change colour

Animating objects that fade out

Animating objects that change size

Animating objects that move

Animating Objects that Change ColourHere the colour changes, but all you do is choose the starting and ending colours and Flash willmotion tween the in between frames. I.e. the colour will change gradually between the twokeyframes.

1. Create a new Flash document (Or open one containing symbols, ensure thatyou are on a new layer, and then go to step 6)

2. Rename the layer colour changeAdd a symbol from an existing document3. Click on the File menu4. Choose Open as Library5. Select a document which contains

symbols6. Ensure Keyframe 1 is selected7. Drag an instance of a symbol onto

the stage8. Click on the Insert menu9. Choose Create Motion Tween A dashed line appears, this is because

there is no ending keyframe yet10. Select frame 10

11. Press F6 A keyframe is inserted

12. With frame 10 still selected selectthe symbol on stage, using thearrow tool

Using the Property inspector13. Click on the down arrow next to

Colour

14. Choose Tint15. Change the colour16. Ctrl + Alt + Enter to view the scene Flash recolours the shape in the in-

between frames


76/139



Animating Objects that Fade OutIt is possible to "tween" an object so the colour fades. This example will show the objects colour

fade in and out.

1. Create a new Flash document

or

Add a new scene by clicking on theInsert menu and choosing Scene

2. Rename the layer "shape-fade"3. Select frame 14. Drag an instance of a symbol from

the library

5. Click on the Insert menu6. Choose Create Motion Tween7. Select frame 108. Press F69. Select the shape10. Click on the drop down next to

Colour on the Property inspector

11. Choose Alpha12. Change the % to 0

13. Click frame 2014. Press F615. Select the shape16. Change the % to 50

17. Click frame 3018. Press F619. Select the shape20. Change the % to100

21. Click frame 4022. Press F623. Select the shape24. Change the % to 50

25. Press Ctrl + Alt + Enter to view thescene


77/139



Animating Objects that Change SizeIt is possible to "tween" an object so it enlarges then gets smaller. This example will show ashape growing in size, and then shrinking.


or


2. Rename the layer "shape-size"3. Select frame 14. Drag an instance of a symbol from

the library5. Click on the Insert menu6. Choose Create Motion Tween7. Select frame 108. Press F6

9. Click on the free transform Tool

on the Tool box10. Reduce the size of the shape by

clicking and dragging any cornerhandle

11. Select frame 2012. Press F613. Increase the size of the shape14. Select frame 3015. Press F616. Decrease the size of the shape17. Select frame 40

18. Press F619. Increase the size of the shape20. Press Ctrl + Alt + Enter to view the

Scene

Time delay between objects animating

If there is a time delay between one object ending and restarting, it may be thatthere are more frames being used for one object, so all the frames have to run

before they can start again.I.e.

There is a 15 frame delay before "square" can start again

Animating Objects to Move Across the StageIt is possible to "tween" an object so it moves across the stage. This example will show a shapemoving and rotating across the stage.


or


78/139




2. Rename the layer "shape-move"3. Select frame 14. Drag an instance of a symbol from

the library

5. Click on the Insert menu6. Choose Create Motion Tween7. Select frame 108. Press F69. Move the shape by clicking and

dragging it to somewhere else onthe stage

Cursor shape is a large black arrowwith a smaller four-headed arrowattached to it

10. Select frame 2011. Press F612. Click on the free transform Tool

on the Tool box13. Rotate the shape by clicking and

dragging between any two verticalhandles

Cursor shape is a curved arrow

14. Select frame 3015. Press F616. Move the shape by clicking and

dragging it to somewhere else onthe stage

17. Select frame 4018. Press F619. Click on the free transform Tool

on the Tool box20. Rotate the shape by clicking and

dragging between any two vertical

handles (I.e. near the corners)21. Press Ctrl + Alt + Enter to view the

Scene

Animating Objects to Move Across the Stage Using Guide LayersGuides layers allow you to draw a path for your shape to follow. A normal layer is linked to thisguide layer.

1. Add a new Scene2. Rename the layer "shape-move

guide layer"

3. Select frame 14. Drag an instance of a symbol from

the library

Or

Copy & paste an image from theweb

Create a shape which that will lookdifferent when rotated

5. Select frame 16. Click on the Insert menu7. Choose Create Motion Tween8. Click in the last frame for this

animationIn this example it is frame 30

9. Press F6


79/139



10. Click on the Arrow tool if it isnot already pressed in

11. Move the object to the end position12. Click on the Add Guide Layer icon The Guide layer appears above the

shape-move gl layer

13. Switch on onion-skinning14. Extend the skinning over all the

frames

15. Click on the Pencil tool16. Draw the pathway from the centre

of the first shape to the centre oflast shape


Animating Objects to Move Across the Stage Matching the Shapes Orientation to the PathTo make the movement of your shape look even more realistic, it is wise to change the objectsposition according to where it is moving to.

For example, if you had motion tweened a beetle to crawl across the stage, it would look better ifthe beetle was facing the direction it was moving in

Start from the centre of theshape in frame 1 and end in

the centre of the shape inthe last frame

Last position of theshape

The beetle is always facing the lefteven though there is a guide layer.


80/139



1. Add a new Scene2. Rename the layer "shape-move

orientation"3. Select frame 14. Drag an instance of a symbol from

the library

Or

Copy & paste an image from theweb

Create a shape which that will lookdifferent when rotated

5. Select frame 16. Click on the Insert menu7. Choose Create Motion Tween8. Click in the last frame for this

animationIn this example it is frame 30

9. Press F6

10. Click on the Arrow tool11. Move the object to the end position12. Click on the Add Guide Layer icon The Guide layer appears above the

shape-move gl layer

13. Switch on onion-skinning14. Extend the skinning over all the

frames

15. Click on the Pencil tool16. Draw the pathway from the centre

of the first beetle to the centre oflast beetle

17. Select frame 1 of the layer

containing the tweened shape(shape move orientation)

The beetle is always facing thedirection it is moving in.

Start from the centre of the beetle inframe 1 and end in the centre of the

beetle in the last frame.


81/139



In the Property inspector18. Tick the checkbox for Orient to

PathFlash immediately redraws the tween



82/139

Flash MX - Animation: Shape Tweening


Animation: Shape

Tweening


83/139



Shape Tweening

Difference between Motion & Shape tweening?Motion tweening works on groups and symbols, whereas Shape tweening uses

editable shapes.The key to deciding to use motion or shape tweening is "Can the change be

made using a dialog box?"If not, use Shape Tweening (also known as Morphing).

You will see it is possible to arrive at the same animation effect using either motion or shapetweening, i.e. the bouncing ball example

Examples of Shape Tweening

Morphing a simple shape into another

Morphing letters/numbers

Morphing one object into many objects

Changing the colour of an object

Morphing a Simple Shape into Another1. Insert a new scene2. Rename the layer "shape-morph"3. Select frame 1

Why not use one of your existing symbolshowever you must

Break Apart the instance otherwise you wont be able to shapetween it

1. Drag an instance of the symbol onto the left side of the stageIn this case it is a circle

2. Click on the Modify menu3. Choose Break Apart

4. Single-click on keyframe 1On the Property inspector

5. Click on the Tween downwardarrow

6. Choose Shape

7. Click on frame 108. Press F7 Blank keyframe is inserted and frames

1-9 change to pale green with adashed line

9. Create a different shape on theright side of the stage

In this case it is a square

10. Press Ctrl+ Alt + Enter to view thescene

This is what the animation looks like


84/139


Page 84 Happy Comput

flash_mx_manual.pdf

Documents