Animate - Creating Buttons

Creating a button in your Adobe Animate CC project is an essential skill because it's the one thing you can create to provide navigation for your users or audience when creating a button it's important that you remember that you need to create a button that's clickable and usable for all people including people with disabilities in this particular project I have it stopped at frame one and I want people to be able to click on a go or a start or a play button that will then jump them to frame two which is the start of the animation so in order to create that button I need to have a layer for that button a new blank keyframe and then I just need to design something that works with this particular animation so with that first keyframe selected on that go button layer I'm going to grab a shape that I want to have in my button so I'll choose an oval tool and for right now I just want to fill color to be white and I like drawing in object drawing mode so I'll click that on the stage I'll go ahead and create the shape to make the buttons base and with every button the key ingredient is the text so people know what they're going to do or what's going to happen when they click that button so I'll click the text tool go to properties and ensure I have the correct color font that I want the correct size etc so I'll click and type go do a little reconfiguration here until it looks the way I want it to look and I think that looks pretty good so with this button I have the base shape and the top text once I've created those two elements I can highlight both of them then go to modify convert to symbol change the type to button and then the way I like to name buttons is to do lowercase btn to indicated it's a button and then use camel lettering for every word after that so camel lettering means I'll capitalize the G in go and the B in button don't worry about the registration point or any of the advanced features just go ahead and click OK now that is a button symbol you can go to the library and find that button symbol and see that it has a unique icon to indicate it's a button that's not all we have to do with a button though we want to provide rollover functionality so that people know it's clickable when they hover their mouse over it in order to do that we'll double clicking inside of that button and see that the internal timeline for a button symbol looks different than a movie clip or graphic symbol for a button symbol we have the upstate so what it should look like when somebody is not clicking or hovering over it the overstate is what it should look like when somebody's mouse is hovering over it and the downstate is what it should look like when somebody is actually pressing down on it now the hitstate is unique it's invisible but it indicates which part of the button is clickable so right now I don't need a hitstate because my base shape this large circle already creates a hitstate for me which means that if somebody's barely outside of the circle it won't trigger but the minute they get inside of this circle it will trigger that rollover state and it will be clickable will see an example when you need to use the hitstate at the end of the video so click on the overstate and go to insert timeline key frame and that will copy the graphics and the text from the first upstate keyframe now I can go ahead and click on that base shape go to my color panel and choose a color for the bottom of that button then I can go to the downstate do the same thing and go to insert timeline key frame and again it copies now that pink circle and the black text and I can click on that circle and change that to a different color so it will change green when somebody clicks down now these are pretty garish colors and I wouldn't actually use it for this project because there are no colors like this in the project but using garish colors sometimes will help us to see what's doing what and help us troubleshoot if we find a problem so again because I have that base shape I don't have to worry about the hit- state so in order to test this out we'll go back to the main scene and I don't have any action script that's controlling that button so if I try to preview it in the movie it wouldn't really work and it would jump to my animation and I wouldn't be able to actually try it and use it so instead what I'm going to do is what that button selected I'll go up to the control menu and choose enable simple buttons now don't forget that when you set this it could affect what your actual project will behave like later so only set this when you're testing and then turn it off when you're ready to actually publish your project so we'll choose enable simple buttons and now when I hover over you see it changes from white on the outstate to pink on the overstate and when I click it turns green that's the downstate so this simple buttons let me see if the actual states are working without any of the functionality of ActionScript now again because that can mess on my project will go to control and uncheck enable simple buttons if you have more buttons to create a good idea would be to duplicate the button and change the text after the fact so to quickly show you an example of this I'll right click on the button and choose duplicate and this one I'm going to call btn stop button make sure it's a button symbol and choose OK so when we come over here even though in the preview it still looks like the go button this is actually the stop button so I can double-click inside of here and the only thing I need to change is the text so for each one of these I will come in here and change the text now that doesn't seem very efficient and also this text isn't going to fit so I don't want to have to change this on every single button so what I would recommend that you do is go to edit cut create a new layer for your text and do edit paste in place to put it on the new layer and have it cover all three states then you can hide it and lock it so that you can go to the other states and get rid of that original go and turn it back on again and you can see now you have this stop text on each of the different states go back out and there you have created to duplicate button and a few short seconds without having to reinvent and try to create the exact same shape at the exact same size with the exact same font and the exact same colors for each of the states so it saves you a lot of time should be able to duplicate buttons the last thing I want to show you with buttons is what you need to do with a hitstate so let's say you want a button that it's just text that is clickable you can definitely do that we'll go ahead and create a new layer just for the example hit button and we'll lock all the other layers grab the text tool choose a font color that's easy to see on this particular background and we'll create our text so let's create pause now the tricky thing without having a shape underneath it is if we don't add a hit state whenever you have your mouse exactly over each one of these letters now the bigger the letters the thicker the font the easier it's going to be but imagine the font is something like that and somebody who has limited motor ability in their hands is trying to click on it and they have to get on exactly one of these pixels in the actual font that's going to be really hard for them so instead what you need to do is add a hitstate so let's see what this is gonna look like as a button will go to modify convert to symbol btn pause button make sure it's a button symbol go inside of it and for each of these states I'll go ahead and hit F6 to create a keyframe and I'll change the font color so this one is going to turn pink when we hover over it F6 which will be the downstate so I'll make this green and we'll go back to scene one so you can see the simple buttons control enable simple buttons now when I'm off of that pause button it's blue and notice when I get really close to it it triggers but because the font is so big that works so when I get close to it triggers out roll over and we see the pink and when I click it turns green but again if this button was really small that's going to be harder for people so we need to shut off the enable simple buttons first it's going to be harder for people to click so I'll go ahead and make this smaller and if I try that again control enable simple buttons and they try to get to it they might not get right on it so if that happens for you what you can do is shut off the simple buttons is you can get inside of that button and you can choose a hit state now the hit state is invisible so generally you want to create a shape that's about the size of your text or a little bit bigger you don't want to create something massive that's really going to trigger no matter where the mouse's so I just want to show you an example this so on the hit state I'll go ahead and just create a new blank keyframe so insert blank keyframe and I'll create a shape over that particular text so it was about there so now when I go back to scene one I can enable the simple buttons and when I go near it see how it triggers a little bit further away even up here that hitstate created a clickable area that was a little bit bigger than the actual word so that's going to be a lot easier for people who have maybe motor disabilities or they have visibility issues or even just people in general it's hard when people have you know you have to click on a specific area we just wanted to be easy and we can quickly do it so that's the basics of creating buttons now you need to learn how to add actionscript to control those buttons or so that they can control your timeline or do things like visit and outside website to learn that check out that very topic on my Youtube channel

Channel: professorjedi

Views: 38,535

Keywords: MCC, Morgan Community College, Multimedia, Tutorials, Animate CC, Animation, Buttons, States, hit, Over, Out, Down, Duplicate, Button symbol

Id: Z83xTtYjN3U

Length: 11min 20sec (680 seconds)

Published: Mon Dec 19 2016