Learn How to Create and Arranging Buttons in Macromedia Flash 8
Tags:adobe acrobat,adobe illustrator,adobe indesign cs2,adobe pagemaker,adobe photoshop,cmyk,control palette,object styles,rgb,total training
Grab video code:
Now, the way this is setup in the timeline, our dad will just run through each animation bouncing from one to the next. It look a little bit random because we do not want the dad just playing each animation one after the other. We want to have some kind of introduction for it. This is going to give us the chance to put a little interactivity into our presentation. What we will do is, we will let the user who is viewing this file to control which exercises the dad is going to perform. Now we have got the exercises setup.
I am going to set a little structure framework around this so that we can put in: 1. Some buttons to control the animation. 2. Some scripting to make it all work properly.
Let us do the buttons first. My buttons are going to be a graphic element. So I am going to insert a layer for them just like all the other graphics that we have done so far. I am also going to set a position for them to start by using that blank key frame that we used before. A blank key frame is exactly what it implies. We have got a key frame to make changes but it does not have any art work in it. But that is okay. I can fill up the art work with any of my tool palletes over on the side.
I am going to draw a simple rectangle for my buttons. Now I am going to pick the color for this rectangle before we do it. I use the paint bucket to set the interior fill of my rectangle and I am going to choose a medium blue color. For my stroke color, I am going to choose a little bit darker blue and I can also use the properties down here to setup things like the width and the pattern of the line. I am simply going to change the width to a little bit thicker line. Let us say 5 pixels. Now, when I have my rectangle tools selected, I can use the options to modify what kind of rectangle I am going to draw and I am going this tool here to allow me to put a little corner radius so I have rounded corners on my rectangle. Something like 4 pixels should be fine.
Now, I am ready to go ahead and draw the shape of my button. Our rectangle is a simple but effective shape for our button. We will find out when we work on buttons later in our lessons so you can make your button out just about any graphic that you have in the program. Now, I am going to make this into a button by selecting it and using another feature in our Modify menu. I am going to use a Convert to Symbol. This will take our graphic which is just a normal rectangle and make it into a symbol which is one of our library elements over here on this side.
We have a quick chance to look at both movies clips and graphics and you will see that the third type of symbol, that is our button. I am just going to give this symbol a name and it gets added to our library files just like that. I am actually going to want more few buttons instead of just this one. So like we did before, I am going to drag another copy of our button symbol out and I will actually want one of them for each one of the exercises and another button which we use to make the dad stop exercising. I can do a quick arrangement of these symbols by selecting them. This will give us the chance to use our line palette up in here. These tools will allow us to line up all of our objects vertically or horizontally and even set the spacing for them.
For our exercise, I am going to use an alignment to the top edge that lines them all up nicely horizontally this way, and I am going to use the horizontal spacing tool to make sure that they have even space between them. Now, our buttons are not going to be very good without any labels on them. So let us zoom in a little bit and set those up. I am going to grab all three of these and move them down just a little bit because you have got a little bit more room in our screen and I am going to add another layer where we will put some texts labels for our buttons.
We are using a technique here where we are actually using the same button graphic but putting different labels on them to simulate different buttons. We will be showing these and some other techniques later on in the lessons as well. I will make my