Getting Started with Flash - UCL



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:

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:

2. The toolbar;

3. The timeline;

4. The stage;

5. The panels.

[pic]

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:

[pic]

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:

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.

2. Double-click on the button. You will notice that the timeline changes to the button’s timeline.

[pic]

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:

[pic]

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.

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:

[pic]

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:

a. X: 112.8

b. Y: 280.1

[pic]

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.

[pic]

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:

[pic]

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.

[pic]

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. [pic] 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.

[pic]

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.

[pic]

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:

[pic]

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:

[pic]

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.

Scene: map Scene: wales

[pic]

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.

[pic]

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:

[pic]

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:

[pic]

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

[pic]

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:

[pic]

7. Select the last frame on the actions layer and insert a keyframe.

[pic]

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

[pic]

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.

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.

[pic]

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.

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)

[pic]

-----------------------

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.

Event:

the mouse release over the button_wales

Instructions:

Go to and play the scene wales from the beginning to the end

Menu bar

Toolbar

Panels

The stage

The timeline

The Properties panel

Getting Started with Flash

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download