1 / 26

WebPaint Tutor #1

WebPaint Tutor #1. Squishing and Stretching. Stretch and squash are terms which are used by animators to describe the volume and mass of an object. The principle of Stretch and Squash is to provide an animated character with smooth fluid motions which gives the characters lifelike behaviour.

wayne-barron
Download Presentation

WebPaint Tutor #1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WebPaint Tutor #1 Squishing and Stretching

  2. Stretch and squash are terms which are used by animators to describe the volume and mass of an object. The principle of Stretch and Squash is to provide an animated character with smooth fluid motions which gives the characters lifelike behaviour.

  3. Smooth fluid motions gives the characters lifelike behavior.

  4. The principle of Stretch and Squash is to provide an animated character with smooth fluid motions. Stretch and Squash

  5. Once you understand this concept you can add depth and realism to your characters

  6. Watch the bouncing ball • In this tutorial, we will make a ball bounce on the bottom surface of the frame, including squashingas it hits the bottom and stretching as it bounces up

  7. Create a new document by clicking on the new document icon on the toolbar, or choose New from the File menu. FILE  NEW New Document

  8. Settings (house-keeping) • Set the • document to a bit depth of 8, • the palette to Netscape colors, • the frames to 10 frames per second, and the • document size to 100 pixels wide and 200 pixels tall.

  9. Use the circle tool, click and drag to create your ball. Circle Tool

  10. Click and drag to make a circle

  11. Step Two • Add another frame by clicking on the duplicate cel button. • Turn on the Onion Skin Previous. • Select the ball in the current cel and move the ball by draggin down far enough to show movement.

  12. The steps again. . . • Duplicate • Turn on Onion Skin previous • Select the ‘ball’ • Move the ball ‘far enough’ to show movement

  13. Onion Skin Button

  14. Duplicate (Copy) Onion Skin Previous

  15. Onion Skin Previous • Onion Skin Previous • This displays a transparent (ghost) image of the previous cell in the active document allowing you to align your current image to the previous cell.

  16. Step Three • Create a third cel by clicking on the add cel button (circled in red). • Choose the circle tool and • create an oval. • The oval will show the ball squashing as it hits the ground.

  17. Squoosh the ball COPY Erase the old ball Draw a NEW squished ball…in a lower location The onion tool leaves a ‘ghost’ to show where the ball was…shape and location.

  18. Step Four • Step Four • Create a fourth cel by clicking on the add cel button. • Click on the onion skin next button. This allows you to see a ghost image of the first cell of your animation.

  19. Stretch • Choose the circle tool and create another oval. • This time the oval should stretch up showing the ball moving in an upwards direction. • Most stretching cels in an animation will be stretched in the direction of the object.

  20. Remember • Stretch in the direction of the motion • Add cell • Onion NEXT • Stretch in direction of movement

  21. Step Five • Step Five • Go to your cell strip and duplicate your second cell and drag it to the end.

  22. View your image….add color.

  23. Save it… • Save as an animated GIF • Add to a Web page to view. . . • <img src = “bounce.gif”>

More Related