In this exercise we'll review symbols, basic drawing and segregating shapes by color, symbols, layers, labels, actions, motion tweening, shape tweening, motion guides, buttons, actions, labels and learn to work with movie clips.
The movie clip symbol can be one static image in one keyframe or a series of images with animation. For that matter, all symbols can be either static or animated. The essence of a symbol is that it is a movie on its own timeline that runs independently of the main timeline. Here's an illustration about independent timelines.
A car is comprised of many independent parts moving at their own speed, rotation, etc. Here are a few basic scenarios illustrating different things happening to a car:
wheels rotating
engine running
steering wheel turning
horn honking
moving car
x
x
x
?
parked car
o
o
o
?
car stopped with motor running
o
x
o
?
This matrix shows different combinations of independent activities (movie clips). The car could be moving (down a San Franciscan hill) without the engine running, with wheels rotating, without the steering wheel, and with the horn honking intermittently. Or, the car could be driven down a San Franciscan hill with the engine running, wheels rotating, steering engaged, and horn off. There are many possibilities of combinations in this matrix.
Let's build a basic car and see how the independent movie clips work together in one movie.
1. Create a new Flash file and name it car.fla. Make the background color #0066CC blue.
2. Create 4 layers and name them from top to bottom: actions, labels, car, hills. Save your work.
3. Draw a road and some hills in the hills layer frame 1. Lock the layer. Save the movie.
We're now going to create 3 movie clip symbols, one for the wheels of the car, one for the steering wheel, and one for the exhaust. Each of these will be individual animations on their own timelines.
4. Insert a new symbol.
5. Name the new symbol "wheels" and assign it the default movie clip behavior.
6. Save the movie.
7. Insert 2 more new symbols, each a movie clip behavior, and name them: "steering wheel" and "exhaust." Save your movie. Open your library. You have 3 movie clip symbols in the bottom pane. Double click on the wheels movie clip to open it in its own timeline in symbol editing mode. It will also display it in the preview pane of the library; however, there's no image because we haven't created anything. We have an empty movie clip at this stage of development.
In symbol editing mode, the stage has no defined size the way it does on the main timeline. The center of the stage is defined by a crosshair.
More Practice
Create a simple side view of a car wheel. I'll make mine a bit uneven so it looks like it wobbles when it's rotating. That way, you can tell it's moving. You can make a perfect circle and use a gradient to highlight an area (known as a specular). This will provide a more precise and realistic look. I am not looking for great artwork. I am looking for you to understand concepts and techniques. You can make a caricature of a tire in a cartoon style or you can draw a precise tire. Keep it simple for now because you can always use Flash's 'swap symbols' feature later to substitute new graphics that retain the code of your placeholder. Use as many layers and frames in the timeline for symbol editing mode as you need.
Align your wheel to the center of the symbol editing stage using the Align Panel by selecting the wheel and clicking the center to stage and align horizontal center and align vertical center buttons. Group your wheel by going to the Modify Menu - Modify>Group or Control + G. Remember in order to motion tween you have to have your object be a symbol or a group. Select frame 20 and Insert Keyframe (F6). Select a frame from frame 1 and 19 and motion tween your wheel and give it a clockwise rotation between 3 and 10 times. Save your work.
Double click on the steering wheel movie clip symbol to open it in symbol editing mode. Draw a simple steering wheel from a circle with no fill and stroke of about 6. Use the scale tool to distort and skew a little. Select the steering wheel and align to center of the stage. Now we will use a simple frame by frame animation to illustrate the unsteady movement of the steering wheel.
Frame by frame animation can be tedious. It's not used that often. Frame by frame changes the artwork on each frame. It requires a keyframe for every frame and increases file size. The results may be unpredictable and jerky but it's useful for some applications. Insert a keyframe in frame 2. Rotate the steering wheel just a little. Insert a keyframe in frame 3. Rotate the steering wheel in the other direction. Repeat on each frame including frame 10. Save your movie.
If your steering wheel is too jerky, you can use a regular motion tween instead of frame by frame. I didn't distort the shape of my steering wheel on the motion tween example below.
Create a tailpipe on one layer and exhaust smoke on another layer. Create a shape tween in the smoke layer. Notice how I have nothing in frames 1 through 10 of the smoke layer. The shape tween starts at frame 10 and goes through frame 20. The tailpipe appears in frame 1 and remains for the duration of the movie. By default, Flash .swf files loops. When the playback head gets to frame 20, it will replay the movie.
After creating these 3 movie clip symbols: wheels, steering wheel and exhaust, return to Scene 1.
You can draw some hills in frame 1 of the background or hills layer. I added a sun. Save your work.
In frame 1 of the car layer, draw a representation of a red car body. A rectangle or dome will suffice. Save your work.
Knock out a windshield by creating a hole in the front part of your car. Remember that Flash cuts out shapes of the same color when they are applied on the same layer. In order to create the hole in the car, create a filled red blob in the shape of a car. Deselect the car. Select the rectangle tool with a hairline stroke of black. Create a red filled rectangle with black stroke the size of a windshield in the canvas area of your movie and drag it into position on top of the car. In order to knock out a hole, you have to deselect the shape, then reselect it and press delete.
After you have your hole you can use the arrow tool to modify the shapes of the outlines to create a more realistic window or windshield. Select the car and convert the car to a movie clip symbol named "car" by going to the Insert Menu - Insert>Convert to Symbol.
Open the symbol editing mode for the car movie clip and name layer 1 "car". Add layers for wheels, steering wheel, and exhaust. Save your work.
Drag 2 instances of the wheel onto the stage at frame 1 of the wheels layer.
Drag one instance of the steering wheel to the stage at frame 1 of the steering wheel layer.
Drag one instance of the exhaust to the stage at frame 1 of the exhaust layer.
Save your movie.
We will assign instance names to these symbols on the stage. The only way we can script any action to the symbols on the stage is by assigning unique instance names for each instance. Remember, an instance is a symbol that is on the stage. We reference the instance by a unique instance name. The symbol may be named car in the library. If we drag 4 instances of the car onto the stage we can name these instances: car1, car2, car3, car4 or redcar, bluecar, yellowcar, greencar, etc...
Return to Scene 1 on the main timeline (i.e. the _root). Lock the hills layer. The car symbol should still be in frame 1 of the car layer. Create a motion guide above the car layer with the pencil tool set to smooth, like we did in our first motion guide exercise earlier in the course. Draw a copy of the outline of the hills in frame 1 of the motion guide layer for the car. Save your work.
Turn on the "snap to" magnet. Extend all the layers to frame 30 by inserting frames (F5) on all layers. You can select all the layers at once and then insert frames.
Create a keyframe at frame 30 of the car layer. Snap the car symbol to the bottom of the hill guide in frame 30. Select frame 1 of the car layer and snap the car symbol to the beginning of the hill guide. Create a motion tween for the car between frames 1 and 29. In the motion tween Frame Panel, select Orient to Path.
"snap to" positions the circle symbol at the start of the motion guide path
"snap to" positions the same circle symbol with size, effect, and position tweens at the end of the motion guide path
The Orient to Path SelectionOption will keep the car angled more realistically as it goes into dips and back up hills. Realistic movement is also affected by the registration point of the symbol. For most of the lessons you've centered the registration point on your symbol but you can open the car in symbol editing mode and change the registration point by selecting the entire car and aligning it to top/left or any other positions in the Align Panel. Experiment and see the difference when you edit the symbol's registration point.
Back in Scene 1, press the enter or return key in Flash to view your movie in the Flash authoring environment NOT in the test movie mode.
The car is moving from the top to the bottom of the hill but none of the animations we created in the other movie clips are working. The wheels aren't rotating and there's no exhaust smoke from the back of the car. What's going on here?
The Flash work space does not show movie clip animations in the Flash work area. In order to see the animations you have to test the movie with Control>Test Movie or the Control + Enter keys. Try that now and you'll see that the wheels, steering wheel and exhaust are all animated. You may not be able to see the wheels moving while moving down the hill so I dragged on another instance of the car and left it in one place so you can see the movement of the nested movie clips.
What happens if we want to stop the car midway down the hill?
Let's get those frame labels from Lesson 7 into action by targeting the instances that are nested within the car symbol. We will use buttons on the main timeline to start and stop these nested instances in the car timeline. This will enable us to stop the car midway down the hill or anywhere on the hill, as well as shut the motor, stop the steering, and start everything up again.
Please continue to the next section of this lesson.
