Adobe Animate CC 2021 - beginner tutorial - part 01

so hello and welcome uh in this tutorial i would like to show you how to start with adobe animate cc 2021 uh so right now i have my adobe animate opened and depending on the version your animate can look little bit different for example i have here my recent projects and you are not going to have something like this but basically what we are looking for is a button which says create new and if you put whatever religion do not see anything like that you can go to the file and then there is option new but you should see something like this so we are going to click this and it is going to give us uh this kind of options and there are only few things in here which really matters uh this is width and height of the canvas and we can change this later on so this is fine then we have the frame rate it means like how many frames are going to be in one second right now it is set on 24 we can also change this later on and then we have all two options uh we have either option to choose html5 canvas or action script 3.0 and some people might think that actionscript is not useful anymore because actionscript produce flash files and html5 canvas produce html and since flash is not used anymore you can think that action script is not useful but the thing is that in both of these canvas you can create videos or you can create gifs and if you want to create video the actionscript canvas might be maybe better option because there are some additional features in actionscript document which are not in the html5 document but though we are going to be using html5 but i just want you to know that if you are not doing games and if you are not going to do anything interactive if you just want to create video or give action script is maybe a better option in here you can see that there are some pre-made options and if you click on this selected animation you can see that there are options for hd full hd 4k and by default it is set to action script because you are creating video the same is with the social this is for the social media and you can see also that there is action script because you are probably going to create some gif but then we have this game or education or ads or web and all of them has html5 canvas because this needs to be html so i think that uh we can go with something like this and i'm going to hit create so one of the plus pin that i would like to mention is that there is a possibility as i said depending on the version that your animate is going to look a little bit different for example in older versions this uh panel with the tools was on the right side and there might be also some other changes so if you go to the window and if you go down to the workspace there are options for the workspace and you can have some kind of different workspace but then we're going to be working on the essentials but for example if i choose this developer my animate is going to look completely different so just so i wanted to show you that there is this kind of option and then i have these essentials and one other thing is that all of these panels they are i would say movable so i can get these properties for example and get them away like this and if you accidentally mess up something you can go to the window you can go to the workspace and you can set reset essentials click yes and it is going to exit your panel so you do not need to worry that you are going to miss it somehow so now i want to show you as i said at the beginning that the width and height uh you can change it in here you can either drag and go to the right or to the left and it is going to change or you can just click and you can uh choose the number so i can go for example with 800 by 600 like so and the same way you can change the frame rate in here fps frame 5 seconds but i'm going to leave it as it is you can see right now that the background color is white and if you want to change this background color you can click on this stage and it is going to give you some option to choose the color if you want to some kind of specific color you can go to this color wheel just click and here you have options uh to choose any color that you want i can go with something which is almost white like so all right fine so as a interface of the adobe animate uh i think that it is pretty simple uh i would say that this software is much simpler than after effects for example but one thing additional uh is that you can create some kind of maybe games uh in here with the javascript so that make it a little bit more advanced in in some way but is the interface it's pretty simple on the left on the left side here we have these panels and we are going to be talking about or most of them at the bottom we have timeline and we are also going to discuss the timeline and in here we have some kind of properties and also that is the library that you can get like so uh one more thing uh before we will start to create some kind of graphic is that uh if you for whatever reason don't have this properties or the libraries or something you can go to the window and in the window you can get it for example this properties uh right now they are checked but what i can do is uncheck them like so right now it is it has disappeared and i can go back to the window and check the properties and they are going to appear alright so the first thing that we are going to do is we will get the shape tool it is this one and if you click and hold you are going to get some options and we would like to go with the rectangle so i have the rectangle and in here on the right side i have some kind of options i have an option to choose a fill color i have an option to choose a stroke right now it is set to napping and then we have some kind of additional options so i can click on the fill and again i can choose some color from here or i can go in here and choose some kind of specific color like this and i can click on the stroke and i can choose maybe a black color like this i can choose size of the stroke and so on so right now i'm going to draw so i'm just going to drag it like so and i'm going to create the rectangle oh if you are going to hold shift this is going to be proportional like this okay fine now what is little bit different than in other softwares like maybe photoshop or after effects is that if i click on the shape i am not going to select all of the shape i am just going to select the inner part so if i click and i am i'm going to move this i'm not going to select the stroke so i'm going to i will go back with ctrl z and if i want to select everything right now i have maybe three options one of them is double click if i double click i'm going to one more time or i'm going to select everything one more option is that you can select it like so and you are going to select everything or you can click on the layer uh layer one in here and it is also going to select everything but this would select everything that is going to be on the layer all right fine and if you want to select the stroke it is also not very uh common sense because if you just click once it is going to select only the part of the stroke and if you are going to double click on the stroke it is going to it is going to select everything all right fine uh one more option is that uh you can go ahead select everything like so and then you can go to the modify and you can choose group and right now it is going to be grouped together and you can move it together like so and if you want to ungroup it you can just click go to the modify and choose unloop like so okay so i'm going to select everything and i'm going to delete it so one more thing that i want to show you is that at the beginning uh we choose that we have some kind of wheel and then we have some kind of stroke but if i get rid of the stroke like this and i'm going to just have a feel and i'm going to create a fill like this i can hold shift to be proportional and now if i go to my selection tool and if i click i have no option to get the stroke all right and if you create a wheel without a stroke and you would like to get the stroke back what you need to do is go in here paint bucket tool click and hold and there is this ink battle tool so i am going to choose this ink button and this is going to give me an option to get the stroke back i can choose a color for example red and i'm going to click on the on the edge of the shape like this and there i have it okay the same thing is that if i get rid of the fill right now like so i am not going to give uh have an option to to have a feel all right on the same way that if i go ahead and get rid of the fill in here i can change the color like so and i'm going to do it like this again i have no option to get the fill and in this case if you want to get a fill you need to go to the paint bucket tool but choose this one and now i have an i can click and it is going to give me the fill and i can click one more time and i will have to fill and right now i can click on the fill and i can change the color to whatever i want like this okay fine i can get rid of them and one thing is that when you are going to be working in adobe animate at least i do it this way is that i create my graphics in illustrator or in the photoshop but sometimes i also need to use shapes and it is not good to know how the shapes behave one more thing is that if you are going to let me get rid of the stroke so i'm going to have only the feel and i'm going to create a shape like this and then i will change the color and i'm going to create uh one more shape and this shape is going to be like so do you know what is going to happen uh right now when i try to move this red shape it is going to cut the hole in the first shape and the same thing is that if i right now move this in here for example and i leave the mouse and i then leave it away it is going to cut i i don't know why it didn't cut into the first time but if i you put it like so and you click somewhere else it is going to cut so this can be uh good if you want to create something uh specific but you should be aware of something like this all right fine again i can i can get rid of that so right now we can get our stroke back like so we can make it smaller we can create shape like this and right now imagine that you would like to you would like to scale this or rotate it or do something so if i am going to highlight it i do not have any option i do not have option to rotate it i do not have option to scale it nothing you need to go to this second tool or free transform tool the shortcut is q and right now you can go ahead and rotate it like so you can scale it like this if you want to be proportional you are going to have to hold shift and if you uh hold or if you don't hold anything it is going to go from the center but if you if you hold out it will go from the corner okay from the from the opposite side like so okay uh there are similar things that i would like to show you with these shapes and then we can go to the to the pen tool so one of the things is that if you create the and let me get rid of the stroke because i do not want to have it if you create the shape like this and as i said if you are going to create a one more shape like this it is going to it is going to cut okay i will go back but if i am going to create new layer now i have only layer one and i am going to create layer 2 and on this layer 2 i am going to create the shape nothing is going to happen okay so one way how you can prevent this is to create new layer but i will delete the layer and i will show you one more thing so imagine that you are going to group this and let me let me actually go ahead and also add some stroke like this so i'm going to have something like this i'm going to highlight it go to the modify and choose group and then i will want to create one more shape like this it is also not going to cut but it is going to be below the the group shape like this so you would have to create this on the new layer or if i hit ctrl g to group also this one it would go on the top but by default it is going to be below the grooved layer so the shape is body like this i want to explain this little bit because it is a little bit different than in photoshop in illustrator and in after effects so like that uh so now very quickly i would like to show you uh the pen tool so here is the pen you can click and hold and very simply uh you are not going to have an option for the fill because with the pen you can create on the stroke and you can click like this and it is going to create a shape like so and if you create something like this then you can go to this uh paint bucket tool like so you can change the color of the fill and you can click inside and you are going to you are going to get the fill all right i can get rid of that again i will get the pen and if you click like so there is not going to be any curve and by the way if we are going to finish uh the drawing there is going to be a little a little wheel on the pen maybe you can see it so it is going to close it so right now if i am not holding any pink and i would go to some point of the same point that is this minus sign and if i click i'm going to get rid of that okay and if i'm going to hold alt and i'm going to drag or i'm going to have an option to do something like this and again i i will hold alt it is going to change the cursor and i'm going to drag and i will have to rotate it like so and i can do something like this all right now when we have these handles and if i go on the end of the handle and i'm going to hold alt i am going to be able to break it like so and again i will have to hold out and move it like so and if i want to get it all together again i can go on the point with the alt like so uh if you are going to hold ctrl or command on the mac you can move the points so i'm going to hold ctrl click on the point and i can move it like so all right and like this so i'm going to get rid of this one more time and what you can do is when you get the pen tool you can click and drag and if you are going to hold shift it is going to be straight like so like so and like this you can do something like so and if you click and hold on the pen you have an option to add anchor point so you can go over in here click and you can add some points like this then you can go and change it to the delete anchor points so in this case we are going in this case we are going to delete them and so on so like this so you do not need to hold alt you can choose this or convert entry point and you can do it without the alt or without option that's up to you one more thing that i want to show you and then we will slowly get to the timeline is that when you are going to get the pen tool and you are going to create the create the shape but you are not going to close it so it is not closed in this case there is no option to add a fill so if i go to the paint bucket tool and i am going to click nothing is going to happen because uh the the stroke uh need to be closed in order to be able to uh to add the feel so hopefully make sense and like that if i click on this on this rectangle i have some other options but i have this rectangle and then i have this option rectangle primitive so i'm going to choose this rectangle primitive and i'm going to draw something like this and on this rectangle primitive if i click i can move everything together so it is not going to be as a normal shape or you do not have to double click or if you double click then this is going to give you option to change it to the normal object but you can do something like this and also when you have this object like this you can set the the coordinate coordinate use for example to faulty and it is going to do it like so or i can go with something more like 80 i don't know but uh if you are going to work with the normal rectangle you have an option at the beginning to choose that you want to have for example 40 and i can do it like this but if i go ahead and choose that i want to have zero and i'm going to draw something like this then there is no option to change it later on so on these primitives you can change it later on and so on but on this one you you cannot change it and one more thing that i didn't show you so far is that if you go with the mouse on the edge of the shape you are going to have uh some something like this this curved line and you can hold and drag and you can create something like this okay so this is maybe cool for the drawing when you want to do something specific i don't know but you can do manipulation like this i can do it also with the stroke only or with the shape only like so and if you go on this primitive one there is no option to do it okay so this one cannot be edited you know in this particular way all right fine uh i can delete this so one more thing that we have here is the is the brush so in the brush you have an option to choose what kind of brush do you want uh i can go with normal one you can choose the the fill of the brush like so uh smoothing uh smoothing it's like if you are going to draw something like this uh it is going to smooth it little bit for you if i would set it to the zero or maybe you do not see it but it is a little bit uh it's not as smooth but you have something like this but i don't think that this is very very useful but that is that is something like this but as i said i usually do my drawings or my stuff in photoshop and illustrator alright so i think that it is time to go and start to do some kind of simple animation so i will go ahead the to the shape too i'm going to get the rectangle and i can get maybe green color and i would like to get rid of the stroke because i do not need to have it in there so i'm going to create a shape like this so right now on the timeline we have layer 1 and we have this black dot in here hopefully you can see it i will i will delete the the shape because i didn't show you uh when you have napping on the layer uh that is going to be this empty dot but as soon as you create something like so there is still nothing but if i leave the mouse that is going to be this black dot which means that there is a keyframe before it was only empty frame now it is keyframe and let me actually change the color because it's not very visible i guess so i can go with something like this okay fine so in in adobe animate if you want to if you want to animate something you will have to convert it to the symbol and to convert something to the symbol you need to click on the shape you need to go to the modify and choose convent too simple all that is this shortcut f8 like this and right now we can create some kind of name i'm going to choose blue shape for example like this and then we have our three options in here if i click on this arrow movie clip button or the graphic and unless you want to create some kind of button you are always going to use movie clips not always there is maybe some usage for the graphic but that is going to be maybe for other tutorial not for this one but the most of the time you are going to be using movie clip so i'm going to hit ok and right now if i click on the shape you can see in here that it is movie clip it has some kind of properties but we do not see the stuff that we saw before so right now we can't change the color and so on we can of course but uh not as not as simply so right now uh what i want to do is animate this from the left to the right so here on the timeline uh i have my frames i have my uh frame rate to be is set on 24 so here on the front 24 is one second on 48 is two seconds and so on so i can go maybe to prime 40 i will right click and i'm going to choose an option insert keyframe like so and on this keyframe while i am on the timeline on this keyframe i am going to move this like so and you can hold shift to stay on the on the same line and as this one so right now if i go on my timeline there is not going to be any movement in between so if you just create a keyframe you are going to have everything as it was on the first keyframe and then when he when it hits the new keyframe it will change the position and if you want to create an animation in between what you can do is click anywhere in between like so right click and there is this option create classic twin i have a shortcut in here but this is the shortcut that i created myself i can show it later on to you uh but it's probably without the shortcut and you have an option to create classic tween or to create motion pin and the classic twin is the older version of the animation and motion twin is like new version but i think that classic twins are sufficient enough so or so far we are going to be working with the classic twins later on we will talk about the motion pins so i will click this and right now i am going to have an uh movement in between like so so the animation goes from left to the right then what we can do is for example go to the frame 80 again right click and choose install keyframe one more time there is a shortcut for this installed keyframe and it is f6 so from now i am going to be using the f6 and on this new keyframe i can move this back again i am going to hold shift and i am going to put it somewhere here and one more time i will have to click anywhere in between right click and create classic twin like so all right so right now we have this movement from left to right and then back what i want to do now is go ahead and save this and i will explain to you why i want to save this so i will go to the file i'm going to hit save and i'm going to choose my location okay so here i am in my folder uh i can can call this to be intro production you can call it whatever you want and i'm going to hit save so right now i'm going to hit ctrl enter and it is going to open this in the browser or what you can do is go to the control and hit test but i always do ctrl enter so i am going to hit ctrl enter and this can take a few seconds and it is going to open this in the browser and by default this animation is going to be looping forever all right and now i will go to the to the place when i uh where i have my animate uh saved and uh when i saved my animate file i could show you before i can do it one more time i have only this animate file and this recovery file and now i have also html and js so this is html and javascript let me let me delete this like so and if i go in here and i will hit ctrl enter one more time this is going to test this in the browser and at the same time automatically it is going to publish my html and my js files in here okay and uh the thing is maybe some of you do not know but if you are going to create these animations like this it is going to be html5 so it is going to be this html file that we are going to get uh from the adobe animate and also some javascript but if i would like to open this animation right now i am i would have to double click or open this html file and i would have it the same way as when i was testing in adobe animate so i will close this and like this so right now imagine that we have this animating from left to right and back and now we would like to have some kind of uh some kind of space or where this is just staying on the place and then it is moving again so what i can do is go on to frame 100 for example right click and choose insert keyframe or as i said you can click f6 so right now what would happen ctrl enter is it is going to animate here then back and then it is going to stay for a few moments and then it is going to move few one more time and then it is going to be repeating forever this is not the best way if you if you have animation and then you want just uh the object to stay on the place it is good to not insult key frame but only insult the frame because imaging that accidentally i will click in here and i would move it like so okay and it would look like everything is fine it is going to stay on the place and then on the last frame we are going to have this glitch and i can show you like so it would be fine but then we would have something like that okay so oh we want to and actually i will show you oh i will get rid of the frames and then i will show you how you can do it remove frames so if you click f6 it is going to give you new keyframe and you have an option to move this or you can leave it as it is but is not good if you want to just stay this stay if it is not good if you only want this to stay on the place so i will go big and there is an option if i right click to insert frame so install keyframe is f6 insult frame is f5 and if i click this i have no option to change the position in here okay and this is better option if you do not want to if you do not want to move this and now uh imagine that you would like to get rid of these uh these frames so what you can do is highlight all of them and you can go beyond this is absolutely okay and you can right click and choose remove frames or you can see that the shortcut is shift f5 like so all right and right now imagine that uh you would like to add some additional key frame in here so i will click f6 and i'm going to move this down and i can go in here click f6 and also move this down so right now we are going to have an animation which goes like this okay and right now imagine that you change your mind and you do not want to uh you don't want to have this keyframe anymore so what you can do is right click and or clicky prime or you can see that there is the shortcut shift f6 so i'm going to click this button and this is going to get rid of the keyframe and the same way in here shift f6 and i'm going to get rid of the keyframe okay so oh we have four shortcut is in here f6 is going to give you keyframe f5 is going to give you only the frame shift f6 is going to get rid of the keyframes and shift f5 is going to get rid of the frames so for you to understand right now imagine that i will go to the frame 70 and i'm going to select everything like so and i will click shift f5 it is going to remove all of them and there are these dots which means that this is like incomplete i will go back a few times but if i click shift f6 it is not going to get rid of these frames it is going to get rid of this keyframe but the frames are going to stay on the place okay so hopefully this makes sense and i think that we can we can move on so imagine right now that i'm going to create one more shape so i will go to the to the rectangle and i am going to change the color and right now this is going to be orange for example and i will i will create new layer so like this and on this new layer i am going to create a shape like this and you can see that my timeline on the layer one i can rename this later on is 80 frames long and by default my new layer is going to be the same length i can go ahead and double click and change that this is blue and i can change that this is orange for example okay and right now what i can do is again click on the shape go to the modify convert to symbol i can say that this is orange shape and i will hit okay if i create these movie clips you can go ahead and go to the library and in the library you can find them and then later on from the library you could get them like so on the stage if you want uh this is a little bit good for the for the memory of the of your animation but uh that is a little bit more advanced topic okay fine so i will go back to the properties and what i can do is do the same animation uh f6 and i'm going to move this in here and f6 and i will move this back okay let me actually go back and imagine that you would like to have this keyframe the last one the same as the first one and there are a couple of ways how you can do it do this and one of the easiest way is just hold the alt or option probably on the make and drag it like so and it is going to duplicate the duplicate the key frame and you can leave it like this okay or if you are going to be duplicating keyframes or just moving key frames because you can just move the keyframe like so if you want there is an option that by accident you are going to go on the layer below and do something like this in this case just hit ctrl z go back and like so okay uh so right now you can see that we don't have this classic twin we do not have to have this we don't have this movement in between and on this first shape i show you that what you need to do is click anywhere in between right click and create classic twin okay i will go back because uh if you want it doesn't matter if you select only one frame or you select multiple frames it is going to have the same effect and that means that if you want to create classic twin on the multiple parts at the same time you can just do something like this and create classic twin and it is going to create classic twin for both of these you could have 10 of them selected at the same time and it would still work so right now i'm going to hit ctrl enter and we are going to have two shapes like this all right fine now imagine that one of these shapes is going to have longer timeline than the other one so imagine that uh this one i will hit f5 so i am just extending the extending timeline so blue is going to be extended like so and the orange i can extend to maybe 125 like this so right now what is going to happen is that they are going to be both in here then they are going to be staying then the blue is disappear blue will disappear orange will stay and then it is going to be looping one more time i will hit ctrl enter and you will see so we are going to have something like this then they are going to stop blue will disappear and then it is going to be it is going to be looping one more time and again if you want you can you can do something like this shift f5 and get rid of the frames and for example i can right now or duplicate this keyframe so this is goes from left to right and then back so i can get this one put it in here for example then get this one put it in here and uh this automatically sometimes create these classic twins uh you can if you want get rid of the classic twins by remove classic twins but we want to have classic twins and right now what is going to happen is one round of the animation is going to be with both of them and the second one is going to be only with the orange and i do not need to preview this because you probably know how this is going to look like so the next thing that i would like to show you uh are easings okay and for this one let me temporarily get rid of this orange one so i'm going to select the layer and i'm going to hit delete and if you are going to have an animation like this this animation is going to be linear so if i hit ctrl enter it means that it is going to be move it is going to be moving uh the same speed whole time okay so i will close this and if i click on this uh first keyframe i can go in here here is this edit easing this pen or pencil and i will click this and you are going to see that there is going to be this straight line and this is very simple graph on this bottom uh part we have the the key frames so you can see that from first one to frame 40 so you can see up here this is from freshman to the quality and in here we have the percent and here we have uh how many percent of the animations happened so if we are going to be on the 50 it means that it is in the it is in the middle if we are going to be on to 20 it means that it is somewhere here and on to 80 it is almost somewhere here okay and what we can do is click on here and do something like this okay and this means that the animation will be at the beginning very slow and you can see that on the frame 20 so in here in half of the animation only less than 20 percent i can do something like this so on the frame 20 in here only 20 percent of the animation will be will be done okay so it will take 20 frames and this blue shape will only move from here to maybe somewhere here and then it is going to accelerate and what we can do is do the same thing at the end and maybe the best thing uh to imagine this is imagine that you are going to drive a car and the car needs some time to accelerate so it will start slowly and it will accelerate and until it gets the point when it is in the full speed and then when you want to stop the car it is going to be decreasing the speed until you will stop so i'm going to hit save and apply okay and you can see that the movement is like so i am going to hit ctrl enter and you will see and back it is going to be in there and there you can see that it is slowly at the beginning then it will accelerate and then then decrease the speed again and what we can do is do the same thing for this one so i can click on this button go in here and do do the same thing like so so save and apply ctrl enter and we are going to have something like this okay i will close this and uh what i can do is create uh one more shape or i can go to the library actually because in the library i already have my movie clips so i can create a new layer get my orin shape in here and animate it so i can i can go to maybe frame 80 hit f6 and move it like so i can create classic twins and these times i will i will click on the easing and i am going to do something like this and this means that it is going to start very quickly and then it will it will slow down actually in the the whole animation of this orange one is going to be 80 frames and on the frame 10 the 60 percent of the animation will be done on the plane 20 80 percent of the animation so in one quarter of the time the the orange will be almost somewhere in here okay i'm going to hit ctrl enter hopefully we'll be able to i'll hit save and apply so now focus only on the orange one so it will start slow quickly and it will slow down like so okay so i think that this easings they are very good for some interesting animations and one thing is that uh you do not need to build your own easings if you click on on this my ease there are some pre-made easings so you have this easy in which means that it is going to start slowly and then it will accelerate and you have a different strength of this one and you have some other options uh then you have easy out so it is the same thing uh it will start quickly as the orange one and then it will slow down like so or you have easy in out which means that it will as the blue one go slowly accelerate and then again go slowly or you can create your custom one adobe animate is saving them for this project then they are going to be deleted but there are other ways how you can create your own custom ones but that's for a later topic so i'm going to i'm going to close this and i would like to show you one more thing and it's like you can create animations like this but you can also create something which is called a frame by frame animation so you can draw each frame by yourself so i will create new layer and i will get the shape and i can go with maybe a green one for this one so in the in the middle of them i'm going to do something like this and actually i will change the color a little bit because this is not very visible so i can go with something like this and again by default it is uh and the timeline of this one is the same length as the other one and let me change this to orange and this one is going to be green like so and on this green i can go on the second second frame click f6 and move it a little bit and i will go back and when you when you have a frame by frame animation you do not need to convert it to the symbol but i prefer to convert all of my animations to the symbol so what i am going to do is i will click on the shape i will click f8 or go to the modify and convert to symbol this one is going to be green shape for example i will click ok and i will go in here click f6 move it little bit then just click f6 and it will automatically go on the next frame and create new keyframe and move it and we can do something like this whatever and i'm just clicking f6 and i'm moving it around so i think that you got the point so oh it will be moving like so like crazy and then it will stop because i don't have time to do all of the all of the animation but i will hit ctrl enter and we are going to have something like this all right fine now one thing that i want to show you is that if you want to create your uh or if you create your animation and for this one actually actually i will do it like so i'm going to i'm going to delete the green and orange so i'm going to have only blue one like this and i'm going to duplicate this one more time so without i'm going to do something like this and something like this and i'm going to create classic twin so we are going to have it like so and now imagine that we have whole animation like this and we would like to make we would like to create this but we want this to happen faster so we would have to move this keyframe in here this keyframe in here this one and here and so on and then this one in here and then we would have to get rid of the animation or the the frames but this is that is this is very long process so i will go back couple of times and what you can do is select everything like so and if you selected everything you can go to the end and you do not need to hold anything no out no shift no option and just drag it like so and it is going to proportionally make the animation faster or you can do it like this and make it all slower so give it a little bit a little bit more space and the same thing or you can do all the frame by frame maybe i shouldn't delete my green one but i will get it from the library so new layer green shape from the library and very quickly i am going to click f6 and move it f6 move it like so a couple of times so i'm going to have something like this okay and what i can do is click on them and do something like this and right now uh this is not going to be animated every frame but it will be on the on some place and on the few frames later six or seven frames later depending on how we do it it will be moving like so okay so ctrl enter and it will be like this okay or what i can do it do it little bit faster so select everything and go like this and now it is going to be moving a little bit faster so these are the options that we have with the key frames but i will i will delete this one all right fine uh there is one more thing that i would like to show you and it is specific for adobe animate but you can have timelines in the timelines so for example this whole animation right now is 140 frames long but i can go ahead and double click on the shape and right now i am inside of the shape and you can see in here that i am in the scene one in the blue shape and if i click on the scene one i will go back to the main timeline so one more time watch we are on the scene one main timeline but i can double click on the shape it will get me inside of the shape and here inside of the shape i can go ahead and change the color or do whatever i want i can change it like so if i want and it would affect everything but that's not what i want so i will go back but uh my point is that you can uh double click and go inside the shape and in here you would have to convert this one more time to the symbol so f8 and i can call it blue shape in for example and i will click ok and in here for example i can create new key frame f6 hit q for the three transform tool and scale this like so and then without drag this keyframe in here like so and i can create classic twin so in here we are going to have this kind of animation which goes uh bigger and smaller and if i go back to my scene one uh it seems like uh there is nothing such that we just see a normal movement but if i click ctrl enter we are going to have uh something like this so the both timelines are doing its own job so uh this animation is looping every 140 frames and this inner one is looping every every 80 frames so maybe good thing if you would like to create a timeline in the timeline and make the the loop to be consistent is to have uh this i would go to 70 shift f5 because 17 is half of the 140 and that means that this timeline is going to loop once and the inner one is at the same time going to loop twice because when this is on the 80 they are going to get offset each time they are going to be repeating but this is pretty complex topic maybe one of the most complex beside the javascript in the adobe animate so i think the the model of this topic we are going to be discussing in discussing in the next parts of this tutorial all right fine so i think that uh this was uh enough for the for the first video uh there is plenty more things about the adobe animate and i am going to show you uh some of them in the part two and i will see how many parts of this tutorial i am going to create later on i also want to create some html5 games banners and so on so if you have any question or any suggestion or anything leave them in the comment if you are going to like this video or you are going to subscribe i am going to be very thankful it means a lot to me so thank you very much for watching uh you surely learned something congratulations and hopefully i will see you in some next tutorial take care good bye

Channel: MotionTuts

Views: 7,366

Keywords: Adobe Animate, Tutorial

Id: n8QZYI0Ve0k

Length: 56min 7sec (3367 seconds)

Published: Mon Jan 18 2021