To demonstrate the difference between animation and motion graphics I have collated these two classic examples for you to try.
1. Motion Graphics - The Sliding Doors.
As stated above, a classic motion graphic example, overused time and time again in banners, dvd title menu's, tv programs or splashes etc. Here it is in action.
fig.1
Q: What makes this motion graphics and not animation?
A: The movement does not contain 'life', and does not portray a life like personality. Even a falling leaf can mimic life, can have life. It is simply used for graphic effect.
The principle here is to have an image (or more than one), which is hidden under moving boxes that are passed over it. This is not the only way to do this, but it's suited for beginners as it allows us to learn 'Motion Tween' and 'Shape Tween', two of Flash's most important animation tools.
The Motion Tween.
1. Open Flash and make a new document to work in.
2. Select the rectangle tool (or press R) and draw the shape on the stage. The colour is irrelevant for now. (If you can't see the tools, press Ctrl + F2 or go to the 'Windows' menu at the top ot the page and make sure there is a tick next to 'Tools' by clicking it.)
fig.2
3. Double-click on the outline of the shape you have drawn and delete it.
4. Now select the shape, right-click and choose 'Convert to Symbol' (F8).
5. Select 'Graphic' in the Type radio button and press 'OK'.
6. Now click on frame 10 (the number is not relevant).
7. Right-click and select 'Insert Keyframe' (F6).
fig.3
8. The Graphic you have made should be selected. Use the arrow keys (or drag it with the mouse) to move the Graphic (Symbol 1) somewhere else on the stage (project window).
9. Now Right-click on frame6 ( any frame except the first and last) and choose 'Create Motion Tween'.
fig.4
You should notice the timeline go blue and an arrow appears in the inbetween frames.
fig.5
9. Press <Ctrl> + <Shift> + <S> to save your project as a specific name i.e. tutorial.fla
10. Left-click on frame1 and press <Enter> to play your movie.
11. Press <Ctrl> + <Enter> to preview your movie. (There will now be a .swf file in the same folder as the .fla you just saved.)
12. The movement is a little shaky at this stage. The frame rate in the properties panel at the bottom of the page is on the default setting of 12 fps (fps - frames per second). Change this value to 31.
fig.6
13. Preview your movie again.
Your movie should look like this.
fig.7
14. In the properties panel again, click the 'Size:' option where it says i.e. 550 x 400 pixels.
15. Change to 550 x 100 pixels and preview your movie.
16. If your shape is now outside the white movie background, click on the last keyframe and move the shape up into the correct area. Do the same for the first frame as well.
17. If you want to slow down the movement, click on the last frame, then click again and drag it further down the timeline.
18. <Ctrl> + <S> to quickly save your movie without having to rename it, then preview your movie again.
19. Your shape is only travelling one way. Right-click on the first frame, and select 'Copy Frames'.
20. Right-click a frame well after the end of your movie i.e. at present my movie is 30 frames long, so I have right-clicked on frame60.
21. Select Paste Frames.
fig.8
22. Right click on the new inbetween frames i.e. frame45, and select 'Create Motion Tween'.
23. Save your work and preview the movie again. This is what you should have.
fig.9
REMEMBER:
If you use motion tween (or any other tween), you can only have one object (graphic, movie clip, button) on any layer. So, if we wanted to add another item to the stage, we would need to create a new layer.
If you don't turn the shape into a graphic at the beginning, then flash automatically turns the shape into a separate graphic for each keyframe the shape uses. You may desire this on occasion but for the best part it is good to keep control over the content in your library panel and not have it flooded with 'tween graphics'.
Go to the next page. Flash Motion Graphics Tutorial for beginners (page 2)
|
