Adobe Animate CC 2021 - HTML5 interactive banner tutorial - JavaScript (banner 2)

so hello and welcome in this tutorial i would like to show you how to create a little interactive banner in adobe animate cc 2021 we are going to be using javascript in html5 document and right now i will show you what we will be doing uh so we are going to have something like this and we are going to have a card and that is going to be the dress on the car and if i go with my mouse over the top uh the drops are going to fall and every time that i will go over one of these threads is going to disappear you can check this one right now like so then this one and like this and then when we have all of them uh the text and the button is going to appear and this is going to be disabled so no more the drops are going to be falling once we once we clean the car so yeah that's what we what we will be doing today okay so right now i'm on the side uh free peak and i'm going to provide this image in the description and hopefully it is going to be still free because there is possibility that flipping will decide that uh this image won't be free anymore but hopefully not but you can do this with whatever image i just want to show you how you can do this so i will just click uh download and i would like to go with free download and in this case we will have to attribute the author and then just hit save i will hit cancel because i already saved this uh so i will go to the place where i save this and i will just hit extract here and i will have some kind of files and one of them is going to be a person and i will double click and it is going to open me this file in illustrator oh in the illustrator i'm going to have some kind of warning just click yes or no it doesn't it doesn't matter right now okay fine uh i have created in adobe animate document which is 800 by 800 pixels or you can go with any size that you want but i uh kind of like this size and i'm going to i'm going to create the same size document in the illustrator so if you decided that you want to go with other site you know do the same thing in the illustrator and just hit create so right now i will get this first part it is all grouped together and i'm going to drag it uh to my new file like so right now in here i have layers and um your illustrator may look a little bit different but basically go to the window and get your layers if you don't have them and if i open this uh there is going to be a group and if i open that group there are going to be some parts so basically what i want to do is click on this and with ctrl shift g or right click and ungroup i can ungroup it like so and right now i have going to have all of the parts of the car separated which is not very good but uh right now i can access these uh these uh dirty parts so i can click and you can see that they are all grouped together so basically if i open my layer right now i am going to have all of the parts of the dots of the dirt in this layer so i can hide it and show it and all of the other parts i am going to have on the separated group what i can do right now is is lock the this layer with the dirt and i can select everything else and just hit ctrl g and right now i am going to have a car grouped together and these parts i am going to have on one layer what i can do right now is click on these threads and hit ctrl shift g or again uh hit ungrouped and right now i'm going to have all of them on the separated layer what i can do next is click on the layer click on these three lines and there is an option to release to the layers sequence so i'm going to click this and right now i will have to select all of these layers and drag them out like so and i'm going to uh delete this uh delete this top layer because it is empty and i will actually provide you this in the description uh this illustrator file uh so right now we have seven or eight layers one of those car and other are these uh dirty parts so what i can do is select everything like so and drag it to my adobe animate this can take a while uh but the window like this is going to appear and you want to choose paste using guy file important important preferences so just click ok and right now i will just position the car like so uh now what i can do is rename my rename my layers uh so this one is going to be uh car and uh this one and actually i realized that i can have them on the one layer it doesn't really matter right now so what i can do is um is highlight all of them right click and choose merge layers and this can be uh direct like so uh so now what i want to do is uh is uh convert all of them to the to the symbols so i will click on the card i will click f8 or i will go to the modify convert to symbol and i can call this to be car and i will hit ok so right now we have created a name for the library but if we want to target this in the javascript we will have to create an instance name and i will also call this car like so but this name is important for the javascript and library name has nothing to do with javascript and right now these uh these dirty parts i will have to all of them convert to symbol so i will go with f8 and i will just call it symbol one symbol two and like so you can name this but uh because we are because we are uh uh going to create names for the javascript i do not need to create the names for the library so i will go to the library and i have all of the symbols in here one thing that you can do is to create a new folder in here call it to be direct and put everything not everything but all of the symbols that you created in there so at least we are going to stay somehow organized uh in the in the library uh now i can go ahead and create these instance names and i can i can uh call this to be d1 for example and this one can be d2 and this one can be d3 and so on so i am going to have uh seven of them or you can you can get rid of some of them or you can create more of them like so and this one is going to be the six and this one i will actually get rid of it we do not need to have it so i'm going to have six of them fine right now what i want to do is click anywhere on the stage and then change the stage color to something which is not white so i can go with maybe something like this and hit ok basically when i hit ctrl enter i want to see uh the border of my canvas because if this was wide we wouldn't see where our canvas ends all right and now what i want to do is go back to the illustrator and uh i would like to i would like to get uh this so i'm going to hit ctrl shift g to ungroup this and right now uh this is going to be still grouped together this top part so one more time ctrl shift g or you can right click and choose ungroup and right now this is going to be one part and is going to be one more part so one more time on this one ctrl shift g and right now we should have uh this separated and these drops separated so i will click on this and this and hit ctrl g or right click and group so this is going to be one part and i will just take one drop from here and we are going to be duplicating this in the animate so i will uh click with shift on our desktop and one of the drop and i am going to drag this like so to the to the adobe animate and again uh paste using i file imported preferences and okay i will hit q which is free transform tool and with my shift i am going to scale this uh like so okay uh i am going to convert this to the symbol so f8 and this one is going to be top and uh this one i am going to i am going to hit f8 and i am going to call it uh drop like so and make sure i forget to say that those are movie clips we don't want to have buttons and we don't want to have graphics like so and right now uh this one i can also scale it little bit maybe like so and uh i am going to duplicate this so with alt or option and i'm going to hold shift to stay on the same line i am going to duplicate this like so and like this okay let me move them little bit like so and then duplicate them like so so something like this okay fine and right now i would like to select all of them so i'm clicking on them with the shift and i will click f8 and i will call this to be drops so basically i won't have all of them in uh in one movie clip and uh i'm going to create the instance names so this one is going to have an instance name of the top this one is going to have an instance names of the drops and the card already have and these threads also already have instance names okay fine and uh let me let me actually uh scale this uh card a little bit so i will select my dreads layer and my card layer and uh i will hit q and i will scale this down a little bit like so and position it a little bit at the bottom now what i want to do is go to the to the drops layer like so and right now i will have to convert this to the symbol one more time because i want to animate it in here and in order to animate something it has to be uh simple so it is symbol in here movie clip and drops and in here they are individual movie clips but i want to animate them all together so basically i will highlight them one more time click f8 and i can call this to be drops in for example or whatever and i will hit ok right now i will create the animation so i will go maybe to frame 40 and i will click f6 and uh i am going to uh animate this so i am going to hold shift and put this down little bit light so and i will click anywhere in between and i am going to create classic twin so we are going to have an uh animation like so and at the at the beginning we can put this uh like so to the top now i will create new layer and uh in here i will click on the first frame and there is this label and name and i i will call this uh i don't know full d like four drops or i can call it four drops and we are going to be using this name uh with the with the javascript like so okay and now i will create one more layer and in here i will right click i will choose actions and i will very simply type this dot stop like so and basically it is going to be on the pressed frame so when we hit ctrl enter we are not going even to see the animation if i would put this uh this stop to the frame 40 this would place once and then it would stop in there uh but yeah you will later on see why we why we have this stop in here okay fine so right now i will go back to my scene one like so and i will create new layer and this layer is going to be code i will right click i will choose actions and in here i am going to type this dot top add event listener we want to start with click later on we will change this to mouse over but so for now i will go with the click and i am going to call this to be drop f so basically this means that uh if i click on the top which is this one i am going to call drop f function now now i will create the function so i'm going to type function drop f parentheses curvy parentheses and now i can type something in here one thing is that i mentioned this in my introduction to javascript when you are outside of the function you are using this and when you are inside of the function you cannot use this but you will have to create a variable let me put the variable at the top i will call it let let it let is just way how to you can declare variables you can go with the bar uh you can go like this one but i prepared a led because that's the modern javascript and let root is equal to this and basically uh when we are inside of the function we are going to be using root instead of this so i can type root and uh check whether my code is working so i will type car v the blue is going to be false i will hit ctrl and if i click on the top my car has disappeared so it is working what i can do is i will click on the drops layer and you can see that it is drops and i will go inside and we created the name four drops so with these two names i will go in here and i am going to type root develops and goto and play like so parentheses and in the quotation marks uh the name so it was full drops i guess i will hit ctrl enter and if i click on the top my card has disappeared and and i have some kind of error so let me check what is the error okay so i type root drop but it should be root drops so i will hit ctrl enter and right now it is working okay so i will go back to my code by clicking f9 and this line of code i do not want to happened because because we did we wanted that line of code only to uh to check whether the code is working so we have root drops go to and play and you can see that i have capital a and capital p and the name that we created okay and i will hit ctrl enter and if i click this is going to animate and then go back to the top and if i click one more time nothing is going to happen and if i click one more time again it is going to animating if i click one more time nothing and so on so it would work every every second time and that's not what we want so i will go back to back to the drops like so and right now i am going to position this a this uh this action that we created i will just drag it and put it to the to the end like so and right now if i hit ctrl enter uh initially it is going to play we had it at the beginning uh to to don't play but right now the stop is on the end so initially it is going to play and if i click it is going to play and if i click one more time it is going to play so right now it is going to be working fine but there are two issues one is smaller one is bigger uh the bigger one is that the drops are visible in here and that's not really cool uh so what i will do is uh change this animation so basically uh i will create a keyframe somewhere here f6 and then click on the last keyframe click on the drops and make the alpha of the drops go to zero so basically it is going to be animating down but then it will disappear i will hit ctrl enter and indeed it has disappeared like so uh when we are using classic twins uh there is also option with motion twins uh it can be a little bit issue uh to to move your move your keyframes but what you can do is select everything like so this and this and drag it like so to make it faster okay and i will i will position my uh my action in here and everything in here i will hit shift f5 or i can go with right click and uh remove frames and we got rid of all of the all of the frames and basically we made this animation faster like so and i will click and every time i click this is going to is going to play okay and i said we have we had two issues uh one of them was uh uh was that the drops didn't disappear and second of all is maybe you don't mind that at the beginning uh there is this animation plate but maybe you might and you only want this animation to play only when you click and that's what we can change with the code and we can go ahead and uh in my code i can go ahead and type that this we are typing this because we are outside of the function drops visible is going to be false so basically if i hit ctrl enter they are not going to be there they are maybe falling but you do not see them and in the function in here what i can do is type root because we are in the function uh drops visible is going to be true so basically at the beginning we said that drops are not visible and then when we click on the top we call this drop a function and in the drop f function firstly we make drops visible and then we play the animation so i will hit ctrl enter and if i click uh this is going to play one thing is if you click fast it won't play until the end and it will start to it will try to play it one more time but yeah now what i want to do is is i will create an array and in the array i am going to have all of the all of the drills of the car so i am going to create a array light drills like so is equal and it is this d1 up to d6 so let me let me uh paste them like so until i will get to d6 and i will make a little bit more space like so this is going to be d5 and this is going to be d6 and these semicolons they are optional in the javascript so you can but you do not need to use them so right now i have these let the routes and i have all of them in here and what i can do again just to test whether this is working i can type all zero and uh la's are zero based so it means that direct zero is this element the one if i put one in here it would be this element and the last one is element number five but i can type like so visible is going to be false i will hit ctrl enter and indeed this one has disappeared i'm going to hide all also this one and this one so you can see it so i will just duplicate this and this is going to be number one and this is going to be number two and right now you can see that they had disappeared okay fine i can go ahead and get rid of this part of code and i can create a function and i can call this function to be a height threads like so okay so i am in the in the function and i will create uh one more variable and i can put it in here and i can call it let my dirt or anything is equal to zero and in here i am going to type that uh my droid which is zero uh visible is going to be false and then i can type that my dirt plus plus which means that uh my my dirt this number is going to all increase by one okay and what i can do is call the function hydrates in this function like so okay i will i will hit ctrl enter and if i click i will go to f12 okay so one more time oh okay okay uh the thing is that uh i was a little bit confused uh we have this line of code that uh this element zero in the direct array is going to be visible so i will get rid of this hit ctrl enter so right now it is visible in here and i can click and it has disappeared and if i click this one will disappear and if i click this one will disappear and so on and so on and like that okay and basically i will try to explain it one more time uh we could make all of these uh in the in this function so i i wouldn't have to uh create new function i can go ahead and get rid of this like so and i can cut this in here like so and i will put my variable in here this is not necessary to put it above but it's good practice and i can delete this for now so this would be uh working the the same i just wanted to put it put it on the on to separate it on the on the separated function okay so i will go back come on so i will go back a couple of times like so and i'm going to have this uh have this in the in the separated function but you can work uh as you want and basically i am i am telling that uh let migrate is equal to zero and in here i have this migrate so this is zero invisible is false and then i increase this my dirt plus plus to 1 so the next time i click i will have this number one i can show you one more time that in this it is working the thing is that i declare the variable outside of the function because if i would declare this variable inside of the function this wouldn't be working because uh because this would be zero then we would change this to one but again at the beginning of the function it would be zero so this has to be outside of that function like so and now what i want to do is if you take a look it doesn't look good that i click and it disappears immediately okay it should disappear when the drops touch it or at least they are not going to touch this one but at least when they touch uh this in here and what we can do is uh is use something something called uh set timeout function so i can actually show you and uh you can get uh something like this and this is just the function that is going to happen after some time so i'm going to copy this and i will go to the adobe animate i will go back to my code by clicking f9 or right click and actions and in here i can i can type this like so in my function this uh set timeout function so it is set timeout then there are the parentheses like so then this is the function and uh this is the this is the body of the the body of the function when where we can put our code so they used alert uh hello i don't want this so i will get rid of this i will create some kind of space and in here i am going to paste uh my code like so and uh this 3000 means 3000 i guess is milliseconds uh but it means like three seconds if i change this to one uh one thousand it's one second 500 would be half second and so on so i will hit ctrl enter and i will click and this is this has disappeared after one second i'll take a look at this one i will click and it has disappeared after one second and it is going to look better on this one so you can see like so and uh you can change this uh time to anything you can go with 800 you can go with uh 500 or you can go with two thousands uh that's really up to you okay and right right now what i want to do is uh is i would like to stop uh this falling uh when we uh clean everything because uh right now uh everything is cleaned and it is still i'm still allowed to click this so i would like to get rid of this and i also want to have something to appeal when i when i clean the car so i can go ahead and create some kind of score we are not going to be displaying this color but i am going to type lead scotty is equal to zero uh then what i want to do is uh in this function where uh i am cleaning the dirt i would like to type that my score is plus plus so plus one okay so we set the score plus plus and we will create a new function and the function it will be a result and we are going to call the function from here and then i will create the function outside so function function result like so and in this function i can do something like if then the condition so if skoda is equal to 6 i would like to and i would like to remove this even listener so i can i can copy this ctrl c and i can paste it in here ctrl b and i will change this from this to root because we are in the function so root top and instead of add i will type remove even listener so i will hit ctrl enter and i will click and if i write everything correctly right now okay so uh maybe i didn't write everything correctly let me go uh back to the back to the animate and indeed i created the mistake because i misspelled the result so it should be like this and right now very quickly i will click like so and right now i am not able anymore to to do this uh now what i can do is i will i will hide this importantly and i will create something or some kind of text and the text is going to be maybe red like so and i will create new layer and i will type your car is clean like so i will make this bigger like this let me show let me see okay so this is fine i don't want this this text uh to be overlapping with uh with the top so something like this again i will i will hide this and i can create some kind of uh button in here and i will change the color to maybe something like so and i will adjust it this is really up to you you do not need to do something like this and i will i will get the text maybe white color and i will type go up or get discount something like this and i will make the font smaller and i will position it like so uh so this one i will click f8 and this is going to be text clean for example and this one i can click f8 and it is going to be button clean okay or we can we could put them to one symbol but i did it on the two so this one i will uh in here call also text clean so this is the important name and this is going to be a button now but no clean like so i will go back to my code and if i hit ctrl enter they are both going to be visible at the end so what i want to do is hide them so at the beginning i will type this text clean visible is going to be false and uh the buttoner clean also visible is going to be false i will hit ctrl enter it has disappeared fine and now what i will do is i will show this on my on my result in here so like this and i will have to change this to root because we are in the function like so and i would like this to be to be true and this one is also going to be true like so i will hit ctrl enter and if i click like so few times this is disabled and i have this text your card screen and uh and the button uh now what i will do the last thing is i will change this i could have changes earlier to mouse over mouse over and also in in here to remove this i will have to change this to mouse over mouse over but when we have mouse over we will have to add or one additional uh line of the code because you you can see that it is not going to be working like so we will have to write in the code that stage dot enable mouse over like so ctrl enter and right now it is going to be it is going to be working yeah so like this you can play with something like this but i just wanted to show you that in the adobe animate you can create some kind of interactive banner like this and you can do this for your website or maybe for some for some banner i'm not really sure whether this would be working for the google ads but you would have to add some additional or create some additional steps in order to make banner work in google ads right now i will just very quickly show you how you can export your file so i will go to the place where i save this so it is in here and in here i have i have my animate file and i have my js html and uh images i will go ahead and get rid of this like so so i only have my animate file and my recovery file i will go to the animate and i will go to the file publish settings and in here i'm going to choose my file choose my folder so here i am or here is the place where i have my animate file you do not see it but it is in here and i will create a new folder i will call it index you do not need to but i prefer to work like so and this one i will also call index and i will hit save in here export image assets there is an option to have texture spreadsheet or image assets i would like to go with image assets like so and i'm going to hit ok and i will go to the file and i'm going to hit publish and this is going to publish this to the index and right now in the index we have html and js and i will open this in html and it is indeed going to be working like so okay uh if you have an image images files in here uh it means that you didn't change this from the sprite sheet and there is possibility that it is going to not work for you in here uh there is possibility that you are going to have an error like the cross domain images something this error doesn't mean that the panel is not working you would have to put this on the real website or on the local host to make it work it just doesn't work in the browser like so but on the little website it would normally work uh but yeah i'm going to provide you i am going to provide you this file in the description and if you enjoy this tutorial hit the like maybe subscribe and hopefully i will see you in some next tutorial take care goodbye

Channel: MotionTuts

Views: 1,678

Keywords:

Id: XlFuiykHI9E

Length: 41min 56sec (2516 seconds)

Published: Thu Mar 18 2021