adobe animate cc 2019 getting started with basics tutorial - 1hour long (01)

so hello and welcome to this adobe animate CC 2019 tutorial I would like to go and show you this software what you can do with this software and how you can use it so Adobe animate is basically an animation software which allow you to create html5 animation some interactivity and so on previously it was flesh but flesh is dead and now this is animate and it is for html5 timox so when you open animate you have a few options this is since 2019 version and you can choose whether you want to make some ads for example you have these sizes for advanced banners but basically what is important is to choose html5 canvas because there is some other options there is ActionScript and some other for the Android and so on options but we would like to work with html5 canvas so there is an option to set your width and height of your kind of us but we can change this very easily later on okay so all you need to do is just hit create okay so here we are and this software is basically made of four parts okay first part is this view viewport here is all over graphics and all of your animations you can see it in there then we have tools this is very similar to photoshop or illustrator or any other similar softwares then we have some properties which we are going to be changing in here and at the bottom we have a timeline of course you can play create some changes you can go to window to workspaces and choose some other workspace but I will keep this in these essentials okay alright so first thing is that I would like to set my background in illustrate or if you want to create background you usually create a shape and that is your background in the animate we have built in option and it is this stage so I will click and here I have some swatches and I can choose my color or I can in the right top corner go to this icon and now I can pick specific colors that I want and you can use this hue saturation brightness or LGB mode and I prefer this this one hue saturation brightness and I will set it to very slight blue it's like I do not want to have it white okay so the next thing is that if you want to change your width and height here is the option I said that you can very easily change it so I will change it to 500 by 500 for example okay now before we even create any kind of shape or anything I just want to show you how you can move around so if you want to move around you need to hold space and then with your mouse you can go like this if you go away somehow like this and you do not know where is your stage that is this very useful icon in here and it is center stage so if you click on this icon you will get the center if you want to zoom in and out all you need to do is hold ctrl and use your mouse wheel and you go zoom in and out okay next thing that we have is this frame per second and by default it is set to 24 but you can change it to any frame per second that you want one thing that may be cool about this 24 is that it is very easily divided and you can make some loop animations so if you have 24 frames long some animation and you have other animation which is 12 frames long and other which is 6 and other which is 3 you can make beautiful loops or with your animations with your banners but you can set this frame per frame per second as you want okay so first thing that we are going to be doing is the shape so I will go to my rectangle tool and when I click on my rectangle I have two options I have option to choose my fill and I have option to choose my stroke and the same as with the background if I click on my feel I can choose my color from the swatches or I can choose some specific color okay for example this kind of right and for now I will skip the stroke and I will just draw some rectangle one thing that I want you to notice is at the bottom we have a layer layer one which is so far empty and there is this empty dot in here as soon as I draw something this dot will be black so you can see okay it is already black if I hold shift I will draw this proportionally if I do not hold shift I will create any shape as I want okay now if I go to my selection tool I can move this around if I go to my free transform tool which is this and shortcut askew I can scale this I am holding shift so I'm scaling disproportionally I can rotate it with shift by 90 degrees I can scale it like this and now I'm not holding anything if I do not hold anything it will scale on the left and on the right side the same amount and if I hold alt on the windows I don't I'm not sure on the make I will stretch it like this okay cool now I will delete this one and I will create one more but right now I will also go to my stroke so just click on the stroke choose any cards that you want I will go with maybe black here I can adjust how many pixels my stroke is going to help how wide is going to be I can choose for example five okay and I can draw it okay like this okay so one pin right now which may be a little bit confusing but is also useful is that if right now I go to my selection tool and I click on my shape I will only highlight my field and if I try to move this I am moving only my field ok if I want to select everything I need to double click on this shape ok so if I click once I will select only Phil if I double click I will select everything with the strokes it is even more confusing or more funny because if I click on the stroke I will select only one part of the stroke and I will move only one part of the stroke I am going to control Z back and if I double click I will select all of the stroke ok so if this is working like this so what can we do if we want to or you have one more option to select everything and it's like this ok but this is not the best way because you can easily select something that you didn't want to select all right so what can we do about this basically we can group these together and then you can just click once and it will behave like one shape ok so how can we group this together first of all you need to highlight everything so just double click then go to modify and at the bottom you have this option to group it control shortcut is ctrl G so you can use this shortcut is similar to it's the same as in the illustrator for example ok so right now this is grouped and we can move it move it as one shape but we have lost our options to change the color or changes or anything like that and if we want to go to these options again all we need to do is double click on this shape and now we are in the scene and in the group if I click back on the scene I am where I was anyway double click notice in here I have seen and now I have seen and grouped so I am inside of the group and in this group I can right now go and change the color of my shape I can change the stroke I had I double clicked on the stroke and I can change it to the blue color and now I want to go back to my scene and there are two options to go back to the scene eat them you can double click somewhere else or you can click on the scene okay I will just double click somewhere and I am beg in my scene okay cool hope you understand this so now I will scale this down I will use shortcut Q which is this very transform tool and I will hold shift and I will transfer I will scale it like this okay and I will just show you that this oval tool is very similar so I will go to my oval tool I will choose sound fill I will choose some background and I will I can draw this right now and you can see that I have an oval with the stroke okay I really do not like this color so I would like to change the stroke and you can remember that if you want to select stroke we need to double click on the stroke okay but when we have this ellipse tool or this how it is called oval tool we need on it all we need is to click only once on the stroke and it will select all of the stroke but if we have a rectangle and we click only once this is this is glue but if we click only once we will select only one part and the reason is that in this ellipse the stroke is continuingly going but in this rectangle it is divided okay it is divided by these corners so sometimes I just want you to be ever off you can think that you have selected all of the stroke but you didn't so it's always best idea to double click to make sure that you selected all of the stroke so hopefully you get it and we can move on so we have grouped these together and now I can group this one together so I will select it like this I am careful to not select this one and I will use my shortcut ctrl G and now I have grouped this together so now if I go to this group and I will double click I do not have an option to change my ellipse and I can go back I will click just to the scene and if I go to my mobile tool now I do not have option to manipulate with this one but I can change for example this stroke and I will change my color to maybe black like this okay and even what I can do I can highlight both of them and I can hit ctrl G which means that I have grouped them together and now I can move them together I can hit Q which is free transform tool and I can for example scale them together and now we were going to go and change something about them for example color I need to double click to get to the first group and in this first group they are just grouped separately together and if I want to go inside this group I need to again double-click and I am I am inside my rectangle ok and now we were going to go back if I double click it will get me only one group back ok imagine that you can have 6 7 groups in here and if I double click somewhere I only got one group back and if I double click again I got another group back ok but if I click on my seen on any of my groups I will get to them if I click on this group I am in that group if I click on my scene I am inside the scene okay so hopefully you understand this one and we can move or go and we can move on again ok so now I will show you how you can ungroup your artwork so just go to the modify and hit ungroup this option is available only when you have grouped something and shortcut is ctrl shift G which is same as into illustrator so I will ungroup this so now I have my rectangle and my oval separately in I can move on so next thing that I would like to show you is a pain tool and if I go in here here is a pen and in the pen you do not have an option to choose your field because you are just creating your stroke but you can change the color of the stroke for example I want to have a blue stroke and I can start to draw okay if you just click and you don't drag you will just get this point and you you have it like this if you want to finish and you will came in here you can see a little circle next to my pen and just could you can finish your finish your shape okay but now if I want to create a feel how can I create a feel okay I will go to my selection tool and I can start to click on my stroke but I do not have an option to to make my field so what I need to do or what you need to do is to go to this one tool it is called paint bucket tool and now you can choose your color I will go with a no yellow and just click anywhere inside of your shape okay and there you have it and if you right now for example do not want a stroke all you need to do is double click on the stroke and you can get rid of the stroke like this okay which brings us to one more weird funny thing and it is if I get rid of the stroke and it doesn't matter whether it is shape created by pen or whether it is now a rectangle like this if I create a shape which doesn't have a stroke or if I delete a stroke I do not have an option to go and create a stroke so what I need to do if I have a shape and I do not have a stroke is either to recreate the shape which is not the best idea or go this tool which is right below my paint bucket tool and you can see a little stroke in here and if I click on this tool even I have an option at the bottom to choose a color of my stroke so for example I can go with red and now all I need to do is click on the edge of my shape so like this and I will have a stroke and I can click on my rectangle and I will have a stroke and again I can work with that okay so now what I can do is select everything and just hit delete okay okay so one more time very quickly I will create a shape this shape is going to have a fill and a stroke I will draw it like this if I click I still like the only fill if I double click I will select everything if I click on a stroke I select only one part of the stroke if I double click on the stalk I have selected all of the stroke if I get rid of the stroke I can use this tool to get my stroke back like this if I create a shape with the pen tool like this and I will go to my paint bucket tool I can choose my fill and I can click in here and I can work with it okay so just a reminder and we can continue with the pen all right so back to the pen so as I said if you just create something like this you will have a straight line but if you click and hold you will have a curved line okay like this and if you are click and hold shift you will be horizontally and vertically perfectly aligned okay so this is how you can use pen okay and again if you want to feel your artwork all you need to do is go to this paint bucket and click in here change the color click in here change the color click in here and if I do not want two strokes I will double click on them and I will get rid of them like this okay so funny shapes I will get rid of them and we will be continuing okay so the next thing before we start to work with layers and animation and timeline is text text is very simple and it's almost the same as in Illustrator or Photoshop or any other software even same as in the Microsoft world so who just healed on the text and please do you have an option to choose static text or dynamic text and this is dynamic text is for JavaScript if you want to write the own manipulate text but if you are going to be doing only animations you just use static text then we have a font style the font or font size color and some aligning to the left to the middle to the right we have letter spacing we have line spacing and some other margins and so on so I will change the color to the black and I will just type 10 Q for watching okay and I will make it like this okay all right so now you can change your font size you can change your color you can change your letter spacing you can change your line spacing like this you can align it or to the left to the middle to the right and I will align it to the middle okay so one thing that you should be ever of is that if you use this free transform tool and you will scale this down it is not going to be scaling down your pixels so you can get really confused because now I will scale it down but it is still 57 points or pixels okay so just be aware of this one okay and now I didn't show you so far I have alignment takes to the center but I have aligned it to the center to another text but if I want to align anything perfectly to the center of my stage I need to go to one of these tools this align just go here and you can align it to the left to the middle or to the right or to the top middle bottom so this is where you can align your artwork all right so the next thing that I would like to talk about is the layers and layers are very important and right now I will show you so you can see that we have only one layer it is layer one and it is empty so far so I will go ahead and draw some rectangle okay cool and now if I draw another rectangle or ellipse and I am still inside of this layer guess what is going to happen something that you are probably not going to expect but now I will draw an ellipse like this okay and everything looks fine but if I now move this ellipse it has cut my rectangle okay so one solution for this might be if you are still in one layer that you will create your shape like this then you will group your shape you will group your shape then you will create another shape and it is not going to cut but it is going to be below so it is still not the best way okay but at least they are not cutting each other and I can group this one and if I group this one it is on the top of the blue okay but if you want to have everything in a good way it's good to have separate layers for separate artwork and we as I said are going to be importing new stations from illustrator and we will have each illustration in a separate layer okay so if I want to right now create a separate layer I will just hit this new layer and now I have two layers I have layer one and I have layer two and I can see the layer two is empty right now because there is an empty dot inside of that okay so I will delete this one because it is grouped or I could just ungroup that but I will I'm on the label and I will draw some shape and then I go to ellipse tool and if I stay on a Leila bond and I will draw it will cut but if I go to layer two and I will draw something everything is alright because this is on a layer two and this is on layer 1 okay and now we can see that the layer two has also this black dot because there is something in there okay and you can create as much layers as you want if you create a layer it's empty and then you can draw something in there if you want to rename your layers just double click and you can change the name okay cool okay so we want to delete your layer just click on the layer and hit this delete okay and one more time but one thing is that if you are on the layer and I hit delete on my keyboard I will just delete an artwork which is on the layer but I will not delete the layer okay watch I hit delete I deleted the artwork but I didn't delete the layer there is no way how I can delete layers without clicking to delete okay so it what occurs like this oh one more thing is that if I create a shape like this and I will create one more shape and I am NOT going to Intel check them I will create one more shape and then I will create one more shape and I know that we are just playing right now with the shapes but later on we will be using normal graphics okay so we have one shape second shape and last shape and I can highlight all of them I can right click and I can hit this distribute two layers okay so I will hit distribute two layers and it made every ant work to the separate layer in it the left one layer which is empty and right now I am not really sure but I guess that it was like all of these artworks were in one layer in this layer well one and when we distribute two layers it distributed to the new layers and in the left the layer one empty okay so now I'm actually sure that it disease what happened okay so I can delete my layer one and if I want I can rename this but I'm not going to do that alright so I think that we are ready to start to work with some animations so right now what I want you to do is you to go and save your artwork because so far we didn't save anything because we were playing with basic shapes and it wasn't important but right now we want to save so just hit control s then inside of your computer go anywhere where you want and save it I have a holder in here it is introduction to animate number one and I will call this just intro and we'll save it okay so right now what we did we only save the animate project so if I open my folder you can see that I have this intro dot Fla which is flesh but right now it is animate okay and now what do I want to do is I want to export my HTML and JavaScript and I need to set up my export location so I can either go and create of badram hide it right in here or I can go to file publish settings there are a lot of settings in here which we will cover later on but for now just click on this icon output name okay in the basics then go to the place where you saved your flash file so in my case it is in here I will create a folder for now I will call this folder export it I will go inside and you can either keep this name in Road ojs or I usually call this one index ok and I hope I will hit save ok so right now if I go to my folder you can see that I have my flash file and I have my exported folder but if I open my folder it is empty that is nothing in there so so far we only set a publish setting okay in here we set publish setting but we didn't publish so if you want to publish you go to file and hit this publish okay and now when you published you will you can go to your folder and you will see that inside of this exported folder you can see index dot HTML and some JavaScript ok so and then you can open these index we will do this later on because so far we didn't do anything but if I if I open it it will just open empty browser but later on it will open our animations or anything like that all right so now we are led to create our plus animation so basically I will just change my stage and I will again choose some very slightly blue color so I do not have a white background and then I will go and create a rectangle I will change the color and the color is going to be green for example and I will draw some rectangle like this okay oh I want to align my rectangle to the middle so I will align it like this and now it is in the middle okay cool you can see that we have layered one here is a black dot which means that it's something and now I want to convert these to the symbol and converting to the symbol means that if I convert something to symbol I am able to animate it okay so every time you are going to animate something and it doesn't matter whether it is illustration but it is photo or anything like that whether it is text you always help to go and create a symbol okay so there are two ways one quick one way is go to modify and convert to symbol or use the shortcut f8 okay so we will hit this convert to symbol and now we have an option to rename our symbol which I will so far keep the symbol one don't bother with naming right now and then we have type of symbol and we have basically three types of symbol we have movie clip we have button and we have graphic and most of most of the time we are going to be using this movie clip okay and sometimes we will use button but button is only for buttons and the graphic I never use it okay so just keep this movie clip and hit okay cool all right now you can see if you click on your shape that again the same as with grouping we lost our option to change the color or to change the stroke or anything like that and we have some new options okay so right now if you want to go and change your color you need to double-click and you are in the scene and in the symbol 1 and if you if you put specific name to our simple you would have your name in here ok so I will go back and when we have a symbol we have few options that we can do with this symbol ok press think this instance name it is not important for us right now but I will show you what it what it is ok this instant name is useful for JavaScript when you want to create some interactivity this is like classes or IDs in HTML but don't bother with this right now then we have this type it is movie clip then we can position this somewhere and I want to Center it at the stage and then we have some cool options so for example in this color effects I can open it and I have for example alpha which is opacity transparency and I can animate this I have maybe some brightness and so on okay I want to put this to 0 and ok so right now I have only one keyframe in here and I would like to create another keyframe somewhere on my timeline ok so for example I can go to frame 14 in here I will right-click and I have an option to insult keyframe ok you have more options and this may be a little bit confusing but I will try to cover and explain the differences you have insert prime insert keyframe or insult black keyframe ok but we are going to be inserting keyframe so hit insert keyframe the shortcut is f6 and this is very important shortcut but right now we have our first keyframe in here and add a second keyframe on the frame 40 okay and what do I want to do at the first keyframe I want my artwork to be at the bottom and then I want it to animate to the top okay so I will hold shift and I am on the frame one and I will drag this to the bottom like this out of my stage okay and one thing that I want to mention is everything that is going to be outside of your stage is not going to be visible in the browser okay when we animate this in it will look like it is coming from the bottom from the nowhere but if I would keep it like this without animation this wouldn't be displayed on my browser okay so right now we have our animation but this there is no smooth animation because I will press keyframe at the bottom and then all of the other frames are going to be at the bottom and then when we hit this last keyframe it will get to the top okay and we do not want this we do not we want to have some smooth animation happening between these two keyframes so what can we do is we can go anywhere between these two key prime then just right click and choose this create classic tween okay that is option to create motion tween which is no very similar but classic tweens are much more simple and we are going to be using these classic tweens so create classic tween and now we have other animation from the bottom to the top okay cool now I can show you we can go to add a folder where you exported your or HTML and JavaScript and I can open it okay and I opened it and nothing happened okay and the reason why nothing happened and I didn't realize it is I didn't publish it okay so we already set our publish settings we published that before but we didn't publish it right now so I will hit publish I had published my animation and now if I open my index you will see that we have this animation okay but this animation by default is going to be looping forever okay it will just go there and it will loop and loop and loop cool if you are going to be watching your animations you do not need to always go to your index and open open your index you have built-in option in the anime to preview your animation in the browser so again two ways one is to go to control and hit paste which will open a browser and make good animation and I never use this one because I use shortcut and the shortcut is ctrl enter okay cool so first thing that I really do not like is that my shape will just animate and then it will loop again in again I would like to I would like to help my shape in there for few more seconds so what can I do I can go to frame for example 120 in here and idiom I can right click and choose insert keyframe or I can use my shortcut very important shortcut and it is f6 so I will hit f6 I have a new keyframe and right now we have animation from first keyframe to the keyframe on the frame 14 and then we have just frames in here and these frames are not going to move so if right now I hit my test with ctrl enter I will have animation it will stay in there and then it will loop okay cool okay right now I would like to create a new layer and I would like to create a text on this layer okay and animate my text so I will hit this new layer and you can see that by default my layer layer 2 is our same length 120 primes is the first layer okay you can see that it is expanded up to here okay cool and I can even rename my layers so this is going to be just shape and this one is going to be text BAM okay and now I will go to my text I will change the color to black for example and I'm going to create my text one pink is that I would like to create my text in the middle of my shape but my shape at the first frame is at the bottom and then it will animate in here and it will stay in the same place so basically right now when I'm on my text one like error it doesn't matter whether I am on frame 10 or I am on frame 80 if I start to draw if I start to create my text I will get my keyframe on the first frame okay so hopefully you understand and I will type again hello and welcome okay I will make this little bit smaller and I will align it to the middle okay cool so remember as I said every time that we want to animate something we need to create a symbol okay so I will click on my text I will go to modify and I will hit I will hit convert to symbol or you can use the shortcut f8 okay so we have two important shortcuts one is f6 to create a new layer to create a new keyframe and f8 or to create a symbol so convert to symbol I can name this one this is going to be text one I will keep this to be a movie clip and I will hit OK cool so right now you can see that we have our text which is all time from frame 1 to frame 120 on the same place and then we have our shape ok so what do I want I do not want my hello and welcome to start from the beginning ok so I what I can do is I can click on my keyframe and I can just move it somewhere for example I can move it in here and now my first few key frames or pre first few frames are empty and then my text will appear ok cool and what do I want I would like to go maybe to frame 17 and I want to create a new keyframe so right now I will use my shortcut and I will just hit f6 ok and now I have one keyframe on frame on frame 30 and one frame on frame 70 ok and in this keyframe I want my text to be at the left so I will hold my shift and move it to the left and again what we have right now is all of my frames are going to be at the left hopefully you can see it and then when we hit frame 70 it will move to the middle and if we want to create smooth animation between these two I need to click anywhere between I can even highlight more frames it doesn't matter and I can choose create classic tween ok and now we have animation of the shape going up and then we have animation of the text going like this ok cool and then we have few empty frames and then it will loop again and again and again so I will just save this and I will hit ctrl enter which will test my animation and you can see that we have our animation which is looping ok cool alright so right now I'm thinking whether I will show you easy firstly or I will show you how you can stop your animation and I will choose to show you firstly how you can stop your animation okay there are two ways one which is not going to work but I am going to show you anyway and the second which is going to work okay so Christine is that if you are going to look around the software you may think then in a file in published I think you have this option to loop timeline okay and if I uncheck this because it is checked by default and I hit OK you may think that okay this is going to be solution for looping the timeline but right now I save and if I hit control enter I have my animation then my animation will disappear and it is not looping again okay so what has happened basically and I am not really sure why this is happening I don't use this this way but at the beginning we have nothing in here and then we have our animation and when we chose in publish setting to do not a loop timeline strangely it will play our animation to the end and it will end on the frame one okay so I can show you if I am using shift and arrow if I move my keyframe no to here and I will start my animation like this you will see that if I paste right now it will end at the first frame okay so you can see that right now I have my animation then it is if you stay in there and you can see that it is on my first frame okay so this is not really useful for us so what we can do okay we can write some JavaScript to stop our animation okay and if you never have wrote any code don't worry this is going to be the easiest code possible that you ever wrote so what we what we need to do is to create a new layer okay right click on this layer at the bottom we have this option actions so if you click on these actions it will open our text editor in which you can write your JavaScript and all we are going to ride right now is as simple as write this dot stop and parentheses okay and you you can or you do not need put a semicolon is optional in JavaScript you do not need to put semicolons so only this dot stop okay so we are not going to be writing any more code right now I'm sorry if some of you are going to write the code but this is it only this dot stop and then with these two arrow I can get out of my code okay cool so right now you can see that my layer tree has little little a in here okay hopefully you can see it and it means that there is some action and it is from the ActionScript but now animate is built on JavaScript okay so what is going to happen right now if I publish something strange you can see that I had published and I didn't even get my animation okay and why is that it is because my action is on the first frame right now and at the first frame it is saying this stop and I do not want my animation to stop on the first frame so what I need to do is I need to get my action just drag it and put it at the end okay or you can put it wherever you want but it will stop your animation well this well this action is located okay cool so now if I hit control enter and I will publish you will see that we will have our animation and it will stop and it will not do loop again okay so this is the solution okay and make sure that your action I will rename it it will be code make sure always that your your code is on a separate layer and it is on the top of everything okay later on I will create tutorials about little JavaScript in animate but so far we are doing only these little code okay so right now if you for any reason want to go back to your action and change it maybe you made some mistake or anything all you need to do is right click hit actions and then you are back interactions and you can do anything you want and as soon as you are done just click on these arrows and it will close your actions or you can use shortcut and it is f9 okay and f9 will open your know you'll take the return so we have right now three important shortcuts with f it is f6 which will give you a keyframe f8 which will convert your graphic to the symbol + f9 which will open your text editor and I use these shortcuts theory okay cool so I said that I want to show you how you can stop your animation and then I am going to show you how you can use easing in your animations okay and what is easing easing basically means that by default our animations are linear and it means that they are moving the same speed all the time but usually objects in the real world they don't move Ranieri for example when you have a ball and you will drop a ball to the floor it will be accelerating okay because of the gravitation or when you are going to drive a car for example we are driving only a few hundred meters or you will start from zero then you will be accelerating then you will get your constant speed and then at the end you will be decreasing your speed okay so hopefully it makes sense if not you will get this later okay so I will click on my keyframe when I pressed keep them on my shape and then is there is this option classic is and next to my classic is I have this edit easing z' okay so I can click on my edit easing and I will help my crap in here and you can see that this graph is linear and don't worry this is not like mathematics this is not physics this is very simple okay so don't worry and right now you can see that it is linear and at the bottom we have our timeline our frames so this is frame 1 prime 5 prime 20 and so on and in here we have how many percent of our animation has happened ok so for example if my I will close it close this for now my animation starts in here and it will go in here so at the frame 20 it is located in the middle between these two points ok but if I go to my edit easing I can click on my frames I will get these handlers and I can move them like this for example okay and I will explain what these movements means okay so right now I said that in the beginning my animation is going to be very very very slow then it will speed up and then at the end it is going to be slow again okay and I will try to explain this little bit so you can see that here on the frame Tanner we do not even have ten percent of animation happened so we will move to this stand frame but these will move only very very slightly in distant frames and then from frame 15 to frame 25 it will go from maybe I don't know 16 percent to almost 80 percent so from from frame 15 to 10 25 almost all of our animation will happen and then at the end or maybe last 10 frames only last few move last few pixels or centimeters will be moving okay so I'm not really sure if you understand it but hopefully yes and I will show you I will hit save and apply and I will hit control and tell and you will see that it was slow it was moving slowly at the beginning then I will refresh it what I will I will go like this for now I will get rid of my code okay this code and I will delete all of the layer and we will do this later on so I will just hit delete so now our animation is going to be looping and I want you to notice things okay so al animation happens sell it or to go slowly then it come on I'm sorry I I get rid of my code to stop my animation but I still have in my published setting - Donna loop the timeline so it ended on the first frame so I will hit this loop timeline again I will hit OK and now my animation will be looping okay and you can see that animation of the shape is very different from the animation of the text and I don't know as you think but the animation of the shape looks just much better ok this easing they make your animation to look really cool ok so now we are going to do the same thing for the text ok so we have two options or maybe we have three options or maybe we have many options but if I go to my hello and welcome text I can do the same thing I can go to these edit easing and I can make it like this ok save and apply I will hit ctrl enter and now we can see that my shape and my text are both moving in the same way ok that they are they have easing at the beginning and they have easing at the end ok but maybe you would like to have the exact same easing animation for the shape and all the text so what you can do is once you create some ease that you like for example this one I can hit in here hit this copy then cancel then go to your text animation go to your custom go to your easing and now if I hit paste it changed on a little bit because I was very close but imagine that we had animation like this ok and now I will hit this paste and now I have the same easing for my o for my text and for my ship and I will just hit save and apply ok so you can see that this easing can be very useful and animate provide us by default with some pre-made easing which is very cool for some people who do not like to spend time with the basics okay so if I go to any of this keyframe I can go to my is one in here and there are some options that is an option to have no ease which means that this is going to be linear then we have this option is in which means that it is going to be going slowly at the beginning but it will not go slowly at the end okay so we then we have is out which means that it is going to be going fast at the beginning and it will slow down at the end and we have some options to help have this or only slightly then a little bit more that even more and then even more and so on all we have this option easy in out which will create easing at the beginning and easing at the end okay and you can see that this shape this S shape is very similar to what we made okay so again you have some options which are almost linear like this or you have this option which is a little significant okay so you can play play these ones you have some kind of bounce for example and so on but I will get to the animation and have you can animate perfectly later on okay we will be animating some balls and so on but so for now I just wanted to show you that there are some easing these easing can be really useful and by these easing keys you can help beautiful animation ok so right now I'm going to create another text and what we are going to do is we are going to animate this hello and welcome to the right and then we new takes to appeal in here okay so all I need to do is just hit new layer and now I can get my text layer and I need to make sure that I am on a layer five or I can rename this to text - I need to make sure that I am on the correct layer text - and I can start to draw my text okay but one thing is that temporarily I want to hide my text one so I don't create text over another text so I will just hide my text one and make sure the do I don't text tool and I can start to create I can create another text so I can type in here then cue for watching it okay and I will align it to the center like this okay and I can put it on the separate lines boom okay and with my arrows and shift I will just move it a little bit like this okay cool so right now you can see that this would be one over each other so that's why I hide it and what do I want right now I hope my I will hide my thank you for watching for now and I will unhide my text 1 hello and welcome and I had my hello and welcome to came in here like this okay then I want some frames for example up to here I will hit f6 to be in the same place and then I will go to maybe frame 160 I will hit f6 again okay and now I will get this one and I will move it to the right okay and there are a couple things that you may have noticed now one thing is that we have lost our shape okay because our shape has a timeline but the timeline timeline of our shape is from frame 1 to frame 120 and it is not continuing then okay so then we have only these hello and welcome okay so what we can do is we can expand the length or length of our shape in the timeline okay so basically all I need to do is grab this keyframe and move it and I will move it to maybe reframe 214 I can later on adjust it but I know that I will have an animation where my alt text is going away and where my new text is coming in so approximately it will be 240 but we will change this later okay I just wanted to make some space okay and now my text tool you can see that it has an animation in then I want this part to stay on the on the same place and and then I wanted to move to the right okay and I already created the keyframe but it is going to be the same and at the last keyframe it will move to the right so again we need to create some classic tweens so anywhere between these right-click create classic tween okay and we can use the same easing or or we can go to the keyframe classic is we can choose easy in out and we can go with this quad for example okay and now we will have this animation okay cool so now I can hide my text 1 and I can unhide my text tool and you right now do not see our text tool because our text to his timeline up to 120 and now we are on the frame 150 so I need to go big and here is my thank you for watching okay I will click on my thank you for watching and I can see that I didn't create a symbol for this one okay so always remember if you want to animate something you need to create a symbol okay so just hit f8 or go to modify great symbol you can rename this to take stupid example and hit okay cool so right now what we want to do is I want my animation or my text to start approximately somewhere here or I can even go here it doesn't matter and now all of these frames are empty from 1 to 125 is empty and then it starts and it is there only for one frame so far so what can I do is I can go to maybe frame 170 and I can insert a new keyframe so either you can use f6 or just right click and insert keyframe okay and what can we do we can go to the first keyframe and we can move this with shift to the left okay then we can click in the middle somewhere right click and create classic tween okay and again I want to have some easing so I will hit create classic ease I will go to easy in out and I will again choose this Queen or I will go with quad okay so now what we have is we have this animation thank you for watching but there is this little problem okay and the problem is that it will end on this frame 170 and it is not going to be continuing okay so after this one prime if I go one frame to the it you will see that it has disappeared and we have only shape okay so and text one doesn't need to be longer because if I hide my text tool and I'm show my text one you can see that my text one should disappear at this point okay so I do not need to expand this because it is already a way but my text tool should remain visible so what I need to do is I need to go to my frame 214 at the end and I need to right click and insert keyframe all we can insert frame or we can insert black key blank keyframe but this is a topic for another video okay so far we are going to be insulting insulting Kiran so I will hit insert keyframe and I will save and I will hit control enter okay so I have my animation hello and welcome hello and welcome will go away and thank you for watching will come okay cool right now imagine that I like my animation but you could see when I which I will show you one more time that between these hello and welcome and these new tags that was like too much time okay I want this to happen quicker so what can I do is I can make this animation to be curriculum like this okay so just you can move your keyframe like this or make it like this is up to you so I want my animation to happen quickly and I want also my animation to happen earlier so I will hit click on one keyframe I will click with shift on it on another keyframe so this way I selected both keyframes and I can move them like this okay and basically now I will show both of them you can see that this one is coming and this one is living and this is too much so I will move it back a little bit like this maybe and now you can see hello and welcome is moving and thank you for watching this coming okay so and it doesn't matter that this length of the animation is not the same okay it's it's up to you is this is the animation is kind of art so it's up to you what do you think that looks good and what do you think that looks bad okay so I will hit save and we'll test it and here we go we have hello and welcome it will go away and then we help thank you for watching okay cool so if you want it we can continue and create some more text or something like that but I would like to slowly finish this video in here and in the next we are going to go in again inch in much more depth in the timeline and I will tell you the difference between keyframe empty frame and so on so at the end what I wanted to do is to show you one more time how you can stop your animation because maybe you didn't get it the first time so I need to create new frame I will code call this one to be code I will go to my first frame I will right-click I will choose actions I will write my code this dot stop and like this okay now I will click on these two arrows which will close this it is on the frame one so I need to move it and I need to move it to the frame 240 okay and be careful because you can accidentally go to another frame like this I can show you okay so if you miss your time and like this what you need to do go back use control-z controls it and do it one more time okay so don't worry if you miss something just go back and you should be able to do it again okay so I will hit save publish one more time and you can see that we have shape we have hello and welcome hello and welcome will disappear and new text will come thank you for watching okay cool so hopefully you liked this video if yes just give me like subscribe and I will be giving you more videos about this topic about animate about Photoshop Illustrator and so on so have an amazing day and see you later bye

Channel: MotionTuts

Views: 26,829

Keywords: adobe animate cc 2019, adobe animate

Id: Gj1jADrkeqI

Length: 69min 17sec (4157 seconds)

Published: Tue Apr 02 2019