Professional Documents
Culture Documents
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
Helpline: 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
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
Happy Computers 020 7375 7300 2
Simple FramebyFrame Animation ................................................... 80
Frame Rate ................................................................................... 83
Animation: Motion Tweening .......................84
Motion Tweening ............................................................................ 85
Publishing............................................139
Publishing your Movie ................................................................... 140
Appendices ..........................................143
System Requirements ................................................................... 144
Optimising Movies ........................................................................ 145
On MouseEvent Options ................................................................ 146
Index................................................148
Index ......................................................................................... 149
3 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
Happy Computers: For All Your IT Training Needs
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.
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 ageold
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
http://www.happyelearning.co.uk/freestuff/
Happy Computers 020 7375 7300 4
The Happy Computers‛ Web Site
Where is it?
http://www.happy.co.uk
5 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
Happy Computers 020 7375 7300 6
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 helpline you get free with every Happy
Computers course.
It is not meant as a replacement to the full reference manuals that come
with Flash.
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 stepbystep 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 This is a description of what is
happening
7 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
Essential
Essential points to understand how to do the work in hand
Technical
Technical (nonessential) 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 You can also
use the right
mouse
This means that pressing the right mouse button (instead of button here
the left mouse button) will bring up a short cut menu that can
achieve the same things as listed in the text
Happy Computers 020 7375 7300 8
Getting Help
Flash keeps the screen fairly simple. But don’t expect to have to remember
the functions. There are several levels of help:
Help Function
3. Within the Index tab choose
the letter
4. Within the Search tab type
a keyword(s)
9 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
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 standalone 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 framebyframe 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 objectoriented programming
language, to create interactive animation in Flash.
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 CDROM
· Create movies for standalone projectors
· Export Flash to other formats such as QuickTime or Windows .AVI
movies.
· 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.
Flash‛s Limitations
L You need the Flash/Shockwave plugin installed. This can be
downloaded for free from the macromedia site
(www.macromedia.com) . Newer versions of Netscape and Internet
Explorer come with the plugin 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 builtin barriers in Flash
13 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials What is Flash 8?
L 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 vectorbased system.
A vectorbased system is where objects are created using mathematical
equations.
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 vectorbased 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
The Start menu appears
1. Click on the
button
2. Click on Programs
3. Select Macromedia Flash 8
4. Choose Flash 8 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
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.
Happy Computers 020 7375 7300 18
In this window, you arrange the timing of your animation on separate layers.
19 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials 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 popup 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
1. Click on the Window menu
2. Choose Info This shows the
This shows position of the
the size of shape on the
the shape stage.
in pixels.
This shows the
This shows position of the
the colour cursor.
of the
shape.
Colour Mixer
1. Click on the Window menu
2. Select Colour Mixer
Used to
Stroke choose over
500 colours
Fill Colour 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.
This is the Property inspector with nothing on 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.
2. Either
Choose to create a new
Flash Document
Or
Choose to open an existing
document
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 palette appears
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
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 computerdisplayed 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 eyecatching 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.
Happy Computers 020 7375 7300 30
Viewing the Toolbox
1. Click on the Window menu
2. Choose Tools
Selection Tool (V) Subselection
Free Transform (Q) Gradient Transform
Line (N)
Lasso (L)
Pen (P)
Text (T)
Oval (O)
Rectangle (R)
Pencil (Y)
Ink Bottle Brush (B)
(S)
Eyedropper (I) Paint Bucket (K)
Hand (H)
Eraser (E)
Zoom (M,Z)
Stroke
colour
Tool modifiers Fill colour
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.
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.
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
1. Create a shape
Happy Computers 020 7375 7300 32
2. Click on the Arrow tool
3. Doubleclick the shape Doubleclick ensures you select
both the stroke and the fill
4. Click on the Transform tool Down on the properties
inspector click on the padlock if
you want to lock the
Keyboard shortcut : Q
proportions
You can also change these
5. To rotate or skew the
settings numerically using the
shape or to distort it transform panel
choose those tools from the
options section on the
toolbar
6. Press Enter
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
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
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. Doubleclick 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
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. Doubleclick the shape to
select it
3. Click on the Free Transform Black handles appear around
tool on the Toolbox the shape and Options appear
at the bottom of the Toolbox
4. Click on the Scale icon
5. Click and drag on any black The shape changes
handle on the shape (proportionally if you drag on
any of the corner handles)
Rotating a Shape
1. Click on the Arrow tool
2. Doubleclick the shape to
select it
3. Click on the Free Transform Black handles appear around
tool on the Toolbox the shape
4. Position your cursor on any Cursor looks like the following
corner black handle on the
shape
5. Click and drag to rotate the
shape
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. Doubleclick the shape to
select it
3. Click on the Free Transform Black handles appear around
tool on the Toolbox 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 Cursor looks like the following
centre black handle on the
shape
6. Click and drag to skew the
shape
Distorting a Shape
1. Click on the Arrow tool
2. Doubleclick the shape to
select it
3. Click on the Free Transform Black handles appear around
tool on the Toolbox the shape and Options appear
at the bottom of the Toolbox
4. Click on the Distort icon
5. Position your cursor on any Cursor looks like the following
black handle on the shape
6. Click and drag to distort the
shape
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
37 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
6. Click and drag to distort all
the selected shapes
4. Click and drag to change
the shape
You can use the Subselection Tool to reshape any
shape
1. Create a shape
2. Click on the Subselection
Tool
Happy Computers 020 7375 7300 38
5. Click and drag to change
the shape
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
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 The cursor is a cross
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
to a vertical, horizontal or at a 45 0 angle.
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 Corner
Curve point Clicking and dragging allows you
to adjust the curvature of the line
Corner point 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 Selected line
3. Move the line by clicking and dragging
4. Click away from line
Selecting more than 1 line Hold down Shift and click on
the lines.
Selecting lines which are touching each other – Double
click a line
3. Click and drag to move this part of the line
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. Doubleclick the outside border of the shape
3. Click on the Stroke Colour Tool on the Property
inspector
4. Choose a colour from the palette
1. Click on the Pen tool
2. Move cursor to the stage Cursor shape changes to a X
3. Click and drag upwards in a
Bézier
straight vertical line
handles
Ancho
r
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
Drawing an S Curve
1. Click on the Pen tool
2. Move cursor to the stage Cursor shape changes to a pen
Ancho
r
Uneven curve changes to an S
shaped curve
5. Press the Escape button
when you have finished
Or
Click on the Arrow tool
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. Singleclick 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. Doubleclick the outside border of the shape
7. Click on the Stroke Colour Tool on the Property
Inspector
8. Choose a colour from the palette
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)
1. Click on the Rectangle tool
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
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
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 Paints over everything
Paint Fills Paints over fills but not lines
Paint Behind Paints behind the shape
Paint Selection Paints inside a selected shape
Paint Inside Paints the fill of a shape but not
the line
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
Shiftclick 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
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
Gradient
Pointer
2. Click on the one of the
pointers
On the Mixer box
3. Choose a colour Either choose a colour from the
Mixer or Swatches
4. Click on the other pointer
5. Choose another colour
6. Continue for all of the
pointers
Place the pointers closer together to make the transition
from one colour to another more abrupt.
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.
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 Info box appears
W and H are the width X and Y are the
and height of the number of pixels
your shape is from
the left and top of
the stage
Colour of the Cursor
document position
3. Change X and Y to the Zero and zero would move it to
settings you want the centre of your stage
4. Create or click on another
shape
5. Change the X value of the If you want to align the left of
shape the two shapes then make the
x value the same for each
6. Change the Y value of the If you want to align the top of
shape the shapes then make the y
value the same for each
51 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Equal spaces in
between objects
Happy Computers 020 7375 7300 52
Adding Type
The text tool allows you to control text and paragraph attributes.
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.
Font Size
Paragrap
h
Alignment
Text box Letter
width, Spacing
Kerning
height and Link text
x and y Superscript to URL
positions and Subscript
53 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
2. Click and drag on one of
the handles to the size you
want
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 Black square handles appear
around the text box
icon
6. Position the cursor just A circular (rotate) arrow will
outside any of the corners appear
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
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.
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 Graphic symbol is the most
you want commonly used one
7. Click on OK
8. Have a look in your library You should see your symbol
window 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 Bounding box
centre 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
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.
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.
§ Keyframes have a
black dot
§ In between frames
have a black arrow.
§ Background is pale
blue
§ Keyframes have a
black dot
§ In between frames
have a black arrow.
§ Background is light
green
A dashed line shows means
(pale green)
the final keyframe is missing
Here there is only one (light grey)
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
61 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Frames, Layers & Scenes
The Timeline
Frame
Playhead numbers
Frame
Layer
name
List of
symbols
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 A grey line appear showing the
different position (up or position of the new layer
down)
Renaming a Layer
1. Doubleclick 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 Bullet replaced with a padlock
column under the Lock icon
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
Flash replaces the bullet with a
2. Click on the Hide icon
red cross
on the Timeline
63 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Frames, Layers & Scenes
Layer Properties
1. Doubleclick on one of the Layer properties dialog box
small boxes in the Show all appears
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
2. Click OK
Click on one of
these
2. The object(s) in this layer appears only as an outline
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
1. Select the layer
2. Click and drag the layer Flash shows you the new
location with a thick line
3. Release the mouse Flash moves the layer and
selects it
Does the stacking order matter?
If a layer is at the bottom of all the layers, objects on it will
appear in 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.
§ 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.
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. Doubleclick the name of
the new scene
7. Type a new name Scene names can have spaces
8. Close dialog box
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. Doubleclick 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.
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 Make the name relevant to
your content
3. Create the shape (or
picture) you want
underneath your mask
layer
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.
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 These are objects created in Flash. i.e. a shape or some
text
Button These are interactive objects that will perform an action
e.g. a Home button activated when the user clicks on it
Movie Clip 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
How do I know I am in Symbolediting mode?
§ A crosshair 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
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
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. Rightclick the symbol
name in the library
or
Rightclick an instance of
the symbol on the stage
2. Choose Edit You are in symbolediting
mode
3. Make your changes
4. Return to the movieediting
mode by clicking on the
scene name
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 100 makes the object black, 0 remains the same
and 100 makes it white
Tint Changes the colour of the object (also measured
in the amount of red, green and blue in the mix)
Alpha Changes the transparency of the instance. 0
makes it invisible and 100 remains the same
Advanced Changes the instance’s tint and transparency in
one go
4. Choose Tint
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. Rightclick 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
4. Choose the flash file that
contains the library that
you want to open
5. Click Open
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.
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: Frame-
by-Frame
79 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: FramebyFrame
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
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 Hold down the Shift key to
1 inch in diameter in the top make a perfect circle
left of the stage
7. Click into the second frame
8. Press F6 A Keyframe is added
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
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 Use Play, Stop, Forward,
or
Rewind buttons
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
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.
This is what you will see on the
stage
81 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: FramebyFrame
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
Turns on Onion
Onion
skinning Onion skin markers
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.
Enter a value for the frame rate
Press OK
1. Select keyframe 1
2. Click on F5 This inserts a Frame
3. Select the second keyframe
4. Click F5
5. Repeat the steps so there is
a blank frame between
each keyframe
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
Framebyframe 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
· Animating objects that change colour
· Animating objects that fade out
· Animating objects that change size
· Animating objects that move
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 Flash recolours the shape in
the scene the inbetween frames
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 A keyframe is inserted
8. Select the shape
9. Click on the drop down next
to Colour on the Property
inspector
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 A keyframe appears
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.
There is a 15 frame delay before "square" can start again
87 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Motion Tweening
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 A keyframe is inserted
8. Move the shape by clicking Cursor shape is a large black
and dragging it to arrow with a smaller four
somewhere else on the headed arrow attached to it
stage
9. Repeat as many times as
you like
10.Press Ctrl + Alt + Enter to
view the Scene
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.
1. Add a new Scene or layer
2. Rename the layer
3. Select frame 1
4. Drag an instance of a Create a shape which that will
symbol from the library look different when rotated
Or
Copy & paste an image
from the web
5. Select frame 1
6. Choose Create Motion
Tween from your properties
inspector
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 A keyframe appears
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 The Guide layer appears above
Layer icon the original layer
13.Switch on onionskinning
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 Start from the centre
the centre of last shape 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
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
· Morphing a simple shape into another
· Morphing letters/numbers
· Morphing one object into many objects
· Changing the colour of an object
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 19 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 This is what the animation
view the scene looks like
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. Doubleclick 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
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
"charactermorph"
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. Singleclick on keyframe 1
9. Choose Shape tween from
the properties inspector
10.Click into the last frame of
your animation
11.Press F7 A new blank keyframe appears
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 If you have a whole word or
keyframe and break those sentence you might have to
letters apart too break apart twice
18.Switch on Onion skinning to
reposition “the letters
19.Press Ctrl + Alt + Enter to
view the scene
If this does not work, check in “Break apart” has been
chosen in both keyframes.
Happy Computers 020 7375 7300 94
2. Rename the layer
3. Select frame 1
4. Create a shape or use a You decide on the fill colour
broken apart symbol but for the stroke colour
choose none
5. Singleclick 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 Again you decide on the fill
where the original shape colour but choose none for the
was stroke
10.Press Ctrl + Alt + Enter to
view the scene
6. Choose Shape tweening
from the properties
inspector
7. Click in your final frame
8. Press F6 Duplicates the symbol from the
previous keyframe
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
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.
Using an image from the Internet (be aware of
copyright)
1. Find the image
2. Rightclick it
3. Choose Copy
4. Paste it onto the stage
5. Rightclick 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 This will be our background
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 Background layer will be visible
last frame that you want in for the length of your movie
your animation
6. Press F6 A keyframe appears
7. Click on the Insert new New layer appears above the
layer icon background
8. Rename this new layer 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 The stroke & fill colours are
want to be the mask unimportant
11.Click on frame 1 on the
“Mask” layer
12.Click on Modify menu
13.Choose Group 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 multistage 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
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.
Up This is what the button looks like before it has been clicked on.
Over This is what the button looks like when the cursor is positioned
over it.
Down This is what the button looks like when someone is pressing the
button.
Hit This defines the area of the button.
3. Name the button
4. Click Button behaviour
5. Click OK Flash creates a new symbol in
the library and takes you to
the symbolediting 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.
Or
Drag an instance of a symbol Align the symbol with the crosshair
from the library 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
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
1. Select the Down frame in
the Timeline
101 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
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
1. Select the Hit frame in the
Timeline
2. 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 semitransparent light
blue shape.
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
Summary of Steps
· Create the button
· Add the text
· Testing the scene
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)
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 Inserts a Keyframe
8. Click away from the button This will deselect everything
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 Inserts a Keyframe
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
105 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
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 You will get a duplicate of your
button press F6 shape in each one
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 This ensures that your button
panel to ensure the shape stays in the same place at
Happy Computers 020 7375 7300 106
is central to the stage each state
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
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 This layer will contain the text
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 This is going to be your
invisible button
12.Name the symbol
13.Choose the behaviour
Button
14.Click OK
15.Select the Hit frame
16.Press F7 Inserts a blank keyframe
17.Click on the Rectangle tool
18.Create a rectangle as large This rectangle turns the entire
as the stage 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 movieediting
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
Happy Computers 020 7375 7300 108
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 F11
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
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.Doubleclick 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 Inserts a blank keyframe
43.Click on the Text tool
44.Click on the stage
45. Put in some different
content
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 Inserts a blank keyframe
49.Click on the Window menu
50.Choose Actions > Global
Functions > Timeline
Control
51.Doubleclick the STOP Timeline should look like this
action
52.Press Ctrl+Enter to view
the movie
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)
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 movieediting
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 725
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 movieclip 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.
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 This will make it easier for you
bottom or the top 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.
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 Duplicates from frame 1
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
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. Doubleclick stop action Stop action is added to the
Actions list
19. Select frame 1in the text
layer
20. Drag an instance of a
button onto the stage
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. Doubleclick go to Actions appear in the right side
action of the screen
25. For the Scene and Type,
do not change anything
26. For the Frame number,
change to 2
27. Choose the Go to and If you don’t choose this your
Stop option 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.
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
4. You can also choose a label
type from the dropdown
list
You can choose Name,
Comment or Anchor
117 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: MovieClips
Animation: Movie-
Clips
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 movieclip symbol has its own timeline.
Movieclips 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 movieclip
· Editing the button
· Testing the button
119 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: MovieClips
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 movieediting mode
Open the Library if it isn't open already
F11
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
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
Happy Computers 020 7375 7300 120
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 This is transparency
14. Change the Alpha setting to
0%
15. Press Enter 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 Inserts a blank keyframe
23. Click on the Window menu
24. Choose Actions
25. Select Global Functions >
121 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: MovieClips
Timeline Controls
26. Doubleclick the Stop action
27. Close the Actions panel This is what the Timeline should
look like for the MovieClip
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.
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
Frames
Text and
Video
Buttons, Click here
Movie
clips and ActionScrip
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.
If the Library is not open, it will open showing the symbol
Happy Computers 020 7375 7300 124
Editing a symbol
Just doubleclick the symbol name in Movie Explorer and it will
take you to the symbolediting mode.
Renaming a scene
Just doubleclick the scene name in Movie Explorer and rename
the scene.
Changing the contents of a text box
Just doubleclick 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
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 Clicking
on the Contact on the
Contact Products
Us button Products button
will go to will go to
the the
Scene
name
Main Main
Products Contact
Contact
Products
Scene Scene
name – name
Contact Products
· 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
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)
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)
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. Rightclick 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. Rightclick the name
"button with text" in the
Library
8. Choose Rename
9. Type “main menu”
10. Rightclick the “main
menu” button in the library
11. Choose Duplicate
12. Type "Products"
13. Click OK
14. Rightclick "Products"
15. Choose Edit You are now in symbolediting
mode
16. Click on the Up
keyframe
129 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
17. Doubleclick 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 Returns you to movieediting
mode
20. Rightclick 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
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
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. Doubleclick "Main copy"
9. Type "Contact"
10. Click on the Duplicate
Scene icon
11. Doubleclick 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
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 Now each scene has something
button URL onto the stage different on it
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. Doubleclick 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 This is what the action should
Stop button 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
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. Doubleclick 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
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
._blank Opens in a new browser
._parent Opens in main frameset
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).
8. Add a new layer and the
Stop action to the other
two scenes
135 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Testing & Publishing
Happy Computers 020 7375 7300 136
Testing & Optimising Movies
Optimising your Movie
See Optimising Movies p 145
1. Click on the Window menu
2. Choose Toolbars
3. Choose Controller
4. Use the controls to play the
movie
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.
137 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Testing & Publishing
Shows
information The red line
is what
indicates
how the
Each bar represents a frame will
frame. The size
corresponds to the Light and dark grey
Anything above
frame’s size in bytes blocks show each
the red line
frame, its size is
means the
relative to byte size
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
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.
3. Ensure you are on the
Formats tab
10. Click on Publish
Happy Computers 020 7375 7300 140
11. Click OK
12. Click F12
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. Doubleclick the file
The name of the report is the name of the Flash
movie with “Report” at the end
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 16bit colour monitor capable of 1024 x 768 resolution; and a CDROM
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 16bit (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 plugin 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 What it does
Press Occurs when the mouse button is pressed
while the cursor is with the hit area of the
button
Release Occurs when the mouse button is release
within the hit area of the button
Release Occurs when the mouse button is released
Outside while the cursor has been dragged outside
the Hit area
Roll Over Occurs when the mouse cursor moves into
the hit area
Roll Out Occurs when the mouse cursor is moved out
of the hit area
Drag Over Occurs when the mouse button is held down
and dragged out of the hit area and then
back onto it
Drag Out Occurs when the mouse button is clicked
with the hit area then dragged outside it
Key Press Can be used to specify a key on the
keyboard to trigger the action
Action name What the action does
Go to Instructs the movie to jump to a specific frame
Play Instructs a movie to play
Stop Stops the movie playing at a specific point
Toggle High Displays graphics at a higher quality
Quality
Stop All Sounds Turns off any sounds playing
Get URL Instructs the movie to open a specific web page
FS Command Lets your movie communicate with the Web
browser
Load/Unload Loads/unloads movie
Happy Computers 020 7375 7300 146
Movie
Tell Target Use to interact with other Flash movies by using
actions within the current one
If Frame is Instructs movie to perform an action if a certain
Loaded frame has been downloaded
On MouseEvent Depending on the event chosen an action will be
performed (see all the options above)
If Checks to see if a particular statement is true or
false. Depending on the action a specific action is
performed
Loop Keeps performing the action while a certain
condition is met, loop stops as soon as the
condition changes
Call Performs a set of actions
Set Property Allows you to edit items in a movie as it is
playing
Set Variable Used to process data that has a variable value,
such as text entered into a text box
Duplicate/Remo Duplicates or removes movie clip as the movie is
ve Movie Clip playing, depending on the action by the user
Drag Movie Clip Allows movie clips to be dragged whilst playing
Trace Generates a message when an action is
performed. Only appears when testing the movie
Comment Individual comments are placed in an action
script to explain what something does. Only
appears when testing the movie.
147 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Index
Index
Happy Computers 020 7375 7300 148
Index
Actions ................................115 Flash Player ........................... 15
Adding ..............................116 Frame Rate....................... 30, 84
Comments .........................118 Setting ............................... 84
Deleting.............................117 Frames ................................. 61
Frame ...............................115 Get URL action
Frame labels.......................118 Adding...............................135
Go to action .......................116 GIFs .................................... 17
Object ...............................115 Gradient colours ..................... 50
Organising .........................116 Adding more Pointers............ 50
Stop action ........................116 Creating ............................. 50
ActionScript ..........................115 Removing ........................... 51
Alpha.................................... 76 Saving................................ 51
Animated Masks ..................... 98 Graphic symbols ..................... 58
Animation Gridlines ............................... 42
Blurred ............................... 84 Guide layers .......................... 89
Framebyframe................... 81 Orientate to path.................. 91
Motion Tweening .................. 86 Help ..................................... 11
Shape Tweening................... 93 Hit ......................................101
Slowing down ...................... 84 Images ................................. 17
Smoother............................ 82 Instance................................ 58
Bandwidth Profiler..................139 Interactive Movies .................128
Basic Actions.........................147 Creating ............................128
Bezier handles........................ 40 Invisible Button .....................109
Brush tool ............................. 47 JPEGs .................................. 17
Brush modes ....................... 47 Key Press option....................147
Creating shapes ................... 47 Keyframes ........................... 61
Button Layers .................................. 61
Multiple hotspots.................112 Adding a shape to ................ 65
Button frames.....................101 Creating ............................. 64
Buttons ................................101 Deleting.............................. 64
Change shape.....................107 Drawing.............................. 66
Changing colour ..................101 Locking............................... 64
Enabling ............................138 Moving ............................... 64
Text ..................................105 Outlines .............................. 65
Type .................................105 Properties ........................... 65
Controller .............................. 82 Renaming ........................... 64
Crosshair............................ 75 Stacking order ..................... 66
Down..................................101 Library .................................. 58
Download Performance ...........138 Folders ............................... 79
Download Speeds ..................139 Line Tool ............................... 41
Drag Out option.....................147 Lines
Drag Over option ...................147 Moving ............................... 42
Fill Colours ............................ 49 Selecting ............................ 42
Flash environment .................. 20 Lozenge shape
Flash formats ......................... 15 Creating ............................. 46
Flash Movies .......................... 29 Macromedia site ..................... 15
Flash Overview....................... 14 Mask layer
149 Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Index
Happy Computers 020 7375 7300 150