Flash 5 Made Simple (Made Simple Computer) 9780750653619, 0750653612

Citation preview

ISBN 978-1-138-43622-0

9 781138 436220

Routledge

www.routledge.com

Flash 5 Made Simple Mike McGrath

�� ��o�;��n���up LONDON AND NEW YORK

First published 2001 by Made Simple

2 Park Squ ar e, Mil ton Park , Abingdon, Oxon OX14 4RN 711 Third Av e nue, New York, NY 10017, USA

Routledge is an imprint of the Taylor First issued in

Copyright ©

&

Francis Group, an infonna business

hardback 2017

Mike McGrath 200 1

All rights reserved. No part of this book may be reprinted or reproduced or utilised in any form or by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying and recording, or in any information storage or retrieval system, without permission in writing from the publishers. Notice: Product or corporate names may be trademarks or registered trademarks, and are used only for identification and explanation without intent to infringe. TRADEMARKS/REGISTERED TRADEMARKS Computer hardware and software brand names mentioned in this book are protected by their respective trademarks and are acknowledged.

British Library Cataloguing in Publication Data A catalogue record for this book is available from the British Library

ISBN 978-0-7506-5361-9 ISBN 978- I- I 38-43622-0

(pbk) (hbk)

Typeset by Mike McGrath Icons designed by Sarah Ward © 1994

Transferred to digital printing 2006

IV

Contents 1

1

Flash basics Launching Flash

.................................. . ...............

Drawing a shape

................................................

Selecting elements Grouping elements Summary

2

.

.................................

.

........

............

6

12

13

Drawi ng i n Flash Drawing lines

5

10

.............. . ...................

..........................................................

Choosing colours

2

14

.......... ............................... . ....

.

..............................................

16

.....

Pencil drawing .................................................. 1 8 Changing lines Summary

3

20

...... ...........................................

24

..........................................................

25

Pai nting i n Flash Filling with colour

..............................................

26

Brushing colour ................................................. 28 Pouring ink ....................................................... 31 Erasing graphics

.

..............................

.

.....

32

..........

Working with shapes ......................................... 34 Summary

4

.

........................

39

Writing i n Flash Adding text

.

..............................

Changing text attributes Changing characters Drop shadow effect

38

.................................

........................

. ..

........

...

.

......................

40 41

. 44

......................................

.. .

.............

.

..

..........................

47

Summary .......................................................... 48

v

5

49

Thi n ki ng i n l ayers

Creating a layer ................................................ 50 Controlling layers .............................................. 51 Moving between layers ...................................... 55 Adding special layers

56

........................................

Summary .......................................................... 58

6

59

Saving g raphics

The Flash library ............................................... 60 Using symbol instances ..................................... 64 Modifying instances

.

.....................

.....................

65

Editing symbols ................................................. 66 Summary .......................................................... 68

7

69

Using other g ra phics

Importing graphics ............................................ 70 Converting bitmaps ........................................... 72 Importing animations

.

.....................

.

......

...........

74

Bitmaps as fills .................................................. 76 Summary

8

. ..........................................................

Animating g ra phics

78

79

The Flash Timeline ............................................ 80 Creating keyframes ........................................... 82 Handling frames . .

.............................................

84

Animation preview ............................................ 89 Frame rate ........................................................ 92 Summary .......................................................... 94

VI

9

Motion tweening

...............................................

Graphic tweening

...........................................

Motion Guide layers

........... .............................

Multiple Motion tweens Summary

10

I nteractive buttons Rollover buttons Invisible buttons Summary

.............. ..........................................

Editing sounds

... . ........... . . ...........................

. .............. . .............. .............

................................................

....... . .. . .............................................

1 05 l 08 112

114

118 1 20 1 24

Exporting from Flash Optimizing movies

1 26 1 27

1 34 1 36

137

Delivering movies

Publishing movies

1 00

125

Embedding sound

Summary

....................... . .............

.................. . ...........................

Importing sounds

96

113

........ . ......................... . . . .........

11 Adding sound

Summary

... . ... . ..................... . ......

........................................................

Adding button actions

12

95

Tweening animations

.......................................

..........................................

...........................................

............................... . ........................

1 38

1 40 1 42 1 48

Keyboard shortcuts

149

I nd ex

150

VII

Preface Macromedia Flash is the application that is used to create those animated interactive multimedia pages you see on the Web. Designers love to use it because it allows them to efficiently produce and deliver Flash movies with stunning effects. Virtually all modem web browsers can view Flash movies without needing any further software. This means that the same Flash movie can be viewed on any common web browser regardless of the operating system that is being used. Flash can do much more than animate sound and vision though. Actions can be added to elements of a Flash movie to make them respond intelligently to the user. Flash 5 builds on earlier versions to provide more creative actions than ever before. This means that imaginative interaction can now make Flash movies a magical user experience. This book is a beginner' s guide to starting out with Flash 5 and assumes that the reader has no previous experience of working with vector graphics or animation programs. The Flash interface often provides several ways to perform a task but this book mostly concentrates on using the mouse pointer and gives the keyboard shortcuts for Flash on the Windows platform. You are shown by example how to use the tools in the Flash interface to create and manipulate graphics before learning how to animate them. You will discover how to create rollover buttons that interact with the user and how to add sound to your movies so they really come alive. Finally the book explains a number of ways to deliver your movie for viewing. After following the examples in this book you will be able to start creating your own exciting Flash movies.

VIII

f!' �

Takenote This

book

uses some

conllentions for elarify: Keyboard keys are shown

inside square brackets, such as (Enter].

Ste�s through menus to sub menus are shown

with the greater-than angle bracket, for in­ stanee

File

>

O�en.

1 Flash basics Launching Flash Drawing

a

shape

.

. . . . . . . . . . . . . 2

.

. . . . . . . . . . . . . 5

Selecting elements

.

Grouping elements Summary

.

.

.

.

.

.

.

6

.

.

.

. . . . . . . . . . 10

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

12

La u nch i n g Flash

Basic steps

The Macromedia Flash installer will have created icons which can be used to launch the Flash interface.

1 C l ick the Sta rt butto n .

mlill'i'N

iii& OOi&U� �& m gr:mH'm!lmH �@ ml2lll!$&&?rurn:sllls l�l':'�mru�il'mllmm:mlm �

A Flash interface displays these three maj or components: e

The Flash toolbar which provides menu commands that can be used as an alternative to using graphic controls or keyboard shortcuts

•

The Flash toolbox which contains the creative tools

•

The Flash editor where graphics and text are drawn

2

2 Move the poi nter to Prog ra m s

3 C l ick o n the F l a s h men u o ption .

0 The p rog ra m wi l l

open the F l a s h i nterface ready for use.

The Flash editor Tip Press

[Ctrl +#]

to

dis�lay ot hide a hack­ ground grid on the stage.

The editor window is where Flash images and animations are created. A new editor window can be opened from the Flash toolbar by selecting the File > New menu options. Each editor window has these three maj or components: •

A layers panel to create and manipulate drawing layers

The grid will not a�pear

•

A timeline panel that has graduated markings and controls that are used to create animations

hel�ful to align sha�es.

•

A blank area that is called the ' stage' where all graphics are created in Flash.

in the final mollie but is

The Flash tool box The toolbox contains all the tools needed to draw, paint and manipulate images in the stage area of the Flash editor. Select a tool by clicking on any of the icons in the tools panel. Separate panels contain icons to select the view of the stage, the colours to draw or paint and further options that can be applied.

Arrow tool

Take note Items in the

panel will

Pen too l

Text tool

I n k bottle tool Eyed rop per too l Hand

vary accord­

Su bsel ect too l Lasso too l

Pen c i l tool

options

ing to the selected tool ..

Li ne too l

Ova l too l

f�\�,'

�

Recta n g l e too l B r u s h too l Pa i nt bucket tool E raser too l Zoo m

Stroke col o u r Fi l l col o u r Set t o defa u lt co l o u rs

Set col o u r t o n o n e Swa p stroke a n d fi l l

S n a p to g ra p h i cs S mooth l i n es Rotate

4

Stra i g hte n l i nes Sca l e

rowing a shape

Basic steps 1 Select the ova l tool by cl icki n g it i n the tool ­ box, o r b y p ressi n g [0] . O r sel ect the Recta n ­ g l e too l b y c l icki n g it in the tool box, o r by p ress i n g [ R).

Ovals and rectangle shapes can be easily drawn on the stage with the oval and rectangle tools. With a shape tool selected, just click on the stage and drag the mouse to see a preview of the shape appear. The size of the preview changes dynamically as the mouse is moved. Release the mouse button when the shape is the desired size and Flash will draw the final shape. The shape will have both an outline and a filled centre in the colours that are currently selected in the Colors panel on the toolbox.

2 C l ick o n the stage a n d h o l d d own the m ouse butto n .

3 Keep t h e mouse

b utton p ressed a n d d rag the poi nter across the sta g e .

4 Fi n a l ly release the m ouse butto n .

0

F lash wi l l d raw the s h a pe o n the stag e i n the cu rrent col o u rs .

F i l l col o u r --� N o Colour

Tip Drag

O utl i n e col o u r

and hold

to dr�w a

[Shift]

perfect circle.

Select the No

Colour

to draw just outline shape. button

an

---

Take note The outline is correctly called the 'stroke• and its width can he changed.

5

Selecti n g elements

Basic steps

Graphic shapes that are drawn on the Flash stage are made up of separate elements. A filled circle, for example, comprises a centre fill element and an outline stroke element. Elements can be manipulated to change their size, shape, colour or position.

1 Select the a rrow too l

The element that is to be manipulated must first be selected by the arrow tool to identify it to the program. Flash adds a highlight pattern to the selected element to make it recognisable to the user. The highlight pattern disappears when the element is deselected.

2 C l ick on the req u i red

Select the a rrow to

b y c l i cki n g it i n t h e Too l box, o r b y p ressi n g [V] . e l e ment to select it.

3 H o l d down the [Sh ift]

then c l ick the selected e lement to deselect it.

0 The a p pea ra nce of the

e lement returns to n o rm a l o n ce it h a s b e e n deselected .

C l ick to se

Takenote

li'='"\h

f4,�'\1

� Notice that the cursor style changes when the pointer is positioned

o11er an

element.

The cursor

resumes

normal style when

its

the

pointer returns to a hlank area of the stage. 6

Basic steps

Selecting m u ltiple elements

1 Select the a rrow too l

Several elements on the stage can be selected together in order to manipulate their features simultaneously.

by c l icki n g i t i n the too l box o r by p ressi n g

M·

2 C l i c k o n a n element to m a ke a fi rst selecti o n .

3 H o l d d own [Sh ift] then c l i c k o n oth e r elements to m a ke a d d i tio n a l selecti o n s .

4 C l ick o n a b la n k a rea of the stag e to d eselect a l l elements .

D The a p pea ra nce of a l l

selected elements retu rns to n o rm a l o n ce they a re d eselected .

3 Press [Shift] then c l i c k oth

7

Boxi ng selections

Basic steps

An easy way to select multiple elements quickly is to drag the arrow tool across the stage to create a selection box area. All elements that are inside this box will be selected.

1 Select the a rrow tool

If the selection box encloses just a part of an element then that part which is inside the selection box will be selected.

2 C l ic k o n the stag e a n d

by c l icki n g it in the tool box o r p ress [V] .

h o l d d own t h e m ouse button .

3 Keep the m ouse

b utton p ressed a n d d ra g the poi nter a c ross the stage.

0 The selecti o n box a p pea rs a n d wi l l

dyn a m i ca l ly c h a n g e a s the m ouse m oves .

4 F i na l ly release the mouse butto n .

0 T h e box wi l l d i sa p pea r

a nd a l l the enclosed e l e ments a re selected .

Tip select all elements on the stage just press [Ctri+A]. To

[Delete)

will remoile

selected elements.

8

Basic steps

Lassoing selections

1 Sel ect the l a sso too l by

Irregularly shaped selections can be made using the lasso tool. This allows freehand selection areas to be drawn on the stage by holding down the mouse button while drawing. Choosing the polygon option makes the lasso tool easier to use by drawing the selection area from point-to-point. Each click denotes a new point and a double-click completes the selection area.

c l icki ng it i n the tool ­ box o r by p ress i n g [ L] .

2 C l ic k o n the polyg o n

o ptio n i n the tool box.

3 C l ic k o n the stag e to

set the sta rti n g poi nt of the selecti o n a rea .

4 C l ic k a d d iti o n a l poi nts to d raw a selectio n a rea a ro u n d a s h a p e .

\l A

5 F i na l ly d o u ble-click t o d raw a l i n e b a c k to the sta rti n g poi nt a n d m a ke the selecti o n .

0 The selectio n a rea

l i n es wi l l d isa p pea r l eavi ng enclosed e l e ments selected .

Tip To select just a

part ol an element to work with draw around it with ei­ ther the arrow tool or lasso tool

•

9

roup1n elements Graphic elements on the Flash stage can be grouped together so they can be treated as a single obj ect. The entire grouped obj ect can be repositioned, enlarged or reduced, and rotated. Grouped objects do not interact with other graphic elements on the stage. If a grouped obj ect is positioned so that it overlaps other graphics or groups they will simply stack up on top of each other.

Basic steps '

1

�

Flash displays a visible bounding box around a grouped obj ect " when it is selected, to identify it as a group. This box disappears when the group is deselected.

1 Select a l l the e l e ments to be g ro u ped - usi n g a ny of t h e selectio n methods d escri bed ea rl ier i n this cha pter.

2 Press [Ctri + G] to

create the g ro u p a n d see the bou n d i n g box a p pear.

3 Press [Ctri + B] to

b rea k the g ro u p apa rt - notice the bou n d i n g box d i s a p pea r.

4 C l i c k o n a b l a n k a rea of the stag e to deselect a l l elements .

0 The elements a re n ow back i n their orig i n a l

state a n d c a n be i n d ivid u a l ly ed ited .

Tip [Ctti+Shiff+G)�a: n also he used to ungroup a grtntped ohject. 10

B11

Basic steps

,p

1 Rig ht-cl ick o n a g ro u p to open the g ro u p context m e n u .

2 C l ick the ed it selected m e n u item to e nter i nto ed iti ng mode.

Ed itingGrou ps Flash provides a special editing mode that can be used on elements i n a group. A click o f the right mouse button over a grouped obj ect will open a context menu from which 'Edit Selected' will put the stage into editing mode. Elements in the Group can then be edited as normal and all other graphics on the stage are dimmed to avoid confusion.

3 Select the elements to be ed ited a s n o rm a l .

4 Double-click a b l a n k a rea of the stag e to leave ed iti n g mode.

D The stage retu rns to

sta n d a rd mode a n d a l l d i m med g ra p h i cs resume thei r usua l a p pea ra nce .

Take note

·' �

�

stage is Group editing mode

Whene11er the in

�r--;,1;� '"''\,

Gllq)

the

icon

will he displayed in the

top

Dou b l e - c l i c k t

corner of the editor window.

left

Ffash

11

Summary D The F l a s h too l ba r p rovid es m e n u com m a nds that

ca n be used a s an a lternative to usi n g g ra ph i c contro l s o r keyboa rd shortcuts .

D The F l as h i nterface has a m a i n wi n d ow conta i n i ng

the F l a s h ed itor a n d the F l a s h too l box.

D The F l a s h ed itor consists of the stag e a rea, the l ayer

pa nel a n d the ti m e l i ne pa n e l .

D

I ma g es a re created o n the stag e i n the F l a s h ed itor.

D Al l tool s n eeded to d raw, pa i nt a n d m a n i p u l ate

i ma g es o n the stag e a re conta i ned i n the too l box.

D G ra p h ics m ay consist of stroke a n d fi l l col o u rs . D C i rcles a n d ova l s ca n be d rawn o n the stag e usi n g

t h e ova l tool .

D Sq u a res a n d recta n g les ca n be d rawn o n the stag e

using t h e recta n g l e tool .

D The a rrow tool ca n be used to select elements to

work with o n the sta g e .

D The a rrow tool ca n select severa l e l e m e nts at o n ce

by d ra g g i n g a box a ro u n d the m .

D The l a sso tool ca n select severa l e l e m e nts at o n ce by

d rawi n g a selectio n a rea a ro u n d them .

D

E l ements ca n be com bi ned i n a s i n g l e g ro u p object that ca n be m oved , re-sized o r rotated .

D

E lements i n a g ro u p ca n be ed ited usi n g the s pecia l ed iti n g mode.

12

2 Drawing in Flash Choosing colours ..................... 14 Drawing lines ........................... 16 Pencil drawing............... ........... 18 Changing lines ......................... 20 Summary ................................24

hoosi n colours The colours to draw on the stage can be set for both the stroke and fill using the toolbox Colors panel. Clicking on either ofthe coloured blocks in this panel produces a dialog box containing a swatch of colours to choose from. When a colour is chosen the dialog box closes and the Colors panel displays the current colours that will be used when drawing on the stage.

Basic steps 1 C l ick o n the top col o u r b l ock that shows the cu rrent stroke co l o u r.

2 C l i c k o n the des i red new stroke co l o u r from t h e swatch .

3 C l ick o n the bottom

col o u r b l ock s h owi n g the cu rrent fi l l col o u r .

4 C l i c k o n t h e desi red new fi l l col o u r from the swatch .

0 The newly selected

co l o u rs a re d i s p l ayed in the C o l o rs p a n e l .

Take note swatch dialog box has additional choices at the bottom. These offer a "ariety of gradi­ ent coloured fill s. The

The pointer changes to an Eyedropper whene.,er a colour can be chosen. 14

Basic steps

1

�� p

C l ic k the m ixer b utton to open its d i a log box.

2 C l ick o n the fi l l o r

stroke i c o n to choose which one to set.

3 C l ick o n the m u ltico l -

o u red p a n e l t o specify the des i red col o u r.

4 C l ic k the X butto n to

Mixi ng more colours Colours which are not available in the standard swatch can be specified in the mixer dialog box. This is launched from the small toolbar at the bottom right-hand comer of the editor window and has a duplicate of the toolbox Color panel features . The mixer dialog box also contains a multi-coloured panel that can be clicked to specify an exact colour at the point where it is

------1(1

O pen the m ixer

)

c l ose the d i a log box.

0 The newly selected col o u r is d i s p l ayed i n the Col ors p a n e l .

C l ic k to choose a col o u r

15

Drawi n g l ines Straight lines can be drawn on the stage using the line tool in the Flash toolbox. It is important to note that lines are purely stroke elements and do not have any fill component. The line style, colour and thickness can be specified using the stroke options. These are part of the info dialog box that can be launched from the toolbar at the bottom right-hand comer of the editor.

Basic steps 1 C l ic k o n the l i ne too l

i co n i n the tool box o r p ress [ N ] .

2 C l i c k the b utton to

open the i nfo d i a log .

3 C l i c k the stroke ta b .

4 C l ick the d rop-down

b utton a n d choose a l i ne style.

O p e n the i nfo d ia l og

5 C l ick the s l ider b utton a n d a d j ust to the req u i red thickn ess .

0 A p revi ew of h ow the l i ne wi l l a p pea r is s h own in the pa n e l at the bottom of the stroke d i a l og box.

Tip

-

A colour block in the stroke dialog bu dis­ �lays the current stroke colour. Vou can click on this to open a swatch and choose a new stroke

colour for the line.

16

Basic steps

B!l

1 C l ick o n the l i ne tool icon i n the too l box.

2 Move the poi nter

a c ross the stag e to the position where the l i ne i s to sta rt.

D raw a l i n e o n the stage The line tool is used to draw a line on the stage. An initial click on the mouse button sets the starting point then the mouse can be dragged to the finishing point. The line is not actually drawn until the mouse button is released.

C l ic k the l i ne tool

3 C l ick a n d h o l d d own

the mouse button then d ra g the poi nter to the position where the l i ne i s to e n d . A p review of the l i ne i s d i s p l ayed on the stag e .

4 Release t h e mouse

b utto n when the l i n e p review is the d es i red l e n gth a n d positi o n .

0 A l i ne i s d rawn i n the c u rrent stroke col o u r, style a n d thickness .

Tip Hold down [shift] while dragging a line to keet it strictly horizontal,

1tertical tU' at an angle of 45 degrees.

Take note At any time yoq can undo prrndoqs drawing

actions

clicking the IIG,"") Undo button on the tool bar, pressing [Ctri+Z], as many times u needed.

or

by

hy

17

Penci l dra 1n g •

Freehand lines can be drawn on the stage using the pencil tool in the Flash toolbox. Lines will be drawn in the style, colour and thickness of the current stroke. When the pencil tool is selected a button appears in the toolbox options panel that can be clicked to offer three drawing modes. Drawing on the stage in ink mode leaves all the usual j agged edges that appear in freehand draw­ ing. The appearance of these lines is greatly enhanced if the smooth mode is used instead to remove the imperfections.

Basic steps 1 C l ic k o n the pencil

too l icon in the tool ­ box o r p ress [Y] .

2 C l i c k the b utton i n the o ptio n s panel to d is­ p l a y the modes .

3 C l ic k o n the smooth mode o ption .

4 C l i c k a n d d ra g to

d raw a p review l i ne o n the stage.

5 Rel ease the mouse

button at the end positio n of the l i ne.

D A l i ne is d rawn i n the

cu rrent stroke col o u r, style a n d thickn ess a n d jagged edges a re s moothed out.

Take note The toiRfet changes te a peRoil ever the stage whea the pencil tool Is selected Ia the teollle1. 18

Basic steps

[}� c9

1 C l ic k o n the penci l

tool icon i n the too l box o r p ress [Y] .

2 C l i c k the b utton i n the o ptions pa nel to disp l ay the modes .

3 C l ick o n t h e stra i g hten mode o pti o n .

4 C l i c k a n d d ra g to

d raw a p review l i ne o n the stag e .

5 Rel ease the mouse

b utton at the end position of the l i n e .

Straighten i n g penci l l ines The straighten mode option that is available when the pencil tool is selected provides an easy way to refine freehand lines with j agged edges into straight lines or regular arcs. Additionally this is an intelligent function that automatically evaluates the drawn line to see if it is close to being a rectangle or oval shape. If so, Flash will transform the freehand drawn line into a rectangle or oval of the same approximate dimensions and with the current stroke settings.

C l ick the penci l too l

C l ick t h e o pti o n

D A l i n e i s d rawn i n t h e cu rrent stroke col o u r, style and th ickness a n d jagged edges a re stra ig hte n ed out.

Take note 1\e ill ustrated example recognises the freehand u.-e at a rectangle ..... though the line ends do not join together. 19

Changing lines The arrow tool that is used to select elements can also be used to modify lines. Placing the arrow tool at the end of a line causes the cursor to change and allows the end point of the line to be dragged to a new position. Similarly placing the cursor along a line ' s length enables the line to be dragged into a curve.

Basic steps 1 C l ic k o n the l i ne tool

i con i n the tool box o r p ress [ N ] .

2 C l ick o n the stag e a n d d ra g t h e mouse to d raw a l i ne .

3 C l ick o n the a rrow

tool icon i n the tool ­ box o r p ress [V] .

4 C l ick o n the end of

the l i ne a n d d ra g the m ouse to repositio n t h e l i ne's end poi nt.

5 C l ic k o n the l i ne's

l e n gth and d ra g the m o use to bend the l i ne i nto a c u rve.

0 When the m ouse is released the l i ne i s d rawn with its new position a n d s h a pe .

Tip

-

Alto rase this teehaitt•• to modify shapet hf repotitiaoint points and heodi•t edtet. 20

Basic steps

Mod ify an existi ng l i ne

1 Select the l i n e with the

A selected existing line can be repositioned using the arrow tool and its appearance can be modified by changing the current stroke specifications to alter its colour, style and thickness.

a rrow too l by c l i c ki n g o n it.

2 Kee p the mouse b ut-

1 Select t h e l i n e

ton p ressed d own a n d d ra g the l i ne to a n ew l ocation .

3 C l ick o n the button at

the bottom of the ed itor wi n d ow to open the i nfo wi n d ow.

4 C l ic k o n the stroke ta b

3 O pe n the i nfo wi n d ow

to d is p l ay the cu rrent stroke setti n g s .

5 C l ick o n the style

b utton then pick a style from the d ro p d own men u .

5 C h a n g e the style

6 C l ic k the col o u r b l oc k t h e n choose a col o u r fro m the swatch .

7 C l ick the size b utton

then use the s l i d e r to set the l i n e th ickness .

8 C l ick o n the stag e to deselect the l i ne .

0 When deselected the l i ne wi l l h ave the n ew stroke specificatio n s .

7 C h a n g e the th ickness

8 C l ick the stag e

21

Drawing curves

Basic steps

The pen tool draws by creating a series of points that are j oined together to form a line. A simple click on the stage with the pen tool adds a point to the line series. A click and drag adds a point that has adjustable features called bezier handles which allow the line from a previous point to be curved.

1 Select the pen too l by

c l icki n g the icon or by p ress i n g [ P] .

2 C l ick o n the stag e to set a fi rst point.

3 C l ick o n the stag e at a

seco n d poi nt a n d keep the mouse b utton p ressed d own - a stra i g ht p review l i ne to the fi rst poi nt a ppea rs .

4 D ra g the mouse to

cu rve the p review l i n e t o t h e fi rst poi nt.

5 C l ick o n the stag e to

a d d a n other poi nt t h e p review l i n e j o i n s t o t h e p revious poi nt conti n u i ng the c u rve .

6 C l ick a n other too l o r p ress [Ctri + Sh ift + A] to d esel ect the l i n e .

D When d eselected the fi nished l i n e i s d rawn .

22

Basic steps

f}� oO

1 C l ick the icon o r p ress

[A] to use the s u bselect too l .

2 C l ick o n a l i ne to

Changing curves The subselect tool in the toolbox can be used to modify existing lines. When a line is selected with the subselect tool that line reverts to its preview state. Points and bezier handles can then be adjusted to change the shape of the line.

select it.

3 C l ick a poi nt to revea l its bezier h a n d les.

4 C l ick and d ra g the

h a nd le to c h a n g e the c u rve of the l i ne .

5 C l ick o n a poi nt to select it.

6 D ra g the point to

c h a nge its positi o n .

7 C l ick a nother tool o r p ress [Ctri + Sh ift + A] to d eselect the l i n e .

0 When deselected the fi n ished l i n e i s d rawn .

Tip elick • selected line with the fJen tool fo add I fJOhlf. teleot a �oiat thea �rets (Delete] to remove it.

23

Summary 0 Stroke a n d fi l l col o u rs ca n be picked from the

swatch that a ppe a rs when you c l ick e ither of the colo u r b locks in the too l box C o l o rs p a n e l .

0 More co l o u rs a re ava i l a b l e i n the m ixer d i a l og box. 0 The m ixer a n d stroke d i a logs ca n be opened from

the too l b a r at the bottom of the ed itor wi ndow.

0 Stroke style, col o u r a n d thickness ca n be specified i n

the stroke d i a log box.

0 The l i ne tool i s u sed to d raw stra i g ht l i nes. 0 The penci l too l i s used to d raw free h a n d l i nes. 0 The penci l too l has u sefu l o ption m odes to �mooth

o r stra ig hten the l i n es that it d raws.

0 The a rrow too l ca n be used to bend exi sti n g l i n es

a n d repositio n thei r e n d poi nts.

0

Existi n g l i nes ca n a lso be mod ified by redefi n i ng the i r stroke setti n g s i n the stroke wi n d ow.

0 The pen tool ca n d raw l i n es by creati n g a series of

poi nts to be joi ned together.

0

Bezier h a n d l es ca n ben d the l i nes between poi nts.

0 The su bsel ect too l ca n be used to a d j u st the poi nts a n d h a n d les i n a n existi n g l i ne .

24

3 Painting in Flash Filling with colour

Brushing colour Pouring ink

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

26

. . . . . . . . . . . . . 28

.

.

.

.

.

.

.

.

.

.

.

.

.

.

31

.

.

.

.

.

.

.

.

.

.

.

.

.

32

Working with shapes .

.

.

Erasing graphics

Summary

.

.

.

.

.

.

.

. . . . . . . . . 34 .

.

.

.

.

.

.

.

.

38

Fil ling ith colour Lines that have been drawn into joined-up shapes can be filled with colour using the paint bucket tool. The shape will be filled with the currently selected fill colour that is displayed in the fill colour block of the toolbox Color panel.

Basic steps 1 C l ick o n the p a i nt

bucket too l icon o r p ress [ K] .

2 C l ick o n the fi l l co l o u r b l ock i n t h e C o l o rs p a n e l to open the swatch d i a log box.

3 C l ick o n a col o u r to

set the n ew fi l l col o u r .

4 C l ick i nside a s h a pe to fi l l with the selected col o u r.

5 C l ick o n the fi l l co l o u r b l ock a n d choose a nother col o u r from the swatch .

6 C l ick i nside s h a pes to fi l l each with a n ewly selected fi l l co l o u r .

0 The pa i nt bucket fi l ls each s h a pe with the c u rrent fi l l col o u r.

Takenote

f�

� The paint bucket fill s from the extreme tip of the cursor's paint drip. 26

Basic steps

Changing fi l ls

1 C l ick the pa i nt bucket

A shape that has been drawn freehand on the stage may have small gaps between lines so that the shape is not exactly joined. Flash can still fill this shape using the paint bucket gap options. These allow you to specify the size of permissible gap when attempting to apply a fill with the paint bucket tool. If the gap is too big the fill will not be applied. Often this can be overcome by zooming out to temporarily reduce the physical gap size.

icon or p ress [ K] .

2 C l ick the g a ps button in the o ptions p a n e l .

3 C l ick o n the requi red g a p setti n g .

4 C l ick o n the s h a pe to attem pt to fi l l it.

1 C l ic k the pa i nt bucket

5 If necessa ry zoo m out - click the zoom too l o r p ress [Z] .

C l ic k the g a ps b utton

6 C l ick o n zoom out (-)

3 C hoose a g a ps setti n g

then click o n the stag e t o zoo m t o 50%.

7 Reselect the p a i nt

bucket too l a n d try a g a i n to a p p ly the fi l l .

4 Attem pt a fi l l

8 F i na l ly zoom i n ( + ) to retu rn to 100% size.

5 C l ic k zoom

0 The s h a pe wi l l be

fi l led across the g a p .

6 C l ick zoo m out

8 Zoo m i n 27

Brushing colour

Basic steps

The Flash brush tool provides a means to paint freehand strokes of colour on the stage. It is important to note that these brush strokes are purely fill elements and do not have any stroke component. The brush size and shape can be specified using the brush options which are displayed in the toolbox options panel when the brush tool is selected.

1 C l ick o n the brush tool i co n in the tool box or p ress [B] .

2 C l ic k the pa i nt m o d es b utton i n the o ptio n s panel t o d is p l ay t h e pa i nt mode o pti o n s .

3 C l ick o n the pa i nt

n o rm a l o pti o n to use the brush norm a l ly.

4 C l ick o n the size

b utton to d is p l ay a m e n u of b ru sh sizes .

5 C l ick o n the d es i red

brush size to select it.

6 C l ic k o n the s h a pe butto n to d is play a m e n u of ava i l a b l e b rush s h a pes .

7 C l ick o n the d es i red

brush s h a pe to select it to pa i nt with .

0 The brush too l i s n ow •

•

•

• 28

I / /

ready to pai nt i n its n o rm a l mode u s i n g t h e s pecified size a n d s h a pe o f brush .

Basic steps

Usi ng the brush

1 C l ick o n the brush tool

To paint with the brush tool just click on the stage and drag the mouse to create a brush stroke. The brush will paint using the current fill colour, paint mode, brush size and brush shape.

o r p ress [B] .

2 Set the des i red col o u r, b rush size a n d s h a p e .

3 C l ick o n the stag e a n d h o l d d own t h e mouse button .

4 D ra g the m ouse to

C l ick the brush too l

2 Set col o u r, size

&

s h a pe

p a i nt a brush stroke .

5 C h a n g e the col o u r,

b r u s h size a n d s h a p e .

3 C l ick o n the stag e

6 C l ic k o n the stag e a n d h o l d d own the mouse butto n .

7 D rag the mouse to

pa i nt a nother brush stroke .

D The secon d brush stroke is p a i nted o n top o f t h e fi rst o n e .

5 Set n ew col o u r, size

&

s h a pe

D ra g t h e mous

29

Selective pai nting

Basic steps

The brush tool has some useful options that allow painting to be confined to selected parts ofthe stage or existing graphic. These options are available from the menu that is displayed by clicking the paint button in the toolbox options panel. The paint behind mode allows painting behind an existing graphic .

1 C l ick o n the brush too l o r p ress [B] .

2 Set the d es i red col o u r, b rush size a n d s h a pe .

3 C l ic k o n the pai nt

b utton i n the o ptio n s p a n e l t o d is p l ay t h e pa i nt modes men u .

4 C l ick o n the p a i nt beh i n d mode.

5 C l ick o n the stag e at the sta rti n g poi nt.

6 D ra g the mouse over the i n itia l g ra ph i c to p a i nt o n the sta g e .

7 Rel ease t h e m o u se

b utton to stop pa i nti n g a n d revea l the g ra ph i c i n front o f t h e pa i nt.

Tip \'ta can use the paint Inside tptlon to paint •tdf ll•tide the ahape where that btQsh stroke •••1••· 30

Basic steps 1 C l ick o n the recta n g l e tool icon o r p ress [ R] .

2 Cl ick the n o col o u r

butto n s o that n o stroke wi l l be a p p l i ed .

3 C l ick a n d d ra g o n the stage to d raw a fi rst recta n g l e .

Pouring ink Overlapping unstroked fill shapes can be combined into a single shape by adding an overall stroke with the ink bottle tool. This can create interesting possibilities when designing in Flash. Unstroked fill shapes can be added to the stage using the rectangle tool or oval tool with the current Stroke set to have no colour. The ink bottle tool can then apply a uniform stroke around the overlapping fill shapes in just a single action.

4 C l ick a n d d ra g o n the

stage to d raw a n other recta n g l e overl a p p i n g t h e fi rst one.

5 C l ick o n the i n k bottle too l or p ress [S] .

3 Add a recta n g l

6 C h a nge the stroke

col o u r from the n o col o u r setti n g t o a d es i red col o u r .

7 C l ick a nywh e re o n these overl a p p i n g recta n g les.

0 The i n k bottle tool creates a stroke o utl i ne a ro u n d the com bi ned recta n g l es usi ng the cu rrent stro ke setti ngs for col o u r, thickness a n d style.

4 Ove rl a p a recta n g l e 5 C l i c k the i n k bottle tool

7 C l ick i n the s h a pe 31

ra�in_g_g��ph ics The eraser tool is used to erase graphics from the stage and works in a similar manner to the brush tool. The eraser has mode options that mirror those of the brush tool and are used in the same way. When the eraser tool is used in its normal mode it erases from the stage all lines and fills that it passes over.

Basic steps 1 C l ick o n the eraser

tool icon o r press [ E] .

2 C l ick o n the s h a pe

b utton then choose the eraser size a n d s h a pe fro m t h e m en u .

3 C l ick the e raser

m odes button then c l i ck o n the erase n o rma l o pti o n .

4 C l ick o n the stag e at the sta rti n g poi nt.

5 Keep the mouse b ut-

ton p ressed d own a n d ru b t h e m ouse from side to side l i ke you wou l d with a rea l e raser.

0 Al l pa rts of the l i nes

a nd fi l ls that a re in the path of the eraser too l a re n ow removed .

0

32

I f you h ave accid e n ta l ly era sed a g ra p h i c you ca n u n d o the e raser operatio n by c l icki n g E d it > U nd o o n t h e tool ba r, o r j u st by p ress i n g [Ctri + Z] .

Basic steps

r�:1

tihl R

1 U se the a rrow too l o r

other selectio n m ethod to select the e l e m e nts that a re to be e rased .

2 C l ick o n the eraser

tool icon o r p ress [E] .

3 C l ick the eraser

Using the E raser Faucet W Uatlo twiee te tecoter the layer. 51

Hiding l ayers

Basic steps

The layers panel can be used to toggle the visibility of all layers by clicking the eye icon. Individual layers can be hidden and revealed by clicking the dot on their label below the eye icon.

1 C l ick o n the eye icon

in the l ayers panel to . h i d e a l l l ayers - the d ots below the eye icon on each l a be l c h a n g e t o c rosses to sig n ify that the l ayers a re h i d d e n .

2 C l ick the eye icon C l ic k to s h o

when a l l l ayers a re h idden to s h ow them o n ce m o re - the c rosses o n each l a be l c h a n g e b a c k t o d ots to sig n ify that the layers a re revea led .

3 C l ick the d ot below

the eye icon o n a l ayer l a bel to h i d e that l ayer - that d ot cha ng es to a cross to sig n ify that the l ayer is h i d d e n .

4 C l ick the cross below

the eye icon o n a l ayer l a bel to s h ow that l ayer o n ce m o re - the cross c h a nges back to a d ot to sig n ify that the l ayer is revea led .

52

Basic steps

��

1 C l ick o n the lock icon

in the l ayers p a n e l to lock a l l l ayers - the d ots o n each l ayer l a be l below the lock i co n change to sig n ify that each l ayer is safely locked .

2 C l ick o n the o ut l i n es

H a n d l i n g m utiple layers When working with several overlapping layers it is advisable to lock those layers containing finished graphics so that they cannot be accidentally altered. Click on the lock icon in the layers panel to lock all layers. To lock individual layers click on the dot below the lock icon on that layer' s label. It is sometimes helpful for clarity to view the graphics as just outlines . Click on the outlines icon in the layers panel to change all layers to outlines. To view individual layers as outlines click on the square below the outlines icon on that layer' s label.

icon i n the l ayers panel to s h ow a l l g ra p h i cs a s outl i n es the fi l led sq u a res below the o utl i n es icon c h a n g e to e m pty sq u a res to sig n ify that each l ayer i s o n ly s h owi n g o ut l i nes.

3 C l ick on the i n d ivid u a l o utl i n es icon o n a ny l ayer l a be l to d is p l ay fu l l g ra p h i cs a ga i n o n that l ayer.

Or C l ick o n the i n d ivi d u a l l ock icon o n a ny l ayer l a be l to u n l oc k the g ra p h ics o n that l ayer.

53

Change the stacki ng order

Basic steps

Using layers means that the position o fgraphics on the stage can be changed in three dimensions. As usual the position can be changed from left to right and from top to bottom by dragging the graphic with the arrow tool. Also the position can be changed from front to back by rearranging the stacking order of the layers.

1 C l i c k o n the l a be l of

The labels in the layers panel follow the current stacking order. So the label at the bottom of the panel belongs to the bottom layer on the stage with higher layers shown above. To change the stacking order just drag a label to a new position and the layers will be rearranged accordingly.

2 D ra g the l a be l 3 Rel ease t h e mouse

54

the l ayer to be m oved .

2 H o l d d own the mouse a n d d ra g the l a be l to a n ew positio n i n the stacki n g o rder.

3 Rel ease the mouse to com p l ete the m ove .

0 The stacki n g o rd e r of

the l ayers is n ow rea rra n g ed so that g ra p h i cs o n hig her l ayers wi l l overl a p those o n l ower l ayers.

Basic steps 1 C l ick o n the d ots

u nder the eye icon to h i d e the u pper l ayers.

2 D ra g the a rrow too l to

Moving between layers Graphics can be moved between layers using a cut'n'paste method to cut them from one layer then paste onto another layer. This is useful to promote a graphic to a higher level in the stacking order so changing the way that other graphics overlap.

select the elements to be m oved .

3 P ress [Ctri + G] to

g ro u p the selected elements .

4 Press [Ctri + X] to cut the selected g ro u p o nto t h e c l i p boa rd .

5 C l ick o n the d ots

u nder the eye i co n to s h ow the u pper l ayers.

· '·�,.·o

6 C l ick o n the top l ayer

:· . ..

l a be l to m a ke it the a ctive l ayer.

7 Press [Ctri + S h ift + V] to paste the selected g ro u p from the c l i p boa rd .

-�

� .,

.�

' '

'

• ' ."�' '"

Press [Ctrl +

0 The g ra p h i c e l e me nts

that were selected a nd g ro u ped o n the bottom l ayer a re n ow pasted o nto the top l ayer at the i r orig i n a l l ocation o n t h e sta g e .

7 Press [Ctri + Sh ift+V] 55

dding specia l layers Guide layers hold graphic content that merely helps position items on the stage. A normal guide layer can contain lines or shapes to be used as points of reference when drawing on the stage. A layer can be made into a normal guide layer using the context menu that appears when you right-click on a layer label. Another type of guide layer is used to guide the motion of animated obj ects along a path. These motion guide layers can contain just a single line that is the animation path to follow. Motion guide layers can be quickly added using the Add Guide Layer button in the Layers panel.

Basic steps 1 C l ick o n the l a be l of

the l ayer to which you wa nt to a d d a m otio n g u ide l ayer.

2 C l ick the Add G u i d e

Layer button t o a d d a m oti o n g u id e l ayer to the selected l ayer.

3 Rig ht-d ick o n the l a be l o f t h e l ayer you wa nt to m a ke i nto a n o rm a l g u ide l ayer.

4 C l ick o n the G u i d e

item i n t h e context m e n u to convert the selected l ayer i nto a n o rm a l g u i d e l ayer.

0 The m oti o n g ui d e l ayer i s a d d ed t o t h e

C l ick the b utton

layers p a n e l a s a sepa rate l ayer l a be l .

0 The icon o n the l ayer

that has been con ­ verted cha n g es to denote that it is n ow a n o rm a l g u i d e l ayer .

•fil.llt.. . . .

..

56

.

Basic steps 1 C l ick the Add Laye r 2

Ma ki n g a mask laye r

I I !

A mask layer can be locked to another layer permitting only a button to create a n ew part of that layer to be visible. Any parts ofthe mask layer that l l ayer. contain a fill element act as a window to allow the layer below Rig ht c l i ck the l a be l to 1 to show through. To create a mask, first add a new layer then right click its label and choose Mask from the context menu. open a context men u .

3 C l ick the Mask item

o n the m e n u to m a ke the l ayer i nto a mask l ayer.

4 C l ick the lock icon to

� I II

I

I

I

u n l ock both l ayers .

5 Pa i nt a ny type of fi l l

e l ement o n the mask l ayer as a wi n d ow.

6 Fi n a l ly c l i ck the lock . . 1con a g a m .

0 The mask l ayer a n d

the ori g i n a l l ayer a re locked tog ether O n ly that pa rt of the orig i n a l l ayer that i s covered b y fi l l o n the mask l ayer is visi b l e .

Guide Add Moticm llulde;

57

Summary 0

Layers a l l ow g ra p h i cs to ove rl a p without com i n g i nto d i rect contact with each other.

0

Layers ca n be a d d e d , o r d e l eted , i n the laye rs p a n e l o f t h e ed itor wi n d ow.

0 The eye icon i n the layers p a n e l contro l s the visi b i l ity

of each l ayer.

0

Layers ca n be locked , or u n l oc ked , with the lock icon in the l ayers p a n e l .

0 The g ra p h i cs o n each l ayer ca n be s h own i n outl i n e form o n ly, u s i n g t h e outl i n e i c o n i n t h e l ayers pa nel . 0

Layer l a be l s i n the l ayers p a n e l reflect the o rder i n wh ich the layers a re stacked a n d the o rd e r ca n be cha nged by rea rra n g i n g the l a be l s .

0 A l ayer's g ra p h ics ove rl a p those o n l ower l ayers . 0 The cut' n ' pa ste tec h n i q ue i s used to m ove g ra p h i cs between l ayers . 0

Normal g u i d e l ayers a re usefu l to a i d positi o n i n g of elements on othe r l ayers .

0 Motion g u i d e laye rs conta i n a s i n g l e l i ne m a rki n g a

path to be fol l owed by a n a n i mati o n .

0 Mask l ayers a re used to restrict h ow m uch of the

locked l ayer below is visi b l e .

58

6 Saving g ra phics The Flash library . . . . . . . . . . . . . 60 Using symbol instances

Modifying instances Editing symbols Summary

.

.

.

.

.

. . . . . . . 64

.

. . . . . . . . . . 65

.

.

.

.

.

.

.

.

.

.

.

.

.

.

66

.

.

.

.

.

.

.

.

.

.

.

.

.

.

68

Basic steps Each Flash document is provided with a library which may be used to store components used in that movie. The library can store graphics, sounds, bitmaps, text and even entire animations such as rollover buttons (see page 1 1 4). The advantage of storing these assets in a library is that one or more copies of any item stored in the library can be easily added to a movie. This is very useful when creating animations where the same graphic needs to be appear several times . The term ' symbol ' is used to describe a graphic that has been stored in a library and each copy ofthe symbol is called an ' instance ' . Contents of the document library are shown in the library window that can be opened by clicking on the Show Library button in the toolbar at the bottom of the editor window.

1 C l ick the Show Li b ra ry button o n the too l b a r a t t h e bottom of the ed itor wi n d ow, or p ress [Ctrl + L] .

0 The l i b ra ry wi n d ow

opens s h owi n g a ny sym bols that h ave been a dd ed to the l i b ra ry for that docu­ ment. I f n o sym bols have been a dded the wi ndow wi l l be e m pty.

Tip Cli ck the Wide iliew button to Library

-

M oviel

enlarge

the

li b ra ry wi ndow.

Em

Preview

Take note Using symbol instan ces

Sym bol

a rrow v1ew

is

a

60

graphics while keeping the mot1ie

to reuse still

New fol d e r

tlery efficient way

file size sma ll .

Basic steps

\1:0\)¢:11

Jo¢� ()

1 Use the a rrow too l to select the g ra ph i c to store as a Sym bol .

2 Press [ F8] to open the Sym bol Properties d i a l og box.

Add a sym bol to the l i bra ry a 4% a& ilillt Ml±•�.m zmJs&U WJE

wn: &!>IDI & w: �w Url!mlli!

To store a graphic from the stage in the library requires that it is first converted into a symbol. Select the graphic to be stored then press [F8] to open the Symbol Properties dialog box. Specify a name and type of symbol then press the OK button to convert the graphic to a symbol. The stored symbol will then be available from the library window.

3 Type a n a m e for the new sym bol i n the N a me text fie l d .

4 C l ick o n the rad i o

button t o c reate a static g ra ph i c sym bol .

5 C l ick the O K button to create the sym bol .

0 The Sym bol Properties

d i a l og box c loses a nd the new sym bol a p ­ pea rs i n the l i b ra ry wi n d ow.

0 The selected g ra p h i c

o n t h e stag e g a i ns a cross h a i r at its centre poi nt to denote that it i s n ow an i nsta n ce of the stored sym bol .

61

Ma ke a l i b ra ry folder

Basic steps

Symbols in the library window can b e put into folders to make it easier to work with larger numbers of them. The New Folder button creates a new folder in the library window that can be named to represent the symbols it contains. Drag a symbol icon onto the folder icon to add that symbol to the folder.

1 C l ick the N ew Fol d e r button .

2 Type a m ea n i n gfu l n a m e for the new fol der.

3 C l ick on a sym bol a nd d ra g it over the fol d er icon to m ove it.

0 When the m ouse

button i s released the sym bol is m oved i nto the folder. The sym bol icon is depicted offset to sig n ify the sym bol is n ow i nside a fol d er.

�

•

S poon

Utensib

r.-.-.-.·-.. ·. ·.· .J�r.-.- �-�_-;_�.· .· : .·: .- .· ..-.· .-.·.- .- .·. ·: .·J

62

Basic steps

B� CJO

1 C l ic k o n a sym bol i n

the l i b ra ry wi n d ow to select it for d e l eti o n .

2 C l ick the trash i co n

Delete button i n the l i b ra ry wi n d ow.

3

Deleting symbols Symbols can be deleted from the library using the Delete button depicted by the trash icon. It is important to note that when a symbol is deleted all instances ofthat symbol are removed from the stage. This process cannot be undone so Flash presents a warning dialog box to remind you and asks for a confirmation before making the deletion.

I f you a re s u re that this sym bol a n d a l l its i nsta nces a re to be d e l eted , c l i c k the Delete button in the Delete d i a log box.

0 The deleted sym bol i s

rem oved from t h e l i bra ry a n d a l l i n sta n ces of i t a re rem oved from the sta g e .

Take note deleted. tymhtft caonet be tece\tered. Ooee

63

a nces Graphics that are stored as symbols in the library can be quickly replicated on the stage. Click on the library preview window of the required graphic, or its label, and drag the mouse onto the stage. This will add an instance of that symbol on the stage and can be used repeatedly to add multiple instances of that symbol.

Basic steps 1

Press [Ctrl + L] to open the l i b ra ry then c l ick on a sym bol l a be l the sym bol a p pea rs i n the preview wi n d ow.

2 C l ick o n the sym bol i n the preview wi n d ow.

3 H o l d d own the m ouse

button a n d d ra g the m ouse o nto the sta g e .

4 Rel ease the mouse

button to see a n i n sta nce of the sym bol a p pea r o n the sta g e .

Or

5 C l ick a sym bol l a be l i n the l i b ra ry.

6 H o l d d own the m ouse

button a n d d ra g the m ouse o nto the sta g e .

7 Rel ease the m ouse

button to see an i n sta nce o f t h e sym bol a p pea r o n the sta g e .

0 Where i n sta n ces

overl a p those a d d ed l ast wi l l be u p permost.

Basic steps

�:l E0 � rP

1 C l ick o n the i nsta n ce

that is to be mod ified .

2 C l ick Wi n d ow >

Pa nels > Effect o n the too l b a r menu o ptio n s t o l a u nch the Effect wi n d ow.

3 C l ick the d rop-down menu button to d i s ­ p l ay t h e m en u .

4 C l ick the m e n u o ptio n t o chose h ow t h e i n sta n ce s h o u l d be mod ified - the Al p h a o ption c h a n g es tra ns­ pa rency.

5 D ra g the s l i d e r to

mod ify the tra nspa r­ ency va l u e of the selected i nsta nce.

0 The overa l l a p pea r­

a nce of the selected i n sta n ce c h a n g es a s t h e s l i der i s m oved .

0 This n ew a p pea ra nce

is reta i ned when the i n sta n ce i s deselected .

ces Instances can be scaled and rotated just like any other graphic element. Additionally their appearance can be modified to change the overall colour and transparency using the settings in the effect dialog box. This can be opened from the main Flash toolbar by clicking Window > Panels > Effect. Changing the transparency value of an instance can be used in an animated sequence to make a graphic fade-in or fade-out.

Editing s mbols Symbol editing mode can be used to modify any syrnbol and the changes will instantly be made to any instances of that symbol. The Edit Symbols and Edit Scene buttons at the top right corner ofthe editor window can be used to enter and exit symbol editing mode. When a symbol has been chosen for editing it can be ungrouped to allow changes to be made to its elements. Choos­ ing a scene from the Edit Scene button menu returns the editor window to normal mode showing changes that have been made.

Basic steps 1 C l i ck o n the E d it

Sym bols butto n , o r p ress [Ctri + E] t o e nter sym bol ed iti n g mode.

2 C l ick on a sym bol to

be ed ited a n d this wi l l a p pea r i n the centre of the ed ito r wi n d ow.

3 P ress [Ctrl + B] to

b rea k a pa rt the g ro u ped sym bol .

4 C lick o n a b l a n k a rea of the stage to d eselect a l l elements .

5 Modify the g ra p h i c

e l e ments a s req u i red - i n this case c h a n g e a fi l l co l o u r u s i n g t h e pa i nt bucket tool .

6 C l ick the E d it Sce n e

b utto n t o d i s p l ay a m e n u of scenes i n the cu rrent m ovie .

7 C l ic k the orig i n a l

scene item t o retu rn to norma l ed iti n g m o d e .

0 The sym bol a n d a l l its

i nsta nces n ow a p pea r i n mod ified form .

66

Basic steps

Duplicating symbols

1 Select a n i n sta n ce o n

A duplicate copy ofan existing symbol can be easily made using the Duplicate Symbol button in the Instance dialog box. This second symbol could then be modified to quickly create a variation to the original symbol. The Instance window can be launched by pressing [Ctrl+I] .

the stage o f a sym bol that you wa nt to d u pl i ­ cate.

2 Press [Ctrl + l] to

l a u nch the I nsta n ce wi n d ow.

3 C l ick the D u p l i cate

Sym bol b utton i n the I nsta n ce wi n d ow to open the Sym bol N a m e d i a log box.

4 Accept the s u g gested

na me, or type a nother n a m e i nto the Sym bol N a me text fie l d , then press the O K button .

0 A d u p l icate sym bol is

created and a ppea rs i n the l i b ra ry wi n d ow with the g iven n a m e .

Tip Swap Symbol button swap one symbol for another.

Click on the window to

Click on the window to

open

Edit

Symbol

in the I nstance

button in the I nsta nce

symbol editing mode.

67

�Url]_ma_ry.. 0 Every F l a s h docu me nt h a s a l i b ra ry that ca n be used

to store g ra p h ics, sou nds, bitm a ps, text a n d enti re a n i mations for that m ovie.

0 A g ra p h ic stored i n the l i b ra ry i s ca l led a sym bo l

a nd copies of the sym bol a re ca l led i n sta n ces .

0

[F8] opens the Sym bol P roperties d i a log which is u sed to convert a g ra p h i c to a sym bol .

0 Stored sym bols ca n be o rg a n ised i nto fol ders i n the

l i bra ry wi n d ow to m a ke them easier to fi n d .

0 Sym bol s ca n be d e l eted usi n g the l i b ra ry's Delete

b utton a n d once d e l eted they ca n n ot be recovered .

0 Deleti ng a sym bol a lso d e l etes a l l i nsta n ces of that

sym bol from the sta g e .

0

I nsta nces of a sym bol a re created o n the stage by d ra g g i n g from the l i b ra ry wi n d ow.

0

I nd ivi d u a l i nsta n ces ca n be sca led a n d rotated .

0 The Effect wi n d ow ca n be used to a d j u st the overa l l col o u r o r tra n s pa ren cy of a n i nsta nce. 0 A sym bol ca n be ed ited i n sym bol ed iti n g mode. 0

Ed iti ng a sym bol i nsta ntly c h a n g es a l l i nsta n ces of that sym bo l on the sta g e .

0 Sym bo l s ca n be d u p l icated usi n g the D u p l icate

Sym bol button i n the I n sta nce wi n d ow.

68

7 U sing other graphics Importing g raphics

Converting bitmaps

.

.

. . . . . . . . . . 72

Importing animations Bitmaps

as

Summary

fills .

.

.

.

70

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

74

.

. . . . . . . . . . . . . 76

.

.

.

.

.

.

.

.

.

.

.

.

.

.

78

Importing raphics

Basic steps

Flash graphics are stored as a series of shapes and fills. This type I l of graphic is called a vector graphic. Vector graphics are more I i efficient than bitmaps which need to store information about I lli every single pixel in the graphic. Also vector graphics can be scaled up or down without loss of clarity, unlike bitmaps.

1 C l ic k F i l e > I m port o n

Flash can use vector graphics that have been created in other popular vector graphic applications such as Macromedia Free­ hand and Adobe Illustrator as well as Metafile (WMF) and Enhanced Metafile (EMF) formats . To select a vector file to import into a Flash movie, click Import on the toolbar' s File menu or press the [Ctrl+R] .

2 N avigate to the fi l e to

••

I mport

cotton. ai

cotton. emf

i:��:tf.�:6.J8:�i

I I

the main Flash tool b a r, o r p ress [Ctri + R] , to open the I m port d i a log box.

be i m po rted a n d c l ick o n it to select it.

3 C l ick O pen i n the

I m port d i a log box.

0 The chosen vector g ra ph i c is a d d ed at the centre of the stag e a n d on a n ew l ayer.

cotton. wmf

Take note

fWl

�

provides special support for im­ porting Freehand files. An additional Freehand Import dialog box opens to allow further control of how the gra phic will appear on the Stage. M a c ro med i a

70

Basic steps

I mporting bitma ps

1 C l ick F i l e > I m port o n

Flash can import bitmap graphics in the popular file formats of GIF, JPG, BMP and PNG. This allows you to use your favourite graphics application to create a non-vector graphic for use in Flash. If imported GIF or PNG graphics include any transparent areas, Flash will preserve that transparency in the graphic that is placed on the stage. To select a bitmap file to import into a Flash movie click File > Import on the toolbar or press [Ctrl+R] .

the main Flash tool ba r, o r p ress [Ctrl + R] , to open the I m port d i a l og box.

2 N avigate to the fi l e to

be i m po rted a n d d ick o n it to select it.

3 C l ick Open i n the

I m port d i a log box.

0 The chosen bitm a p

g ra ph i c i s a dded a t the centre o f the stage o n the cu rrent l ayer a n d its sym bol i s a dded t o the Li b ra ry.

diablo. bmp

diablo. gif

Take note A• ••eoial additional hnpott dialog box opens to prot�lde extra set­ tings when importiog bitmaps It the PM& file format that is fa11ourecl l»f Macromeclia's Fife

..

werks appUeatioa.

71

g bitmaps 1

� mwwre �

m �

rn rurn ��

� ll�g;; mm �

� �

Basic steps

'ti�Wmm l*

Imported graphics can be converted into vector graphics so they can be modified in Flash. With an imported bitmap selected on the stage, click Modify > Trace Bitmap on the Flash toolbar to open the Trace Bitmap dialog box. When you press the OK button in this dialog box the bitmap is converted into vector elements that can be modified like any other element. The former background area can then be deleted to leave the main graphic.

1 With the bitma p se-

l ected o n the stage, c l ick Mod ify > Trace B itm a p on the m a i n F l as h too l ba r.

2 C l ick O K to a ccept the d efa u lt trace setti n g s .

3 C l ick a b l a n k a rea of

the stage to deselect a l l selected e l e m e nts .

4 C l ick on the back-

g ro u n d e l e m e nts to select the m .

5 Press [Delete] to d e l ete those elements .

0 The g ra ph i c is n ow a vector with the former

backg ro u n d removed .

Basic steps

[}� p

1 C h a n g e the d efa u lt

setti n g of 1 00 to s pecify if F l as h s h o u l d b e m o re, o r l ess, d iscern i n g when g ro u p i n g col o u rs .

2 C h a n g e the d efa u lt

setti n g from 8 to s pecify h ow m a ny p ixels to i n c l u d e i n the col o u r ca l c u l ation .

3 C l ick the b utto n to

open the d ro p d own menu then choose h ow tig htly F l a s h s h o u l d d raw outl ines.

Trace Bitm a p dialog setti ngs The result of converting a bitmap t o a vector graphic i s not an exact duplication ofthe original graphic but an approximation of it with a set of vector shapes. Four settings in the Trace Bitmap dialog box control how accurately these shapes trace the colour areas in the original bitmap graphic. •

Color Threshold is a range of 1 to 500 that specifies how similar adjacent colours will be grouped together. Higher settings make Flash less discerning and produce fewer final vector shapes, so reducing the file size.

•

Minimum Area is a range of 1 to 1 , 000 that specifies how many pixels Flash should use when calculating the colour.

•

Curve Fit specifies how accurately Flash should draw the outline around the final vector shapes.

•

Comer Threshold specifies if F lash should draw sharp comers or more rounded comers.

4 C l i c k the b utto n to

open the d ro p d own menu then c hoose h ow s h a rply F l a s h s h o u l d d raw corners .

0 When the O K b utton i s p ressed i n the Trace B itm a p d i a l og box, F l a s h creates vector s h a pes rese m b l i n g the o ri g i n a l bitm a p usi n g the s pecified setti n g s .

73

I mporting animations Flash can import animated GIF s into the movie in much the same way as importing a single graphic in the GIF file format. Flash recreates the individual frame images in the original animation and places them in the timeline panel as separate frames on the current layer. Each ofthe frames are also added to the library as separate bitmap symbols.

Press [Ctr

Basic steps 1

Press [Ctrl + R] o r c l i c k F i l e > I m port o n t h e Flash too l b a r t o open the I m port d i a log box.

2 C l i c k o n the a n i mated G I F fi l e to select it.

3 C l i c k O pe n to i m port

the a n i mation fi l e g ra ph i cs i nto F l a s h the g ra ph i c of the fi rst fra me i n the a n i ma tion seq uence a p pea rs on the stag e .

4 N otice that the a n i matio n g ra p h ics a p pea r as i n d ivid u a l b itm a p sym bols i n the l i b ra ry a n d a lso a s i n d ivid u a l fra mes o n t h e cu rrent l ayer in the ti m e l i n e .

5 Press [Ctrl + E nter] to

test the m ovie a n d run the a n i mati o n .

0 You wi l l learn h ow to

create a n i mation s i n Flash i n the n ext c h a p ­ ter o f this book.

74

Basic steps

I m porting a seq uence of g ra ph i cs

1 C l ick o n the fi rst fi l e i n

Flash has an intelligent option to import a sequence of graphics to be used as an animation. If the files are within a single folder and have the same name with a different ending number, Flash recognises the sequence and offers to import them all together.

the series to select it.

2 C l ick Open to i m po rt

the g ra p h i c a n d see a d i a log box a ppea r a s ki n g if you wa nt to i m port the e nti re seq uence.

3 C l ick Yes to i m port the seq uence - the fi rst g ra ph i c a p pea rs o n t h e stage.

4 See the i nd ivi d u a l

b itm a p sym bols a p pea r i n t h e l i b ra ry a n d i n d ivid u a l fra mes a p pear i n the ti m e l i ne .

0 The seq uence ca n be

ru n a s an a n i mati o n .

75

B

a ps

I ts

Flash allows an imported bitmap to be used as a fill pattern in place of a solid fill colour. This creates a repeating tiled pattern of the bitmap in the filled area and can be applied with any ofthe tools that create a fill - oval, rectangle, paintbrush and paint bucket tools. The bitmap first needs to be broken apart, using [Ctrl+B] , then selected with the eyedropper tool. Once selected, the bitmap appears in the fill colour block in the toolbox Colors panel and can be painted onto the stage.

Basic steps 1

I m port a b itm a p to be used a s a fi l l pattern .

2 Press [Ctrl + B] to

b rea k a pa rt the i m ­ ported g ra ph i c .

3 C l i c k the eyed ropper

icon i n the tool box to select it.

4 C l i c k o n the i m po rted g ra ph i c on the Stag e to select t h e pattern .

5 C l ick the p a i nt b u c ket icon i n the tool box to select it. N otice that the fi l l col o u r b l ock d is p l ays the g ra p h i c pattern .

6 C l i c k o n a fi l l e l e m e nt to p a i nt it with the fi l l pattern .

Tip

-

A •ttma� can he set at a fill paftetn 11ith the arrew teel after it hat been &reken apatt 11d detelected.

76

Basic steps

Mod ifyi n g bitmap fi l ls

1 With the pa i nt bucket

Bitmap fills can be repositioned, scaled, rotated and skewed using the Transform Fill modifier that is available in the toolbox options panel whenever the paint bucket tool is selected. With the Transform Fill modifier selected, just click on a bitmap fill on the stage to produce a set of handles that can be dragged to manipulate the tiles within that fill. The centre handle can be used to drag the tile to a new location and the outer handles used to change the tile shape. All other tiles within the fill will repeat these modifications throughout the pattern.

tool selected, c l i c k o n t h e Tra nsfo rm F i l l b utton i n t h e too l box o ptions pa n e l .

2 C l ick o n a bitm a p fi l l

o n the stag e a n d see the h a n d l es a p pear.

3 C l ick a n d d ra g a

rou n d h a n d l e to rotate a l l the ti l es in the fi l l .

4 C l ick a n d d ra g a

sq u a re h a n d l e to sca l e o r skew a l l t h e ti l es i n the bitm a p fi l l .

D The who l e fi l l a d o pts

these mod ifications.

Take note modifier be used to prellent

The Lock Fill can

accidental fill changes.

Make sure that the Lock Fill

button

is NOT se­

lected before trying to use

the Transform Fill

modifier.

Summary 0 I ma g es that a re c reated o n the F l a s h stage a re saved a s vector g ra ph i cs . 0 Savi n g g ra p h i cs a s vectors i s fa r m o re efficient that savi ng them as bitm a ps . 0 Vector g ra p h i cs that h ave been created usi n g Adobe I l l u strator o r Macromedia F ree h a n d ca n be easi ly i m ported i nto F l a s h . 0 Bitm a p g ra p h ics i n G I F, J PG , BMP a n d P N G formats ca n a l so be i m po rted i nto F l a s h . 0 I m ported b itm a ps c a n be converted to vector g ra ph ­ i cs usi n g t h e Trace Bitm a p d i a log box. 0 The Trace Bitm a p setti n g s ca n s pecify p recisely h ow the vector s h a pes shou l d be created . 0 Com p l ete a n i m atio n s i n the G I F fi l e format ca n be i m ported i nto F l a s h . 0 A n u m bered seq uence of bitm a p g ra p h i cs ca n be i m ported i nto Flash to c reate an a n i m atio n . 0 Each a n i m ation fra me is s h own i n the ti m e l i n e . 0 [Ctrl + E nter] i s used to test a F l a s h m ovie a n d wi l l ru n a n a n i m ated seq uence of fra mes . 0 A bitm a p ca n be selected a s a fi l l pattern . 0 Bitm a p fi l ls ca n be mod ified u s i n g the Tra n sform F i l l mod ifier that i s a n ava i la b l e o ption when the pa i nt bucket too l i s selected .

78

8 Animating graphics """-------

The Flash ti meline Creating

.

keyframes

Handling frames

.

Animation preview Frame rate Summary

.

.

.

.

.

. . . . . . . . . . . 80 .

.

.

.

.

.

.

.

.

.

.

82

.

.

.

.

.

.

.

.

.

.

.

84

. . . . . . . . . . . 89

. . . . . . . . . . . . . . . . 92 .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

94

The Flash timeline Animation requires a number of images, that are each slightly different to one another, to be displayed in sequence. If they are shown fast enough the eye cannot tell that they are individual images, so the illusion of smooth motion is created. Each one of the images is called a ' frame' . Typical animations can have lots o f frames but these can be broken down into 'keyframes' , which define a new movement, and ' in-between' frames, that just display incremental changes between one keyframe and the next. Animation studios would historically employ their best artists to create keyframes then use lower-paid ones to laboriously produce the in-between frames . Flash uses the same process t o create animations but can automatically create the in-between frames for you. Each frame is shown in the Flash time line panel with keyframes denoted by a bullet point. When a Flash movie is played each of the frames in the time line will be displayed in succession at a specified rate. A red line indicates the current frame. To select a different frame just click on it in the timeline panel. !n-beiween frames

80

Current fra me

Take note Traditional animators �ainted separate parts of theit characters onto indhtidual transparent s h eets ea fled ee ls . These were then stacked cap to create the final image. This allowed them to quickly create further frames just by painting new eels only for the animating parts. The layers in Flash are used jud like these transparent eels. Blank frames

Basic steps

Ti meline fra me views

1 C l ick o n the g rey a rea

The time line panel can be detached from the editor window and the appearance of its frame scale can be customised using a special frame view menu. This menu is opened by clicking the button at the top right corner ofthe time line panel. Options allow the size of each frame segment to be increased and include a preview of the actual content of each keyframe. This is very useful to identify the content of each keyframe at a glance.

at the top of the ti m e l i n e p a n e l then d ra g the mouse to d etach the ti m e l i n e from t h e wi n d ow.

2 C l ick the b utton at the top right corner of the ti m e l i n e to open the fra me view m en u .

3 C l i c k o n the La rge

o ption i n the fra m e view men u .

4 C l ick o n the Preview o ption i n the fra m e v1ew men u .

0 The ti mel i n e fra me seg ments a re l a rg e r a nd show a p review of each keyfra m e .

T.'P

�W'� ,'1, '\�� ' k;:y'�

J \��,J� Use the Pre.,iew I n

o�tion to show a thumbnail pre"iew of the entire stage in each Context

keyfra me segment.

81

reati n

es

A blank keyframe can be added to the time line to provide a blank stage where a new image can be created in an animated se­ quence. All the frames between the new blank keyframe and the first keyframe automatically gain the image content of that first keyframe. The new keyframe is initially blank but will contain the new image that is created on the stage to form a new frame in the animation sequence. To insert a new blank keyframe first select a frame on the timeline then press [F7] . Alternatively press the right-hand mouse button and choose the Insert Blank Keyframe option from the context menu.

Basic steps 1 C l ic k o n a n em pty

fra m e i n the ti m e l i n e .

2 Rig ht-click o n the

ti m e l i n e to open a context m e n u .

3 C l ic k the I nsert B l a n k keyfra m e o pti o n .

Or

4 C l i c k o n a n e m pty

fra m e i n the ti m e l i n e t h e n press [ f 7] .

0 The chosen fra me g a i ns an outl i n e to m a rk it as a b l a n k keyfra m e . 0 Al l fra mes between the new b l a n k keyfra me a n d t h e fi rst keyfra me become g rey to d e n ote that they a re n ow i n between fra mes.

At:�.om P�e:l*

82

��

Basic steps

R

1 C l ick o n a n e m pty

fra me i n the ti m e l i n e .

2 Rig ht-cl ick then

c hoose the I nsert Keyfra me o ptio n from the context m e n u - o r j ust p ress [F6] .

Duplicating keyframes It is often useful to duplicate the previous keyframe content a new keyframe so that the graphic can be modified slightly to continue an animation sequence. To duplicate a keyframe use the Insert Keyframe option in the context menu or [F6] .

3 Mod ify the g ra p h i c o n

t h e stag e t o create the n ext fra me in the a n i m ation seq uence.

4 Press [Ctrl + E nter] to test the m ovi e .

0 T h e mod ified g ra p h i c

i s d is p layed o n the ti m e l i n e in the new keyfra m e .

0 The m ovie d i s p lays the

fra mes i n s uccessi o n t o a n i mate t h e fra m e g ra ph i cs .

Take note A new Flash

document

has hy defau lt one layer and one blank keyframe.

83

a nd l i n fra mes The frames that appear between keyframes have a special relationship with the first keyframe because they each display its content. Additionally they provide an area in which to create intermediate tweened animation between the first keyframe and the next, as detailed in the next chapter. These in-between frames can be added to the time line with [F5] or by choosing the Insert Frame option from the time line' s context menu.

Basic steps 1 O n a ti m e l i ne with two keyfra m es c l ick the fi rst keyfra m e .

2 Press [F5] .

Or

3 Rig ht-click to open the context menu then choose the I nsert F ra me o ption .

4 Repeat usi n g either

[F5] or the context m e n u to a d d fu rther fra mes.

0

New i n - between fra mes a re a d d ed to the ti m e l i n e after the selected keyfra m e .

Take note The final added fra me is shown with a square bullet point to denote that if is the last frame in a whole range of in­ between

84

frames.

��

Basic steps

p

1 To select a s i n g l e i n -

between fra m e fi rst position the c u rsor over a keyfra m e u n it.

2 Press [Ctrl] and keep it d own - see the cu rsor change from a h a n d t o a poi nter.

3 C l ick to select the req u i red fra m e .

0 The s i n g l e i n - betwee n

fra me is n ow selected .

Selecting fra mes The method of selecting frames in the timeline will vary depend­ ing on the type of frame and whether you want to select just a single frame or multiple frames: 8

To select a single empty frame, or a single keyframe, or a single final in-between frame, just click on it.

8

To select two empty frames and all the frames between them hold down [Shift] then click on the two frames.

8

To select a range of empty frames hold down [ Alt] while dragging across the frames.

In-between frames and their associated preceding keyframe are treated as a single unit that can be selected by clicking on any of the in-between frames. To select an individual in-between frame hold down [Ctrl] then click on it.

Tip The

appea ra nce

c u rsor

of the

in the ti meline

indicates the

selection that

type

of

can

be

made:

An entire keyframe unit can be selected with the

hand c u rsor. l ndhtidual frames

can

be selected when the c u rsor

pointer.

appears

as

a

85

Cut' n ' paste fra mes A

frame can be cut, or copied, from its position in the timeline then pasted into a new position using options in the timeline ' s context menu. Multiple frames can also be moved in this way by initially selecting a range of frames. Because Flash immediately replaces the contents of the current frame it is a good idea to always paste frames into empty frames or in-between frames. This prevents accidentally replacing the contents of a keyframe. Unwanted keyframes can be deleted separately when you are sure they are no longer required. If a keyframe is cut from the timeline, the next in-between frame will automatically become a keyframe with the same content as the cut keyframe.

Basic steps 1 C l i c k o n the keyfra me that you wa nt to cut.

2 Rig ht-cl ick on the

ti m e l i n e to open the context m en u .

3 C l i c k o n the C ut

F ra mes m e n u o ptio n t o c u t the selected keyfra m e o nto the c l i p boa rd .

0 The preview g ra ph i c

d isa ppea rs from the selected keyfra m e a n d t h e next i n - between fra me becomes a n ew keyfra m e with the sa me content.

4 C l ic k o n the e m pty

fra me or i n - between fra me where you wa nt to paste the g ra ph i c .

5 Rig ht-c l i c k to reopen

the context menu then select the Paste F ra m es m e n u o pti o n .

0 The contents of the

c l i p boa rd a re pasted i nto the selected fra me as a new keyfra m e .

86

Basic steps

��

1 C l ic k on a fra m e o r

keyfra me u n it that you wa nt to copy o r m ove a n d h o l d d own the mouse.

2 P ress and hold d own

[Ait] if you wa nt to copy the selecti o n d o n ot p ress [Ait] if you wa nt to m ove the selection .

3 D ra g the selectio n to

Drag'n'drop frames Flash allows frames to be dragged around the timeline to reposition a single frame or multiple frames. Also copies of an existing frame, or frames, can be dragged to a new location. This is a faster method than using the context menu options. To drag a keyframe unit to a new location first click on one of its in­ between frames and hold down the mouse button. Move the cursor along the timeline to the new required location. The cursor hand changes to a clenched hand when dragging frames and a preview box shows where the frames will be positioned. When the mouse button is released the move is completed. To drag a copy of an original keyframe, or keyframe unit, hold down [Alt] while dragging the cursor to the new location.

the req u i red l ocatio n o n t h e ti m e l i n e .

4 Release t h e button/s

to p l a ce the selectio n at t h e new l ocati o n .

Toke note The original frames re­ Main intaot If the [Ait) key Is a�sed to drat a copy of theta frames. The original frame s will heceme empty frames if the Alt key it net r.tted.

87

Deleti ng fro mes

Basic steps

The timeline context menu has two menu options that can be used to remove content from the animation sequence. It is important to clearly understand the difference between these two options to avoid deleting content unintentionally. The Clear Keyframe option removes the graphic content from a keyframe and changes its status to make it into a regular in-between frame. The Remove Frames option removes the frame, and also its content if it is a keyframe, from the timeline completely.

1 C l ic k on a keyfra m e

that you wa nt to clear.

2 Rig ht- d i c k to open the context menu then choose the C l e a r Keyfra m e o ption .

0

Keyfra m e content is removed and the fra m e becomes an i n ­ between fra m e .

3 C l ic k o n t h e

i n - between fra me that you wa nt to remove .

4 Rig ht-d ick to reopen

the context menu a n d choose t h e Rem ove f ra mes o ption - o r p ress [Delete] .

0 The fra m e is d e l eted

from the ti m e l i n e .

Take note Only the Remolle Fra mes option will reduce the

tota l number of fra mes in the mollie.

88

nimation

Basic steps 1 C l ick on the p layhead

and d ra g it back or forwa rds to p review the fra mes a n i mati n g .

Or

2 C l ick the Wi n d ow >

Tool ba rs > Contro l l er o ptions to open the Control l e r d i a l og box.

When you test a movie, using [Ctrl+Enter] , Flash first saves the movie as a file with a . swf extension then plays that file in a test window. There are other ways to quickly preview the animation directly in the Flash editor without creating a swf file. The simplest preview method is to manually drag the playhead back and forth in the area at the top ofthe time line. Alternatively Flash provides a Controller dialog box with VCR-style buttons that can be used to play the animation. The Controller dialog box is opened by selecting Window > Toolbars > Controller on the main Flash toolbar.

3 C l ick the Play button

to a n i mate the fra m es i n the ed itor wi n d ow.

Tip playback is set to loop, the Play button will dis�lay the current fra me up to the final fra me only once. To set the playback to always loop select the Loop Playback option on the toolbar Control U nless the

men u .

'"

""

NewWmnw "'

'

'"

The animation

play repeat­ edfy until you press the Stop button.

will then

Stop

89

Onion ski n n i ng

Basic steps

Flash provides a great feature that makes it easy to align frame content with that of surrounding frames by showing their content in dimmed form on the current stage. This is called the Onion Skin mode and is turned on by a button at the bottom of the timeline panel. There is also an Onion Skin Outlines mode button that allows the surrounding frame content to be shown only as outlines on the current stage. When either Onion Skin mode is selected, Onion Markers appear in the timeline over frames included in the Onion Skin view. The range of included frames can be adjusted using the Modify Onion Markers menu that is available from another button in the timeline panel. Choose the Onion 2 option to display 2 frames each side of the current frame. The Onion 5 option increases the range to 5 on each side and Onion All displays all the frames.

1 C l ick the b utton to

O n i on Ski n Outli n es

Mod ify O n i o n Ma rkers

open the Mod ify O n i o n Ma rkers m en u .

2 C l ic k the O n i o n

2

o ptio n to i n c l u d e 2 fra mes o n each side of the cu rrent fra m e in the Onion Ski n view.

3 C l ic k the O n i o n S ki n b utton t o tu rn o n O n i o n S ki n mode.

0 S u rrou n d i n g fra mes

a re n ow s h own d i m med on the sta g e .

Tip To

specify

a

custom

range of frames to be

Onion ttiew drag the On­

i ncluded in the Skin

C l ick the mode b ut

ion Skin Markers in the timeline to your desired frames then click the

option in the Modify Onion Mark­ ers men u . Anchor Onion

90

Basic steps

��

1 C l ick the b utton to

open the Mod ify O n i o n Ma rke rs m en u .

2 Select the O n i o n Al l

o pti o n o n the m e n u to i nc l u d e a l l fra m es .

Multi-frame editing T o change the position of an animated element requires its position to be changed in every frame. To modify each frame individually is tedious and can lead to errors. Edit Multiple Frames mode overcomes this by allowing you to change the position of an element in multiple frames simultaneously.

3 C l ick the E d it Mu lti p l e

F ra m es b utton t o s h ow a l l fra me e l e ments .

4 Select t h e elements to be repositi oned .

5 D ra g the selecti o n to thei r new positi o n .

0 The elements a re

s i m u lta neously repos i tioned i n e a c h fra m e .

91

Frame rate

Basic steps

Frame rate is the speed at which movies display successive frames . This speed is expressed as the number of frames per second (fps) that are displayed. The frame rate needs to be fast enough to create the illusion of animation but not so fast that the images become blurred. A frame rate that is too slow must also be avoided as it would allow the viewer to discern the individual frame images . The standard frame rate for movie film is 2 4 frames per second. Internet animations however are best displayed at 1 2 frames per second so this is used as the default frame rate by Flash. A custom frame rate can be specified for an entire Flash movie by changing the default rate in the Movie Properties dialog box.

1 Dou b l e - c l i ck the fra me rate box at the bottom of the ti m e l i ne, o r p ress [Ctri + M] , to open the Movie Prop­ e rties d i a log box.

2 E nter a n ew va l u e i n

the fra m e rate fie l d to s pecify the n u m be r of fra m es per seco n d to be d is p l ayed .

3 C l ick [OK ] to a p p ly

the n ew fra m e rate to the m ovie .

0 The m ovie wi l l d i s p l ay at the s pecified rate when ever it is p l ayed .

Take note Only one rate can

x

B�ound C�r: Ruler Yflitr.:

92

j

Pixels

..

single frame be specified

for an entire movie. t;m"w

M�h:

F�f;l

�

Basic steps

Iii'� CJO

1 C l ick the fra m e where you wa nt to s l ow d own the a n i m ati o n .

2 Press [FS] twice to a d d two fol lowi n g i n between fra mes.

3 P ress [F6] twice to

Va rying a n i mation speeds Although the frame rate cannot be adjusted for individual parts of a movie the animation speed can be speeded up, or slowed down, by changing the number of frames in a sequence. Adding frames will slow the animation by taking longer to complete a particular movement. Extra frames could be simple in-between frames but the animation will be smoother if the added frames are keyframes showing the graphic at intermediate positions.

i n sert keyfra m es i nto both of the new i n between fra mes .

4 C l ick on each new

keyfra me i n turn a n d mod ify t h e positio n of the g ra p h i c element o n the sta g e .

D The a n i m atio n is n ow

s l owed at the sta rt. I n this exa m pl e the b a l l s l owly c l i m bs a n i n ­ c l i ne before d ro p p i n g d own t h e fa r s i d e .

Tip precisely position a selected object use the

To

di rectional arrow keys

on

the keyboa rd .

93

Summary 0 The i l l usion of m ovement is c reated by d is p l ayi n g a

seq u ence of i m ag es i n ra pid succession .

0

Each i m a g e i n a n a n i mated seq uence is ca l l ed a fra me.

0 The ti m e l i n e contro l s the fra m es i n a F l as h m ovie . 0

F ra mes which conta i n n ew content a re ca l led keyfra mes .

0

I n - between fra mes conta i n i ncre m enta l c h a ng es between keyfra mes a nd ca n be generated by F l a s h .

0 The F ra m e View m e n u c a n be u sed to a lter the a p pea ra nce of the fra mes o n the ti m e l i ne . 0

[F5] ca n a d d i n - between fra mes.

0

[F6] ca n i nsert keyfra mes.

0 You ca n cut' n ' paste o r d rag ' n ' d ro p fra mes to rel o ­

cate t h e m o n t h e ti m e l i n e .

0

[Delete] ca n be used to d e l ete fra mes.

0 The Contro l l e r wi n d ow p rovid es VC R-style button s

with wh i c h t o p review a F l a s h m ovie .

0 O n i o n S ki n view s h ows a d i m med version of g ra p h ­

i cs from s u rro u n d i n g fra mes o n the stag e to m a ke a l ig n ment of fra m e g ra p h ics easier.

0

E l ements i n seve ra l fra m es ca n be si m u lta neously repositioned in E d it Mu lti p l e F ra mes mode.

0 The F ra me Rate is the s peed at which the fra mes a re d is p layed a n d ca n be a d j usted i n the Movie Proper­

ties d i a l o g box.

94

9 Tweening animations Motion tweening

.

Graphic tweening Motion

guide layers

. . . . . . . . . . . . 96 .

. . . . . . . . . . 1 00 .

. . . . . . . . . 1 05

Multiple motion tweens Summary

.

.

. . . . . . . 1 08

. . . . . . . . . . . . . . . . 112

otion

een 1 n

Basic steps

The creation of intermediate frames in an animation can be I automated in Flash using a process called tweening. This is a I powerful feature of Flash where in-between frames are generated to automatically fill the animation between two keyframes. Where the position of a symbol changes in the two specified 1 I keyframes Flash will generate a series of incremental steps II between the start and end positions. These intermediate frames for motion tweening effects are created using the Create Motion

I I �

I

I

Tween option on the time line ' s context menu.

II

�i �

1 C l ick on the fra m e i n

the ti mel i n e where you wa nt to sta rt the motion tween .

2 Rig ht-cl ick o n the

ti mel i ne to open its context m e n u .

3 C l ick on t h e C reate

Motion Tween o ption in the context men u .

I� I 0 F l as h creates the

I

II

I

g ra p h i c a s a sym bol a nd g ives it a defa u lt n a m e i n the l i b ra ry.

Take note The tweened frames are not actually new graphic frames but rather a re mathematically created

FH!ifni;!:g Fram•tn

by Flash. This is fa r m o re

effi cient t h a n

making

a

mottie with

keyframes and reduces the file size of lots of

the fin ished movie.

96

4 C l ic k o n the fra m e i n

the ti m e l i ne where you wa nt to end the m o t i o n tween .

5 P ress [F5] to i nsert a

fra me at this selected poi nt.

0 A d otted l i ne a p pea rs

to i nd i cate a n i ncom p l ete m otio n tween .

6 With the e n d fra m e

sti l l selected d ick the sym bol o n the stag e .

7 Drag the sym bo l to its e n d positio n - then release the mouse.

0 The fi n a l fra m e i s

made i nto a keyfra m e .

0 The d otted l i n e

cha nges t o a n a rrow to i n d icate a com p l ete motion tween .

0 O n i o n Ski n O utl i nes

view ca n be used to s h ow the tween i n g .

0 The new m otio n tween

a n i mati o n ca n be p reviewed by p ress i ng [ Enter] .

The tween i n g p roperly An alternative way to create motion tweening is to set the tweening property of in-between frames in the Frame dialog box. This is opened by pressing [Ctrl+F] and contains a drop­ down menu of the possible tweening options. Choosing the Motion option from this menu will convert the frames between two keyframes into tween frames .

Basic steps

1

C l ick o n the fra me i n the ti mel i ne where you wa nt to sta rt the tween i n g - ensu re that it conta i n s a g ro u p o r a sym bol t o a n i m ate.

2 C l ick o n the fra m e i n

the ti mel i n e where you wa nt the m otio n tween i n g t o fi n i s h .

3 Press [ F6] to i n sert a keyfra me at this se­ l ected poi nt.

Take note

\ "�f\1

� Each motion tween must ha11e a start keyframe

conta i n ing a symbol or

group, a number of In-between frames that

a

ca n

he con11erted fo

and an end keyframe where the original symbol or group is repositioned. tween frames.

98

4 With the e n d fra m e

sti l l selected, c l i c k the g ra p h i c o n the stag e a n d d ra g it t o its e n d position - then rel ease the mouse b utto n .

5 C l ic k o n a ny o n e of

the i n - between fra m es o r the fi rst keyfra m e .

6 Press [Ctri + F] to open

the F ra m e d i a log box.

7 C l ic k the b utton to

d is p l ay the tween i n g p roperty o pti o n s .

8 C l ic k o n the Motio n o ptio n t o create t h e m otion tween .

0 The tween i n g p roperty

for a l l fra m es i n the selected keyfra m e g ro u p i s set t o Moti o n .

0 An a rrow a p pea rs o n

t h e ti m e l i n e t o i n d icate a m oti o n tween .

0 The new m otio n tween

a n i mati o n ca n be p reviewed by p ress i n g [ E nter] .

99

ra phic l;lH mHl'*'> mi�

�

7 2l001>M § �

een 1 ng Hi lS 7 NS�

21m �§ &M'dn

Basic steps

m p;:m �g

The Motion Tween feature can be used to animate graphics in ways other than just changing their position on the stage. Tweening can automatically generate intermediate frames for changes to the size of a graphic. This can be used to grow or shrink a graphic in a Flash movie.

1 C l ick o n a n end fra me for the m otio n tween .

2 Press [F6] to i nsert a

keyfra me at the chosen fra m e .

3 C l ick o n the g ra ph i c

t o ensure i t is selected .

4 C l ick the sca l e b utton

i n the tool box o ptio n s panel .

5 C l ick a nd d ra g the

h a n d l es to resize the g ra ph ic. D ra g the g ra p h i c itself to reposition it o n the sta g e .

6 C l ick a ny fra m e i n the keyfra me u n it.

7 Rig ht-c l i c k a n d choose C reate Motio n Tween o n the context m e n u .

0

F l a s h creates a m otio n tween t h a t c h a n g es the g ra p h ic's size i n g ra d u a l steps from its sta rt to e n d size .

0 The n ew m otio n tween

a n i mation ca n be p reviewed by p ress i n g [ E nter] .

1 00

Basic steps

��

1 With a sym bol o n the

stage, click o n an end fra m e for the tween .

2 Press [F6] to i nsert a

Tweening colour Tweening can automatically generate intermediate frames for changes to the colour, or transparency, of a symbol instance. This can be used to fade a graphic in and out, or to fade a graphic from one colour to another.

keyfra m e at the sel ected poi nt.

3 C l i c k Wi n d ow

>

Pa nels > Effect o n the too l ba r to l a u nch the Effect wi n d ow.

4 Click the b utto n to d is p lay the m en u .

5 C l i c k the p roperty you

wa nt to c h a n g e choose the Ti nt o ptio n t o c h a n g e t h e col o u r .

6 C l ic k the col o u r that

you wa nt the g ra ph i c t o beco m e .

7 C l i c k a ny fra m e i n t h e keyfra m e u n it.

8 Rig ht-d ick and c hoose C reate Motio n Twee n o n t h e context m e n u .

0 F l a s h creates a m otio n tween t h a t c h a ng es the g ra p h i c col o u r i n g ra d u a l steps from its sta rt to e n d col o u r .

1 01

Tweening rotation

Basic steps

Motion tweening can automatically generate intermediate frames for changes to the orientation of a graphic. This can be used to rotate a graphic or make a spinning graphic. As with other motion tweens, Flash calculates the difference between two keyframes to generate the images in the in-between frames . By default the direction ofrotation will automatically be that which requires the shortest amount of rotation.

1 With a sym bol o n the

stage, click o n an e n d fra me for the tween .

2 Press [F6] to i nsert a keyfra me at the se­ lected poi nt.

3 C l ick Tra nsform -

Rotate 90° CW i n the Mod ify menu o ptions to rotate the g ra p h i c 90° clockwise.

4 C l ick a ny fra me i n the keyfra me u n it.

5 Rig ht-c l ick and choose C reate Motio n Tween o n the context men u .

0

Flash creates i nterme­ d iate steps that wi l l rotate the g ra ph i c 90 d eg rees c lockwise.

Take note If the graphic had been turned more than 1 80° Flash would create a n

anti-clockwise rotation . 1 02

Basic steps

D'� p

1 With a sym bol o n the

stage, c l ick o n an end fra me for the tween .

2 P ress [F6] to i nsert a keyfra m e at the sel ected poi nt.

3 C l ick a ny fra m e in the

Selti ng rotation properties The default direction of rotation is not always the one that is required. For instance, you may want Flash to rotate the example on the facing page in an anti-clockwise direction. The direction of rotation can be specified manually in the Frames dialog box. The total number ofrotations can also be specified here. This can be used to create a graphic that spins a set number oftimes in a specified direction.

keyfra m e u n it.

4 Rig ht-click a n d c hoose C reate Motio n Twee n o n t h e context m en u .

5 Press [Ctrl + F ] to open

the Fra m e d i a l og box.

6 C hoose a rotatio n

d i rectio n from the d rop-down menu a n d e nter t h e tota l n u m ber of rotations d esi red .

0

F l a s h creates a m otio n tween ca l c u lated from the specified d i rectio n a n d n u m ber o f s p i n s i n this exa m pl e the g ra ph i c wi l l m a ke two clockwise rotatio n s .

0 Y o u ca n p review t h i s

a n i m atio n b y p ress i n g [ E nter] .

1 03

Sha pe 1weening

Basic steps

Flash can create intermediate frames between shapes on two keyframes using shape tweening. This i s similar t o motion tweening but with one important difference - motion tweening only works with symbols whereas shape tweening only works with editable graphics. To specify shape tweening choose the Shape option from the Tweening menu in the Frame dialog box.

1 C reate the sta rti n g

s h a pe on the sta g e .

2 C l ick o n a n e n d fra me for the s h a pe tween .

3 Rig ht- d ick a n d choose I nsert B l a n k Keyfra m e o n t h e context m en u .

4 C reate the e n d s h a pe on the sta g e .

5 C l ick a ny fra me i n the keyfra me u n it.

6 Press [Ctrl + F) to open

the F ra me d i a l og box.

7 C l ick the b utton to

open the d ro p - d own m e n u , the n choose the S h a pe o pti o n .

0

F l a s h creates a s h a pe tween that c h a nges the g ra ph i c's s h a pe i n g ra d u a l steps from its sta rt to e n d s h a p e .

0 The tween a l so steps

the s h a pe's col o u rs a n d its positi o n .

0 You ca n p review this

a n i mation by p ress i n g [ E nter] .

1 04

Basic steps 1 C l ick on the l ayer to

be a ssoci ated then c l i ck the Add G u i d e Layer ico n - i n t h i s exa m p l e t h e Ba l l l ayer conta i n s a l 0-fra m e m otio n tween .

2 C l ick the penci l too l

otion guide layers A motion guide layer is a special layer that only contains a path along which to animate a graphic in an associated normal layer. To create a motion guide layer click on the layer that is to be associated then click the Add Guide Layer icon. The pencil tool can now be used to draw the desired path in the motion guide layer. Once the centres of the graphic in the start and end keyframes are aligned with the guide the animation will travel along the prescribed path.

i con i n the tool box.

3 D raw the d es i red path o n the sta g e .

4 D rag the g ra ph i c i n

each keyfra me s o that every centre poi nt is a l ig n ed o n the path .

D The path d rawn i n the

m otio n g u i d e l ayer wi l l be fol l owed by each fra m e i n the a ssociated l ayer.

D The path l i ne does n ot

a ppea r i n the fi n a l m ov1e.

3

Draw

a

path

D You ca n test this

m ovie a n i m atio n by p ress i n g [Ctri + E nter] .

1 05

O rienti ng to a path d i rection

Basic steps

Animations that follow a path o n a motion guide layer may seem to be a little unnatural if they maintain a fixed orientation. For instance, an aeroplane flying a loop-the-loop should at some point be upside down, and not maintain a horizontal position. We can make the graphic follow the path more naturally by ticking the Orient to path option in the Frame dialog box. It is also better to rotate the graphic in the first keyframe to face in the direction of the path so that the initial alignment is natural.

1 C l ick o n the g ra p h i c i n the fi rst keyfra m e of the m otio n tween .

2 C l ick the Rotate m o d i ­ fier i n the tool box O ptions p a n e l .

3 D ra g the h a n d les to a l ig n the g ra ph i c i n the d i rectio n o f the m otio n path

4 Press [Ctrl + F] to open

the F ra m e d i a l og box.

5 C l ick o n the box to

tick the O ri e nt to path o pti o n in the d i a l og .

0 The g ra p h i c is n ow

o riented to the path d u ri n g the a n i m ation .

Tip To

manually adjust

orientation of an

the

in·

between frame right­ click it and telect In­ sert Keyframe, then rotate the graphic. 1 06

Basic steps 1

�� CJO

Press [Ctrl + F] to open the F ra me d i a l og box.

2 C l ick o n the a rrowed b utton next to the Easi n g o pti o n fiel d .

3 D ra g the s l ider d own

to a negative va l ue to set an Easi n g In effect.

0 The word I n a ppea rs

a longside the s l ider.

Or

Adj usti ng !ween speed Animations that are created using tweening spread the motion evenly across the total number of in-between frames in that sequence. The speed of a tweened animation cannot therefore be changed by adjusting the number offrames in the sequence as we did with the frame-by-frame animation example on page 93 . Instead tweened animation speeds can be varied by setting the Easing value in the Frame dialog box. This value is zero by default when the frame rate is constant. Changing this to a negative value makes the animation start slowly then accelerate. This is called Easing In. A positive value on the other hand produces an Easing Out effect where the animation starts quickly then decelerates.

4 D ra g the s l i d e r u p to a positive va l ue to set a n Easing Out effect.

0 The word O ut a ppea rs

a longside the s l ider.

0 The s peed of the a n i mati o n wi l l n ow

va ry i n accord a nce with the Easi n g va l u e .

Tip Skin adjust the

Turn on the Onion

fiew as you Easing falue to see how the frames change .

1 07

le motion

eens

Multiple items can be tweened simultaneously ifthey are each placed on their own layer. This is especially useful for animating characters, by placing separate parts on individual layers, to avoid repeatedly re-creating the entire character. Onion Skin view can be used to ensure that the parts align correctly.

Basic steps 1 C l ick the Add Layer

b utton twi ce to c reate a tota l of 3 l ayers for m u lti p l e twee n i n g .

2 C l ick o n each l ayer's

l a bel a n d ren a m e it with mea n i n gfu l n a mes fo r its content.

3 C l ick o n the Body

l ayer a n d create a cha racter body o n the sta g e .

D The body wi l l form

p a rt of the c h a racter a lthou g h it wi l l n ot be a n i mated itself.

4 C l ick o n the Bottom

Leg l ayer a n d a d d a l eg to the cha racter o n t h e sta g e .

5 C l ick o n the Top Leg

l ayer a n d a d d a nother leg to the c h a racter on the sta g e .

D The cha racter i s n ow

com pl eted o n 3 l ayers a n d is rea dy to be a n i mated by m otion tween i n g the l ayers .

1 08

6 H o l d d own [Sh ift] a n d

c l ick a n e n d fra me for each l ayer. Rel ease [Sh ift] then p ress [F6] to i nsert a keyfra m e in each o n e .

7 H o l d d own [Sh ift] a n d

c l ick each keyfra m e u n it. Release [Sh ift] then rig ht-d ick a n d choose C reate Motio n Tween from t h e con text men u .

8

C l ick on the e n d fra me i n the Bottom Leg l ayer then m ove the bottom l eg to its e n d positio n on the stag e .

9

C l ick o n the e n d fra me i n the Top Leg l ayer then m ove the top leg to its end position o n the sta g e .

D The a n i m ated c h a rac-

ter is n ow com p l ete a n d ca n be previewed by p ressi n g [ E nter] .

1 09

Movie C l i p sym bols A complete multiple-frame, multiple-layer animated graphic can be stored in the Flash library as a Movie Clip symbol. This allows the animation to be reused, as often as desired, in other movies. Building a range of animated and static symbols enables you to make Flash movies that really come alive.

Basic steps 1 Sel ect a l l fra m es o n

every l ayer o f the a n i mation then rig ht­ click a n d choose the Copy F ra m es o ptio n o n t h e context m en u .

2 Press [Ctri + F8] to

open the Sym bol Properties d i a log box.

0 The Sym bol Properties

d i a l og box wi l l open with the Movie C l i p o pti o n selected .

Press [Ctrl +

3 Type a n a me for the

new Movie C l i p sym ­ bol i n the n a m e fie l d t h e n c l i c k [O K]

0

F l as h enters Ed iti n g Mode for this n ew sym bol .

4 C l ick the fi rst fra m e i n

the ti m e l i n e then rig ht­ c l ick a n d choose Paste F ra mes from the context m en u .

0 You ca n n ow a ccess

the new sym bol from by p ress i n g [Ctri + L] to open the l i b ra ry.

110

Basic steps 1 C l ick F i l e

O pe n a s Li b ra ry, o r j u st p ress [Ctri + Sh ifi + O] then open the fi l e that conta i ns the sym bol you wa nt to use. >

All types of symbols that are stored in any Flash library can be made available to add to the current movie. You can add an animated graphic that is stored as a Movie Clip symbol then further animate it with a new tween. This is useful to make a walking-on-the-spot animated character move around the movie.

D The l i b ra ry wi n d ow

opens s h owi n g the sym bols in that fi l e .

2 C l ick o n the desi red

sym bol a n d d ra g a n i n sta n ce of it from the l i b ra ry o nto the sta g e .

3 C l ick o n a n end fra m e for t h e tween then rig ht-click and choose I nsert Keyfra me

4 C l ick o n a ny fra m e i n

the keyfra m e u n it then rig ht-click and choose C reate Motio n Tween o n the context m en u .

D The g ra ph i c wi l l n ow

a n i m ate a s it m oves a lo n g the tween .

D Preview d oes n ot g ive

the fu l l effect - to see the fu l l a n i m ation p ress [Ctri + E nter] .

111

Summary 0 Motio n twee n i n g generates the i n - between fra m e

steps for m ove m e nt o f a g ra ph i c a ro u n d a m ovie .

0 A m oti o n twee n ca n be created usi n g the C reate Motio n Tween o ptio n on the ti m e l i n e context m e n u . 0 A m otio n tween ca n a lso be c reated by setti n g the

Tween i n g p roperty in the F ra m e d i a log box.

0 Motio n tween i n g ca n be used to a n i m ate the pos i ­

tio n , size, col o u r a n d orientatio n o f a g ra ph i c .

0 S h a pe tween i n g ca n be used to create the i nterme­

d iate steps between g ra p h i cs in two keyfra mes.

0 The desi red d i rection of a rotati n g a n i m ation ca n be

s pecified in the F ra m e d i a log box.

0 Motio n tween i n g works o n ly with g ra p h i cs whereas

s h a pe twee n i n g works o n ly with ed ita b l e g ra p h i cs .

0 A m oti o n g u i d e l ayer ca n s pecify the path a lo n g

w h i c h a n a n i m ated g ra p h i c wi l l trave l .

·

0 The tween s peed ca n be a d j usted by setti n g the

Easing p roperty in the F ra m e d i a log box.

0 Mu lti p l e items ca n be tweened si m u lta neously if they

a re each p l a ced o n thei r own l ayer.

0 C o m p l ete a n i m ated g ra p h ics ca n be stored i n a

F l ash l i b ra ry a s a Movie C l i p sym bol .

0 Any F l a s h fi l e ca n be opened a s a l i b ra ry to m a ke its sym bols ava i l a b l e for use i n the cu rrent m ovie.

112

1 0 I nteractive buttons Rollover buttons

.

.

.

.

.

Adding butto n actions Invisible buttons Su mmary

.

.

.

.

.

.

.

.

.

.

1 14

.

.

.

. . . . . . . 1 18

.

.

.

.

.

.

.

.

.

.

.

.

.

1 20

.

.

.

.

.

.

.

.

.

.

.

.

.

1 24

Rol lover buttons

Basic steps

Buttons can be included in Flash to allow the user to interact directly with a movie. The visual appearance of an interactive button should change as the user places the cursor over the button, or clicks on the button, to provide feedback. This is called a rollover effect. In Flash a special type ofbutton symbol automatically provides four frames labelled Up, Over, Down and Hit in which slightly different button graphics can be stored to represent each stage of the rollover effect.

Press [Ctrl + F

1 Press [Ctri + F8 ] , or

select N ew Sym bol on the too l b a r I nsert m e n u , to open the Sym bol Properties d i a log box.

2 Type a n a m e for the new b utton sym bol .

3 C l ick the B utton o ptio n t o s pecify t h a t the new sym bol wi l l be a n i nteractive butto n .

4 C l ick O K. 0

Flash creates a n ew sym bol i n the l i b ra ry.

0 The stag e enters ed it mode with fra mes

s h own o n the ti mel i ne for each b utton state.

+

114

Basic steps 1 With the b utton sym ­

bol i n edit mode c l i c k o n t h e fi rst fra me i n the butto n ' s ti m e l i n e .

2 C reate a g ra ph i c o n

t h e stage that wi l l rep resent the button i n its natu ra l U p state.

The natural Up state of a rollover button displays the graphic that is held in the first frame of the button symbol ' s timeline. When the user places the cursor over a button the Over state displays the graphic held in the second frame of its time line. A button' s Down state displays the graphic in the third frame ofthe time line when the user clicks the button. Each of these graphics can be added to the appropriate timeline frame when the button symbol is in edit mode on the stage.

3 C l ick the secon d

fra me t h e n rig ht-click and choose I nse rt Keyfra me from the context m en u .

4 C reate a g ra ph i c to

rep resent the b utton i n its Over state .

5 C l ick the th i rd fra m e

then rig ht-click a n d click I nse rt Keyfra m e .

6 C reate a g ra ph i c to

rep resent the button i n its Down state .

0 The b utton n ow has

a n i n d ivi d u a l g ra ph i c associated with each of its rol l over states.

115

Button H it state

Basic steps

�E ' � hl 0� 0

C;

The fourth and final frame in the time line of a button symbol is the Hit state that defines active area of the button. For a typical graphical button this will simply be a block covering the same size as the graphics in the Up, Over and Down states. If the button is more complex, such as a piece oftext or a line drawing, the block should cover the entire area of the button to avoid creating any unresponsive spots. The Hit frame ' s contents are never actually displayed so they need only be a single-colour block defining the active button area.

1 C l ick the fou rth fra me

on the ti m e l i ne then rig ht-c l ick and c hoose I nsert Keyfra me fro m the context men u .

0 The g ra p h ics from the

Down keyfra me a re n ow copied to the H it keyfra m e .

2 U s e t h e p a i nt bucket

too l to fi l l the a rea with one s o l i d col o u r.

3 Press [Ctrl + E] to

return the stage to n o rm a l mode.

4 Press [Ctrl + L] to open the m ovie's l i b ra ry wi n d ow.

0 The l i b ra ry wi n d ow

s hows the com p l eted button sym bol .

Tip Press the �lay button ir•

pre­ �tiew the U�, Otter, Down the library 11iew to and Hit frames.

116

Basic steps

B utton p review

1

The rollover effects of a button are not usually enabled in normal editing mode. This allows the button to be repositioned on the stage without encountering the various button states . A button can, however, be previewed in normal editing mode by switching on a feature called Enable Simple Buttons. This is an option found on the toolbar's Control menu, or just press [Ctrl+Alt+B] . Alternatively the rollover effects can be seen in Test Movie mode by pressing [Ctrl+Enter] .

D ra g a n i nsta nce of a l i bra ry button sym bol o nto the sta g e .

2 Press [Ctri +Ait + B] o r

select Contro l > E n a b l e Si m p l e Butto n s from t h e too l ba r.

3 Put the c u rsor over the b utton to test the button's Over state .

4 C l ick o n the b utton to test its Down state.

1 17

button a 1ons •

To make a button actually do something when the user clicks it requires an action to be added to the button. Actions can be added to frames and obj ects, such as a button, using the Flash ActionScript scripting language. Learning ActionScript means learning a new language and is beyond the scope of this book. We can, however, get a taste of ActionScript by exploring how actions can be added to rollover buttons. A typical use for a button might be to relocate to another frame when it is clicked. Similarly, the new location might also have a button to return to the original location when the user clicks it.

Basic steps 1 C reate

2 fra mes, each

with a rol l over b utton .

0

Fi rst a d d a ctio n s to stop the fra m es from playi n g a utomatica l ly.

2 Sel ect fra m e

1.

3 Press [Ctri +Ait+ A] o r

c l i c k t h e Show Actions button to open the Actions d i a log box.

4 C l ick the

b utton to see the Actions m en u . +

5 C l ick the Stop o ption the n repeat the sa me process for fra m e 2 .

0

118

Both Stop a ctio n s a re ad ded i n the ti m e l i n e .

D N ow a d d a ctions for

each b utton to relocate the fra m e when the button is c l ic ked .

6 F i rst select the rol l over b utto n o n the stag e for fra me 1 .

D The actions d ia log box

a utom atica l ly c h a n g es from F ra m e Actio n s to O b ject Actions

7 C l ic k the + button to

see the Actions m en u .

8 C l ick o n the Go To m e n u o pti o n .

D Acti onScri pt code that

wi l l execute the rel o catio n a p pea rs i n t h e Actions wi n d ow.

9 Type the n u m be r of

r-----------------< current scene)

the desti n ation fra me i n the F ra m e fie l d then repeat the sa m e p rocess for fra m e 2 .

D

Responsive a ctio n s a re n ow a d d ed to both buttons. To try the a ctions in test mode, press [Ctri + E nter] .

*

,;LLL. , ••

o;,

�'t

119

Invisible buttons The only button frame that must have a graphic is the Hit frame that defines the active area of the button. Buttons that do not have graphics in the Up, Over and Down frames will be invisible in the movie. An invisible button can be used to make the entire movie frame clickable. This is useful to resume playback of a movie that pauses on a frame containing a lot of text.

Basic steps 1 C l ick o n the keyfra me with a l ot of text.

2 Press [Ctri + Ait+ A] o r d i c k o n the Show Actio n s button .

3 Add a Stop a ctio n to

the fi rst keyfra m e then repeat the p rocess for the next keyfra m e .

1:$ ���Mllr M W