HTML5 animated banner using Adobe Animate CC 2020 TUTORIAL

all right so hello and welcome in this tutorial I am going to show you how you can create an html5 animated banner in Adobe animate cc 2020 and we are also going to be using a little bit of illustrator so right now I am going to show you what are we going to be doing today you alright so the first thing that I want to do is go to the adipic website and just type in here sandwich and I would like to get this image and I am going to provide a link in the description and I would like to hit download and I would like to go with the free one but we will help to attribute the auto just click this one and you are going to have option to download your file which I already did so I am NOT going to do this all right and I will go to my to my file in here and right now we are going to have this zip file I will right click and I will choose extract here and this is going to give me a couple of files and I would like to go with a pastor file so I am going to double click and it is going to open me this into illustrator so right now if I try to click on any of these factors I am going to select everything because this is grouped and also there is a clipping mask so what we need to do is ungroup this so we can either go with the shortcut which is control shift G or we can right click and choose ungroup all right all right now this is still going to be together but we have separated the vectors and the background I will go back and now what I need to do is right-click and there is a clipping mask and we need to release the clipping mask and all you need to do is click on this release clipping mask and I am NOT going to explain what does it mean but now we have released it and we have to ungroup this one more time so but now I will go with the shortcut ctrl shift G and now I can select this individual part so what we did is we ungrouped then we released clipping mask and the then again we ungrouped so now what I want to do is I would like to create a new file because this file is pretty small and you can see that right now we are on the 1000% and if i zoom out 100% looks like this and it is too small so I would like to go with ctrl n and I would like to choose 800 pixels by 800 pixels and the reason is that I would like to get these file size in Adobe animate and I will choose create alright now I will go back to my to my file and I am going to take this sandwich inside the inside the new file and you can see that it is going to be pretty small and the reason is that this file was very small so what I need to do now is select this and with shift I can scale it like so and if I am going to hold alt it is going to be scaling from the center and if you are going to make try to figure out this shortcut like option and so on I don't use Mac and now what I need to do is go back and I am going to get some of these some of these vegetables and shrooms and so on so I would like to get this one with shift I'm going to select this one maybe this one Shalom paprika and maybe this leaf alright and sometimes if you get some of them they are going to look weird but I would like to go with this one because these ones look good and I am going to drag them in here and I am going to scale them up again a bit shift and out like so and right now I will have to scare them a little bit individually so I will scale this one and also all of the others very quickly and I'm holding shift while I am scaling them like so and then this leaf may be a little bit smaller all right and one more thing is that I would like to duplicate this one with out like so and now I am going to double click inside this one and I am going to delete the green one and shadow I will double click anywhere else to go back and I will double click this one and I will delete yellow and the shadow and I will click anywhere else all right so we are almost ready to import this to Adobe animate but one thing that I also would like to do is I would like to get rid of these shadows because I really don't like them and we are actually going to be importing these vectors to Adobe animate as images not as vectors and we would lose our ability to change the shadow in the other animate and I will explain why we are importing them as images so what I need to do is double click in maybe all of them then I am going to move the shadow to make sure that I have selected a shadow and I will delete it and the same for this one like so the shroom doesn't have one so I will go to the leaf like so to this leaf and this tomato is going to have more shadows so I will have to select first and second this one also is going to have more shadows like this and the sandwich I would like to go one more time like this and I am going to deal it okay so make sure that you have get rid of them correctly and I missed this one so I'm going to go in and I'm going to delete this all right fine so now we are we are ready to import this to other by animate if you want you can go ahead and save this illustrator file somewhere but I'm not going to be bothering with it right now all right so right now what I am going to do is I'm going to open my other animate and I am going to drag these vectors inside so I will open Adobe animate like so it is going to take a few seconds and I am using the CC 2020 version right now which is little bit different than the 2019 but what we need to do is just hit create new and I would like to go as I said with 800 by 800 and this is really optional like so we can change the frame rate to 24 if you want you can keep it on the 30 it's up to you make sure that it is html5 canvas and just hit create alright the first thing that I want to do and you should always do is go ahead and save your file so I will hit ctrl s and I'm going to save it to my folder and I'm going to call it maybe sandwiches like so and I'm going to hit save all right and one more pink when you are working with the html5 canvas with the animated panels you are saving the project and also you need to set a public location where your HTML and your JavaScript and some images are going to be exported so we do that in the in the file in the publish settings and later on we will how to make some changes in the publish settings but if you open them there is this little icon select publish destination so I'm going to click this and I will have to get to my folder so I will cut this alright so right now I am in the folder where my where my animate file saved and I would like to create a new folder in here and I am going to call it X positive for example I will go inside and you can either keep this to be sent which is DOJ's or you can change this to index usually when we were sending banners to the clients we call this index and I'm going to hit save and I am going to hit OK all right and later on I am going to show you how you can publish your publish your HTML and JavaScript in there so now what I want to do is go to the illustrator and I would like to get these files in but the one thing that I actually realized is that if I am going to select everything like so and we are going to be importing this as images not as a vectors and the reason is that these vectors are pretty complicated and it would create a pretty big javascript file and animate would maybe crash and it wouldn't be really cool so I would like to import this as image but if I am going to highlight highlight everything and I am going to take this like so to add a bear animate and you can see this little plus so I can release and as I said there is an option to paste this as using ie file import preferences and this would this would be vectors or you can go with bitmap which is going to be just in each but the issue is that if I am going to hit OK for the bitmap you can see that these images are going to looks a little bit bad I'm going to or maybe in some of the cases because there are some settings in the publish settings but I am going to set that later on but the problem is that right now this image is going to be one image and I can't get the individual images all right so I will I will delete this one and also I am going to delete that from my library and so what I need to do actually is drag this individually into my Adobe animate so I'm going to drag my my extend which like so and I'm going to paste it as a bitmap and there is a possibility that if you are dragging like so animate is going to ignore it so in that case try it one more time okay and I'm going to do this for all of them unfortunately we have to do it like so okay and you can also go to go with ctrl C in the illustrator control C and inaudible animate ctrl V and it is going to be working the same way but sometimes when I do the control C control V it just ignores me I don't know why so if I can I rather prefer to drag it like so okay so like this and last - and as I said before we do not want to we do not want to have them as vectors because these vectors are pretty complex alright and this is the last one like so alright fine so now what I want to do is I would like to show you the exported files so now I can go to the folder where is my animate file so here is my st. vigeous here is some recover well and there is the exported portal that we created and if I go in it is going to be empty but what I can do is go to the file go to the publish settings this is the place where we stayed are published vocation and now if I'm going to hit the publish it is going to it is going to publish my files in the in the export folder and we are going to have the JavaScript HTML and some images in here or maybe only one image which is going to be sprite sheet like so alright and now I'm going to hit ctrl and tell for the testing and it is going to open this in the browser and you can see that this images don't look the best okay and maybe your URL looks fine but the reason is that if I go to the file and publish settings there is this export image assets and there is option to have a textural spreadsheet or image asset right now this is on a texture if I change this to the sprite sheet it is maybe going to be even worse so it's not worse it can be but it is still not good so I will close this and what I want to do is change this to the image assets okay and I'm going to hit ctrl enter and right now my images looks fine alright so the next thing that I want to do is I would like to change my background so if you are in the properties or you click somewhere here you should see the stage and if you click on the stage you have option to change the color you can get some color from these swatches or you can actually click on these on this wheel on the right top corner and now you can choose the specific color and I would like to go with maybe some kind of dark grey like this and I'm going to hit OK alright now so now what I want to do is all of these vectors or right now images are on the separated are on the one layer and we would like to gain to get them on the separated layers so I'm going to click on on my layer which is going to highlight everything or you can highlight it like so and right now I would like to right-click and I would like to choose distribute two layers or there is a shortcut which is control shift T but I am going to click this and now we are going to have seven or eight layers and every every graphic is going to be on the individual layer and we are going to have one empty layer which is the initial layer where everything goes and I can go ahead and delete it like so all right so now what I want to do is we can go ahead and rename these layers but we do not need to bother with that but I would like to rename at least one layer and I would like to rename the sandwich so I'm going to click on this one it is going to be the bottom one and I am going to double click and I will call this to be sandwich all right and now what we need to do is we need to we need to convert all of these all of these images to the symbols in order to be able to animate them so I will have to click on my sandwich I will hit f8 or I can go to the modify and convert to symbol this is very useful shortcut f8 and now that is going to be option to convert these to the symbol and there are three types of the symbols movie clip button graphic I would like to go with movie clip and now I can I can name my movieclips a lot of them naming the layers we should name both but I'm not going to so this is going to be sent to which and I will hit okay and now the sandwich is going to be in the library so that is my life daddy if for any reason you don't have library or the properties or anything that I have go to the window and you should be able to get it and now you can see that we have these folders which are like there are some of these images in there and this sandwich have this little icon which means that it is a movie clip and now I could go ahead and create a new layer and I can drag drag my sandwiches in there and it boot on increase the file size because it is just like duplicating already created movie clip but I don't want to do that but I need to go ahead and convert all of the other stuff to the movie clips so this one I will go with shortcut f8 and I will call this to be tomato one okay this one oh wait - me too - okay this one oh wait shroom this one f8 is going to be a leap one and you can you can name this as you want this is going to be paprika paprika one I will actually copy this this one as 8 is going to be paprika 2 and okay I think that we have move we have changed all of them to the movie clip and now if I click on my on my sandwich I can see that there is a movie clip and if I click on all of the others I can make sure that there are all movie clips okay and before we change them to the movie clip I can show you by double clicking for the example on the shroom right now I am inside the shroom and there is no movie clip that is like this option object bitmap and stuff like this okay and by clicking on the scene I will go back but right now we have we have converted all of them to the movie clips all right and now what I want to do is I'm going to hide my sandwich temperately and I am going to I will zoom out with control and scrolling and I'm going to paste my paste my images like so and actually right now we can go ahead and use this dis library and we can create one more layer what happened oh I accidentally clicked this one so new layer and on this new layer I am going to drag maybe one mushroom like so I can rotate this so I'm going to hit Q which is free transform tool in here and you can rotate this if you want and maybe I am going to I'm going to get the leaf so I am going to get a leaf in here and maybe I'm going to rotate it and just right now I realize that in the illustrator I had one more leaf that I didn't get so I can go ahead and control see go to the animate hit ctrl-v and I'm going to hit okay and it should automatically open this on the new layer it didn't so I'm actually going to click on the layer 9 and choose distribute layers so so now that is going to be this leaf on this layer and this one is going to be on this new layer but we will have to go ahead and convert this one to the movie clip so f8 and this is going to be leaf - all right one pink is that right now I can't scale my images without losing quality alright so in advance if we wanted to have these images bikram which I actually don't want but if you want it you would actually want to scare them into illustrator like so and then import them to the animate beaker alright or if you import them as a as a vector it would be fine but I said it a couple of times it would be it would be not really good to have vectors like this okay so we can we can position them like so we can highlight all of them and move them maybe like this and all of them right now are movie clips and I will go maybe to frame a team we can adjust this later on and I'm going to click on the on the bottom layer and with shift on the top layer and try to try to stay on one frame you can actually zoom in like so so don't you don't do something like this only on the one so I will go on a team and I am going to create new keyframes and that is going to be a short and the shortcut is f6 or you can right-click and choose insert keyframe so I am going to go with instant keyframe but then I will I will always go with the shortcut all right and right now what behave is is we have these two keyframes and actually if you are a total newbie with Adobe animate I would suggest maybe to go and watch some introduction I have one tutorial I can provide the link in the description but what I want to do right now is on the on the first keyframes I would like to move all of them out of the stage so I will zoom out a little bit with control and there is actually this useful useful icon center stage so if you put whatever the reason get somewhere somewhere wilt like so you can just click this and it is going to Center your stage okay but what I want to do is all of them get somehow somehow like this out of the stage like this and like this and like this alright and now what I want to do is highlight all of the layers and right now it doesn't matter whether we are going to be highlighting only one prime or we are going to be highlighting more of them but we need to do something like this then right-click and we would like to go with classic tween well now that is also option for the motion tween but I would like to go with classic tween so create classic tween and you can see that there is a shortcut out we probably you are not going to have this shortcut because I have created a shortcut for myself because that is by default no shortcut for the classic tween as far as I know but I am going to do this and now we have an animation where where my images will go like so okay I will save this and I am going to hit ctrl enter and this is how this is going to be looking so far all right so couple of things right now first of all is my sandwich is hidden but we can still see it in the in the browser the reason is that in the file in the publish settings there is this option to include hidden layer if I unclick this and I will hit okay we are not going to be seeing the sandwich anymore another pink is that this animation is really slow we have like 125 24 frames per second and this is 80 frames so it's like three seconds and something so we are probably going to make this shorter but we would like to create some kind of easing and the easing is going to be like we are going to be starting fast and we will slow down at the end so I am going to highlight all of the keyframes and I will go to the classic ease and I am going to go with ease out and these are just some pre-made easing and the every easing is a little bit stronger and I am going to probably go with the Queen okay because this is doing something else so I'm going to double click and now what we have is you are going to see this when I taste this so control-enter they are going to be they will start fast and slow down at the end okay so and I think that in this case we don't even need to need to make this faster alright we can go ahead and try this you can go and move this to maybe prime 60 and I am going to hit ctrl enter but I think that the that with the 80 it was fine so I will go with throws it back all right and actually what you can do is at the beginning you can go ahead and with Q rotate some of them a little bit so that is going to be some kind of rotation ah but I am going to do this very quickly and only too few of them like so so I will hit ctrl enter and you can see that maybe a little bit that some of them have some kind of rotation all right now so now what I want to do is they will go in and now I would like to get them out so I can go to the frame 160 create our key frames so select it like so in f6 to create keyframes and now I am going to get them out not like this but I will have to go to my selection tool and move it like so all of them somewhere like this and like this and this one I can talk someone here okay and again I am going to highlight these frames I'm going to right click and I'm going to choose create classic tween and now they are going to go away like so and now we would like to create different kind of easing we would like to highlight all of the keyframes and we would like to go to the easing and you would like to easy in and I can go with the Quint but maybe the quad the strong the less strong and I am going to double click have you save this and I will hit ctrl enter and Navaho animating them in and then animating them out all right and I think that this animating in is fine but I would I would make the animating out a little bit faster and it's like even in the motion graphic in the animation when you animate something in you usually want to make it slower and when you animate something out you want to make it a little bit faster so I can highlight all of the keyframes and I can move them maybe to 120 and if we if we want because now there are some empty empty keyframes or the frames we can highlight all of them like so we can right click and choose remove Prime's or shortcut shift f5 like so I am going to save this I will hit ctrl enter and we have something like this and then they are going away and you can probably see that they are going faster away and it looks a little bit better I'm going to close this and now I am going to show my sandwich oh okay I am going to select my sandwich I'm going to put it somewhere inhale and okay I can see I made a little little mistake because I was animating also my sandwich and I didn't want to do that so I am going to click on the on the first frame after the keyframe on the sandwich and I am going to highlight all of the frames like so and I'm going to use shortcut shift f6 and it is going to what I can actually go with shift f5 or right click and remove frames and now we have our sandwich on the on the on the first frame alright and I can go ahead and drag this keyframe somewhere here all right so we do not want to have the sandwich up til now and I will move it a little bit like so and then I'm going to create a new keyframe maybe on 130 with f6 and on the first keyframe I'm going to move this down a little bit and I will click on the sandwich and on the color effects I am going to choose alpha which is transparency and I'm going to drag it to the zero so it is going to animate from zero opacity 280 and it is also going to animate from the bottom to the top and I would like to create little easing and easing is going to be easy easy out and I can go maybe with the cubic and I'm going to double click to apply this and as when my when my vegetables are leaving my sandwich is coming and I will hit ctrl enter and we will see how this is going to look okay I hoping that it's pretty fine maybe we can maybe we can create a little bit more of the motion so I'm going to put it a little bit more down at the beginning so it is going to move a little more alright like so and now what we can do is is we can go ahead create a new layer and on this layer we can create some kind of text and I'm not going to be worrying about about phone right now I will actually change the color to maybe yellow like this and I will click and I will type just best send the cheese like so and I'm going to make the font size a little bit bigger like this and I can go to the align tool and I can align this at the center I can do that with all of them if I want and now actually I can even animate these higher like so like this and maybe in that case start also higher something like this and I will have to convert my text the movie clip in order in order to animate this so f8 I can call this text 1 okay and I will move the keyframe maybe somewhere here and I will create a new keyframe f6 I will put it down do the same thing as with the speed sandwich alpha 2.0 right-click create classic tween again we can go ahead and create some kind of easing easy-out maybe also cubic and now it is going to be like this and maybe I can make the text go little bit earlier like so alright and yeah it looks cool and maybe the last thing that we can do is create one more layer go to the shape tool in the shape tool we would like to get rid of the stroke so I am going to double click on the stroke or not only click and get rid of the stroke and that is then that is option a rectangle option to have the rounded corners and I would like to maybe go with 40 and I am going to create shape like this and I can type in there with white text maybe make order alright I'm going to scare the text a little bit down like so position it now I'm going to click on my layer 14 f8 I can call this to be button 1 hit OK and we can do the same thing as with the as with the sandwiches and with the with the sentry with the text ok and we can even create one more text and this text can be just something like 2 + 1 for free something like this if you want all right and I'm going to convert this to the movie clip also f8 this is going to be text - okay and now I can this is my this is my button I can rename this to B button I can rename this to be text to disease text 1 so we have at least distinguish the other part and I can get these keyframes move them somewhere here and the same thing is before we can maybe go somewhere here f6 my other stuff will disappear we will later on make it appear again and on these keyframes we can move this down we can create classic tween on both of them and we can click them make the alpha to be 0 and we can make some kind of easing in the out cubic and it is going to animate like so okay and we can make this one to go later so we will have something like this or we can both of them make a little bit later like this all right and now my text van is a pillar so what I won't do is go to the go to the last frame and hit f5 on my text one and the same thing with the sandwich so click in here hit f5 and now it is going to be like so so I am going to save this I am going to hit ctrl enter and we are going to have an animation like this all right so I will close this I'm going to hit file I will hit publish and right now right now I can go to my export it and in my exported I have JavaScript HTML and images and if I open this HTML that is going to be this animation like so alright and depending on the platform if you want to make this for the adwords you would have to create some kind of adjustment in your HTML that is also a drawl and there are many others so I can't explain all of the platforms in this video but at least you have a sense how to create an html5 animated panel and I'm going to see you in the next similar video like this so if you like this video hit the like if you are interested in more videos like this consider to subscribe but if you want to subscribe I I would suggest to either don't don't subscribe or subscribe with the Bell because otherwise it's like I have subscribers but no one watch my new videos so yeah this is it thank you very much for watching and I will see you in the next video goodbye

Channel: MotionTuts

Views: 12,248

Keywords: Adobe Animate, HTML5 Banner

Id: xUUSfjqkb8g

Length: 43min 11sec (2591 seconds)

Published: Sun May 03 2020