|
Up » 3.1 The Flash Timeline » 3.2 Basic Motion Tween » 3.3 Scenes
Lesson 3.2 Basic Motion Tween
We have learned that you can create objects in Flash or import graphics from other programs and animate them by changing one or more of their properties (attributes) in keyframes along the timeline. There are several ways to animate. You can do a frame-by-frame animation in which you create a change in a graphic in every keyframe. This can increase your file size and is not always the most efficient way to work.
Flash incorporates tweening to automatically draw the frames between your first and ending keyframes. If you want to change the position, size, or color effect of an object, you'll use motion tweening. If you want to 'morph' one object into another, you'll use shape tweening. There are important differences. Be sure you know them by the midpoint of our course.
Motion Tween
1. Create a new file by going to File>New, or Control + N, or by clicking on the icon for new file.
2. Open the movie properties box by clicking on Modify>Movie... or double-clicking on the 12 fps box at the bottom of the timeline. Always make your movie dimensions as small as possible for your current project. Let's leave the default values for this movie.
3. Arrange your palettes and panels on your work area. I dock my timeline and tools to my work area if they are not already docked. You may prefer to keep the timeline and tools as floating palettes. I find it easier if they are docked. Find the interface style that suits your needs. The default layout for the panels positions them on the right side of the screen. You can change the layouts by creating your own layout and saving by selecting one from Flash's preset layouts under the Window Menu - Window>Panel Sets>Default, Designer, Developer, etc.
When you find a layout that suits you, save it as a defined layout by going to the Window Menu - Window>Save Panel Layout... and entering a name. If you are sharing Flash with other people, you can name your preferred layout with your name and select this layout whenever you use the program. If you're working on multiple projects and prefer different layouts for different projects, save multiple layouts.
In the lesson 2 movie, I showed you some panels but didn't describe them. I'll describe them as we use them.
All the panels are available through the Window Menu. The ones we'll use most in this course are: Tools, Timeline, Properties, Align, Color Mixer, Color Swatches, Info, Scene, Transform, Movie Explorer, Actions, and Library. To toggle all panels to hide and show, press the tab key. Learning keyboard shortcuts will help you economize on time and make you more valuable in the professional arena.
In order to create a motion-tweened animation, we'll need to take a look in our library. Control + L (command + L) will open the library. You can also access it from the Window Menu - Window>Library. There will not be anything in your library.
Back to Top
What's a library?
 The library is where you will store all your symbols.
Symbols are reusable graphics, animations, and buttons. When you take a symbol from the library and drag it to the stage, you can resize it, apply an effect, rotate it and it may appear different than the original library symbol.
You can drag that same symbol out of the library to bring a second object onto the stage. You can color this one a different effect, distort it, and make it twice its size and it will look different from the original library symbol and the first symbol you dragged out. |
The beauty of symbols is that Flash is only referencing the one symbol in the library. All the instances of the symbol that you dragged onto the stage are called just that: instances.
The cursor in the illustration to the left indicates the Library Options Menu.
An instance is a symbol that's been put on the stage. An instance inherits all the properties of the master symbol but you can change individual attributes like color, size, rotation, location - essentially all the things that we defined as creating animation! Remember a keyframe is where we change attributes: color, size, location, shape, etc. The symbol in the library retains its original attributes but the instances of the symbol on the stage can have different parameters. By the same token, if you edit a symbol in the library to change the symbol's attributes, all the instances of that symbol on the stage will reflect the change. |
What's This Got to do with Motion Tweening?
Your objects need to be either symbols (or grouped) in order to be motion tweened. Symbols and groups are not the same. In order to make my kitty move smoothly up the stage, I had to convert it to a symbol. When you convert an object to a symbol, the symbol automatically gets added to the library. To convert an object to a symbol, select the object and hit F8.
We can create motion tweening with a grouped object too. Let's go directly into using symbols because of the added attributes you can apply to make changes with symbols. Also in advanced Flash, you'll use a special kind of symbol called a movie clip in order to provide interactivity for your user. So let's get our feet dirty by jumping right into the library of symbols.
4. In your Flash program, you have an empty stage; your Properties panel and Library are open, and the Timeline and Tools are on the screen. Select the Oval tool and draw a circle with a red fill and black stroke. A stroke is an outline of a shape.
Save your movie and name it motion-tween.fla.
5. Position this circle off the stage's left side such that it's just beginning to show on the stage. (Position it in the left center of the stage). Select the object and use the arrow keys on the keyboard to move it down 5 pixels. That's 5 presses on the down arrow key. What happened?
Did you remember to select both the fill and stroke by double-clicking the object? I often forget to double-click and wind up leaving my stroke behind. You can also use the arrow key to drag a selection around the entire object to select BOTH the fill and the stroke. If you made a mistake use the Control+Z keyboard command or go to the Edit Menu - Edit>Undo. Now select the entire circle fill and stroke again. The following graphic shows how Flash selects objects.
The one on the left has only the fill selected.
The middle has only the stroke selected.
The one on the right is the entire object selected.
This is what we want for our current movie. Does yours look like this? If not, reselect. You can also use the Edit Menu - Edit>Select All command to select everything on the stage.
shape selected |
stroke selected |
shape and stroke selected |
|
|
|
6. To convert this selected object into a symbol go to the Insert menu - Insert>Convert to Symbol. Or, just press the F8 key. When you see three ... periods following a command, it lets you know that there will be more dialog boxes from which you will need to make some choices or enter some data. Convert to Symbol... brings up the Convert To Symbol Window. This is where you will name your symbol and define its behavior.
By default Flash names your symbol 'symbol 1' and defines it as a movie clip.
Let's name the symbol "red circle" and define it as a graphic. It's ok to use spaces in symbol names, but it's preferable to use underscores between words (i.e. red_circle). You may also use filenames that run words together, using a capital for the first letter of each word (i.e. RedCircle).
You can also create an empty new symbol, name it, and then create the content of the symbol in symbol editing mode. By default, Flash will name your symbols Symbol 1, Symbol 2, etc. and use the Movie Clip Behavior.
Your object is still selected on the stage but now the selection looks different.
A thin light blue rectangular line and the little plus '+' sign in the middle of the object indicate to me that the object is a symbol. When you look in your library, the image of the symbol is displayed in the top part and the name is displayed in the list with an icon for a graphic symbol.
7. Add a keyframe to frame 20 by selecting the keyframe and pressing F6 (or going to the Insert Menu - Insert>Keyframe, or right clicking on the frame and selecting Keyframe from the context-sensitive menu.
8. In frame 20, drag the circle off the right side of the stage into the canvas or work gray area. You've just changed the location or position of an object on the stage over time. You've used 20 frames. So, it should take about 2 seconds to change position. Press the enter key on your keyboard to play the movie. You can also scrub the playback head from frame 1 to frame 20. Scrubbing the playback head means to click-hold-and-drag the playback head through the timeline. We have an animation but no motion tween.
9. Select one of the frames from frame1 to frame 19. Do not select frame 20. Go to the Properties Panel and click on the Tween: drop-down menu. You must have your instance selected. Use the Tweening: drop-down menu and select Motion. The frame panel will change to show you motion tweening options. Make sure the Scale box is checked and don't worry about any of the other options right now. Note: You are now in the PI for the Frame.
Your timeline now has a solid arrow from the keyframe in frame 1 to the keyframe in frame 20. When you deselect the frames you will see that Flash has colored your frames light blue. If you got a dashed arrow instead of a solid arrow, delete everything on the layer and start again following the instructions carefully.
10. Now that you've created your first motion tween, let's change some of the parameters of the circle symbol in frame 20. Select the object in frame 20 of layer1. Go to the Color: drop-down menu on the Properties Panel. Select Tint. Note: You are now in the PI for the Graphic Object and not the Frame.
In the RGB: fields, enter: 51 ,204, 204.
Leave the opacity slider at 100% for now.
Your symbol in frame 20 should turn a sea blue color as displayed in the color chip to the right of the Color: drop-down menu. You can also select a color directly from this color chip.
 11. With the symbol selected in frame 20, go to the Tools and select the Free Transform tool. You can also access the scale tool from the Transform panel. Make the symbol about 1/2 the original size.
12. Now that you know how to do a motion tween go back into the Color: drop-down menu and change the effects to Alpha and experiment with different percentages. Change back to Tint color and select different RGB values and change the percent. After you've explored a bit with the effect and size of the symbol go back to your timeline and insert a keyframe at frame 10. Just select frame 10 of layer 1 and press F6. With the symbol selected on frame 10, move it to the bottom center of the stage.
13. Go back to the Document Properties and change the movie background color to dark blue. Save your work.
Press Enter or Return on your keyboard to play your movie in the Flash authoring environment.
Press Control + Enter or Command + Return to save a copy of this .fla file as a .swf. Flash will automatically place the .swf file in the same folder as the .fla file. Always keep at least one copy of your original .fla file.
Back to Top
Key Points
- The library is where you store your symbols.
- Symbols are reusable elements such as graphics, animations, and sound.
- The presence of a symbol on the stage is called an instance.
- You can change the instance parameters without altering the basic properties of the symbol.
- Objects must be grouped or be symbols to be motion tweened (we'll deal with text later).
- You can convert objects to symbols or create an empty new symbol first and then draw the objects.
- Symbol definition behavior will be determined by the last behavior you used. If you created a movie clip symbol as the last symbol, the next time you create a new symbol, movie clip will be the selected behavior option. Make sure you select the behavior that you desire each time you create a new symbol or convert an object to a symbol.
Please save this motion-tween as jdoe03.fla using your name instead of jdoe. You will be adding another scene to this movie and submitting one movie .swf file with 2 scenes for your homework.
Please continue to the next section of this lesson.
Up » 3.1 The Flash Timeline » 3.2 Basic Motion Tween » 3.3 Scenes
|
