HTML5 GAME in ADOBE ANIMATE CC 2021 - ANIMATE and JAVASCRIPT TUTORIAL

so hello and welcome uh in this tutorial i would like to show you how to create a simple game in adobe animate cc 2021 so right now i would like to show you what we will be doing today and as you can see we have some kind of foreign coins and if i catch them i'm going to get the points and if i catch all of them i am going to be winner then there is going to be a button try again and if i click this it is going to restart the game and again i can catch only some of them and if i if i don't catch all of them i am going to lost the game and i can try again so yeah that's basically what we will be doing today so i created an uh html5 uh document which is as you can see uh 400 by 800 but you can go with whatever size that you want whatever what i want to do at the beginning is to change the color of the of the stage of the background so i will click on the stage and i will just choose something which is not white like so okay so right now i'm going to create my coins and i will go to the oval tool and i'm going to choose some kind of color and i can go with maybe something like this and with my shift i'm going to create a wall like so i will hit ctrl g to group this and i will create one more oval and i will make the color little bit or i will change the color a little bit i will create one more oval which is little bit smaller and again i'm going to hit ctrl g you do not need to group this but i just prefer to work like this and i'm going to highlight both of them and i'm going to align them like so so they are exactly in the center and right now i'm going to get my text tool i will get maybe a black color i want to have the static text that is option to have the dynamic text i want to have static one and i will just type one like so okay and you can also align this uh one to the center like this okay so right now i have my coin and i am going to uh i'm going to highlight all of the piles of the coin like so i will go to the modify and i am going to choose uh convert to symbol all the shortcut is f8 like so and uh make sure that it is movie clip and i can call this to be uh coin one this name is not very important it's just name for the library so right now if i go to the library uh i can see that i have my coin one in here but we will we are going to be creating uh other names which are going to be important for the javascript uh i can go ahead and double click on my layer one at the bottom and i can change this to be coins for example so right now if i click on the on the coin you can see that it is movie clip and you can see that there is an option for the instance name and this is the name by which we are going to be targeting this coin so i can call this to be coin one for example but again i want to just emphasize that this name coin one is important and this name in the library i could have choose any different name this is just for our library this has nothing to do with the with the javascript okay so what i can do is i can duplicate this coin or coin multiple times so i will just hold alt and i will drag this like so and like this few more times uh there is also option to uh get your vectors directly from the library but i think that that's a little bit more advanced and in this tutorial i would like to show you something in between beginner and intermediate so some of the things we are going to be doing like this so we are not going to work uh in the very efficient way all the time sometimes we will and sometimes we won't so uh this one is coin one this one i am going to change to coin two this is going to be coin three and like so coin four coin five and coin six and you can of course create as many as you want or you can create some which are going to be number two and you are going to get two points after you catch it that's really up to you so right now i'm going to create new layer and i will right click on this new layer and i'm going to choose actions or the shortcut is f9 and it is going to open me up text editor like this okay and you can scale your text editor as you want so you are going to be able to you are going to be able to see your your artwork okay so like this and in here later on i will zoom into my code but in here there is this code snippet okay so i can click on this code snippet and it is not going to be working yet because i will have to select my artwork but i just want to show you if you click on the code snippet you are going to have option to go with action script or with html5 canvas i would like to go with html5 canvas there are a bunch of options and one of the option is animation so i will open the animation and there are again bunch of options and one of them is animate horizontally and animate vertically you can go with the whatever of this but i would like to go with animate vertically so i will double click and you can see that there is the warning this action requires an object to be selected on the stage so i am going to hit ok i will click on my coin hopefully this is not going to disappear for you if yes just open it one more time so select your coin only one of them and just double click on the animate vertically and this is going to this is going to give me a code like this this part is commented out and you can create comments by uh slash and astrix like this to open the comment and ask alex and slash to close the comment so you can type whatever in dell and that is not going to be read by javascript so this is this doesn't do anything those are just instructions you can read them if you want and then we have some kind of code we have this adivan listener then we have tick which is uh basically you can have click you can have mouse over you can have double click and digi is just another uh another listener and then we have the name of the function and then this is the name of the function like so then we have this bind method bind method and then we have the function if you are not familiar with this you can go ahead and watch my introduction to javascript in adobe animate i have two parts and i'm going to provide them in the description so i'm not going to explain everything in here how it works because i already created tutorial for those one thing that we can do right now is uh change the name of the function because this name is and anime just created some kind of name okay and this name and this name has to be the same okay so i will go ahead and i will call this to be full coins f for example like the function i will copy this and i will paste this paste base this in here like so okay and then we have this coin one which is our coin y which is like the y position uh plus equal 10 okay so it's like every frame uh it is going to move uh 10 pixels i guess it's like that but basically if i hit ctrl enter uh we are going to have an animation like so okay and so far we don't have any even listener on this coin so if we click or just mouse over nothing is going to happen okay let me get rid of this comment i do not need it and i am just going to go with code like this uh i can go ahead and duplicate this line of code this coin one and i can change this to be this coin too and i can duplicate this few more times and i can do this for all of them if i if i want like this so right now one two three and four are going to be falling okay but this is not the most efficient way but you can of course do it like so and you can of course uh change the speed so for example this can be 20 and like so so you can play with this but right now what i want to do is show you how you can loop through this because right now we have only six coins so it's kind of easy but if we have much more of them uh there are that is good too it's good to use the loops so first of all i will have to create an array uh in order to be able to loop and there is no uh it will be html and css and javascript there are i would say better ways how to create loops based on classes and so on but in here we will have to manually write our items to the to the array so like this i will type light or you can go with bar that's up to you that is just new version of the declaring variables so let i will call it my coins is equal then these square brackets and i will type this coin 1 comma i will copy this like so and this coin 2 comma this coin 3 comma i can do it like so if i want so i will go this coin for this coin five and last one is six okay uh so right now and uh i can have this on the one line if i want so like this or i can hit enter and have this on the two lines that it doesn't change the array so right now i have this array and our arrays are zero based so it means that this one this coin one is item zero this one is number one and so on so what i can do is let me get rid of this i will only leave this one and i will comment this out so we can use slash slash to comment out one line of code and i can go ahead and type my coins then the square brackets and 0 which means that my coins is this array and 0 is this element like so and i can type in here that y is plus equal 10 okay and i will hit ctrl enter and this one is going to be falling and only this one okay and what i can do is duplicate this few more times like so and i can choose that i want to have one two three four and so on so i can hit ctrl enter and right now all of the address are also going to be falling but right now when we have this in this way we can create a loop so let me again uh get rid of all of this and i will type 4 which is the for loop parentheses and in here i am going to create a variable so let i is going to be 0 it is going to be 0 because we are going to be starting with 0 then we are going to declare that i is going to be smaller than 6 because we have uh six uh items in the array and uh we want this loop to end or when the i is smaller than six because we have zero one two and this is this is number five or you can uh instead of six type in here uh my coins length so this is the length of the of the array which is also also six because we have zero one two and there is six items and this may be maybe better if you don't know how many items you have in the array and i say items in the array it's probably not items but you know what i mean so you can go like this or you can go just with the number and right now i will go with the number but it's good for you to know that that is something like that okay again semicolon and then i plus plus like this and right now uh could be parenthesis and in here i will just type coins not coins but my coins i y is plus equal 10 and i will hit ctrl enter and right now uh all of the all of the coins from the array are going to be falling if i go ahead and change this to number three for example right now it would mean that only zero one and two so only only these uh three coins would fall so i will show you so we have one two three and no more okay but i would like to change this back to back to number six okay so right now what we can do is we can we can set the positions of these coins because we position them manually in the adobe animate but later on when we want to reset the game we will have to position them and there is easier and more complex way and i just want to show you right now the the easier way so i will just type function and i will type coins reset for example and this is something that we could done at the end but i would like to do it right now so let me get out of the out of the code and i will go to the view i will go to the rulers and it is going to give me a rulers like this and i am going to close all of the stuff in here and you can get the ruler like so okay and you can position it somewhere and when you are on the selection tool you can double click and it is going to show you the the position of the ruler so this one is on the on the 100 okay and this one is going to be on let me see uh 300 and something okay and this is the x position from left to right and we can do the same thing for the y position so i can check that this is minus 100 and this one is minus of 300 something so i am going to uh in the code manually position these coins uh there is option to position this a little bit more efficiently with the loop but uh that would be i guess too complex and that is going to be more complex stuff so i don't want to overwhelm you right now so basically i will just uh type my coins 0 and x and i want to set this to be 100 and i will duplicate this and i want to set my coins y to be minus 100 okay and right now we are going to be just copying and pasting so ctrl c create little space if you want ctrl v and i will do this for the coin number one and this one is going to be x 300 and y is going to be minus 400 like so and one thing that we can do is uh if we later on want to change the positions and we do not want to do this for all of them separately i can set that let my x 1 or just x 1 is equal to 100 i will duplicate this and let my x number 2 is going to be equal to 300 like so and i can set that uh that all my coin zero is going to have uh this variable and later on if i change this from 100 to 120 it is going to affect all of them okay and uh this one i will put in here like so and uh as i said there is option to do this with the loop but uh it would be it would be i guess to complicate it i can show you that uh maybe in some another tutorial so very quickly this is going to be number two and number two and this is going to be minus 700 this is going to be number 3 and number 3 and this is going to be minus 1000 and one more time i'm going to i'm going to copy this like so this is going to be number four and this is going to be number four and this is going to be minus minus like so thousand and three hundred and this is going to be number five number five and this is going to be minus one thousand and seven hundred so i am going to uh right now i just uh declared the function and i will have to call the function and to call the function i will and let me i don't know why i accidentally cut this so this should be my x one is equal to 100 okay are like so and i am right now going to call the function like this at the bottom like so so i will hit ctrl enter and if i did everything correctly uh they are going to be falling like so okay and just to show you uh i can i can go ahead and my animate and i can position all of the coins uh like so in here if i want and if i hit ctrl enter they are going to be falling anyway the way i want it because i said that uh with the said that with the javascript and the thing is uh for example uh right now i can change this to be 105 and it is going to affect all of them to 150 okay and you can also randomize this but every additional step that you want to create in game like this is going to make it a little bit a little bit more complex okay uh so like this and i will change this back to 100 and right now what i want to do is create a even listener which is going to hide the coins and also we are going to create the scholar uh so let me i'll create some kind of commands in here so that this doesn't so this is going to be a little bit readable so in here i am going to type um reset coins position and i can do something like this and i can i can copy this ctrl c and i can paste it in here and maybe i can add some asterisks in here and you can create something like this if you want it this is just beginning of the part of the code with uh with this and with the asterix you can say that it is closing that part of code or you can do whatever that and this is really up up to you okay uh so in here i can just type uh falling falling coins like this okay and again i can copy this and paste it in here like so and change this to to maybe astrix like this okay and now now what i want to do is create this even listeners so i'm going to type for which is for loop and again i will say that let i is going to be equal to 0 that i is going to be smaller than 6 and uh i want to have i plus plus like so and uh right now in here i'm going to type uh coins not coins but my coins i add event listener make sure that you spell everything correctly i i'm going to provide you this code but make sure that you don't have some mistake because it can happen uh i will start with the click later on we will change this to mouse over but for the mouse over there is one additional step that you will have to do so my coins y add even listener click and in here we have two options we can either call some function or uh create anonymous function i will go with anonymous again i explain this in my introduction to javascript in adobe animate so function like so or parenthesis curly parenthesis so function with the parenthesis and opening and closing the function with the curvy parenthesis and in here i'm going to type my coins i v the bloom is going to be false okay we will check whether this is working and then i will maybe try to explain one more time so ctrl enter and if i click it is going to disappear like so okay uh so basically we have for the loop again that we are going to have i uh from 0 to 6 so i am going to put even listeners for all of my for all of my coins and then we have this anonymous function and in there we are hiding the particular uh coin that we have clicked on so yeah and uh right now i will i want to change this to mouse aubry so but if i just type mouse over and i will hit ctrl enter this is not going to be working because i will have to and i will do this at the beginning i will have to type stage dot enable capital m mouse capital o over like so and parenthesis so stage enable mouse over and right now my mouse over should be working and yes indeed it is it is going to be working okay fine uh so now what i want to do is so i will i will go back to the adobe animate i will zoom in a little bit and i will just put these coins somewhere else so they are not going to bother me in here but that's that really doesn't matter because we as you know we set that position with the javascript and right now i have a empty layer in here layer 2 or you can just create the layer like so so new layer that's up to you but don't be on the actions we do not want to create uh any any anything on the on the actions layer and if you accidentally i will show you i'm going to be on the action layer and i'm going to create some kind of shape like this maybe that shape i'm going to draw something and right now i'm going to have the the keyframe on the actions layer one of the way is just deletes the shape and that's it or you can just click on the shape right click and choose distribute two layers and it is going to put it to the separated layer and action is going to be only code again just for your information okay uh so right now now what i want to do is create few things uh one of the thing is going to be text which is going to say that are a winner like so and i will make this little bit a little bit bigger like this uh then another text which is going to say that you you lost so lost like this and then we are going to create a button which is going to be for the uh well the new game i'll try again so i'm going to create the rectangle and i can go with maybe uh some kind of blue color like this i don't know like so and in here i will create a text like this and i will just type in here try again and this text is too big so i'm going to scale this down little bit like so maybe even more like this okay and now one more time what we can do is uh highlight all of them like this and align them to the center like so okay uh so right now i will click on the winner i will go to the modify and i'm going to hit convert to symbol this name is only called library but i can call this to be winner like the text and i will hit ok and uh i will click on the on the winner layer and the instance name i will just type winner like so uh the lost again i will have to convert to the symbols of f8 uh lost two for example and uh i am going to type in here to be lost and this i am going to highlight like so f8 uh i can leave this to be simple one if i want and i am going to call this to be button like button and with capital a again like so okay and one more thing that we need to create is uh our scholar so i will i didn't want to open this so i will get my text and i can go with uh with maybe black color you can design this as you want and i am going to type score and i will make this smaller and maybe i will change the color to or something like this so score and right now i'm going to create the number but i will get the text and i will change it from the static text to the to the dynamic text okay and i'm going to type in here uh 0 like so okay and the thing about this dynamic text is sometimes uh it is offset and i don't understand why so if i hit ctrl enter the scholar is going to be a little bit offset so in the adobe animate position this little bit down if you are going to have this offset and if you if you know why this is offset let me know in the comment or you can maybe search for this because uh i'm really not sure why it's behaving that way maybe it's something with the browsers okay and uh right now i will i will click on the zero and i am going to call this to be score okay this one this text i do not need to uh i do not need to uh convert the symbol because i am not going to uh change it okay uh so right now i will go back to my back to my code and at the beginning i would like to hide my winner text my lost text and my button try again okay so i will create the i will create the function uh and i'm going to call this function to be init like so and right now one thing that i didn't mention in this tutorial is that if you want to type this this inside of the function you will have to create you will have to create a variable for this or you can create something like this bind this and then you can use this inside the function but what i will have to do is create a variable let i will call it maybe root you can call this whatever is equal to this and when you are outside of the function you are using normally this and when you are inside of the function you are using this variable root so i will type root winner with the below is going to be false oh then let me duplicate this uh root lost is going to be false and also root button again okay and oh we just declared the function and if we want to call the function we will have to we will have to copy this in it and paste it in here like so so i'm going to hit ctrl enter and they had disappeared okay you can see that i can catch my coins but the scholar is not changing because we didn't set it in our code to change it so i can go ahead and create a variable i can create it up in here so let scoring is going to be zero okay so this is uh we are declaring the variable and another thing is i can change the text on of my score by typing this of if i'm into a function then instead of this i would use root so this score text and i can say that it is going to be 5 just to demonstrate this so i will hit ctrl enter and my score right now is going to be 5. all what i can do is said that this scored text is going to be equal to my score which right now is going to be zero but if i change this to maybe uh one then this is going to be one okay i guess it makes sense so something like this okay fine and right now what i want to do is in here where we are catching the coins we have my coins i visibly is false and what i want to do is i will just copy it from here both of these like so and i will i will paste it in here so uh basically when we catch the coin uh we want to we want to do something like this score plus plus which means uh plus one plus plus is plus one and then we want to display the scholar so this score text is equal to the score and remember i said that when we are inside of the function we will have to use root okay so i will hit ctrl enter and yeah indeed this is going to be this is going to be working okay and so right now i'm going to create the function uh which is going to choose whether i won or lost the game so i'm going to type function i will call this to be win or lost again parentheses uh curly parentheses and this can be maybe a little bit tricky but yeah we are going to go with if else statement so i will type if and i'm going to type uh if score is going to be equal to six i would like to have my uh root winner visible to be true and also i want to have uh play again so root uh button again visible to be true and else what i want to have is i want to have a root lost visible to be true and then i want to have also this button to be visible like so okay and there is one more condition then we will have to uh put uh to this if else statement uh but basically we want to call this function uh we want to call this function uh from these uh following coins so when we have this tick for coins uh in here we have this uh for loop and in here i am going to call the function and basically i will hit ctrl enter and it is immediately going to show the lost so basically what i want to do is uh when i am catching the catching the coins they are i will make them disappear by visibility changing to false but they are somehow still existing in the in the browser and they are still falling even though they we catch them they are not visible but they are still falling and i want to determine when the last coin uh which is going to be number six it is this one so if this number six is going to be up in here uh somewhere here then i want to choose whether i have six points or i don't have six points okay and you can think of another way how to determine whether you won or lost but basically i will get my ruler i will double click and this is position 900 okay i can position this again back or wherever i want like so but i will go back to my code f9 and in my uh in my win or the lost i have already if else statement but i can put everything to one if so i'm going to type if and i can type if my coins number five which is the last one y is going to be bigger than 900 then i want this to happen okay and i'm going to cut this curly parenthesis and put it put it somewhere here like so okay and uh don't get the don't get confused by this parenthesis we have uh this one which is with this one this is opening and closing the function then we have the if statement for everything which is for this one is with this one and then we have this inner if which is for this one and this one you can have if else inside of the if else that's pretty common okay so i'm going to hit ctrl enter and basically if i'm going to catch all of them like so and i'm not going to catch the last one if the last one hits the this position and i am going to have only score five or the last i'm going to get that i lost okay and the same thing if i catch all of them like so i am going to have the winner only when this coin it is like still falling and then it is going to display the diameter again you can play with this you can have many other ways how you can determine whether you won or lost okay and now one of the last thing that is that i want to reset this game with this try again button so i will go back to my back to my not screen recording but back to my animate and uh i can create some kind of comments again very quickly so in here i can type uh win or lost like this and i can copy this ctrl c and i can paste it in here and here i can put it with the asterix like so and i'm going to create a little bit more space and i'm going to type this button again add event listener i want to have a click or click event and i'm going to call the function play again like so i'm going to copy this name ctrl c uh now i'm going to create function play again and uh yeah what we want to have in this play again function uh first of all we would like to set our score to be zero so i'm going to type score is going to be equal to 0. next thing that i want to do is set my text of the score because right now we said only score but i will have to go to root score text to be to be read roots called text is equal to 0 or is equal to score we can go like this okay uh the next thing that i want to do is and in here we have this init position init position init function which said that winner is invisible the lost invisible and button again is invisible so i'm going to call this so i'm going to hide everything that is going to be there like so and one more thing is that i want my my coin reset which we did earlier uh when we reset all of the coins to the to the top i want to also call this one okay and that's probably it i guess so let me let me test this i'm going to hit ctrl enter and right now i'm going to try to win so i'm going to have them like so i will have to wait a little bit and uh yeah and right now i will hit uh try again and it reseted my score and uh yeah there is one more thing that i need to do uh because let me go back to the back to the other animate uh the thing is that uh right now my coins are invisible okay because i uh i catch them i set them that they are not visible i restore their position so they are again going to be at the top but i didn't already said uh that they are that they are are going to be visible so you can do this with the with the loop but i will very quickly type uh coins no coins but my coins my coins uh zero vz bill is going to be true okay and i will duplicate this few times as i said i already showed you how you can uh create a for the loop for this like so but right now i want to very quickly uh show you uh this so we are just telling that my coin zero is going to be visible and so on so ctrl enter and uh like this i will catch them i will catch the last one i will have to wait a little bit you can set some kind of even listener for the last coin to set it if you are winner or a loser and like so i will hit try again and they are again going to be falling okay so i will try to uh win one more time to see whether this is going to be working properly and yes it is and now i will try to i will try to lose okay so i'm going to catch some and some not and we will see whether it's working yes indeed okay so now this code as i said you can put to the to the for loop but uh i do not need to do it right now because i already showed you how to do that somewhere in here i guess okay so yeah this is it uh hopefully there are no any bugs if yes uh let me know in the comment i didn't see them but when you are creating game like this you should uh play with it uh multiple times to make sure that everything under all of the circumstances is going to be working fine uh but yeah if you watch uh until the end uh let me know in the comment uh it would make it would mean a lot to me and as i said i am not professional programmator i just like this and i'm still learning so there are might be some ways that i didn't maybe explain correctly or that i could have done better but there is no many tutorials on the coding in adobe animate with the javascript on the youtube so i just wanted to provide you with something like this so if you are interested in maybe more games like this let me know in the comment i will try to create some more and yeah thank you very much for watching like the video if you liked share it maybe with some friend uh consider to subscribe and yeah hopefully i will see you in some other video and uh as i a few more things i want to say i am going to provide in the link uh tutorial for the uh introduction to the javascript in adobe animate and also maybe i will provide the tutorial which is introduction to the not javascript in adobe animate but generally adobe animate and yeah you can check the channel i have more javascript tutorials and html5 bundle tutorials some after effects and so on so yeah that's it have a nice day goodbye

Channel: MotionTuts

Views: 4,165

Keywords:

Id: _Ndb946C9eg

Length: 50min 27sec (3027 seconds)

Published: Wed Mar 03 2021