Flash Animation for Beginners - CCBC Student Web

18
Introduction to Flash Animation Flash Animation for Beginners ASMCUE 2007 Gary Kaiser, Ph.D. Professor, Microbiology CCBC, Catonsville http://student.ccbcmd.edu/~gkaiser/goshp.html In this workshop we will learn how to make a simple Flash animation of the direct fluorescent antibody technique. Because of time constraints we won’t have time to cover how to make original drawings using the Flash drawing tools but rather will use images I have previously drawn. In addition, we won’t be using stop and continue commands to run the animation but rather will be using timed text inserts. However, instructions for inserting “stop” and “continue” commands will be included in this handout. I. Introduction A. The Macromedia Flash Screen (See Fig. 1) Fig. 1: The Macromedia Flash Screen 1) The stage (See Fig. 1) Drawings are made on or imported into the stage. Each stage screen is a frame in your animation. The stage area can be positioned using either the slides or the “hand” tool. 2) The properties box (See Fig. 1) Set the size and background color of the stage to be used in your animation. Once you have set the size and background color, save the file. 1

Transcript of Flash Animation for Beginners - CCBC Student Web

Page 1: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

Flash Animation for Beginners

ASMCUE 2007 Gary Kaiser, Ph.D.

Professor, Microbiology CCBC, Catonsville

http://student.ccbcmd.edu/~gkaiser/goshp.html

In this workshop we will learn how to make a simple Flash animation of the direct fluorescent antibody technique. Because of time constraints we won’t have time to cover how to make original drawings using the Flash drawing tools but rather will use images I have previously drawn. In addition, we won’t be using stop and continue commands to run the animation but rather will be using timed text inserts. However, instructions for inserting “stop” and “continue” commands will be included in this handout. I. Introduction

A. The Macromedia Flash Screen (See Fig. 1)

Fig. 1: The Macromedia Flash Screen

1) The stage (See Fig. 1)

Drawings are made on or imported into the stage. Each stage screen is a frame in your animation. The stage area can be positioned using either the slides or the “hand” tool.

2) The properties box (See Fig. 1)

Set the size and background color of the stage to be used in your animation. Once you have set the size and background color, save the file.

1

Page 2: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

2

3) The select tool (See Fig. 1) The select tool is used to select the objects on the stage that you wish to manipulate. 4) The timeline (See Fig. 1) The timeline divides your animation into frames. Left-click on the frame in the timeline on which you want to work. 5) Layers (See Fig. 1) Every moving object in your animation should be in a separate layer. Non-moving background objects should also be in a dedicated layer.

a. To name a layer, do the following:

• On the left-hand side of the Timeline, double-click on the layer number you want to name. • Type a label. • Hit “Enter” (“Return” on MAC).

b. To add a new layer, do the following:

• Left-click on the left-hand “+” icon (sheet with curled edge) below the layer column, or Right-click on a layer to get a menu and click “insert layer.”

c. To delete a layer, do the following:

• Drag layer to be deleted into the trash can, or Right-click on the layer to be deleted and click “delete layer.”

d. To move a layer, in order to place a layer above or below another, do the following:

• Drag the layer to the desired position. 6) View Size This window lets you increase or decrease the viewing size of your animation. This enables you to see the entire animation (choose “Fit in window”) or to blow up a small portion of the stage in order to align objects up more clearly or make more detailed drawings.

B. Drawing or Importing Objects

1. Drawing Objects If you are familiar with drawing or illustration programs such as Adobe Illustrator or Corel Draw, the Flash drawing tools are used in a limited but similar fashion. I prefer to make my drawings using Adobe Illustrator, a much more versatile program, and import those drawings into the Flash library (see below). In this workshop we won’t have time to cover how to make original drawings using the Flash drawing tools but rather will use images I have previously drawn. 2. Importing Objects Into the Library or Onto the Stage To import a clip art drawing or an original drawing made in another illustration program, do the following:

Page 3: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

3

• Click “File”, “Import”, and “Import to Library.” This directly converts the drawing to a symbol within the library for that animation. Converting your objects to symbols greatly reduces the amount of memory needed to store the animation.

• To view the objects in your library, use the keyboard command “Control+L” (“Command+L” on MAC) or click Window” and “Library.”

• To rename the object in the library, double click on the old name, type in a new name, and hit “Enter” (“Return” on MAC).

To import a drawing from your library to the stage, do the following:

• Click on the timeline frame of the layer in which you want to import the drawing. • Drag the drawing from the library onto the stage.

C. Converting Objects to Symbols

In order to reduce the amount of memory required to store the animation, all drawings and text should be converted to symbols that are subsequently stored in the library for that animation. To convert a drawing or a text object to a symbol, do the following:

1. Using the selection tool, select the drawing or text object you want to convert to a symbol. 2. Convert the object to a symbol by using the keyboard command “F8.” Rename the object and

click “OK” on the menu. The object is now converted to a symbol and stored in the library. 3. To view the objects in your library, use the keyboard command “Control+L” (“Command+L” on

MAC) or click Window” and “Library.” If you import an object into the library as mentioned above in B2, it will automatically be converted to a symbol.

D. Converting a Frame into a Keyframe Keyframes are frames in a layer of a timeline where an action either begins or ends. For example, you need one keyframe to begin the motion of an object and another keyframe to end that motion.

To make a frame of a layer in a timeline a keyframe, do one the following:

1. Use the keyboard command “F6”, or 2. Right-click on the desired frame and select “Insert Keyframe”, or 3. Select “Insert”, “Timeline”, and “Keyframe.”

E. Clearing a Keyframe To convert a keyframe, back to a regular frame, do one of the following:

1. Use the keyboard command “Shift+F6”, or 2. Right-click on the desired frame and select “Clear Keyframe”, or 3. Select “Modify”, “Timeline”, and “Clear Keyframe.”

F. Adding Frames To add frames to a timeline layer, do one of the following:

1. Use the keyboard command “F5”, or 2. Right-click on the desired frame and select “Insert Frame”, or

Page 4: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

4

3. Select “Insert”, “Timeline”, and “Frame.”

G. Deleting Frames To delete frames from a timeline layer, use the keyboard command “Shift+F5”, or right-click on the desired frame and select “Remove Frames.”

II. Beginning Your Animation: The Direct Fluorescent Antibody Technique: Positive Test

1. Set the size and background color of the stage to be used in your animation. (My demo is set at 5 X 5 inches.) Once you have set the size and background color, save the file.

2. Insert the CD-ROM into its drive. 3. If you wish to view the finished Flash document you will be making, load in the Flash file (.fla

file) “posdfa_ASM” from your CD-ROM. If you wish to view the finished Flash document of this animation that is on my web site, load in the Flash file (.fla file) “dfluaby_gk.”

A. Moving the Animation Title Text On to the Stage

Having text move onto the stage from the left or right is very simple.

1. Change the name of layer 1 to “frame” if you wish to place a border around your animation. (To change the name, double-click on the layer you want to rename, type in the new name, and hit enter; see p. 2.)

2. Add a new layer by left-clicking on the left-hand “+” icon (sheet with curled edge) below the layer column (see p. 2)

3. Change the name of layer 2 to “text 1”. (See p. 2.) 4. To add a border around your animation, import "frame" from the CD-ROM into your library. (See

p.2.) 5. Click on frame 1 of the "frame" layer. Click on the "select arrow" and drag the frame to the stage

to form a box around the stage. 6. Now click on frame 1 of the “text 1” layer. Click on the text tool “A”, click on the stage, and type

"Direct Fluorescent Antibody Test.” You can use the Properties Box to change font type, font size, font color, etc. Position the text where you want it to end up on the stage. In the “Properties” box, choose Static Text.

7. Use the keyboard command F8 to convert text to a symbol and place it in your library (see p. 3). 8. Click frame 36 of the timeline (default speed is 12 frames a second so this will represent 3

seconds) and convert it to a keyframe using the keyboard command “F6” – or by clicking “Insert”, “Timeline”, and “Keyframe” – or right-clicking on frame 36 and selecting “Insert Keyframe.” ((See p. 3.)

9. Click on frame 1 of the timeline for the “text 1” layer. Hold down the “shift key” and drag the text to the right just off the stage into the gray area.

10. Click on any frame between frame 1 and frame 36 of the “text 1” layer, go down to the properties box and select “Motion” from the drop-down menu next to Tween.

11. Hit “Enter” (“Return” on MAC) to play the animation. 12. Save the animation.

See Fig. 2 to view the final screen.

Page 5: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

Fig. 2: Moving Text On to Stage

B. Add Unknown Antigen (Bacterium) to the Animation

1. Add a new layer by left-clicking the left-hand “+” icon (sheet with curled edge) below the layer column. Change the name of layer 3 to “antigen” (see p. 2).

2. Import the “antigen” illustration from the CD-ROM to the library of your new animation (see p. 2). Drag the illustration of bacterium01 from the library to the stage and position it in the center.

3. While still on frame 1 of “antigen,” type “unknown antigen” and center it inside the bacterium. See Fig. 3 to view the final screen.

5

Page 6: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

Fig. 3: Unknown Antigen

C. Add Known Fluorescent Antibodies to the Animation

1. Add a new layer by left-clicking the left-hand “+” icon (sheet with curled edge) below the layer

column. Change the name of layer 4 to “text 2.” 2. Add 12 more new layers and label them “fluaby1” through “fluaby12.” 3. Click on frame 36 of each of the “text 2” and the 12 new “fluaby” layers and convert to a

keyframe by using the keyboard command “F6.” (To save time, hold the “shift” key down while you select frame 36 of “fluaby12” and “text2” to select all 13 layers and then use “F6” to convert them all to keyframes.)

4. Click on frame 36 of the “text 2” layer. At the bottom of the stage, type in “Known fluorescent antibody is added to the slide.”

5. Import the “fluoraby” illustration from the CD-ROM to the library of your new animation (see p. 2). 6. Starting with the “fluaby1” layer, click on frame 36 and drag the illustration of the fluorescent

antibody from the library to the stage. Position it in the upper left hand corner and, if necessary, rotate the illustration so that the Fab portion of the antibody is pointing towards the bacterium. The “free transform” tool used for rotation is the icon in the tools menu that appears as a square surrounded by dots and is located just below the pencil tool (see Fig. 5). After selecting the rotation tool, move the cursor arrow near the selected illustration of an antibody until you see a curved line with an arrowhead. Move the mouse to rotate the image clockwise or counterclockwise.

7. Working clockwise around the bacterium, repeat for layers “fluaby2” through “fluaby8.” These 8 fluorescent antibodies will eventually bind to the bacterium.

8. Add a fluorescent antibody to each of the four corners of the stage in layers “fluaby9” through “fluaby12.” These 4 fluorescent antibodies will eventually be washed off the slide.

9. Click on frame 72 of each layer in your animation and make it a keyframe by using the keyboard command “F6.” (Hold the “shift” key down while you select frame 72 of the topmost and bottom most layers to select all and then use “F6” to convert them all to keyframes.)

10. Save the animation

6

Page 7: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

See Fig. 4 to view the final screen.

Fig. 4: Adding Known Fluorescent Antibody

D. Moving the Fluorescent Antibodies to the Antigen

1. Click on frame 108 of each layer in your animation and make it a keyframe by using the keyboard command “F6.” (Hold the “shift” key down while you select frame 108 of the topmost and bottom most layers to select all and then use “F6” to convert all frame 108s to keyframes.)

2. Click on frame 108 of the “fluaby1” layer and drag fluaby1 down to the bacterium. Using the “free transform” tool and the arrow keys, rotate the antibody so it fits the epitopes on the bacterium. Magnifying the image with the “magnification” tool will make this easier.

3. Click on a frame between 72 and 108, go down to the properties box and select “Motion” from the drop-down menu next to Tween.

4. Repeat steps 2 and 3 on frame 108 of each of the remaining “fluaby” layers. 5. Do not move “fluaby9” through “fluaby12.” These will be washed off the slide later. 6. Save the animation. The final screen is shown in Fig. 5.

7

Page 8: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

Fig. 5: Move Fluorescent Antibodies to Antigen

E. Wash Slide to Remove Unbound Antibodies

1. Click on frame 109 of each layer in your animation and make it a keyframe by using the keyboard command “F6.” (Hold the “shift” key down while you select frame 109 of the topmost and bottom most layers to select all and then use “F6” to convert them all to keyframes.)

2. Click on frame 109 of the “text 2” layer and delete the text in frame 109. Replace with the following text: “The slide is washed. Any fluorescent antibodies that are bound to the antigen are not washed off the slide.”

3. Go to frame 157 of each layer in your animation and make it a keyframe by using the keyboard command “F6.” (Hold the “shift” key down while you select frame 157 of the topmost and bottom most layers to select all and then use “F6” to convert them all to keyframes.) This will give a 4 second span to read the text.

4. Go to frame 193 of each layer in your animation and make it a keyframe by using the keyboard command “F6.” This will give a 3 second span for the unbound fluorescent antibodies to “wash off” the slide.

5. Now we will make the unbound fluorescent antibodies “wash off” the slide. Click on frame 193 of the “fluaby9” layer. Now go to the top of the screen and click on “Modify,” then “Transform,” and then “Scale and Rotate.” Type “0” in the scale box and click OK (see Fig. 7).

6. Click on any frame between frame 157 and frame 193 of the “fluaby9” layer, go down to the properties box and select “Motion” from the drop-down menu next to Tween.

7. Repeat steps 5 and 6 for layers “fluaby10” through “fluaby12.”

8

Page 9: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

Fig. 7: Scaling an Object

F. Showing the Known Antigen Fluorescing

1. Go to frame 194 of each layer in your animation and make it a keyframe by using the keyboard command “F6.” (Hold the “shift” key down while you select frame 194 of the topmost and bottom most layers to select all and then use “F6” to convert them all to keyframes.)

2. Click on frame 194 of the “text2” layer and delete with the delete key. Type the following in frame 194: “In a positive test, the antigen fluoresces when viewed with a fluorescent microscope.”

3. Go to frame 194 of the antigen, select the bacterium, and delete it with the delete key. Now drag “antigen_flu” from the library to the stage and line it up so the epitopes fit the antibody molecules. This shows the antigen fluorescing once the fluorescent antibodies bind.

4. Save the animation.

The final screen is shown in Fig. 6.

9

Page 10: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

Fig. 6: Fluorescent Antigen

G. Ending the Animation

A. Add a new layer by left-clicking the left-hand “+” icon (sheet with curled edge) below the layer column. Change the name of this layer to “action.”

B. Select frame 1 of the “action” layer. At the top of the screen click “window”, “Other Panels,” “Common Libraries,” and “Buttons.”

C. Select a playback button and drag it to the upper left-hand corner of the stage. D. Click on frame 194 of the “action” layer and make it a keyframe by using the keyboard command “F6.” E. To stop the animation after it plays, click on the final frame of the animation (194) of the “action” layer.

Open the “Action-Frame” window above the screen. Type the following in the right-hand box of the Action-Frame window: stop( ); Alternately, click ”Global Functions,” click “Timeline Control,” and drag the command “stop():” into the Actions-frame box box to the right.

F. Select the playback button. Open the Behaviors” window on the right-hand side of the screen, click on the “+” sign, and click on “Movieclip,” click on “Goto and Play at frame or label.” In the “Goto and Play at frame or label” window, type “1” in the box at the bottom and click “OK.” See Fig. 8.

10

Page 11: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

Fig. 8: Stop( ): and Goto and Play Commands

H. Publish and Play the Animation

A. Go to frame 1 and hit “Enter” (“Return” on MAC) to play the animation. B. Publish the animation as html by clicking on the blank screen and selecting “Settings” in the Properties Box, “html” in the drop-down menu, and “Publish” and “OK” in the html menu. C. Hit “Control+Enter” (“Command+Enter” on MAC) to test the animation.

11

Page 12: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

III. Other Bells and Whistles

A. Moving an Object Along a Path (See Example ASM_Flash_dfaw_path from the CD-ROM)

1. Load in the Flash file “ASM_Flash_dfaws” from the CD-ROM. 2. Select frame 72 of the “fluaby3” layer. 3. Go to the far left of the timeline and right-click on the “fluby3” layer and select “Add Motion Guide.” 4. Label the layer “guide3.” 5. Using the keyboard command “F6,” convert frame 72 of the “guide3” layer to a keyframe. 6. Click the frame 72 of the “guide3” layer. 7. Click the pencil tool and the smooth command (“S” shape under options in the tool menu). 8. Draw a smooth curved line from the center of the fluorescent antibody in the “fluaby3” layer to the center of the pair of epitopes on the bacterium where the antibody will eventually attach (see Fig. 9). 9. Use the keyboard command “F6” to convert “guide3” layer frame 108 to a keyframe. 10. Repeat steps 1-9 for the “fluaby1,” “fluaby5,” and “fluaby7” layers (see Fig. 9). 11. Go to frame 1 and hit “Enter” to play the animation. 12. Publish the animation as html by clicking on the blank screen and selecting “Settings” in the Properties Box, “html” in the drop-down menu, and “Publish” and “OK” in the html menu. 13. Hit “Control+Enter” (“Command+Enter” on MAC) to test the animation.

Fig. 9: Guide layer and Motion Along a Path

12

Page 13: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

13

B. Scaling an Object

• See Section E, Step 5 on p. 8.

C. Tweening Color During Motion (See the “tweencolor_flash” file on the CD-ROM to view the final flash file.)

1. Create a new animation and label layer 1 “ball.” 2. Using the circle tool, hold down the “Shift” key and draw a circle. 3. Using the select tool, draw a box around the circle to select both outline and fill of the circle. 4. Using the keyboard command “F8,” covert the object to a symbol and rename it “ball.” 5. Position the ball in the upper left-hand corner of the stage. 6. Click on timeline frame 24 and use the keyboard command “F6” to convert it to a keyframe. 7. At frame 24, drag the ball to the bottom center of the stage. 8. Click on timeline frame 48 and use the keyboard command “F6” to convert it to a keyframe. 9. At frame 48, drag the ball to the upper right-hand corner of the stage. 10. Click on keyframe 1 and using the select arrow, select the ball. 11. In the drop-down menu next to “Color” in the properties box, choose “tint”, select a starting color from the color box, and choose 100% (see Fig. 10). 12. Click on keyframe 24 and using the select arrow, select the ball. 13. In the drop-down menu next to “Color” in the properties box, choose “tint”, select a middle-color, and choose 100% (see Fig. 10). 14. Click on keyframe 48 and using the select arrow, select the ball. 15. In the drop-down menu next to “Color” in the properties box, choose “tint”, select a ending color, and choose 100% (see Fig. 10). 16. Click on any frame between frame 1 and frame 24 of the “ball” layer, go down to the properties box and select “Motion” from the drop-down menu next to Tween. 17. Click on any frame between frame 24 and frame 48 of the “ball” layer, go down to the properties box and select “Motion” from the drop-down menu next to Tween. 18. Hit “Enter” to play the animation and “Control+Enter” (“Command+Enter” on MAC) to test the animation. 19. To put a 2 second pause at the end of the animation before it begins replaying, click on timeline frame 72 of the “ball” layer and use keyboard command “F6” to convert it to a keyframe. 20. Save the animation. 21. Publish the animation as html by clicking on the blank screen and selecting “Settings” in the Properties Box, “html” in the drop-down menu, and “Publish” and “OK” in the html menu. (If you want the animation to loop continuously rather than stop after one run, make sure the “loop” box is checked.

Page 14: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

Fig. 10: Menu for Tweening Color (Tint).

D. Tweening Transparency During Motion (See the “tweentranspar_flash” file on the CD-ROM to view the final flash file.)

1. Create a new animation and label layer 1 “ball.” 2. Using the circle tool, hold down the “Shift” key and draw a circle. 3. Using the select tool, draw a box around the circle to select both outline and fill of the circle. 4. Using the keyboard command “F8,” covert the object to a symbol and rename it “ball.” 5. Position the ball in the upper left-hand corner of the stage. 6. Click on timeline frame 24 and use the keyboard command “F6” to convert it to a keyframe. 7. Drag the ball to the bottom center of the stage. 8. Click on timeline frame 48 and use the keyboard command “F6” to convert it to a keyframe. 9. Drag the ball to the upper right-hand corner of the stage. 10. Click on keyframe 1 and using the select arrow, select the ball. 11. In the drop-down menu next to “Color” in the properties box, choose “alpha” and choose 2% (see Fig. 11). 12. Click on keyframe 24 and using the select arrow, select the ball. 13. In the drop-down menu next to “Color” in the properties box, choose “alpha” and choose 100% (see Fig. 11). 14.Click on keyframe 48 and using the select arrow, select the ball. 15. In the drop-down menu next to “Color” in the properties box, choose “alpha” and choose 10% (see Fig. 11). 16. Click on any frame between frame 1 and frame 24 of the “ball” layer, go down to the properties box and select “Motion” from the drop-down menu next to Tween. 17. Click on any frame between frame 24 and frame 48 of the “ball” layer, go down to the properties box and select “Motion” from the drop-down menu next to Tween.

14

Page 15: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

18. Hit “Enter” to play the animation and “Control+Enter” (“Command+Enter” on MAC) to test the animation. 19. To put a 2 second pause at the end of the animation before it begins replaying, click on timeline frame 72 of the “ball” layer and use keyboard command “F6” to convert it to a keyframe. 20. Save the animation. 21. Publish the animation as html by clicking on the blank screen and selecting “Settings” in the Properties Box, “html” in the drop-down menu, and “Publish” and “OK” in the html menu. (If you want the animation to loop continuously rather than stop after one run, make sure the “loop” box is checked.

Fig. 11: Menu for Tweening Transparency (Alpha).

15

Page 16: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

E. Using Buttons to Play, Stop, and Continue

1. Add a new layer. (See p. 2) and name it “control”. 2. Click frame 1 of the Control layer. Go to “Windows,” Other Panels,” Common Libraries,” Buttons,” Playback,” playback-play” and drag the button to a corner of the stage. Click the Type icon, drag a box and type “play.” 3. Click frame 1 of the Control layer. Go to “Actions-frame” and in the box for control: 1 type the following: stop();- that is, “stop, open parenthesis, close parenthesis, semicolon”. This is the stop command that will stop playback at the designated frame number. (See Fig. 12.) 4. Select the play button and go to “Behaviors” and click on the + sign. Click on “Movieclip,” and Goto and Play at Frame or label.” In the pop-up box type “2” for frame 2 in the bottom box and click “OK.” Releasing the play button will restart the animation at frame 2 (See Fig. 13). 5. Wherever you want to again stop the playback, such as to enable the viewer to read or copy text, select that frame in the “control” layer, go to “Actions-frame” and in the box for control (frame number) type stop(); 6. Go to and select the next frame in the “control” layer. Go to the stage and delete “play” next to the button, and substitute with “continue.” Select the playback button, go to Action-frames and in the left-hand window, select the playback button where you want play to resume. In the right-hand window of “Actions” type in the new desired playback number between the parentheses. 7. When you reach the last frame of your animation, select that frame in your “control” layer, go to “Actions-frame” and in the box for control (frame number) type stop(); 8. With the last frame of “control” layer still selected, go to the stage and delete “continue” next to the button, and substitute with “replay.” Select the playback button, go to Action-frames and in the left-hand window, select the playback button for the last frame. In the right-hand window of “Actions” type in 1 between the parentheses.

Figure 12: The “stop” command.

16

Page 17: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

Figure 13: The “play” command

F. Publishing a Flash Animation in a HTML Web Document

1. Transfer all 3 flash files with the same name into the desired folder for your document. One file shows a red circle with “f” inside, a second file has a clear circle with a dark blue “f”, and the third file is indicated by an “e” if you use Internet Explorer as your browser.

2. Using Dreamweaver, PowerPoint or some other web design program, create a new document for your animation.

3. In the case of Dreamweaver, type a title for your animation if you wish. 4. Select “Insert”, “Media”, and “Flash.” 5. Select the file you wish to insert. Make sure it is the one indicated by a clear

circle surrounding a dark blue “f” and not the one with the red circle. 6. Save the file and preview the animation in your browser.

G. Publishing a Flash Animation as a QuickTime Movie

1. Clicking on the blank screen and selecting “Settings” in the Properties Box. 2. Click on the “Formats” tab and check the “QuickTime (.mov)” box. 3. Click on the “Flash” tab and in the drop-down menu next to “Version:” select “Flash Player 5.” (Only versions of Flash 5.0 or earlier can be published as QuickTime Movies.) 4. Click on the “QuickTime” tab and in the drop-down menu next to “Controller:” select select “Standard.” 5. Click “Publish” and “OK.”

17

Page 18: Flash Animation for Beginners - CCBC Student Web

Introduction to Flash Animation

18

IV. Your Next Animation: The Direct Fluorescent Antibody Technique: Negative Test

1. Using the drawings found in the library of the file “ASM_Flash_negativedfaws” that is on your CD-ROM, try making a Flash animation of a negative direct fluorescent antibody test.

2. If you wish to view a finished Flash document similar to the style you made today, load in the Flash file (.fla file) “negdfa_ASM” from your CD-ROM. If you wish to view the finished Flash document of this animation that is on my web site, load in the Flash file (.fla file) “negdfa_gk.”

V. Sample Animations from my Website

http://student.ccbcmd.edu/~gkaiser/goshp.html(Home Page) http://student.ccbcmd.edu/courses/bio141/lecguide/unit3/viruses/evsummary01.html(Flash Animation of the life cycle of an enveloped virus; html) http://student.ccbcmd.edu/courses/bio141/lecguide/unit4/innate/c1act_flash.html(Flash Animation the classical complement pathway; html) http://student.ccbcmd.edu/courses/bio141/lecguide/unit4/innate/lpssignal_flash.html(Flash Animation of LPS activating TLR-4 on a macrophage; html) http://student.ccbcmd.edu/courses/bio141/labmanua/lab18/fta_flash.html(Flash Animation of a FTA-ABS test; html) http://student.ccbcmd.edu/courses/bio141/labmanua/lab18/eia_flash.html(Flash Animation of an ELISA test; html) http://student.ccbcmd.edu/courses/bio141/lecguide/unit6/genetics/protsyn/translation/translat.html(Flash Animation of translation; html) http://student.ccbcmd.edu/courses/bio141/lecguide/unit3/eustruct/endomembanim.html(Flash Animation of the endomembrane system of eukaryotes; html)