Multimedia Module

FLASH 5 PART I USER MANUAL

Flash5_I_User.pmd Last modified: 04/30/02

FLASH 5 PART I: USER MANUAL

TABLE OF CONTENTS
A Better Understanding ................................................................................................................. 3 The Authoring Environment .......................................................................................................... 3 Creating Animation - Keyframes and Motion Tweening ............................................................... 5 Animation Basics - Practice Review 1 .......................................................................................... 7 Layers ........................................................................................................................................... 7 Shape Tweening ........................................................................................................................... 8 Animation Basics - Practice Review 2 .......................................................................................... 9 More With Shape Tweens ........................................................................................................... 10 Importing ..................................................................................................................................... 10 Publishing ................................................................................................................................... 10 Symbols ...................................................................................................................................... 11 Creating a Button ........................................................................................................................ 11 Beyond Animation - Practice Review 3 ...................................................................................... 12 Buttons - The Hit State ............................................................................................................... 13 Beyond Animation - Practice Review 4 ...................................................................................... 14 Adding Sound to a Button ........................................................................................................... 14 Beyond Animation - Practice Review 5 ...................................................................................... 14 Scenes ........................................................................................................................................ 15 Action Script ................................................................................................................................ 15 Beyond Animation - Practice Review 6 ...................................................................................... 15 Criterion Test ............................................................................................................................... 16

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL

A BETTER UNDERSTANDING:
Flash has been marketed lately as a Web Development tool, but its not easy to learn because of a counter intuitive interface and may not be the right tool for the job. If youre using any of these other applications for Web Pages and youre thinking about switching to Flash, there are some things to consider. Flash requires a plugin for the viewer to see your site. (These plug-ins now come with all new browsers) Accessibility is an issue. (Some progress has been made) For best results, you can always keep your pages in these other formats and simply insert a Flash animation movie to make it more interesting.

It is important though that you understand that Flash is a Multimedia Authoring tool that can also be used for web pages.

THE AUTHORING ENVIRONMENT:

When you start the application, Flash opens a new movie by default. After that, you can create more new movies by choosing File > New Stage: The stage displays what the end viewer will see, much like the canvas in PhotoShop. You can open the Movie Properties window to modify the size, frames per second (fps) and background color of the stage by choosing Modify > Movie.

Stage

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL Toolbar: The toolbar contains tools for creating and changing artwork. The Line, Rectangle and Oval tools function as you would expect from using other graphic programs. Steps: 1. 2. 3. 4. 5. Using the oval tool, create a circle Click once using selection tool Click once on shape to select the fill Drag fill to the side to show that stroke has been left behind To select both stroke and fill, double click, or drag the selection tool around object

Different tools have different modifiers. Note: they are called modifiers in all lessons, but on the toolbar they are labeled as Options

Timeline: The left side of the timeline contains Layers used to organize movie content. Like the layers in PhotoShop, they can be locked or hidden. The right side contains Frames and the playback head in the same way that you may have seen in other animation applications.

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL Library: The Library is used to store and organize reusable elements called symbols. Types of symbols include graphics, buttons, and movieclips. The Library is where all imported graphics and sound files are stored. The Flash Library window is similar to Directors Cast window. You open the Library by choosing Window > Library.

Panels: Panels make it easier to access options for modifying elements. Similar to the Palettes in PhotoShop. You can open all panels by selecting Window > Panel sets > Default Layout

The authoring environment or source file is known as a .fla file. The published movie is known as a .swf file. When saving a new file Mac users must include the .fla extension (in the name)

CREATING ANIMATION - KEYFRAMES AND MOTION TWEENING:

Using a tween is a simple way to achieve animation. The two kinds of tweens in Flash are Motion tweens and shape tweens. For a Motion tween there are two conditions that need to be met: a beginning and ending keyframe your object must be a group or symbol.

Thats a Keyframe. A keyframe is a frame that signifies a beginning or an ending.

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL

Shapes Groups

Anything you draw with flash except text Visual cue appearance of small white dots when selected Any shape that has been grouped, or any imported graphic Visual cue surrounded by blue bounding box when selected

Symbols Any object can be converted into a symbol. All symbols are stored in the Library. Visual cue surrounded by a blue bounding box with a crosshair in the center

Creating a Motion Tween: Steps: 1. 2. Draw a circle and make sure it is selected Select Insert > Create Motion Tween.

It is now a symbol. Flash has changed the shape into a symbol. Remember, the two conditions for a Motion Tween are: beginning and ending keyframes and a group or a symbol. Creating an Ending Keyframe: Steps: 1. 2. 3. 4. 5. Preview in Test Mode: Steps: 1. Select Control > Test Movie Select frame 20 Select Insert > Keyframe from top menu. Click on the second keyframe Move the circle with the move tool Hit return to show the animation

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL

ANIMATION BASICS - PRACTICE REVIEW 1:

Steps: 1. 2. 3. Open new document and save to desktop as review.fla Draw your object Create Motion Tween

using Arrow tool select object choose Insert > Create Motion Tween. Hint: Flash turns your shape into a symbol

4.

Insert you second keyframe in frame 20. Hint: Your first keyframe is automatically put in for you by default.

click on frame 20 choose Insert > Keyframe with second keyframe still selected, move object to different place on stage Hint: you should see an arrow with a solid line in blue shaded area on time line. If line is broken you may have completed steps in the wrong order. If you add the second keyframe before adding the motion tween, your object will still be a shape. Remember that motion tweens can only be done on a Group or Symbol.

5. 6.

Alter position of object in 2nd keyframe. (Drag object to different place on stage) Preview in Test Mode by selecting Control > Test Movie. Hint: Flash exports the .fla as a .swf file and opens it in a new window.

LAYERS:
When you create a new Flash movie, it contains one layer by default. You can add more layers to organize the artwork. Layers do not add to your file size, and it is recommended that you put all objects as well as sounds on separate layers. It is extremely important to label your layers! Steps: 1. 2. 3. Double-click on the words Layer 1 Type the word motion to name this layer Click on the Eye icon to hide this layer. Note: Clicking on the Eye icon hides all layers that you have. If you had multiple layers and only wanted to hide one of them, click on the bullet of that layer that is in the Eye icon column. Select Insert > Layer to add a new layer. You may more quickly add a new layer by clicking on the New Layer button. Name the new layer shape
Copyright Arizona Board of Regents, 2002 University of Arizona

4.

5.
File name: Flash5_I_User.pmd Last modified: 04/30/02

FLASH 5 PART I: USER MANUAL

SHAPE TWEENING:
Remember that the two conditions for a motion tween are: a beginning and ending keyframe, and a group or symbol. The two conditions for a shape tween are: a beginning and ending keyframe, and a shape. Steps: 1. 2. Make object is selected. Locate the Frames Panel (Window > Panels > Frame) and choose Tweening > Shape

3. 4.

Select frame 20 in the timeline Select Insert > Keyframe

Notice that the visual cue here is that the timeline turns green and there is an arrow with a solid black line.

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL

ANIMATION BASICS - PRACTICE REVIEW 2:

Remember the conditions for a Shape tween: beginning and ending keyframes must be a shape Hint: grouped objects have to be ungrouped and text and symbols must be broken apart Steps: 1. 2. 3. Make a new layer and label it review. Draw your object Create shape tween: with shape selected, locate the Frames panel choose Tweening > Shape Hint: if Frames panel cannot be seen choose Modify > Frame 4. Insert 2nd keyframe 5. 6. click in frame20 choose Insert > Keyframe

Deselect shape by click anywhere other than the shape Alter shape: click and drag at one of its sides or with 2nd keyframe still selected, delete shape and replace with new shape

7.

Save and test movie

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL

10

MORE WITH SHAPE TWEENS:

Text and imported graphics can be made into shapes by breaking them apart. This will create one extra step when doing a shape tween. Steps: 1. 2. 3. 4. Add a new layer Name it text Type the letter A Select it. Note: after typing the A you may need to enlarge it. Do by using the Character Panel Choose Modify > Break Apart. Notice the little white dots in the A after we break it apart. Choose Shape tweening in the Frames Panel Insert 2nd keyframe Replace the letter A with the letter Z in the second keyframe Break the Z apart (Modify > Break Apart) Save and Test the movie

5.

6. 7. 8. 9. 10.

Tip: Use the Info Panel to get the X and Y coordinates if they want the letters to be in the same location.

IMPORTING:
Steps: 1. 2. Choose File > Import. Locate the file and Open. Note: On a MAC, there are two extra steps, after the import window opens, you have to click add then click import. On the PC once you have chosen File > Import, you image will appear on the stage. All imported files also go to the Library where they are stored as reusable elements called symbols.

PUBLISHING:
The Published file goes into same folder or area as the saved file. Because of this, it is important to know where your saved file is. Steps: 1. Choose File > Publish Settings to find the publish settings

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL

11

SYMBOLS:
A symbol is a reusable image, animation, or button ( all stored in the Library). The 3 kinds of symbols in Flash are: Buttons used to control interactivity, and navigation Movie Clips used for complex animations Graphics (when you import graphics, flash turns them into symbols)

Common Libraries: Notice the difference of the screen, as we are in symbol editing mode as opposed to the main timeline of a scene. You can get back to the main timeline by choosing Edit > Edit Movie or you could simply click on the Scene 1 icon as we only have one scene anyway.

CREATING A BUTTON:
When you select the button behavior for a symbol, Flash creates a Timeline with four frames. These refer to the corresponding state of the users mouse. Steps: 1. 2. 3. 4. 5. Choosing Insert > New Symbol Choose Button behavior Name it Shape button and click OK Draw a button Add keyframes to over and down states

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL 6. 7. Change appearance in over and down states (color, size). To change the size of the button choose Modify > Transform > Scale and Rotate and type in 80%. Navigate back to the main timeline by choosing Edit > Edit Movie or clicking on the Scene 1 icon

12

BEYOND ANIMATION - PRACTICE REVIEW 3:

Steps: 1. 2. Create a new movie and save it as buttons.fla to the desktop Create a button Symbol 3. 4. 5. 6. choose Insert > New Symbol choose button behavior name your button shape button click OK

Draw a button Add keyframes to over and down states Change appearance in over and/or down state (color, size) Place Instance of Button on Stage. Hint: to get back to the main timeline choose Edit > Edit Movie select button in library drag button to Stage

6.

Test button by choosing Control > Test Movie

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL

13

BUTTONS - THE HIT STATE:

Steps: 1. 2. 3. Make sure the first layer is labeled shape Add a new layer and label it text Type the word Text on the new layer

Now we will convert this text into a button: 4. 5. 6. 7. Select text and choose Insert > Convert to Symbol Choose button behavior Name button text button Click OK.

We must now get into symbol editing mode ourselves by: 8. 9. 10. 11. 12. Locate button in Library Double click on button icon, (not name) to open into Symbol editing mode Add keyframes to over and down states Change appearance of button in over and down states (color, size) Select Edit > Edit Movie to get back to the main timeline.

Lets now add a hit state to the button by: 13. 14. 15. Get into Symbol Editing Mode Add a keyframe in hit state With the hit state frame selected, use the rectangle tool to create a shape that covers the entire text area. Test the button

16.

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL

14

BEYOND ANIMATION - PRACTICE REVIEW 4:

Steps: 1. 2. 3. 4. 5. 6. 7. 8. 10. Add a new layer and label it text Type the word Text on the new layer Convert the text to a symbol (Insert > Convert to Symbol) Choose Button behavior and name the button text button. Click OK. Double click button icon in Library to go to Symbol Editing Mode Add keyframe in over, down and hit states Change appearance in over and down states (color, size) Use rectangle tool to create a shape that covers the entire text area. This creates the Hit State. Test the button

ADDING SOUND TO A BUTTON:

Sound can be added to the over or down state of a button. Keep in mind that sound must be in its final form before importing it into Flash.

BEYOND ANIMATION - PRACTICE REVIEW 5:

Steps: 1. 2. 3. 4. Double click instance of shape button on Stage (to open into Symbol Editing Mode) Select Over State Locate a sound file from the common Library (sound) and drag it onto the stage. Test button

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL

15

SCENES:
Scenes are one way to organize your movie. You can add, delete, duplicate, rename, and change the order of scenes. You can quickly jump from scene to scene using the Edit Scene icon above the timeline.

ACTION SCRIPT:
Flash has a scripting language called ActionScript. Its used to add sophisticated interactivity. Actions can be added to a frame, button or movie clip.

BEYOND ANIMATION - PRACTICE REVIEW 6:

Steps: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.
File name: Flash5_I_User.pmd Last modified: 04/30/02

Add a new scene (Insert > Scene) Place shape button instance on the stage in scene 2 In Actions Window, click and hold on the + sign to reveal the drop down menu Choose Basic Actions > Go To Choose Scene 1, Frame 1 In Scene 2, create a New layer and name it stop action Select frame 1 in stop action layer In Frame Actions window, click and hold on + sign Choose Basic Actions > Stop Navigate to Scene 1 Select text button instance on stage In Object Actions window, click and hold on + sign Choose Basic Actions > Go To Choose Scene 2, Frame 1 Add Stop Action to Scene 1 Test Movie
Copyright Arizona Board of Regents, 2002 University of Arizona

FLASH 5 PART I: USER MANUAL

16

CRITERION TEST 20 min:

This is the criterion test for the Flash 5 Part I module. It is going to test your comprehension of the workshop you just participated in or allow you to test out of the Flash 5 Part I module. Open a new document and save to the desktop as (YourName).fla Create a circle that moves from the left side of the stage to the right side On a second layer create a shape tween of a box that turns into a circle On a third layer create a button of out of your name, make it red and put a sound on the over state. ( dont forget to create the hit state) Publish for the web.

File name: Flash5_I_User.pmd Last modified: 04/30/02

Copyright Arizona Board of Regents, 2002 University of Arizona