Creating animation for the WWW

How to … make and animate backdrops in Serif DrawPlus X4The tutorial explains how to make a moving linear backdrop and a circular one that rotates.

Make a linear backdrop

In DrawPlus X4 open one of the practice animations you saved earlier, or start a new keyframe animation at a size of your choice. The example ‘Down2Earth’ keyframe animation uses a custom frame of 400 pixels x 300 pixels to animate a space probe travelling slowly towards Earth. (No attempt has been made to show the correct position of the planets.)

Draw a Quick Rectangle the same height as your frame size, but double its length. Fill

it with a suitable colour depending on the scenario. The screenshot shows the ‘Down2Earth’ backdrop in place in the first keyframe - the red rectangle indicates the position of the frame. Place your backdrop in the same position.Drag landscape or townscape features that you draw yourself, find in the Gallery clipart folders or download from the internet onto the rectangle. Just one or two details can suggest a context – it is not necessary to create a detailed scene. Save time by copying and pasting elements such as foliage or buildings and modify them e.g. by changing size or colour so that they look different without having to start afresh.

© Serif Europe Keyframe animation 1

Creating animation for the WWW

Create a multiple selection containing all the objects by dragging a bounding box around the whole group with the Pointer. To group them click on the Group button that appears below the multiple

selection. Grouping makes multiple objects easier to manipulate.

Select the background rectangle and choose a transparency of 80% with the Colour tab Opacity slider so that the background recedes and the main features stand out, giving an illusion of perspective. Artists call this aerial perspective.

Add a new layer to the first frame of your animation. Drag a character or vehicle you have drawn or found

in the Gallery Clipart folders onto the drawing. You can click on the Insert Picture button to navigate to an image you have stored elsewhere. The example uses a clipart space probe. Place the object to the far left of the frame. Your animation will have two layers: the background and the character/object/vehicle layer.

On the Storyboard tab click Insert. In the Insert Keyframes dialog change the Keyframe

duration to a preferred time e.g. 5.0 sec, but accept the other default settings (1 keyframe; after; current keyframe). Click OK. DrawPlus adds a second keyframe to the Storyboard which replicates the first.

With the first frame selected, on the Storyboard tab click the Split keyframe button and type e.g. 5 in

the dialog window. The Storyboard now displays a number of identical frames.

Click on the final frame of your storyboard and move the backdrop so that this time the right edges of drawing and frame line up, as indicated by the green rectangle. This will give the impression that the object is moving forward even if it never changes position on the frame. Also on the final frame, change the position of the vehicle/object/character and modify as necessary e.g. the probe is rotated and decreased in size. Save your animation to the practice_keyframe subfolder of your AO3Animation folder as practice_linear_backdrop.dpa.

© Serif Europe Keyframe animation 2

Creating animation for the WWW

Preview your work by clicking on the blue arrow on the Storyboard toolbar and choose Preview in Flash Player from the flyout menu.

Close the player and make any necessary adjustments to timing. Save your work.

To stop the movie after a single play, place a marker on the final frame. 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. Close your animation.

© Serif Europe Keyframe animation 3

Creating animation for the WWW

Make a circular backdrop – extension activity

If you are feeling very adventurous you may want to try creating a circular backdrop

that can be rotated. For an animation measuring 400 pixels x 300 pixels, drag out a Quick Ellipse the circle with a diameter of about 900 pixels (for a circle hold the Shift key as you draw, or type in dimensions on the Transform tab). The screenshot shows the relative size and position of the animation frame.

Create your whole backdrop in DrawPlus X4 in Drawing mode and export it in PNG picture format. To create the scenery buildings etc, apply the skills you learned in the basic graphic techniques exercises to combine Quick Shapes, use freehand drawing tools, or modify clipart. Repeat and resize shapes for economy. The ‘Lost in the city’ animation backdrop combines Quick Shapes to make simple silhouettes of buildings and borrows shrubs and trees from the Layout Symbols > Garden clipart folder in the Gallery.

Start a new animation as before. Click the Insert Picture icon and navigate to your prepared background PNG file. Click on the frame and re-size and re-position the scenery as necessary.

Add a new layer to the first keyframe and introduce a character into the story – either from your My Designs or Clipart folders in the Gallery, or from your own graphics saved elsewhere – and position it to the left of the frame. Check that your backdrop

layer is at the bottom of the stack. Double-click on a layer to give it a more descriptive tag e.g. bird.

© Serif Europe Keyframe animation 4

Creating animation for the WWW

On the Storyboard tab click Insert. In the Insert Keyframes dialog change

the Keyframe duration to 6.0 sec, but accept the other default settings (1 keyframe; after; current keyframe). Click OK. DrawPlus adds a second keyframe to the Storyboard which replicates the first.

With the first frame selected, on the Storyboard tab click the Split keyframe button and type 5 in the dialog window. The

Storyboard now displays 6 identical frames. You may need to add more frames later, depending on the angle of rotation e.g. for the full 360o you will probably need more.

Open the last keyframe, and select your backdrop graphic with the Pointer tool (are you on the right layer?). Rotate it to its final position by hovering over a corner node until the cursor changes to a curved arrow. The angles inbetween are calculated

automatically by DrawPlus. Select the character layer and move the character across the frame too. Save your work as practice_rotate_backdrop.dpa to the practice_keyframe subfolder of your Animation folder.

Preview your animation by clicking on the blue arrow on the Storyboard toolbar and choose Preview in Flash Player from the flyout menu. Close the player and make any

necessary adjustments. Save your work. For continuous looping it is not necessary to do anything more. Close the animation.

© Serif Europe Keyframe animation 5