Above is a screenshot of the Flash work space. The white area in the middle is where the project is actually created and is called the stage.
3
The Tool's Panel
The Tool Panel contains the tools used to draw, modify, select, paint, fill, resize, erase and generally modify your images.
It is important to know what the different tools do. Most of it is reasonably easy and is much like using many other paint or draw programs.
When you choose an icon from the top section the bottom part section of the panel will allow you to make choices as to how you use the tool i.e the size or shape of the paintbrush, the colour etc...
keyframes are frames where changes and transformations take place. As such, any time you want to change the shape of an object, move an object or alter the appearance of the movie you will require a keyframe. We need a keyframe at the start of the animation and one at the end. Make sure the image you want to animate is the active layer. Then right click on the timeline and add a keyframe at the start of an animation and at least one is required at the end.
In a path-based animation an object is chosen to animate. Frames are still used as in cel-based animation but now the frames are placed along a timeline. In path based animation the motion path is actually drawn in for the object to follow. Path based animation appears in many programs including PowerPoint. The most popular path based animation program is probably Flash.
Making a Path based Animation in PowerPoint
First we have the background image over which we are going to place the image to move along a set path.
On this street scene we are going to have a car drive through the lights.
This is the car.
We are now going to place this car on the background.
Now you can see the car with the animation path drawn.
Now below you can see the finished animation as a flash file
Instructions on Animating The Car in Flash
1. Save the picture of the street scene and the car by right clicking and "save picture as" and save to a new folder in your directory called "Street Scene". The new folder is just a neat way of saving files.
2. Open Flash and click on new document.
3. Resize the document to 640 by 480 pixels.
4. Now we need to import both of these images into flash and place them in the library ready to use.
5. Now click and drag the street scene onto the stage.
6. Now save your work as "StreetScene.fla". This is to safeguard your work. Remember you should always be saving your work regularly.
7. Each image should be on its own layer. To create a new layer click on the page icon with a "+" on it.
8. To make the layer "active" (i.e. to make it the layer we are working on) just click on the layer so that it is highlighted.
9. To make it easier to use layers they should be named so rename Layer 1, the layer with the Street Scene "Street" and call layer 2 car. This is done by clicking on the name and typing in the new name.
10. Now we are going to click and drag the car onto the stage.
11. Convert the car to a symbol. Two reasons to do this: to have a smaller file size and so that we can animate the car. We can only animate symbols. As such we must animate the car. Right click and then choose "Convert to symbol".
12. Now we are going to add keyframes. Keyframes are where changes in animation or images take place. We need a keyframe at the start of the animation and one at the end. Make sure the image you want to animate, in our case the car, is the active layer. Then right click on the timeline and add a keyframe at the start.
13. Now add a keyframe where you would like the animation to end. The more frames the longer the animation.
14. Once the two keyframes are set up you should see a line (arrow) joining the two keyframes. We can now set up the motion tween (animation)
15. If for some reason the arrow does not appear you can right click on the layer's timeline and "create motion tween".
16. We can now animate the car. Click on the end keyframe (2nd keyframe) you just made.
17. Now after having clicked on the final keyframe go back to the stage and click on the car
You can now play your movie to see what it looks like. To do this Click on <Control> in the top menu and then <Test Movie>. This is a more accurate playback then just clicking play. I am not sure why I just know that this is the case.
(LEFT) This shows a screen dump of the control menu and where to click to test the movie.
Now try adding a chicken/ duck crossing the road and a plane flying overhead.
To use the chicken you can save it to your computer, open it in Fireworks and export it as a flash movie ready to import into Flash. Make sure that the background is made transparent before exporting it as a Flash movie. Alternativly download the chicken Flash file at the end of this section.
The image of the plane now needs to be opened in Fireworks. The background (sky) needs to be removed using the magic wand. Try a threshold of 30.
The Tool Panel contains the tools used to draw, modify, select, paint, fill, resize, erase and generally modify your images.
You can now play your movie to see what it looks like. To do this Click on <Control> in the top menu and then <Test Movie>. This is a more accurate playback then just clicking play. I am not sure why I just know that this is the case.
