Creating Navigation, Buttons in Adobe Animate 2021 using Code Snippets

what we're going to do is create a simple navigation system using code snippets and adobe animate 2021. the first thing we're going to do is go to file new and right here this is very important you see you have actionscript 3.0 or html5 canvas what we want is html5 canvas that's important these are the pre-canned dimensions and what i'm going to use is full hd basically for time saving i'm going to come to this and make the window smaller so i can see the complete window the next thing i'm going to do is create about seven layers right down here new layer for i might not need 7 but uh just in case next i'm going to come up to modify document and i'm going to change the background color i'm assuming everyone is a little bit familiar with the interface because i'm not going to be going over the interface the top layer i'm going to call the actions layer this is where the code goes the very next layer will be for buttons what i'm going to do next is go to the frame 100 holding down shift click the top and the bottom then come right click on a a pc or control click on a mac and do insert keyframe and i have all my keyframes populated from uh one to a hundred next i'm going to create buttons and that's going to be on the buttons layer so i have to have that selected so what i'm going to do is go to the rectangle tool and i see the color is red i'm going to use maybe this color well maybe an orange or yellower color rather and just make a small rectangle this is going to be a button coming over to the pointer tool i pull a rectangle around that rectangle i just created and i go up to modify convert to symbol and i say i have three options movie button graphic and i want button so now when i come over to the library i have that button in the library so i'm going to delete that and if i take the button in the library and i double click it or if i double click this when i was on the stage what you do is you're going into the buttons timeline so you have four different frames no more than four uh i can do a layer on this if i wanted to add sound and and create new free keyframes on the new layer but i'm basically keeping this simple so i'm going to come up here and populate these four keyframes one two four and for over i'm going to say i want to change the color for down and for hit what i would do is pull a rectangle around this even though you can see that here you're not going to be able to see it out in the main stage because like i said earlier what you have now is you're working within the timeline of the button so if i come up here i see symbol and i see a arrow which is telling me i can go back to the main stage right here so now i have the button ready to go one two and three now if i scrub the playhead there's nothing happening so i'm gonna create a navigation system here and in order to see that the timeline is actually moving i'm going to have to put something on the timeline you know that is some type of a representation that is actually moving so i'll call this uh just one i'll call this two and i'll call this three now i'm going to put keyframes in each one of these so one uh on one i'll go to frame 20 and i'll put in the keyframe and i'm going to come to the rectangle i'm going to select that make sure i have it selected i'm going to come to the rectangle go to properties i have a red here for a fill and as you can see i have no stroke and i'm just going to pull a red rectangle so that's on frame 20. and for two i'm going to put a keyframe in 50 back to the rectangle tool properties and it's a blue and see that it comes you have the red rectangle above it so it comes underneath it and that's on frame 50. so now i have three i'm going to select three and say on frame 70 i'm going to insert a keyframe and pull another color so i don't want blue so what i'm going to do is just go to the pointer tool and i double click and you see how the surface changes and just come over to the colors here and change it so now what we're going to do is add the code to all this and this is going to be done using code snippets before we start adding code to this document what we have to do is give each of these instance name names or give each of these buttons names so what i'm going to do is call this button one that's my first button when you're doing this it's best to not have any spaces button2 and btn3 so it without these names as you see i'm in properties without these names there's no way this software program of animate can make a distinction between these rectangles that's all they are it's just rectangles and they're all the same they're all basically similar to if you had a note in music a note in music is nothing and until it's you know designated as a you know a c or a b flat or an f sharp or a g or so all of these buttons have to be given instant names in order to work so in order to to do code the first thing you're going to do is you're going to go to window then to actions that opens up this window and when you open up the actions window you see up top you have the wizard this is one way of adding code but what you're not going to do it's a little bit more sophisticated than what we're doing and not quite so simple and then you have code snippets right here the two brackets and these two brackets usually they represent basically represent something like html but in this case it's javascript so when i click these two brackets what opens up is code snippets and you can see action scripts and you can see html5 canvas if you remember when we first started this document we had the option of actionscript or html5 canvas and we chose html5 canvas so right now we're ready to add navigation properties to these buttons but as soon as we open this up right now what's going to happen is this is just going to go through the timeline and continuously loop so we'll test it in the browser so the first thing we want to do is put a stop on the very first frame and we can do that with code snippets and if you remember we the first frame i'm gonna select the very first frame and i'm we're an html5 canvas and we're in timeline navigation all we're going to do is stop at this frame double click so if i look at my actions window or my code window what i see is this stop and then this this grayed out text here doesn't do anything i can delete it but what it does do is it gives you an explanation as far as what the code does so you're always with uh animate you're always going to see this in front and this basically represents like root uh or the timeline uh so this is going to stop at stop the the animation at frame one so we put the first action script you can see right there there's a little a right in frame one and that's going to stop the animation at frame one next we're gonna go and you we're gonna go to the first button and we're gonna go to [Music] click to go to frame and stop so now i again you know i have the grayed out text and it's telling me what it's doing and what you have here is a function i don't want to get into javascript but a function is almost like uh it's almost like a uh recipe you see this button one add event listener an event is you know clicking that's an event uh go to and stop at this frame this and then a function and go to and stop at five well i want to change five to number 20 i'll say 21 for that button now i'm going to select button number two and that's going to go to this frame which is 50. and again i have the button selected go to this frame click to go to the frame and stop so here's the exact same mirror image of what the button one was but i'm gonna for the button here i'm gonna do 52. now we have button three and i'm going to again do click ever as i have it selected click to go to frame and stop double double click here and again we have the exact same thing as we have above and i'm just deleting the gray what you don't have to do it makes no difference whatsoever those are just comments so now when i test it with all the code i come up to control test and i stop at frame one and i my mouse overs are working what happens on frame three oh i know what i did i never changed this see i have 21 52 and i left this on five you don't touch any of these other numbers uh all you're concerned with is this right down here go to and stop the very last thing but i didn't change that that's why it didn't work and that was 70 say 70 i'll do say 75 is good now it will work do control and test there's all three there's two there's one two so everything works and that's a fairly it's a it's a fairly simple way to uh set up a uh a navigation system and i hope that helps thanks bye

Channel: Software Simplified

Views: 670

Keywords: Adobe Animate 2021, Code Snippets, Navigation.

Id: 7e1NigjRv-k

Length: 14min 58sec (898 seconds)

Published: Sat Sep 18 2021