Start learning with our library of video tutorials taught by experts. Get started

Creating a First Web Site with Flash CS4 Professional
Watching:

Creating menu buttons


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Creating menu buttons

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating a First Web Site with Flash CS4 Professional
3h 8m Beginner Apr 15, 2009

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.

Topics include:
  • Manipulating images for the best results
  • Integrating assets from other Adobe products
  • Creating buttons with ActionScript
  • Embedding links to external web sites
  • Exploring text layouts
  • Customizing interactive contact forms
Subjects:
Web Web Design Projects
Software:
Flash Professional
Author:
Paul Trani

Creating menu buttons

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.


Expand all | Collapse all
Please wait...
Q: If I create a website using Flash CS4 on a Mac, can I edit it on a PC using Flash CS4?
A: As long the file is saved as a .FLA file with the extention ".fla" typed at the end of the filename when saving on a Mac, it should open with no problem on a PC.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Flash CS4 Professional.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

Creating a First Web Site with Flash CS4 Professional will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked