1-flash 8 ess | Adobe Flash | Graphics

Happy Computers Guide to

Macromedia Flash 8  Essentials 
This course guide is produced for the Happy Computers Macromedia Flash 8  Essentials course.  For all your computer training needs contact:  Happy Computers  Cityside House  40 Adler Street  London  E1 1EE  Help­line: 020 7375 7373  help_line@happy.co.uk  Bookings: 020 7375 7300  Copies of this guide can be obtained from Happy Computers, fully bound, at  a cost of £15 each, or £10 for extra copies for organisations who have  booked courses.  Happy Computers allows this guide to be copied, provided that permission is  sought and the name and phone number of Happy Computers remains on  the copies.

1

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ About This Manual 

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

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

What is Flash 8? ...................................11 
Flash Overview ...............................................................................12  About Images ................................................................................15 

The Flash Environment .............................16 
Starting & Exiting Flash....................................................................17  The Flash Environment ....................................................................18 

Panels & the Property Inspector ..................20 
Panels...........................................................................................21  Property Inspector ..........................................................................24 

New Document......................................26 
New Document...............................................................................27 

Simple Objects .....................................29 
Simple Objects ...............................................................................30  Changing the Fill Colours..................................................................48  Aligning Shapes..............................................................................51  Adding Type...................................................................................53 

Converting Existing Shapes into Graphic Symbols .............................................56 
Converting Existing Shapes into Graphic Symbols ................................57 

Frames, Layers & Scenes..........................59 
What are Frames & Layers? ..............................................................60  Scenes ..........................................................................................66 

Mask Layers ........................................68 
Mask Layers...................................................................................69 

Symbols .............................................72 
Symbols ........................................................................................73  Organising Symbols ........................................................................78 

Animation: Frame-by-Frame ......................79
Happy Computers 020 7375 7300 

Simple Frame­by­Frame Animation ................................................... 80  Frame Rate ................................................................................... 83 

Animation: Motion Tweening .......................84 
Motion Tweening ............................................................................ 85 

Animation: Shape Tweening ........................91 
Shape Tweening............................................................................. 92 

Animated Masks ....................................96 
Animated Masks............................................................................. 97 

Buttons..............................................99 
Basic Rollover Buttons................................................................... 100  Buttons with Text ......................................................................... 104  Buttons that Change Shape ........................................................... 106  Invisible Buttons .......................................................................... 108  Buttons with Multiple Hotspots ....................................................... 111 

Actions ..............................................113 
Actions ....................................................................................... 114 

Animation: Movie-Clips .............................118 
Movie­Clip Symbols ...................................................................... 119 

Movie Explorer......................................123 
Movie Explorer............................................................................. 124 

Interactive Movies .................................126 
Interactive Movies ........................................................................ 127 

Testing & Publishing ................................136 
Testing & Optimising Movies .......................................................... 137 

Publishing............................................139 
Publishing your Movie ................................................................... 140 

Appendices ..........................................143 
System Requirements ................................................................... 144  Optimising Movies ........................................................................ 145  On MouseEvent Options ................................................................ 146 

Index................................................148 
Index ......................................................................................... 149

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ About This Manual 

Happy Computers: For All Your IT Training Needs 
Manuals for You to Use 
We hope you enjoy this manual and find it useful. If it is for personal use, or  for use in state funded schools, please feel free to copy it. Our full range of  manuals, in MS Office and more, are available from:  www.happymanuals.com  For other organisations (including companies, charities, universities, colleges  and training providers) there is a licence fee. Full details of the costs are on  the site. 

Award Winning Classroom Training in the UK 
These manuals are produced by Happy Computers, recognised as one of the  leading providers of quality training in the UK. Our awards include: 
IT Training Company of the Year (Institute of IT Training Awards)  2000: Finalist  2001: Gold  2002: Bronze  2003: Bronze  2004: Bronze  2005: Finalist  2006: Silver  2007: Silver  IT Trainer of the Year (Institute of IT Training Awards)  1999: Gold  2000: Silver  2004: Gold  2005: Silver  2007: Bronze  Best Customer Service in the UK  (Management Today/Unisys Service Excellence Awards)  2002 Section Winner (Business to Business)  2003 Overall UK Winner 

All our training is designed to fully involve you, based on the age­old  principle:  Tell Me & I Will Forget  Show Me & I May Remember  Involve Me & I Will Understand  Find out how we can make learning IT fun and effective:  020 7375 7300, happy@happy.co.uk, www.happy.co.uk 

E-Learning: Anywhere in the World 
See the section below on Happy eLearning or simply try our free trial:  http://www.happyelearning.co.uk/freestuff/

Happy Computers 020 7375 7300 

The Happy Computers‛ Web Site
Where is it? 
http://www.happy.co.uk 

Why should I visit it? 
The Happy Computers web site is dedicated to providing you with  information about both the software you use, and the courses we run. You’ll  find copies of manuals to download and tips on the programs you use,  designed to make your work quicker and easier. You’ll find up­to­date news  about Happy Computers and the team, and you can of course find  information on all our courses and book your place on one. 

Who runs it? 
If you have any comments, ideas or just fulsome praise, you can e­mail our  web editor at: webmaster@happy.co.uk.  Alternatively, write your comments when you do your evaluations on­line at  the end of a course at Happy Computers. 

What is all that stuff above about? 
If the above means nothing to you, and you are interested in learning more  about the World Wide Web and the Internet, Happy Computers run a wide  range of courses in Internet software.

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ About This Manual 

About This Manual

Happy Computers 020 7375 7300 

Who It Is For And How To Use It
Who is it for? 
This manual is designed for use with the Flash 8 course with Happy  Computers.  It is also meant as a back up for when you get back to work in combination  with the two year telephone help­line you get free with every Happy  Computers course.  It is not meant as a replacement to the full reference manuals that come  with Flash. 

How should I use it? 
This manual is a step­by­step guide to the functions taught in the  Macromedia Flash 8 Essentials course.  You should be able to find the part you’re after by looking in the index, and  contents and noting that the general course will follow the pattern of the  manual.  The step­by­step parts are in italics. Simply do the things on the left, and  read the things on the right for further information  This is what you do  happening This is a description of what is 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ About This Manual 

What do the Icons Mean? 
Tips  Handy tips that make your work easier 

Essential  Essential points to understand how to do the work in hand 

Technical  Technical (non­essential) points for the technically minded 

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

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

You can also  use the right  mouse  button here

Happy Computers 020 7375 7300 

Getting Help 
Flash keeps the screen fairly simple. But don’t expect to have to remember  the functions. There are several levels of help: 

Using this Guide 
This guide contains all the basic functions of Flash 8. Use the Table of  Contents and the Index to find the functions that you need explained. 

Help Function 
1.  Press F1  2.  Within the Contents tab  choose one of the 3 options  Opens the Help screen 

3.  Within the Index tab choose  the letter 

4.  Within the Search tab type  a keyword(s)

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ About This Manual 

Closing Help 
Alt + F4  Or  1.  Click on the File menu  2.  Choose Exit 

The official Flash 8 Manual 
Software manuals have improved. Use them as a reference on specific  functions, rather than for a general read on how to use the software. 

Ring Happy Computers 
If you received this manual at a Happy Computers course, we will provide  phone support on any functions covered on the course for two years from  the date of the course. This is a guarantee of the quality of our training:  Ring: 020 7375 7373 and we will help you with your difficulty. You can do  this as many times as you like.

Happy Computers 020 7375 7300 

10 

What is Flash 8?

11 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ What is Flash 8? 

Flash Overview
Flash Overview
§  Flash 8 movies contain graphics (which you can create from scratch or  import from other software), text and animation.  §  Flash movies are likely to be interactive and permit input from users.  §  Many Web designers use Flash to create navigation controls, animated  logos and animations with sound.  §  Flash movies use vector graphics, so they download rapidly and can  be scaled to the user’s screen size.  Do I have The Flash Player on my PC at home/work?  Yes, probably.  97% of all web users have the Flash Player on  their PC (source: Macromedia). You've probably watched and  interacted with Flash movies on many Web sites. The player is  installed automatically when Flash is installed or you can  download it from the Macromedia Web site.  (www.macromedia.com).  What is a Flash Player and Why do I need it? 
The Flash Player lives on the local computer. It plays back Flash movies in  browsers or on stand­alone applications. Viewing a Flash movie on the Flash  Player is similar to viewing a DVD on a DVD player—the Flash Player is the  device used to display the movies you create in the Flash authoring application. 

Animation in Flash
In Flash, you can animate objects to make them appear to move across the  stage and/or change their shape, size, colour, opacity, rotation, and other  properties. You can create frame­by­frame animation, in which you create a  separate image for each frame. You can also create ‘tweened’ animation, in  which you create the first and last frames of an animation and direct Flash to  create the frames in between.  You can also use ActionScript, which is an object­oriented programming  language, to create interactive animation in Flash. 

The Two Parts of Flash
· · Built­in vector­based graphics and type tools such as Macromedia  Freehand and Adobe Illustrator Programming and animation tools to animate and build interactivity  into your website using buttons and action scripts.

Happy Computers 020 7375 7300 

12 

Other Uses of Flash 
Animation is not limited to web pages ­ it can be used to: · License Flash Player and distribute Flash movies on CD­ROM · Create movies for stand­alone projectors · Export Flash to other formats such as QuickTime or Windows .AVI  movies. 

What are the Flash formats? 
Flash files are referred to as movies, during creation and in their final form. · · Flash files have the extension .fla. To view these files, you must convert the files to Flash Player format;  these files have the extension .swf (pronounced swif).  This stands for Shockwave Flash. Shockwave was the system to  deliver movies before Flash. 

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

What Flash does well
J  J  J  J  J  J  J  J  J  Presents text and images in sequence on screen  Allows you to move text and images on screen  Looks slick and smooth  With proper layout presents a lot of information in a single window  Lets you create Flash files that can be viewed by anyone with the free  viewer  Flash files will use the entire browser window whatever the browser  window size and screen resolution  Offers interactivity using buttons and actions  Flash files are streamed, which means they can start to play while  they are downloading  Using all vector­based images the Flash file size remains small, which  means faster downloading time 

Flash‛s Limitations
L  You need the Flash/Shockwave plug­in installed. This can be  downloaded for free from the macromedia site  (www.macromedia.com) . Newer versions of Netscape and Internet  Explorer come with the plug­in already installed or as an option in the  installation process  L  Flash files do not play at a consistent speed on all machines, on  older and slower machines files are played slower than newer ones  L  You may need to learn about programming (Action Scripts) if  you want to go beyond the built­in barriers in Flash

13 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ What is Flash 8? 

Learning the language and terminology Flash uses

Happy Computers 020 7375 7300 

14 

About Images
Images on the Web 
Images on the web have traditionally been bitmaps, i.e. images made up of  pixels. The more pixels in an image, the higher the quality of the image.  However, pixels also increase the size of the file. Also you may have noticed  when a bitmap is increased, the quality deteriorates, because each pixel has  to cover a larger area on the screen. This results in the image looking  jagged.  There are 3 main types of bitmap images used on the web · · · GIF (Graphical Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Group) 

One of the main features of Flash is to create graphics; it achieves its high  quality images by using a vector­based system.  A vector­based system is where objects are created using mathematical  equations. 

Advantages of Vector-Based Images
· · Images do not consist of pixels, so they are usually smaller in file size. Vector­based images lose very little image quality when they resized. 

This combination of small file size and consistent high quality make vector­  based graphics an excellent choice for Web pages.  Drawing programs such as Macromedia Freehand and  Adobe Illustrator use vector­based systems for graphics  creation. 

Streaming 
Often you have to wait for a site to download, especially one that is rich in  images or sounds. Flash is able to stream the content of the web site.  Streaming means that as soon as some of the vector graphic has  downloaded, Flash can quickly display it while the rest of the data continues  to download. Flash downloads each frame at the specified frame rate, so the  viewer sees a continuous flow of images.

15 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ The Flash Environment 

The Flash Environment

Happy Computers 020 7375 7300 

16 

Starting & Exiting Flash
Starting Flash 
1.  Click on the  button  2.  Click on Programs  3.  Select Macromedia Flash 8  4.  Choose Flash 8  The Start menu appears 

Flash opens 

Exiting Flash 
1.  Click on File menu  2.  Choose Exit  Or  Alt+F4 on the keyboard  Or  Click on the cross in the top right corner of the screen

17 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ The Flash Environment 

The Flash Environment
The Screen 
Toolbox  Timeline 

Stage 

Work  area 

Properties  Inspector  A movie consists of – · Panels

The Timeline – This is like the "table of contents" of your Flash  movie.  o  Layers – Where different layers are added to a movie. The Stage – The content for each movie is placed here. The Work Area – Animation can start here. 

· ·

About the Timeline 
The easiest way to describe the Timeline is to imagine your Flash movie as a  book. The timeline would be the table of contents, each chapter is like a  scene, and each page is like frame. However, each frame may actually  contain several transparent sheets sitting on top of each other.  These  "sheets" are layers. 

Happy Computers 020 7375 7300 

18 

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

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

The Work Area 
This is the grey area around the stage.  When you have finished your  animation and export your files (usually swf files or html) then only what is  on the stage will be exported.  This means that you can store graphics off on  the Work area while they are not required and bring them on when they are.

19 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Panels & the Property Inspector 

Panels & the Property Inspector

Happy Computers 020 7375 7300 

20 

Panels 
Panels in Flash give you more information about the object you are using  and help you view, organize, and change elements in a document. The  choices available on panels control the features of symbols, instances,  colours, type, frames, and other elements. Flash allows you to customise its  interface by displaying the panels you need for a specific task and hiding  other panels.  About Panels  Panels let you work with objects, colours, text, instances,  frames, scenes, and entire documents.  For example, you use the Colour Mixer to create colours, and  the Align panel to align objects to each other or the Stage.  Where are the Panels?  To view all panels available in Flash, see the Window menu. 

Panels 
Most panels include a pop­up menu with extra options.  Click and drag to  move the Panel.  Click on the Collapse  arrow to close a 

Click here to see the  Options menu control for  the Panel.

21 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Panels & the Property Inspector 

Info Panel 
This shows  the size of  the shape  in pixels.  This shows  the colour  of the  shape.  1.  Click on the Window menu  2.  Choose Info  This shows the  position of the  shape on the  stage.  This shows the  position of the  cursor. 

Colour Mixer 
1.  Click on the Window menu  2.  Select Colour Mixer 

Stroke  Fill Colour 

Used to  choose over  500 colours  from a colour  palette 

Fill Style

Happy Computers 020 7375 7300 

22 

Scene Panel 
1.  Click on the Window menu  2.  Choose Scene  Current open  scene 

Duplicating a scene  Adding a new scene  Deleting a scene 

Transform Panel 
1.  Click on the Window menu  2.  Choose Transform  Change the size of  the shape.

23 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Panels & the Property Inspector 

Property Inspector 
You can use the Property inspector to easily access and change the most  commonly used attributes of a document. Changes can be made to  document attributes using the Property inspector without accessing the  menus or panels that contain these features.  The Property inspector is content sensitive, which means it reflects the tool  or asset you are working with, giving you quick access to frequently used  features. 

The Property Inspector 
Viewing the Property inspector  1.  Click on the Window menu  2.  Choose Properties 

This is the Property inspector with nothing on the stage. 

Changing Document Properties Using the Property Inspector 
1.  Click on the blank area on  the stage. Click on the Size  button  Dialog box opens 

2.  Click on the Background  icon 

Choose a background colour  for the stage 

3.  Change the frame rate (see  later)

Happy Computers 020 7375 7300 

24 

Changing the Properties of a Shape Using the Property Inspector 

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

25 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ New Document 

New Document

Happy Computers 020 7375 7300 

26 

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

When you first open Flash 
1.  You’ll see a window offering  you lots of options 

2.  Either  Choose to create a new  Flash Document  Or  Choose to open an existing  document 

Creating a new Document in Flash 
1.  Click on File menu  2.  Choose New  You can change the properties  of the document using the  Property inspector  Dialog box opens 

3.  Click on the Size button 

4.  The default movie size is

27 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ New Document 

550 x 400 pixels.  5.  Change the Background  colour for the stage  6.  Enter the number of  animation frames to be  displayed every second  7.  To set the Ruler Units, click  on the downward arrow by  Pixels  8.  Click OK 

Colour palette appears 

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

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

Frame Rate  For most computer­displayed animations, especially those  playing from a Web site, 8 fps (frames per second) to 12 fps is  sufficient. (12 fps is the default frame rate.). If the frame rate  is too high, the movie becomes blurred, but if it is too slow, the  viewer will see each frame as a separate image. Setting the properties  §  To make the new settings the default properties for your  new document only, click OK  §  To make these settings the default properties for all new  documents, click Make Default. 

Happy Computers 020 7375 7300 

28 

Simple Objects

29 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

Simple Objects 
This is a very powerful feature in Flash. They are not only lines and shapes,  but can be transformed into eye­catching graphical images.  Flash also allows you to import images from other graphic packages such as  Illustrator, Freehand and Fireworks 

Images in Flash 
Computers display graphics in either vector or bitmap format. In Flash, you  can create and animate vector graphics. You can also import and manipulate  vector and bitmap graphics that have been created in other applications.  Vector Graphics v Bitmap Images  Vector graphics form images using lines and curves. These are  called vectors.  Bitmap images are made from coloured dots called pixels. 

What is Special about Vector Graphics?  When you modify the properties of a vector graphic you do so  without changing the quality of its appearance. Vector  graphics can be displayed on output devices of varying  resolutions without losing quality.  About Bitmap Graphics  When you edit a bitmap graphic, you modify pixels. Editing a  bitmap graphic can change the quality of its appearance  because the image is fixed to a grid of a particular size.  Resizing a bitmap graphic can make the edges of the image  ragged as pixels are redistributed within the grid. A bitmap  graphic on an output device that has a lower resolution than  the image itself degrades the quality of its appearance.  Flash Terminology  Basic shapes are made from strokes (outline) and solid  colours known as fills. 

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

Happy Computers 020 7375 7300 

30 

Viewing the Toolbox 
1.  Click on the Window menu  2.  Choose Tools  Selection Tool (V)  Free Transform (Q)  Line (N)  Pen (P)  Oval (O)  Pencil (Y)  Ink Bottle  (S)  Eyedropper (I)  Hand (H)  Rectangle (R)  Brush (B)  Paint Bucket (K)  Eraser (E)  Zoom  (M,Z)  Stroke  colour  Tool modifiers  Fill colour  Subselection  Gradient Transform Lasso (L)  Text (T) 

To find out what a tool does, just rest the cursor on the  icon and a tool tip appears. For example, if you rest your  cursor on the text tool, you will see a tool tip with Text  tool (T). By pressing T on the keyboard you can activate  the Text tool. 

Moving the Toolbox 
1.  Click on the grey dotted lines at the top of the toolbox window  2.  Hold down the left mouse button  3.  Drag the toolbox to another part of the screen 

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

31 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

Flash terminology  Basic shapes are made from strokes (outline) and solid  colours known as fills.  Each can be edited independently. 

1.  Click on the Oval tool 

Keyboard shortcut is O 

2.  Choose the Fill and stroke  colours for the shape 

3.  Click and drag to draw the  shape  To create a perfect circle  Hold down the shift key while you are dragging the Oval tool.  Or  Whilst dragging to create the circle, a small black circle appears  in the bottom right side of the cursor. This indicates it is a  perfect circle.  Ovals can be created with just a fill or just an outline  To create a shape without a stroke  1.  Click on the No colour icon  2.  Draw the shape 

Changing the Look of a Shape Using the Transform and Skew Tools 
Ensure you can see the Transform Panel. If not  1.  Click on the Window menu  2.  Choose Transform  1.  Create a shape

Happy Computers 020 7375 7300 

32 

2.  Click on the Arrow tool  3.  Double­click the shape  4.  Click on the Transform tool  Keyboard shortcut : Q 

Double­click ensures you select  both the stroke and the fill  Down on the properties  inspector click on the padlock if  you want to lock the 

5.  To rotate or skew 

the 

shape or to distort it  choose those tools from the  options section on the  toolbar 

proportions  You can also change these  settings numerically using the  transform panel 

6.  Press Enter 

Changing the Fill Colour Using the Property Inspector 
1.  Click on the Arrow tool  2.  Single­click inside the shape to select it  3.  Click on the drop down for Fill colour 

4.  Use the palette to choose a different colour 

If you want to match a colour on your stage exactly  Just move the eyedropper that appears over the stage and  click on the colour that you want to choose.

33 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

Changing the Stroke Using the Property Inspector 
1.  Click on the Arrow tool  2.  Double­click on the outside border of the shape to select it  3.  Click on the drop down for Stroke style  4.  Click on the drop down for Stroke height  5.  Use the slider to choose a different thickness for the stroke  To customise the style of the stroke click on the Custom  button,  on the Property inspector and make your  changes. 

You can also use the Colour Mixer panel to change the  fill and stroke colour of a shape  To view the Colour Mixer panel  1.  Click on the Window menu  2.  Choose Colour Mixer  3.  Select either the fill or the stroke of the shape  4.  Change the colour using the palette of the RGB  values 

Moving a Shape (Stroke And Fill) 
1.  Create a shape  2.  Click on the Arrow tool  3.  Double click the shape to  select it  4.  Click and drag the shape to  a new destination  Stroke and fill appear selected 

Make sure you’ve got both the stroke and the fill  A single click will select just the fill and when you move it,  you’ll leave the stroke behind 

Moving a Shape Using the Keyboard  1.  Double­click to select the shape  2.  Press the arrow keys on the keyboard  This moves the shape one pixel at a time  Or  Hold down the Shift key whilst pressing the arrow keys  on the keyboard  This moves the shape eight pixels at a time

Happy Computers 020 7375 7300 

34 

Moving the Fill 
1.  Create a shape  2.  Click on the Arrow tool  3.  Click once in the centre of  the shape 

4.  Click and drag the fill to  another destination 

5.  Click elsewhere on the  stage 

Moving the Stroke 
1.  Create a shape  2.  Click on the Arrow tool  3.  Click on the edge of the  shape  The stroke will appear  speckled. Note that if your  shape has more than one  edge, e.g. a square, you might  need to double click on the  stroke 

4.  Click and drag the stroke to  another destination 

5.  Click elsewhere on the  stage 

To move part of the shape  1.  Click on the Arrow tool  2.  Position the cursor outside the shape before clicking  and dragging part of it to select it  3.  Click and drag to move the selected part of the shape

35 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

Resizing a Shape 
1.  Click on the Arrow tool  2.  Double­click the shape to  select it  3.  Click on the Free Transform  tool on the Toolbox 

Black handles appear around  the shape and Options appear  at the bottom of the Toolbox 

4.  Click on the Scale icon  5.  Click and drag on any black  handle on the shape 

The shape changes  (proportionally if you drag on  any of the corner handles) 

Rotating a Shape 
1.  Click on the Arrow tool  2.  Double­click the shape to  select it  3.  Click on the Free Transform  tool on the Toolbox  4.  Position your cursor on any  corner black handle on the  shape  5.  Click and drag to rotate the  shape 

Black handles appear around  the shape  Cursor looks like the following 

If you need to be very accurate when changing the size  of a shape you can use the Transform Panel  See Changing the look of a shape using the Transform panel on  page 32 

Skewing a Shape 
1.  Click on the Arrow tool  2.  Double­click the shape to  select it  3.  Click on the Free Transform  tool on the Toolbox 

Black handles appear around  the shape and Options appear  at the bottom of the Toolbox 

4.  Click on the Rotate & Skew  icon

Happy Computers 020 7375 7300 

36 

5.  Position your cursor on any  centre black handle on the  shape  6.  Click and drag to skew the  shape 

Cursor looks like the following 

Distorting a Shape 
1.  Click on the Arrow tool  2.  Double­click the shape to  select it  3.  Click on the Free Transform  tool on the Toolbox 

Black handles appear around  the shape and Options appear  at the bottom of the Toolbox 

4.  Click on the Distort icon  5.  Position your cursor on any  black handle on the shape  6.  Click and drag to distort the  shape 

Cursor looks like the following 

Using the Envelope Tool 
The Envelope tool helps you to change the shape of a selected shape(s) by  using Bézier curves.  1.  Create 3 rectangles 

2.  Select all 3 shapes  3.  Click on the Free Transform  tool on the Toolbox  4.  Click on the Envelope tool 

More handles appear around  the selection 

5.  Position the cursor on any  of the handles 

Cursor looks like the following

37 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

6.  Click and drag to distort all  the selected shapes 

Changing the Shape of Existing Shapes 
1.  Create a shape  2.  Click on the Arrow tool  3.  Position cursor on the edge  of the shape 

Mouse shape changes to 

4.  Click and drag to change  the shape 

Changing the Shape of Existing Shapes Using the Subselection Tool 
You can use the Subselection Tool  shape  to reshape any 

1.  Create a shape  2.  Click on the Subselection  Tool  3.  Click on the border of the  shape  Bézier handles appear around  the shape 

4.  Position your cursor over  one of the Bézier handles 

A small white square appears  next to the arrow

Happy Computers 020 7375 7300 

38 

5.  Click and drag to change  the shape 

6.  Position your cursor on a  part of a border without a  Bézier handle  7.  Click and drag to move the  shape 

A small black square appears  next to the arrow 

Reshaping a Curve 
1.  Create a shape  2.  Click on the Subselection  Tool  3.  Click and drag one of the  Bézier handles to change  the definition of the curve 

Click here

Using the Line Tool 
This option only allows you to draw straight lines.  1.  Click on the Line tool  2.  Select a stroke colour from  the Property inspector  3.  Select a thickness and line  style on the Property  inspector  4.  Move the cursor to the  stage  5.  Click and drag to create a  line  6.  Release the mouse  Drawing a straight line  Holding down the shift key as you draw the line forces the line  0  to a vertical, horizontal or at a 45  angle. 

The cursor is a cross 

39 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

Editing Lines 
1.  On the toolbar click on the  Arrow icon  2.  Move the cursor over a  portion of the line  Curve Curve point  Corner point  Corner  Clicking and dragging allows you  to adjust the curvature of the line  Clicking and dragging adjusts the  end point of the line 

Moving a Line 
1.  On the toolbar click on the Arrow icon  2.  Click on the line 

Deselected line  3.  Move the line by clicking and dragging  4.  Click away from line 

Selected line 

Selecting more than 1 line ­ Hold down Shift and click on  the lines.  Selecting lines which are touching each other – Double­  click a line 

Selecting Part of a Line 
1.  On the toolbar click on the Arrow icon  2.  Click and drag cursor over part of the line  around line  Box appears 

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

Using the Pen Tool 
You can use the pen tool to draw straight lines or smooth curved lines. You  start off by drawing a straight line and adjusting the angle of the line. Using 
Happy Computers 020 7375 7300 

40 

the Pen tool allows you to create points on the line, which you can click and  drag to make curved.  Click on the Pen tool

When you are creating curves switch the grid on  1.  Click on the View menu  2.  Choose Grid  3.  Choose Show Grid  To change the stroke colour of an existing shape  1.  Click on the Arrow tool  2.  Double­click the outside border of the shape  3.  Click on the Stroke Colour Tool on the Property  inspector  4.  Choose a colour from the palette 

Drawing an Upward Curve 
1.  Click on the Pen tool  2.  Move cursor to the stage  3.  Click and drag upwards in a  straight vertical line  Ancho  r  Cursor shape changes to a X  Bézier  handles 

4.  Click about a centimetre  away from the anchor and  drag downwards 

Uneven curve appears 

Uneven curve changes to a  perfect curve 

5.  Press the Escape button  when you have finished  Or  Click on the Arrow tool 

41 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

Making Changes to an Existing Line 
1.  Click on the Pen tool  2.  Click on the line  Bézier handles appear 

Drawing an S Curve 
1.  Click on the Pen tool  2.  Move cursor to the stage  3.  Click and drag upwards in a  straight vertical line  Ancho  r Cursor shape changes to a pen  Bézier  handles 

4.  Click about a centimetre  away from the anchor and  drag upwards 

Uneven curve appears 

Uneven curve changes to an S  shaped curve 

5.  Press the Escape button  when you have finished  Or  Click on the Arrow tool 

Drawing Shapes Using the Pen Tool 
1.  Click on the Pen tool  2.  Click on the stage  3.  Click somewhere else on  the stage  Anchor appears  Straight line appears 

Happy Computers 020 7375 7300 

42 

4.  Continue clicking to create  your shape

43 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

To change the fill colour of an existing shape  1.  Click on the Arrow tool  2.  Single­click inside the shape  3.  Click on the Fill Colour Tool on the Property inspector  4.  Choose a colour from the palette  To change the stroke colour of an existing shape  5.  Click on the Arrow tool  6.  Double­click the outside border of the shape  7.  Click on the Stroke Colour Tool on the Property  Inspector  8.  Choose a colour from the palette 

Using the Rectangle Tool 
1.  Click on the Rectangle tool  icon  2.  Choose the stroke, fill,  stroke style and stroke  colour from the Property  inspector  3.  Move the cursor to the  stage  4.  Click and drag to create a  rectangle  To create a perfect square  Hold down the shift key while you are dragging the rectangle  tool. 

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

Rectangles can be created with just a fill or just an  outline.  To create a shape without a stroke  1.  Click on the Rectangle Tool  2.  Click on the Stroke colour on the Property inspector  3.  Choose the No colour icon  option  4.  Draw the shape

Happy Computers 020 7375 7300 

44 

To move rectangles  See page 34 (Moving shapes) 

Creating a Lozenge Shape 
This is simply a rectangle shape, but the corners are rounded. The corner­  radius settings are from 0­999 points. A larger the value creates a more­  rounded corner.  1.  Click on the Rectangle tool  2.  Click on the Round  Rectangle icon  This icon appears in the  Options part of the Toolbox  Dialog box opens 

3.  Change the corner radius to  10 points  4.  Click OK  5.  Change the stroke and fill  colours  6.  Click and drag to create the  shape 

Using the Pencil Tool 
This is a freehand drawing tool. It can be used to create patterns and curved  lines.  1.  Click on the Pencil tool  On the Property inspector  2.  Click on the Stroke style  drop down  3.  Choose a style  4.  Change the height on the  line using the Stroke height  drop down slider  5.  Draw the line

45 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

Using the Brush Tool 
This tool gives the effect of lines created by paintbrushes. 

Click on  the Brush  Object drawing (creates a shape rather than  just a line and Lock Fill Brush  Brush size  Brush  Brush Mode  Paint Normal  Paint Fills  Paint Behind  Paint Selection  Paint Inside 

Paints over everything  Paints over fills but not lines  Paints behind the shape  Paints inside a selected shape  Paints the fill of a shape but not  the line 

Creating Shapes Using the Brush Tool 
1.  Click on the Brush tool icon  2.  Click and drag to create a  line  3.  Draw another line  Ensure the two lines are touching  and are the same colour  The 2 lines are now part of the same shape  To move the shape  1.  Click on the Arrow tool  2.  Click and drag around the shape to select it  3.  Position the cursor anywhere within the shape  4.  Click and drag the shape  To move part of the shape  1.  Click on the Arrow tool  2.  Select part of the shape by clicking and dragging over  it  3.  Click and drag to move the selected part of the shape 

Happy Computers 020 7375 7300 

46 

Grouping Shapes 
More than one object can be grouped to form a new single object. It is  useful to group objects if you need to edit the objects simultaneously.  1.  Click on the Arrow tool  2.  Select all the shapes by  clicking and dragging all of  them  Or  Shift­click each object  3.  Click on the Modify menu  4.  Choose Group  or press Ctrl + G  5.  A thin border appears  around the grouped shapes  If you overlap objects that are the same colour and have  no stroke colour, they too become grouped. 

To ungroup shapes  1.  Select the group  2.  Click on the Modify menu  3.  Choose Ungroup  or click Ctrl+Shift+G  4.  Click away from the shapes

47 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

Changing the Fill Colours 
Flash can change the colour of an existing shape. It is possible to have a  solid colour or a colour with gradients. Gradients can make a 2­dimensional  shape appear 3­dimensional. 

Changing the Colour of an Existing Shape 
1.  Select the fill of the shape  2.  Click on the Paint bucket  tool on the Property  inspector 

Changing the Gradient 
1.  Select the fill of the shape  2.  Click on the Fill colour icon  3.  Click on the Paint bucket  tool on the Property  inspector  4.  Select the fill gradient from  the selection at the bottom 

Colour is applied to the shape 

You can change the centre point of a gradient colour  1.  Choose the subselection tool from the toolbar  2.  Click on the shape  3.  Click and drag the white circle in the centre of your  shape to move the gradient

Happy Computers 020 7375 7300 

48 

Creating a New Gradient 
How do I open the Colour Mixer panel ?  1.  Click on the Window menu  2.  Choose Colour Mixer panel  1.  Select the fill of the shape  Fill  Style  Colour Mixer panel 

Gradient  Pointer 

2.  Click on the one of the  pointers  On the Mixer box  3.  Choose a colour  4.  Click on the other pointer  5.  Choose another colour  6.  Continue for all of the  pointers 

Either choose a colour from the  Mixer or Swatches 

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

Adding more Pointers 
All gradients must have at least 2 pointers, but you can make your gradient  more complex by adding more pointers.  Click just below the gradient bar 

Click here

49 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

How many gradient pointers can I have?  8 is the maximum number 

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

Click on the pointer and  drag downwards To move a gradient pointer, simply click and drag it to  where you want it. 

Saving a new Gradient Colour 
1.  Click on the Options menu  on the Colour Mixer panel  2.  Choose Add Swatch  in the top right corner 

Using the new Gradient Colour 
1.  Click on the Fill colour icon  the Property inspector  2.  Choose the new gradient 

Removing a New Gradient Colour 
1.  Click on the Colour  Swatches panel  2.  Choose the gradient colour  to remove  3.  Click on the Options menu  4.  Choose Delete Swatch 

Happy Computers 020 7375 7300 

50 

Aligning Shapes 
It is possible to align shapes (particularly useful with rectangles) to any  position on the page based on a pixel measurement. 

Aligning Shapes 
To view the entire stage  1.  Click on the View menu  2.  Choose Magnification  3.  Select Show Frame  1.  Select your shape  2.  Click on the Info icon  W and H are the width  and height of the 

Info box appears  X and Y are the  number of pixels  your shape is from  the left and top of  the stage  Cursor  position  Zero and zero would move it to  the centre of your stage 

Colour of the  document 3.  Change X and Y to the  settings you want  4.  Create or click on another  shape  5.  Change the X value of the  shape  6.  Change the Y value of the  shape 

If you want to align the left of  the two shapes then make the  x value the same for each  If you want to align the top of  the shapes then make the y  value the same for each 

51 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

Aligning Shapes Using the Menu 
1.  Select the object(s) to align  2.  Click on the Window menu  3.  Select Align  Align horizontally  Distribute evenly  Match width, height  or both  Dialog box appears  Align  vertically  Align relative to the  stage  Distribute evenly  Equal spaces in  between objects

Happy Computers 020 7375 7300 

52 

Adding Type 
The text tool allows you to control text and paragraph attributes. 

Using the Text Tool 
1.  Click on the Text tool on  the Toolbar  2.  1Click on the stage  3.  Start typing  A text box appears  Text will expand automatically  along one line 

To create a text box with set width and word wrap  1.  Click on the text tool  2.  Click and drag the text box so it is the width you  want 

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

Character Attributes Using the Property Inspector 
Text Type  Font Type  Font  Colour  Font Size  Bold & Italics  Text Direction 

Paragrap  h  Alignment  Text box  width,  height and  x and y  positions  Letter  Spacing  Superscript  and Subscript  Link text  to URL

Kerning 

53 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Simple Objects 

Changing the Size of a Text Box 
1.  Select the textbox  Blue handles will appear  around the shape 

2.  Click and drag on one of  the handles  to the size you  want 

Formatting your Text 
1.  Click on the Arrow tool  2.  Click on the stage and type  3.  Click on the Arrow tool  4.  Make whatever changes  you want for example….  5.  Click on downward arrow  for Font size and use the  slider to change the font  size 

6.  Click on the downward  arrow for Character Spacing  and use the slider  to change the spacing  between the characters 

0=  ­3=  letters are closer  together  10= 

Kerning  This is the space in between the letters. Some letters, like T,  will have more space around it due to the horizontal line,  whereas some letters may seem closer together, like o and a.  Flash takes care of this if you keep kerning on  .  Changing your text into a hyperlink!  1.  Select your text, using the arrow tool  2.  Click on the Expand button  on the Property  inspector (in the bottom right corner)  3.  In the URL box type the URL of the page to link to  4.  Press Enter (your text will have a dotted underline in  Flash)

Happy Computers 020 7375 7300 

54 

Rotating & Enlarging Text 
It is possible to manipulate the text as though it is a shape.  1.  Create a text box  2.  Click on the Arrow Tool  3.  Click on the Text box 

A thin line appears around the  text 

4.  Click on the Free Transform  Tool on the Toolbox  5.  Click on the Rotate & Skew  icon  6.  Position the cursor just  outside any of the corners  of the text box  7.  Click and drag to rotate the  text box  8.  Click on the Scale icon  9.  Position the cursor on any  handle  10.Click and drag to change  the size of the text box  You can be more accurate when you are rotating and  enlarging by using the Show info box.  1.  Select the text box  2.  Click on the Transform Panel  3.  Change the dimensions Black square handles appear  around the text box  A circular (rotate) arrow will  appear 

55 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Converting Existing Shapes into Graphic Symbols 

Converting Existing Shapes into Graphic Symbols

Happy Computers 020 7375 7300 

56 

Converting Existing Shapes into Graphic Symbols 
It is straightforward to create and edit static objects, but Flash can do so  much more! Once it is decided that an object is going to be animated, it  needs to be converted to a Symbol. Symbols are the basic building blocks  of Flash.  You may want to use the same symbol more than once in the same or  different Flash movie. Flash stores these symbols in a Library.  When you create animation you use a copy of the symbol. This ‘copy’ is  called an Instance.  Why do I need to create Symbols? 
Symbols are reusable elements (which are stored in a Library). The  advantage of using symbols is that they keep the size of your Flash  file down to minimum and it means that wherever you choose to use  an instance of that symbol, it starts out looking the same as all the  others. 

Converting an Existing Object into a Symbol 
Viewing the Library  F11  Or  1.  Click on the Window Menu  2.  Choose Library  1.  Create an object 

2.  Select it  3.  Click on the Insert menu  4.  Choose Convert to Symbol  or Press F8  5.  Type a name for the symbol  6.  Choose the type of symbol  you want  7.  Click on OK  8.  Have a look in your library  window 

Graphic symbol is the most  commonly used one  You should see your symbol  there – to view the library

57 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Converting Existing Shapes into Graphic Symbols 

window use the window menu  9.  From your library, drag  your symbol onto the stage  10.The object on stage  becomes an instance  White dot  in the  centre

Bounding box  for symbol 

Double clicking on an instance of a symbol  You might do this on purpose or even by mistake.  If you  double click on an instance of a symbol you will move into  editing the symbol itself.  If you’re not sure check the top of  the timeline.  If it just tells you what scene you’re in you aren’t  editing the symbol.  If you see the name of your symbol  then you’re editing the symbol.  Click on the  name of the scene to move back. 

Happy Computers 020 7375 7300 

58 

Frames, Layers & Scenes

59 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Frames, Layers & Scenes 

What are Frames & Layers? 
Layers are like transparent sheets of acetate stacked on top of each other. If  there is nothing on a layer, you can see through it to the layers below. A  new Flash document contains one layer. It is good practice to organise your  graphics on more than one layer.  Layers contain frames. A document can have one frame or several hundred.  Number of layers  The number of layers used does not affect the file size of your document  but it does help you organise your objects (or instances) on the stage 

Which frame?  If the shape is going to move (or be animated), the shape must  be on the Keyframe. See page 72 ­ Animation. 

Frames & layers jargon
· · · Frames and layers come from when all animation was drawn by  hand. Keyframes are special frames where a specific event in the animation  occurs, such as a circle changing shape or moving position. Frames (also known as in­between frames) contain static  information. This is where Flash takes the name "Tweening" from,  which means adding frames in between keyframes. Mask layers are used to help you create sophisticated effects. Guide layers Are used to guide your shape along a path 

· ·

Flash allows you to combine different shapes together to create complex  objects. To work best with these complex images, it is vital to understand  layers and how Flash interacts with objects on the same of different layer.  Keyframe Tip 1  Keyframes need to be added to create animation 

Keyframe Tip 2  All movies must have at least one keyframe

Happy Computers 020 7375 7300 

60 

Keyframe Tip 3  When creating a background for a movie, place it on a layer on  its own and position the layer at the bottom of the list of  layers. Call the layer background. 

Different Representations of Your Timeline
Motion Tweening §  Keyframes have a  black dot  §  In between frames  have a black arrow.  §  Background is pale  blue  Shape Tweening §  Keyframes have a  black dot  §  In between frames  have a black arrow.  §  Background is light  green  A dashed line shows means  the final keyframe is missing  Here there is only one  keyframe, the light grey  frames after show that there  is no change in the content.  §  There is an empty  rectangle in the final  frame.  §  No tweening has been  specified in keyframe  1.  §  If you change the  tweening to shape or  motion, it will change  to the example above.  A small “a” indicates there is  a frame action associated  with this frame  A red flag indicates the frame  contains a label or a  comment (pale green)  (pale blue)

(pale green)  (light grey) 

61 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Frames, Layers & Scenes 

The Timeline
Frame  numbers 

Playhead 

Layer  name 

Frame 

List of  symbols  Add  layer  Current  Keyframe  Frame  rate List of  scenes 

An Example of the Use of Layers 
All the different  elements of the  movie live on  separate layers 

Happy Computers 020 7375 7300 

62 

Creating a Layer 
Why create layers?  It is good practice to insert a layer for every type of object on  your scene.  1.  Click on the New layer icon  2.  New layer appears above existing layer 

Moving a Layer 
1.  Select the layer name in  the Timeline  2.  Click and drag it to a  different position (up or  down)  A grey line appear showing the  position of the new layer 

Renaming a Layer 
1.  Double­click the layer name  2.  Type the new name  Give it a descriptive name 

Locking a layer 
1.  Select the layer to lock  2.  Click on the bullet in the  column under the Lock icon  Bullet replaced with a padlock 

Deleting a Layer 
1.  Select the layer in the Timeline  2.  Click on the Trash button on the Timeline 

Hiding a Layer 
1.  Select the layer to hide  2.  Click on the Hide icon  on the Timeline  Flash replaces the bullet with a  red cross

63 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Frames, Layers & Scenes 

Layer Properties 
1.  Double­click on one of the  small boxes in the Show all  layers as outlines column  Double­  click here  Change the name of  the layer  Specify the type of  layer this is  Change the colour of  the outline. This is the  colour you will see  when you are using  onion skins (see later Layer properties dialog box  appears 

2.  Click OK 

Showing a Layer as an Outline 
1.  Click on a small box in the Show all Layers as Outlines column  Click on one of  these 

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

Adding a Shape onto a Layer 
1.  Select the layer the shape will be on  2.  Insert a keyframe  3.  Create a shape  Keyframe is not empty now  As soon as you add an object to a frame, a black circle appears  in the Keyframe. 

Happy Computers 020 7375 7300 

64 

Drawing on layers  You can draw and edit objects on one layer without affecting  objects on another layer 

Changing the Stacking Order of Your Layers 
As you add more and more layers, you may need to arrange them so some  shapes appear in the background or the foreground. By changing the order  of the layer in the timeline it is possible to have shapes overlapping one  another. 1.  Select the layer  2.  Click and drag the layer  3.  Release the mouse 

Flash shows you the new  location with a thick line  Flash moves the layer and  selects it 

Does the stacking order matter?  If a layer is at the bottom of all the layers, objects on it will  appear in the background of the movie

65 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Frames, Layers & Scenes 

Scenes 
Scenes are similar to scenes in a play.  They are created separately, but run  sequentially in the movie. Scenes can be used to break up a long movie into  smaller more manageable chunks.  What's the difference between a Scene and a Document?  You can have a number of scenes in a Flash document. Once a  scene has been "played" it will play the next scene and so on.  For example, there may be a shape moving on the stage in one  scene and when that is over it will play the next scene. Important points about Scenes §  When creating a new scene, there is no evidence of other scenes.  §  Scenes play sequentially in the order they are created, but can be  reordered. 

Adding a New Scene 
1.  Click on the Insert menu  2.  Choose Scene 

Duplicating a Scene 
If you have created a scene with all the correct buttons, colours and  animations on, and you need to replicate this, it is easier to duplicate the  scene.  1.  Click on the Window menu  2.  Select Other Panels  3.  Select Scene 

4.  Select the Scene you want  to duplicate  5.  Click on the Duplicate  Scene button  6.  Double­click the name of  the new scene  7.  Type a new name  8.  Close dialog box

Scene names can have spaces 

Happy Computers 020 7375 7300 

66 

Renaming a Scene 
1.  Click on the Window menu  2.  Choose Panels  3.  Select Scene  4.  Select the Scene you want  to rename  5.  Double­click the scene  name  6.  Type a new name  7.  Close dialog box

67 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Mask Layers 

Mask Layers

Happy Computers 020 7375 7300 

68 

Mask Layers 
Mask layers are layers that allow you to hide and show parts of the layer  below. It is like a window envelope where you can only see certain parts of  the letter in the envelope. Once you have created the mask layer, it is easy  to animate the mask layer to create special effects. 

Creating a Mask Layer 
There are three stages to creating your mask layer  1.  Draw the picture that you want to be underneath the mask and  name that layer  2.  Add a new layer and draw the shape that  you want to form the  mask.  3.  Turn on the masking  You can switch the gridlines on so you can align your  shapes.  1.  Click on the View menu  2.  Choose Grid  3.  Select Show Grid  1.  Create a new scene  2.  Rename the layer  3.  Create the shape (or  picture) you want  underneath your mask  layer 

Make the name relevant to  your content 

4.  Keep on adding layers with  content until you have the  image you want for  underneath your mask  5.  Click on the Insert Layer  icon  6.  Rename the layer “Mask  layer”  7.  Ensure the Mask layer is  selected

69 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Mask Layers 

8.  Create the shape (or  shapes) that you want to  form the mask layer 

9.  Lock all three layers  10.Ensure the Mask layer is  selected  11.Right click on the mask  layer  12.Choose Properties  13.Click in Mask 

There is a Mask icon next to  the Mask layer 

14.Right Click on your first  layer  15.Choose Properties  16.Click Masked 

The background layers are seen through the Mask layer 

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

Happy Computers 020 7375 7300 

70 

Mask layers can only contain one shape – if you put two  shapes in it will just use the first one you drew to create  the mask 

What Shapes can I use in the Mask and Linking layers?  This is completely up to you!  Masking is a very powerful tool in Flash, go ahead and  experiment. 

Unlinking a Layer from a Mask Layer 
Often when you create a new layer below a Mask layer it is associated with  it.  1.  Right­click on the Mask layer  2.  Choose Mask 

Animated Masks  This type of animation is like a spotlight effect.  See page 97 for an example.

71 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Symbols 

Symbols

Happy Computers 020 7375 7300 

72 

Symbols
Types of Symbols 
A symbol is an object that is going to be used more than once it can be a  static element, a button or an animated movie clip.  There are 3 types of symbols:  Graphic  Button  Movie Clip  These are objects created in Flash. i.e. a shape or some  text  These are interactive objects that will perform an action  e.g. a Home button activated when the user clicks on it  These are independent animations within a movie i.e. a  moving image that runs continuously  Why should I use symbols?  §  If you need to use an element again and again, use a  symbol since it will help to reduce your file size.  §  If you change the symbol (for example change the  colour) every copy of the symbol will be changed  throughout the Flash document.  Where are symbols stored?  Each Flash document has its own library.  To view the library press F11. 

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

Creating a Symbol 
There are 2 methods: · · Converting an existing object into a  Graphic symbol (See p 57) Creating a symbol from scratch

73 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Symbols 

Creating a Symbol from Scratch 
1.  Click on the Insert menu  2.  Choose New Symbol  3.  Type a name for the symbol  4.  Ensure the behaviour is  Graphic  5.  Click OK 

You are now in Symbol­  editing mode 

How do I know I am in Symbol­editing mode?  §  A cross­hair  is placed in the centre of the stage and  in the Library.  §  Just below the Timeline you will see the name of the new  symbol  §  The entire stage appears white  6.  Create the symbol  The cross­hair indicates the  centre of your stage, you can  position your symbol in  relation to it 

How do I centre the symbol on the stage?  1.  Select the symbol  2.  Use the arrow keys on the keyboard to move the  symbol a pixel at a time  7.  Click on the scene name  You will be returned to the  stage  You now need to add an instance of the symbol to the stage  8.  Press F11  The Library for this document  opens 

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

An instance of the symbol is  placed on the stage

Happy Computers 020 7375 7300 

74 

Editing a Symbol (and all of its instances) 
This changes the symbol permanently and all instances  of the symbol on the stage. 

1.  Right­click the symbol  name in the library  or Right­click an instance of  the symbol on the stage  2.  Choose Edit  3.  Make your changes  4.  Return to the movie­editing  mode by clicking on the  scene name 

You are in symbol­editing  mode 

Changing the Colour of a single Instance 
You may decide you only want to change the instance on  the stage and not the symbol in the library, particularly  when you’re animating. 

1.  Add an instance to the  stage  2.  Select the instance  On the Property inspector  3.  Click on the down arrow  next to Colour 

Brightness  Tint  Alpha  Advanced  4.  Choose Tint 

­100 makes the object black, 0 remains the same  and 100 makes it white  Changes the colour of the object (also measured  in the amount of red, green and blue in the mix)  Changes the transparency of the instance. 0  makes it invisible and 100 remains the same  Changes the instance’s tint and transparency in  one go 

5.  Ensure the Tint is at 100%  6.  Click on the Colour icon  7.  Choose a colour from the

75 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Symbols 

palette 

Duplicating a Symbol 
If you have made changes to an instance then find you  will need to reuse the instance then convert it to a  symbol.  1.  Right­click the altered  instance of the symbol on  the stage  2.  Choose Convert to Symbol  3.  Type a new name for this  symbol  4.  Ensure the behaviour is  graphic  5.  Click OK 

Deleting a Symbol from the Library 
1.  Right­click on the symbol  name in the library  2.  Choose Delete  3.  Click Delete  Confirmation message appears 

Adding a Library from another Movie 
1.  Click on the File menu  2.  Choose Import  3.  Choose Open External  Library 

4.  Choose the flash file that  contains the library that  you want to open  5.  Click Open 

Using a Symbol from Another Library 
Click and drag the symbol from  the second library onto the  stage  The symbol becomes part of  the library of this document 

Changing a symbol/instance from another library  This is just as before, the symbol is now part of the current  library. You can either change the symbol or an instance.

Happy Computers 020 7375 7300 

76 

Swapping one Instance of a Symbol for Another 
1.  Select the instance on the  stage you want to replace  On the property inspector  2.  Click on the Swap button  3.  Choose the symbol you  want to replace the existing  symbol  4.  Click OK

77 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Symbols 

Organising Symbols 
It is good practice to organise your files in general, and this includes your  symbols. Instead of just storing your symbols in the Library, it is better to  arrange them within folders, particularly if your movie is going to have a  large number of symbols. 

Creating Folders in the Library 
1.  F11  2.  Click on the New Folder  icon at the bottom of the  Library  3.  Type a name  4.  Press Enter  Opens the library for this  movie  A new folder appears in the  library 

Moving Symbols into the Folder 
1.  Select the symbol name in  the library  2.  Drag it to the folder name  until there is a thin black  line around it  3.  Release the mouse  Moving adjacent symbols into a folder  1.  Click on the first symbol  2.  Hold down the Shift key  3.  Click the last symbol  All the symbols are selected  4.  Drag to the folder  5.  Release the mouse  Moving more than one symbol not adjacent into a folder  1.  Click on a symbol  2.  Hold down the Ctrl key  3.  Select the other symbols  4.  Drag to the folder  5.  Release the mouse

Happy Computers 020 7375 7300 

78 

Animation: Frameby-Frame

79 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Frame­by­Frame 

Simple Frame-by-Frame Animation 
This is a very simple animation using a series of images, each of which are  slightly different from one another. Each of these images needs to be placed  on a separate keyframe. The entire animation can be made up of a series of  keyframes.  The keyframe will duplicate the symbol from the previous frame, then you  can change it. This means you don’t have to keep recreating the symbol in  each keyframe.  How do I add Keyframes?  1.  Click in the frame in the Timeline  2.  Press F6 

Example of "Bouncing ball" Animation 
Change the view so you can see the entire frame.  1.  Click on the View menu  2.  Choose Magnification  3.  Select Show Frame ­ You will see the entire stage  1.  Open a new document  2.  Rename the layer Bouncing  ball  3.  Select frame 1  4.  Select the Oval tool on the  Toolbar  5.  Set the Line colour to None  6.  Create a perfect circle about  1 inch in diameter in the top  left of the stage  7.  Click into the second frame  8.  Press F6  9.  Click on the Arrow tool  10.Move the circle to the bottom  of the stage  11.Click into the third frame  12.Press F6  13.Move the circle to the centre  of the stage  14.Repeat steps 12 and 13 until  the circle is in the bottom  right corner of the stage

Hold down the Shift key to  make a perfect circle 

A Keyframe is added 

Happy Computers 020 7375 7300 

80 

Previewing the Scene 
It is only necessary to play a scene at a time; if you play the movie it will  play each scene concurrently.  1.  Click on the Window menu  2.  Choose Toolbars  3.  Choose Controller  or 

Use Play, Stop, Forward,  Rewind  buttons 

Playing the Frames in the Flash Player 
Click Ctrl+Alt+Enter  Or  1.  Click on the Control menu  2.  Choose Test Scene  Flash exports the scene to a Shockwave Flash Format file  and opens it in Flash Player.  This .swf file takes the same name as the Flash movie  3.  Press Escape to stop the scene  4.  Closing the window returns you to the flash scene 

Adding More Frames to Make the Animation Smoother 
This first movie is not very smooth and a bit crude. By adding more  keyframes and moving the circle in each one, the bouncing ball can appear  smoother.  Before you add more keyframes, switch on onion skinning. This allows you  to see the circle in context with the other circles in the keyframes. 

Switching on Onion Skinning 
1.  Click on the Onion skin icon  on the Timeline  2.  Click on the right Onion  skin marker  3.  Drag it so it extends over  all the frames you are using  This is what you will see on the  stage  Onion  skin

81 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Frame­by­Frame 

Onionsking Icons 
Onion skinning shows dimmed or outlines of the content of your other  frames in the animation. This helps if you need to align shapes and in  refining your animation.  Modify  Onion  markers

Turns on Onion  skinning 

Onion skin  outlines 

Edit  multiple  frames 

Happy Computers 020 7375 7300 

82 

Frame Rate 
The Frame Rate controls the speed at which Flash will show the images. If  the frame rate is too high, the movie will appear as a blur, if it is too slow,  the viewer will actually see each frame as separate images. A good frame  rate setting for animation over the web is 12fps. 

Setting the Frame Rate 
In the frame rate box on the Timeline,  Double­click the frame rate  Document Properties dialogue box  opens up 

Enter a value for the frame rate  Press OK 

Slowing Down the Animation 
Another way of slowing the animation is to add blank frames between the  keyframes  1.  Select keyframe 1  2.  Click on F5  3.  Select the second keyframe  4.  Click F5  5.  Repeat the steps so there is  a blank frame between  each keyframe 

This inserts a Frame 

6.  Press Ctrl +Alt + Enter to  test the scene Blurred animation  If the animation appears blurred in the movie, try reducing the  frames per second (fps).

83 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Motion Tweening 

Animation: Motion Tweening

Happy Computers 020 7375 7300 

84 

Motion Tweening 
Frame­by­frame animation produces large files and is a lot of work. So,  Flash gives you an alternative, which is Tweening.  Tweening is when you  instruct Flash to fill in the frames in between (this is where "tweening"  come from) the keyframes.  What can Flash Motion Tween? · · · Symbols Grouped objects Text

Examples of Motion Tweening · · · · Animating objects that change colour Animating objects that fade out Animating objects that change size Animating objects that move 

Animating Objects that Change Colour 
Here the colour changes, but all you do is choose the starting and ending  colours and Flash will motion tween the in between frames.  I.e. the colour  will change gradually between the two keyframes.  1.  Create a new Flash  document  2.  Rename the layer  3.  Ensure Keyframe 1 is  selected  4.  Drag an instance of a  symbol onto the stage  5.  From the properties  inspector choose the  motion tween  6.  Select the frame that you  want to end the animation  to end on  7.  Press F6  (Or open one containing symbols,  ensure that you are on a new layer,  and then go to step 6)  Make the name something that’s  appropriate for the content 

A keyframe is inserted 

8.  With your frame still

85 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Motion Tweening 

selected, use the pointer to  select the object on the  page  Using the Property inspector  9.  Click on the down arrow  next to Colour 

10.Choose Tint  11.Change the colour  12.Ctrl + Alt + Enter to view  the scene 

Flash recolours the shape in  the in­between frames 

Animating Objects that Fade Out 
It is possible to "tween" an object so the colour fades. This example will  show the object’s colour fade in and out.  1.  Create a new Flash  document, scene or layer  2.  Rename the layer  3.  Select frame 1  4.  Drag an instance of a  symbol from the library  5.  Choose Create Motion  Tween from the properties  inspector  6.  Select your next keyframe  7.  Press F6  8.  Select the shape  9.  Click on the drop down next  to Colour on the Property  inspector 

A keyframe is inserted 

10.Choose Alpha  11.Change the % to 0 

12.Keep inserting keyframes  and changing the Alpha in  each until you have the  effect you want.  13.Press Ctrl + Alt + Enter to  view the scene

Happy Computers 020 7375 7300 

86 

Animating Objects that Change Size 
It is possible to "tween" an object so it enlarges then gets smaller. This  example will show a shape growing in size, and then shrinking.  1.  Create a new Flash  document, scene or layer  2.  Rename the layer  3.  Select frame 1  4.  Drag an instance of a  symbol from the library  5.  Choose Create Motion  Tween from the properties  inspector  6.  Select your next keyframe  7.  Press F6  8.  Click on the free transform  Tool  on the Tool box  9.  Change the size of the  shape by clicking and  dragging the corner handle  10.Repeat with as many  keyframes as you want to  include in your animation  11.Press Ctrl + Alt + Enter to  view the Scene  Time delay between objects animating  If there is a time delay between one object ending and  restarting, it may be that there are more frames being used for  one object, so all the frames have to run before they can start  again.  I.e. 

A keyframe appears 

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

87 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Motion Tweening 

Animating Objects to Move Across the Stage 
It is possible to "tween" an object so it moves across the stage. This  example will show a shape moving and rotating across the stage.  1.  Create a new Flash  document, scene or layer  2.  Rename the layer  3.  Select frame 1  4.  Drag an instance of a  symbol from the library  5.  Choose Create Motion  Tween from the properties  inspector  6.  Select your next keyframe  7.  Press F6  8.  Move the shape by clicking  and dragging it to  somewhere else on the  stage  9.  Repeat as many times as  you like  10.Press Ctrl + Alt + Enter to  view the Scene 

A keyframe is inserted  Cursor shape is a large black  arrow with a smaller four­  headed arrow attached to it 

Combine as many kinds of change as you want in your  motion tween – you can do all of them to the same  object with the same tween. 

Animating Objects to Move Across the Stage Using Guide Layers 
Guides layers allow you to draw a path for your shape to follow. A normal  layer is linked to this guide layer.  1.  Add a new Scene or layer  2.  Rename the layer  3.  Select frame 1  4.  Drag an instance of a  symbol from the library  Or  Copy & paste an image  from the web  5.  Select frame 1  6.  Choose Create Motion  Tween from your properties  inspector

Create a shape which that will  look different when rotated 

Happy Computers 020 7375 7300 

88 

7.  In your properties inspector  for the first frame of the  tween – choose Snap  This will ensure that the shape  snaps to your guide path when  you draw it  8.  Click in the last frame for  this animation  9.  Press F6  10.Click on the Arrow tool  if it is not already pressed  in  11.Move the object to the end  position  12.Click on the Add Guide  Layer icon 

A keyframe appears 

The Guide layer appears above  the original layer 

13.Switch on onion­skinning  14.Extend the skinning over all  the frames 

15.Click on the Pencil tool  16.Draw the pathway from the  centre of the first shape to  the centre of last shape 

Start from the centre  of the shape in frame  1 and end in the  centre of the shape in  the last frame 

Last position of  the shape

17.Press Ctrl + Alt + Enter to  view the scene 

89 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Motion Tweening 

Animating Objects to Move Across the Stage Matching the Shape‛s Orientation to the Path 
To make the movement of your shape look even more realistic, it is wise to  change the object’s position according to where it is moving to.  For example, if you had motion tweened a beetle to crawl across the stage,  it would look better if the beetle was facing the direction it was moving in 

The beetle is always  facing the left even  though the guide layer  changes direction. 

The beetle is always  facing the direction it  is moving in.

1.  Create your motion tween  as normal  2.  In the properties inspector  for your first frame on the  motion tween choose Orient  to Path  3.  Create your guide layer as  normal 

Happy Computers 020 7375 7300 

90 

Animation: Shape Tweening

91 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Shape Tweening 

Shape Tweening 
Difference between Motion & Shape tweening?  Motion tweening works on groups and symbols, whereas Shape  tweening uses editable shapes and either morphs them or  changes their colour.  You will see it is possible to arrive at the same animation effect using either  motion or shape tweening, i.e. the bouncing ball example Examples of Shape Tweening · · · · Morphing a simple shape into another Morphing letters/numbers Morphing one object into many objects Changing the colour of an object 

Morphing a Simple Shape into Another 
1.  Insert a new scene or layer  2.  Rename the layer  3.  Select frame 1  Why not use one of your existing symbols…however you  must “Break Apart” the instance otherwise you won’t be  able to shape tween it  1.  Drag an instance of the symbol onto the left side of  the stage  In this case it is a circle  2.  Click on the Modify menu  3.  Choose Break Apart  4.  either use an existing  symbol broken apart or  draw a shape on the stage  On the Property inspector  5.  Click on the Tween  downward arrow  6.  Choose Shape  7.  Click on the next frame you  want as a keyframe  8.  Press F7 

Blank keyframe is inserted and  frames 1­9 change to pale  green with a dashed line 

9.  Create a different shape on

Happy Computers 020 7375 7300 

92 

the right side of the stage  10.Press Ctrl+ Alt + Enter to  view the scene 

This is what the animation  looks like 

Aligning the Two Shapes 
When you run through the animation, you may notice the location of the two  shapes are different, as well as morphing into another shape, the shapes  actually seem to move. To prevent this from happening, you can use onion­  skinning, so you can position your shapes.  In the example below we are shape tweening a circle into a square in the  same location.  1.  Click on the Onion skin icon  below the Timeline  2.  Click and drag the markers  so you can see all the  frames  3.  Double­click the square to  select it  4.  Click and drag it so it is on  top of the circle 

5.  Click on the Outline icon for  this layer so you can only  see the outline for both  shapes 

6.  Now you can reposition the  shapes so they are exactly  on top of each other 

Use the arrow keys on the  keyboard to move the shapes  one pixel at a time 

7.  Press Ctrl + Alt +Enter to  view the scene

93 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Shape Tweening 

Morphing Letters/Numbers 
1.  Create a new scene  2.  Rename the layer  "character­morph"  3.  Select frame 1  4.  Click on the Text tool  In the Property inspector  5.  Format the text as you  want  6.  Click onto the stage  7.  Type a letter or word  8.  Single­click on keyframe 1  9.  Choose Shape tween from  the properties inspector  10.Click into the last frame of  your animation  11.Press F7  12.Click onto the stage where  you want the new text to  appear  13.Type a letter or word  14.Click on the first keyframe  15.Click on the Modify menu  16.Choose Break apart  17.Click on the second  keyframe and break those  letters apart too  18.Switch on Onion skinning to  reposition “the letters  19.Press Ctrl + Alt + Enter to  view the scene 

A new blank keyframe appears 

If you have a whole word or  sentence you might have to  break apart twice 

If this does not work, check in “Break apart” has been  chosen in both keyframes. 

Viewing Morphing using Onion Skins 
1.  Click on the Onion skin  outlines icon  2.  Click and drag the onion  skin markers so you can  see all the frames 

Morphing one Object into Many Objects 
1.  Create a new scene or layer

Happy Computers 020 7375 7300 

94 

2.  Rename the layer  3.  Select frame 1  4.  Create a shape or use a  broken apart symbol  5.  Single­click frame 1  6.  Choose shape tweening  from the property inspector  7.  Click on your last frame  8.  Click on F7  9.  Create other shapes around  where the original shape  was  10.Press Ctrl + Alt + Enter to  view the scene 

You decide on the fill colour  but for the stroke colour  choose none 

Again you decide on the fill  colour but choose none for the  stroke 

Changing the Colour of an Object 
1.  Create a new scene or layer  2.  Rename the layer"  3.  Select frame 1  4.  Create a shape  5.  Single­click on keyframe 1  6.  Choose Shape tweening  from the properties  inspector  7.  Click in your final frame  8.  Press F6  9.  Click on the Arrow tool  10.Select the shape in the  second keyframe if it is not  selected  11.Change the fill colour of the  shape to a colour of your  choice  12.Press Ctrl + Alt + Enter to  view the scene

You decide on the fill colour  but choose none for the stroke 

Duplicates the symbol from the  previous keyframe 

95 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animated Masks 

Animated Masks

Happy Computers 020 7375 7300 

96 

Animated Masks 
This type of animation is like a spotlight effect. The mask layer contains a  single shape and it is this shape that is the "spotlight", moving over a  background layer that shows through. 

Creating an Animated Mask 
When you create an Animated Mask the ‘background’  can be any image you want. 

Using an image from the Internet (be aware of  copyright)  1.  Find the image  2.  Right­click it  3.  Choose Copy  4.  Paste it onto the stage  5.  Right­click the image  6.  Choose Convert to Symbol  7.  Type a name for the symbol and choose a behaviour  (in this case it is a graphic)  The image is now an object in your library so can be  used again  View the entire stage before you start  1.  Click on the View menu  2.  Choose Magnification  3.  Choose Show Frame  1.  Open a new scene  2.  Rename the layer  3.  Click in frame 1 for the  ‘background’ layer  4.  Drag a graphic symbol from  the library onto the centre  of the stage  5.  Click in the timeline at the  last frame that you want in  your animation  6.  Press F6  7.  Click on the Insert new  layer icon  8.  Rename this new layer 

This will be our background  layer 

Background layer will be visible  for the length of your  movie  A keyframe appears  New layer appears above the  background  Calling it “Mask” is a good idea

97 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animated Masks 

9.  Click on frame 1 on the  mask layer  10.Draw a shape that you  want to be the mask  11.Click on frame 1 on the  “Mask” layer  12.Click on Modify menu  13.Choose Group 

The stroke & fill colours are  unimportant 

Shape appears with a line  around it 

Why do you need to group the object?  This is an animation using motion tweening, so you must use a  symbol or a grouped object. 

14.Create a motion tween on  the first frame of the Mask  Layer  15.Create a multi­stage tween  for the mask  16.Right click on the “Mask  Circle" layer name  17.Choose Mask 

Flash converts the  layer to a  mask which links and locks the  two layers. The stage might  look blank if you have used a  large image as backround. 

Both layers are now 18.Press Ctrl + Alt + Enter to  view the scene  What to do if it does not work  Check that the Mask layer is the top layer. 

Happy Computers 020 7375 7300 

98 

Buttons

99 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Buttons 

Basic Rollover Buttons 
Using buttons on your website can allow the user to interact with the Flash  movie. Buttons can be very basic and show static graphics – but can also be  made more interesting by animating when they are clicked or rolled over.  What is a button?  A button is simply a symbol with four frames. Three of the  frames denote the "state" of the button and the fourth one  defines the active area of the button. 

Frames in a Basic Rollover Button 
There are 4 frames in the timeline:  Up  Over  Down  Hit  This is what the button looks like before it has been clicked on.  This is what the button looks like when the cursor is positioned  over it.  This is what the button looks like when someone is pressing the  button.  This defines the area of the button. 

Creating a Basic Rollover Button that Changes Colour 
1.  Click on the Insert menu  2.  Choose New Symbol  Dialog box appears 

3.  Name the button  4.  Click Button behaviour  5.  Click OK 

Flash creates a new symbol in  the library and takes you to  the symbol­editing mode 

Basic button  By default the Up frame contains the keyframe, you must add  keyframes

Happy Computers 020 7375 7300 

100 

Creating the Up State 
(Continued from creating a Basic Rollover button: )  This object will be the button that is just sitting on the stage waiting for the  user to click it.  1.  Select the Up frame in the  Timeline  The crosshair,  ,  in the  middle of the stage serves as a  central point for placing new  or existing graphics on the  stage 

2.  Create a shape  Or  Drag an instance of a symbol  from the library  Align the symbol with the cross­hair  in the centre of the stage 

if you’re using an instance of a symbol, remember to  break the instance apart so that you can edit it in the  same way as a norma object  1.  Click on the Modify menu  2.  Choose Break Apart  or Ctrl + B 

Creating the Over State 
Here we are going to make minor changes to the Over graphic, so the user  knows when their mouse is on the button.  1.  Select the Over frame in the  Timeline  2.  Click on F6 

This keyframe duplicates the  contents from the previous  keyframe 

3.  Click on the Paint Bucket tool  on the Toolbox  4.  Click on the Fill colour icon  5.  Choose a different colour 

Shape in the over state has  changed colour 

Creating the Down State 
Now we are going to make minor changes to the Down graphic, so the user  sees a slightly different colour when they click the button (i.e. when the  button is being pressed down).  1.  Select the Down frame in  the Timeline

101 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Buttons 

2.  Click on F6 

This keyframe duplicates the  contents from the previous  keyframe 

3.  Click on the Paint Bucket  tool on the Toolbox  4.  Click on the Fill colour icon  5.  Choose a different colour 

Shape in the over state has  changed colour 

Creating the Hit State 
This is the area around the button that is active.  1.  2.  Select the Hit frame in the  Timeline  Click on F6 

This keyframe duplicates the  contents from the previous  keyframe 

Changing the look of the button in the Hit state is  unnecessary. To the user it is an invisible part of the  button that will have an effect when they click on it.  In  editing mode you may see it as a semi­transparent light  blue shape. 

Previewing the Button in the Movie-Editing Mode 
1.  Click on the Scene name.  In the top left corner of the  Timeline  This will move you back to  your current scene. 

2.  Click F11  3.  Drag an instance of the  button onto the stage 

This shows the Library  Ensure the button is  deselected, you may need to  click on the Arrow tool then  click on the stage 

4.  Click on the Control menu  5.  Choose Enable Simple  Buttons  6.  Test out your button by  clicking on it 

You will be able to see all 3  "states"

Happy Computers 020 7375 7300 

102 

Previewing the button by testing the scene  Press Ctrl + Alt + Enter to view the current scene 

Don't forget to switch off Enable Buttons!  1.  Click on the control menu  2.  Click on Enable Simple Buttons (so there is no tick) 

To edit the instance and edit the symbol ­ see page 75

103 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Buttons 

Buttons with Text 
It is easy to create buttons with text within them. Changing the look of the  text in each state indicates when the user has moved the mouse over the  button. 

Summary of Steps
· · · Create the button Add the text Testing the scene 

Creating the Button 
This is the example we are going to create.  Up State  Over State  Down State 

Text in black 

Text in Orange 

Text in grey 

1.  Create a new scene if  needed  2.  Click on the Insert menu  3.  Choose New Symbol  4.  Name the button  5.  Click on the Button  behaviour  6.  Click OK  7.  Draw out the shape of your  button or use an instance of  a symbol (don’t forget to  break it apart) 

Adding the Text 
1.  Click on the Text tool icon  on the Toolbox  1.  On the Property inspector  make any changes you want to  the text style  2.  Click in the centre of your  button  3.  Type the text that you’d  like to have on your button  4.  Click on the Arrow tool You could create a new layer  within the button to put the  text in 

Happy Computers 020 7375 7300 

104 

5.  Position the text so it is in  the centre of the shape  Moving objects on the stage  Use the arrow keys on the keyboard to move the text – you  can be more accurate this way  6.  Click in the Over frame  7.  Press F6  8.  Click away from the button  onto an empty part of the  stage  9.  Make any changes you  want to your button or the  text  10.  Click in the Down frame  11.  Press F6  12.  Click away from the  button onto an empty part  of the stage  13.  Change the font  colour to grey  14.  Click in the Hit frame  15.  Press F6 

Inserts a Keyframe  This will de­select everything 

Inserts a Keyframe 

Inserts a Keyframe 

Testing the Scene 
1.  Click on the Scene name to  return to the stage  2.  Drag an instance of the  button onto the stage  3.  Click on the Control menu  4.  Click on Enable Simple  Buttons  5.  Test out your button by  clicking on it  F11 if the Library is not visible 

You will be able to see all 3  "states"

105 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Buttons 

Buttons that Change Shape 
It is possible to use Flash to create buttons that have different and  imaginative shapes. 

Creating the 4 States in a Button 
1.  Create a new scene if  needed  2.  Click on the Insert menu  3.  Choose New Symbol  4.  Name the button  5.  Choose Button behaviour  6.  Click OK 

Flash creates a new symbol in  the library and takes you to  the symbol­editing mode 

7.  Click on Onion skin icon in  the Timeline 

8.  Select the Up keyframe  9.  Choose a colour for the fill  and stroke  10.Create a shape for your  button 

11.Move the shape so it is in  the centre of the stage by  using the align panel.  Have To Stage selected  Choose Align Vertical  Centre and Align Horizontal  Centre  12.In each of the states for the  button press F6  13.In the Over state use the  Transform Panel to make  the shape a different  percentage size  14.In the Down state use the  Transform Panel to make  the shape a different  percentage size  15. In each state use the Align  panel to ensure the shape  You will get a duplicate of your  shape in each one 

This ensures that your button  stays in the same place at

Happy Computers 020 7375 7300 

106 

is central to the stage  16.Return to the scene by  clicking on the scene name  17.Drag an instance of the  button onto the stage  18.Click on the Control menu  19.Choose Enable Simple  buttons  20.Test the button 

each state 

3 States of the Button 
Up state  Over  state  Down state 

If the shapes in the Up, Over and Down states are all  different then in the hit state it is advisable to create  another shape that covers all three shapes. Otherwise  the viewer may not be able to interact with some parts  of the button.

107 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Buttons 

Invisible Buttons 
When you create a button you don’t have to put an object onto every state.  In fact, the only frame that must have some content is the Hit frame.  Buttons with no content in the Up, Down and Over frames are invisible in the  final movie.  In this example, there is some text on the stage and the user can click  anywhere on the stage to move to the next frame in the movie. Because  there is content only in the hit frame the button is invisible, The user can  click anywhere on the stage. In this example you will add two frame actions  and one object action.  1.  Click on the File menu  2.  Choose New  3.  Name the layer  4.  Click in the first frame  5.  Click on the Text tool  6.  Click in the centre of the  stage  7.  Type some text  8.  Use the Arrow tool to  position the text in the  centre of the stage  9.  Ensure frame 1 is still  selected  10.Click on the Insert menu  11.Choose New Symbol  12.Name the symbol  13.Choose the behaviour  Button  14.Click OK  15.Select the Hit frame  16.Press F7  17.Click on the Rectangle tool  18.Create a rectangle as large  as the stage 

This layer will contain the text 

This is going to be your  invisible button 

Inserts a blank keyframe 

This rectangle turns the entire  stage into a button and since  there are no objects in the  other button frames, the  button is invisible 

19.Click on the scene name to  return to the movie­editing  mode  20.Click on the Insert layer  icon  21.Name the new layer 

This layer will contain your  actions so it would be good to 108 

Happy Computers 020 7375 7300 

name it ‘Actions’  22.In the timeline, drag this  layer to the bottom of the  stacking order  23.Click on the first frame on  the “Actions” layer  24.Click on the Window menu  25.Choose Actions  26.Click on Global Actions  27.Choose Timeline Control 

28.Click on Stop 

The stop action will appear in  the right hand side of the  panel 

29.Close the Actions panel  30.Open the Library if it isn’t  open already  31.Click on the first frame on  the layer that contains the  text  32.Drag an instance of your  invisible button onto the  stage  33.Reposition the button so it  covers the stage 

F11 

To increase the size of a shape  1.  Click on the shape on the stage  2.  Click on the Free Transform tool icon on the toolbox  3.  Click and drag any corner handle to increase the size  of the shape  This time you’ll be applying the  34.Click on the rectangle on  action to the button rather  the stage to select it  than the frame itself  35.Click on the Windowmenu  36.Choose Actions > Global  Functions > Timeline  control  37.Make sure that Script Assist  is turned on by clicking the  button  38.Double­click the Go to 109 
Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Buttons 

action  39.In the Action Script Assist  panel fill in the number of  the scene and frame you  want to go to  ­ in this case  the current scene and  frame 2 

40.Close the Actions panel  41.Click into the second frame  on the content layer  42.Press F7  43.Click on the Text tool  44.Click on the stage  45. Put in some different  content 

Inserts a blank keyframe 

You can add some animation here so after the user has  clicked on the stage some animation is played. 

46.Press Ctrl + Enter  The movie loops, so you  need to add another STOP  action in the final frame  47.Click on the final frame on  the “Actions” layer  48.Press F7  49.Click on the Window menu  50.Choose Actions > Global  Functions > Timeline  Control  51.Double­click the STOP  action  52.Press Ctrl+Enter to view  the movie

Inserts a blank keyframe 

Timeline should look like this 

Happy Computers 020 7375 7300 

110 

Buttons with Multiple Hotspots 
Buttons don’t always have to behave as a button or switch, but can be used  as a fun element of your movie. In this example the Hit frame has nothing to  do with the graphics of the button, but as a separate graphic.  This example is a game for the user, where they try to find a bean under the  cup. If the user chooses the wrong cup a message will appear and when  they find the correct cup another message appears.  1.  Click on the File menu  2.  Choose New  3.  Click on the View menu  4.  Choose Grid  5.  Select Show Grid  6.  Create 5 cups in frame 1 

To create a cup use the Oval  tool then delete the bottom  part of the oval and use the  pencil with the smooth option 

The easiest way to select an object is to click and drag  around it (with the arrow tool switched on) 

7.  Select 4 of the cups  8.  Click on the Edit menu  9.  Choose Copy  10.  Click on the Insert menu  11.  Choose New Symbol  12.  Choose Button as the  behaviour  13.  Type a name for the  button  14.  Click OK  15.  16.  17.  18.  19.  20.  21.  Click on the Hit frame  Click F7  Click on the Edit menu  Choose Paste  Click on the Down frame  Click F7  Click on the Type tool

Use Shift key and click each  cup 

You are in symbol­editing  mode  Inserts blank keyframe  Flash pastes the 4 cups in the  centre of the stage 

111 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Buttons 

22.  Type a message the  user will see when they  click on the wrong cup  23.  Position the text below  the cups  24.  Click on the scene name 

Returns you to movie­editing  mode 

Flash shows the cups as a  transparent preview  25.  Position the hotspot  cups so they are on top of  the cups  26.  Do the same for the  remaining cup  See steps 7­25  27.  Click on Ctrl + Alt +  Enter to test the scene

Happy Computers 020 7375 7300 

112 

Actions

113 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Actions 

Actions 
In animation, Flash plays the scenes your movie in sequence. However, in  an interactive movie, your audience plays a part in the movie. This might be  by using the keyboard, the mouse to jump to different parts of the movie,  move shapes, enter information and do lots more.  You can make your movie interactive by using actions, which are  instructions written in ActionScript. An action is like a statement or a  command.  2 types of Actions  §  Frame actions  Requires nothing from the user, when the playhead  reaches the frame with the action, it just goes ahead and  runs the action  §  Object actions  These actions are played when the user does something  ie clicks on a button  Actions can also be assigned to a movie­clip that responds to  the user doing something or runs when the movie is first  played. 

In the actions panel there is a button called Script Assist – turn this on to  get help creating your action script 

To turn on Script Assist  This manual only refers to and creates actions using Script  Assist mode. Check you you have Script Assist turned on for  ActionScripting before you add an action  1.  Click on the Window menu  2.  Choose Actions  3.  Click the Script Assist button  More than one action can be added to the same  frame/button. They will occur in the order they appear  in the Actions dialog box. 

Object Actions Dialog Box 
1.  Click on the Window menu

Happy Computers 020 7375 7300 

114 

2.  Choose Actions 

You can open and close the Action  Script window as you need  3.  Click on the arrow at the  top of the panel  The actions we will be using are in the Global Functions  and then Timeline Control 

Organising Actions 
1.  Add a new layer  2.  Rename the layer Actions  3.  Drag this layer to the  bottom or the top  This will make it easier for you  to find it – you can put your  frame actions here 

It is good practice to lock the “actions” layer  This will prevent you from accidentally adding any graphics to  this layer. 

Adding a  stop and go to Action to a Button Instance 
Why do I need a  stop action?  This is to prevent the movie from looping continuously. 

1.  Open a new Flash  document  2.  Rename the layer “text”  3.  Click in frame 1  4.  Click on the text tool  5.  Click anywhere on the stage  6.  Type “Scene 1 frame 1”  7.  Click in frame 2  8.  Press F6  9.  Change the text so it reads  “Scene 1 frame 2”  10.  Insert a new layer  11.  Click and drag it to the  bottom of the layers list

Duplicates from frame 1 

115 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Actions 

12.  Rename this layer  “actions”  13.  Click in frame 1 of the  “actions” layer  14.  Click on the Window  menu  15.  Choose Actions  16.  Choose the Actions  category  17.  Click on Global Functions  > Timeline Controls  18.  Double­click stop  action  19.  Select frame 1in the text  layer  20.  Drag an instance of a  button onto the stage 

Stop action is added to the  Actions list 

Instead of recreating a symbol use an existing one from  another Flash document  1.  Click on the File menu  2.  Click on Open as Library  Find the Flash document  21.  Select the button  22.  Ensure the Actions panel  is open  Make sure Script Assist is  turned on  23.  Choose Global Functions  > Timeline Controls  24.  Double­click go to  action  25.  For the Scene and Type,  do not change anything  26.  For the Frame number,  change to 2  27.  Choose the Go to and  Stop option 

Actions appear in the right side  of the screen 

If you don’t choose this your  movie will play then continue  to loop 

28.  Click on the Control  menu  29.  Choose Enable Simple  Buttons  30.  Test the button 

Deleting an Action 
1.  Open the Actions panel  2.  Select the action to delete

Happy Computers 020 7375 7300 

116 

3.  Click on the 

icon 

Some actions are straightforward is Stop, Play & Go To,  others such as FS Command & Set Property require a  certain amount of programming knowledge. 

Adding Frame Labels and Comments 
In some actions you need to specify a particular frame, instead of referring  to the frame number it is safer if you refer to them by a name, so you know  you have the right one. For example, if you add or remove frames you will  not need to change the frame number for the action as Flash will still find  the frame by the label name.  For frames that are not used in actions, you can add comments to them  describing what it going on.  You cannot add a label and a comment to the same  frame. 

Labelling a Frame 
1.  Select the frame in the  timeline  On the Property inspector  2.  Type a name for the frame 

3.  Deselect the frame in the  timeline  4.  You can also choose a label  type from the dropdown  list 

A small red flag appears in the  frame 

You can choose Name,  Comment or Anchor

117 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Movie­Clips 

Animation: MovieClips

Happy Computers 020 7375 7300 

118 

Movie-Clip Symbols
Movie-clip symbols 
There are 2 types of animated symbols · Graphic symbols · Movie clips  An animated graphic symbol uses the timeline of the movie it has been  placed into, whereas a movie­clip symbol has its own timeline.  Movie­clips are able to retain their interactivity, because they do have their  own timeline to which you can add actions. Graphic symbols lose some of  their interactivity when they are converted into a graphic symbol.  This example is of a button, with a movie clip inside the Over frame. When  the user moves their mouse over the button and clicks on the button, an  animation will play, which will be the border of the button getting larger and  fading out. 

Summary of Steps
· · · · · Create a basic rollover button Creating the graphic symbol Creating the movie­clip Editing the button Testing the button 

Create a Basic Rollover Button 
1.  Create a new Flash document  2.  Click on the Insert menu  3.  Choose New Symbol  4.  Name the button "Circle button"  5.  Select the Button behaviour  6.  Click OK  7.  Select the Up frame  8.  Click on the Oval tool on the  Toolbox  9.  Change the line thickness to 4  and the line colour to black  10.Change the fill colour to a colour  of your choice  11.Create a perfect circle  12.Click on the Over frame  13.Press F6 

Use the crosshair to postion it in  the centre of the stage  Inserts a keyframe

119 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Movie­Clips 

14.Click on the Over frame  15.Press F6  Inserts a keyframe  16.Click on the stage to deselect the  circle  17.Click once to select the stroke  18.Press Delete on the keyboard  19.Right click on the Over keyframe  20.Choose Copy frames  21.Right click in the Hit frame  22.Choose Paste frames  23.Click on the Scene name  Returns to movie­editing mode  Open the Library if it isn't open already  F11 

Creating the Graphic Symbol 
This graphic symbol will be used to create the movie­clip. A button is used  so the shape of the button remains constant.  1.  Drag an instance of the  button onto the stage  2.  Click on the Modify menu  3.  Select Break Apart  4.  Click on the stage to  deselect the shape  5.  Click on the fill of the shape 

Appears selected 

6.  Press Delete on the  keyboard 

Shape appears with only the  outline 

7.  Click once to select the  stroke  8.  Click on the Insert menu  9.  Choose Convert to Symbol  10.Name the symbol “outline”  11.Choose Graphic as the  behaviour  12.Click OK  13.Press Delete 

This will delete the instance  from the stage 120 

Happy Computers 020 7375 7300 

Creating the Movie Clip 
1.  Click on the Insert menu  2.  Choose New Symbol  3.  Name the new symbol “circle  animation”  4.  Choose Movie clip as the  behaviour  5.  Click OK  6.  Drag an instance of "outline" onto  This will form the basis of "circle  the stage  animation"  7.  Line "outline" up with the  crosshair on stage  8.  Click on Frame One of the Movie  Clip  9.  Choose Create a Motion Tween  from the Properties Inspector  10.  Click on frame 20  11.  Press F6 

On the Property inspector  12.  Click on the drop down arrow  for Colour  13.  Choose Alpha  14.  Change the Alpha setting to  0%  15.  Press Enter 

This is transparency 

Symbol will disapper except for  selection box around it 

16.  Click on the Transform panel  17.  Change the Scale option to  400%  18.  Insert a new layer 

Icon is in the bottom left of the  Timeline 

19.  Rename this layer “actions”  20.  Drag it to the bottom of the  list of layers  21.  Click on frame 20 on the  “actions” layer  22.  Press F7  23.  Click on the Window menu  24.  Choose Actions  25.  Select Global Functions >

Inserts a blank keyframe 

121 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Animation: Movie­Clips 

Timeline Controls  26.  Double­click the Stop  action  27.  Close the Actions panel 

This is what the Timeline should  look like for the Movie­Clip 

28. 

Click on the Scene name 

Returns to movie­editing mode 

Editing the Button 
1.  Right click on the button in  the library  2.  Choose Edit  3.  Insert a new layer  4.  Click in the Over frame in  the new layer  5.  Press F7  6.  Drag an instance of the  movie clip onto the button  7.  Line up the movie clip  “circle animation” with the  crosshair on the stage  8.  Select the Down and Hit  frames  9.  Press F7  10.Click on the Scene name 

Inserts blank frames  Returns to movie­editing mode 

Testing the Button 
1.  Drag an instance of the button onto the stage  2.  Test the scene  Ctrl + Alt + Enter  3.  Move the cursor over the button and click

Happy Computers 020 7375 7300 

122 

Movie Explorer

123 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Movie Explorer 

Movie Explorer 
As you add text, graphic symbols, buttons and actions to your movie, it can  be quite difficult to keep track of what is in each scene and layer. The Movie  Explorer is a way for you to find and track different elements in your movie. 

Using the Movie Explorer 
1.  Click on the Window menu  2.  Choose Movie Explorer  This is the name of the  scene  This is the only object on  the stage at the  moment. FrameLayer name  Symbols in this  document. 

CusList of  symbols  tom set  Text  Buttons,  Movie  clips and  Video  Click here  ActionScrip  Frames  and 

Movie Explorer can slow down your machine!  Because it constantly updates, Flash can slow down  considerably, even if it is only sitting open on your screen.  So only open it when you are ready to use it. 

Finding a Symbol from Movie Explorer 
1.  Right­click on a symbol name in Movie Explorer  2.  Choose Find in Library  Symbol appears in the Library  If the Library is not open, it will open showing the symbol 

Happy Computers 020 7375 7300 

124 

Editing a symbol  Just double­click the symbol name in Movie Explorer and it will  take you to the symbol­editing mode. 

Renaming a scene  Just double­click the scene name in Movie Explorer and rename  the scene. 

Changing the contents of a text box  Just double­click the text in Movie Explorer and change the  text. 

Finding an Element 
1.  Click in the Find field 

2.  Type the text  3.  You do not have to press  enter as Flash will start the  search as soon as there is  text in the box 

Printing the Levels 
1.  Change the display so it is  how you want it  2.  Click on the Options menu  3.  Choose Print

125 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Interactive Movies 

Interactive Movies

Happy Computers 020 7375 7300 

126 

Interactive Movies 
An interactive movie involves your audience, by using the keyboard, mouse  or both. Your audience will be able to jump to different parts of your movie  and perform many other functions. An interactive movie is a collection of  scenes, buttons and actions.  Pictorially, this is what a simple interactive movie could look like. 

Main  Clicking  on the  Contact  Us button  will go to  the  Contact  Products  Clicking  on the  Products  button  will go to  the 

Scene  name ­  Main  Main 

Products  Contact

Contact  Products 

Scene  name –  Contact 

Scene  name ­  Products 

Creating interactive movies 
Summary of steps · · · · · · · · · Creating a new movie & modifying the properties Creating a layer for your buttons Inserting instances of buttons onto a scene Adding more buttons Duplicating and renaming each scene Adding some text to each scene Add the relevant Actions to each button Adding the Get URL action to "Contact Us" button Adding the Get URL action to a URL 

127 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Interactive Movies 

· ·

Add a Stop action to each scene Testing the Movie 

Creating a New Movie & Modifying the Properties 
Change the colour of the stage here, so you don't have to keep doing it.  1.  Click on the View menu  2.  Choose Magnification  3.  Choose Show Frame  4.  Click on the File menu  5.  Choose New  6.  Change the background  colour to one of your  choice) 

Creating a Layer for Your Buttons 
This will be a different colour background only at the top of the stage for  your buttons to sit on.  1.  Rename the layer Headings  2.  Click on fame 1 of this layer  Create the following using Aligning Shapes on page 51  The colour of the rectangles is pale grey (#ffffff) 

Inserting Instances of Buttons onto a Scene 
Here you will create 3 lozenge shaped buttons with the text Main, Contact  and Products and place them on the largest rectangle on the background  layer. For the buttons, the text in the Up state will be black, the Over state  will be orange and the Down state will be grey. 

1.  Create a new layer  2.  Rename it "Buttons"

Happy Computers 020 7375 7300 

128

3.  Select frame 1 of this layer  Already created the button elsewhere and you don't  want to recreate it?  1.  Click on the File menu  2.  Choose Open as Library  3.  Open the Flash document  4.  Find the button  5.  Drag an instance to the stage  The symbol is now in the Library of this movie too  4.  Drag an instance of "button  with text" onto the stage  Before you start using this instance of the button, you  may want to make changes to it.  1.  Right­click the instance on the stage  2.  Choose Edit  3.  Make your changes  In this example I have reduced the size of the button so  it fits on the rectangle and removed the stroke so the  button blends in to the grey background  5.  Click on the Arrow tool  6.  Move the shape to the top  left side of the stage largest  rectangle 

You now need to duplicate this button  7.  Right­click the name  "button with text" in the  Library  8.  Choose Rename  9.  Type “main menu”  10.  Right­click the “main  menu” button in the library  11.  Choose Duplicate  12.  Type "Products"  13.  Click OK  14.  Right­click "Products"  15.  Choose Edit  16.  Click on the Up  keyframe

You are now in symbol­editing  mode 

129 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Interactive Movies 

17.  Double­click the text in  the shape  18.  Type "Products"  Repeat the above for the  remaining 3 states of the  button  19.  Click on the Scene name  20.  Right­click on "main  menu" in the Library  21.  Choose Duplicate  22.  Type "Contact Us"  23.  Click OK  24.  Repeat the steps from  above for this button so it  has the correct text  25.  Click on the Scene name  26.  Add an instance of each  button on to the stage  27.  Click on the arrow tool  and position the buttons  equally on the rectangle 

Returns you to movie­editing  mode 

You can also use the Align panel to realign the three  buttons  1.  Click on the Window menu  2.  Click on Panels  3.  Choose Align  4.  Click on Align Vertically Center  5.  Click on the Distribute Horizontal Center  Creating Buttons with Type  See page 104 

Adding more Buttons 
Duplicate the "main menu" button. Call one "Email" and the other "URL".  Edit both, so they have the correct text in the label. 

Duplicating & Renaming Each Scene 
Referring to the diagram on page 127, we have just created the first scene  with 3 buttons. We need to create two more scenes.  The easiest way to do  this is to duplicate the scene and rename each one.  1.  Click on the Window menu  2.  Choose Panels  3.  Select Scene

Happy Computers 020 7375 7300 

130 

4.  Double click the current  scene name  5.  Type “Main”  6.  Press Enter  7.  Click on the Duplicate  Scene icon  8.  Double­click "Main copy"  9.  Type "Contact"  10.  Click on the Duplicate  Scene icon  11.  Double­click the new  scene name  12.  Type “Products”  13.  Close the Scene panel  To move to another scene  Click on the Edit Scene icon  in the bottom right  corner of the Timeline  See the scene name in the bottom left corner of the  Timeline 

Adding Some Text to Each Scene 
1.  Click on the Edit Scene icon  in the top right corner  of the Timeline  2.  Choose Main  3.  Click on the Text tool  4.  Type “this is the main  screen”  5.  Click on the Edit Scene icon  6.  Choose Products  7.  Type “This is the products  screen”  8.  Click on the Edit Scene icon  9.  Choose Contact  10.Drag an instance of the  button Email onto the stage  11.Drag an instance of the  button URL onto the stage 

Now each scene has something  different on it 

Adding the Relevant Actions to Each Button 
Now that everything is set up, all you need to do is add the actions to the  buttons!

131 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Interactive Movies 

1.  Ensure you are in the Main  scene  2.  Click on the Arrow tool  3.  Click the "Products" button  on the stage  4.  Click on the Window menu  5.  Choose Actions  6.  Make sure Script Assist is  turned on  7.  Click on Global Functions >  Timeline Control  8.  Double­click the Goto  action  9.  Click on the down arrow for  Scene  10.  Choose "Products"  11.  Leave the type as Frame  number  12.  Leave the frame number  at 1  13.  Click on the Go to and  Stop button 

This is what the action should  look like 

Remember you don’t need to add any action to the Main  Menu button – since you are already on the scene. 

14.  Click the "Contact Us"  button and follow the steps  above, but choose "Contact  Us" scene in step 7  15.  Go to the "Contact Us"  scene and do the same for  the Main Menu and  Products buttons  16.  Go to the "Products"  scene and do the same for  the Main Menu and Contact  Us buttons  Button actions should be added to the instance on the  stage rather than the symbol in the library.

Happy Computers 020 7375 7300 

132 

Removing an action  If you accidentally add the wrong action, just click on the  minus,  –, sign on the Actions panel.

133 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Interactive Movies 

Adding the Get URL Action to the "Contact Us" Button 
As well as giving your audience buttons to navigate your movie, you may  also want them to view other relevant websites and email you. Both of these  are done using the Get URL action.  1.  Go to the Contact scene  2.  Click the "Email" button  3.  Click on the Window menu  4.  Open the Actions panel  5.  Choose Global Functions >  Timeline Conrol  6.  Click on the  Browser/Network category  7.  Double­click the Get URL  action  8.  In the URL box, type  mailto:me@wherever.wher  ever  9.  Click on the down arrow by  Window  10.Choose  _self  11.In the Variable box, change  it to Send using POST 

Adding the Get URL action to a URL 
1.  Click the "URL" button on  the "Contact Us" scene  2.  Double­click the Get URL  action  3.  In the URL box, type  http://www.happy.co.uk  4.  Click on the down arrow by  Window  5.  Choose  _blank  6.  In the Variable box, ensure  it says “Don’t Send”  Which window do I choose?  You probably don't want your audience to lose your website if  they click on the URL button, so targeting it to a blank browser  means they can always come back to your website.  ._self  Opens in the same  browser window  Opens in a new browser  Opens in main frameset

._blank  ._parent 

Happy Computers 020 7375 7300 

134 

._top 

Opens in other frameset 

If you test the movie now (Ctrl + Enter), it may loop  through all the frames continuously. So you now need to  add some Stop actions to each scene (see below). 

Adding a Stop Action to Each Scene 
1.  Click in the "Main" scene  2.  Add a new layer  3.  Rename it "Actions"  4.  Click on the Window menu  5.  Click on the Actions  6.  Choose Global Functions >  Timeline Conrol  7.  Double­click the Stop  action  Ensure it is the top layer 

It appears in the Action list on  the right side of the dialog box 

8.  Add a new layer and the  Stop action to the other  two scenes 

Testing the Movie 
1.  Press Ctrl+Enter  browser  2.  Click on the Close to close the browser Shows movie in the 

135 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Testing & Publishing 

Testing & Publishing

Happy Computers 020 7375 7300 

136 

Testing & Optimising Movies
Optimising your Movie 
See Optimising Movies p 145 

Testing using the Controller 
This is a quick and easy way of testing animation without leaving the  authoring environment.  1.  Click on the Window menu  2.  Choose Toolbars  3.  Choose Controller  4.  Use the controls to play the  movie 

Enabling Buttons & Frames 
1.  Click on the Control menu  2.  Choose Enable Frame  Actions  or Choose Enable Simple  Buttons 

Testing Scenes/Movies 
Instead of testing individual parts of the movie, why not test a scene at a  time or even the complete movie. 

Testing Download Performance 
1.  Open the scene you want to  test  2.  Click on the Control menu  3.  Choose Test Scene/Movie  4.  To return to the authoring  environment, click on the  second cross in the top  corner

Ctrl+Alt+Enter 

137 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Testing & Publishing 

Testing Download Speeds 
1.  Click on the Flash Player’s Debug menu  2.  Choose a downloading speed  14.4 Kbps  28.8 Kbps  56 Kbps 

View the Bandwidth Profiler 
1.  Click on the Flash Player’s  View menu  2.  Choose Bandwidth Profiler  A graph is displayed 

Shows  information 

Each bar represents a  frame. The size  corresponds to the  frame’s size in bytes 

The red line  is what  indicates  how the  frame will  Anything above  the red line  means the  Light and dark grey  blocks show each  frame, its size is  relative to byte size

3.  Close the window 

Returns you to movie­editing  mode 

View the frames which will cause pauses  1.  Click on the Flash Player’s View menu  2.  Choose Streaming Graph 

What is Streaming?  This is a technique which allows the movie to start playing  when only part of it has been downloaded. If this works fine,  then the movie should play smoothly. 

Happy Computers 020 7375 7300 

138 

Publishing

139 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Publishing 

Publishing your Movie 
The aim of creating a Flash movie can be to have it published onto a CD­  ROM as a stand­alone application.  However, the most common aim is to  publish them for use on the Web (or an intranet).  Before Flash movies can be viewed on the web, they need to be inserted into  an HTML file. Don't worry at this point about having to know any HTML!!  Flash will do it all for you ­ all you have to do is amend a few settings. 

Publish Movie for the Web 
1.  Ensure nothing on the stage  is selected  On the Property inspector  2.  Click on the Publish:  Settings  button 

3.  Ensure you are on the  Formats tab 

4.  Ensure Flash & HTML as the  type are selected  5.  Click on the HTML tab  6.  Leave the Template setting  on “Flash only”  7.  Change the dimensions to  Percent  8.  Remove the tick from Loop  9.  Click on the Flash tab 

This creates a Shockwave  Flash file (.swf) and HTML file  (.htm) 

Prevents the movie from  continuously playing 

Generating a report listing the data in the final Flash  Player file  1.  On the Flash tab, click on Generate Size Report  10.  Click on Publish

Happy Computers 020 7375 7300 

140 

11.  12. 

Click OK  Click F12 

Viewing the Flash Movie in Internet Explorer 
1.  Open Internet Explorer  2.  Click on the File menu  3.  Choose Open  4.  Choose Browse  5.  Find the HTML document  6.  Double­click the file  7.  Click OK  Viewing the report  1.  Open Word  The report is generated as a .txt file  2.  Click on the Open dialog box  3.  Navigate to the folder containing your .swf files  4.  Choose All Files in Files of type  5.  Double­click the file  The name of the report is the name of the Flash  movie with “Report” at the end 

This has just been created. The  file ha the icon 

Different Files Created 
Having published your movie, another file has been created, with an .html  extension.  When uploading to a webserver you will need to upload both the  .swf file and the .html file (it will not be necessary to upload the .fla file, as  that is the authoring file, rather than the finished product).

141 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Publishing 

Naming Files  You are not prompted to name any of the files. 

Does the size of your Flash document matter?  Your Flash file should not be larger than 700KB

Happy Computers 020 7375 7300 

142 

Appendices

143 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Appendices 

System Requirements
System Requirements 
The following hardware and software are required to author Flash movies:  §  For Microsoft® Windows: An Intel Pentium 200 MHz or equivalent processor  running Windows 98 SE, Windows ME, Windows NT 4.0, Windows 2000, or  Windows XP; 64 MB of RAM (128 MB recommended); 85 MB of available disk  space; a 16­bit colour monitor capable of 1024 x 768 resolution; and a CD­ROM  drive.  §  For the Macintosh: A Power Macintosh running Mac OS 9.1 (or later) or Mac OS  X version 10.1 (or later); 64 MB RAM free application memory (128 MB  recommended), plus 85 MB of available disk space; a colour monitor capable of  displaying 16­bit (thousands of colours) at 1024 x 768 resolution; and a CD­  ROM drive.  The following hardware and software are required to play Flash movies in a browser:  §  Microsoft Windows 95, Windows 98, Windows ME, Windows NT 4.0, Windows  2000, or Windows XP or later; or a Macintosh PowerPC with System 8.6 or later  (including OS X 10.1 or later).  §  Netscape plug­in that works with Netscape 4 (or later) in Windows, or works with  Netscape 4.5 (or later) or Internet Explorer 5.0 (or later) on the Mac OS.  §  To run ActiveX controls, Microsoft® Internet Explorer 4 or later (Windows 95,  Windows 98, Windows Me, Windows NT4, Windows 2000, Windows XP, or  later).  §  AOL 7 on Windows, AOL 5 on the Mac OS  §  Opera 6 on Windows, Opera 5 on the Mac OS

Happy Computers 020 7375 7300 

144 

Optimising Movies
· · · · · · · · · · Use tweened animation, rather than keyframes. Use symbols for every element that appears more than once. Solid lines use less memory. Using the pencil tool requires less memory than brush strokes. Use layers for separate objects that are animated over time. Limit the fonts and font styles. Limit your use of gradients; it takes more memory than filling  with a solid colour. Use alpha transparency sparingly, it slows down playback. Use Movie clips rather than graphic symbols. For sound use MP3, which is the smallest sound format.

145 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Appendices 

On MouseEvent Options 
Options  Press  What it does  Occurs when the mouse button is pressed  while the cursor is with the hit area of the  button  Occurs when the mouse button is release  within the hit area of the button  Occurs when the mouse button is released  while the cursor has been dragged outside  the Hit area  Occurs when the mouse cursor moves into  the hit area  Occurs when the mouse cursor is moved out  of the hit area  Occurs when the mouse button is held down  and dragged out of the hit area and then  back onto it  Occurs when the mouse button is clicked  with the hit area then dragged outside it  Can be used to specify a key on the  keyboard to trigger the action 

Release 

Release  Outside 

Roll Over 

Roll Out 

Drag Over 

Drag Out 

Key Press 

Actions within Global Functions 
Action name  Go to  Play  Stop  Toggle High  Quality  Stop All Sounds  Get URL  FS Command  Load/Unload  What the action does  Instructs the movie to jump to a specific frame  Instructs a movie to play  Stops the movie playing at a specific point  Displays graphics at a higher quality  Turns off any sounds playing  Instructs the movie to open a specific web page  Lets your movie communicate with the Web  browser  Loads/unloads movie

Happy Computers 020 7375 7300 

146 

Movie  Tell Target  If Frame is  Loaded  On MouseEvent  If  Use to interact with other Flash movies by using  actions within the current one  Instructs movie to perform an action if a certain  frame has been downloaded  Depending on the event chosen an action will be  performed (see all the options above)  Checks to see if a particular statement is true or  false. Depending on the action a specific action is  performed  Keeps performing the action while a certain  condition is met, loop stops as soon as the  condition changes  Performs a set of actions  Allows you to edit items in a movie as it is  playing  Used to process data that has a variable value,  such as text entered into a text box  Duplicates or removes movie clip as the movie is  playing, depending on the action by the user  Allows movie clips to be dragged whilst playing  Generates a message when an action is  performed. Only appears when testing the movie  Individual comments are placed in an action  script to explain what something does. Only  appears when testing the movie.

Loop 

Call  Set Property  Set Variable  Duplicate/Remo  ve Movie Clip  Drag Movie Clip  Trace  Comment 

147 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Index 

Index

Happy Computers 020 7375 7300 

148 

Index 
Actions ................................115  Adding ..............................116  Comments .........................118  Deleting.............................117  Frame ...............................115  Frame labels.......................118  Go to action .......................116  Object ...............................115  Organising .........................116  Stop action ........................116  ActionScript ..........................115  Alpha.................................... 76  Animated Masks ..................... 98  Animation  Blurred ............................... 84  Frame­by­frame................... 81  Motion Tweening .................. 86  Shape Tweening................... 93  Slowing down ...................... 84  Smoother............................ 82  Bandwidth Profiler..................139  Basic Actions.........................147  Bezier handles........................ 40  Brush tool ............................. 47  Brush modes ....................... 47  Creating shapes ................... 47  Button  Multiple hotspots.................112  Button frames.....................101  Buttons ................................101  Change shape.....................107  Changing colour ..................101  Enabling ............................138  Text ..................................105  Type .................................105  Controller .............................. 82  Cross­hair............................ 75  Down..................................101  Download Performance ...........138  Download Speeds ..................139  Drag Out option.....................147  Drag Over option ...................147  Fill Colours ............................ 49  Flash environment .................. 20  Flash formats ......................... 15  Flash Movies .......................... 29  Flash Overview....................... 14  Flash Player ........................... 15  Frame Rate....................... 30, 84  Setting ............................... 84  Frames ................................. 61  Get URL action  Adding...............................135  GIFs .................................... 17  Gradient colours ..................... 50  Adding more Pointers............ 50  Creating ............................. 50  Removing ........................... 51  Saving................................ 51  Graphic symbols ..................... 58  Gridlines ............................... 42  Guide layers .......................... 89  Orientate to path.................. 91  Help ..................................... 11  Hit ......................................101  Images ................................. 17  Instance................................ 58  Interactive Movies .................128  Creating ............................128  Invisible Button .....................109  JPEGs .................................. 17  Key Press option....................147  Keyframes ........................... 61  Layers .................................. 61  Adding a shape to ................ 65  Creating ............................. 64  Deleting.............................. 64  Drawing.............................. 66  Locking............................... 64  Moving ............................... 64  Outlines .............................. 65  Properties ........................... 65  Renaming ........................... 64  Stacking order ..................... 66  Library .................................. 58  Folders ............................... 79  Line Tool ............................... 41  Lines  Moving ............................... 42  Selecting ............................ 42  Lozenge shape  Creating ............................. 46  Macromedia site ..................... 15  Mask layer

149 

Happy Computers 020 7375 7300 

Macromedia Flash 8 Essentials ­ Index 

Unlinking .............................72  Mask layers .................... 61, 70  Creating ..............................71  Motion Tweening .....................86  Objects fading out.................86  Objects that change size ........88  Objects that move .......... 89, 91  Movie  Testing.............................. 136  Movie Explorer ...................... 125  Movie­Clip symbol  Creating ............................ 120  Movie­Clip symbols................ 120  Movies  Creating ..............................29  sizes ...................................30  On MouseEvent options .......... 147  Onion Skinning ..................... 107  Aligning...............................94  Optimising Movies .......... 138, 146  OPtimising Movies  Bandwidth Profiler............... 138  Download Performance ........ 138  Download Speed................. 138  Oval Tool ...............................33  Over................................... 101  Pen tool .................................42  S curve ...............................44  Upward curve.......................43  Pencil tool ..............................46  PNGS....................................17  Pointers .................................50  Removing ............................51  Press option ......................... 147  Publishing Movies .................. 141  Release option ...................... 147  Release Outside option........... 147  Roll Out option...................... 147  Roll Over option .................... 147  Rollover Buttons.................... 101  Scene  Previewing...........................82  Scenes ..................................67  Adding ................................67  Duplicating ..........................67  Renaming ............................68  Shape  Changing colour ...................49  Shape Tweening......................93 

Shapes  Aligning...............................52  Changing the shape ..............40  Grouping .............................48  Moving ................................36  Ungrouping..........................48  Shared libraries.......................77  Simple Objects........................32  Stacking Order........................66  Stage ...................................20  Stop action  Adding .............................. 136  Streaming ..............................17  Stroke  Moving ................................37  Subselect tool .........................40  Symbol  Movie­Clips ........................74  Symbols .......................... 58, 74  Buttons..............................74  Converting an existing object..58  Converting into graphic symbols  .......................................58  Creating a symbol from scratch  .......................................75  Deleting ..............................77  Duplicating ..........................77  Editing ................................76  Instance ..............................58  Organising ...........................79  Shared libraries ....................77  Swapping ............................78  Types..................................74  System Requirements ............ 145  Text  Formatting...........................55  Hyperlink.............................55  Kerning ...............................55  Rotating ..............................56  Text tool ................................54  Timeline ......................... 20, 63  Toolbox .................................33  Moving ................................33  Tweening .............................61  Type .....................................54  Up ...................................... 101  Vector­based images ...............17  Work Area..............................20

Happy Computers 020 7375 7300 

150 

Sign up to vote on this title
UsefulNot useful