HTML5 animated banner in Adobe Animate CC 2020 TUTORIAL

all right so hello and welcome uh in this tutorial i am going to show you html5 animated banner inside of the adobe animate so i am on the side pixabay and i select for a little estate and i already did a very similar animation i can provide the link in the description i made animation with this image and this image and today we are going to be doing a similar animation but with little different effect with this one and this one so right now i'm going to show you what we are going to be doing today all right so now what we need to do is uh download these two images so all you need to do is click on the image and you can see that there is uh free for commercial use and no attribution required but you can still anyway uh attribute outdoor or follow the author and so on but we can click free download we are going to have some options i would suggest you to go with the smaller one we do not need to have this big size and then just click download uh it is going to ask you like if you are not robot so check this and hit download i'm not going to do it because i already did it and then do the same thing for this one okay so when you have your images downloaded and i'm going to provide the link in the description we can go to the animate so here i am and uh depending on the version this may look a little bit different for you but what you need to do is hit create new or go with file and new but i am going to hit create new and uh there are some uh ads and some sizes in here but i would like to go with the different one it's not uh really common but this animation is going to look so good in this size so i would like to go with 970 by 250 and i am going to hit create and the frame rate uh it's up to you you can have 24 you can have all 30 and we want to make a html5 canvas so don't go with actionscript html5 and hit create all right so here i am and right now what i want to do is import my images to the canvas and uh for some of you who watched the previous tutorial uh this is going to be kind of similar but yeah i'm going to open a folder where my images so here i am and now we have a few options we can either go ahead and drag the image like so to the animate but i do not want to do it that way i want to do it with file import and we have option to import to stage or import to library import to stage is going to directly import it to the stage and import to library is going to give it to the library in here so import to library and now again i will have to search for the for the images i have them in here and i'm going to select both of them and i'm going to hit open and now i can go to my library and i can see that here are my images i can click and i can see that this is first one is the second one if for any reason you don't have library or anything that i have in here you can go to the window and you can select it in here when the library is not checked uh it is not going to appeal all right uh now uh what i want to do is i would like to import the first image so i'm going to drag it like so all right uh you can see that this image is pretty big and usually when we uh would want to create a banner for uh google ads or something like that uh some kind of platform we usually want to have as small size as possible because they have like restrictions for uh maximum 150 kilobytes but i'm not going to be bothered with that in this video but normally this kind of banner would be hard to create with two images but yeah i would like to do it anyway so here is my image and i am going to scale it down a little bit so i will go to my transform and i am going to scale it down for some of you who may use photoshop uh there is no nothing like uh if i scale this image down and then up again nothing is going to happen so you can do this without problem you can scale it down like so and then scare it up back and it is not going to lose the quality in photoshop this would be issue all right so here i am and now when i want to animate this image i will have to convert this image to the symbol uh we do this always when we want to animate something in the animate so i will go to the modify and i am going to actually i will have to click on the image to select it and then modify and convert to symbol that is shortcut f8 and since now i'm going to be using this shortcut but you can find it in here so convert to symbol we have options free options we always even with the buttons we want to use movie clip so make sure that you have movie clip and we can call this to be photo one or whatever and i'm going to hit ok and now you can see that in the in the library we have these images and these images hopefully you can see them they have like this little icon and then we have this photo button this is the symbol and this has like a different icon okay uh now uh very similar as the previous tutorial but maybe most of you didn't watch that uh i am going to create a animation uh from bottom to the top so here i am i can actually rename the layer so this can be photo one also this is name of the layer this is name of the symbol they can be different and i will go to maybe frame 120 i'm going to right click and i'm going to choose installed keyframe that is a shortcut f6 but i do not want to overwhelm you with the shortcuts and right now i'm holding shift and clicking with my elves to move it like so and i will right click or anywhere in between and i'm going to choose create classic twin you can see a shortcut in here this is not going to be working for you because this is my custom shortcut all right and yeah we have an animation like this now what we should do and we should always do is save our animation so i'm going to hit ctrl s or file save and i am going to choose a destination where i want to save my animate file so or i will go in here and i am going to call this to be real estate for example and you can see that this is going to be dot fla this is like the flash file even though it is animate and i am going to hit save all right uh right now when we save this we can go ahead and test this on in the browser so i'm going to hit ctrl enter or command enter or i don't know the the mac and we can see that we are going to have uh something like this okay uh i am going to close this and i will go back to back to the anime now what i am going to do is i will create new layer so in here new layer and on this new layer i am going to drag a second image it is going to be this one and i am going to just drag it like so and again i am going to scale it down one thing that i didn't mention is uh in here on the top you have this uh icon this button clip content outside the stage and when you are going to click this this is going to show you uh how your banner is going to look like in the browser all right if i temporarily go go ahead and hide this layer too you can see that this is how it is going to be how this is going to look in the browser but when you work it usually to uncheck this but just be aware that there is this option and i'm going to show my layer 2 in here and i'm going to again scare it down little bit so like this and make sure that you don't go like this so you don't leave the empty space and i will convert this to the symbol so f8 make sure it is movie clip and this can be photo 2 and ok and now what i can do is drag this keyframe the layer 2 keyframe i can actually name it to be photo 2 and click on the keyframe and click and drag and put it to maybe frame 100 and if you accidentally go like this then go back and do it one more time there is possibility when you are dragging keyframes that you can go to the layer below okay so drag it and leave it in here and now uh with this bottom slider you can move on the timeline like so and we can go maybe to frame or 220 and we can right click and install keyframe all shortcut is f6 and uh on the first keyframe in here i am going to put it down like so i will unclick this to see how this is going to look yeah it's fine and in here i can again unclick this and move it maybe a little bit up like so all right and right now i am going to click anywhere in between you can even highlight uh more space it doesn't matter right click and choose create classic twin that is also motion twin but it is a topic for another tutorial so create classic twin and we are going to have something like this all right and uh for some of you that watched the previous tutorial now it is going to be different than the dead one because we are going to be using a mask so uh i will go ahead and create new layer so new layer in here and while i'm going to be on this l3 i can even call it to be mask one for example and i'm going to create a shape so i will go to the oval tool then i will have to go to the properties which are next to the library so click on the properties and again if for any reason you don't have properties go to window and get it and uh now we do not want to have a stroke so if you have some stroke go ahead and click this blue not blue but or white rectangle to get rid of the stroke and feel it doesn't matter because we are going to create the mask so i can choose something like this but now what i want to do is go to the mask one layer and with shift uh to make this proportional uh draw something like this all right now i would like to convert this to the symbol because always we have to convert to the symbol so i will click i will go to the modify convert to symbol and i can call this to be my my mask for example and i'm going to hit ok and now i will go to the beginning i am going to get the keyframe from here and drag it in here and i will click i will go to the transform and i am going to click and choose that i want to have a zero then i will go to the frame maybe 220 i i'm going to click f6 for the new keyframe i will i will click on this little plus sign in here hopefully you can see it uh because we have we created this to be zero so uh you may not see it but it is here this little plus sign and when you click on it you can go to the transform and you can scale it up like so okay and uh one thing maybe it might be a little bit better to firstly create this keyframe which is this big and then click this keyframe this which is like zero but then we can go ahead and go in between right click and choose create classic twin and we are going to have an animation like this okay and all for any for some reason when i click on this it's not completely zero but it's 0.2 uh so make sure that uh your keyframe starts in here okay so don't have like key frame from beginning to have zero something because there can be a little bit of the shape so something like this and now we are going to click on the mask one with the right click and we are going to choose mask okay and now there is going to be this kind of animation which is going to be revealing the second image all right and i will go ahead and click ctrl enter to test and this is uh how it is going to looks like okay oh now this is optional you can go ahead and play and uh make this animation to be a little bit slower so maybe something like this or you can make it faster this uh animation is an art and uh everybody likes something else so i would maybe go in between so something like this but this is up to you all right and now what we can do is create one more animation to practice little bit so i'm going to create a new layer and on this new layer i am going to drag my plus image but now make sure that you are going to drag the photo one and not the the image one this one because if i would drag this image and convert it to the symbol one more time it would create twice as memory but once we create a symbol we can duplicate the symbol as many times as we want it is not going to create any more memory because animate has this image once as a symbol and then we can duplic replicate it or duplicate it as much as we want so i'm going to create layer 4 i can actually name it to be photo 1 again i don't know and i will drag my photo 1 in here i will uncheck this uh clip content and yeah i will get the key frame from the beginning i will drag it in here make sure that you will stay on the on your layer i am going to drag it or move it like so maybe a little bit to the right like this and now we do not have to convert this to the symbol because it is already simple because we dragged the symbol from the library hopefully make sense and i will go on the timeline somewhere in here 300 for example i am going to click f6 or right click create new keyframe and i am going to move it like so and i will right click create classic tween all right and we can go ahead and create one more mask so i'm going to create a new layer i will call this layer to be mask 2 and i will go to my library i have my mask in here and now you can see we have more things in the library that all of the symbols have the same icon and all of the image has the same icon but i would like to get my mask shape you can create new mask if you want it doesn't matter in the shapes but i am going to drag it like so in here i am going to drag the keyframe uh maybe somewhere here like so i will create new key frame on this 220 so right click uh insert keyframe and now i can do it the other way first i am going to create this keyframe to be bigger so i will go to the transform and i am going to scale it up like so to cover all of the canvas and then i will go to the the first one and i am going to choose that i would like to have zero and then i will click somewhere in between and create classic twin and then mask 2 right click and choose that we want to have a mask and it is going to be like so all right i am going to hit ctrl s to save this ctrl enter to preview this in the browser and this is what we have so far all right okay uh now uh this is optional but uh if you want you can uh you can make your animation uh to be a little bit faster or slower by uh positioning it like so hopefully you can see that the bottom one i am moving down so now this is going to be faster a little bit and we can do the same for this one so i will go in here and i am going to move it down ah i can't move it down because it is locked so i can unlock it temporarily and move it down like this but uh this is uh this is optional you can always uh hide and show your layers and log and unlock them but when you have a mask at the end of the animation they will have to be locked so if you want to do something you can do anything but then you will have to lock them back to get your mask to work all right and uh now the last thing that we can do we can create some kind of text and some kind of button so very quickly i'm going to create some text and i'm going to type something like i don't know enjoy your life because to have a house with view like this would probably be satisfying at least for me enjoy your life and we can uh we can create some kind of button so we can go to the rectangle tool uh you have an option in here to choose the rectangle corner radius and depending on the version this can be a little bit different but you you should have some kind of slider in there and i'm going to type in there uh faulty and i will go to my fill and i am going to choose some kind of blue color from the from the monitor from the computer and i am going to create a shape like so and i will write some text in here maybe with white or black i will see and uh i will type like more info for example i will put this to the center and i am going to scale it down a little bit something like this okay and now we can go ahead and maybe animate both of them very quickly so f8 text one okay uh now select the text and with shift select the shape so select both of them uh f8 and i would like to have this to be bottom and i'm going to click okay and now uh a little issue uh but it doesn't matter at least i will show you i have layer six and i have both of these uh i have text and the button at the same layer and uh what one thing that i could do is go back and recreate it one more time but there is no need because if you select both of them and you can do this do this by clicking on one and with shift on the second or you can just click on the layer 6 and it is going to select everything so select it or with any way you want then right click and choose distribute two layers and it is going to create one empty layer the layer six because it is going to get everything everything from this layer so we can delete this layer and then we have layer uh text and a layer button and it has created this name based on the name based on the names in the library all right and now we can go ahead and uh drag both of these keyframes like so uh drag it like this again make sure that you will stay on the on your layer don't go like this so maybe somewhere in here and we can go maybe to frame 260 with f6 or create a new keyframes and on these frames on the beginning we can put it down a little bit with shift and arrow and then we can click on them choose alpha to be zero and we can go ahead and create classic twin okay and i will go back in here oh and one thing if you get the lost or in the canvas like this you can click this icon center stage hopefully you can see this in here next to clip content that is one other icon and then the center stage and it is going to get you to the center of the stage and now we have an animation like this we can create a little easings so if you click on the on the key frames you have an option here classic is and this easing is like the way how the animation is going to looks uh by default it is straight line but we can go to the easy out and this is like it is going to start normally quickly and it is going to slow down at the end okay so you have option to have this a little less little more but i can go with the first one so i'm going to double click in here so one more time to make sure that you got this click on the keyframes with the click onto one with the shift onto another one click here on these effects and choose one of them by double clicking and it is going to slow down at the end and what i can do is uh click on the keyframe of the button one on this keyframe and with shift on this keyframe to select everything and then move it to the right little bit and now we are going to have an effect like the text is going to go first and then that is going to be the button all right fine one of the last pinks in the animate if for any reason and this can happen you are going to have something like this i just click f5 that of some of the layers is going to be longer it can happen or what you can do is select the keyframes like this right click and choose remove frames or shortcut shift f5 and you can get rid of them alright so i'm going to hit ctrl s i'm going to hit ctrl enter and this is what we have enjoy your life more info okay uh by default uh this uh animation is going to be looping forever and if you want to create an animation for the adwords or address or platform like that uh usually you uh you can't have animation longer than the half minute or they have some kind of specific time so what you can do is go to the file publish settings and there is an option to loop timeline you can uncheck this and when you uncheck this animation is going to play once and it is going to stay on this keyframe so this is how your banner is going to look after one animation all right so this is it uh if you are interested in how to export your files and how to export them to bulk in google ads i'm going to provide the link in the description for the video because i do not want to create this explanation for every html5 panel that i create so i am going to create one general video about this uh but yeah thank you very much for watching if you are interested in more videos like this go ahead and subscribe hit the like and hopefully i am going to see you in the next video if you have any suggestion or anything like that hit it in the comment and yeah thank you goodbye

Channel: MotionTuts

Views: 2,244

Keywords:

Id: t9PEk7zN5yg

Length: 27min 29sec (1649 seconds)

Published: Sun Aug 30 2020