• Home
• ·
• Classes
• ·
• Services
• ·
• Projects
• ·
• Contact

Adobe Flash for Beginners - Graphics & Animation

Class Description: Add spice and movement to your website with Flash graphics and animations. After a tour of the program workspace and key concepts, build your first frame-by-frame animation. Move on to learn basic motion and shape tweening techniques. Work with Flash drawing tools, imported files and special effect filters. Enhance your animations with sound effects. Round off the session with an important lesson on adding Flash files to web pages. With practical exercises, this class delivers a firm grounding in a robust program with endless potential.

1. General Information about this Class

As a beginner to Flash it's natural to feel overwhelmed by the program's vast capabilities. Though Flash was originally designed to produce web-ready graphics and animations, these basic products are now only one of many different things Flash users produce.

Flash is now used to make: Games, cartoons, websites, online video, multimedia projects, photo galleries and much, much more.

While the vast majority of products being produced in Flash are headed for web pages, Flash can also produce non-web related products including offline kiosk displays, presentations and video clips to be utilized in larger video projects.

A. What this class is

This class is designed to get you started in Flash by showing you how to create basic graphics and animations. These original Flash products are still very important items for any web designer to have in their toolbox.

C. Where to go from here

• Online video from Adobe: http://tv.adobe.com/
• Online Video from Lynda: http://www.lynda.com/
• Get a book: amazon.com
• take the next two Flash classes

2. Getting to Know Adobe Flash

A. The Flash Workspace

Like all Adobe programs, the Flash workspace is highly customizable and sticky, (i.e. if you make changes to the workspace it will stick that way until you change it to something else).

For beginners, I highly recommend working in the Classic workspace - it's got everything a beginner needs. To reset Flash to the Classic workspace, from the Menu Bar (along the top) go to to Windows > Workspace > Classic. If you make changes to you Classic workspace and would like to reset it, from the Menu Bar, go to Windows > Workspace > Reset 'Classic'.

B. Flash Drawing Modes

Up until Flash 8, beginners had to deal with vector drawing tools that behaved in an odd manner. Since then, beginners have had the opportunity to draw in a much friendlier environment called Object Drawing Mode. I highly recommend that beginners work in Object Drawing Mode.

To activate Object Drawing Mode you must first select a drawing tool from the toolbar (for example...the Pencil Tool), then activate the mode by clicking the icon at the bottom of the toolbar. Once activated, Object Drawing Mode will be applied to all your drawing tools.

The original Merge Drawing Mode is still available and is loved by many experienced Flash artists and animators.

3. Getting to Know Flash Animation

A. The Flash Timeline

What separates Flash from many other graphic programs is it's ability to generate a file that changes over time. Where this change is developed is in the Timeline.

• The Timeline is divided into two areas: Layers to the left and frames to the right
• Even the most basic animations may well consist of multiple layers
• All animations, by definition, must contain multiple frames
• Animations begin playing in frame 1 and march on to the right
• The speed at which your animation plays is controlled by the frame rate (FPS - frame per second)
• This speed (FPS) is adjustable

B. Types of Frames

As you develop your animation you will be developing your Timeline (both it's layers and frames). All the visual graphics used in your animation must be held within Keyframes. Here are some variations of keyframes you will make and see during development:

Exercise 1 - Frame by Frame Animation

In this exercise we will create a stick figure animation with waving arms. While the finished animation looks childish, this exercise is designed to expose you to a handful of Flash fundamentals including: various Flash drawing tools, timeline layers & frames, stage color, adding text and filters to text, and animation speed (FPS).

This animation features a background image. The image is a multi-layer Photoshop file (.psd). We will need to import this image into our project. Prior to import we will explore some important features of the Photoshop file including: Photoshop layers, image transparency, image Size (pixel count), and image format.

The background images used in this exercise were acquired from flickr Creative Commons, specifically, and with much thanks to Guwashi999, francesco sgroi and kevin.wailes

Step by Step »

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
2. In the Properties Panel, set the Frame Rate (FPS) to 12
3. Save your file as ex-1.fla
4. In the Toolbar, select the Selection Tool
5. To bring in the background image, from the Menu Bar, go to File > Import > Import to Stage
6. Choose scene.psd as the file you want to Import
7. In the .PSD Import dialogue box set the following:
   • Convert Layers to: Flash Layers
   • check 'Place objects at original position'
   • check 'Set stage size to same size...'
   • Be sure each layer is set to Lossy
8. Once imported, lock the 'scene-1', 'scene-2', and 'scene-3' layers
   • Note - Locked layers can still be re-ordered
9. Highlight then delete the extra, leftover layer
10. Re-shuffle the scene layers until the scene you like most is on top
    • Don't worry...you can always change your mind later on
11. In the top-right corner of the Timeline, find the tiny, drop-down menu
12. From the drop-down menu, set the frame size to Medium
13. In the Properties Panel, locate the Stage: Background color chip box
    • You will not see the Background color chip if something is selected
    • To de-select all, simply click off the Stage (where there is nothing)
14. Change the stage color to one that compliments your background image by:
    • choosing a color from the color picker dialogue box or...
    • sampling a color from the image
15. Save your file
16. Highlight the topmost scene layer
17. Create a new layer and re-name it 'body'
    • Note - new layers are always added above the one currently selected
18. In the Toolbar, select the Oval Tool
19. In the Toolbar, set the stroke color to blue and the fill color to red
20. In the Properties Panel, set the stroke width to 1.00
21. Select the Blank Keyframe in the 'body' layer
22. Using the Oval Tool, drag out a head for the stick figure on the stage
23. In the Toolbar, select the Rectangle Tool
24. Using the Rectangle Tool, drag out a body for the stick figure on the stage
25. In the Toolbar, select the Pencil Tool
    • Note - the Pencil Tool only draws strokes
26. Using the Pencil Tool, draw legs for the stick figure on the stage
27. With the legs selected, modify their thickness in the Properties Panel...to your taste
28. In the Toolbar, select the Selection Tool
29. Select the oval 'head'
30. From the Menu Bar, go to Modify > Arrange > Bring to Front
31. Select the stroke 'legs'
32. From the Menu Bar, go to Modify > Arrange > Send to Back
33. Save your file
34. Select and modify the body part colors in the Properties Panel...to your taste
    • You may choose to remove the stroke by clicking the "no stroke" icon from the color picker
35. Select and modify the body part positions
    • to move a part simple select, then drag
    • you may also use your keyboard arrow keys for fine adjustments
    • adding [SHIFT] while using keyboard arrow keys amplifies the adjustments
36. With the Free Transform Tool, select and modify the body part shapes
    • drag the adjustment handles to change the shape dimensions
    • drag the line between the adjustment handles to skew the shape
    • drag outside the corner adjustment handles to rotate the shape
37. Lock the 'body' layer
38. Create a new layer and re-name it 'arms'
39. Move the 'arms' layer to the top of the layer stack (if needed)
40. In the 'arms' layer timeline, select frame 2
41. With frame 2 selected, right-click over the selected frame and choose Insert Blank Keyframe
42. Insert Blank Keyframe's into frames 3, 4 and 5
43. Use the Timeline scrubber to preview the Timeline
    • You should notice that there is a problem developing, namely, your body parts and background image 'drop out' as soon as the play head moves over frame 2
44. To extend your other layers to frame 5 (i.e. to make a Frame Span), do this:
    • Select frame 5 of the 'body' layer
    • Right-click over the selected frame and choose Insert Frame
    • Repeat this process for your three scene layers
45. Save your file
46. In the Toolbar, select the Brush Tool
    • Note - the Brush Tool only draws fills
47. In the Toolbar, select a fill color for your 'arms'
48. In the Toolbar (at the bottom), select a brush size for you arms
    • Note - Flash gives your cursor a preview of your chosen brush size
49. In the 'arms' layer timeline, select Blank Keyframe 1
50. Using the Brush Tool, draw arms for the stick figure in Blank Keyframe 1
51. In the 'arms' layer timeline, select Blank Keyframe 2
52. Using the Brush Tool, draw different arms for the stick figure in Blank Keyframe 2
53. In the 'arms' layer timeline, select Blank Keyframe 3
54. Using the Brush Tool, draw different arms for the stick figure in Blank Keyframe 3
55. In the 'arms' layer timeline, select Blank Keyframe 4
56. Using the Brush Tool, draw different arms for the stick figure in Blank Keyframe 4
57. In the 'arms' layer timeline, select Blank Keyframe 5
58. Using the Brush Tool, draw different arms for the stick figure in Blank Keyframe 5
59. Save your file
60. Use the Timeline scrubber to preview the animation
61. From the Menu Bar, go to Control > Test Movie
    • Note - be sure to close your published .swf before going back to editing your .fla
62. In the Toolbar, select the Selection Tool
63. If needed, select and reposition your arms
64. Lock the 'arms' layer
65. Drag the 'arms' layer below the 'body' layer
66. Save your file
67. Test your movie
68. Select the 'body' layer and then create a new layer
    • Remember: new layers are added above the layer currently selected
69. Re-name the layer 'caption'
70. In the Toolbar, select the Text Tool
    • Be sure the tool is set to produce Static Type
71. Click and type out a caption to appear below your animation - type to taste
72. Once you are done typing, select the Selection Tool from the Toolbar
73. With the Selection Tool, select the text block
74. In the Properties Panel, stylize your text to taste (font, color, size etc.)
75. With the Selection Tool, position your text under the animation
76. With the text block selected, go to the Filters section of the the Properties Panel
77. At the bottom of the Filters section, click the "Add filter' icon and choose Drop Shadow
78. Style the Drop Shadow Filter to taste
79. Lock the 'caption' layer
80. Experiment by changing your Frame Rate (FPS)
81. Save your file
82. Test your movie
    • DEMO: Flash File types
    • DEMO: Flash Publish Settings
    • DEMO: Adjusting the Publish compression settings for the background image
    • DEMO: Preventing the extra background layers for being included in the Publish (i.e. reduce file size)

The Use of Speed (fps) in Frame by Frame Animations

In the above exercise we set the speed of the animation to 12 fps. There will be times when you will change this value to a number that better serves your Frame by Frame animation efforts. Consider the following examples:

1 fps	12 fps		1 fps	12 fps

3. Flash File Types

Fact: When you create a single Flash graphic or animation you'll end up with multiple files. For a beginner it is very important to know the significance of these different files.

4. Bitmap Graphics vs. Vector Graphics

Good news!! There are only two types of visual graphics that you will use in Flash animations: those made up of pixels (bitmap) and those made up of points (vector). It is important to realize that these are two completely different forms of visual graphics (i.e. an apple and an orange). As you build a Flash file you might:

• use Flash's Drawing Tools to create vector graphics (circles, squares etc.) or...
• import vector and/or bitmap graphics from outside of Flash or...
• both of the above

5. Web Browsers and Web Graphics

All Bitmap graphics are made up of rows and columns of pixels. While there are oodles of different bitmap formats, only four are considered to be (more or less) Web browser compatible. And then there is Flash!!

.swf Scaling

If your .swf file contains only vector graphics, it will scale (up and down) beautifully - unlike web bitmap graphics (.jpg, .gif, animated .gif and .png) which tend to become pixelated (or just yucky) when scaled. Sadly...if your .swf file contains bitmap graphics they too will become pixelated when scaled (there is no magic way around this yet).

.gif at 100%	.swf at 100%
.gif scaled to 200%	.swf scaled to 200%

6. Tweening in Flash

When building animations in Flash you have two directions you can go: create each individual frame (frame-by-frame) or ask Flash for help (tweening). You can also have an animation that has both frame by frame and tweening.

"Tween" is actually short for "in-between", and refers to auto-rendering of graphics, by Flash, of the frames between two author defined keyframes.

Flash's has three forms of tweening - motion (new), Classic (used to be called Motion) and Shape. For all types of tweening, you ask Flash to help you with the frames in between.

Exercise 2 - Motion Tween Animation

As mentioned above, Tweens require that the animator defines the beginning and end keyframes before asking Flash to help out with the in betweens.

Motions tweening requires that the same base graphic (bitmap or vector) be used at both ends of the tween (i.e. you can't Motion Tween a circle into a square - that's a Shape Tween - Exercise 3).

Because the same base graphic is used at both ends of the tween, we convert that graphic into a symbol. Symbol use decreases file size, allows for much faster editing and is a prerequisite for Motion Tweens.

Remember...Before you Motion Tween...make a Movie Clip Symbol.

The vector graphics to be used in this exercise will come from an Adobe Illustrator file (.ai). Prior to import we will explore some important features of the Illustrator file including: Illustrator layers, document transparency, document size (pixel count) and Image format.

The fish used in the exercise came from Wikimedia Commons.

Step by Step »

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
2. In the Properties Panel, set the Frame Rate (FPS) to 24
   • 24 is a good frame rate for tweening
3. Save your file as ex-2.fla
4. To bring in the material to be use in the animation, from the Menu Bar go to File > Import > Import to Stage
5. Choose fish.ai as the file you want to Import
6. In the .AI Import dialogue box dialogue box set the following:
   • Be sure to set Convert Layers to: Flash Layers
   • check 'Place objects at original position'
   • check 'Set stage size to same size...'
7. Once imported, lock three 'bar' layers
8. In the Tool Bar, select the Selection Tool
9. Select the fish and drag it off stage left
10. With the fish selected, right-click and choose 'Convert to Symbol...'
11. In the Convert to Symbol dialogue box:
    • for Name: mc-fish
    • for Type: Movie Clip
    • Movie Clip symbols are needed for Motion Tweening
12. In the top-right corner of the Timeline, find the tiny, drop-down menu
13. From the drop-down menu, set the frame size to Normal
14. Select frame 100 of the top layer - hold down the [SHIFT] key - and select frame 100 of the lowest layer
15. Right-click over the selected layers and choose 'Insert Frame'
    • You have just created Frame Spans
16. Right-click on the fish and choose 'Create Motion Tween'
17. Save your file
18. Test your movie
19. Move the Timeline Scrubber to frame 100
20. Select, then drag the fish off stage right
21. Save your file
22. Test your movie
23. Move the 'bar-2' layer above the 'fish' layer
24. Save your file
25. Test your movie
26. Return the 'bar-2' layer to it's original order
27. With the Selection Tool, modify the Motion Tween Spline Line
28. Save your file
29. Test your movie
30. Move the Timeline Scrubber to frame 40
31. Select, then drag the fish to a new position
32. Save your file
33. Test your movie
34. Move the Timeline Scrubber to frame 60
35. Select, then drag the fish to a new position
36. In the Tool Bar, select the Convert Anchor Point Tool (under the Pen Tool)
37. Practice converting curved points to corner points and vice-versa
38. Practice adjusting the curved point handles
39. Save your file
40. Test your movie
41. Click anywhere in the Motion Tween
42. In the Properties Panel, add an Easing value to your Motion tween
43. Save your file
44. Test your movie
45. In the Properties Panel, add an Rotation value to your Motion tween
46. Save your file
47. Test your movie

Exercise 3 - Shape Tweening

In this exercise we will create a Shape Tween animation. Shape tweens are used when you want to morph one shape into a completely different shape.

The truth about Shape Tweening - While shape tweens sound good on paper they often produce undesirable results. If you want to improve the results of your shape tween you might consider adding more keyframes (i.e. more places where you can control the morphing) or learn about Shape Hints.

The background image used in this exercise was acquired from flicker Creative Commons, specifically, and with much thanks to brainchildvn

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
2. In the Properties Panel, set the Frame Rate (FPS) to 24
   • 24 is a good frame rate for tweening
3. Save your file as ex-3.fla
4. In the Toolbar, select the Selection Tool
5. In the top-right corner of the Timeline, find the tiny, drop-down menu
6. From the drop-down menu, set the frame size to Normal
7. To bring in the background image, from the Menu Bar, go to File > Import > Import to Stage
8. Choose girl-with-hands.psd as the file you want to Import
9. In the .PSD Import dialogue box set the following:
   • Convert Layers to: Flash Layers
   • check 'Place objects at original position'
   • check 'Set stage size to same size...'
   • check 'Bitmap image with editable layer styles' - this creates a Movie Clip of the image layer allowing for Filters to be added
   • Be sure the layer is set to Lossy
10. In the Properties Panel, locate the Stage: Background color chip box
    • You will not see the Background color chip if something is selected
    • To de-select all, simply click off the Stage (where there is nothing)
11. Change the stage color to one that compliments your background image by:
    • choosing a color from the color picker dialogue box or...
    • sampling a color from the image
12. With the Selection Tool, select the image
13. With the image selected, go to the Filters section of the the Properties Panel
14. At the bottom of the Filters section, click the "Add filter' icon and choose Glow
15. Style the Glow Filter to taste
16. In the 'girl' layer timeline, select frame 80, right-click over the selected frame and choose 'Insert Frame'
    • You have just created a Frame Span
17. Lock the 'girl' layer
18. Save your file
19. Re-name 'Layer 1' to 'blob-left'
20. Move the 'blob-left' layer to the top of the layer stack
21. In the Toolbar, select the Oval Tool
22. Turn the stroke color off and the fill color to red
23. Using the Oval Tool, drag out an oval over the girl's right hand (image left)
24. In the Toolbar, select the Selection Tool
25. Select the red oval, right-click and choose 'Break Apart'
26. Deselect the oval by clicking off to the side of the stage
27. To give the shape a flat bottom, drag a selection over the bottom of the oval, then simply delete
28. In the 'blob-left' layer timeline, select frame 80, right-click over the selected frame and choose 'Insert Keyframe'
    • Note - Flash has auto-copied the contents of Keyframe 1 into Keyframe 80
29. Right-click anywhere between keyframes 1 and 80 and choose 'Create Shape Tween'
30. Save your file
31. Test your movie
32. In the 'blob-left' layer timeline, select frame 40, right-click over the selected frame and choose 'Insert Keyframe'
    • Note - Flash has auto-copied the contents of Keyframe 1 into Keyframe 40
33. In the Toolbar, select the Selection Tool
34. Click off the stage to deselect all objects
35. With the Selection Tool, modify the shape of the oval in Keyframe 40 by dragging on the outer edge of the shape
    • Notice that the Selection Tool cursor icon changes when you are on top of the edge of a shape
36. Lock the 'blob-left' layer
37. Save your file
38. Test your movie
39. With the Selection Tool, in the 'blob-left' layer timeline, select Keyframe 40
40. Click and drag Keyframe 40 left or right to change your animation
41. Save your file
42. Test your movie
43. With the Selection Tool, in the 'blob-left' layer timeline, select Keyframe 1
44. In the Properties Panel, set the easing value to 100
45. With the Selection Tool, in the 'blob-left' layer timeline, select your second keyframe
46. In the Properties Panel, set the easing value to -100
47. Save your file
48. Test your movie
49. Unlock the 'blob-left' layer
50. Select the 'blob' in the second keyframe
51. In the Properties Panel - change the blob's fill color
52. Save your file
53. Test your movie

5. Adding your .swf to a Web Page in Dreamweaver

By far the easiest way to add your finished Flash animation (.swf) to a webpage is to use Adobe Dreamweaver. Flash and Dreamweaver are both Adobe products and are engineered to work together.

1. In Dreamweaver, you should first define a site, move your Flash animations into the site and create a webpage to hold your .swf.
2. Set the cursor on your webpage where you want your .swf animation to appear. You might set your cursor within a table cell, a <div>, or anywhere between the <body> tags.
3. From the Menu Bar (top) and choose Insert > Media > SWF
4. Dreamweaver will prompt you to attach a JavaScript file to your .html page. This file will help ensure that your .swf plays back correctly. Be sure to agree to adding this JavaScript file. Be sure to upload this file when you upload your .html page.
   • DEMO: Change the background color of a .swf (if visible)
   • DEMO: Set the background color of a .swf to transparent (wmode - transparent)
   • DEMO: The difference between .swf code and image code

Exercise 4 - Frame by Frame: Part 2

Step by Step »

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
2. In the Properties Panel, set the Frame Rate (FPS) to 1
3. Save your file as ex-4.fla
4. To bring in the background image, from the Menu Bar, go to File > Import > Import to Stage
5. Choose billboard-eyes.psd as the file you want to Import
6. In the .PSD Import dialogue box set the following:
   • Convert Layers to: Flash Keyframes
   • check 'Place objects at original position'
   • check 'Set stage size to same size...'
   • Be sure each layer is set to Lossy
7. Save your file
8. Test your movie
9. In the top-right corner of the Timeline, find the tiny, drop-down menu
10. From the drop-down menu, set the frame size to Large
11. In the 'billboard-eyes.psd' layer, select Keyframe 2 - hold down the [SHIFT] key - then select Keyframe 5
12. Right-click over the selected frames and choose 'Cut Frames'
13. Select the Blank Keyframe in the other available layer (should be 'layer-1')
14. Right-click over the selected frame and choose 'Paste Frames'
15. Rename the layer containing the billboard image to 'billboard'
16. Rename the layer containing the eye set images to 'eyes'
17. Bring the 'eyes' layer to the top of the layer stack
18. Lock the 'eyes' layer
19. Clean up the 'billboard' layer by:
    • Removing the extra blank keyframe (right-click over the frame and choose 'Clear Keyframe')
    • Remove the extra frame (right-click over the frame and choose 'Remove Frame')
    • you should now have a frame span the 'spans' the same number of frames as the 'eyes' layer above it
20. Save your file
21. Test your movie
22. Adjust your frame rate to taste
23. Save your file
24. Test your movie
25. Add one extra frame after the 'eyes open' and 'eyes closed' images by:
    • Select the frame with the 'eyes open' image - right-click and choose "Insert Frame'
    • Select the frame with the 'eyes closed' image - right-click and choose "Insert Frame'
    • you will need to adjust your 'billboard' frame span to match the lengthened 'eyes' layer
26. Save your file
27. Test your movie
28. Add a new layer called 'text'
29. Add text to the left side of the billboard - style to taste
30. Save your file
31. Test your movie

Exercise 5 - Classic Tween with Motion Guide

Step by Step »

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
2. In the Properties Panel, set the Frame Rate (FPS) to 24
   • 24 is a good frame rate for Classic tweening
3. Save your file as ex-5.fla
4. Select and import 2 files - kaimuki.psd and car.ai
5. In the .PSD Import dialogue box set the following:
   • Convert Layers to: Flash Keyframes
   • check 'Place objects at original position'
   • check 'Set stage size to same size...'
   • Be sure each layer is set to Lossy
6. In the .AI Import dialogue box set the following:
   • Convert Layers to: Flash Keyframes
   • check 'Place objects at original position'
   • DO NOT resize the stage
   • With the 'car' layer selected, check 'Create Move Clip'
7. Choose the Selection Tool from the Toolbar
8. Lock the 'kaimuki-streets' layer
9. Move the 'car' above 'kaimuki streets'
10. In the top-right corner of the Timeline, find the tiny, drop-down menu
11. From the drop-down menu, set the frame size to Normal
12. In the 'kaimuki streets' layer, select frame 120, right-click and choose 'Insert frame'
    • You have just created a Frame Span
13. In the 'car' layer, keyframe 1, select the car and move it outside upper stage right
    • Note in the the Properties Panel that the car was made into a Movie Clip during import
14. In the 'car' layer, select frame 120, right-click and choose 'Insert Keyframe'
    • Note - Flash has auto-copied the car from Keyframe 1 into Keyframe 120
15. In the 'car' layer, keyframe 120, select the car and move it outside lower stage right
16. Select Keyframe 1 of the 'car' layer, right-click and choose 'Create Classic Tween'
17. Save your file
18. Test your movie
19. Right-click on the 'car' layer name and choose 'Add Classic Motion Guide'
    • Note that Flash has given you a new layer to place you guide in (Guide: car)
20. In the Tool Bar select the Pen Tool
21. In the Tool Bar set to stroke color to red
22. In the Properties Panel set the stroke width to 2
23. Select Keyframe 1 of the guide layer
24. With the Pen Tool, click out a motion guide (path) through the streets of Kaimuki - begin and ending off stage
25. Lock the 'Guide: car' layer
26. Save your file
27. In the 'car' layer, keyframe 1, select the car, drag and snap it to the start of your motion guide
28. In the 'car' layer, keyframe 120, select the car, drag and snap it to the start of your motion guide
29. In the Tool Bar, select the Free Transform Tool
30. Rotate both cars (Keyframes 1 and 120) so they are oriented to the motion guide
31. In the 'car' layer, select keyframe 1
32. In the Properties Panel, check the "Orient to path' box
33. Save your file
34. Test your movie
35. Add additional Keyframes at street intersections
36. Adjust the easing values at those keyframes to give the car more realistic speed changes
37. Save your file
38. Test your movie

Exercise 6 - Motion Tween with Masking

The background image used in this exercise was acquired from flicker Creative Commons, specifically, and with much thanks to Eddi 07

Step by Step »

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
2. In the Properties Panel, set the Frame Rate (FPS) to 24
   • 24 is a good frame rate for Motion tweening
3. Save your file as ex-6.fla
4. To bring in the background image, from the Menu Bar, go to File > Import > Import to Stage
5. Choose texture.psd as the file you want to Import
6. In the .PSD Import dialogue box set the following:
   • Convert Layers to: Flash Keyframes
   • check 'Place objects at original position'
   • check 'Set stage size to same size...'
   • Be sure each layer is set to Lossy
7. In the 'texture' layer, select frame 100, right click and choose 'Insert Frame'
8. Lock the 'texture' layer
9. Re-name 'Layer-1' to 'mask'
10. Move the 'mask' layer to the top of the layer stack
11. In the Tool Bar, select the Oval Primitive Tool
12. Drag out a Oval Primitive off to stage left
13. Select the Oval Primitive and set both it's width and height to 400
14. Align to Oval Primitive to stage bottom with the Align Panel
15. Be sure the Oval Primitive is off stage left
16. Select the Oval Primitive, in the Properties Panel, adjust the Oval Primitive settings to visual taste
17. Select the Oval Primitive, right-click and choose 'Convert to Symbol'
18. In the Convert to Symbol dialogue box:
    • for Name: mc-oval
    • for Type: Movie Clip
    • Movie Clip symbols are needed for Motion Tweening
19. Right-click the Movie Clip and choose 'Create Motion Tween'
    • Note that Flash has extended your motion tween to match the 'texture' layer length
20. Slide the Timeline scrubber to the last frame of the Motion Tween
21. [SHIFT] drag the Movie Clip off stage right
22. Save your file
23. Test your movie
24. Select Keyframe 1 of the 'mask' layer
25. In the Properties Panel, add a rotation to the Motion Tween
26. Save your file
27. Test your movie
28. Right-click on the 'mask' layer name and choose 'Mask'
29. Save your file
30. Test your movie

 

Back to top