Adobe Animate CC 2021 TUTORIAL - gotoAndPlay ( JavaScript in HTML5 document )

so hello and welcome uh in this tutorial i would like to show you uh how to create uh goto and play in adobe animate cc 2021 uh so basically this go to and play allows you to create an animation and then play the animation when you click for example on some kind of button uh so right now i will show you i created very simple example of with shapes like this uh we're just going to play when i when i click on the on the button but you can create much more complex animations if you want so i am right now in the adobe animate i have created a document which is html5 canvas and we are going to be using javascript so very simply i am going to create some kind of shape it can be rectangle like so and right now i will convert this rectangle to the symbol so i will go to the modify i will hit convert to symbol and i can call this to be uh red shape for example you do not need to create these names but you can these names are just for the library so i will hit ok so right now what i will do is i will click or double click to get inside so right now i am in the scene one in the red shape uh and if you want to go back to the scene one you can click on the scene one or double click anywhere else so you can like this get inside of your shape and right now when we're inside of the shape we want to animate this but when you want to animate something it has to be a simple and it is symbol on the main timeline we would be able to animate it in here but in here it is again the shape so i will have to go one more time uh to the modify convert to symbol and i can call this to be red shape in for example like the inside and i will hit ok and right now i can go ahead to maybe frame 50. i will create new keyframe by clicking f6 or right click and insert keyframe and you can very simply uh position this maybe like so and i will click anywhere in between right click and i will create classic twin so we are going to have an animation uh like so right now what i want to do is create new layer and on this new layer i will go at the beginning and there is this name this label and the name and i will call this to be play red and this is the name by which we are going to be targeting this animation in the javascript so i will click anywhere anywhere else and you will see that on this on this layer too there is going to be this play red and actually i can rename this to be to be record all right for example this can be a label and now i will create one model l and on this new layer i will call this to be code and i will go on the first frame i will right click i will choose actions and i'm going to type this dot stop okay fine and you can see that this code right now is at the at the beginning maybe you don't see it but there is this little a in here and uh it is at the beginning so basically it means that this animation is going to stop immediately so nothing is going to be animated i will go back to my uh to my scene one and in the scene one it's like you do not see the animations because they because they are inside and that's the topic for another tutorials these timelines in the timelines but basically if you double click on your shape you will get back to your to your animation and if i right now click ctrl enter nothing is going to happen okay but if i would and i will do this right now i will double click and i will position my code this uh little a which stands for the actions which is like the action script but right now it is the javascript uh right now i have positioned it at the end so it means that this animation is going to be played once and then it will stop so i will hit ctrl enter and indeed the animation is going to play once and then it is going to then it is going to stop and by the way if i would get rid of this code like so uh then this animation would be would be looping forever okay i will go back like so now i will i will create my button and base let me let me click anywhere on the stage to get to the stage color and i will change it to some kind of color which is not white so basically i will see the border on my canvas but back to the background animate i will create a rectangle i can go with maybe i don't know green color and i will create a shape like so i will get the text tool the text is going to be white and i am going to just type in here play like so and i i don't want to play with the colors but i don't like this so i will i will make the the green little bit darker so it is more visible okay uh so right now i will um highlight display i will go to the modify and i'm going to hit convert to symbol oh it can be simple one that's fine because right now we want to create these instance names so i will click on the play and there is this it is movie clip and we want to create instance name and i will call this to be button play and this one i will call oh oled i will call it the red one okay that's enough so right now i am going to create new layer so i will click this plus i will call this to be code you can call the bottom one shapes and on this code i will right click on the first first frame and i will choose actions okay fine and i will just make sure whether my code is going to be working so i will type this button play visible is going to be false like so i will hit ctrl enter and it has disappeared so fine okay i can comment this out and this this is just something that i usually do to make sure whether my my instance name is written correctly and so on so if i have some kind of error i would have it right at the beginning so right now i am going to type in here this button play add event listener we want to have even listener click so i'm going to type that i want click and i am going to call the function which is going to be play red okay uh now i will create the function so i will type function play all right like so and in here we can write our code one thing which i mentioned in all of the tutorials which is important is when you are outside of the function you are using this when you are inside of the function you will have to create variable i will type let root is equal to this this name is optional i just prefer to call it root and the led is just new version of type var you can type var if you want but i will type let so let root is equal to this and i will just make sure that it's working so root button play v visible is going to be false i will hit ctrl enter i will click and it has disappeared fine let me let me uh go to the to the red shape and i'm going to position this code at the beginning like so so there is not going to be any animation and now i will go back to my back to my code on the main timeline i just hit f9 to get into the code you can just uh you can right click and get actions and in here i am going to type red not like root i'll add one so it's like typing oh come on i didn't want to play this so root red one and i will type goto and play parenthesis and in the quotation marks the name that we created for the animation so i will go inside and it was play red so i will go back to my code and i will type in here play red okay and if i uh don't have any mistake when i click on my button play this animation is going to is going to play so i will hit ctrl enter i will click on the play and it is going to it is going to play and then go back in here if i there is one issue okay uh when it is at the beginning if i click one more time nothing is going to happen and if i click one more time it is going to play and if i would click one more time nothing is going to happen and if i click it is going to play so when it is at the beginning it would play every second time which is not uh something that we want another thing is that maybe you want this to to stop at the end uh but yeah i will i will go back to the animate and i will position this stop or this code this stop at the end like so and right now i will hit ctrl enter and it is going to play once and it is going to stay in here and if i click play it is going to play every time that we every time that we that we click one thing that you maybe you can do is when you want this to uh for example uh don't stop at the end but stop at the beginning or a little you can make this animal animation one frame so shorter and with alt or option on the mac copy the first keyframe like so so at the end it would go to the first frame like so but this is just something that i wanted to show you you can do this like like so but though yeah we are not going to do it this way but i just wanted to to show you that there is this kind of option uh right now one thing is that maybe uh you don't mind there is this initial animation okay but maybe you want this animation to play only when you click on the on the on the play button so what we can do is go back to the main timeline and go to the code and i am going to hide uh my red button so i'm going to at the beginning of the code type this red red one visible is going to be false like so and then in my function play red i am going to type that root because we are in the function uh red one visible is going to be true so basically we made this invisible so it is basically going to be animating but at the beginning but we won't see it and as soon as i click on the on the red button uh it is going to be visible so i will hit ctrl enter we have nothing and if i click play it is going to it is going to play and if i click play one more time again it is going to play okay there are maybe a few issues one of them is that if you click on the play or earlier then the animation stops you are going to get something like this it will it will try to play again every time okay so what we can do uh is uh or one of the way or what we can do is remove this evenly scenario so if you for example want this animation to only play once and then don't play again when you click you can go ahead in here and type i can basically copy this from here and paste it in here and instead of this i will change this to root because this is inside of the function and add even listener we will change to remove even listener so remove even listener as you may guess is going to remove the evil listener so i will hit ctrl enter and if i click it is going to play but it won't play anymore okay fine and uh if you want uh to this may be a little bit uh complicated but uh if you want to uh again have the even listener when the animation is finished when you what you can do is use something called set timeout function and i'm going to show you how you can do this so basically i typed the google say set timeout function.js and it is going to give me some results and depressed one on the w3schools which is a good website to learn how to code it is going to give me this kind of function which is which is very simple and i'm going to create a tutorial about this so i may provide the link in the description but basically uh let me copy this and i i will show you in the in the text editor uh so i will go back to the animate f9 and let me go right now outside we will put this inside of the function but you have set timeout we can write this together very quickly you have set set time out then you have the parenthesis for that and everything is going to be in the in those parentheses and then you have inside very simply function like like so so you have a function this then you have the body of the function as you we usually do uh they have alert hello inside that uh you can have whatever but we can uh i didn't want it to cut it so i will just copy this ctrl c ctrl v so you have something inside of the function and then they have this uh comma and some number so comma and this 3000 means 3 000 i guess is milliseconds but basically it's 3 seconds so if i change this to one it is going to be one second uh like so okay but uh i will delete what i wrote in here i just wanted to uh to show you because this may look like a little bit overwhelming basically what we want to do is get rid of this inside this other hello and instead we want to uh we want to put in here one more time this even listener like so but we will have to change this to root like this and all of these i want to put in the function play red after the remove even listener i want to paste this and don't worry i'm going to provide all of these in the description like so and i can create a little bit of the space so uh basically in the function we are making red bun visible again we have go to and play and we are playing the the animation then we have root button play remove even listener so we are removing the even listener and then inside of the function we are again putting the even listener but it is going to to be working in one second or if i put this to two seconds it will be working in two seconds so basically i will hit ctrl enter i will hit play and i can't do anything and when two seconds uh pass you is like you can go inside of the of the red and check that uh the animation is uh 50 frames and we have 24 or frames per second so you can you can you can calculate this if you want this uh to be really precise uh but uh yeah uh this is it uh maybe one thing that i just want to show you is in here you can have multiple animations i can i can create a new layer on this new layer i can create uh some kind of some kind of shape like so and this shape can be blue and i can just or convert it to the symbol i will hit f6 to create new key frame and i will animate this down and i am going to create a classic twin so right now we are going to have our two animations like so and i will hit ctrl enter it is going to play uh both of them like so okay and oh in the animation you can for example uh click f6 in here and on the last frame the red one i can put that alpha is going to be zero and it is going to animate and then it will uh then it will disappear like so and i could do the same thing called the blue one and so on uh but yeah this is it i just wanted to show you uh very simply how to maybe notice very simply but uh i wanted to show you how to uh create this goto and play to play some kind of animation uh in the in the other animate and the next tutorial is going to be about the set timeout function and then i will create a little bit more complex tutorial about combination of these two because it can be pretty pretty cool to work with both of them so yeah you know if you like this video uh hit the like uh if you are interested in more videos like this maybe consider to subscribe i would be i would really appreciate that and if you have any question or suggestion or anything you can leave that in the comment and hopefully i will see you in some other tutorial take care goodbye

Channel: MotionTuts

Views: 2,674

Keywords:

Id: AkGjj-7JuwY

Length: 21min 24sec (1284 seconds)

Published: Wed Mar 31 2021