Adobe Animate CC 2020 tutorial - HTML5 banner - recycle animation

so hello in this tutorial i would like to show you how to create this kind of html5 animated banner in adobe animate cc 2020 and you can also export this as a gif so right now i am on the side prepic i'm going to provide this in the description and i i have vector like this and i'm just going to hit download i would like to go with the free download and it is going to require me to attribute the author in here and i'm going to save this somewhere and i already did this so i'm just going to hit cancel i will go to the place where i save this and it is in here and i am just going to have a zip file like this i will right click and i will choose extract here this will give me some files and one of them is going to be episode file and i can double click on this file and it is going to open this in illustrator if for whatever reason it don't open in illustrator you can open illustrator by itself and then just drag it in there there is some kind of warning something you can just click no if you are going to have something like that all right fine so i will zoom in a little bit with control and all alt and mouse wheel and right now if i click this is going to be grouped together this part and this part also and so on so i would like to ungroup this so i'm just going to get individual parts and in this tutorial we are going to be using only this glass but you can work with any of those that's up to you so i will click i will right click and i am going to choose ungroup or the shortcut on the window is ctrl shift g like so so right now this part is going to be grouped and this part is going to be grouped so on both of them i am going to right click and choose ungroup right now this is going to be separated like so and i will do the same thing up in here so i will right click and i'm going to choose ungroup like so and right now i'm going to have the individual parts now what i can do is i can go ahead and open my adobe animate so it is going to take a few seconds but eventually it will open and uh depending on the version your other value may may look a little bit different i'm on the version cc 2020 and maybe that is already cc 2021 i will check but uh i am going to hit create new you should have some kind of button like this if no you can go to the file and create new like so and there is going to be some kind of options up in here are some pre-made options but it is almost all of the same what we want to do is choose some width and height i can go with 300 by 600 that's that's the standard banner size for the google ads for example oh frame rate is fine as it is and we want to have html5 canvas so i am going to hit create like so all right one of the thing is that right now i would like to drag this uh drag this vectors to the adobe animate and the way how you can do it is just click on the file and drag it like so go to the animate and leave the mouse this is going to give you an option by the way this can take few seconds so don't worry paste this bitmap or paste as if while important preferences we want to go with this one this will give us the vector and i will click ok you can see that this is pretty big so one of the way is just scale this down like so or what i prefer to do but this is up to you i prefer to go back to the illustrator create new document in here and my document is going to be the size of my of my animate document so i would like to go with 300x600 i will hit create and i will i will drag this one and i with shift i am going to click on this one this one this one and the glass like so but you can go one by one and i'm going to drag all of them up in here this is going to be very very big so i will zoom out with alt and mouse wheel and while everything is selected and if you deselect you can select it one more time like so oh i was looking well is my trash can and i can scale this down like so also this one i am going to scale down and i am holding shift to stay proportional and i am holding alt to go from the center on the window so i will scale this little bit more down like so even more like this and these are these are vectors so you can rescale them as much as you want and you are not going to lose any of the quality and i am going to put it like so okay maybe i will scale this little bit down or we can as i said rescale this in adobe animate but i prefer to do it like so because right now what i can do is highlight all of them like so and drag them to the adobe animate like this and again we would like to go with uh if well important preferences so i will hit ok uh so right now they are going to be on the one layer you can see that we have layer one and all of them are in here uh one thing that we should do is go ahead and save the file so if the algorithm animate crash uh we are not going to lose the work so i am going to hit save and i'm going to go and very quickly uh save this somewhere so i'm going to create a new folder i will call this folder to be banner and i will go inside of this folder and i will call this to be recycle for example like so and i will hit save so as i was saying before we have all of this on the one layer and what i can do is either highlight all of them like so or click on the layer one it is going to highlight everything that is in the layer one and then i will right click and i will choose distribute two layers this is going to give me a six layer one of them is going to be empty it's layer one i can delete it and i'm going to have five layers like so you can go ahead and name them but you do not need to now what i want to do is convert all of them to the to the symbol so i'm going to hit f8 or you can go to the modify and convert to symbol and we want to have a movie clip and we can give it a name this can be trash and i'm going to hit all trash can it doesn't matter i'm going to hit ok and right now if i go to the library you are going to have a movie clip in here and from here we can duplicate this as many time as we want we are not going to be duplicating this one but we are going to be duplicating these others okay so now uh what i am going to do is one by one i am going to click on this and i will click f8 and this can be simple one this can be symbol two you can name this but no i'm not going to be worried about it so something like this okay and right now you can see that we have uh symbols like these movie clips in the library and if you don't see library or the properties you can go to the window and you should be able to get it by clicking on it okay fine uh now uh what i want to do is actually actually i would like to uh get rid of them on the stage so i can highlight everything except of the of this trash can and i'm just going to hit click delete uh it doesn't mean that it is going to delete in from the library it is going to stay in the library and right now what i can do is for example start with the simple one i will create new layer and on this new layer i am going to drag it like so okay and uh my layers i am not going to name all of them but i would like to name this one i will call it to be main or you can call it trash can or anything and this one i would like to rotate so i'm going to hit q or you can go in here or free transform tool you can see the shortcut is q and right now i can rotate it and if i hold shift i am going to be able to rotate it by 90 degrees okay so this is movie clip this is movie clip we can go ahead and animate it so this main i am going to extend the timeline and i will extend the diamond maybe to uh 300 frames so i am going to right click and i am going to choose insert frame this will just extend the timeline like so okay and right now this one uh i'm going to animate from the top oh by the way one thing that i'm going to do actually is i will i will scale this down so i will hit q and with shift i'm going to scale it like so and put it little bit down like this okay so this one i will initially put up in here and by the way uh there is this uh clip content outside the stage and if you click this you are not going to see anything that is outside of the stage you would see it like so you would see only what is inside and if you unclick this you are going to see everything just if you accidentally click this all you don't see your vectors so right now with this one what i want to do it maybe put it somewhere in here and i will go to maybe frame 55 i will click f6 or right click and choose instant keyframe and right now with my shift and arrow i can move it like so okay then i will go anywhere in between i will right click and i'm going to choose create classic tween and we are going to have animation like so okay uh now on this uh on this main i am going to create maybe keyframe somewhere here f6 so from here from this keyframe to this keyframe we do not want to have any movement but from here to maybe here f6 i will with shift and right arrow move it like so so we will be able to catch it and i will go in between and i'm going to create classic twin so we are going to have a movement like so and we will catch this one you can see that this is over the trash can so the main the trash can should be at the top all over the other graphics okay like so but importantly we can put it down and we can create new layers like so but at the end the main should be on the top okay like this and oh then this one is going to disappear i can actually put it up so you can see it but uh if you prefer to work with main on the bottom it's up to you like so one of the things that we can do right now is create some easy ease on this trashcan movement so because right now the movement is linear and i would like to click on this keyframe go to the properties go to the classic ease choose easy in out and double click on this squat and this just means that it will start slowly accelerate and uh end slowly the animation like so so this just create the more fluid animation i would say so something like this okay now i will create new layer and again then we can put the layer below the main and i will go to the library and i'm going to get symbol 2 and i'm going to put it somewhere here okay i will go back because i created the layer 8 but i was on the main layer so when i'm going to be dragging this symbol too i would like to be on this new layer 8 and i'm going to drag it like so okay so right now we have something like this and actually i can scale this up a little bit like so okay and i'm going to click on this keyframe and i'm just going to drag it like so somewhere here and with my shift and hello i'm going to put this up and i will go maybe to frame 90 you can go by 50 frames but this is up to you you can change it later on and i'm going to animate it down like so and i will click anywhere in between and i am going to create classic twin and we are going to have something like this and then somewhere here i am going to create the key frame on the trashcan f6 move somewhere here f6 and move the trash can like so and now i can create classic tween so i'm going to have something like this and again as you can see uh my main should be on the top one of the thing right now is that this glass i'm going to put the main below temporarily this glass is not going to disappear because the first layer 7 it has disappeared after this keyframe and there is nothing in there but this one layer 8 is animating down and then it is going to be continuing up till the end of the animation so what we want to do is go one frame below the behind the key frame and go all the way to the end and with shift click like so so basically we want to select all of these keyframes i will do it one more time so like this and with shift click like so and then you can right click and choose remove frames or you can see the shortcut shift f5 like so and it is uh immediately going to disappear like so because now if i would move the trash can and it would be still in here it would be still in here i i guess it makes sense all right fine so we can continue we can create new layer uh make sure that we add on this new layer and we can get symbol 3 and we can animate it like so so now i can put it somewhere here uh again i can get it like so somewhere maybe i can move it little bit again to the right and up like so and i will go to maybe i don't know somewhere click x6 and put this down like so and again i am going to create classic tween and like so this one i can easy ease this is the main so i can go to the properties click like so so we do not want to ease any of these four links we could but uh that's not necessary but we want to at least ease this uh movement of the trash like so then this one is falling so maybe somewhere here f6 and f6 and i'm going to move it like like so and create classic twin so something like this okay fine again what we want to do is uh get rid of all of the additional frames on this layer 9 so like this and right now i will go with shortcut so shift f5 is going to remove all of my frames and i want to put the main on the top like so so they are going to fall in there like so all right fine so like this you can create more of them uh that's up to you but now i'm going to create one more layer like this and i can actually call this to be or more glass something like this and okay and uh right now what i want to do is i'm going to be on this layer more glass and i'm going to put multiple vectors in there so i will put this symbol two uh i will put this one i will put this one and maybe i can put this one and i can rotate it like so so something like this and uh right now when i have uh four of them in here uh what i can do is uh highlight all of them like so by clicking on the on the layer and i will click f8 and i'm going to create again symbol of this because this symbol is going to contain all four of them advanced so i can uh call this to be i don't know more glass like so this name is up to you but i'm going to have it with the name in here okay and right now what i can do is uh this one the last one i'm going to put up like so and i'm going to drag the keyframe maybe somewhere here like so and i will go to maybe frame 180 click f6 and i'm going to animate this down and i'm going to animate it up till it is going to go below and maybe i will put it a little bit more time so i'm going to drag it like this and i will create classic tween okay and one thing one thing that we can do is we can highlight all of the not all of the but both of the keyframes and we can move it like so if we want this to go earlier so something like this and maybe right now uh i can i will actually put it little bit later like so so i have at least time to try to catch this one but then i am going to have some kind of arrow that i am unable to catch all of them so i am going to click on the main f6 f6 and i'm going to position it in here and create classic twin so something like this and i will put the main on the top so like this and maybe i can even put this little bit later on you can play with this but i want to have an effect that at least i am catching this one okay fine maybe maybe i can move the not this but this one the trash i can move it like so so i am catching this one and this one and you can see it in here but if i click this you do not see it because this is not going to be visible in the browser something like this and now i am going to create new layer i will get the rectangle tool i will go to the properties and i would like to get the fill color and i would like to get the red color and i'm going to draw a shape like this i will click on this shape i will click f8 and i can call this to be errol for example and i will hit ok and then what i want to do is in the color effects if you click where you have this none this arrow there is an option for the alpha and you can put the transparency to maybe something like this and we are going to animate this like uh i read the light that something went wrong like so somewhere here i will i actually call this one to be adored like this and i will create the keyframe somewhere here and i will go on the first one and on the plus one this alpha i would like to be zero and then i want to create classic pin so i want to animate this opacity of this red color from 0 to some kind of transparency then i can copy this initial key frame by holding alt and dragging it like so or what you can do is just basically click f6 click in here and choose that alpha is going to be zero and create classic tween so it will go from nothing to something and back and then we can do this one more time or you can highlight all of this and with alt drag it like so the first one on the last one and this is going to happen twice something like this okay and this red light i want to happen when i see that we are not catching this one okay so all of these i am going to highlight and move like so okay maybe somewhere here and you can see maybe it will be a little bit earlier and right now what i can do is i can create new layer and on this layer i can create some kind of text and i can create the text which is going to have the color like so so you can go on the fill color and click maybe in here and i will add some text the font this is really optional i have some kind of phone you can choose whatever the font and i will write something like we can't do it alone something like this then i will i can actually increase the font size a little bit and maybe i will double click hit enter and put it like so and this alone can be like so and you can use whatever text side this is just a demonstration so we cannot we can't do it alone then i will create new layer and i am going to create some kind of button and i will choose some kind of orange color and i am going to actually there are these rectangle options and this zero i can change to 40. this is just the corner radius this is optional but if you have this kind of option somewhere you can use it and you can create a button like so and on this button i will create with white text something like help us something like this then i will create one more layer and then i am going to write the text something like save the planet something like this and this one can be a little bit smaller like so so something like this and right now uh i'm going to call this to be text one this one is going to be button and this one is going to be text 2 all right fine and now i can click on the text one layer hit f8 and you can call this uh to be some kind of name but i am not going to reuse this so this is simple fine is fine the button click on the button layer f8 like so and like so okay fine and right now what we can do is uh catch all of them like so all of the key frames initial and drag them somewhere and be careful to don't go down like this so stay on your layer somewhere here and maybe we can go to frame 280 f6 and at the beginning i want to click on all of them and choose that my alpha is going to be zero and with shift f and with shift and arrow and i will have to do it one more time i am going to position them down and also this one like so and then i will create classic tween so basically i just did animation in all of them that they will start transparent and at the bottom and then we'll they will animate up and go to the full transparency and something like this okay i can make this animation to be much quicker like so and i can create some kind of easing so i can highlight all of the keyframes click classic is and i can choose easy out which means that it is going to ease at the end double click and we are going to have something like this and we can by the way uh do something like highlight this to text 1 text 2 and the button and move it like so so the first we are going to have the text we can do it alone uh help us and then we can have the save the planet like so okay and you can see that right now everything disappeared so i can go maybe to frame 360 and and extend the timeline but uh right now we need to be a little bit careful because because we do not want to extend timeline for all of them we do not want to extend the timeline for this initial ones okay you can see we do not want to extend this one or this one or this one we just want to extend uh these other ones so maybe somewhere here from this layer to this layer f5 and like so like this and now what i can do is click on the stage and change the stage color to some kind of almost white color but something like this okay so if i hit ctrl enter in the browser i'm going to am going to see my canvas okay so we are going to have something like this and i think like this kind of animation looks pretty cool okay so something like this okay fine right now i'm going to show you how you can export the html and javascript so i will go to the to the place where i save this banner like so and in here i'm going to have my animate file and html5 javascript file and some images because my adobe animate uh save this as png not as a vectors i can show you how to change this so right now i would like to get rid of them you do not need to do it like so but i prefer to do it like this i will create new folder this folder is going to be called index i will go to the adobe animate i will choose file publish settings i will click on this select publish destination and i would like i would like to go to the place where i have this banner here is the index i will go inside i will call this index this name is not necessary but i prefer to do it that way i will hit save and right now you can go and click publish and then you will have to click ok or if you click ok first you can go then back and hit publish like so and right now if i go to the folder of the index they are going to be these files all right fine on the previous tutorial i get some comment that these images were blurry so one of the options is if you go to the publish settings uh here is here are the here is the option uh export image assets and right now there is the texture but there is also an option to choose sprite sheet or image assets and if you have some kind of quality problem you may try to use spreadsheet or image assets or choose one of these and hopefully one of them is going to be working for you i know that adobe animate is a software bit uh i would say a lot of bucks so maybe if you have some kind of issue maybe try to update to new version but these image assets if you choose this uh there is a written publish imported images as it is okay and texture or that is like conval complex shapes to bitmaps for better pilot polements that's why we had it as a png because it converted complex shapes vectors to the bitmaps but if you change this what you can do is go to uh these images delete them or you can delete you can delete everything i can show you that if i go to the not images but i can delete everything that is inside like so i can uh go to publish settings change this to maybe image assets hit ok and now if i hit publish it is going to republish it one more time and right now i do not have the folder images because uh this is as vectors like so okay and if i would and i would delete this and go back to publish settings and i would change this to texture for example and i am going to hit ok and i am going to hit file and publish right now i am going to have here also the images and if i click on the index it is going to it is going to open me this like so okay fine so hopefully you uh like this tutorial you can also save this as uh gif uh i can show you maybe that in another tutorial how to save this as a gif and uh maybe i'm not really sure but maybe i will create also some kind of tutorial uh with some kind of game like this okay that this is not going to be animation that maybe we are going to be catching something like this and then get some points or something like that i will think about some kind of tutorial which is not going to be as complex but yeah if you like this video go ahead and hit the like uh if you are interested in videos like this go ahead and subscribe click the bell button if you want to be notified and yeah if you have something you can say it in the comment and hopefully i will see you in the next tutorial thank you for watching goodbye

Channel: MotionTuts

Views: 1,011

Keywords: HTML5, banner, Adobe Aniamte

Id: bkY953gWmKw

Length: 33min 54sec (2034 seconds)

Published: Mon Oct 26 2020