Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Information on how to learn Flash is prevalent, but it can be frustrating to understand how to make an entire working web site using this unique technology. Here's a course that cuts through the clutter and offers practical tools for creating a dynamic web site, even for first-time developers. In Creating a First Web Site with Flash CS4 Professional, veteran Flash instructor Paul Trani simplifies the process of integrating animation, video, audio, and user interactivity to create a site that is dynamic and appealing. The goal of this hands-on workshop is to teach web site-building skills for today's demanding interactive industry. Exercise files accompany the course.
What I want to do now is create menu buttons that will eventually go to the various sections of the site and I'm going to do that in a very intelligent way by making a reusable button. So here are my text items up at the top here. These are basically static text fields and I can click on them and I can see in the Properties panel it is a Static Text item. Now I don't want to have this text as part of the button. I want to put a button behind this text, so I can use this button across all four text items.
So the first thing I need to do is twirl down this Menu folder, because I want to create a new layer in this Menu folder that's going to hold our button. I'm going to click New Layer in the Timeline panel and I want to rename this layer by double-clicking on it and typing in Buttons. Now I can drag this Buttons layer down to the bottom of this Menu folder below all the other text. And just it keep me from accidentally selecting this text, what I can do is I can lock down those layers. So don't want to accidentally select that text and move it; I want to lock it down, because I'm going to be creating my button in this layer.
All right, now what I want to do is in my toolbar, halfway down I want to select the Rectangle tool. The first one in this list, Rectangle tool, and then what I want to do is I want to choose my Stroke and Fill Color. And for my Stroke color I'm not going to pick a color at all, I'm going to select this box with a line through it, because I don't want there to be a stroke. So I'll select that and I want to go ahead and select the Fill color. I can pick any color I want if I just click and hold that down, in this case I'm just going to select black and now I'm ready to go.
So make sure you are on the appropriate layer, in this case the Buttons layer, because whatever layer you are on is which you are going to end up drawing on to. So now I can just go ahead and click and drag to draw a box around that Home text, roughly about that size. That looks pretty good. If you want to reposition that, you can always select your Selection tool, select your box that you have just drawn and you can use your Arrow keys on your keyboard to line it up just right. All right, so here's our shape that has just been drawn. If I select it, I can see in my Properties panel, it's just a shape, sort of a raw shape, and I can change the color and do some other things with it, if I want. But what I want to do is I want to turn this into a button symbol and the easiest way to do that is go to Modify and make sure it's selected. I want to go to Modify > Convert to Symbol. Now this allows me to convert this shape to a symbol and I'm going to call this Generic Button, because it's not going to have any text in it, it's just going to be our standard generic button for all of our navigation items at the top, so we'll just call it Generic Button.
I want to make sure the type is a Button and the registration point can be in the upper left, and select OK. All right, now we can see in our Properties panel, it says that it's a button instead of being a shape. But know where I put it. Let's take a look at where I put this file. I'm going to go down to Library and open up my Library panel and I can see that here is my Generic Button. So any time you make a symbol, it's going to put it in your Library panel, there it is.
All right, so actually I want to edit this button now and the easiest way to do that is just by double-clicking it. Now look what happens, it washes out everything else, scales it back, so you can focus on what you have just selected. In this case it's this Generic Button. So it tells me right here, this is a Generic Button and let's take a look at my timeline. My timeline shows this keyframe here and it says Up, Over, Down, and Hit. So I can put different items in these various frames. That's what I want to do. I want to go ahead and insert some additional keyframes. So for the over frame, I'm going to right click and I'm going to insert a keyframe.
Now I can go ahead and modify this. So in this case, maybe if I want to select this shape, I can select the Free Transform tool, the third item down in our Tools panel, and I can go ahead and scale it like that. Because on the over state, I just want to show this thin little bar. So what's going to happen is when the user rolls over this word Home, they are going to get this thin bar across the top. For the down state, I want to do a right -click and insert a keyframe there as well.
That's where I want to get my full Fill Color covering behind the word expanding down. So if you're over state, you are going to see the bar. Down state, that means when you click down, your mouse down, it's going to show this full black area. And your hit state is the last area I want to add a keyframe too. I'm going to insert a keyframe here and what this says is this is your active area. So if I expand this out, this is going to help users to interact with this button. So now the Active Area, when the user rolls their cursor over this button, it's actually going to be active in a larger area as opposed to this smaller area.
So it's always good idea to make your hit area larger just to make it easy for people to click on your buttons. All right, so there it is. The last thing I'm going to do is I actually don't want anything in this first frame. So I'm going to select that shape and I'm just going to hit the Delete key. So now there is nothing in the first frame, there is something in the over frame, there is something in the down frame, that full square and then the hit area is larger. To get back out to the main timeline all I need to do, since I'm done editing this button, is I click on Scene 1 and now I'm back out here.
It's interesting to note that it now turned our black square into this teal color and that just shows you that it gives a reference color even though there is nothing in the first frame. So if I double-click on it, it's basically showing that there is nothing in this first frame, but an item does exist. So that's why it makes it teal. You will never see the teal color. They are just giving you a generic color so you know that this is a button here. So what I want to do now is I want to go ahead and test this for you.
So I'm going to go to Control > Test Movie. I expand this out and when I roll over this area, I can see that black bar up here at the top. And when I click down, so mouse down, I can see the full black square and then it will take me wherever I need to go once I add the action to it. But you can see once I click, I can get the full square and then when I release it goes back to that over state. Keep in mind my hit area, so that last keyframe I added, is that larger square. So when I'm actually out a little further, it still activates the button. So that makes it easier to click on any button that you'd like.
Now remember the text is actually not part of this button and that allows me to reuse this button for these other navigation items as well. So I'm going to close this and I'm going to go ahead and duplicate this button. An easy way to do that is just go to Copy and then Paste in Center and I have just copied and pasted that item. Now I can place that right here. Another way to actually bring out items from your library is if I expand this out and I go to my library, here is my Generic Button. I can easily drag this onto my document as well. So now I have three buttons and let's do that for the last one, drag out my Contact button there.
If I want to adjust these I can use my Arrow keys, line them up however I want, like that. It looks pretty good and let's go ahead and go to Control > Test Movie. So now when I roll over Home I get that button, About, Portfolio, Contact, and when I click on each one, I can see that I get that hit area as well. I do need to adjust these two a little more. So that's what I'm going to do, adjust them a little more and I can scale them if I want to. I can manipulate these buttons more if I want to, but in general they are looking pretty good.
But that's just to show you. I'll close that panel, so we can see all of these. You can see that I can make one button and reuse it four different times in this case, and the great thing about this is if I want to change the look in any way, it's really a matter of changing that one instance. In fact, if I go to the hit area for instance, I can go ahead and resize it to maybe something smaller, and I can see how it's changed it across the board. In fact, if I make this a little smaller, you can see that it changed in all those instances as well.
So again, one symbol is all I need to edit and it edits across all three. I can then go ahead and add some actions to it and actually have these buttons work when I'm ready to do that.
Find answers to the most frequently asked questions about Creating a First Web Site with Flash CS4 Professional.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.