Creating Animation for the WWW

Creating animation for the WWW

How to … adjust frame rates, easing, looping and run time in Serif DrawPlus X4 Easing - affecting change over time

Animation frames do not have to display at the same rate. You have already learned how to alter the rate of individual frames, but DrawPlus X4 keyframe animation mode has a more sophisticated feature for adjusting the speed of a character’s motion to make it seem more realistic. DrawPlus uses the term envelopes to describe editable motion paths that define the rate of change when you tween an object’s motion or physical attributes like colour or transparency in a keyframe animation. In DrawPlus X4 these are applied on the Easing tab.

Open one of the practice keyframe animations you have already made e.g. spiral3.dpa and save it immediately with a new version number e.g. spiral4.dpa to your practice_keyframe folder. You want the morphing spiral to appear to bounce off the bottom of the frame and accelerate then slow down again as it rebounds. Select the last frame on the Storyboard and with the Pointer move the green star 2/3rds of the way up the right side of the frame. The intermediate frames adjust automatically. Click on the third frame in the Storyboard to activate it and select the morphed spiral with the Pointer. Flatten the shape a little so it looks squashed. Since you have affected a change to this shape, it is no longer a tweened object, but has been converted to a key object, indicated by a grey node on the tween path instead of a white one.

While the shape is still selected, find the Easing tab in the Studio area. The default rate of change is linear i.e. it changes at a uniform speed over time, as shown in the first screenshot. Choose any Envelope profile from the drop down menu (All Envelopes is fine) and hover your mouse over the blue line. When the cursor changes to an S, click and drag the line to a new position. The second screenshot shows a sharp increase in rate of change that then evens out. Keep the other settings. DrawPlus Help has more detail about this feature under ‘Easing tab’.

Preview your work by clicking on the blue arrow on the Storyboard toolbar and choose Preview in Flash Player from the flyout menu. Experiment with other variations and when you are happy with the effect save your animation again.

Adjust frame rates The rate at which individual frames in the animation play can be adjusted very easily. The default timing is 1000 milliseconds or one second. This is perfect for slow changing banner adverts, text frames and moments in the action that call for a brief pause, but for natural motion choose a faster rate. Experiment with 100ms, 250ms and 333ms. But another important consideration is your time – a faster frame rate demands more frames to meet the OCR specification for this unit of at least 15 seconds running time. To change an existing frame rate, simply click on the number below the frame on the storyboard (1) to highlight it and then type the new rate. For new keyframes specify the rate in the dialog window.

Total running time

Another very useful feature of the storyboard is that the final frame gives the total running time for the animation and adjusts automatically when further modifications are made. In the storyboard for the spiral animation the total time is 5 seconds (2).

To adjust your total running time to make sure that it is not less than 15 seconds, DrawPlus has another helpful feature: the Scale Storyboard button (3). Click on it and type in a new duration: the timescale is adjusted across the run of the animation. Preview your animation to make sure that the changes are fit for purpose.

Looping

When you finish your animation you must decide how you want it to run. The default play setting is for the animation to loop continuously. However, if you only want it to run once so as to give viewers control over whether to play it again or not using the controls on their Shockwave or Flash Player, then you can place a marker on the final frame. This assigns an action to that frame to stop the playhead, preventing your animation from looping or continuing past that marker position. Markers are positioned between keyframes along the storyboard.

Click on the grey arrow after the final frame and check the Stops Playhead radio button. You don’t have to give it a name. Click OK. Preview and save your work.

Looping individual elements

To achieve the highest grades for the model assignment, you must loop at least one individual element in your animation, rather than simply running the whole animation on a continuous loop. This is easily achieved in DrawPlus using both stop-frame and keyframe modes. It is the subject of a separate tutorial: ‘How to loop individual elements in DrawPlus keyframe mode’.