146 Flash
146 Flash
146 Flash
Version 1.3
Document code:
Title:
Version:
Date:
Produced by:
Guide 146
Creating animation and interactivity with Flash
1.3
June 2006
University of Durham Information Technology Service
Contents
1
Layers ................................................................................................................. 7
Animating in Flash............................................................................................. 8
6.1 Using Layers in animation.............................................................................. 8
6.2 Tweened animation........................................................................................ 9
6.3 Frame by frame animation ........................................................................... 10
6.4 Applying effects to text................................................................................. 12
6.5 Emphasising text.......................................................................................... 13
10 Further information.......................................................................................... 17
Getting started
This section describes the workspace in Flash
1
A Welcome Window will open, read this information if you wish then close
the window. Users of previous versions of Flash will notice that the
workspace has changed with MX. The greatest change is the ability to
dock, stack and roll-up tool palettes, rather than working with a large
number of floating panels. It is worth taking a few minutes to explore the
workspace.
You may wish to try out the online tutorial from Help | Tutorials |
Introduction to Flash MX
2
Timeline records every frame, layer and scene that makes up your movie
content over its timespan.
Tools Panel provides you with tools to paint, draw and to add shapes and
colours/fills to create your animation.
Layers are an essential feature as Flash allows you to organise objects on
the Stage in layers. Layers keep objects separated from each other. This
feature is covered in greater detail in Section 5.
Stage displays the content of the frame currently selected in the Timeline.
You create a movie by arranging a series of graphics on the Stage.
Property Inspector displays any relevant properties for objects added to
the stage such as text and frames and enables you to edit the parameters
of these objects.
Note the panels available to the right of the main work area. These panels
provide access to the functionality of Flash. Each panel can be expanded
and collapsed by clicking the arrow next to each panels title.
The following image shows the completed movie that you are going to
create, you may need to refer to this when creating your objects:
2.1
From the Tools panel select the Rectangle tool. Position your
mouse pointer over the Stage, left click with the mouse and drag to
draw a vertical rectangle about 3cm tall and 1cm wide(this is going
to form the stem of an arrow).
From the Tools panel select the Pencil tool. From the Options
section ( in the Tools panel) click the Pencil Mode icon and ensure
this is set to Straighten.
With the pencil set in the Straighten mode Flash will attempt to recognise
the shape you have drawn and perfect it.
4
Note: The arrow tool is used to select any object, or areas of an object, in
order to modify it.
5
Notice that information about these shapes has now appeared in the
Property Inspector
Click on the Fill Colour icon in the Property Inspector and choose
a colour for your shapes
From the Options section at the bottom of the Tools panel ensure
the Lock Fill icon is de-selected (i.e. doesnt appear pressed down
by default it should be deselected).
Hover your mouse pointer over the line forming the straight edge of
your triangle. But do not click on the line yet.
Notice that a curved line appears at the bottom of the pointer. This
indicates that the line can be modified to a curve.
2.2
10
Click and hold your mouse pointer on the line, away from the
corners. Now drag the line downwards to create a curve to change
the straight edge of your triangle.
11
Adding text
You are going to create a background on which to add your text on the
Stage where you have created your arrow.
1
Click on the Rectangle tool and on the Stage drag to draw a box
about 2cm tall and 6cm wide that fills just under half the width of the
Stage.
Note: By default Flash remembers the last fill settings that you used and
automatically fills in your next object with this fill. It is therefore often the
case that you will need to change this.
From the Colors section of the Tools panel click on the Fill Color
icon and choose a colour. Click on the rectangle on the Stage to
apply the fill colour.
From the Tools panel select the Text tool. Click on the rectangle
you have just created.
In the Property Inspector in the Font field select Arial; change the
height size of the text to 14 and from the colour picker select a
colour for your text.
From the Tools panel select the Arrow tool. Hover your mouse over
the text until it turns to a cross and position your text centrally on the
rectangle by dragging it with the mouse.
3.1
From the Window menu select Library (if it is not already open).
This will open a Library floating panel which you can move to any
part of the screen by clicking and dragging on the blue area. The
Library lists all the imported images and symbols used in an
authoring file.
You now need to select the arrow you created earlier on the Stage
3
Left click with the mouse and drag to select an area that completely
surrounds the arrow. This will select the arrow so you are able to
modify the shape.
You are going to repeat this process to convert the text you created
earlier to a symbol. Use the arrow tool to drag and select an area
that includes the text and rectangle, and then follow steps 3 6
above, naming the symbol text in the Convert to Symbol window.
You will notice that your symbols have appeared in the Library. Clicking on
the item displays it in the upper pane of the Library window.
8
3.2
Flash switches to Symbol Editing Mode. Notice that the name of your
symbol has appeared below the Timeline. Here you can modify your
symbol just as you might normally do in the Movie Editor.
4
Click on the Paint bucket tool and choose a fill colour. Click on
your shapes to apply the colour.
When you have completed your symbol and are ready to return to
the Movie Editor select Edit | Edit Document to exit Symbol
Editing Mode.
If you click on arrow2 in the Library window a preview of the symbol will
now appear in the upper pane.
With the Arrow Tool selected, move the image to a clear space on
the Stage.
Notice that the image has also appeared as a Library item (book.gif). This
allows the image to be reused multiple times without increasing movie file
size.
You will notice that in its present form you are not able to modify the image.
Therefore, we need to convert the image into an editable vector graphic.
3
50
Minimum Area:
10
Curve Fit:
Normal
From the Tools panel select the Arrow tool and then click on a clear
area of the Stage to de-select your converted bitmap. Notice that in
the conversion some of the detail has been lost.
Note: The Trace Bitmap settings control how much of the original detail of
the image is retained in the converted object. As more detail is included
the size of the exported movie will increase.
Your bitmap image has now been converted to vector objects that can be
manipulated by Flash.
7
Click on one of the pages of the book, from the Tools panel select
the Paint Bucket Tool.
From the Colors section of the Tools panel click on the Fill Color
icon and choose a colour different to the existing page colour.
Click on the page of the book to apply the selected fill colour.
You might want to repeat this to change the colour of the other page or try
changing the colour of different areas of the pencil.
10
With the Arrow Tool selected use the mouse to drag an area around
the book image to select it.
11
12
13
The Library now contains the original book image (book.gif) that you
imported and the book image that you have converted to a vector graphic
and now modified.
Layers
Layers are like transparent sheets of acetate stacked on top of each other.
When you create a new Flash movie, it contains one layer. You can add
more layers to organize the artwork, animation, and other elements in your
movie. The number of layers you create is only limited by the computers
memory. You can hide layers, lock layers, or display layer contents as
outlines. You can also change the order of layers.
You are going to work with a file that has already been created for you so
that you can experiment with using layers. You do not need to close the
courseobject.fla file as Flash can work with several files at once.
1
Notice that several objects are selected on the Stage. These are the
objects that are contained on this layer. Each of the other layers contains a
different set of objects. Separating objects in this way allows them to be
manipulated independently.
3
Click on the words plants1 and drag the layer to a position below
the underlying layer fish1. The plants on this layer are now
positioned below the fish.
The contents of each layer should now be hidden. Hidden layers are
indicated in the Timeline by a cross.
6
Reset the layer view options so that all layers are visible, in solid
form and unlocked.
10
11
12
13
14
In the Timeline ensure the layer MyLayer is selected and use the
Oval Tool to create a large filled circle on the Stage.
15
The contents of this layer will now be removed from your file. Separating
content using layers therefore makes it easier to edit and delete.
Note: Most actions that you perform in Flash can be undone by selecting
Edit | Undo. An important exception is the Delete Layer action, which
cannot be undone.
16
Animating in Flash
Animation is the process of creating the effect of movement or change over
time. Animation can be the movement of an item from one place to
another, or it can be a change of colour or shape over a period of time.
There are two basic methods of Flash animation; frame by frame and
tweened animation:
Frame by Frame animation is achieved by changing the individual
contents of each of any number of successive frames. It is the most basic
form of animation and is useful for complex animations that require subtle
changes.
Tweened animation is achieved by defining the contents of the start and
end points of an animation. Flash then creates the frames between the
start and end points. This process is called tweening.
6.1
With the courseobjects.fla file still open click the File menu and
select New.
Note: You will notice that the Library window from the file
courseobjects.fla is still visible along with a new library window for the
new file you have created. You are going to use the items in the Library
from the courseobjects.fla file in this animation.
2
Click the Insert Layer button. This will add a new layer above the
book image layer. By default this layer will be labelled Layer 2.
6.2
Tweened animation
1
In the Timeline click on frame 1 in the layer book image and from
the Library drag an instance of the bookpencil symbol (i.e. the
book that you made changes to) onto the middle of the Stage.
You will notice a black dot has now appeared in the Timeline in the book
image layer, this is a Keyframe. This is a frame in which something
changes in a layer of the Timeline. The first frame of every layer is by
default, a Keyframe.
2
You are now going to change the instance so that it changes in form
between frames 1 and 15.
3
In the Property Inspector set Tween to Motion from the drop down
menu
Notice that in the Timeline an arrow with a blue background has appeared
between Keyframes 1 and 15. Flash has created the Motion Tween
between these two frames.
6
Click again in frame 1 in the book image layer and click Modify |
Transform | Scale.
Click on the bottom right hand corner of the image where handles
have appeared to scale it. And drag this corner inwards to reduce
the size of your image down to about a quarter of its original size,
making sure it still stays in the centre of the Stage.
10
6.3
In the Timeline click on frame 1 in the layer text and from the
Library drag an instance of the text image to the top of the Stage.
You will notice a black dot has now appeared in the Timeline, a
Keyframe has automatically been created.
Under the heading Align select the second icon along Align
horizontal center. This will centre your text at the top of the Stage.
This marks the end of the animation. A Frame is used in this instance as
the title is to stay static throughout the animation. Frames inherit the
content of the previous Keyframe, therefore between frames 1 and 65 the
instance will not change.
6
10
Drag an instance of arrow (the first arrow you created) from the
Library to the left of the text on the Stage.
You now need to rotate the arrow so that the flow diagram can develop on
different sides of the Stage. Look at the screenshot in Section 1 (page 2),
which shows the completed movie. This will show you where to place the
arrow.
8
10
Using the Arrow Tool move the arrow to the exact position you want
on the Stage.
You now need to create a matching arrow on the opposite side of the
Stage, but this time it will face in a South East direction.
11
Click on frame 15
12
Drag an instance of the arrow from the Library to the right of the
text on the Stage.
13
14
15
To give the effect of the arrows fading in from being almost transparent to
fully visible you can set various levels of visibility at various stages along
the Timeline, using frame by frame animation.
16
17
18
You will notice that the arrows on your Stage have now faded away.
19
Inserting key frames in this way will generate a series of discrete jumps in
alpha values between Key frames 15 and 25 giving the impression of a
smooth transition.
11
6.4
20
21
22
Select the Text Tool from the Tools panel and click on the Stage
beneath the arrow to the left.
In the Property Inspector in the Font field select Arial, change the
height size of the text to 16 and from the colour picker select a
colour for your text.
4
5
Click on the Paragraph tab next to Characters and centre the text.
In the text box type:
Teacher Centred
Repeat steps 2 - 5 but insert the text beneath the arrow to the right
and type:
Student Centred
12
Position your text in the correct place beneath the arrows using the
Arrow Tool.
10
Click on the first instance of the arrow and click Modify | Transform
| Scale.
11
Click on one of the handles and drag the image inwards until it is
about half of its original size.
12
Repeat steps 10 - 11 for the instance of the arrow on the right of the
Stage, so that both arrows have been scaled to the same size.
13
14
Click back in frame 28 in the arrows2 layer and click on one of the
highlighted arrows on the Stage.
15
In the Property Inspector select Alpha from the drop down menu
and change the percentage to 10%.
16
17
You are now going to continue to develop the flow diagram by adding some
further text as you have done previously.
18
Create two more layers and call them text2 and text3 (see Section
6.1 to remind yourself how to do this)
19
20
Follow steps steps 2 - 7above to add the next bit of text to your
animation. Type:
Surface
Now add two more of arrows2 at either side beneath this text by
inserting a Keyframe in the arrows1 layer at frame 45 and two
more lots of text by inserting a Keyframe in the text3 layer at frame
50 to complete your flow diagram.
The text will be:
Limited understanding
Emphasising text
To draw attention to important parts of the animation you can manipulate
instances to emphasise them, through such things as increasing the size
and depth of colour of text.
1
In the Property Inspector change the text height size to 22, make
the text bold and change the colour to give a marked contrast.
If the text extends off the Stage after enlarging it, click on the text and
move it inwards.
4
13
Adding Buttons
You can assign an action to a button or a movie clip to make an action
execute when the user clicks a button or rolls the pointer over it, or when
the movie clip loads or reaches a certain frame.
1
7.1
Click the arrow next to the Actions frame at the bottom of your
screen to expand the window
Collapse the actions frame by clicking the arrow again. You will notice that
the symbol a has appeared in frame 65 in the timeline showing that an
action has been added.
7.2
This will open a new Library window containing a number of files and
folders created by Macromedia.
14
10
In this Library window scroll down to find the folder named Circle
buttons.
11
Double click on the folder icon to expand it and click on the Play
button.
12
Click in frame 65 in the button layer and drag the button from the
Library window onto the top right hand corner of the Stage.
13
Ensure that the Play button on the Stage is selected. Expand the
Actions panel and select Actions | Movie Control
14
15
This will ensure that your movie stops at the same point as the animation
finishes. When the user clicks the play button the movie will play again.
Without this the animation would return to the beginning and play again
automatically.
Incorporating action buttons gives control to the person watching your
animations.
16
17
This will show you what your published file will look like in a browser.
You can also produce information about how your movie will be delivered
via the web.
2
You should now see a graph displayed at the top of the movie.
The left-hand pane of the profiler displays 3 sections:
Movie: indicating the dimensions, frame rate, file size, duration and
preload.
State: showing the current frame playing and its byte requirements.
The larger right-hand pane of the profiler shows the Timeline header and
graph. The lower red line beneath the Timeline header indicates whether
a given frame streams in real-time with the current modem speed specified
in the Control panel.
For 28.8 Kbps modem, any frame above 200 bytes may cause delays in
streaming for a 12 fps movie.
3
From the Debug menu select the option 14.4 (1.2 KB/s). This will
re-draw the performance graph to show how the movie is delivered
over a slow modem.
15
This will display each element of your movie in the order that it will be
loaded when delivered over the web. This can be used to ensure that
critical components of your movie are loaded before they are required.
5
In the View menu ensure that the option Frame By Frame Graph is
selected.
From the View menu select Quality | Low. Your movie will now be
shown as it would appear when published at the lowest quality.
Lowering the movie quality should result in faster delivery and this will be
reflected in the Bandwidth Profiler.
8
Click File | Publish Settings. In the pop-up window select the tab
Formats and notice that your Flash project can be published in a
range of formats. The standard formats are Flash (movie) and
HTML.
Ensure that the checkboxes next to these options under the Format
tab are ticked and then click OK.
Notice that the formats available to preview reflect those selected you
chose in the Publish Settings window, allowing you to preview how your
published movie will look in a variety of formats.
4
Click File | Publish Settings and click the tab labelled HTML.
When these options are changed Flash will generate the modified HTML to
create an appropriate web page.
5
16
In the section Playback clear the checkbox next to the option Loop
and click OK.
Note that you will now also have a coursemovie.html file and
coursemovie.swf file that will have been saved to your J:\public_html
folder.
10 Further information
Further information about Flash and other Macromedia products for
creating WWW pages can be seen at http://www.macromedia.com. It is
also a useful place to look if you have specific questions as FAQs are
posted here. You may also want to refer to the following books:
Dreamweaver MX Bible (2002), Joseph W. Lowery, Hungry Minds, ISBN:
0764549316
Sams Teach Yourself Macromedia Dreamweaver MX in 24 Hours
(2002), Bruce B, Sams, ISBN: 067232346X
17