ADOBE ANIMATE CC 2021 TUTORIAL - HOW TO CREATE SOUNDS USING JAVASCRIPT IN HTML5 DOCUMENT

so hello and welcome in this tutorial i would like to show you how you can manipulate sound with javascript in adobe animate cc 2021 so right now i will show you what we will be doing today so very simply we are going to create uh sounds when we click on our vectors so monkey lion zebra all right so i'm on the side pre-peak and you do not need to use vectors like this you can go with basic shapes but i would like to go uh and work with vectors uh so i'm going to provide the link for this in the description hopefully it will stay free and free pick is not going to put it to the premium category but basically i'm going to click download i would like to go with free download we will have to attribute the author and then we will then we are going to save this i already did this so i will hit cancel now i will go to the place where i when i save the file and it is going to give me this episode file when i extract the zip file so i'm going to double click and this will open this in the illustrator and right now i will i will go to the adobe animate and create the project i created the project which is 800 by 800 but you can go with any project that you want and i will i will go back to the illustrator and i will click on the vectors that i want to use and i am going to drag them to the adobe animate and i would like to go with this using ie file important preferences so i will hit ok also right now what i can do is hit q select all of them and scale them a little bit and i can position uh them on the stage like so for example okay i will click anywhere on the stage and then i'm going to have ability to change the stage background and i'm going to choose maybe uh some color like this this is really optional right now i want to import my sounds also i created the sounds using using google translate but you can have your own sounds if you want i will go to the file i will go to the import and i am going to go to import to library and i'm going to get the zebra monkey and the lion and i'm going to hit open so right now if i go to my library i'm going to have these uh three sounds in here and maybe in some other tutorial i can talk about the settings of the sounds uh but right now i want to focus on the javascript if you are in the library you can extend your library like so and you are going to have some additional options and one of them is this linkage and with this linkage you can create the name i will double click in here and i will call this my lion for example and this is the name that we will use or to target this with the javascript so the second one is going to be my monkey and the last one is going to be my zebra not like this but like so and you can create uh your own names if you want like so uh now i will put this back like this and i will convert them to the to the symbols and i will convert only the lion and the monkey because with zebra we are going to be working a little bit different so i will click on the on the lion i will go to the properties and i will go to the modify and choose convert to symbol i want to have the movie clip and i can call this to be lion 1 for example and i am going to click ok then i will click on the monkey i will click f8 or modified convert to symbol and i can call this to be monkey 1 and i will click ok so these names lion one and monkey one are names of all the symbols in the in the library monkey one and lion one okay and you can see that sounds has different icon than the movie clips but if i go to the properties and i will click on my monkey there is this option for the instance name and this is the name by which we are going to be targeting this vector with the javascript so i can basically call this to be monkey and this one i can very simply call to be lion and i can go ahead and double click on my layers and change this to be to animals any mods i will create a new layer i will call this call this layer to be code and i will right click and i'm going to choose actions right now i will zoom in a little bit and i'm going to type this lion add event listener i will create a little bit more space like so so you can see the code so this lion add even listener we want to have a click listener so click and we want to call some function and i'm going to call the function line f f means like the function okay now i'm going to create a function so i will type function line f parenthesis curly parenthesis and here can go my code uh if you didn't watch my introduction to the animate the javascript in the animate maybe you don't know but if you are outside of the function you will have to use this and when you are inside of the function you cannot use this but you will have to create variable i will type let or you can type var uh that's uh pretty much the same right now let is the new version of declaring variables but a light root is equal to this this name is optional you can go with any name that you want but right now when we are in the function you will have to use root instead of instead of this so root a lion and i can just write whether my code is working so i will type visible is going to be false i will hit ctrl enter and if i click on my lion it is going to disappear i can go ahead and comment out this line of code so i can hit slash slash this is going to be a gray color right now which means that this code is commented out and doesn't do anything and right now we can type in here create js dot capital s sound dot play and now i want to play uh the sound that i created which is my lion okay and right now if i type everything correctly and i will hit ctrl enter if i click on the lion lion it is going to play the lion okay there is also option to change the click to mouse over but it behaves little bit strange i will show you but uh yeah if you want to uh use mouse over and it doesn't matter whether it's for sound or for anything else you will have to write one additional line of code and it's like stage dot enable mouse over and you can see that the m for the mouse and obra is capital and like so parenthesis and i will change the click to mouse over and i'm going to hit ctrl enter and the thing is and i'm i really don't know why but uh if i go with my mouse on the lion nothing is going to happen but if i click anywhere and then i will go over the lion line then it is going to play okay and the thing is that if i go over with my mouse line uh every time that i will go to different part of the lion it will play the sound so if i go you know in here lion lion lion lion lion lion if i'm going to be in this one part and i'm not going to go to other parts it won't play i will have to go to other parts to play okay so yeah and just to show you if i uncomment this root lion visible and i will hit ctrl enter uh it is going to disappear even without clicking initially initially okay so the sound i don't know why but it has you probably have to click somewhere to activate it yeah but i will go ahead and change this to click and i am going to comment out this line of code now let me create this a bit space i am going to copy this ctrl c and i'm going to paste it in here ctrl v and we are going to change basically this from lion to monkey and this is going to be not the lion f but monkey f and this one needs to be the same because otherwise we wouldn't be calling the function so this name and this name is the same and create js sound play and we want to play my monkey monkey like so i will hit ctrl enter and if i click on the lion lion we have lion if i click on the monkey monkey we have monkey okay so that's pretty cool i will close my code for now and right now i will show you something with the zebra and maybe i could have showed you this at the beginning because this is a little bit simpler way how to play the sound and if i click on the zebra i will go to the modify and i am going to convert to symbol but i am not going to convert this to movie clip but i will convert this to button and i can call the button to be zebra 1 and i will hit okay and one thing is that if you create a button there is an option to change this to movie clip okay or if you create movie clip there is option to change it to button but that doesn't work properly maybe maybe anime change it during maybe the last month but i don't know about it but it doesn't work properly so once you create movie clip it's movie clip and if you want to create button you would have to do it one more time just for your information but right now when we have button and i will click on the button i'm going to have some kind of options and i have option uh to have the button to be different when i'm over with the mouse down means when i click and hit is after i click okay and in here i can create new layer and the bottom layer i can call to be zebra and i could go to the oven click f6 and for example i can change the scale of the zebra or whatever okay and uh actually i can even do it maybe like so and uh the the top layer i can call to be sound and on this sound i will right click and i am going to choose insert blank keyframe and right now i will have an option to put a sound and i'm going to put the the zebra sound okay and i will hit ctrl enter and when i go over with my mouse to the zebra the sound is not going to play again because i would have to click somewhere but if i go over zebra it is going to play zebra and in this case it is not going to play this few more times when i go over to different parts but i would have to go outside of the zebra and back to zebra zebra to apply this okay i will go back to the adobe animate and i can get rid of this keyframe and i can put this one in there like so and if you want you can click f6 for the down and you can move this from over to down and you can see that there is this red line which tell you that that is the sound and right now i move this from mouse over to mouse down which is basically when you click so if i hit ctrl enter and i click on the zebra zebra it is going to play the zebra lion monkey okay fine so these are basically two ways how you can add sound or manipulate sound with the javascript and uh this was also very simple tutorial and i would like to create one tutorial which is going to be a little bit more complex where you are going to have like uh categories that you can choose and for example you are going to have category animals foods and something else and you can click and it will get you inside and then you can have the sounds and then you can go back and so on and uh why i'm saying this is that uh right now you may think that why would you work with the code when you when you can create the button and it's easier yes it's easier with the button you can of course work with the button but sometimes you want to use some kind of if else statement to determine whether you want to play or you don't want to play the sound and in in that case it's better to work with the code and know with the button but yeah this is it thank you very much for watching if you like this video hit the like if you want you can subscribe and you can click the bell if you want to be notified and yeah thank you very much for watching have a nice day see you in some other tutorial hopefully goodbye

Channel: MotionTuts

Views: 608

Keywords:

Id: T3-vnQw07vc

Length: 16min 11sec (971 seconds)

Published: Fri Mar 12 2021