www.TechEd.ca - ANIMATION

www.TechEd.ca

ANIMATION

COMMUNICATIONS TECHNOLOGY

Animation Part 1: The Basics

History of Animation
Types of Animation & How they are similar / different

HISTORY OF ANIMATION

Animated Gifs in Photoshop

#1 - Basic GIF - Watch the Animated Basic GIF Video and build your own Explosion

To save out your GIF do the following: File > Export > Save for Web (Legacy)

Put the file in your Google Drive somewhere safe you will upload this and the other two files at once.

#2 - Using Sprites - Use one of the Sprites below and build a simple GIF

SPRITE 4.jpg

SPRITE 3.jpg

SPRITE 1.png

SPRITE 2.jpg

#3 - Build your own GIF using Sprites

Make a new Photoshop document that is around 1000 pixels x 500 pixels maximum
Include a background
Include at least 2 "things" which interact. Everything will be explained in class, if you need more information, please ask!

Submit 3 GIFs to the Google Classroom

EXAMPLES

Animation Part 2: AnimaticS

What's included in an animatic?

Animatics define the timing for a piece of moving image. When used with a soundtrack, they are a quick and easy way to get a sense of a finished film. They're a fundamental part of the pre-production process. Although animatics aren't polished pieces, you'll want to indicate things like camera movement, transitions effects, and character movement. This is typically done through the use of arrows to indicate direction in the finished piece.

An example camera movement

The goal of these techniques is to quickly show your intention for a shot, without needing to go to the trouble of creating it. A good working knowledge of moving image shorthand will stand you in good stead.

Animatic vs Animation

Animatics are created by playing a series of images in order and adjusting the timing for each frame. Timing changes are used to create a sense of pace.

You can create an animatic in Photoshop, After Effects, or in a specialist animatic software, like Boords.

Why are animatics used?

1. To create consensus
The animatic may be the first time your teammates or clients see what you've been working on. It's the perfect time to gather feedback and make changes before you begin the video editing process.

2. To make quick changes
An animatic should be seen as a work in progress, rather than a polished piece of art. It's much easier to scrap a scene or character at this point rather than later in the production process. With an animatic to hand, you'll save a lot of time and heartache down the line.

3. As a benchmark
Once you move into the production phase, your animatic can be used as a benchmark to refer back to. As an animator, it can be tempting to get lost in the details, but with your animatic as a stable reference point, it'll be easier to stay on track. The animatic should act as your North Star.

How to Make an Animatic in Photoshop

Helpful Resource: https://boords.com/animatic/how-to-make-an-animatic

Step 1. Create your document

Fire up Photoshop, then create a new document 1920px wide, 1080px high. These dimensions are also known as HDTV1080p, or Full HD. It's the size of most short-form video.

Step 2. Add a timeline

Click "Window > Workspace > Motion" then "Create Video Timeline" within the Timeline panel at the bottom of the UI. If you can't see the Timeline panel, you can open it by selecting 'Window > Timeline' from the menu.

Step 3. Add your frames

Drag your storyboard images into the empty artboard. (Or draw your own scenes / combine images and characters) This will create references to those frames on your Timeline. When you first drag your images in, there's a good chance the Timeline won't fill the whole horizontal width of your screen. Use the Timeline zoom tool at the bottom of the Timeline panel to zoom in or out.

Step 4. Time your frames out

Now for the fun part - timing out your animatic! Drag the end point of each of your frames to the left until you have a 'staircase' of frames. Your first frame should be at the top, the last frame at the bottom.

We don't need to alter the start points of each frame, because Photoshop will only show the top visible frame at any given point. The end point of the last visible frame in your Timeline defines the duration of your animatic.

Step 5. Playing your animatic through

Play your animatic through by using the 'Play' or 'Step' buttons in the Timeline UI. 'Play' will continuously play your animatic (it loops by default, although you can turn this off). 'Step' will move your animatic forward one frame at a time. You can also play and pause your animatic by pressing the space bar.

Step 6. Exporting your animatic

When you're happy with the timing of your animatic, it's time to export it. Go to 'File > Export > Render video', choose your MP4 export settings, and you're off to the races.

HISTORICAL COMPARISON of ANIMATION

Hand-Drawn Animation in the 1960s

Manual Process: Animators drew each frame by hand, a labor-intensive and time-consuming process known as "inbetweening" for the frames between key poses.
Artistic Skill: Required highly skilled artists to maintain consistency and fluidity across frames.
Time-Consuming: Creating even a few seconds of animation could take a long time, as each frame needed to be individually crafted.
Physical Mediums: Used physical materials like paper, pencils, and ink, and later transferred to film, which limited the ability to make changes without redrawing significant portions.
Limitations: Corrections and adjustments were more challenging and time-consuming, as they often required redrawing entire sections.

Digital Tweening (Motion Tweening) in Modern Animation

Automated Process: Animators set keyframes and the software generates the inbetween frames, significantly speeding up the process.
Efficiency: Much faster to produce animations since intermediate frames are created automatically by the software.
Flexibility: Easy to make adjustments and changes to animations, as modifying keyframes updates the entire animation sequence instantly.
Digital Tools: Utilizes software like Adobe Animate, which provides a wide range of tools for precision and creativity, and allows for easy integration with other digital assets.
Creative Possibilities: Allows for more complex animations, special effects, and consistency with less effort compared to traditional methods.

Comparison and Evolution

Speed and Efficiency: Digital tweening vastly improves efficiency, allowing animators to produce more content in less time.
Consistency: Digital tools ensure consistent motion and smooth transitions, which can be more challenging to achieve manually.
Creative Flexibility: Modern tools offer more creative flexibility, allowing for quick adjustments and iterations, which is a significant advantage over the rigid and laborious process of hand-drawn animation.
Cost: Digital animation can be more cost-effective in the long run due to reduced labor and material costs.
Preservation and Distribution: Digital animations are easier to store, preserve, and distribute compared to physical media.

Animation Part 3: Adobe animate INTRO

HISTORY OF ANIMATION

FRAME RATES

SQUASH & STRETCH

Shape Tween 0:00 - 4:00

Classic Tween (adding key frames) 4:05 - 6:13

Motion Tween (no key frames needed) 6:13 - end

Assignment: FLOWER SELF DIRECTED

Please try this Adobe Animate tutorial if you are ahead. This video will guide you through learning the basics of Animate.

ANIMATE TUTORIAL.mp4

SUBMIT: Please turn in your final animation in either a GIF or a MP4 video.

TURN IN > FLOWERS.gif

WHat is a Motion tween?

Motion tween animation is a technique used in computer animation where an animator (you) defines key positions or states for an object at specific points in time, and the software generates the intermediate frames, creating smooth transitions between these states. This process, known as "tweening," significantly reduces the manual effort required to create each frame individually.

Importance of Motion Tween Animation in Animation Creation

Efficiency: Motion tweening automates the creation of intermediate frames, saving time and reducing the workload for animators.

Smooth Transitions: It ensures smooth and consistent movement, enhancing the overall fluidity and realism of the animation.

Precision: Animators can achieve precise control over the motion and timing of objects, making it easier to create complex animations.

Flexibility: Motion tweening allows for easy adjustments and fine-tuning of animations, as changes can be made to keyframes without redoing the entire sequence.

Cost-Effectiveness: By reducing the amount of manual work needed, motion tweening can lower production costs and increase productivity.

Overall, motion tween animation is a fundamental technique that streamlines the animation process, enabling the creation of high-quality animations efficiently and effectively.

Motion Tweens vs Classic tweens

Animate creates two types of tweened animation: motion tweens and classic tweens.

Motion tween is a type of animation that uses symbols to create movement, size and rotation changes, fades, and colour effects.

Classic tween refers to tweening in Flash CS3 and earlier, and is maintained in Animate primarily for transition purposes.

MOTION TWEENS

Similarities between motion and classic tweens

There can be more than one classic or motion tween on the same layer, but you cannot have both types of tween on the same layer.

Both tweens tween only specific types of objects.

Assignment: Walking PEOPLE

In Animate and other animation programs it is often easiest to simply draw each frame in your animation one by one. Although this may sound like a lot of work, it gets easier with more practice. Since we are just starting out with animation, I want us to focus on a very simple stickman. Use the tutorial link below to watch a brief video explaining certain animations you can do with a stickman.

START HERE >>

1. We are going to need 9 keyframes. Hit F6 at least 9 times in the timeline to get the frames you will need. Next, lets add a new layer. You will notice that the new layer has an extended keyframe. On this layer at the beginning we want to draw the basic head and torso of the character without arms or legs. Will add the arms and legs later. I just drew two ovals with the oval tool and then used the free selection tool to move them on fop of each other. Remember that much of the drawing in this program is similar to adobe illustrate. This is vector graphics, but sped up to make it easier and quicker to draw to animate. The extended keyframes are for things that persist through the animation, i.e. the head and torso.

2. We are going to go a little bit detailed on the layers here to start to get an idea of what a simple animation with a lot of moving parts will start to look like. Add 4 more layers, and label them:

-Front Arm

-Front Leg

-Back Arm

-Back Leg

Arrange them as you see on the example on the right. Then. Right click on each layer and convert them all back to keyframes. This will give you everything you need to make the rest very easy.

3. Go back to frame one and begin drawing the arms and legs on the appropriate frame. For each frame do the next part of the walk cycle. i.e. contact, recoil, passing, high point etc. ** SEE IMAGE ABOVE **

Use the brush tool to draw the arms and legs and then use something called the ink bottle tool to outline your strokes. So I used a brush with a blue fill and then used the ink bottle to outline the blue fill strokes. This way your stick figures dont get lost on top of themselves.

4. Keep drawing the arms and legs, don't forget onion skin to keep your proportions correct. I found that it was easiest if I did all the painting and then went back and used the ink bottle afterwards so I didn't have to keep changing tools. Go through all 9 phases of the walk cycle.

I exported as a gif and got this as a result. But its too fast... so lets slow down the framerate. I can also tell I didn't ink bottle everything. So I went through and cleaned it up.

5. I changed the framerate to 3 fps for this one... and I also went through and started to adjust the legs and proportions and where they hit to make the walk more natural. I exported this to a gif as well.

This is something you should be getting at the very end. The clear swing of the arms and the circles of the legs. Clear layers and animation. This is however the most basic I expect you to come up with. You can take this very much further.

SUBMIT: Please turn in your final animation in either a GIF or a MP4 video.

TURN IN > #1 - STICK WALK.gif

Assignment: Introduction to the Tween

Now that you know the basics of layers of frame by frame animation, its time to get into some more advanced stuff, like pathing an object through space and frames using tweening. >> Watch This!

1. How to tween. Make a very simple background. You will notice, I don't pay much attention to lines outside of the background. That is because when we export (render) this animation, only the artboard will show up. This is the importance of choosing the correct artboard.

2. On the new layer you created, hover over the first frame until you see a rectangle. Click and drag out to about 50 frames for the motion tween. Do the same for your backgrounds.

3. We can only tween with symbols. So we need to go to the insert menu and add a new symbol to our animation. Lets name it simple ball 1 and make sure we choose graphic. This will let us use this resource from our library from now on.

4. When we click okay, it goes to a blank canvas. This is where you will craft your symbol. While this symbol is quite simple, symbols get quite complex and can be used to make very complicated animations, and are used in web design as well.

Draw a simple sphere that has a fill. You will notice that symbols have both frames and layers. We will be using these in later . I added frames and changed the colour of the ball over 10 frames.

Hit the back button that is circled in the example to go back to your main animation. You now have an asset in your library.

5. Find your library and drag it to one of your tabs. This will allow you to drag assets into your animation. It is normally in the menu circled on the right. I would drag it to a tab in your properties menu. This will allow you to drag your symbol into your animation.

6. Drag your ball from the library to where you want your motion tween to start. Make sure you have the first frame of your ball layer selected. Click, create motion tween with your symbol and frame selected. You should see your whole animation bar turn yellow. This means your tween is active.

7. Select the how many frames you would like to move the ball. For me, I will go by 5s, as it will make it more manageable. So I select frame 5, then I select my ball and move it where I want it to go in 5 frames. You can now mess with the tween. The dots represent frames, you can change the curve or the arrangement of the tween. Click 5 more frames and click and hold the ball to the next position.

8. Once you have the basic path finished you can start messing with the individual frames. You can curve and stagger the frames as you please. Mess around with the controls. Move the ball to exactly what you want.

SUBMIT: Please turn in EXPORT your final animation in either a GIF or a MP4 video.

TURN IN > #2 - BASIC TWEEN.gif

EXTENSION ACTIVITY (optional): BOUNCING BALLS EXTRA

You must have 5 different balls (symbols), on 5 different layers, named
You must have a background layer (the beside is a level 3)
All balls must squash and stretch and show realistic movement

When handing in anything from Adobe Animate, ALWAYS HAND IN 2 FILES:

.fla (project file.

this allows me to see your work

.gif (file>export>.gif (uncheck transparency

this allows me to see your finished animation

Motion vs. Classic Tween: CLICK TO VIEW

Animation FINAL

SCENE PROJECT

You will now demonstrate a scene using Motion and Classic Tweens. I would like to see a quality movie over lifeless quantity so this will depend on your approach (tweens vs Frame by Frame animation).

BE CREATIVE. Think about how you can change scenes by changing the backgrounds or "ZOOM IN"/Change the shot type.

Include the techniques you have learned in class to develop a short animation scene. The requirements for this scene are open to your imagination. I am looking for application of the skills you have demonstrated to bring to life an idea of your own.

PLEASE DISCUSS YOUR IDEA with Mr. Summerfield before getting started.

Choose an idea that you can complete by the end of the day on Monday 27th!

THE EXAMPLES BWLOE ARE A LEVEL 4- (80)

Your mark is out of 100

0-50 remediate, Skills not demonstrated adequately to meet minimum achievement

50-60 Limited Skills demonstrated, attempt is there but no follow through

61-70 Some Skills demonstrated (with help)

71-79 Considerable Skills demonstrated (little help)

80-89 Skills demonstrated meets standards and begins to exceeds expectations (little to no help)

90-100 Meets and surpasses standards, went above and beyond, explored other tools (no help required/can teach the skills to others)

More Tween PRACTICE - Shape Tween, Classic Tween

1. We are going to continue on with our tweening by looking at the shape tween. Both will be important when creating more animations in class.

Let's start with a small ball of one colour. Hold shift to keep it fairly round. Right click on it and create a shape tween. The timeline will populate to 30, but you can drag it for as many frames as you like. I'm going to drag out to 100.

2. Next let's delete the ball in the last frame and replace it with a rectangle in a different colour on another place on the canvas. We should now have this.

3. We are now going to insert another shape tween. Add a layer. Add a blank keyframe at frame 51. Copy paste the red square from frame 50 on layer one to frame 51 on layer 2. (CTRL + Shift + V pastes it in exact place). Now right click and add another shape tween. This time I had to go to frame 100 and create a blank keyframe after the keyframe with the shape tween in it. I used the Polygon tool and turned it into a star using the properties on my right.

We should have this now:

4. Now we are going to use a classic tween to move it and make it slowly fade from sight. Let's insert a new layer some more blank keyframes at 101. Let's make frames 102 to 200 a blank keyframe. This should leave us with a keyframe on 101 that is blank to 200.

On frame 101 lets insert a classic tween. At this point animate will ask to convert it to a symbol (shape tweens don't need to be symbols, wild hey?) click, okay.

Now go to frame 200 and click the drop down under colour effects. Choose alpha and slide the slider to 0. This will make the shape slowly disappear throughout the tween.

Here is what we have now:

5. Throw one last tween in for good measure and hand in your results. You now know all the tweens.

Page updated

Report abuse