Creating Animation for the WWW

Creating animation for the WWW

How to …

make an animated web banner in SerifDrawPlusX4

/ Open DrawPlus X4 and from the Startup Wizard choose CreateKeyframe Animation. Select Web Large Banner on the Start from Scratch dialog (= 468 pix x 60 pix).
/ Select a Quick Rectangle and draw out a rectangle that almost covers the frame. Click on the Node Tool and use the slider to round the corners of the rectangle slightly.
On the Swatch tab, click on the Gradient button and choose a fill e.g. Linear 180. Alternatively, select the Palettes button and pick a solid background fill colour.
/
/ Layers will help you organise the different elements in this animation. On the Layers tab click the Add Layer button. Double-click on the layer names if you want to type a tag to identify them easily e.g. background rather than Layer 1.keep the background layer at the bottom of the stack.
With the new layer active click on the Artistic TextTool to add a slogan to your banner. Choose a suitable font style and size. The exemplar banner uses Annie BTN for most of the text, but Arial Black for the web address. You may not have the same fonts available. Set a colour on the Colour tab. From the Arrange menu choose Align Objects and click Centre on the Horizontally section.

/ Add another layer and drag one of your drawings from the My Designs folder in the Gallery, or use a clipart object if you have not yet prepared any assets. The example uses a bone I had already drawn and saved. Position the object to one side of your text. Save your work as practice_banner.dpa to the practice_keyframe subfolder of your Animation folder.
/ On the Storyboard tab click Insert. In the Insert Keyframes dialog change the Keyframe duration to 4.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. / On the Storyboard tab click the Split keyframe button and type 4 in the dialog window. The Storyboard nowdisplays 5 identical frames.
/ Animate text 1 - tween transparency
On the final frame select the text (check you’re on the right layer). On the Colour tab drag the Opacity slider to0% to make the text invisible. Move your drawing object to the opposite side of the frame. Objects in the intermediate frames adjust automatically. I also modified the object’s path in the middle frame so that the bone dropped to the bottom of the banner and bounced up again.
/ 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. Save your work.
/ Animate text 2 - tween motion
With the final frame selected, insert a new keyframe on the Storyboard. Delete the transparent text and on the same layer use the ArtisticText Tool to write another part of your message. Place it to the far right of the page so that only the first one or two letters are in the frame. Insert another keyframe. Select this and move the new text to the centre of the frame. Preview your work You will see that the new text scrolls from right to left. Adjust timings as required and save your work.
/ Animate text 3 - no tween

The final two phrases are not tweened, but there is a simple automatic transition between key frames. Select the final frame and insert a new keyframe. Delete the current slogan and with the Artistic TextTool add some new text (check which layer is active). Make sure that you use a clear sans serif font if giving a web address so that it is easy to read. The example uses Arial. You can add other elements if you wish.
/
Repeat step 9 adding different text.

Preview your work and adjust timings making sure that there is time for viewers to read the message. When you finish your animation, decide whether you want it to loop continuously, or run once only.
If you want the movie to stop after one 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. For continuous looping it is not necessary to do anything.
Preview and save your work.