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

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.

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:

  1. The toolbar;
  2. The timeline;
  3. The stage;
  4. The panels.

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.

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:

  1. Type button_wales in the name field;
  2. Select button for type;
  3. 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.
  1. 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.

  1. You will now define the Over state of the button. Click the grey cell underneath ‘Over’ and insert a keyframe. To do this either:
  2. Right-click on the Over frame. Select Insert keyframe from the drop-down menu.

OR

  1. Choose Insert>Timeline>Keyframe
  1. 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:

  1. Click on the Fill Color on the toolbar to choose a light green colour for the Over state.
  1. 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.
  1. As the Hit state is not visible you only need to create the keyframe (step 3 above)
  1. Return to Scene 1 by clicking Scene 1 on the top of the timeline window.
  1. Save the movie.
  1. 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.

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:

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:

  1. X: 112.8
  2. Y: 280.1

Note:

These are the same X & Y coordinates as the button_wales on the map scene.

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.

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.

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).

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).

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.