Making a HTML5 Banner Ad Using Classic Tween in Adobe Animate

Hey there, in this video were going to make a proper banner ad this time using a classic tween. So were up to quite a bunch of movies and we still haven’t made a banner ad. Because I guess you need to understand quite a few of the principles before you get to here and were going to use something called a classic tween, we've used a shape tween earlier, I don’t use those very often. Classic tween is the work force for the banner ads. So now that we understand things like instances and symbols we can go off and make our first banner ad. It’s going to look something like this. This is a really quick basic one, its not very slick, I understand, don’t judge me on this one yet but this is the basic core of it and we’re going to look at some of the slick things to make it look a little nicer in the easing. But that’s what we’re going to do.

So first thing were going to do is create a new HTML canvas. And were going to go and change the file size, were going to use real typical banner ad size, so 728 is that really awful banner ad size where its really impossible to design in this little slither, but it’s a really popular one, Google tells us it’s the one that works almost the best. I think the best position is near top right, 350x250 is the most profitable ad anyone can make. This one here is one of the other ones, it’s called a banner ad or a leader board. So were going to do this one, well leave the colour white. Lets save it, I'm going to save it into my project files, this one here is called classic tween. Great, I'm going to move it to the center so I can see it. I'm going to bring in a graphic, so were going to cover images in the very next video, actually in two videos, more in detail but were going to bring in a basic one. And were going to import to stage, this is the stage here, where the white box is, were going to stick it there. You can import any of these guys, I'm going to bring in green. So an adobe illustrator file and when it pops up and asks you a bunch of questions, just click okay because were going to look at these guys in a little bit more detail in a sec. I'm going to scale it down, a tiny bit using my transform tool, holding shift and I'm going to bump it up using my arrows.

So I want to slide in to there, so what were going to have to do is before we do any sort of tweening, classic tweening or motion tweening, were learning classic tweening now, is we need to convert it to a symbol. So convert to symbol, give it a name but mc underscore and this ones going to be called green underscore blob. Great, and were going to make sure this one is a movie clip, were not going to use graphics, well use buttons later on. But movie clip, 99% of the time, it will be a movie clip. So that’s the first thing, were not going to more than one instances of this so its not going to save as file size, converting it to symbol but it is one of the requirements of doing a classic tween, it wont let you do it unless it’s a movie clip. So that’s that reason.

Were going to start it off screen, so anything on this grey area will never be seen, so if you have lots of stuff over here in your grey paste board here. you want to make sure that if I have this logo here and I decide not to use it, what will happen is even if I preview, you can see here, it doesn’t appear but it will be count against the file size because it is just off to the side so make sure you’ve got nothing over here in your paste area. So back to my timeline, it’s a movie clip, great, it’s an instance. I should name it here, I don’t need to in this example but I'm going to do it just to get the habit with you guys. So this is going to be called alien one. So its going to start off screen and then how far along, just so you know if I click in the background here, your document is set to something called 24 frames per second. It just means that every second, is there, 24. So that 2 seconds is 48, my math is terrible. So just as a rough guess, if I want it to slide in for a second I want it to be about 24, you don’t have to match it up I'm going to use say 25. So I'm going to say in 25 seconds, I'm going to out in a key frame. And what a key frame does, it pretty much picks up this black dot and puts a duplicate over there. And at this frame, 25 I would like to move it in, so I'm going to drag it in, can you see it moves it around, if you hold shift while you're dragging it, so you start dragging it first and drag, drag, then hold shift, it will make sure it goes along this sliding line here. So I'm going to move it in to about there, great. So frame one, he's off and at frame 25 he’s on screen.

The next thing I need to do, just like a shape tween, I'm going to right click anywhere in between, I'm going to say create classic tween and hey presto he moves along. Lets do a preview in a browser. Remember command return on a mac or control return on a pc. And he moves in nice and slowly and loops around, for infinity.

Jump back into adobe animate, remember this warning here, what do we do with this, we ignore it. Pain in the bum. So that’s the first bit, we've got our first bit of animation done, great. And lets say now I want to get him to pause for a while because at the moment he loops. I want it to pause for a while, I want it to loop eventually but not so quickly, so to add a pause into adobe animate, is there's no pause button, what you do is, lets say over here at 80 I want it to pause for this length so about two seconds, when it gets out to here, I'm going to right click and insert a key frame. So it copy’s this one, puts it over here, if you don’t move it, they're exactly the same between these two. So he just pauses. Watch this, preview, goes along now he’s trickling along that little timeline here to get to 80 and then loops back around. And well do some nicer things at the end there where it dips down. But that’s how to do it.

So he pauses for a while, the next thing I’d like to do is id like to bring in the text. So it’s exactly the same thing except I'm going to bring it in from the right. And were going to look at different layers. I cannot animate the text to come in from this right hand side over here, on the same layer as I do my little green blob here. So I'm going to name this guy, green blob. And the naming conventions don’t have to be as strict as our instance names down here in the layers. I'm going to add another layer, I'm going to call this one my text type. Now what happens is it gives me a key frame to start with, its an empty one, you can tell its empty because can you see down here it is hollow. So my layer here, it is hollow, this one here is black; means there's something on it. So I'm going to go to frame one, I'm going to grab my type tool, I'm going to click once, ‘this sale is’, I'm going to make it bigger so I can actually see what I'm doing, I'm going to put a return in at the end there and ‘out of this world’, cheesy. Add exclamation marks, you’ve got to add three so they know you mean, exclamation marks. So I'm going to highlight this guy and make him a bit bigger, a lot bigger. How much bigger, about that big. And I'm going to make this, that can stay the really thin weight, I'm going to make that one a style of that, so it’s a bit thicker. Stick to the text, instead of doing white text, because obviously white text is going to disappear, select it all, so double click it with my type tool, highlight it all and I'm going to switch it out to another colour. That green, maybe something a little darker. So I've picked that green, watch this, I haven’t shown you this before, so instead of these premade ones, can you see if you just wander over here, you get this eyedropper. So I've done nothing other than highlighted my text, clicked on colour and then start just wandering around, can you see I can pick colours from here. And its picking from here and you'll start to see it appear in this little box here, so watch, see I can pick the orange from his eye. Then go back to my selection tool and there he goes there.

So what I want to do is move it in there. I'm going to select this text as well and there's a bit of a gap here so the line spacing is a bit high. So over here, if you cant see it you have to twirl down paragraph and I'm playing around with this line height here, you can see you can move it in, drag it out. A bit too tight, so ill do maybe -5. That will do. Okay, and that’s that bit. So I've got my text in there, now who remembers what’s the first thing I need to do before I go and make this a classic tween. That’s right, I need to make sure it’s a symbol, so I select it here in my layer, I'm going to be at my frame one. so here he is here, my bit of type and I'm going to go to modify, convert to symbol, remember its almost always a movie clip, starts with mc, I'm going to call this one sale text. So that’s the first bit.

Now I want it to start off screen, so I'm going to drag it over here, holding shift so it lines up. So it’s going to be here, and then it’s going to slide in. It’s going to start there and maybe at the exact same time, I'm going to put in my key frame. Remember the key frame just duplicates this one all the way over to here. And lets turn the eyeball off on this green blob over here so we don’t get confused. When you're new its really good to lock these back layers and turn them off when you're not using them, it just makes things a little simpler. Alright, so over here, he's off screen and at 25 what I want to do is make sure I'm on this key frame here. I'm going to hold shift and I'm going to drag it along till it comes in this bit.

Great, the last thing I need to do is right click anywhere between these two and go to classic tween. You can see it turns nice and blue, I'm going to turn blob on, I'm going to preview in a browser and there we go. And the only thing is, is that they're coming in at the same time and very often you'll do what’s called a build where you'll have say the logo come on, then the type come on then some images come on, all after each other. Maybe not perfectly after each other, they want to build to get together so what were going to do is I'm going to select my first key frame. We’ll go orange, I'm going to hold shift, click this 25, you can see its selected the whole group of these. Now anywhere in the middle I can just click hold and drag and I'm going to do halfway, so halfway, he's going to get almost in but before he finishes this things going to start. So just keeping a bit of pace, and then this guy finishes and then the types still coming in. its nice to have a little bit of offset on all the different elements coming together. If they all launched together at the same time it starts looking a bit power pointy.

Alright, so that’s how to create an ad using a classic tween. We’re going to go off now in the next video and sex it up a little bit, its looking a little power pointy so were going to go through and do that next. Alright, see you in the next video.