When creating motion tweened animations, remember to insert the second Keyframe after youve created the tween. If you dont, the Create Motion Tween command gets confused.
Flash is the dominant format for vector graphics and animation on the Web, and the best tool for creating them is Macromedia Flash. The first version of Flash, called FutureSplash back in those days, wasn’t much more than a strange little drawing package. With revision after revision, Flash has evolved into an animation package with extensive scripting capabilities – the closest thing the Web has to a fully featured multimedia-authoring tool.
The way this has been achieved is by keeping things small and simple. Although it’s predominantly a vector animation package, you can incorporate other media including sound and bitmaps in Flash files. They all benefit from sticking to the Web’s cardinal rule – compress everything.
We’ll be looking more closely at the way Flash handles MP3 files, JPEGs and even video clips in future articles. For now, we’re going to concentrate on how Flash makes things move. Flash combines vector drawing capabilities with a Timeline that enables you to make changes to these drawings over a period of frames. When played back in sequence, this forms animation.
Flash has two ways of handling animation. The first method, familiar to ‘traditional’ animators, is ‘frame-by-frame’ animation. In a normal film or video, the camera takes a still photograph of a scene 25 or 30 times a second. When that sequence of still pictures is played back to us at the right speed, our crazy brains interpret it as motion. The same thing happens with frame-by-frame animation, except that each ‘picture’ is a drawing.
In Flash you can choose to import or draw pictures one Keyframe at a time and create animation that way. Some designers have taken advantage of this ability alongside Flash’s layer functions to create full cartoons of broadcast quality. The resulting files can be very large, though, and you need a lot of processing power.
Were the Tweenies
The alternative method, and the most popular for creating animation on the Web, is known as ‘tweening’. With this technique you start with an image and place it at a start point on the screen, then define an end point on the screen where the image appears changed. Instead of having a specific frame for each stage of animation, Flash works out the animation Frames between the start point and end point automatically. These starting and ending points are called Keyframes because they represent key points in the sequence, and the name ‘tweening’ is a shortened version of ‘in-betweening’, because that’s what the computer does, working out the frames in-between.
Flash supports a number of different kinds of transition in tweened animations. From the start to the end point, an animated element might change its position on screen, its color, size, rotation, transparency setting and skew. These are designated as ‘motion tweens’, and can be constrained to stick to a certain path as they travel from frame ‘a’ to frame ‘b’.
In future articles we’ll be looking at more complex transitions.