This course has been archived, the content is no longer up-to-date or relevant to most students.
Animate - HTML5 Banner Advertising in Adobe Animate.
Daniel Walter Scott || VIDEO: 34 of 53
Upon completing this tutorial, you'll know how to create a button in Adobe Animate from scratch and how to change how the buttons responds to certain user inputs such as hover and focus. You'll also be taught how to change what the button does when it is clicked.
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.
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.
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.