Creating button and graphic symbols

- [Voiceover] Movie clip symbols are actually really powerful as is noted by the Properties Panel. Any time you have one selected, all these options you get, again it's just really flexible, easy to work with, fantastic but there are times where you want to use other symbols as well, and actually there are two other types for this background, for instance, if I select it. It's really just a static background. I might want to fade it in later on, so I want to convert it to a graphic symbol. So if I go to Modify, Convert to Symbol, this is just going to be a graphic symbol and I'll just call it Bkgd, for background, click OK and there it is, we can see it, it's an instance of that background and I can always fade it in later on if I want to animate it, whatever the case may be, okay.

And note that it's referenced right over here, okay. Now let me show you how to create the last symbol. In fact, what I'm gonna do is I'm gonna create a button, and this button is actually going to contain this light bulb instance, okay. So I want to roll over, and it's gonna turn on, it's gonna be really cool. So, with it selected, go to Modify, Convert to Symbol. Now whether it's another symbol or just something that you've just drawn, whatever the case may be, you can have a button with a movie clip in it, is essentially what's happening.

But either way it's a button, and in fact, I'm gonna call it Lightbulb Button, click OK. Go to my Library panel, you can see this is my Lightbulb button all right. Go back to my Properties panel you can see it's an instance of that button, and my settings or properties over here but let's take a look at it, 'cause I'm gonna double click on it and inside of here, this is my timeline, notice how it's changed. I don't want to get too deep into the timeline but I want to show you this is the main difference between a button symbol and the other types.

So, for the overstate in this case. And I apologize that's kind of hard to see it's actually essentially white due to the dot of the i, but right here, for the overstates, I'm gonna right click and I'm gonna insert a Keyframe, just like that, okay. For the downstate I'm gonna insert a Keyframe as well. I'm just right clicking and inserting keyframes. And then I can also have a hit state. but nonetheless, I can have this independent timeline or this interactive timeline is what's going on here.

So for the overstate, I want it to actually glow and I want it to be, you know, pretty bright, so I'll just extend this out and it's kind of hard to see but I'm gonna take that up to about 65. All right, so that glow is happening right now, there. But for the upstate, so the default state, I don't want it to glow at all. So I can select it, go over to Glow, and just remove it. But my point is, is you can modify it any way you want from your up to your overstate. Again, it has that glow and then to the downstate I'll select it again in this case for the downstate I'm gonna change its color to red.

All right so you could see that work out and you can see how this is going to work at this point. If I click back out, again I'm outside of that symbol, you can see that really nothing is going on at this point, it's not glowing, but let me go ahead and do a Control Test, so I'm gonna actually just preview this as wf, that's what's happening and I can see all these different movie clips, that graphic in the background and as I roll over it you can see that it lights up.

All right, see it light up just like that. Now when I click on it, that's when it turns red. So that's how I can easily make a button. Now, notice how when I roll over it, I'm actually not activating the button when I'm in this space here, and why that is is that it has to do with a hit state, or the hit area, so I'll double click inside of it, go over here to this point, and at this point I can insert a blank keyframe okay, and you might have to do this on occasion, and what I'm gonna do in this case is just draw like a larger rectangle, so I'm just increasing that hit area, but whatever's here is gonna be your hit area, therefore when I click back out and I run this, we can see that worked just like that.

Again, pretty cool movie clip instances. We have this graphic symbol in the background, we have this button symbol all really powerful. Use whichever one for whatever case you need it for. All in all, symbols give you that flexibility that you need.