HTML5 animated banner in Adobe Animate CC 2019 - beginner tutorial

so hello and welcome my name is Martin and today I'm going to show you how we can create html5 animated banner in Adobe animate cc 2019 so this is what we are going to be doing today you all right so right now what I am going to do is I am going to download couple of images and normally your client would send you some images or you would go to sites like shut restore or something like that but what I did is I went to the Google and I just typed melted s and I chosen this image and I'm going to provide a link in the description so this one and then I went to Google and I type melted this font PNG and I have chosen this image okay so both of these images are going to be in the description in the link okay right now so now what I am going to do is I am going to open my Adobe animate file so I will click and right now I am going to choose my project so I'm going to go with 800 by 600 I want html5 canvas and I will just hit create okay so the first thing that I need to do is save my project so I will just type ctrl s and I will go to the place where I want to save this and I will create a folder which is banner and inside the folder I am going to save this I will call this melted s and I will hit save and the next thing that I need to do because right now we saved the animate file I need to set my publish location where my HTML and where my JavaScript are going to be published so I will go to the file I will go to the publish settings and here I will go to this icon I will click it and now I need to click to the location where I want to go so here I am I will go inside my banner and I will create a new folder in here and I will call it export it for example I will go inside and I will call this index you do not need to call this index it's optional and I will hit save and I will hit OK and right now if I go to my folder I can see that here is my exported file here is my animate file and some recover file but if I go inside my export it it is going to be empty but if I go to my file and I will hit publish it is going to publish my HTML and JavaScript and it is going to be in here ok cool so right now what I am going to do is I am going to import my images to the other by animate but before I will do it I need to go to the Photoshop and make them smaller because right now they are too big and we want to have a small size as possible and if I would go right now to my images which I have in here and I would import it like so you can see that these images like it's too big okay so I'm going to delete this and I will go to my library and delete it from my library okay don't even import these images I just wanted to show you and what I want to do is open my photoshop and in the Photoshop I am going to create a new project and I will go with the 800 by 600 the same size as in the Adobe animate and I will hit create and right now what I am going to do is I will import my both of my images to the Photoshop like so so the first image and second image okay and right now I am going to get my first image to my project like so I will convert these to the smart object you do not need too bad I always do it I will hit ctrl 10 and I am going to scale this down okay something like this and I am holding alt and shift right now okay so I will hit enter I will zoom a little bit and what I want to do now is I want to hide the white background because I want this to be transparent and now I will go to the file I will go to the export save for the web legacy and I will it's safe but before update I will choose that I want P&G 24 okay and I will hit save and now I need said my location and so I will go to my images and I will create a new folder and I will call this small ok I will go inside and I will call this one car and I will hit save ok so I'm going to do the same thing for the for the logo so I will get this to my project like so I will convert this to the smart object zoom a little bit control 10 and make it like so ok approximately I'm going with my arrows to adjust it a little bit I will hit enter and again I will go to the file export export s and right now I am going to choose my not PNG but jpg and I can go with a lower quality 80 still fine and I will just hit export all and again I need to set my location and I will call this one to be logo and I will hit save okay so first image I exported with export s the second with save for web legacy is like both of them are almost the same ok cool so right now what I am going to do is I am going to import my small images to the other anime so I will open this and I want to start with the logo so what I am going to do is I'm going to import my logo inside cool I am going to change the layer name and this is going to be logo and what I'm going to do right now is I'm going to scale this one little bit because right now my image is the same size as the canvas which is completely fine but to make sure that we are not going to have any empty edge I will click on this one and I will choose that I want 100 and maybe one or maybe two percent okay this is a little bit destructive we could have we could use Photoshop to make it a little bit bigger but it just doesn't matter these two percent okay so now what I want to do is convert these to the symbol so what I need to do is go to the modify and hit convert to symbol or you can use the shortcut which is f8 okay and choose movie clip and I am going to call this logo okay and I will hit okay fine and if you don't understand any of this I'm going to provide the link in the description for my introduction to auto animate and I have many videos on this YouTube channel about Adobe animate so right now I will go inside this movie clip and what I want to do I want to create a mask and in this mass that is going to be this light effect okay and so what I did is when I double-click to my image I am going to be inside this image and again I am going to rename this to be logo and I'm going to create a new layer I'm going to zoom a little bit with my control and scrolling on the mouse and I am going to take a pen okay pen tool go to the properties and when you have pen tool you don't have option to choose a fill color you have only option to choose stroke color but it doesn't matter what kind of color we are going to have right now and what we are going to do is click like this and create the mask which is approximately going to look like this symbol of the Methodist okay so like this okay cool so right now we have the stroke and and if I want to create a feel on this stroke what I need to do is go to this paint bucket tool click on it and just click inside somewhere like so and it is going to give you a feel okay and right now what I can do is double-click on the feel it is going to highlight the fill and Stroke and I will get rid of the stroke like so okay and I will call this one to be mask one okay cool so here is the mask and the next thing is that I am going to create a new layer one more time and now I'm going to get my shape I will get rid of the stroke if there is any I'm going to choose white color and I am going to I'm going to make sure that I'm on my layer tree and I'm going to draw something like this okay fine I will rename this to be a light effect one for example and I will help to convert this to the simple because I want to animate this so I will again go to the modify convert to symbol and I can call this light one for example and I will hit OK so right now what I want to do is I want to expand my timeline okay so my logo in my mask I do not want to animate them I do not want to move them so I will go to the frame 50 for example and I will hit f5 which is for new empty prime or new prime and this light effect I already created a movie clip and I will go to the frame 50 and I will click f6 which is for new key frame and I will movie the with my shift like so okay and I'm going with my arrows to move it up a little bit and I will do the same thing in here so right now it will go through the top okay and I will go anywhere in between right-click and create classic tween and now we are going to have an animation like this okay and now the magic is going to happen slowly I'm going to put my mask one on the top of my light effect I will right click on the mask one and I will choose mask and now this is going to take the layer below and the layer below is going to be visible or the animation is going to be visible only where the mask was okay so we can see something like this okay and right now you can see that both of these layers this mask one and this light effect they are locked okay and if I would go and play these in the browser I am going to hit ctrl enter uh-huh we are going to have something like this okay and it is going to be looping fine cool so now what I'm going to do is this is fine but I would like to make some kind of blue in there so what I can do is unlock this for a while when i unlock it I am able to create some changes so I will double click inside of this movie clip so I am on my shape and I can go to the color if you do not see it go to the window and color okay so I will click this and here are some options and what I want to help is I want to go with a radial gradient so I will click a radial gradient and now I'm going to have one color to choose second color to choose and the transparency I can change so I will go to the left one I will double click and I am going to choose the white one the this one is also going to be white but the left one I want these to be on the hundred percent opacity alpha but the right one going to put it down to the zero okay and right now we are going to have something like this unfortunately animate is going to create this from the top to the bottom like so so what I have to do right now is hit square and rotate this and make it like so okay just change it and right now we have this bloody epic like so and we can make it we can play with it with this if we want somehow a little bit okay if you go like this I didn't I didn't highlight it the first time I can change it like so for example okay so you can do whatever you want you can choose at the color you do not need to go with white but I am going to do it like this okay and right now we are going to lock them so we can see and it is going to be like so okay I will hit ctrl enter and we are going to have something like this okay fine the next thing that I want to say is that right now this animation this blood effect can look a little bit bad okay if you have if you don't have a good quality of this light effect what you have to do is go to the file go to the publish settings and in the image settings there is this option to texture publishing options and you want to change this from 8 bits to 22 bits okay and hit OK and this is going to make sure that your pee-pee and G's are going to be 32 bits and they are going to look good okay so I just wanted to say if you by default have this on the 8 okay fine so we have something like this and I think that this looks pretty cool if I hit ctrl enter one more time I think that this is this is pretty cool okay so the next thing that I am going to do the same thing for this one but there is this little problem normally but what I would do is I would create new layer I will go I would go to the Oval tool I would get my stroke and get rid of my shape and I would do I would go maybe to 10 pixels or 12 pixels of the stroke and I would do something like this then I would move this and so on I would adjust it and then make it bigger but the problem is that when I am working with the stroke the mask don't work okay I am not really sure why this is happening but the mask only works with the fill not with the stroke so I have to create the shape like this but without stroke okay so I will delete this one I will create again the new layer and what I can do right now is I will go to the view I will go to the layers this is going to give me all the walls in here and you can very easily get rid of them like so so view or worse and I'm going to get the blue layer here in the middle like so okay and now I am going to get my shape I will get rid of the stroke and I'm going to choose some fill color it really doesn't matter and with my out and shift I am going to start from the center like so and I'm going to create shape like this okay and now I'm going to change the color of the of the shape and in Adobe animate when you draw a shape on shape it is going to cut the shape okay and I explained this in my introduction to other by animate video but what I am going to do is right now draw another shape on this shape and again with art and shift like so and now if I move this green shape you can see that we have shape like this and I am going to delete this one so right now what I am going to do is I am going to call this shape to be mask number two like so okay and right now what I am going to do is I am going to duplicate my light effect and I can just hit duplicate layers even though this is locked it is possible and I'm going to move this below my mask too and then I'm going to click on the mask right click and choose mask okay and right now what we have is we have this animation which is going like this okay cool and I can test this by hitting control enter yes and we have something like this and I think that this is pretty cool but what we can do is delay our second animation because I do not like it when this is going simultaneously so what I am going to do is temporarily I'm going to unlock them I am going to move this so we are going to go to frame 80 for example and right now what I need to do is I need to expand my other frames so I will hit f5 and here we are okay and I am going to lock them so it is working like so cool so again I am going to test this control enter and we have something like this okay and by default this is going to be looping whatever cool so now I'm going to go to my scene so if you are inside go to the scene so right now what I am going to do is I'm going to animate this up and if you go inside you can see that we have 80 frames in here which means that I do not want these to move up to frame 80 and I will click f6 for the new keyframe so I want this to stay on the same place and then from frame 82 may be frame 120 I want to animate this up so what I am going to do is I'm going to zoom out a little bit and with shift I am going to move this up like so and I am going to right-click and choose create classic tween okay and now we are going to have something like this okay cool now what I am going to do is I am going to import my car image so I will hit new layer I will go to my folder with images and I'm going to get my car dot PNG inside like so okay cool and I'm going to move the keyframe on the first frame like this and I am going to rename this to be a car and I'm going to put it below my logo okay cool so right now what we have is we have something like this okay now what I want to do is I want to convert my car to the movie clip because we are going to be animating it so I will click and I'm going to hit f8 with your shortcut for the movie clip for the symbol I will call this to be a car and I am going to hit okay so now what I want to do is I want to I want to temporarily hide my logo so I can see and I'm going to scare this down a little bit like so and I'm going to move this down something like this okay and I'm going to align this at the center like so okay now how would I want to do is I will go approximately to frame 105 and I will hit f6 and then I am going to go to frame maybe 140 again f6 and on this key frame 105 I want to make this smaller so I will hit shift and out or only shift we out out and make it small like this and then I am going to create classic tween in between okay but right now I made little mistake because my first keyframe is bigger then this one so what I can do is I can copy this keyframe to the first keyframe so I'm going to hold alt and drag my keyframe like this okay and right now what I am going to do is click anywhere in between and remove classic tween okay so hopefully you understand what I did and right now we have this kind of animation okay so I'm going to preview how this is going to look control-enter we have this kind of animation of the logo and then we have something like this okay cool one thing that I do not like is the movement of the car and I am going to make some easing zinder and I created a video where I explained eating's and I'm going to provide the link in the description so what I'm going to do is I'm going to click on the keyframe I am going to click on this classic ease and I'm going to choose easy in out and I'm going to choose this first quad option which is very slight option and I'm going to double click and now we have little easing on the animation cool so right now what I would like to do is I would like to create some background and for the background what I am going to actually do is I am going to take the color from the Methodist website because this is how I would work if melted as was my client so I am going to the melted as website just type Methodist to do Google and I would like to get this color okay so what I'm going to do is I'm going to hit print screen I will go to the Photoshop I'm going to open your window it doesn't matter what kind of size I'm going to paste this and right now what I am going to is I'm going to get the color like so I'm going to copy it you do not need to go to the meditators website and do the brain screen because the color is 1 e 1 e 1 e so you can just type this and I will go to the stage and I will paste my color in there like so ok cool so the next thing that I am going to do is I am going to create some kind of light effect because I would like to create light in here so my car is more visible on this background so what I'm going to do is I'm going to create a new layer and on this new layer I am going to create a shape and this shape is going to be white shape and I do not want to have the stroke and I'm going to create something like this ok the next thing is that I am going to align this at the center like so and I'm going to put this below my car and I am going to this color option and again I am going to choose a radial gradient and right now I want these to go from the white to the the color of the background like so and the color of the background I want this to be transparent so right now we are going to have something like this ok and now what I want to do is click on this one hit f8 convert this to the symbol I will call this to be light for example light like this and I will hit OK and now what I want to do is click on this one and blue this little bit like so ok something like this and what I can do right now is I can make this little bit bigger if I want something like this okay or something like this cool I'm going to hit ctrl enter and we will see what we are going to help okay cool so I think that this soft pad looks pretty cool and we can continue one thing is that if it takes this everything is going to looks fine but there is this little issue that I am going to explain at the end of the video and it's like if right now I will go to my banner to my export it and I will hit file and publish so we have in real time published our HTML and if I try to open this along what is going to happen it is going to look weird like this okay and I am going to explain how you can fix this at the end of the video okay so this is what we have so far and right now what I want to do is I want to create an effect of the of the lights of the car that they are switching on so what I can do basically is a double click into the car okay and now I am going to create a new layer and I will call the bottom layer to be car and top layer to be light like so and now I'm going to zoom in a little bit I am again going to get my oval tool I'm going to choose the white color and I am going to draw something like this okay and I'm going to put it like so I think that this is this is fine okay and now what I want to do is I want to convert this to the symbol so I will hit f8 I can call this car light for example I'm going to hit okay and now what I can do is again go to my blue and blue this like so okay fine and now what you can do is if you want you can double click and you can change the color from the white to some kind of tint of the yellow if you want this is really optional okay you can play with this if you want so we can do something like this and right now what I am going to do is with my alt I'm going to duplicate this to the second light like so and now what I want to do is highlight both of them hit f8 and convert both of them to the symbol like so and I will call this car lights for example I will hit OK and here we are okay cool and right now this is going to look like this but again if I hit control enter it is going to looks fine you like this okay but if I would go and open my index.html and probably I will have to go and publish it one more time I do not need to it looks weird like this okay so I will later on explain you how you can do this right now we can go and continue a little bit okay so what I want to do right now is I do not want to have the lights on on the car immediately from the beginning I want my lights to switch on when the card came in here okay and so what I need to do right now is I'm going to expand my timeline so this little tree is the light effect okay it is the if I hide this it is this one so I want to expand this maybe to frame 250 we can change this later on and the same thing I want for the car and I know that I do not want to move my car anymore so I can also go and hit f5 like so okay and right now what I am going to do is I'm going to check when my car is going to came in here and it is on the frame 140 so I want an animation from 114 to maybe 180 to switch my lights on okay and so what I am going to do is I am going to go inside my car without my light and I am also going to expand the timeline in here to be the same length as the timeline is the main timeline okay and these nested timelines because it is called nested timeline the timeline in the timeline it can be confusing but the rule is that you want to have the length of the main timeline which is right now 250 same as the inner timelines okay and I didn't do the same thing with this little gate and the reason why I didn't have to do it because this gate is only 80 frames and reason what I didn't have to do it is because this is going to disappear so I don't care about it anymore okay but if anything is going to stay it should be the same length as this one so hopefully you understand this I am going to go inside my car my car I am going to just expand to 250 with f5 like so and the light I will go to frame 120 I will hit f6 and I am going to choose my alpha to be 0 and I'm going to do the same thing for the first one so our PI is going to be 0 and then from 120 to maybe 160 I'm going to hit f6 and I'm going to put alpha to the 100% and I am going to create classic tweens and right now we are going to have something like this and now I realize that I wanted this from 140 to 180 so I will go inside and basically I am going to just move this like so okay and now what I need to do is to expand this to the 250 or so so I will hit f5 okay I'm going to save this control s I will hit ctrl enter and now we are going to have something like this okay it will come and the light will switch on so right now I'm going to show you how you can fix the problem with the exported files and if I go to my index okay and I'm going to open this as I showed you before my lights are going to looks very weird and the reason is that it is not this blue effects are not supported in the browsers okay so what I have to do to fix this is to go back to the animate and first I am going to fix the background light so what I can do is click on this one then go to the modify and convert to bitmap and this converting the bitmap is going to change this from the html5 pink to the bitmap to the image so I will hit convert to bitmap and I am going to do the same thing for the Karaites so I will double click then I am going to go inside the lights like so and we'll click on these lights and I'm going to go to modify and convert to bitmap okay now I am going to hit file and publish okay and now if I go to my index and I will open this everything should be working fine okay so yes we have something like this cool so right now what I want to do at the end of the video is I just want to create some little tags and create some little pattern and what I want to do right now is I want to go to Google and I am going to type melts at this formed and this is going to find me some some font which is going to be maybe similar to the melted ice font so I would go like this and I would download the download the font like this okay and I'm going to provide the link in the description for you okay so I already downloaded it so I do not need to and then you need to install the formed so all you need to do to install the point is highlight your phone's it is going to come as a zip and then you need to unzip it and then hit install okay but I already did this and when you install new font it is not going to appear in the animate or in Photoshop or in any other software and what you need to do is feed it off and on and then it is going to work but don't forget to save your project before you are going to close it so right now what I'm going to do is I'm going to get my text and I'm going to find the font and it is this called polite sealer and I will go to the main timeline which I am on I will hit a new layer and I am going to just simply type married this paints something like this okay and I am going to scale this up a little bit and I'm going to place it somewhere okay and the next thing that I am going to do is I'm going to call this to be text one and I'm going to hit new layer and I'm going to create a button and put the button what I am going to do is again I'm going to go to the Methodist website so I'm going to type melted s like so and I want to get this blue color okay pull the folder button so by all the deme prints clean these to the Photoshop and what I am going to do right now is I will get the color like so I am going to copy the color I will go back to my animate I will get the shape and I am going to choose this color is zero zero a CED okay so you do not need to print screen the Methodist website you can just type this color and I am going to create something like this then I will go inside I will choose a white color and I will just type go to the go to the website okay and I'm obviously going to make this font smaller something like this and I am going to put it like so okay and approximately to the middle okay and now I am going to move this so I can align this like so approximately cool and right now what I want to do is both of them I want to convert these to the symbol so I will hit f8 on the text and I'm going to call this text 1 I will hit OK I'm going to highlight this one again f8 I could go with the button but I do not want to explain buttons in the video I have video about button on YouTube channel so I will keep this movie clip and I'm going to call this pattern and I will hit okay cool and right now what I want to do is very simply animate them so what I can do is highlight both of these keyframes move them somewhere here okay maybe to frame 140 and I can rename this this is going to be button and what I can do is to go maybe to frame 180 hit f6 on both of them and then go to the first keyframes click on the text and choose alpha to be 0 like so and with the arrow I want to move it this down so I am holding shift and with my mouse I am moving this down little bit and then what I am going to do is create classic tween and I will we are going to have animation which is going to fade in and will go up okay and I want to create some kind of easing so I'm going to get both of my keyframes and I want easy-out and I'm going to choose this cubic for example and I'm going to double click and now we are going to have something like this I will save I will hit ctrl enter and now we are going to have something like this okay cool and one thing that I want to do is move this a little bit to the back so this is going to happen later so I'm going to move it like so for example so from 140 to 180 the lights are going to appear and then these texts are going to epic and what I can do is I can delay the button it'll be like so so first is going to be text and then the button okay so now you'll safety I will hit ctrl enter and now this is going to looks like this boom boom melted as Ben's go to the website okay and by default this is going to be looping forever okay and there is an option to stop the loop and if you want to stop the looping what you need to do is create a new layer I am going to call this to be cold and then I will go to the beginning I will right-click choose actions and I'm going to just type this dot stop like this so very simple JavaScript and this is going to stop the animation after one play okay so I'm going to hit this arrow and now what I can do is drag this little action you can see this little R to the end because if it is going to stay at the beginning nothing is going to happen because it would stop the animation immediately from the beginning so we want to put this on to the end and right now if I hit control enter the animation is not going to build pink at least what is on the main timeline is not going to be looping it is going to stay like this okay but the animations which are inside are going to be still looping okay so if you want to stop all of the animations what you have to do is also go inside the car and inside the car you would have to do the same thing you would have to create a new layer call this code and again do the same thing so click right click actions this dot stop and like this okay and then you would move this in here like so okay and that is also an option to put a code that this is going to repeat two times and then then it is going to stop and so on and for example Google AdWords head the rule and maybe they have changed it but they hit the rule that the animation the banner html5 banner must be only 30 seconds long so you have to put codes like this to stop the animation after some time because otherwise AdWords would reject the banners okay and they hit all type of all types of rules for example that banner must have only 150 kilobytes and so on but that is a topic for another video I just wanted to show you how you can do something like this in adobe animate CC 2019 okay cool and if you would if you want to send this to the client what you would do is go to a banner and go to the file and publish and depending on the platform that this is going to go for example that is advanced at all or you can just put it on the website or to a friend it's optional but there might be [Music] needed to create some kind of changes in the code little bit but maybe your client can do this but what you would do is zip dislike like so and then send the zipped file to the client okay so these index JavaScript and so on some images in there okay cool so yeah this is it hopefully I didn't miss anything and hopefully you learned a lot and if you liked this video please hit like hit the subscribe and bail button if you are interested in more videos like this and if you have any suggestions any questions put them in the comments below and I am going to see you in the next video so thank you very much for watching and see you later good bye

Channel: MotionTuts

Views: 29,486

Keywords: Adobe Animate, HTML5, banner, animated banner, html5 banner, mercedes, tutorial, project, Adobe, Adobe CC, Animate cc, Adobe animate CC 2019

Id: CtF0udHA2nE

Length: 47min 26sec (2846 seconds)

Published: Sun Oct 20 2019