Creating a Simple Animated Web Banner (468 x 60) In Adobe Animate

[Music] so hi welcome back to the adobe animate tutorial today we'll be creating a simple web banner that looks something like this so to start we're going to go to file new alright and we're going to put in a typical web banner size which is 468 by 60 pixels leave it as html5 press okay you get given a rectangle like this now looking at our piece of animation we have a few different layers we've got one background layer we've got our logo which is there we've got two pieces of text and also an actions layer which we'll get to at the end so the first thing we need to do is we need to create a background layer alright so all I did is I double clicked on that text and I want to make that black so I'm going to click on our rectangle tool and I'm just going to draw a rectangle around that section there and I'm just gonna move it so it's it's just it's over the entire section so now that's why so I'm gonna have to go back into my colors and I'm going to have to change the fuel color to black that's our first layer we are then going to create another layer and we are going to import our logo our PNG into our library so to get to library you have to go to window library in your library will be here you can drag and drop things to your library now I already have my picture here so I can just copy and paste that but if you just drag-and-drop it will also go into your library please make sure that you are on the right layer so I'm on my logo layer ok and so now I can put the picture in there and I can see the Captain Marvel which is this over here and it's a PNG because it doesn't have the background okay so now I'm just going to make that touch bigger by going to free transform and holding shift and just making it a little bit bigger so I need two other pieces of layers which will be text layers so I'm going to have text 1 and text 2 layers and I'm gonna write some text just by grabbing the T tool alright and then just right you know the title that you need now I don't want the font to be that size so I'm just gonna go to text I'm gonna go size make it a little bit bigger and I'm also going to go into my properties and this is where I can change the font and just change the color to white and then I'm gonna move it into my little banner over here and I'm gonna make sure that that's in the right layout and then I'm gonna add another piece of text to my other layer there come in sure but this time I'm going to make the writing much smaller and maybe I will space it out a little bit differently so it will look something like that and you can play around with the spacing as well if you want so now I have everything on separate layers what I'm going to do now is to just arrange this a little bit nicer on my screen and to do this I need to go into view and go into rulers and I'm just going to go into my guides and I'm gonna create some guides for this so all I have to do to create a guide is to just drag and drop from the ruler and it can kind of create just a little bit of where you want certain things to be so I'm gonna keep everything aligned to this guide over here I'm gonna grab my text all right I'm just gonna move it over I'm gonna zoom in that's pretty close to it maybe I'll keep it on the line down here so I'm just moving on my keyboard up and down and then I'm gonna move this also and I'm gonna keep that as close to that as possible and I'm gonna just increase the size now it doesn't have to be perfect and whatever you're happy with should be pretty good I'm gonna keep it like that so the other thing you need to check out is there's a button up here which it says click the content outside the stage so if I click on that that is what I'll actually see on this little web banner so maybe I'm just gonna push this stuff up just so that there's a little bit of space in between them now we have to do the animating so to do the animating what we need to do is I'm just gonna go out to about 20 frames so all I have to do is just click on all of these layers and then go to insert frame and now I've got 20 frames to do our animation so now 20 frames is its if we look at our properties our properties are only 24 frames per second that means that 20 frames is less than one second of footage so we're gonna cut that back down to 10 frames per second so that means that we have two seconds here to do our animating so for the animation we're going to start with our logo we need to convert this to a symbol so we do we press f8 and then we call a you know logo call it a movie clip press ok and now if you right click on it and click motion tween now we can actually do our animating so I'm gonna take of that clip content off so I can see where this actually is and I'm going to turn it back on once we do our animation so on frame 1 I've moved the Captain Marvel logo off the screen all right put on frame 20 it has to be back to where I had it before it's gonna go clip to see that's pretty good spot and yeah I'm pretty happy with that so now I can see that Captain Marvel rule zoom in or just cut in like that very simple animation so if I press play you can see that the Captain Marvel just comes back down so I'm gonna do the same thing for the text so I'm gonna make sure that I'm on the right text layer so firstly we have to do the same thing again we have to right-click we have to convert to a symbol this time this is Captain Marvel text movie clip press ok and you can see that in your library there so frame 1 I'm going to have it off the screen it's gonna take that clip off but by frame 15 I want it to be back to where we add it so to do that again you right-click create motion tween and then you know you can go back and play with it however you want to get the animation to work so I said roughly around frame 15 this thing comes in so I can now move it across and you can see all these little dots that basically means that now we have some animation actually you know working all right so Captain Marvel comes in and then finally the coming soon is the last bit of animating that we need to do so again the same process right click convert to symbol coming soon text movie clip click OK but this time I want to change the opacity so to change the opacity what we need to do is we need to click on the text we need to go to color effect alpha and we are going to go to the frame 1 so again click alpha we're gonna change that to zero and then by let's say frame 15 as well click on it again to change it to 100 and so now the text yeah the opacity it comes in so that's pretty much it for our animation yeah if you want to go back and refine some of the the motion settings you can go in and you can actually go into refine tween and here you can use a few things like easing and easier so maybe you should you know have a look at you know playing around with some of these things and you can do it on all of your tweens as well so you know some have like different curves and accelerations and things like that when you're happy with your final products all right you can export it so to export the file all you have to do is go to flop export and then export movie and then that will give you an option to save as SWF if you would like to save it as a you know like a gif file you can also do that in there so once you saved it you should export the SWF and then you can use it for your other websites anyways guys thanks for watching this short tutorial I'll see you next

Channel: The Online Learning Space

Views: 22,018

Rating: 4.7374516 out of 5

Keywords: education, tutorial, technology, software, information, studies, helpful, tutorials, tutor, fusion, CAD, printing, animate, web, banner, Creating a Simple Animated Web Banner (468 x 60) In Adobe Animate, animation, simple

Id: sbMxZC-Pra0

Length: 10min 22sec (622 seconds)

Published: Wed Feb 20 2019