Getting Started with Flash
Contents
About Flash ............................................................................................................................................................. 1
About this workbook ............................................................................................................................................. 2
The workspace ........................................................................................................................................................ 3
Getting Started with Flash ..................................................................................................................................... 4
Symbols .................................................................................................................................................................... 5
Create a button symbol .......................................................................................................................... 5
Define the button’s states ...................................................................................................................... 5
Scenes ....................................................................................................................................................................... 8
Create a scene .......................................................................................................................................... 8
Animations............................................................................................................................................................. 10
Create a motion-tweened animation .................................................................................................. 10
Layers...................................................................................................................................................................... 12
Add a layer ............................................................................................................................................. 12
Name layers ........................................................................................................................................... 12
Adding interactivity .............................................................................................................................................. 14
Add Action Script to a button ............................................................................................................ 15
Add Action Script to the timeline ...................................................................................................... 16
Publishing the movie ............................................................................................................................ 19
Accessibility ........................................................................................................................................................... 20
Creating accessible content ................................................................................................................. 20
Basic accessibility support in Flash Player ........................................................................................ 20
About Flash
Flash is an advanced authoring software package for creating interactive content. With Flash you can
design and author interactive websites, animations etc. with rich media such as video, graphics, sound.
Flash animations can be truly engaging offering a unique experience.
You can use Flash to:
 Create animations or simulations;
 Create interactive websites;
 Create interactive quizzes;
 Engaging activities such as drag and drop exercises;
 Export your Flash files to a .swf file which can be viewed in a web browser.
To view Flash content you need to have the Adobe Flash Player installed on your computer. You can
download the Adobe Flash Player for free from Adobe’s Download page at:
http://www.adobe.com/support/flashplayer/downloads.html
1
About this workbook
This is workbook has been created to accompany the training course Getting Started with Flash. It is a
reference guide introducing you to the basics of Flash. When you complete the task of the exercise in
the workbook you will be able to:








View a Flash movie and modify it;
Create button symbols;
Work with scenes;
Add text and graphics;
Create (motion-tweened) animations;
Create layers to organise content;
Add interactivity to a movie by:
o Adding Actions to a button;
o Adding Actions to the timeline.
Publish a Flash movie.
2
The workspace
When you start Flash Basic 8 you will see a window similar to the one below.
1. At the top of the window you will see the Menu bar (File - Edit - View - Insert - Modify - Test Commands - Control - Window and Help).
Underneath the menu bar you can see:
2. The toolbar;
3. The timeline;
4. The stage;
5. The panels.
Toolbar
Panels
Menu bar
The timeline
The stage
The Properties panel
3
Getting Started with Flash
Open the movie main_movie.fla (your instructor will give you the location of this file).
A screen similar to the one below appears:
Spend some time to experiment with the workspace.
- Can you see the four layers on the timeline?
Have a look at the library panel on the right of the screen.
- Can you see the symbols on the library? Click on each name to preview them.
You can also check the properties of the movie. Select Modify>Document to check the dimensions
and other properties of the document.
If you are ready move to the next section to start the exercise.
4
Symbols
You can draw shapes, objects etc on the stage. To organise these elements you convert them to
symbols. There are three types of symbols you can create in Flash:
1. Graphics: these are reusable static images and are not interactive. You need to convert a
graphic to a button to add interactivity.
2. Buttons: these are used to add interactivity to a movie. Buttons respond to actions such as
mouse clicks, rollovers, key presses and other actions.
3. Movie clips: these are reusable flash animations that can be inserted into your movie. Movie
clips play independently of the main movie timeline.
Whenever you create a symbol it is automatically added to the library. Once a symbol has been created,
you can drag and drop onto the stage as many instances of it as you want.
Create a button symbol
1. On the timeline click on the layer ‘wales’ to select the content of this layer. You will notice that
the ‘Wales area of the map’ has been highlighted on the stage.
2. Select Modify>Convert to symbol. On the pop-up that appears:
a. Type button_wales in the name field;
b. Select button for type;
c. Click OK.
3. You will notice that the button has been added to the library.
Note:
Now that you have created the button_wales you can drag onto the stage as many button_wales
instances as you want. You can name each instance on the properties panel.
Naming the instances is very important when you are using Action Script to add interactivity.
Define the button’s states
A button symbol has 4 frames (states) you can define. Up, Over, Down & Hit.
 The Up state is the way the button appears when there is no mouse interaction (the way it
appears on the stage).
 The Over state is the way the button appears when the mouse is over the button.
 The Down state is the way the button appears when the mouse is clicked (down) by the user.
 The Hit state is invisible to the user. However, it is very important as it defines the area that
the user can click on for interaction.
1. If not already selected, select the button_wales you
have just created on the stage. You will notice a light
blue border around the button.
5
2. Double-click on the button. You will notice that the timeline changes to the button’s timeline.
Note:
You can always return to the main timeline by clicking on the Scene 1 hyperlink on the top of
the timeline window.
3. You will now define the Over state of the button. Click the grey cell underneath ‘Over’ and
insert a keyframe. To do this either:
a. Right-click on the Over frame. Select Insert keyframe from the drop-down menu.
OR
b. Choose Insert>Timeline>Keyframe
4. You will notice that both the border and the fill are selected on the stage. Use the Selection tool
(this is the black arrow tool on the toolbar) to ONLY select the green area (fill) of Wales on the
stage.
Note:
You may need to click on the white area to deselect any selection first. The selection will appear
dotted as shown below:
6
5. Click on the Fill Color on the toolbar to choose a light green colour for the Over state.
6. Follow the above steps (3-5) to define the Down state of the button. For the Down state
choose a light orange for the fill.
7. As the Hit state is not visible you only need to create the keyframe (step 3 above)
8. Return to Scene 1 by clicking Scene 1 on the top of the timeline window.
9. Save the movie.
10. Select Control> Test Movie to test your movie. Test the button Wales. It should change its
colour to light green when you place the mouse over it and it should change its colour to light
orange when you click on it. You will add interaction to the button later on.
7
Scenes
In Flash you can have multiple scenes. Each scene has its own timeline. You can create and add
content on different scenes and use Action Script to link them.
An easy way to think of scenes is if you imagine them as different movies. However, instead of saving
them individually you save them ALL in one file.
In the following tasks you will create a new scene and then add to the new scene:
1. An animation of Wales;
2. Information about Wales (flag, capital city);
3. A back to the map text button to add interactivity;
4. Interactivity using Action Script.
The result will be:
When the users click on the Wales area on the map scene they will be presented with the new scene,
similar to the one below:
The back to the map text button will allow the users to click on it and return to the map scene to
choose a different country.
Create a scene
If you do not have the scene panel open select Window>Other Panels>Scene to open it. You will
notice that the panel contains only one scene (Scene 1) on the list. This is the scene with the map.
1. Double-click on Scene 1 to edit the name of the current scene. Change it to map.
2. Click on the add scene button (this is the + symbol
on the bottom of the panel) to add a new scene.
Name this new scene wales. You can jump from
scene to scene by selecting them on the scene
panel. Your scene panel should be similar to the
one below:
8
3. Select the wales scene. You will notice that the stage of this scene is completely empty as well
as the timeline.
4. From the library panel drag the graphic_wales graphic symbol onto the stage. Use the
properties panel to position the graphic using the following setting:
a. X: 112.8
b. Y: 280.1
Note:
These are the same X & Y coordinates as the button_wales on the map scene.
9
Animations
The types of animation you can create in Flash are the following:
1. Frame-by-frame animations,
2. Shape-tweened animations and
3. Motion-tweened animations.
Note:
Motion-tweened animations can be used to tween symbols, groups and text blocks. You can also
change the rotation, scaling and colours of the objects you tween.
Create a motion-tweened animation
In this step you will create a motion-tweened animation on the graphic_wales symbol.
Make sure you are on wales scene.
1. Select the frame 20 on the timeline (this is the grey cell under the number 20) as shown below.
2. Insert a keyframe (either right-click on the frame and choose Insert keyframe or select
Insert>Timeline>Keyframe). The timeline should look similar to the following:
3. Click anywhere between the frame 1 and frame 20 (above I have clicked on the frame 10).
4. On the Properties panel select Motion Tween on the pull-down menu.
10
5. The timeline should change to light blue with a black arrow between the two keyframes (frame
1 & frame 20)
Note:
If a motion-tween is NOT successful it will be displayed with a black dotted line between the
two keyframes on a light blue background.
6. Select the second keyframe (this is frame 20) on the timeline as shown below. A light blue
border appears around Wales.
7.
Select the Free Transform Tool on the toolbar to scale (enlarge) the symbol.
Note:
Make sure you have the Shift key pressed on the keyboard to maintain the proportions.
8. Use the Selection Tool (black arrow) to
position the symbol in the centre. Your
screen should be similar to the one on the
right.
9. Save and test the movie (Control>Test
Movie). You should be able to see the two
scenes (map and wales) playing one after
the other. The wales scene has the
animation.
11
Layers
You can organise the content of a scene into layers. It is extremely useful especially when you are
dealing with lots of content.
In this step you will create layers for organising the content (information about Wales) of the wales
scene.
Add a layer
Make sure you are on the wales scene.
1. Click on the Insert layer icon to add a new layer on the timeline.
2. A new layer (Layer 2) will be added on top of the current layer (Layer 1).
Name layers
You can change a layer’s name by double-clicking on it.
1. Change the name of Layer 1 to: wales. Change the name of the top layer (Layer 2) to:
information.
2. Select the information layer if not selected. From
the library drag onto the stage the wales flag
graphic and position it on the top-left side of the
screen (as shown to the right).
3. Select the Text Tool on the toolbar and type Wales
on the stage. Use the properties panel to change the
properties (font, size) of the text. The stage should
look similar to the one on the right.
4. Save your movie and test the scene (Control>Test
Scene).
12
5. Return to the wales scene and add a new layer. Name the new layer: capital. This time you will
add some text (Cardiff) that will ONLY appear on the last frame (frame 20). Select the frame 20
on the capital layer and insert a keyframe (either right-click on the frame and choose Insert
keyframe or select Insert>Timeline>Keyframe). Your timeline should look like the one
below:
6. Use the Text Tool to type Cardiff on the stage. Position the text on the map using the Selection
Tool (black arrow). If you want you can use the Oval tool to create a small dot for the location
(hold down Shift to get a circle). Your stage and timeline should look similar to one below:
7. Save and test the movie. You will see that the text Cardiff only appears when the animation is
finishing (frame 20).
13
Adding interactivity
You can add interactivity to your movies by using Action Script. Action Script is an event driven
language. It reacts to external (i.e. click of the mouse) or internal events (i.e. loading a movie).
Action Scripts are set up to detect when an event occurs and reacts by executing a set of instructions.
Action Scripts can be placed on:
1. the stage (i.e. button)
2. the timeline (Keyframes)
In this step you will add the instructions (Actions) on the button_wales on the map scene.
In plain English the instructions should be something similar to this:
When the mouse button is released on top of the button_wales, go to and play the scene
wales from the beginning (this is from frame 1) to the end.
Scene: map
Scene: wales
Event:
the mouse release over
the button_wales
Instructions:
Go to and play the scene wales from
the beginning to the end
14
Add Action Script to a button
Before you start with the Action Script make sure you are on map scene.
1. Select the button_wales on the stage.
2. Open the Actions panel if not already open (Window>Actions).
3. On the Actions panel open the Global Functions>Movie Clip Control and double-click on
the on option presented. Your screen should be similar to the one below. From the drop-down
menu double-click on release.
15
4. Move the cursor to the beginning of the second line, just before the closing curly bracket. Open
the Global Functions>Timeline Control double-click on gotoAndPlay. The gotoAndPlay
instruction has been added on the script. Move the cursor between the opening and closing
bracket after gotoAndPlay. Inside the brackets type: "wales",1
The script you created should look like this:
If you test the movie you will realise that both scenes (map and wales) are still playing one after the
other. That is because you do not control the timeline.
Add Action Script to the timeline
If there are no instructions on the timeline, Flash will play all scenes one after the other starting from
the first, moving to the second and so on.
In this step you will add an instruction on the timeline. What we want to achieve is that the playhead
will ‘wait’ at frame 1 on the map timeline until an event occurs.
In other words, the playhead will not ‘go to and play the second scene’ but will remain on frame 1 until
an event occurs. The event, in this example, is the release of the mouse on top of the button_wales. As
this script will control the timeline it will be added (placed) on the timeline.
1. Create a new layer on top of the other layers and name it actions.
Note:
If the new layer’s position is between the other, click on it and drag it to the top position.
2. Make sure you have the actions layer selected. Your timeline should be similar to the one below:
16
3. On the Actions panel open the Global Functions>Timeline Control and double-click stop.
The stop(); action has been added to the keyframe on the timeline. You will notice that the
letter a has been added to the timeline, on the actions layer (see below).
4. Save and test the movie.
This time Flash will only play the first scene. When you release the button_wales Flash will play
the second scene. You will notice however, that when the second scene is played it jumps back to
the first scene. You can also control the timeline of the second scene.
In the following step you will add a stop action on the last frame of the wales (scene) timeline.
5. From the scenes panel select the second scene of the movie (wales). The timeline changes on
the screen to the wales timeline.
6. On this timeline add a new layer on top of the other and name it actions. See below:
17
7. Select the last frame on the actions layer and insert a keyframe.
8. On the Actions panel open the Global Functions>Timeline Control and double-click stop.
The stop(); action has been added to the keyframe on the timeline. You will notice that the
letter a has been added to the last frame (keyframe 20) on the timeline, on the actions layer (see
below):
9. Save and test the movie.
You will see that this time Flash will play the first scene. When you click and release the
button_wales Flash will play the second scene. But you cannot return to the map.
The last step is to create the ‘back to the map’ text button. The instruction you will add to this
button is: return to the map scene when the mouse is released.
1. Make sure you are on the wales scene.
2. Insert a new layer and name it ‘back button’.
3. Use the Text Tool to type back to the map onto the stage. Place the text on the bottom-right
corner.
4. Select the text to convert it to a button symbol (choose Modify>Convert to Symbol). On the
pop-up window name it button_back and select button for type. Click OK.
5. Double click the button_back on the stage to define the Over, Down and Hit states.
a. Select the Over frame and insert a keyframe.
b. Use the Properties panel to change the colour of the text to red.
c. Repeat the steps a and b to define the Down state (choose a different colour this time).
d. Repeat the steps (a) and (b) to define the Hit state.
18
Important step:
As stated previously the hit button is invisible but it defines the area the user can click.
For this reason it is important to create a rectangle around the text to define the hit
area, otherwise it will ONLY be the text.
Select the Rectangle Tool top draw a rectangle to cover the text as shown below. Do
not worry about the colour. The Hit state is invisible anyway.
6. Return to the wales scene and add the following script to the button:
on (release) {
gotoAndStop("map",1);
}
7. Save and test the movie.
Publishing the movie
You can publish your movie as a SWF file that can be displayed in a web browser.
1. Select File>Publish. Flash saves a SWF (.swf) version of your file and an HTML (.html) file
in the folder where the main_movie is located.
2. Go to the folder and open the main_movie.html file. The HTML file opens in a web browser
and displays your Flash movie.
19
Accessibility
Creating accessible content
You can create Flash content that is accessible to all users, including those with disabilities, using the
accessibility features provided with Flash 8 and Flash Professional 8. As you design accessible Flash
applications, consider how users might interact with the content.
You can create accessible content with Flash by using accessibility features included in the authoring
environment user interface, taking advantage of ActionScript designed to implement accessibility, and
following recommended design and development practices. The list of recommended practices that
follows is not exhaustive, but rather suggests common issues to consider. Depending on your
audience’s needs, additional requirements might arise.
 Visually impaired users: For visually impaired users, including those with colour blindness,
remember the following design recommendations:
o Use the Accessibility panel or ActionScript to provide a description of your document
and nontext elements for use with a screen reader.
o Describe the layout of your Flash application and the individual controls used to
navigate through it.
o Design and implement a logical tab order using either the Accessibility panel or
ActionScript.
o Design the document so that constant changes in the Flash content do not cause screen
readers to refresh unnecessarily. For example, you should group or hide looping
elements.
o Provide captions for narrative audio. Be aware of audio in your document that might
interfere with a user being able to listen to the screen reader.
o Ensure that colour is not the only means of conveying information. In addition, make
sure that the foreground and background contrast sufficiently to make text readable for
people with low vision and colour blindness.
 Users with visual or mobility impairment: For users with either visual or mobility
impairment, ensure that controls are device independent (or accessible by keyboard).
 Hearing-impaired users: For hearing-impaired users, you can caption audio content.
 Users with cognitive impairment: Users with cognitive impairments often respond best to
uncluttered design that is easily navigable.
Basic accessibility support in Flash Player
Flash Player provides some basic accessibility support for all Flash documents, whether or not they are
designed using the accessibility features found in the Flash authoring tool. This generic support for
documents that do not use any accessibility features includes the following:
 Dynamic or static text: Text is transferred to the screen reader program as a name, but with
no description.
 Input text: Text is transferred to the screen reader. No names are transferred, except where
labelling relationships are found, and no descriptions or keyboard shortcut strings are
transferred.
 Buttons: The state of the button is transferred to the screen reader. No names are transferred,
except where labelling relationships are found, and no descriptions or keyboard shortcut strings
are transferred.
 Documents: The document state is transferred to the screen reader, but with no name or
description.
(Flash Support files: Using Flash, Chapter 19-Creating Accessible Content, pg.511-512 & 515)
20
Reinforce your Learning
Use this workbook to help you perform the following tasks…
 Create button symbols;
 Work with scenes;
 Add text and graphics onto the stage;
 Create motion-tweened animations;
 Create layers to organise content onto the stage;
 Add interactivity to a movie by:
o Adding Actions to a button;
o Adding Actions to the timeline.
 Publish a Flash movie.
Follow-up activity:

Use this workbook to create a fully interactive map of the U.K.
Learning Technologies Support Service
Office: The Barleycorn
23 Gower Place
t. 020 7679 (3)3559 / (3)7170 / (3)3878
e. ltss@ucl.ac.uk
http://www.ucl.ac.uk/learningtechnology