HTML5 animated banner in Adobe Animate CC 2020 + Photoshop

so hello and welcome uh in this tutorial i'm going to show you how to create html5 animated banner this is a continuing tutorial i already created a few very similar tutorials i'm going to provide the link in the description but this is what we are going to be doing today all right so right now i'm on this website pixabay and i'm going to get some images because there are uh royalty free images and i just search for the gym and i am going to go with this image i will provide the link in the description because this can change and i will go uh with this image and all you need to do is click on the image and you can see that you have uh free for commercial use and no attribution required uh of course you can use some other images if you want but i am going to be working with this one and i am going to hit free download uh now i'm going to choose the size uh it doesn't matter because we are going to be adjusting them in the photoshop this is also going to be a tutorial with the photoshop little bit but i can provide uh maybe these small images which we are going to create in the photoshop also in the description i will see but i will go do this small one because we do not need to have this big one i am going to click download and i will have to confirm that i am not a bot and i am going to click download and now i am going to choose some destination but i already did this so i am not going to do it right now so i am going to hit cancel so right now i am in the adobe animate and we will go in a few seconds or in one minute of the photoshop but i just want to show you why so right now i am going to hit create new and i am going to uh choose 300 by 600 so our width is going to be 300 the height is going to be 600 of the frame rate we can leave it as it is and we would like to have html5 canvas and we are going to hit create uh by the way you can have all your animate little bit different because they are uh changing the versions or very often but if you don't see create new go to the file and that should be new but i'm going to hit create and uh this is what we are going to have something like this and now i'm going to import my images so i will go to the file i will go to the import and i am going to get import to library and now i will have to i will have to select my images and i have them in here so this is the first one this is the second one so i'm going to get this one and i have it right now in the library and if you don't have a library go to the window and get the library so but you should have properties and the library next to it and here is the image and i can drag image like so to the to the adobe animate and now you can see that this image is pretty big and there is this little icon uh in here clip content outside the stage and if i click this i am going to see only uh the banner size this 300 by 600 and if i click this one more time i am going to see the whole image and this image is too big and it is like too big in the size if i go to my folder and i will click on the on the image i can see that this image has 62 kilobytes that's fine but this one has 202 kilobytes that's not fine because what we need is we need a banner which is together going to have 150 kilobytes so these two images can help together maybe 70 80 kilobytes max and it is not really very easy to create so uh we can go to the photoshop and we can try so here is my photoshop and i am going to hit create new and i am going to go with again 300 by 600 and this is actually uh the little way how i used to work in the company and create panels and i would like to go with pixels so one more time 300 by 600 and hit create all right uh now i'm going to uh import this images to the photoshop so i'm going to get the image and i'm going to drag it to the separate window so up in here somewhere and i'm going to have this plus sign and copy and i'm going to leave it like so and now i'm going to unlock this by clicking on this lock and i'm going to drag it in here all right uh i will go ahead to my layer one i'm going to right click and i'm going to choose uh convert to smart object and basically that means that um if i hit ctrl t for the scale and i'm going to scale this uh down i'm holding alt and shift to stay proportional and i'm going to hit enter and then i'm going to hit ctrl t and scale this up i am not going to lose quality if i didn't convert this to the smart object and i would scale it down and up i would uh destroy the image okay so that's the reason or why we did this so i'm going to make this little bit smaller like so and place it maybe like this all right and i'm going to hit enter and now i am going to create some shape but i did this part you do not need to follow along you can i am going to provide these small images in the description but i just want to show you the whole process not only the adobe animate part so here in the photoshop you have an option to get uh get the ellipse tool like this and in here there is an option to have a path pixels or the shape and we would like to go with the shape and in here i can choose the fill of the shape and the stroke of the shape so stroke i do not want to have any and the fill feel i would like to have or we can go with maybe something like this we will change it later on and i'm going to draw a shape like this all right uh and the thing is that i would like to have the image and then uh the part where i am going to put some text and this shape i can hit ctrl t and i can scale it like so and hold alt to go to the both sides and hit enter so something like this and actually i'm going to change the color of this shape to maybe a tint of the blue or maybe something like this this is fine right now uh here is going to be some text and i want to have only this image okay and i just wanted to go to photoshop to create something like this to see uh how much of the image am i going to use so i'm going to hit c and i'm going to do it like so okay c is for the crop tool in here and i'm going to hit enter so i will need only this uh size of the image maybe even a little bit more like this okay i'm going to hide this one and uh now i'm going to hit uh on the on the side and i'm going to make it a little bit bigger on this side and on this side because in the animate i would like to create a create an animation which will go from the left to the right and maybe i can do it like so and i'm going to hit enter alright so approximately this size of the image is something that i would like to use in in adobe animate and the reason why i'm doing this because i need to have this image as small as possible the next thing that i want to do is import the second image so i'm going to import it like so again i can unlock it or i can just try to move it it is going to give me this wall link but i am going to click ok and i am going to move it in here and one more time right click convert to smart object ctrl t for the scaling and i'm going to scale this down to fit in here like so i can zoom in a little bit and yeah something like this and i was zooming with alt and mouse wheel okay i'm going to hit enter and maybe move it a little bit like so all right something like this and uh one more thing that i would like to create is uh is i would like to change the tint of these images little bit all right because this has different tint than this one so i'm going to get this solid color i can go with maybe color like this okay it doesn't matter you can you can choose something similar i'm going to hit ok and i will go and i am going to choose multiply so somebody in here is multiply and i am going to decrease the opacity to maybe 51 okay and maybe i can play with the color right now something something like this maybe okay and uh by doing something like this i am going to make the uh image size even smaller because i have decreased some colors they are more uh more there is less colors right now so it is going to have the smaller image and this one uh it is going to be affected little bit okay but this one is going to be affected much more all right so now what i want to do is i would like to export them so i am going to hit file i am going to go to export or i can go with uh save for the web blanket i am used to for this one but you can go with export s it is almost the same and i'm going to choose jpeg and i would like to go maybe with the maybe with 50 quality okay because if i go with 100 my jpeg is going to be 148 and my whole banner with all of the javascript in there has to be 150 so we can't go with the with 100 so this is the animate is probably the only place where i choose this low or quality but this is something that we have to do if you want to use two images okay and i'm going to hit save and i am going to uh put it to the place where i want to so here i will go and i am going to create a folder i can call it to be small images and this is going to be image 1 save now i am going to hide this image and i am going to export another one so export the shortcut is pretty long ctrl shift ls but i use it all the time and uh this one on the 50 person is 12 kilobytes so i can increase this one to some bigger number so i can go with 80 percent all right i'm going to hit save and again the same location and this one is going to be image 2 and i'm going to hit save all right so now i will go back to my adobe animate and i am going to delete this image from the library so i will go and i am going to hit delete and i am going to import the new images that we just created so file import import to library and i will go to the small images and i am going to select both of them and i am going to hit open now i will start with the with the image 2 for example and i'm going to put it like so and i am going to hit f8 and uh f8 means uh converting to the symbol i will i will just hit cancel uh you can also go with modify and convert to symbol so or either way and i can call this to be image one okay because in the other other animate when we want to animate something we will always have to convert this to the symbol it is just the rule okay so i'm going to move it like so little bit and make sure that you don't go like this so don't have a white space on the top all right and now i'm going to create the shape at the bottom so i'm going to go to the oval tool when i'm in the oval tool i will go to the properties in the properties i can choose some fill color and oh yeah i can go and go maybe with some kind of tint of the orange and we can't be completely wide because google ads or some other platforms they for some panels have rules that you can't have the complete white background because it would be like there wouldn't be any bolder so we have to go with at least some kind of tint and i am going to create new layer and on this new layer i am going to draw this like so with the shift all right uh here in the anime there is an option to click this icon or clip content outside the stage and if i click this this is how my banner is going to look like so i can drag this down and i can hit q which is shortcut for free transform it is in here and now i can do it like so okay we want to have something like this okay uh i can unclick this i just wanted to show you and i'm going to rename my layers so this is going to be photo one for example and this is going to be bottom shape this bottom shape i do not want to move anymore and i do not want to right now do anything with that so i am going to lock it and this one i am going to animate so with my shift and arrows i am going to move it like so i will go to frame 120 click f6 and i am going to move it uh to the to the right like so i am going to click anywhere in between right click and choose create classic tween and right now we are going to have an animation like this okay now you can see that my shape has disappeared and it is because it is only on the first frame so you can go to the frame 150 click f5 and even though it is locked you are able to extend the timeline on this image all right now one thing that we should do is we should go ahead and save the file so i'm going to hit file save and i will go to the place where i want to save it so here i am and i'm going to create new folder and this folder i am going to call banner because in this folder we are going to have the animate file but we are also going to have some exported file and i am going to call this file to be gym okay and you can see that we have this anime document dot fla which stands for flash they didn't change this uh animate name doesn't matter i am going to hit save all right now i can hit ctrl enter and this is going to uh test my animation in the browser and this is how this is going to look like okay uh one thing that i don't like is i don't like this uh color so i'm actually going to change it to tint of the blue probably so i will go like this and maybe like this okay so something like this i can lock it and i can see and uh this is little bit better i i would prefer this to be completely white but uh that's something that we probably can't do but maybe i will i will go to to closer to the right to maybe something like this okay and log it uh so now i'm going to create a new new layer and on this new layer i'm going to get uh the second image so no the first image but the second image in the animate like so i'm going to rename this to be photo 2 and i'm going to put it below the bottom shape and the same thing i'm going to hit f8 or go to the modified convert to symbol i can call this to be image 2 and i'm going to hit ok i will unclick this clip content so i can see and i'm going to animate this from the left from left to right yes okay and now i'm going to get this key frame move it to maybe frame 100 with this slider move on the timeline go to maybe frame uh 220 uh be sure that you are on the same layer click f6 and move it like so with shift and arrows and i am going to click anywhere in between right click choose create classic tween and now what i want to do is put photo one about the photo two like this so photo 2 is below and on the photo 1 i can create new keyframe by clicking f6 or right click and insert keyframe and then go to the last keyframe click on the image go to the properties and choose alpha to be zero and right now this is going to animate like so and from this keyframe to this keyframe it is going to slowly fade away and the second image is going to be animating below okay now we can see that this bottom shape is not long enough and it is going to disappear so all i need to do is go in here and extend it i'm going to hit f5 uh the difference between f5 and f6 is f6 gives me new keyframe and i can create the changes on the key frame and f5 just extend the the timeline of the of the shape or of the image all right i'm going to hit save i'm going to hit ctrl enter and we are going to check what we have so far all right okay fine uh maybe one thing that i'm going to do is i am going to unclick this and i will put this little bit back like so okay because uh in the in the animate or in the google ads there is a rule that after half minute the animation will have to stop so this is how the banner is going to look like when it stop uh fine we can quickly create some kind of text to animate in and out so i am going to get a text tool with maybe i will get some kind of color like this and uh i don't me it doesn't matter what font you are going to use right now and i am going to type uh i don't know do you do you want to go to gym you should do something more creative but it doesn't matter do you want to go to gym i'm going to align this to the center and maybe i'm going to make it little bit bigger like this and i would like to have this text from the beginning and then maybe somewhere in here i would like to make it disappear but first of all we will have to convert this to the symbol so i will click on the text modify uh convert to symbol and i can call this to be text one and i'm going to click ok and uh now once it is a movie clip i am going to go maybe to frame 80 hit f6 for the new keyframe go to frame 100 f6 one more time and on this one i am going to click this and i am going to choose that my alpha is going to be zero and i will go in between and create classic twin okay hopefully i'm not going too fast for some of you it's like the last few days i was doing more tutorials like this and maybe i'm too fast right now maybe i will try to slow down but uh yeah you can rewatch this or watch this slower if you want do you want to go to jim and he is going to disappear and we are going to rename the layer to be text 1 we are going to create one more layer this is going to be text 2 and on this text 2 i can type something like uh first training is for free this is something that uh people like free stuff so first training is for free again i can click and i can align this at the center i can one more time click hit f8 or modified convert to symbol choose that this is text two hit ok and i do not want to have this text from the beginning so i am going to click on the keyframe i am going to drag it somewhere here i will create new keyframe f6 and on the first keyframe i am going to click on the keyframe and i am going to choose that alpha is going to be zero i will click in between right click create classic twin and now my flash text is going to disappear while my second text is going to appear alright one thing that we can do to make this animation look a little bit better is go ahead and duplicate this bottom shape so i'm going to right click and i'm going to choose duplicate layers and this new layer i am going to change the color and i will get maybe some kind of blue like this and i am going to put it up a little bit so i will click on this one and put it up like so and i am going to put it below the the white shape okay and right now we are going to have something like this and i can even click it one more time if i am able and put it higher so we are going to have something like this and i think that this uh this is just little addition but it looks a little bit better and the reason why i wanted to do something like this is that right now i would like to create uh some kind of uh button call to action i'm going to hit new layer i can call this layer to be button and i will go to the to the rectangle tool in the rectangle tool there is an option uh to create a rectangular coordinate lattice depending on the version this may look a little bit different but i would like to go maybe with uh faulty and this is just means that we are going to have our radius on the cornell and i'm going to create a button like this and i'm going to create some text for this for this or hold this button and i will i will get the color of this one and i am going to write or more info this is this is something very simple like this and maybe i can change this color to a white color something like this or we can go with the it's up to you what do you prefer we can make this one to be a little bit a little bit more uh blue like so and yeah now it the text is more visible okay and we can make the text little bit little bit smaller like this and now i'm going to click on the shape and with shift onto text f8 and i'm going to call this my button for example and i'm going to hit ok and we are going to animate this in because we do not want to have this from the beginning so i am going to i am going to get it somewhere in here create new keyframe f6 and on this one i'm going to click and i'm going to choose that i want my alpha to be 0 this one has the full alpha and i'm going to create classic twin and we are going to have something like this all right i'm going to hit ctrl s and this is going to save this fine so now we can go ahead and play what we have so far so i'm going to hit ctrl enter and we have to press the image plus text second image second text and then we have this more info all right by default this animation is going to be looping forever and that is something that is not acceptable follow google ads so we will have to we will have to stop this animation and by the way one thing uh i am probably going to say this in all the tutorials just in case there is possibility that one of your layers or more of your layers are going to have something like this i just clicked f5 the timeline is going to be longer and in that case the end of the animation is just going to be that part of the of the animation so if you want to get rid of this all you need to do is select this right click and choose remove frames or shift f5 and you can get rid of that i just wanted to show you in case that some of you are going to have some kind of issue all right so now i want to show you how you can stop the animation and there are a couple of ways one of the way is go to the file and publish settings and there is an option to loop timeline so if i click this or unclick this and i'm going to hit ok and i'm going to hit ctrl enter my animation is going to loop once and then it is going to stop so i'm going to hit ctrl enter and we have the first animation we have the second animation and then the banner is going to stop okay there is also another way and uh this is something that we will have to uh search online so i'm going to type adobe animate loop timeline and i'm going to provide the link in the description and this is going to search me some sites and i will i will go with this one and in here there is a code okay this code i'm going to copy this and this is something that you do not need to do and you do not need to actually understand very much but uh i will show you i will go to my file publish settings and i'm going to click this loop timeline and i'm going to hit ok and instead of doing it like that we can do this with code and i'm going to show you the simpler way so i can go ahead and call this to be code or stop or anything like that i can right click choose actions and in the actions this is going to open me text editor like this and if i type this dot stop and like this this parenthesis or i don't know how to call them and close this with this arrow this is going to stop the animation but right now it is here at the beginning you can see this little a maybe which stands for the actions uh this would stop the animation immediately i'm going to hit ctrl enter and we are not going to have any movement but i can put this at the end and uh if i put it in the end this means that uh the animation is going to play and when it hit this a it is going to stop so this would do the same thing as the file publish settings and loop timeline if i uncheck this okay but if i go ahead in here and i will get rid of this and i'm going to paste the code that we get from the website uh all of this means is that it is going to loop three times and then it is going to stop if i change this tree to number two it means that it is going to loop two times and then it is going to stop all right you do not have to change anything all you need is this code and it is going to work okay i'm going to hit ctrl enter and you will see that this is going to play once then it is going to play one more time and after the second time this is going to this is going to stop all right and as i said uh the google ads has a rule that the animation can't be longer than half minute and we can calculate this very easily if we have a frame per second 30 it means that this is one second three seconds and so on you even have it in here so uh here are seven seconds and something so we can loop this three or four times but usually in the work we have created animations that were maybe 10 to 15 seconds long and we looped them two times but this is optional but together it doesn't matter how many loops you are going to have but in the at the end of the animation it shouldn't be longer than a half minute all right fine now i'm going to show you how you can uh publish your files so i'm going to hit ctrl s and actually i will go to the place where i save my animate file so in here in the banner and you can see that we have a bunch of stuff in here right now we have this animate file this is the recover file these are fine and there is some javascript some html and some images all right i'm going to delete them right now because uh and i'm going to leave only the animate file and you can't delete this one because you have it open right now and i'm going to create a new folder and i'm going to call this folder to be index and i will go to the animate and i'm going to hit file publish settings and here is this uh select public publish destination i'm going to click this and i'm going to i'm going to choose uh this location index and i'm going to call this one also index and i'm going to hit save okay and then i will go to the file and i'm going to choose publish and right now if i go to my index uh i'm going to have all of these files inside one issue is that my images right now are combined in the you know in one image and it is going to be png and it is going to be 200 kilobytes so i do not want to do that so i am going to go to the file publish settings and this is a little bit advanced stuff what we need to do is export image assets and we want to go from texture to image assets and image assets means that publish imported images as it is okay uh the texture is convert complex shapes to bitmap for better performance and sprite sheet is combine all images into sprite sheet so spreadsheet is going to combine them all together the texture is going to also combine them together but it is going to convert some vectors to the to the bitmaps so it is something sometimes useful but if you go with image assets it is going to publish them as they are individually and so on so i'm going to hit ok and i will go hit file and publish and right now if i go to my images i'm going to have these two images and i'm going to have this one so i can delete this one i do not need it i need only these two images and uh one more thing that you need to do if you want to uh make this for the google ads is go to the file uh publish settings and in html js there is this option hosted libraries and when this is checked it means that uh this banner is going to get some javascript and some code from the libraries that are online but the google ads need to uh have this unchecked and when i uncheck this and i'm going to hit ok and then publish it is going to create uh it is going to create one more folder leaves libraries in here and it means that these libraries are not going to be loaded from the web but they are going to be inside of the banner okay and right now there is one last thing that we need to do we need to add some meta tag in the html5 in the in the index so again i'm going to go to the google and also i will provide the link uh i'm going to uh type html5 or html5 adobe animate meta tag something like this and again this is going to give me some sights and uh this one or or maybe not this one but some other one is going to give me uh the the link that i have to the code that i have to paste and it is this one this meta name and so on so i'm going to copy this and i'm going to open my index.html and uh normally i would open this with uh something like brackets or phpstorm or something like that uh but some of you don't have this text editor because you don't code so you can open this with notepad so i'm going to click notepad and right now here is this meta cardset utf-8 and under that i'm going to paste my meta tag and i will have to change this 300 by 600 okay you will have to change this uh to the way how your size of the banner is okay and i'm going to hit save i'm going to close this and all i need to do right now is right click choose send to and compress zip folder okay you can see that we have uh 139 kilobytes so this is smaller than 150 so this is fine and this is something that you are going to send to a client all right and uh if there is something else needed uh for the platform your client should be able uh to do it because this is this is enough uh uh how you can what you need to do or for your panel to bulk okay if you go ahead and put this to some html5 validator it is going to give you warning that it needs um i can show you that it needs uh some link but the the link is going to be something that people who are going to put this in the adwords are going to add but i can show you i can type something like html5 validator okay and something like this and i can go ahead and upload my file in there so it is in here banner index zip and that is going to check whether everything is fine in this banner and everything is fine except this missing click tag check and uh there is like no click tag was detected between within this file and so on but this is something that you don't do this is something that people who give this banner to the to the google ads they do it intel all right so but yeah this is it uh this is how you can uh create the html5 banner in the adobe animate with correct sizes and with all of the stuff that you need for the google ads and uh other platform like this okay thank you very much for watching uh if you enjoyed this video hit the like uh go ahead and subscribe for more videos like this and hopefully i'm going to see you in the next video so thank you very much for watching one more time have a nice day good bye

Channel: MotionTuts

Views: 5,733

Keywords:

Id: 1Fkzbw91LiM

Length: 41min 25sec (2485 seconds)

Published: Sun Aug 30 2020