TIMELINE II in Animate

 VICTREE MEDIA 16

PART B

SUMMARY

     Takzi's lesson on animation focuses on layers, including Keyframes, Frames, Blank keyframes, and Potential Frames. The timeline is a crucial component in creating a smooth and engaging animation. It can be adjusted by detaching it from the document window, docking it to another panel, or hiding it. Layer sizes can be adjusted using the slider bar, and the timeline can be docked to other panels. Potential frames are frames that are budding to become a frame or keyframe. The timeline is the first layer, with all frames of light gray and dark gray after every five frames being potential. Potential frames can be converted to keyframes or blank keyframes by clicking "Converting to." Keyframes are added to keep the same scene, allowing manipulation without affecting other frames or keyframes. Frames increase the duration of a keyframe, creating a solid space. A blank keyframe is created when auto-framing is off, allowing for manipulation without affecting frame numbers 1 or 72. To apply keyframes to a real animation, start with a blank keyframe and clear out everything on the stage and timeline.

 

     If you want to know in detail about the frames and keyframes, read them down below:
 

Introduction:

     Part one of this might have looked like a clickbait, but before knowing how layer works for animation, you need to know what exactly layers are. Then, only you will understand the difference between keyframes and frames. So, in this lesson, you will learn about Keyframes, Frames, Blank keyframes, and Potential Frames.

Understanding Timeline:

     Time header has been made richer by surfacing extra functionalities up front, and you can click on camera button to enable or disable camera. Layer Depth, as the name suggests, creates a layer depth panel and allows you to modify the depth of active layer provided in the list, and layer parenting view displays the parenting hierarchy of layers. By default, the timeline appears below the main document window, and to change its position, like I said in workspace topic, detach the timeline from the document window and float it into its own window. You can dock it to any other panel of your choice, and you can also hide the timeline. To change number of layers and frames that are visible, resize the timeline, which is the main motive why I buy double bezel-less screen monitors. A blue bar appears to incident where the timeline will dock, and edit multiple frames allow you to view and edit contents in multiple frames within the selected ranges. To change the size of layer, select large, medium, or short (The large frame-width setting is useful for viewing the details of sound waveform). Click and hold the left-mouse button on the edit multiple frames to view and edit all frames. To display the frame view pop-up menu, click frame view in the upper right corner of the timeline, and select preview to display template/thumbnail of the content of each frame. Select header top or header bottom respectively to move the timeline control to the top or bottom, and you can pin/color a layer for easy recognition by clicking on the dot that appears just after the layer name. When enabled, an underline with the layer outline color appears across the layer for a quick layer identification.

USES

1) Click frame view in the upper-right corner of the Timeline.

2) Click to disable or enable the Edit Multiple Frames mode.

3) To dock an unlocked timeline to other panels, Press Ctrl while you drag.

4) To zoom in or zoom out the timeline, use the timeline resize view slider bar.

5) To prevent the timeline from docking to other panels, press Ctrl while you drag.

6) Click the three dash menu in top of the timeline header -> Short, Medium or Tall.

7) Drag the bar separating the layer names and the frames portions of the timeline.

8) Double-click the layer' icon (The icon to the left of the layer name) in the timeline.

9) Right-click the layer name -> Modify -> Timeline -> Layer Properties -> Select Layer height -> Click "Ok".

10) To move the timeline when it is docked to the document window, drag the title bar to the location you choose.

11) You can toggle from the default "Multi-layer view" to a current layer view by clicking the "Layer view" icon on the upper-left.

12) To view extra layers when the timeline contains more layers than can be display, use the scroll bars on the right side of the timeline.

Frames and Potential Frames:

     This lesson is the most important, something that creates base in an animation, and I am going to break down to you exactly how to read the Animate CC timeline. This is not the most wonderful, elegant stuff in the world, and through out this course, as you have recognized by now, I do not show anything ready-made, instead I teach it in very much the same way I would, as if I am not taking a class but you come next to me at work and say, 'Hey Takzi! What can you tell me about keyframes in Adobe Flash/Animate.'

     I would open up a blank file (FLA), draw some crappy drawings on the screen, and really try to explain it to you of what is happening in every keyframe and frame. So, I am walking you through it how I would do for anyone else regardless of their age, and yes! I have instruction notes but that is just for me to know what to talk about next, so that confusions cannot occur. I am hoping to just narrow it down, the exact things you need to know about these concepts, and potential frames are those frames that are not part of the current layer. The reason they are called potential is because they are budding to become your frame or your keyframe, and whole point of this lesson number 16 is to unravel this concept to you. I am going to guide you through, so that when you get into doing some real animation, you have no trouble. In the next lesson you will be aware exactly how to read the timeline, and you are going to feel comfortable.

 

    First, I want to draw your attention to the timeline, and there is nothing on the timeline in your first layer (One). All frames of light gray and dark gray after every five frames are all potential. While, frames are used to show that the drawing in a keyframe before are staying static for this span, and for example, if you draw a car in your 5th number and you add a frame in 10th, then the car drawing will be lasting for 5 frames/numbers.

USES

1) Whenever you create a new document, you start off with the blank keyframe.

2) It is kind of hard to see what is going on , so I am just going to increase my frame size by scrolling the slider forward.

Keyframes and Blank Keyframes:

     In the start, when you only have 1 blank keyframe, you are stuck there, you cannot scrub the play-head forward and backward at all. Blank keyframe indicates that the stage is completely empty in the frame of the layer, and while, keyframe is the opposite. Keyframe informs you that there is something on the stage in the frame of the layer, and they say, "Converting to" because of the fact that clicking it converts potential frames into keyframes or blank keyframes.

 

     There are 3 ways to convert to keyframe or blank keyframe, and what you can do first is just extend the amount of time that you have play with, while we am doing this little class. By default, you have frame rates of 30fps {Frames per second}, which means Flash/Animate in that frame rate, is flipping the page 30 times every second, but you will change this to 24fps (Frames per second), as animators around the world animate in that frame rate. Let's just say, I want a 3 seconds long animation of a bouncing ball, and I am going to go out to frame number 72 and I want to add frames to my document.

     Keep in mind, the so-called "Potential frames" are likely to become, are yet not in your movie or in your document, and by adding frames, you can drag freely from frame 1 all the way to frame 72. You can draw in any one of these frames, you can add keyframes there but for now, you have this little room; 3 seconds worth of animation or time that you can work with, and by just adding a frame, you will be able to notice that the first frame is a stroked circle with a hollow circle. This means in frame 1, you have what you are calling a blank keyframe, and you will also notice, it is subtle but this span of frames is no longer light and dark gray, alternating every 5th frame; it is just 1 solid dark gray color. This span of frames are just referring to as regular frame or frames, and where you see the hollow circle, which is a blank keyframe where you have the solid-colored gray frames, they are just regular frames and then you have a tiny rectangle that is also hollow. This marks the end of a span of frames; visually it is very useless and it has no name. If you have to create in the end time, I would call it "Ender", and it is not any different in frame 72 or frame 70, they are all just regular frames, it is just visual indicator that the current span is coming to an end; that's all folks it does.

     Now, as you have established that you have 72 frames in your animation, and the 1st frame is a blank keyframe, you will go back to frame 1, and you will take the shape like circle. After that, you are going to draw it on the stage. It is hard to tell because the play-head is going through that frame, but you will go forward and now, you will see that you have a black circle and that means, you have a keyframe with some content on the stage, so let me just select this and I am going to delete it. You will see now you go back to the hollow circle, so there is a blank keyframe, and as soon as I put something else: such as a rectangle, on the stage, the tiny circle gets filled in, and so you have your keyframe again. So, I know in frame 1, which is filled-in circle, there is some drawing on the stage, and let us say in frame 72, you want rectangle from the right over to the left side of the stage. So you may be thinking, 'In frame 30, the shape is on the right when you go back to frame 1, it should be on the left?'

     That is not how the framing works, when auto-framing is off, and let us undo, until the rectangle moves back. When you are in frame number 1, with nothing selected at all, and you go to frame 72, concentrate that the span of keyframes get highlighted, if you select the object. This is a way for Flash/Adobe Animate to tell you, 'Hey! You know what. Even when your play-head is in frame 72, you are actually selecting the particular object on frame number 1.'

     So, the important rule again is that you can only select objects in a keyframe, so even though the play-head is in the last frame, the keyframe with the rectangle is way back in frame 1, and this is the mistake that all beginners will probably make about 1,000 times, even after they fully grasp of why does it work that way. Now, your question to me could be, ''Well Takzicution! Did you at the beginning of your animation made these mistakes?'

     'Woh hoho! Don't even get me started on that. YES!!! There was no auto-framing feature back then; before Adobe Animate 2020 and above, and so I would make it change and say "why is it not animating. Oh, biscuits! Forgot to add a keyframe." Although, my uncle had already explained to me.'

 

     The best part is that I have learnt through making errors and I do not use auto-framing even today, and I prefer adding all keyframes manually. I would suggest you to do the same, but I still do this same mistake to this day [Rarely], and if you want to move the rectangle [Imagining you are following my advice and have switched off the auto-framing feature] or do anything to it at all in frame 72, what you need to do is insert a keyframe or convert a frame into keyframe, first.

 

     Now, you will see that you get a solid circle on the last frame, and you can move your shape to the other side. As you go to frame 1, the rectangle is to the left and in the final frame, something else has happened. Do not forget that blank keyframe is added when you want to change the scene, not the top scene that I am talking about, and for instance, you want to animate "a man opening a door and entering the house": the opening of the door will be animated, then as the look of the environment changes, you can use blank keyframe.

     While, like with the rectangle, keyframes are added because you want to keep the same scene, and if you want to animate a man climbing stairs like a mud, from the door, you will add keyframes until the walking is complete. The rectangle anyways has moved over to the right and that brings as to the third rule of keyframes that you should comprehend. We can do things to objects in a keyframe without affecting other things in other frames or keyframes, and so basically, when you are in the 72 keyframe, you can manipulate the shape using Selection Tool or free transformation Tool, and not affect anything in frame number 1. Likewise in frame 1, you can draw anything on your shape and that is not going to alter anything in frame number 72. So, these keyframes sort of look down what is happening in that particular frame of that particular layer.

USES

1) Right-click on the potential frames -> Convert to keyframe/Blank keyframe, Right-click on the auto-keyframe icon or Use the shortcut.

2) Go to Insert -> Timeline -> Frames/Keyframes/Blank keyframes.

3) Place the play-head in frame seventy-two -> Select all the artwork -> Move it to the opposite side, if auto-framing is off.

Frames and Keyframes Intercourse:

     Frames are added to increase the duration of a keyframe, and the solid space of frames mean throughout the span of frames, objects from the previous keyframe are staying static for this time period, so basically you can scrub all the way from frame 1 to frame 71 and you know that nothing on the stage is going to change; it is all going to look the same. Another thing I should mention about keyframes are that when you craft a new keyframe, it creates an exact replica of everything that is on the stage in the previous frame, and so, keyframe 1 and keyframe 36 are identical.

     Now that you have a keyframe in frame 36, you can take all your drawings in the stage, you can move it in the center, add red-colored stars inside your shape,and these changes made are not going to affect everything in frame number 1 or frame 72. Let us continue with regular frames, they inform that nothing is going to change in a span of frames, and if you swipe all the way from frame number 36 to 71, all of the things on the stage stay exactly the same. When you get to the next keyframe, Flash/Animate tells you: "Hey! You know what, it is possible something on that frame is going to change."

     If auto-framing is off, and you go to frame 17, select the star and move it over to the center. Do note, you are actually selecting it in frame 1 because there is no keyframe on frame 17, so when you go back to frame 1, you do not want to be shocked that this star moved, and when in frame 36 you have a keyframe, it has your drawings in it. As you click on that frame, it apparently selects every objects in that frame and you can just press delete and get rid of it. As a result, you will see that you have a tiny hollow circle that means in this frame, you have a blank keyframe, and you can delete objects, without affecting anything on frame number 1, frame 17 and frame 72.

USES

1) To further explain this, I am going to go to the center frame (Thirty-Six) -> Right-click on the timeline -> Insert Keyframe or use the shortcut.

Practical Life Concepts:

     You have just talked about keyframes, what they are and how do they function. Now, you are going to apply them to a real animation, and before you can do crazy stuff like explosions, rain, walk cycle or burning fire, you are going to begin with the fundamental. You know me, I am all about the basics, and I want all my students and viewers/readers to learn the basics, so when you enter doing the amazing stuff later on, it is all second-nature. I do not have to go over it 100 times, and you have already done it. You can start up with a blank keyframe like I showed previously, since you cleared out everything on the stage and the timeline.

     You are going to take your brush tool and draw number 1 [Not of Kids Next Door cartoon], and what you are going to do is progressively reveal the number 1, 2, 3, 4 and 5 going across the stage. Right now, you only have 1 frame, so you cannot drag the play-head around anywhere because you only have potential frames (They are not in your animation, but has potential to be). Adding new keyframe replicates and is identical to the former keyframe. You can add number 1 [Not of KND cartoon] without affecting anything back in frame number 1, and so when you go to Frame 2, you have number 1 and 2. Draw a number 3 [Not of KND cartoon again], and moving forward, it is a waste of time, opening up this menu and find options, so it is time when you started using shortcut because you will be working with lots of frames, keyframes and blank keyframes. With shortcuts, you do not even have to click on the next frame, it will automatically create a new keyframe, and you are going to draw number 4. Without clicking anywhere on the timeline, you are going to create another keyframe, and now you get a new keyframe in frame number 5 and you are going to draw the number 5. In each one, you have a number (1, 2, 3, 4 and 5), and when you play this animation, you might note that it happens so instantaneously.

 

     That is because these frames are all right next to each other and at the frame rate of 24fps, the animation is displayed for literally a 20th of a second, which is no time at all. To play the first 5 frames, it is going to take a 10th of a second, so really there is no time at all for your brain to even really compute what is going on the stage, and you just see almost all numbers kind of appear all at once, even when there is a little bit of time between them. So if you want in a countdown, you are going to want to have some frames between each keyframe. To make these numbers their own independent appearance [Without any other number], you do the same process but instead of adding keyframes, you will add blank keyframe and then drawing the next number. The reason you are doing blank keyframe is because you want one number to appear at a time and if you make a keyframe, then you will need to erase every number, it will not remove the number. The animation is still rapid, son to fix it, we go to each keyframe and add some frames.

USES

1) Right-click on the next frame and click on insert keyframe or use the shortcut.

2) Just click and highlight frame number 2 -> Right-click and go to insert keyframe or use the shortcut.

3) What I am going to do is instead of "Press Insert frame" after right-clciking to get more space between keyframe two and three, or use the shortcut.

4) You can right-click -> Insert Frames but it will waste time and you will get tired doing it.

 

Please kindly like and comment below

if you like that and for more blogs like this

 © Copyright 2022 Takzicution™. All rights reserved.