Serif DrawPlus animation tutorial

Serif DrawPlus: Animation
	Get Started Clone Frames Morph Frames Overlay Frames Other Adjustments Timing and Sequencing Exporting Animations
	Create an animation by morphing drawing objects, cloning and modifying frames, and by breaking down a character into usable parts that are stored in the DrawPlus Portfolio. The example animation brings Nipper, the HMV dog, first painted by his master Francis Barraud in 1898, right up-to-date. It utilizes very few drawings: two different poses for Nipper, a moveable tail and front paw, one phonograph, one iPod and some musical notes. The finished animation has 39 frames. It is 454 KB as a DPA file, but when optimised for the web is only 4.5 KB, downloading in under 1 second.
	Get Started
	Choose Create an Animation from the Startup Wizard. Click on Add Page Size and type in your preferred dimensions. Note that the default measurement is pixels. The example animation measures only 200 pixels x 100, but it can be enlarged when finished without loss of quality or detail because these are vector graphics. Give your custom size a name e.g. dog_cartoon, click OK, select the orientation and click Finish.

	A new document window opens in Animation Mode. The interface is slightly different from Drawing Mode, with a yellow pasteboard and tabs for frames [1] rather than layers. The Animation Toolbar [2] also appears above the Hintline [3]. DrawPlus automatically starts a new animation with Frame 1.
		[1] The frame tab
		[2] The Animation toolbar
	Navigate the frames
	[3]The HintLine Top
	Clone Frames
	Use any drawing tools to create a simple character and place this to the right of the frame. Zoom in for greater control and avoid unnecessary detail. Save your drawing to the Portfolio for future use: choose the Portfolio tab in the Studio, drag the drawing over to it, and give it a name e.g. dog1. If there is time, draw your character as a series of usable parts (head, eyes, limbs, tail, ears etc) that can easily be re-assembled into different poses with a minimum of redrawing. Save these body parts separately to the Portfolio too.

	Click on the Clone Frame [A] button to make an exact copy of Frame 1. Right click on the Frame 2 tab and toggle the Onion Skinning [B] option on. This allows you to see the previous frame simultaneously in order to align elements accurately. Select your character with the Pointer [C] and move it slightly to the left. Change the position of any separate body parts e.g. the dog’s tail.
	[A] [B] [C]
	Repeat step 4 once or twice more until your character has been moved to the middle of the frame. View your animation regularly in order to make modifications by clicking on the Preview Animation button. Save your work and give it a name: File > Save As. Note that the file extension for animations in DrawPlus is .DPA e.g. musical_dog.dpa
	Top
	Morph shapes
	This technique can achieve quite surreal effects and can be applied to any two different shapes. With your animation open choose File > New > Create a Drawing. Select any paper size e.g. A5 and click Finish. Drag the drawing you made in step 3 from the Portfolio onto the new page. Place it on the right side of the page. Use the drawing tools to draw a different pose for this character on the left of the page and save the new drawing to the Portfolio again, naming it e.g. dog2.
	Animators use a process called ‘tweening’ to create the less important frames in between key frames of an animation. Traditionally these were drawn by assistants rather than animators. In DrawPlus a similar effect can be achieved using the Blend tool and animating the outcomes. Select the Blend tool and hover the cursor over your first object until it is framed by a blue rectangle. Click your left mouse button, hold it down, and drag the cursor over the second object. [A] When that is also bounded by a blue box, release the mouse button. In the dialog box that appears type the number of transitional blends or steps you want. [B] The example uses five. Click OK. With all the blended forms selected, right-click on any one and choose Ungroup. Repeat this with the other intermediate shapes. Save this drawing as a .dpp file: File > Save As.
	[A] [B]

	A five-step blend and an example of one of the blends.

	Choose Tile from the Window menu and you will be able to see both your animation and the blended drawings simultaneously.

	In the animation window create some new blank frames by clicking on the New Frame button: one for each of your blended drawings (the example adds 5 frames) and one for the new character pose you drew at step 6. Control-drag the first blend object from the drawing window onto the first blank frame. Align it as at step 4. The morph can take place on the same spot, or as the character is moved across the frame.
	Repeat step 9, copying the other blends and the new pose onto the remaining blank frames.
	Close the Drawing Window and maximise the Animation Window again. Save your animation and preview it by clicking on the Preview Animation button.
	Top
	Overlay frames
	If frames are to build cumulatively on other frames, as with the musical notes in the example animation, designating these as overlay frames reveals the content of preceding frames to save re-drawing. Only new elements need to be added. (Although onion skinning has overlay qualities, these are only for editing purposes, and transparency is not preserved when the animation plays.) Click on the Frame Properties button on the Animation toolbar, check Overlay as the Style, and click OK. Add any new elements to the frame. Repeat this with further frames as desired.
	Frame 16
	Frame 17	Frame 18
	Top
	Other adjustments
	The illusion of change or movement can also be created by changing fill or background colours, adjusting transparency, rotating or resizing objects from frame to frame.

	Rotating and re-sizing an object and changing its background colour.

	Reducing transparency from 100%, to 50%, to 25% to suggest a fade.
	If the background to the animation is to remain unaltered throughout, a single frame can be designated as a background frame that will remain visible while the other frames animate over it. Click on the Frame Properties button and select the Background check box. It will remain visible until another frame is designated as a background frame. The example shows the addition of a single horizontal line to suggest a floor. As the background should usually be the first frame in an animation, you can use the Frame Manager to change the sequence if you decide to add one at a later stage (see step 14 [C] ).
	Top
	Timing and sequencing
	Timing can have a significant impact on your animation: The default setting per frame is 10/100^th of a second. To alter this, click the Frame Properties button [A] on the Animation Toolbar. Alternatively, right-click on a frame tab and choose Frame Manager from the context menu [B], then select Properties. Try changing to a higher or lower setting to speed up or slow down the action, close the dialog box and preview the effect. When you clone a frame, the new frame appears at the end of the animation [C]. Reorganise the sequence by selecting the new frame in the Frame Manager dialog box and clicking on the Move Up or Move Down buttons. Click OK. Close the dialog box to preview the changes and make further adjustments if necessary.
	[A] [B] [C]
	Exporting animations
	When you have finished making modifications to the animation and have saved changes as usual, you are ready to export it to a file format that is supported by most web browsers and presentation software. Click the Export Animation button on the Animation Toolbar, or select Export from the File menu. The Animated GIF format is selected by default. This will support transparency and animation, but cannot be edited. To edit an animation, the original DPA file must be reopened.
		On the Format tab select Transparent, so that unfilled background areas allow the colour of the web page or presentation slide to show through. Anti-aliased smoothes jagged edges. Interlaced enables the graphic to appear line by line. Web-safe reduces the number of colours used, but most browsers can now handle 256 colours.
		You can rescale the animation on the Settings tab: making it larger does not significantly affect file size and quality remains constant. The exemplar animation has been scaled up to 400 pixels x 200. Click on the Estimate Download Time button to do just that. Leave the preselected dpi (dots per inch) setting at 96 for standard screen resolution.
	On the Animation tab click on the Endless Loop button if you want the animation to play continuously, but if you only want it to play a set number of times, click the Fixed Loop button and type in a value for the number of plays. Choose to view one, two or four optimised versions to compare quality and file size before making a final choice. Finally, click the Export button and save your animated GIF.
	Top
© RKM 2002- 2007
Home - Animation - Video - Projects - Image Manipulation - IWBs - Interactive - Presentations - Multimedia Tutorials - Other Tutorials - Art Links - Gallery - About