Adobe Animate CC 2020 HTML5 banner - beginner tutorial

so hello and welcome uh today i am going to again show you how to create some html5 animated banner in the adobe animate so before we will start i will show you what we are going to be doing for you to see whether this tutorial is world watching for you or not so this is it so right now i am on the site prepic and we are going to be downloading one image from here one vector and it is this one i search for the study but i am going to provide the link in the description so just click on this and hit download or you can go with free download or if you have premium version you can go with that one and if you click free download you will have to you will have to go and attribute the author but uh if you want to use this commercially i think that the pretty big is pretty cheap it's like less than 10 dollars a month but i already saved this so i'm going to hit cancel and this dinosaur is going to be said if you don't copy this and if you copy this he is going to be happy so it's funny but uh let me go to the tutorial here i am in the in the folder and i'm going to right click and i'm going to choose extract here and i'm going to have some files and usually uh when you download uh something from the felipe you are going to have uh ie file which stands for the illustrator but right now we do not have we have this episode and jpeg so we want to open this episode and if you double click it should open this in the illustrator and if not just open your illustrator and drag the file in there but it should open like this we are going to have some warning about some missing fonts but we are not going to get any of the phones so i am going to just hit close all right so now if i click i can move all of them together because they are grouped together so what i can do is right click and there is an option option ungroup or ctrl shift g but without shortcut just click ungroup and right now if i click we are going to have it like so all right now i would like to go ahead and change the color of this and for this i am going to create new file in the illustrator this is optional but this is just how i would work so i'm going to hit ctrl n and i can go with 500 by 500 it doesn't matter we are not going to be saving this but i will just hit create and i will go to the shape tool i will choose some color so something like this and this is only to see my white shapes because because so i'm going to draw it like this then i will go to the layer and i will log it so i can't move it right now and what i will do is i will click on this one geography or maybe this is going to be art this is going to be some chemistry and this one maybe some research i don't know and i'm going to drag them in here like so and i will move it a little bit and i will put this in here like so and right now what i want to do is i want to highlight all of them and that's why i have locked this one to be able to highlight all of them without this shape and i will click on this stroke because they don't have wheel like so i will double click and i am going to choose white color and i am doing this in the illustrator because this would be a little bit harder to change the color in the in the adobe animate so we have them like so now we can go to we can go to the animate so i will open my animate i can close this and here is my animate in the depending on the version this can look a little bit different but we need to hit create new button or go to the file and new but i can hit create new and now i'm going to have some kind of options and there are some presets but we do not need to use them what we want to go with is this uh 336 by 280 this is just the standard panel size you can actually go to the ads and find it in here frame rate is optional we can go with this 30 you can go with 24 it's up to you but we want to have html5 canvas we are not using action script i'm sorry any of you who would like to actionscript we are working in the html5 canvas and i will hit create okay so this is going to open me up animate and now i can get my uh vectors from the illustrator so i will go to the illustrator i'm going to highlight all of them like so and i'm going to drag them one more time like like this and if i'm able to drag them i'm going to drag them to the adobe animate and i'm going to leave the mouse this can take a few seconds sometimes and now we are going to have some option we can paste this as a bitmap but we do not want to do this because this would paste it as a image and it would even put all of these four uh vectors to one image so we definitely do not want to go with this we want to paste using ie important preferences the only time that i would use this bitmap is when the vector would be really complex and in that case uh it would be better to have it as image and not as a vector okay but we want to go with this one and i'm going to hit ok so right now we have this four vectors we do not see them because they are white so i am going to click on the canvas anywhere here is my stage background and i will click on the stage background and i can choose some blue color like so you can go in this color wheel and you can choose some your own color if you want like this all right oh so right now what i'm going to do is i'm going to highlight all of them and i'm going to align them to the center we do not want to have them in the center but we would like to help them on the one place so i'm going to align them like so and right now i can select all of them and i can move them where i want like this for example now i want to again highlight them and i want to convert all of these to the stream ball so i will go to the modify and i'm going to hit convert to symbol or shortcut f8 and i can call this to be icons i'm going to click ok and right now if i click you can see that it is movie clip it is some kind of symbol okay i am going to double click and before i will double click checking here we are in the scene one and if i double click we are in the scene one in the icons and now we you do not see it because the timelines look the same but we are in a different kind of timeline so you will see that right now because i am going to again highlight them i am going to right click on them and i am going to choose distribute two layers because we would like to help them each on the individual layer there is a shortcut i don't use it much but you can do it like so all right so now we have five layers one of them is empty so i can go ahead and delete it like so all right uh if you if you go ahead and hide three of them you can see them like so so like this but we can show all of them for now and you can see right now we are in the scene in the icons and we have photo else but if i click back to the scene this is the main timeline and on the main timeline we have only one layer and in the inner timeline if i double click we are going to have more layers this is how adobe animate and how flash used to work all right so now you can go ahead and rename these layers if you want i am not going to do this in this tutorial but what i am going to do is i am going to extend the timeline for the layer 5 so i will go to the frame 20 and i am going to click f5 or you can right click and choose installed prime you can see in here f5 there is an option to install keyframe but it is something a little bit different because inside frame is if you do not want to change the position of this if we create a new keyframe we could change the position and animate in between but we do not want to do this then i'm going to move this layer 4 in here and i will go to the frame i will go to the prime quality and i will click f5 and i'm going to do this with all of them like so f5 and the last one in here frame 60 and now i can show you one more time right click installed frame okay oh one thing that i don't like is that if i go to the frame uh 20 we see both of them so i am rather going to move all of them like so so they are not going to be overlapping okay i could do this at the beginning but i just wanted to show you that if they are going to be overlapping like so you are going to see both of them at the same time for one frame and it is going to create some kind of ugly glitch effect so something like this okay one thing that we should do and we should always do is go ahead and save our file so i'm going to hit file i'm going to hit save and i'm going to go to the place where i have this so it is in here bunnel and i am going to call this to be a study for example and i am going to hit save okay so now i can go back to my scene one by clicking in here and if i click ctrl enter uh we are going to open this in the browser and we are going to have just animation bail there well these animations where these icons are going to be changing like so i will go back to animate and now what i want to do is animate this on the main timeline to go up and down and it is going to animate in main timeline up and down and in the inner timeline that is going to be this changing okay we can see that inside we have 80 frames so i would like to do the same thing in here in the main timeline so i can even call this to be main icons okay and uh this uh beginning uh keyframe i'm going to put this down a little bit i'm holding shift and arrows i will go to the frame 80 i will click f6 all i can right click and install keyframe you can see that now we have keyframe but we do not want to change this position because we want to go to frame 40 instant keyframe f6 and we are going to move this up like so okay by default uh there is not going not going to be any animation in between but what we can do is highlight it like so you can go one by one but if you want to do both of them at the same time you can highlight it like so it doesn't matter how many frames you highlight but you can just right click and choose create classic twin okay and now we are going to have an animation like this i can hit ctrl enter and now we are going to have an animation which goes up and down and which is going to uh change them like so all right fine uh now it's a is a pity that uh here in the illustrator we don't have the image so what i can do very quickly and i'm going to provide this in the description i'm going to open this image this jpeg into photoshop and i'm going to get the image of that guy so i will go to the photoshop very quickly you do not have to do this i can provide this in the description but maybe you can learn something a little bit about the photoshop this is something that you do a lot when you are working in html5 banners in adobe animate that you use illustrator and and photoshop so i'm going to drag it like so in here and i am going to get a quick selection tool because when we are doing something like this we do not need like the great selection and i'm going to select it like so okay so uh it's like in here quick selection two w under that is magic one two and if you are going to hold uh alt you are going to get minus so if you want to get rid of something like in here i can click with alt like so and if i don't hold anything i am going to have plus and with the alt and right mouse you can make this smaller or bigger or you can do it in here but i am going to continue to create selection like so i'm going to zoom in a little bit i'm going to get this here i'm going to get rid of this so i have head like so good i will get rid of this and i do not want it to do it like so but without this this image or or some kind of face in the banner usually works really good so people like to cling on the faces so i am going to do it like so and this stump and i should be done okay so right now i'm going to click select and mask hopefully i have everything no i don't have so i'm going to hit cancel and i'm going to get rid of this stuff okay one more time and it seems that i have everything in here i'm going to just click few pinks i am going to click this decontaminate color it is going to help it little bit and i can click the smart values and create something like this okay so right now i am done and i am going to choose that i want new layer with layer mask and i am going to click ok so right now what i want to do is duplicate this layer to make a copy ctrl j i'm going to hide this one and i will click on this mask i will right click and i am going to choose apply layer mask and as i said you do not need to do this but you can watch and maybe you will learn something a little bit about the photoshop so now when i have this like so i'm going to hit ctrl n for the new uh for the new document and i would like to go with the same uh size that i have in the adobe animate because we do not want to have this image to be too big so this 336 by 280 hit create and i am going to drag them drag this inside initially you are not going to see anything because he has a white t-shirt but i am going to zoom out a little bit i am going to hit ctrl t and i am going to scale this down like so you can go ahead and convert this to the to the smart object but i do not need this so something like so is going to be fine okay so like this enter i'm going to hide the background and i'm going to save this very quickly so file export save whatever plugins you'll export this i prefer this one i don't know why but it is pretty much the same png 24 like so and just hit save and go to the place where you want to save this so i have it somewhere i'm going to cut this okay so here i am i created a folder for this image and i'm going to call this image one for example and i'm going to hit save all right now i will go to the folder image like so and i'm going to drag this to the adobe animate but before i will go to the adobe animate and i want to create new layer i do not want to drag it on this layer so i am going to create a new layer i will be on this layer and then i am going to drag it like so all right like this and if you click this icon clip content outside the stage you are going to see how this is going to be looking uh in the browser because this part of the hand is not going to be visible in the browser for example but we can have something like this okay uh now i can create some kind of some kind of button so i'm going to create a new layer and i will go to the rectangle tool i want to i want a white peel here you can have some kind of uh ball that i use if you want but i do not need to have i am going to just create something like this and i'm i will get the text and i will get maybe i can drive it blue color like so and i'm going to type study study online all right and uh i will hit q for the selection tool or you can uh scale it down with the with the font size like this so something like this and i'm going to maybe create this white background a little bit better little bit bigger like so okay so we have something like this and i can just hit f8 and call this to be button but this is not really important but we can do this so start the online and maybe uh i'm going to i'm i will move it a little bit down like so and i'm going to double click in here okay uh one thing this image is going to cover also this part so if you want to click on this one either click in here or you can go ahead and lock the image and then you will be able to click on these icons so i'm going to double click and i'm just going to check the order so we have this is going to be chemistry this is going to be research this is going to be geography and this is going to be add so one more time okay so we can go ahead and create this uh text and animate them and we can animate them the similar way as uh as these icons so i'm going to get the text tool i can go with the white color i'm going to create new layer and i am actually going to rename this rename them because we are starting to have a lot of layers so this is text this is going to be button and this is going to be this is the image yeah so this is going to be image image like so and only on this text i am going to uh type chemistry like so and i can make this little bit bigger like this okay then i'm going to do the same thing as with the icons because i do not want to have all of them uh on the main timeline because we are going to have create more text so i will click f8 or go to the modified convent to symbol i can call this to be text and i will click ok i will go inside so right now i am in the scene in the text and i can click on the chemistry i can right click and it is not going to be working because i need to be on the layer one when i right click and i'm going to choose duplicate layers i'm going to hide the layer one it is like the same and i'm going to rename this to be research like so okay i'm going to right click duplicate the layer hide the bottom one and this one is going to be geography i guess geo graph b okay i'm going to duplicate this last time like so hide this one and this is going to be art like this or you can type drawing i am going to type drawing because the art is short it doesn't look good and if i misspell something i'm sorry so i'm going to show all of them right now and we can do the same thing so we can uh hit f5 on the frame 20 we can move this on the layer 21 up to layer up to frame 40 and like so so this on to 41 to 60 and make sure that you are going to do the same length as the icons and to end on the frame 80 like so so i will go back to my scene and uh on the main on the main timeline we are not going to be we are not going to see these changes but if i hit ctrl enter we are going to have something like this okay and i can go ahead and move this text up a little bit like so on the main timeline so it is not going to be overlapping all right fine now i'm going to show you how you can export the files so if i go to the file where i saved my banner it should be in here i am going to have some animate file and some recovery file it is fine and then i'm going to have some js file some html file and some images like so and i do not want to have them in here so i'm going to delete this js delete this html and delete these images and i'm actually going to create new folder like so and this folder is going to be called index and then i will go back to the animate and i'm going to hit file publish settings here i'm going to click on this icon and and i'm going to get to the folder so like this and in here index and i'm going to call this to be index i'm going to hit save and i'm going to hit ok and then i will hit file and i'm going to hit publish fine and if i go into banner in the index we are going to have these images this html and this js all right and if you want to see how to uh prepare this banner for the google ads because there is like some few additional steps that we have to create i am going to provide the link uh for the tutorial when i explain it and i am going to provide the information where this information starts and maybe i am going to create some additional tutorial about this because i do not want to do this for all of the for all of the tutorials all right so this is it thank you very much for watching as i said i'm going to provide uh in the description some link how to uh prepare this for the google ads and if you are interested in more videos like this you can go ahead and subscribe or you can go ahead and check the channel that is more tutorials like this and if you like this video get the like maybe share it with brand and yeah thank you very much for watching maybe i will see you in some other tutorial goodbye

Channel: MotionTuts

Views: 6,970

Keywords:

Id: 2FVbYuJq1fM

Length: 25min 5sec (1505 seconds)

Published: Thu Sep 17 2020