MultiMedia Animation

BTV

Video & Film

Animation

Photography

Graphic Design

ISP

Adobe Animate

...

Photoshop Part A

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.