GD190 :: Lesson 8 :: Adobe Animate CC :: Interactive Navigation

and now it's time for lesson a creating creating interactive navigation I've opened the file I've already given it a name appropriate name so let's take a look at the first step there's some ActionScript involved in this which would be cool talks about interactive movies it's on page 289 290 is where the action starts talking about creating a button symbol so at the bottom of page 290 says insert a new symbol and we are going to select button and we give it the name Abel lawful button okay now we're inside a button and it shows the Upstate the overstate the down state the hit state see you'll see what each of those states does in a moment first thing they want is the gable lawful thumbnail so we drag it in there and they're gonna want it to be 0 0 and I believe they want us to hit f5 so if you don't hit f5 then there's no I guess essentially there'd be no hit state the hit state is like where what part of this thing counts as clickable and we want the whole thing to definitely be clickable so by making sure that this carries over to the hits take this whole rectangle area is the button itself oddly enough in the hit state if we made a separate keyframe and we added a circle right here for example then the button and that circle would both count as the button itself so it's a great way to give a lot of creative possibilities to buttons anyways let's go to the next page 292 talks about making another layer and f6 for a keyframe and the over state right there and they want us to basically put C this in the overstate which means when we mouse over it that is what's going to appear so position it and then they want us to make another layer on the downstate they want a keyframe where we can put this sound so while we select or click on the downstate go to properties sound click sound ok now what else and then they're talking about the event yeah that's default all right so that'll cause a sound to play as soon as we click down on the button so now we will imagine drag this onto the stage so we go to scene one and it's not there yet until we drag it out of here where is our button right there Gary laughs hold button so put it on the stage oh you gotta make a new layer that buttons so there it is position it like so I think they probably have a specific x and y position for it you know goes alright so we'll just position it like so and then let's see they want us to duplicate it so in the library you can duplicate it you could also duplicate it out here but they're telling us to duplicate it in the library so this is going to be the Gary Gary and as it is they match but there are different symbols because we duplicated them we didn't just make a clone like if you hold down option like that this is actually exactly the same is if I click here you'll notice it says it's been self Garry lawful button click this one and it's Gary Gary button click this one it's very lawful so if I go inside this one and change something that's gonna appear over here - it won't appear here because it's a unique - unique symbol because we duplicated so now what that means is we can go in here and change things if we can swap this and then the good thing about doing it this way there's I'm really glad that book is showing you how to do this is that by swapping them you don't have to worry about keeping the positions like don't have to worry about wrestling it down toward they're all in the same position because they have the same size and everything they're just gonna we're gonna swap them and they will be in the same positions and then all this structure is already built for us to you because you duplicated it so duplicating is a great way to take advantage of the work you've already done so going back over here now duplicate this one will make let's see this one's no weird spelling yeah get off the stage it looks the same as beer in theory but we go inside it and a swap this gift after it's about this one with the one that there is a bit so that's them and then make another duplication and a repetitive work here yeah something I just eat directions are on page 297 they're talking about basically repeating yourself here platters down the stage the quick swap like second in the overstate stop that out his teeth yeah now to make sure these are all lined up the same like to man cave then if you hit took align the stapes it'll center them with respect to the stage wasn't necessary want that we want them mind up with respect to each other and I want the spacing in between them to be the same so it's space giving a horizontal so now they're perfect and let's take a look and see if everything is working right then when I click one to their sound that's close it and now it takes us to HQ 98 they're talking about placing the buttons I already did guess they have a specific X&Y the first button is 100 looks like that was close 106 80 whoops that is it 680 attractive this one should have but x-value 680 yes there it is 16 right since that's the case I'm gonna hold shift so I can select all four of those and then out these a command K space even a horizontal so now it's perfect the way they want it now about the Y position and not seeing that bold I like the way open the others on page 299 with 170 for the Y so I'm just gonna swipe across all these I can swipe across all these because the other layers are locked so that's just a reminder of how good it is to use the lock feature alright everything's perfect now let's move on oh I should probably save it mainly button instances so we're gonna give each button instance name so we'll click on the first one and right up here we say the underscore gari it's better have the end score because we're going to be referring to them in some ActionScript code this one's good and it's a good idea to name them let the BTN just because then you can look at just looking at the name you know it's a button alright so those are all labeled with the instance names so now it's time to apply some action stick I talked about the syntax and generalities about coding language and then it says to unlock let's unlock all three layers actually maybe you can add without unlocking that is later than this swipe across I guess you can probably edit the timeline without unlocking it all right so that's what we need and then we need another layer and it is customary to call the top layer actions I've seen lots of programmers do it that way and have adopted they have it myself so to open the actions window I have it open here so I can open it close it here but you'll probably need to go windows action and another way to do it is FM f9 or just f9 alright so we want to put stop cuz if we don't put stop it's going to just play on its own time right now that wouldn't cause a problem really but as soon as we start adding some stuff to the time line we actually like control the play rate control the actions to see the whole timeline so now they want us to believe on the buttons later 3:06 okay so they want us to add go ahead Matt add the ActionScript code and they're stopped let's do the I give underscore off they're good I think I'll do it the way that Brooke did it did it which means gable lawful they do it that way then on this one I better not have when I'm going I'm going to say put an underscore yet and if I don't take that away if this doesn't match what's in the ActionScript code you're gonna have a problem so make sure you catch that to add again you can't dot click on that risk so now we actually write the function first we won't avoid it's not returning moving steadily they mean anything to you right now but now we need to say guilty and stop tell it what funny wants you go doing stop on set of ten and here's a little trick that the book doesn't mention but if you use this thing called space you can get it to just give me a signal so I'll have it's a working save it so if this is written out right I'm going to click this button when you mouse click it's going to call this function this function says go to stop 10 but it also says trace working trace is just a little window and just output window troops a working if it works right so it's like I just I click it and it's just working down there so that's good and now that that's checked out double-click that not that works let's copy and paste it's fixed if we've got four buttons the next one is very sorry and maybe then you don't have a space on there's either that's how to do it just like they do they don't have a space I'm gonna have to go fix the other the other one too so I'm gonna double click this patrol see Nancy and go back to this and just post that way I know that it's exactly the same I can't tell you how many times one little misspelling in father so much have it you don't realize it so now we have to rename this restaurant to its let's not - this one will be restaurant three and when we I'm double-clicking that's a great way to just grab the whole and this I think I also spelled it different that they are PDF though let's go from TN time and I make sure this matches what I have out here so close that tastes good back here I just automatic this player doesn't have a space in it either that so I'm gonna copy this and go back to the strict place that so this is also supposed to be 2080 okay so I'm gonna go ahead and put that in there so sort of since it's surrounded what by quotes it'll just call they'll call out their names that way I know each of them is you know firing independently so I should get a different name a time that click OK so that just confirms that things are working right part of programming successfully it's just figuring out how to know that you're doing things right that's one good feature if you put two slashes then it'll stop doing that but it want to erase it is the way of commenting out they call it commenting out you basically just hiding the code without deleting it because maybe later or something to go wrong and you want it to come back to confirm your thinking alright so down let's see now next this is checking for errors kinda I already did that and they show you how to add an error you know add a curly brace and see what the error looks like you can do that on your own but the next thing they want us to do is create a level layer called content and every 10 pixels it looks like or 10 frames they want to frame visit the Pope or say here's the white or their timeline there it's kind of hard to read looks like there's not one but now let's see next step is right here they want us to go to the library and get content or whatever okay 60 and 150 as the X&Y positions 60 and usually when you're making something over your own design you don't have the guidance I wallet and I move it around until it looks good happen but while we're doing this we have the help here's a way to get it exactly the same position a way that I would probably do with your life I'm gonna go back here and select this and hit ctrl C and I'll go here and hit command shift B so it pastes in exactly the same position you know I use the old swap to grab the next one now go here and command ship food and I'll swap nice it's perfect so now we need to see if it's actually gonna jump those frames yeah no every time so it starts over very very start it over good now they want to show you that you can label a frame so let's click on this frame and go to properties notice it says friend so before we were labeling objects on the stage now we're actually labeling a Frank and that B label 1 you can call it anything you want of course you can't have any spaces so if you're gonna put a space you'd have to put them in to underscore next one will be label 2 - it's my leg or you can see these labels and what's really good about doing this is the way that the code says right now it says go to stop 10 20 30 well later on I might change the design a little bit and it'll mess up our code is it saying good can stop 10 but if I moved everything over even just one funny suddenly it would break it because it's looking for frame 10 so by doing it this way let's finish this label for by doing it this way if we can move these things around add frames and it won't lose the ability to find the bricks plus be going so we'll change this to quotations to give a quote ations for its dentist that states too I'll just grab the quotation to it this time taste you over they afford save now let's test it to make sure it's still working the tip took this adjuster garigari-kun and we can maybe kind of start it over and your time everything seems to be working still mam w closes that window just in case your mouth starts to use your left hand on the keyboard as much as possible especially then get going monumental project so you just give yourself carpal tunnel still might get it but at least using two hands instead of mouse and everything a better chance not to get so next yeah we got a little too crude for tells you to change it then the ActionScript code that's on page 314 creating a home button using code snippets nutcase it let's see how that he wants to go about this drag the button called me menu on to the stage and I believe we better create or do that on the buttons later yeah if we drag this there's many menu but under the stage right now it's gonna go inside this keyframe which is not it's not gonna appear in all two things so I might hit ctrl command X and let's put it here because if we put it here it'll carry across all those keyframes so notice now if I click other places that main menu button is still there so that's important note and there I've been there it's that problem let's see 7:26 is the position they want that and tab go over to that and make it 16 okay so now that's perfect and we gotta give it in instance name but in one they've an underscore one and that means well let's see they've shown you how to use code snippets I don't do that very much I've just typed stuff by hand but you can try it unless I get frustrated with it then I'll just do it by hand so let's see then the code snippets panel that'd be so I guess are you paid sniffing it is well there it is a book where is it real-life choose window it's snippets well you got ActionScript timeline navigation go to frame and stop we double click that okay there's all this cleaning for you and gives the name of the function really long name button one I guess because we had that button selected it knew what to refer to between stop five I don't believe that's what we're on is it yeah I guess so you know Thursday to replace it with one okay so this man I like to I like to keep their brackets like that or they're like think anybody like some people do it the other way but anyways what do we got here now the bottom you've got go to and play one so this is basically gonna return us home go through its top one let's see if it works so you doing here yeah we click that it takes us back pretty well done now that wasn't hard looks like they're talking about creating your own code snippets and sharing the code snippets you can do that if you want I'm going to move on so creating transition animations that's on 319 and you close this code snippets exit out and let's see right click on the instance click on this one and you right click on this and say create motions go and you'll notice it jumped up it made its own layer and if we do the same thing for this one right click get motion tween it makes its own their motion tween so now we want click on the first one click on the symbol on the stage and go alpha zero drag this over zero and go to the last frame and that portion that segment and click on it and it's transparent now but we can still click on it and make it 100 so now you'll see it basically fades into view so when you click the button that's gonna sort of fade let's do the same thing for this create similar motion tweens and I wonder if we could actually be between them it's a new idea it's really not motion yeah I just did this is awful this one's very value just paste the motion and all and that's just make sure it's working right click this one nope no oh yeah yeah there's some actions pic we need to edit okay as it is it says go to and stop we needed to actually say go to and play because it's gonna play the 10th frame and scoot over that's what's going to make it fade into here so I'm gonna copy pasted saved try that again click it fades in here oh yeah it's looping because it's playing this one as soon as it gets done with that it just keeps going so I believe the book is probably gonna tell us to create stop actions so f6 f6 you want f6 right above the end of this little sec section on each one and we need to just click stop so let's do stop and then before we leave let's copy it paste you can also right-click and copy this frame and paste it to you take a look at this I'm not how to actually yeah I could probably get rid of this if you think how do you have 50 thing so they do have the 50th frame so I'll just drag this over then this one and drag over to so these are bismuth fuel actually this one looks like it's come off by one possibly no big deal I'll just leave it like that so let's try it out again fades in the fuel but main menu page in the view very nice automated buttons create being animation and a movie clip symbol let's see in the library double-click the movie clip symbol for Gable my fellow which one over so we will over just missing that's the one previews yeah that's it if you double-click better click the icon if it's giving a hard time with that and let's see what are we gonna do you enter the simple editing mode select all the visual elements on the stage you can drag a rectangle around or can hit select command a to select everything and if we say create emotions then they'll give us a warning and we say true then this point we got to click on the object itself and go to author 0 and then we go to the last frame click on it again bring it up to 100 so what that should do is make it blow into place of course it's linking so we're gonna have to put stop action at the end it's going very slow I noticed they're shortening they want to train you a little bit on moving keyframes of this yep actions so they're creating an actions layer up here where they can write stop so at the end we make keyframe open up the actions panel I think I still have stuff in the clipboard this aside now so good does that this one is not doing that it's quiet back step to it create identical motion Twinings for the other way in finishing movie clips so that's pretty easy yeah they Valley select everything like nice and clean they'll give you the warnings that yeah and then you want it to be zero alpha then at the event the end you want to be a hundred like shorten the duration of it ten the new later and keyframe thanks stop again let go back out here save it all right and go to the library again they see that David then take a motion tween except they running really kind of go to zero ice cream click on it that's under trim iteration at six but the next was found on that space of stop and then you got one more so I'll just go straight to it okay there was that the one yeah I guess it was the one save test it out and that is nice but I guess I was but I didn't apply the effect so right-click most between yeah click on it properties 0 the end click on it back at 300 that over the thing that six like stop or at least it if you've done that me okay try it out working working click on one of them yeah and something the book probably doesn't talk about but I'm going to putting the flame weight up to 60 there just notice how it's much smoother everything is a lot of my projects I do and 60 frames per second just because it's so much smoother as long as the processor can handle it alright so save and if you believe that is it well done see you in the next video

Channel: Fred Pool

Views: 7,330

Keywords: Adobe, Flash, Actionscript, Animate CC, Actionscript 3.0

Id: gC_pTwNI-qI

Length: 39min 53sec (2393 seconds)

Published: Mon Jan 29 2018