Adobe Animate CC 2021 - interactive HTML5 banner tutorial - JavaScript in HTML5 canvas (banner 1)

so hello and welcome uh in this tutorial i would like to show you how to create a simple interactive banner in adobe animate cc 2021 uh so right now i will show you what we will be doing today uh so we are going to have something like this and we have some coupon number for the discount and it is hidden and i will have to go with my mouse over these particles and they will fall down and they will show my number and then i can click on the button and go to some website this is right now connected to adobe website but you can put it to any website so yeah that's it okay so i'm in adobe animate and i have created an html5 document which is 300x600 but you can go with any size you want at as long as it is it html5 uh so right now i will go to my rectangle tool and i will get some color i can go with maybe some kind of orange like so and i'm going to create a shape like this you do not need to do this this way you can create multiple uh separated shapes like so and then just duplicate them like this but what i want to do let me delete this is i will get an elastic tool uh it is in here and uh you should have something like this in here and if not just click somewhere and or something like this should appear and in here you can uh create the size of the eraser tool and i would like to go with maybe something like four or three something like that okay and so right now what i can do is go ahead and do something like this and then i can divide this on the maybe 10 parts like so okay and right now these parts are going to be separated like so what i can do is click on one of them and i can go to the modify and i am going to choose our convel to symbol all the shortcut is going to be f8 and i can call this to be symbol one that's fine and uh with the shortcut f8 i am going very quickly to do this for all of them like so so don't worry about all these symbols names uh these names are not important for us right now because we are going to be putting to these shapes uh names in here in the instance names right now i can go to my library and in the library i have my symbols and if you have a project where you have more uh stuff and you do not want to have symbols like this you can create a new folder i'll call this to be uh pieces for example like so and uh hopefully i didn't misspell pieces and you can drag all of them uh like so to the folder like this uh right now what i want to do is uh create an instance name or for all of these shapes so very quickly again i will have to call this for example p1 like the piece number one and i can do this or to all of them this is going to be p2 the next one is going to be p3 and like so i will have to create a name for all of them uh there is also an option to uh create uh shapes on the stage uh directly from the library but that's uh that's topic for another tutorial so right now we will we are going to do this uh like so and the last na last one is going to be uh p10 okay fine uh right now we can uh just create some kind of very simple text and uh we can change this color to maybe something like blue and i can type in here uh something like uh get your coupon coupon number and hopefully i'm not misspelling anything uh if yes yeah i'm sorry but this tutorial is not about it and i can uh i can make this little bit smaller maybe like so okay uh what i can do is click on the stage and uh or anywhere in here and i am going to have an option to change the stage color and i can change this to maybe uh some kind of uh tint of orange something like this so basically when i hit ctrl enter uh for the testing in the browser i am going to have some kind of borders because otherwise i wouldn't see where my canvas is if my canvas was white now what i can do is create new layer uh so i'm going to create a new layer and this layer i'm going to call uh numbers and later on we will put this numbers layer below my layer one and i'm going to get the text tool i can go with this blue color and i'm going to just type some random numbers like like so okay this is just some kind of uh coupon number that uh you would use on some website to get the discount uh so i'm going to be put i'm going to position it like so and here and right now i will put my numbers layer below the layer 1 so the text is not visible and as i said you do not need to do this uh this way as i did you can create multiple multiple shapes like so or you can even create triangles whatever just somehow somehow hide uh the the text with some shapes and i will have to get rid of all of the parts uh like so okay fine uh i will create a new layer and i will right click i will uh i will choose actions and what i can do uh let me make this smaller for now uh in here there is an option to click this code snippet these two arrows and uh this is going to give me an option whether i want actionscript or html5 i would like to go with html5 and in here there is an option for the uh animation so i will choose animation and uh i would like to go with animate vertically so i am going to select one of my one of my shapes and i'm going to double click on the on the animate uh vertically like so and he is going to give me uh some kind of code uh this top part and let me let me zoom in a little bit in here so this top part this is commented out you can create comments by slash and astrix to start the comment and ask alex and slash to close the comment or just uh slash slash for the one line of the comment and these are just some kind of instructions so if you want you can go ahead and read them uh but i will i will get rid of them and in here i will again make this little bit bigger uh i am i have uh some kind of even listener so this a diva listener we have even listen antique uh in here you can have click mouse over double click and click tick is just another uh way of listening uh then we have the function that we are calling and this bind and this i already created a tutorial uh which is called uh javascript in adobe animate i can provide the link in the description and i explained uh there uh what does this mean but there we have something like this and right now if i hit ctrl enter my shape is going to fall immediately so i will refresh this and it is falling and basically we have this uh p1 which is our r shape y position i could change this to x position and right now it would go to the to the right maybe you saw it uh it's not very you don't see it very good because it goes through the shapes but yeah there is this movement to the uh to the right okay but i will change this to the y and for example if i would change this to negative 10 this would go to the top like so and uh this 10 it means like uh 10 pixels in one frame i guess it's like so and this plus equal means that it is going to be increasing and moving if i just had uh equal uh it would only position my shape to position y 10 okay if i would change this to maybe uh 400 uh and i would hit ctrl enter it would position it somewhere here because this is position 400 of the of the pi here is 200 maybe and this is 600 so yeah but i will i will put this back to 10 and i'm going to make this to be plus equal you can go with maybe 20 and this is going to make this uh faster if you want like so okay uh now what i will do uh is i will create a variable and i am going to call it uh late root is equal to this okay let is just a new way of declaring variables not as new but maybe some so for some of you or you know that there is this var and var is just older way of declaring variables you can also of course go with bar and it's not going to influence this right now but i prefer to work with the light we hope you have led or const that's the model in javascript so let root is equal to this and i will maybe for some of you i will over complicated this but i want to make this simpler to understand you i will get rid of this bind because if you if you want to access something outside of the function you are going to be using this and something and if you want to access something in the in the function you cannot use this but you will have to create a variable like so and use the variable in here all right or if you want to use this inside of the function you would have to create something like this bind and this and basically this bind and this this part of code will just allow you to use the keyboard this inside of the function but if i get rid of this part of the code i will have to create the variable that i created also right now we have only uh this a diva listener tick and this is the name of the function i can change this and i will i will call this to be fall down or this name is arbitrarily arbitrarily i will copy this and i will paste it in here because uh this means that uh we have even listener to this two whole object thick is just listening and we are going calling for down function and here is the falldown function and we have this animation in here i can go ahead and duplicate this and change this to root p2 root p 4 or 5 like so and right now three of my pieces are going to be falling down one two and five okay fine uh now what i want to do is create a one array so i'm going to type right and i will get rid of this space in here so late and i am going to call it parts and i am going to set this equal and square brackets uh square brackets will allow you to create an array and in here i'm going to type this p1 comma and i will i will copy this ctrl c and i'm going to paste to this array all of my parts that i created so up to p 10 like so p5 p6 and later on we are going to be uh looping through this like so p9 and last one is going to be p10 okay so i will just check whether i have this correctly but it seems like yes okay i said and semicolons at the end they are optional you can use them but you do not need to but it's a good practice because other programming languages require them or some of them requires the semicolons okay and why did i created these parts the reason is that right now what i can do is so i will get rid of this so right now if i hit ctrl enter i have only the first one for link and i am going to comment this out so slash slash so napping is nothing is moving and what i can do is type in here uh parts and right now it is located in here this is uh declared this p1 it is still going to be working in here but you cannot directly type in here this okay but yeah uh parts uh and here is going to be number i will put zero and in the second i will explain why i put that zero and i'm going to type y is plus equal 10 and i will hit ctrl enter and the first one is going to be falling and basically when you have array like so uh right now we have 10 uh elements or 10 things in the in the array and arrays are zero based which means that this one this element i will call it element is num plus zero this one would be number one and so on and uh by typing these parts and the number i can target or some of the elements if i change this from zero to one the second one or this one is going to be falling okay and you can go ahead and duplicate this like so and again this is going to be number two and this can be number four i will hit ctrl enter and uh 0 2 and 4 head fall down ok fine right now i'm going to get rid of or get rid of this like so and i'm going to create a for the loop and in the for loop i'm going to loop uh through all of these numbers to make all of them fall down so i'm going to type for parentheses and i'm going to declare a variable in the for loop so let i is equal to 0 it is equal to 0 because we are going to be starting with the 0 then i am going to say that i is going to be smaller than 10 because as i said this is number 0 and this is number nine so we want this to be looping from zero up to when i is smaller than 10 which is nine and i'm going to type i plus plus which means that i is going to be plus one plus plus is plus one uh so it means like i is going to start with zero and do something with a zero and then the code is going to repeat but i is going to be plus plus which is going to be number one and this will be repeating the code until i is going to be 9. hopefully this makes sense and i will type in here parts i and i am going to type the same thing is plus equal 10 okay i will hit ctrl enter and right now all of them are going to fall down if i change this from 10 to 9 it is not going to include the last one this uh this one and i will hit ctrl enter and you can see that this one is going to stay and the same thing is uh wait a minute i will go back to my code by clicking f9 or right click and choose actions uh like so and uh if i change this i to one it would mean that it would start from the one and this one would not also fall down but i want this to be zero and i want this one to be then like so one more thing that you can do and i don't want to over complicate this but this is good practice instead of typing 10 in here you can type parts dot length and this means that uh this is going to give you a number and the number is going to be length of the part and length of the parts is how many elements are in there and in our case there are 10 elements even though this one started with zero and this is element number nine but together there is uh ten elements and i will hit ctrl enter and all of them are going to fall down and if i would change this to minus one it would be nine and uh this one would stay and the reason why this is good practice is uh sometimes you can add things to the la or remove pins from the la and if i would have ten i would have literally written that there is 10 items but with this parts link it is going to update if i add or if i remove something from the from the array okay fine right now i will have to create uh some more code because as you can see they are falling immediately but what i want to do is to make them fall when i go over them with the mouse so let me let me comment out this part of code so far so i'm i will hit slash and asterix for the start of the comment and asterix and slash for the end of the comment and later on we are going to get this code from here but so far i don't want to don't want to have it so everything is on the position and let me check if i'm recording yes i am and my microphone is on okay i just had to check and i will i will type four uh which is again for the loop and the same thing i will write one more time so let i is going to be equal to zero i is going to be smaller than parts length and i plus plus okay and in here i am going to create even listener uh for all of my parts so i'm going to type parts i add event listener i will start with the click even listener later on we will change this to mouse over but when you want to create mouse over there is one additional line of code that you have you will have to create so so far i will go with the with the click and i am going to after click create comma and in here we have two options we can either go with anonymous function or which i explained in my in in my introduction to javascript or we can call some function and i will call the function which is going to be fall down and i will call it one or fall down f like so uh so i will copy the name of the function and uh still in the in the in the for the loop so don't go outside of the for loop because uh this eye is only you can use this i only inside of this loop not outside of the loop so in here i will create the falldown function and i will have to write the function name so function fall down and right now what i can do is for now type parts i visible is going to be false so basically this means uh this whole code is that we have the for loop so the i is going to be from 0 to 9 so it is going to include all of our uh all of our parts from our array and we are giving all of them even listener and then we are calling the function for down and in the array i don't know knowing the array in the for loop still we have this function fall down and we are saying that parts i is not going to be visible which basically means that if i click on one of them that one should disappeared but it's not working so i will hit f12 and i am going to have some kind of error and i hope that fall down is not defined by the way you can right click and choose inspect on the google chrome and it is going to open you something like this and in the console you can check your errors if you don't have any error this is going to be empty so i will go back to my code and i i will check where i have my mistake okay i can see i i wanted to comment out also this line of code because right now i am calling the function which doesn't exist because i commented outed function so let me cut this and paste it in here because as i said i wanted to comment it out all of this part so right now i will hit ctrl enter and i will click and if i click on one of them that one is going to that one is going to disappear okay uh let me let me change this to mouse over and you will see that it is not going to be working uh right now because if you want to use mouse over uh you will have to and i will put this number at the beginning of my code add one additional line of code which is stage dot enable mouse over and parenthesis and right now if i hit ctrl enter this should be working with the mouse over and indeed it is all right fine so now what i want to do is instead of hiding this hiding these particles you can do it like so if you want but i will type in here uh this even listener so let me let me copy this so this is the even listener for the tick which is like checking the stage very often uh but i will i will get rid of this and i will paste this in here one thing that i will have to do is change this this to root because we are inside of the function so root add even listener tick and we can create fall down f two so we are going to be calling one more function and in the in the function in here below the even listener i will have to create the the fall falldown function so i will type function fall down to parenthesis curvy parenthesis so you can have functions in the function and all of them that is in the for loop uh here and in here in this function fall down too i am going to type this my uh this code root p1 i is plus equal to 10 but i'm not going to do it this way but i will type parts i because we still have access to this i because we are inside of the for the loop and y is plus equals 10 okay and right now if i didn't do any mistake uh this should be working and i have some kind of at all so i will have to check where is my where is my error so i will go back to the adobe animate okay and i can see that uh in here i have a function fall down two but i should have fall down f2 so hopefully right now if i hit ctrl enter it is going to be working and it indeed it is uh so you can see that uh there is a very big possibility that while you are writing the code you are going to create a mistake which is going to make you an error and these mistakes are stupid things like this so one time i forget to type f in here so that's why it's good to copy and paste these names when you are calling the function and one time i accidentally put this uh comment below but yeah uh that's good about the console when you where you have an error because it is going to say or for example i had fall down is not defined and you know that you have some kind of error with this uh fall down okay so uh let me uh show you this comment by this uh code one more time so we have this for a loop and the parentheses are this so this is opening and closing the for loop then in the for loop we have even listener for all of the for all of the parts and the even listener is mouse over and in the even listener we are calling function fall down f then we have the function falldown f and in that function we are calling another even listener which is stick which is fall down f2 and then we have inside the function and uh that we are animating the parts uh this can be a little bit complicated for you but try to write this code some or maybe a few more times although or try to try to read or throw out the lines because it's it's pretty short okay uh so yeah and the effect is like it's it's working let me very quickly show you uh why is also good to have these uh this parts length so very very quickly i will uh create uh one more uh one more parts so i will i will go to new layer or you can create new layer like so and by the way uh don't do anything on the actions layer in the actions you have these uh you have this code with this a and don't do any anything like uh so in there okay if you do something like this uh you can either delete it or if you create multiple things in there what you can do is if you do something like this you can right click on that layer or on the layers and choose distribute to layers and it would it would distribute it to the layers and then if you have multiple layers you can put them to one layer by right clicking on selected layers and choosing merge layers but that's just for your information and i will get rid of this so i will i will create a rectangle i can change the rectangle color to maybe uh green and one more time i will do something like this i will go to the eraser tool and i am going to do it like so and i am going to have 10 parts and again i will have to convert all of them to the symbols like so so very quickly i will do it i could have skipped this part for you but this is 5-10 seconds so i'm not going to be skipping it like so and uh right now i will create different name so this can be uh like so g1 like the green one and uh i will put these names in here like so so the same thing there as we did uh with the orange ones and i am doing this because i want to show you uh how quickly you can add something like this to your code or once you have your code created so last few of them g7 uh g8 g9 and the last one is going to be g10 okay so hopefully i named them correctly all of them i will go back to my code and i will make this bigger and i am going to duplicate this this layer so i will hit ctrl d it is going to duplicate all of the layer or you can you could you can just ctrl c and ctrl v and i will change all of this piece to g's like so g4 g5 and like this so i am almost done and g10 okay and right now what i can do is i will delete this beginning so i have i have started from this g1 and i can get rid of this in here and i will just add comma and i will get rid of this semicolon so basically uh this is going to be continuing of the of the array and i can actually hit uh back to put it on one line but you can you can without any issues hail or space is like so and even like so this is uh fine this doesn't affect your your array so this is one long array which starts in here and ends in here and right now this array have 20 items but because we defined that uh for loop don't have the 10 but it has parts length and parts length is right now 20. if i hit ctrl enter uh right now all of this would also disappear and what would be maybe a good idea is to is to put these uh parts uh over in here like so so i will hit ctrl enter and right now you have you have multiple parts like this okay and oh yeah so we are we are almost done uh one maybe thing that you can do if you want you can create uh some kind of uh button like so i can go with maybe blue color like this and i can type in here uh get discount or something like that so get discount and i will i will make this smaller again if i misspell this um sorry and i will hit f8 and i can call this to be simple 11. it's fine and this is going to be go to web or whatever name you want to put this and right now i will go back to my code i will hit f9 to get in my code i will adjust this not like so i will adjust the size of my code and again i can go to the the code snippet actually i will i will have to or i will have to select my select my uh button and then i will go to the to the code snippet to the actions and there is an option click to go to the web page i will double click and it is going to give me uh this uh code i can get rid of this part like so and right now i have this together with my code so like this and this is again even listener with a click and calling the function or which is arbitrarily named that adobe animate created and here you are uh you have just window.open i have the tutorial about this on the on the on the channel also right now everything i will hit ctrl enter and if you click on the button it is going to give you or to the adobe animate website you can change the url in the code and uh yeah or you can do something like this and when you have the numbers uh you can go to the website and uh it is going to and it is going to maybe put you to some website when you can where you can use this uh coupon number to have some kind of discount discount uh so yeah uh this is it uh i can maybe show you uh how you can publish your uh publish your files so let me uh go in here and in here i have uh my animate file and i have also this javascript html and images like so i will get rid of them like so i will go to the file to publish settings and in here i will click this icon and this is going to allow me to go to some kind of folder so i will find my folder so here i am here is the place where i have my my animate file you don't see it but it's in here i will create new folder i would call it index but you do not need to and i would also call this one index like so and save and hit ok and one thing maybe in the publish settings is that there is an export image assets and there is an option either texture spreadsheet or image assets and if you have the texture on all the sprite sheets there is possibility that this is not going to be working on the browser but you would have to put it on the little website or on the local host to work but uh i usually go with image assets and in this case it it should be fine so i'm going to hit image assets and i will hit ok and then i can just hit publish okay and right now in the index i am going to have my html and gsjs and if you have some images then we would have an image folder in here and if i double click this is going to open me this in the browser and uh like so and the thing is that uh if you have an images sometimes it can happen that it doesn't work like so and you would have an image in the console about or some something like close domain images but uh that error uh if you put this on the local host or on the little website it's not going to be there but yeah there is possibility to have something like that uh but yeah this is it for this tutorial it was basically to show you this javascript and how you can work with it and i believe that you can use this in other projects or you can even use this with html css and javascript so if you have some questions or something you can leave them in the comments or you can leave any anything in the comments and if you like this video hit the like uh maybe subscribe and if you decide to subscribe maybe hit the bell button to be notified and yeah thank you very much for watching and see you hopefully in some other tutorial take care goodbye

Channel: MotionTuts

Views: 722

Keywords:

Id: n77VXaxaEYA

Length: 40min 31sec (2431 seconds)

Published: Wed Mar 17 2021