Buttons for HTML5 in Adobe Animate

Hey welcome to this video were going to now take the example that we built in the mini project from the last video and now add the button. And I want the button to be clickable and I want it to go and do something. So first of all we've got to draw our button so were going to create a new layer, remember keep everything on its own layer. Where do you want the button to appear? If I draw it now anywhere along this timeline remember it will end up at the very next key frame and that’s the only one I've got right back at the front so it will end up over there. So what I want to do is actually, I want it to get to there, retract a little bit and maybe there for the button to start appearing. So were going to insert a key frame. That’s its home, its blank at the moment. I'm going to draw some stuff in it, so its going to be a click and hold down actually click it, there's a rectangle tool, this is where you can do the rounded corners, rounded corners aren’t cool at the moment, so I'm going to stick to good old fashion square ones and colours I'm going to use probably something from this, maybe use that. Stroke, I don’t want a stroke and yeah, I'm just going to draw a rectangle. Okay, maybe oh I feel bad covering him up, oh well, that as my fault for not leaving enough room for it.

So I'm going to draw on that, I'm going to move it around he's on his own layer. I'm using my keyboard just to tap it around. Actually, what I might do is, the button is killing me, so I'm going to grab this guy because he slides in from the bottom. And he slides in up his, I'm just going to zoom him past so he's behind this. So that I can go to my button layer and have my button layer down here and it’s just as intrusive. But hey, this is what I'm going to do. So the button layer is, I'm going to hit save, is a symbol so were going to convert it to a symbol like we did for all of our movie clips. But under modify, convert to symbol, were going to change this one to button and this is really important. Its best, you can accidentally click movie clip, give it a name and then over here in properties there's a way of changing it, but never do that you can tell it hey don’t worry, not a movie clip anymore, you're a button, but really at its core its still a movie clip. So you need to really delete it and go back and create a physical button. Its really common to call these btn to start with, it groups them up nicely so you know what are buttons and this is going to be our what are we going to say, were going to have a more details button.

And this is the nice thing about buttons or the unusual thing about a button I'm going to go inside it, so if I double click it to go inside, you'll see up the top here I'm inside the button. You'll see the icon in the library is different. These are movie clips, these are buttons. You'll notice that were inside the button and you'll notice that the timeline is very different from what we normally had. Remember we did the rocket and the flames, this one here has an up down, over and hit, so essentially up is the way it looks when nobodys interacting with it. Over is the roll over button. Down, no body worries about too much because that’s the change it might make, or the colour change, or something different when somebody actually holds it down but no body holds the button down that long enough to see it so don’t worry. The hit area is a bit of a weird one and ill discuss that now. So watch this, I'm going to have an up, I'm going to have an over. So what I'm going to do is add a key frame, it copies the first one over from up, down to over and I'm going to click on it I'm going to go to my properties and I'm going to have an over of say just a lighter version of it. That’s not quite what I wanted. That’s fine, and the down, you can leave it in there, you can put it in it doesn’t really matter. I don’t really change the down but ill do it just so I can show you.

The hit area is the weird one, I could leave this blank and it will use the up as the hit but I want to be really precise about this I'm going to insert key frame in the hit area it doesn’t matter what colour it is, its really down to its physicalness. Not a word but it just means that this is where the buttons going to be activated. So I'm going to do a preview in the browser. Actually what I'm going to do is how long is it, it’s long enough that I can see it, yeah. So I'm going to preview in a browser and it’s appeared up here. I think ill get that sorted. Alright, so there's my button, so hovering above it, that’s my roll over and that was called the over. So up is that colour, over is that colour and watch this, the down, ill hold it down is the blue colour. And the hit area is where it transforms from the arrow into the little pointy hand. Watch, pointy had, arrow.

So the cool thing about the hit area, or the weird thing about it is I can go back to my timeline and go into my button and the hit area can actually be somewhere else, so I've got my up, over, down, but my hit area is up there. I show you this just to make sure you know what the hit area is. And say the hit areas going to be under properties, I'm going to click you, I'm going to make it pink so you know. And I'm going to go preview in a browser, there it appears. Can you see the buttons not activated, I can’t make it react. Until I go up here, can you see, there he is. I can click on it, there he is. And you'll notice that the pink never appears, the pink is actually just this thing here and it’s totally just as a visual que just for to know where it is, its this invisible thing that appears. So you can have buttons that are triggered or you might have bits of type rather than coloured boxes that appear that hover across here and bits of type appear as little help files or faq’s or those sorts of things. So lets go and look at that, I'm going to put my hit back to where it was.

Often what you're going to do as well if you’ve got a really small button, say it was a really tiny, delicate button on your up, over, down, your hit area, you can actually make bigger, let me go back to I moved it back. There it is, you can actually make this a little bit bigger for people, I kind of use my dad, my dads a smasher with the mouse, he needs buttons, nice delicate buttons, hed never find them. So we need to find nice big giant buttons that are easier to click. Our buttons pretty damn big already so if you couldn’t hit that one you’ve got trouble. But if you’ve got little wincy buttons, you might have a nice big sized hit area to make it easier for people.

Alright, so that’s half of it. So we can hit save, so we've created a button and its there and it holds there for the whole thing. What I might do just to make it easier for this tutorial is actually have it for the entire bit. Preview, make sure it works. It’s there, its clickable but it doesn’t actually do anything. So were going to learn our first bit of, depends on what you want to call it. Its called actions within adobe animate but that might refer to if you're old school flash, actions script its not, the actions panel is still here, window, actions but actually what its going to do now is its going to write javascript so actions panel, javascript, whatever you want to call it, its going to be a bit of code that we add to this button to make it do something. So lets hit save.

So lets do it, I'm going to have this button selected, I'm going to go to window, I'm going to go to actions and for this thing to work before we go any further is I need to give this, because we converted this to a symbol remember, we made it a symbol, we made it a button symbol. And we talked earlier about naming your instances. In this case it becomes very important because I'm going to call this guy button and he's going to be my more button. And I want people to click it and go off and do something. So you’ve got to give it an instance name because the code needs to reference that. So we've got it selected, window, actions, and if you know the code, you can start typing it. If you know javascript, if you're like me and you have to use code snippet. Use this little fly up thing here, code snippets this little bracket thing or you can get into it straight into here there's one in here that says code snippets. So I'm going to click on code snippets and the little window appears and what were going to do is with him selected, always use these ones, html5 canvas. And heres a bunch of premade bits of javascript that we can use, and the ones were going to use is actions. And there's one in here called go to web page. So I'm going to double click it.

So you can see here, it’s gone through and its taken the instance name and put it in, there it is there. It is btn more. So this button, this instances name called button more has an addevent listener. And that’s just listening for a click, its listening for a mouse click and when it does get that mouse click, when it sees it or when this event listener hears it, it says fire this thing. Go and go this. And down here, we define thing, and that’s called a function, we say this function called this thing up here, what does it do, it goes off and loads a website. It opens a window in a blank tab, so it’s going to go up in a separate tab and it’s going to load adobe.com. We’re going to load, bringyourownlaptop.com. And that’s it, hit save.

Fingers crossed, were going to go preview in a browser and were going to click it and it’s going to open up another blank tab and its going to load the site up. So, lovely, that’s how to create a button. And that’s how to add a bit of javascript to it, what were going to do now is one thing I didn’t do is I'm going to close down the action panels, close down code snippets. Is that this doesn’t have any text on it, so what we should’ve done is drawn a rectangle and drawn the text on it saying more details and then turn it into a symbol. That would have been the easy way. The hard way is were going to double click the symbol to go inside of it, and on our timeline we've got up over down and hit, what Id like to do is create a new layer and I'm going to grab the type and I'm going to click in here and this ones going to be more details. I'm going to pick a size that fits, I'm going to pick a font, more appropriate. I'm going to pick a colour, that’s white and I'm going to move it down here and I'm going to be checking on the up, there he is there and you can do a couple of things. You can put in lots of different key frames up, over, down and hit and playing around with the different font. You might decide to put another one here and over, keyframe. And in this one what I might do is go and change it for to be a thicker font, so when it rolls over, it gets a bit bigger. So up, over, and I'm going to leave down and hit alone, save, preview. Hover over, can you see it gets a bolder version. When I click it, it should jump out to my website.

Before we go any further, we've done a really simple bit of javacript, and that just linked out to a webpage. And that works perfectly if you're building ads for your own site or for a friends site but what tends to happen when you're doing banner ads is you need to add something called either a click-tag or a click through tag and it’s a bit of code that we add that the ad networks want, because what they don’t want is they don’t want you to hard wire it. What they want you to do is they want you to offer up your button to say heres a button and its filled with blank and the person doing the advertising for the marketing team can then decide where your url goes and then they can change it later on and adjust it and test different url’s and things. So were going to do that in the publishing section so that there go to url is great if you're juts putting stuff on your own site and you physically want to hard wire it because there is no third party extra bit. You could do this with ad words as well, and some ad networks will let you do the button and what they’ll do is they’ll find it in the code and swap it out for you. But most of them will ask you to put something called a click tag or a click through tag and well do that in the publishing section of this video group.

Alright, that’s how to add buttons, see you in the next video.