This course has been archived, the content is no longer up-to-date or relevant to most students.

This lesson is exclusive to members

Animate - HTML5 Banner Advertising in Adobe Animate.

Mini Project

Daniel Walter Scott || VIDEO: 33 of 53

Download Exercise Files

Contents

Introduction

Upon completing this tutorial, you'll have completed a web-ready HTML5 Banner Ad that looks beautiful and is ready to be shared with the world.

Comments

Video transcript

Hey, this video we’re going to do a little mini project. So we've got a banner ad to make and were just going to go through the motions again. What id like you to do is play along and id like you to post your version of it, and post it up on the site, just so I can have a look and we can share out what were doing and just a little mini project. So the other reason were going to do it is we’re going to get to the end and add a button to this so we can have it clickable and go to places.

So were going to create a new ad, its going to be a very standardized, 250 by 250 pixels. You'll notice in here I'm just tabbing to get from one to the other, rather than clicking in each other them. Were going to leave the frames, I'm going to change the background colour. What colour is it going to be? I don’t know, I don’t mind. When I say I don’t mind, I spend ages picking colours. That’s going to do for me. I'm going to save it, I'm going to give it a name, remember, underscores. Okay, so were going to bring in an image, I'm going to go to file, import to stage. And in your exercise files, use the monsters one, you can use any one you like, cartoon car, I like to see what you're doing. So lets go to animated monster, pick one of these guys. I'm going to use this guy, wings. Illustrator one, brings it in, sticks it on its own layer, there it is there. And I want to get him to animate in, and I want to get some text to animate in. so I'm going to scale him down a little bit before I turn him into a symbol. Scaling a vector doesn’t matter, I said when you brought in images like things from Photoshop, anything pixel based. If you shrunk it down, you need to really bring it in in actual size. But vector doesn’t count, you can scale it any size, giant, small, it’s all the same in terms of its file size which is lovely about vector.

So I'm going to start him off screen. First thing I need to do is modify him, convert him to a symbol. I'm going to call this guy mc monster and he's going to start off screen, maybe at about 25, he's going to slide in, insert key frame, slide him in, and I'm going to insert classic tween and you should slide across. The next thing I want to do is play around with the easing. Its always the first key frame, click on the key frame, I'm not going to use that, I'm going to go straight to the custom one and I'm going to do the mountain. So the ski jump ease out and the mountain like this is an ease in. so he's going to slide in there and stop, lovely. Alright, so he's going to slide in there, stop and then ill get him to pause for a long time. Key frame, he just sits there. And I'm going to add another layer, this is going to be my monster layer, I'm going to add another layer and this ones going to be my text and then were going to add a button. So were going to add some text, were going to leave room for a button. So I'm going to have ‘Monster of a sale’. Terrible puns all the way through this course, I'm going to have, I love using Museo Slab, its downloaded from the type kit website which is part of your creative cloud license if you want to go off and do that and I'm going to make this one the 100. And I'm going to increase this file size until it lines up. It’s hard to do. You don’t want to try and use half point sizes as well, it plays around with the clarity of it. And we are going to play around with the line spacing. What colour is it going to be, kind of that but its actually going to be more like that but I'm going to go back into it once I've picked it and switch it from RGB to HSB, hue, saturation and brightness, its more what you typically use. For some reason it defaults to RGB, which nobody seems to use in this adobe land. You're more using this hue saturation and brightness.

I'm going to drag it out of here so it’s a lighter shade of it, grab this guy see what it looks like, monster of a sale, first of all it doesn’t fit, Dan. I'm going to use the free transform tool, this is a bit of an on the flyer one, I didn’t practice this first. So, I need him to actually slide down. He’ll be fine, and I'm going to get him to slide from the bottom, and then slide up. Lovely. His wings don’t quite blend in there, so I'm going to do a little preview. Pretty exciting.

One thing, did you see, he took off right at the end there, he flew over there because that was where I duplicated this for the pause and the pause only works when they're exactly the same so what I'm going to do is, you could do a couple of things, you could copy and paste that first frame. I'm going to go and clear that key frame and then put it back in. so it picked it up and duplicated it across there, great. So he should stay the whole time. Now this monster of a sale I'm going to get it to start so I'm dragging it along to about there. So before he gets to his point there, I'm going to get him to first of all we’re going to animate him, so first of all we've got to convert him into a symbol. So ill call him mc sale text. And he is going to do what, he is going to, play around with getting bigger. So we haven’t done scale yet so lets do that. So well go to my free transform tool, actually what I want to do is at about here I'm going to put a key frame because that’s where I want it to end up but back here, I’d like it to be really small. How small? Very small so you can barely see it. It’s going to appear there and get bigger. Need to add my classic tween, start small, gets bigger. I'm going to add some easing to make it look pretty and I'm going to do a little rebound. So I'm going to get it to, it’s going to do the hill again, actually it’s going to do both. I'm going to do the s curve. So it’s going to start small and get bigger. It’s freaking out a little bit with the previewing. It happens, don’t sweat it, it'll look good in the browser or at least test in the browser. I want it to do that, I want it to be a bit shorter, play with the easing so it starts. I'm going to preview it in a browser. Remember don’t preview it in adobe animate.

It’s not really what I wanted. I'm going to start fast, and come in nice and slow. There we go. Preview in a browser, oh I feel like mines going to crash. If it crashes ill pause the video and come back. Are you sure you want to cancel, yes? Good save. Now I'm going to go to preview. Lovely, and what I might do is get it actually to come out and then go a little bit past where I want it so I'm going to make another key frame just over here, insert key frame. And then, I want this one actually to go a bit bigger, so it’s going to scale up, back and then get a bit smaller. So I need to put a classic tween in between. I want to put a bit of easing between these two guys and what I want it to do is I want it to start slow. I don’t know actually, I'm going to have to do a bit of testing in this one. Let’s give it a go. Alright so it’s going to go up, past where it needs to go and get a bit smaller. And what I might do with this easing is not be so ruthless with the hill. Lets just give it a test, how exciting is that? Its exciting enough, I'm taking that as a win. I'm stretching that out a little bit just so it doesn’t play so fast. This is the sort of timing which we don’t cover in this course and this is the finessing that you end up doing is playing around with all this easing, maybe this easing, maybe this other easing and you play around with it all and then you have to start playing around with how far the key frames are apart. The closer they are together, the faster the thing happens. And I was a bit worried there it was going to crash. But it didn’t.

Alright, monster of a sale and now I want a button. And you know how earlier I said make sure you leave room for a button, I didn’t do that. So were just going to whack it on in the middle here. so that’s going to be us for the moment. Is it pausing long enough, yeah. So I'm going to leave this one here, if you want to skip along this project, well you’ve watched the whole video now anyway but ill do a save as of this version and well get started with the button with the next one. so lets hit save, and ill see you in the next video.