Programme. Introduction to Animation Shop

Transcription

1 HEART Trust NTA Vocational Training Development Institute Programme Course <num> <name> Animations Learning Objectives: Use the animation tools Prepare for an animation Create an animation with animation wizard Save an animation Set animation properties Set frame properties Edit a frame Use onionskin properties Rotate a frame Cut a frame Delete, resize, manipulate frames Introduction to Animation Shop Animation is a series of frames, that when viewed at a certain speed, creates the illusion of movement. Animation Shop enables you to create animations for the Web in a simple and easy manner. Animation Shop can be launched directly from Paint Shop Pro, or from the Windows Start menu. To launch Animation Shop from Paint Shop Pro: From the main menu, choose File > JASC Software Products >Launch Animation Shop. The workspace is similar to Paint Shop Pro. However, the tools are somewhat different. The animation toolbars can be toggled on and off by choosing from the main menu View > (select). The Animation toolbar contains the following: Animation Wizard - creating animation using a step-by-step process. Banner Wizard - creating animated banners, step-by-step. Export Frames to Paint Shop Pro - to export frames to PSP. Browse - to browse for files. New Animation - to open a new animation file. Open Animation - to open an existing animation file. VTDI - ICT Department Version 1,

2 Save - to save an animation. Save Frame As - to save an individual frame of an animation. Print - to print the frames of an animation. The Animation toolbar: Further toolbar options: Cut - to remove a frame and place it on the clipboard. Copy - to copy a frame. Paste as New Animation - to create a new animation from a frame. Paste Before/After Current - to paste a frame into the same or another animation. Paste Into Selected Frame - to merge a frame, copied to the clipboard, into another frame. Propagate Paste - to drag two or more source frames into a target frame. Delete Frames - to delete selected frames. Duplicate - to duplicate a frame or series of frames. Toggle Onionskin Preview - to enable/disable the Onionskin Preview. Toggle Tool Palette - to hide/show the Tool Palette. Toggle Style Bar - to hide/show the Style Bar. Toggle Color Palette - to hide/show the Color Palette. View Animation - to open the Play View window: The Tool palette: Arrow - to select or move a frame. Zoom - to enlarge the view of a frame. Registration Mark - a visual reference mark for positioning. Crop - to reduce the size of a frame. Move - to move the frame's contents. Dropper - to select color. Brush - to paint on frames. Eraser to replace pixels with the canvas or background color. Flood Fill - to fill the selection with color. Text - to add text to an animation. Line - to draw lines and curves. Shape - to draw shapes, i.e. squares, rectangles, circles, and ellipses: The Style Bar works similarly to Paint Shop Pro's Tool Options palette. It displays additional options for a selected tool, as for the Flood Fill tool. The VCR Control Toolbar is used to play, rewind, and loop animation. The VCR Controls are: Rewind - to rewind the animation. VTDI - ICT Department Version 1,

3 Reverse - to play the animation backwards. Slow Reverse - to slowly play the animation backwards. Pause - to stop the animation temporarily while playing. Slow Forward - to slowly play the animation forwards. Play - to play the animation. Fast Forward - to play the animation at fast speed. Retreat One Frame - to go back one frame at a time. Advance One Frame - to go forward one frame at a time. Loop - to repeat (or loop) the animation over and over: Image Preparation Animation is a compilation of several images, and other media, each adding to file size and download time. Preparing for animation The best and most simple way to plan your animation is with a "storyboard". A storyboard is a guide to show what each frame or sequence in the animation will contain. A rough sketch, or even a text description, of what you want to happen in each frame: Once the plan for the animation has been decided, the graphics and images need to be prepared. At this stage, it is important to consider the download time. Animation is a compilation of several images, and other media, each adding to file size and download time. GIF images are generally used as they contain minimal colors, retain transparency, and are also small in size. Prepare each image in the animation, and save them to a folder that can be easily accessed through the Browser. Creating an animation with Animation Wizard Animation Shop provides a simple step-by-step method of creating animation, and that is through the use of the Animation Wizard. To create an animation using the Animation Wizard: From the main menu, choose File > Animation Wizard OR click the Animation Wizard button on the toolbar. Select the size for the first image frame, and click Next: Choose from: Transparent - allows any images underneath the animation to show though, or Opaque - allows selection of an opaque color for the canvas. Click on the color box to access the color dialog box: For the location of the image within the frame, if the image is smaller than the frame, select: Upper left corner or Center. VTDI - ICT Department Version 1,

4 If the image occupies only part of a frame, fill the rest of the frame with the canvas color, or the preceding frame's content. Scale to fit is checked to resize the image so that it fits in the frame: Loop, or repeat the animation indefinitely, that is, over and over repeatedly OR enter the number of times the animation is to be repeated. Enter the time each frame is to be displayed. This can be changed later when editing the animation: Click Add Images to add all the images in sequence that will be played in the animation. Click Remove Image to delete an image from the list. Select an image, and use the Move Up and Move Down buttons to change its position in the list: Click Finish to complete the animation process: The animation will open a Frames View window. To view the animation: From the main menu, choose View > Animation OR click the View Animation button on the toolbar. Manage Animation The properties dialog box features three tabs, Canvas Color, Comments, and Looping. Saving an animation Animations can be saved in any of the following formats: GIF, MNG, AVI, ANI, FLC, and FLI. When saving GIF, AVI, FLC, or FLI formats, Animation Shop will automatically open the optimization wizard. To save individual frames in an animation: From the main menu, choose File > Save As OR click the Save Frames button on the toolbar OR press the F12 key OR right-click on the frame to open the contextual menu, and choose Save Frame As. The Save Frame As dialog box will open. Enter the file name. Choose the file type. Choose the following formatting options: Long file names - to a maximum length of 256 characters. DOS 8.3 file names - maximum of 8 characters plus a 3-character file extension. Save frame number in file name - adds the frame number to the file name. Append leading zeros to frame index - adds zeros to the file name number. Save total frame count in file name - adds the total frame count to the file name separated by a hyphen. Save comment in the file name - adds frame's comments to the file name: VTDI - ICT Department Version 1,

5 Setting animation properties To set the properties for the whole animation: From the main menu, choose Animation > Animation Properties OR press the Shift + Alt + Enter key combination OR right-click the grey area of the animation window to open the contextual menu, and choose Animation Properties. The properties dialog box features three tabs, Canvas Color, Comments, and Looping. The Canvas Color options are: Transparent - the frame windows will display the transparent checked background. Opaque - the frames will be filled with the color selected in the color box. Right-click in the color box to display recent colors: The Comments tab features: Text area - to enter information relating to the whole animation: The Looping tab options are: Repeat the animation indefinitely - to play the animation over and over. Play it - enter a numerical value for the animation to repeat playing: Setting the frame properties To set the individual frame properties: From the main menu, choose Animation > Frame Properties OR press the Alt + Enter key combination OR right-click inside the animation filmstrip to open the contextual menu, and choose Frame Properties. The Frame Properties dialog box features two tabs, Display Time and Comments. The Display Time tab features: Display time (in 1/100th sec.) - sets the duration of the selected frame (setting of 100 = 1 second). The Comments tab features: Text area - enter information relating to the selected frame: Modify Animation An empty frame can also be copied and pasted from one animation to another. The Onionskin Preview enables the editing of a selected frame by "borrowing" the contents from a nearby frame, and overlaying the image on the selected frame. Editing animation To add a frame to an animation: From the main menu, choose Animation > Insert Frames > Empty OR press the Ctrl + T key combination to insert a new frame before the current frame OR press the Shift + Ctrl + T key combination to insert a frame after the current frame VTDI - ICT Department Version 1,

6 OR right-click the selected frame to open the contextual menu, and choose Insert Frames > Empty. The Insert Empty Frames dialog box displays the following: Number of frames - the number of frames to be inserted. Insert before frame - the frame number following the new frame. Frame delay time - sets the delay time for the new inserted frame. Blank to canvas color - fills the empty frame with the canvas color. Carry forward contents of preceding frame - copies the contents of the previous frame into the new empty frame. The Insert Frames dialog box: An empty frame can also be copied and pasted from one animation to another. To copy and paste an empty frame from another animation: Select the frame in the source animation, and from the main menu, choose Edit > Copy OR press the Ctrl + C key combination. Select the position on the destination animation, and from the main menu, choose Edit > Paste > select one of the following: Into Selected Frame OR press the Ctrl + E key combination. Before Current Frame OR press the Ctrl + L key combination. After Current Frame OR press the Shift + Ctrl + L key combination. As New Animation OR press the Ctrl + V Key combination. To move a frame into a number of target frames at the same time: From the main menu, choose Edit > Propagate Paste (toggle). Select the source frame, and using drag-and-drop, move it to the target frame. The source frame will be placed in the same position in every frame in the animation that is in the same state as the target frame. That is, if the target frame is selected or unselected. Rotating a frame Select the frame, and from the main menu, choose Animation >Rotate OR press the Ctrl + R key combination. In the Rotate dialog box, select from the following options: Direction (Right or Left) - the direction of the rotation. Degrees (90, 180, 270) - specific amount of rotation. Free - user defined degree of rotation. Selected frames only - when checked, only the selected frame is rotated. Expand canvas if needed - when checked, all frames in the animation will be expanded to accommodate the rotation angle: VTDI - ICT Department Version 1,

7 Deleting frames To delete a frame from an animation: Select the frame(s) to be removed. From the main menu, choose Edit > Delete OR click the Delete Frames button on the toolbar OR press the main Delete key on the keyboard. Resizing animations To resize the overall animation: From the main menu, choose Animation > Resize Animation. In the Resize dialog box, select from the following options: Pixel Size - the width and height in pixels. Percentage of Original - the width and height percentage of the original animation size. Actual/Print Size - the actual size and resolution of the animation, and the print size. Resize type drop-down menu: Smart size - Animation Shop applies the best results to the resize. Bilinear resample - smoothes the reduced image. Use when reducing the size of an image. Bicubic resample - smoothes the expanded image. Use when enlarging an image. Pixel resize - best used with hard edged imaged. Maintain aspect ratio - maintain the proportions of an image: Manipulating frames Selected frames can be flipped, reversed, mirrored, and duplicated. To flip vertically, one or more selected frames: From the main menu, choose Animation > Flip OR press the Ctrl + I key combination. To reverse two or more selected frames: From the main menu, choose Animation > Reverse Frames OR press the Shift + R key combination. To mirror horizontally, one or more selected frames: From the main menu, choose Animation > Mirror Frames OR press the Ctrl + M key combination. To duplicate one or more frames: From the main menu, choose Edit > Duplicate Selected OR click the Duplicate button on the toolbar OR right-click in the frame to open the contextual menu, and choose Duplicate Selected. Using the Registration Mark tool The Registration Mark is a crosshair used as a visual reference to mark a particular position in a frame. If an object is to be added to several frames in the exact same position, that position can be marked. The registration mark is not part of the animation, so therefore is not seen when the animation is played or printed. VTDI - ICT Department Version 1,

8 To add a registration mark: Click the Registration Mark tool on the toolbar, and the Registration Mark Style Bar will be activated. The drop-down menu on the Style Bar features three options: Small Cross - spans 10 pixels from the center origin to the edge. Large Cross - spans 20 pixels from the center origin to the edge. Spanning Cross - spans the entire width of the frame. Auto Color, when checked, draws the cross in a color that contrasts with the foreground and background colors. To remove a registration mark: Click Clear on the Registration Mark Style Bar. Worksheet Exercise 1 From the main menu, choose File > Jasc Software Products > Launch Animation Shop. From the main menu, choose File > Animation Wizard. Check the following options: Same size as the first image, and click Next Opaque = White, and click Next Centered in the frame With canvas color Scale frame to fit, and click Next Play it 1 time Frame displayed at 50 Click Add Image, and select flower.psp folder: Click Next. Click Finish. Animation Shop will convert each layer in the image file to a separate frame: To play the animation, from the main menu, choose View > Animation File > Save the image and name the file flower.mng. Exercise 2 Open Paint Shop Pro and create a layered image. One in which is suitable for an animation. Save it as a psp file VTDI - ICT Department Version 1,

9 Use the animation shop wizard to open it. View your animation Save it as a mng file and then as a gif. Exercise 3 Use the animation wizard to select the images butterflies 2 01.iff to butterflies 2 13.iff What do you observe when you exit the wizard View the animation save your animation as a gif view your animation in a web browser Do the same with ducks iff to ducks iff. Exercise 4 Using Paint Shop Pro, create 5 images of equal canvas size that you would use in an animation. Save then all as gif files numbering them in the order they will appear in the animation. Open them using the wizard. View your animation Save your animation as a gif file VTDI - ICT Department Version 1,