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.

Creating Symbols and Instances in Adobe Animate

Daniel Walter Scott || VIDEO: 19 of 53

Download Exercise Files

Contents

Introduction

In this episode we'll have a look at what Symbols and Instances are and how to create them in Adobe Animate.

Comments

Video transcript

Hi, in this video were going to talk about creating symbols in instances. Now explaining symbols and instances before we get an actual see what they do is a little tough. So lets go and make something, convert it into a symbol and then work with the instances to really demonstrate what it does. It’s about keeping file size down as one of the big reasons.

So were going to crate a new HTML5 canvas, I'm going to save this one I'm going to save it into this one, its going to be called 19a, 19a is remember just my sequence that I'm using for my videos. And I'm going to call this one symbols instances. Great, so first thing I'm going to do, I'm going to be drawing a little space alien, I'm not sure why, but a space blue for the background, great. We've drawn with the pencil tool before, now were going to draw with the paintbrush tool, the difference is that this one here, the paintbrush tool actually paints around with strokes, this one here, very similar to the pencil tool, were going to use the brush tool. This brush tool paints with fills, so were going to kind of fill in the center mass of our little alien. I'm going to pick a fill colour, make sure there's no stroke, and brush size, you can see its probably starts off down here where its quite thin and I'm going to increase it up so its quite big, even thicker than that. Maximum size, so can I go any bigger? Nope, that’s about it. Okay, that’s a big enough size for me and the smoothing is at 50, just means its going to, watch this when I let go it eases off the edges here, actually I'm going to go to 100. Try and make it look as nice as I can. So I'm going to draw a little alien, its pretty exciting. Now I could go and paint this all in but I can use the fill, the paint bucket tool here, its going to fill the same colour, just fill that center in. go back to my paintbrush, I'm going to give it little antennae’s, I'm going to give it some feet and I'm going to give him an eye, I'm going to paint straight over the top, am I going to use the circle tool, nah ill use the paintbrush tool all the way through, and I'm going to draw a circle. I should be drawing it separately and drawing this on afterwards but I'm not. Black, in the center, go back to white, give him a little sparkle, that’ll do.

Okay so little alieny thing, next thing I want to do is id like to convert him into a symbol. Why are we going to do this, I'm going to select him all and transform him, make him smaller, because he’s a bit big at the moment, because I want lots of them on the page. So I'm going to go to my free transform tool. Yours might be hidden under the gradient transform tool because we used that earlier in the course, so you might have to click and hold it, hold, hold and grab the free transform tool. What key do you hold down to reshape it so the height and width sticks? That’s right, shift. And I'm going to drag it down so he’s a smaller part of this document here.

I'm going to go back to my selection tool and what I want to do is I want to use him loads and loads and what I could do is I could copy and paste him so you go to edit copy and edit paste and I can keep pasting these ones and have lots of them. The problem with adobe animate is that the computers not going to see them as the same, they're going to be separate things and say this one here is 1KB, this one here’s going to make it 2Kb and 3Kb, its going to multiply by how many times you paste it. So what we want to do is use a trick where you use something called a symbol and an instance. So what we do is we select him all, and we go up to here to modify and we go to this one that says convert to symbol, and most the time were going to use this one called a movie clip. So make sure its set to movie clip and nothing else. Were going to name it, its really common to name it mc at the beginning then underscore, so, mc is for move clip. You don’t have to add this but its really helpful later on when you're trying to work out who is what. So movie clip underscore and call this one Bob. And so, what’s happened now is that he’s being converted into what’s called a symbol and that symbol only exists in your library here, so I've switched to my library and there is mc Bob. So he sits in my library. And now there's one instance of bob on my desktop here, it’s like a parent and child relationship.

So in my library, is the symbol. He’s the parent, the one that is on my stage here is the children or they're called instances. And the cool thing about it is you can drag by dragging this icon here, the little gear icon, you can drag out lots of instances of Bob. Now the difference between what we did before from copy and pasting is that what adobe animate is able to do is that it loads Bob, mc Bob as a symbol and lets say its 3KB for arguments sake. Now it’s able to replicate mc BOB as instances of them, loads and loads of times without multiplying how big the 3KB from Bob. So it will be very minimal, in term of I could put 100 of these out here, and it wouldn’t be multiplying the 3KB over and over again. That’s one of the big reasons we have these things called symbols and their instances on the stage.

Now there's a couple of things we can do to instances because at the moment they look very samey. So there’s some things that we can do to it and there's things that we cant do to it. So we can rotate it, change the colour, change the transparency. We can do that, no problem because it’s essentially the same thing with a little bit of a filter on top. What we can’t do is we couldn’t have one of the aliens looking like this, and another one with a moustache, another one with a hat. Why? Because they are physically different, you’d need different symbols in here. So the instances can only be topically changed when they're on the stage.

Now when would you use a symbol and instance. There's a couple of things, obviously when its been used more than once. So even if it’s just twice. Were going to have this big limit when we get to publishing in terms of file size, its about 150KB and that’s a real big pain if you're using images. So were going to try and use as much as we can or reuse some of these symbols to keep the file size down. So that’s one use. The other reason we’d use movie clip or the symbol and instance is that we have to use it when were doing a classic tween and doing animations in an expert area. So if we want to animate anything that’s not a shape tween like we did earlier when we move them across the screen. We have to use this one. So pretty much anything gets converted into a symbol but these are the perks. It keeps the file size down.

Alright, lets go to the next video where we look to adjust these guys to make them a little bit more unique.