Video: Creating Flash buttons

In this movie we're going to talk about creating{italic} Flash{plain} buttons. {italic}Flash{plain} buttons are a quick, and easy way to create rollovers if you don't have the time, or you just don't have the knowledge to create your own graphic rollovers in an image editing program. In the chapter on typography, we talked about creating {italic}Flash{plain} text, and creating {italic}Flash {plain}buttons is not all that different. Again, there's some pros, and cons to consider when you're working with {italic}Flash{plain} in your pages. Some of the pros include, font integrity, meaning you can choose any font that you want, and it will be displayed properly even if your visitor doesn't have that font installed on his, or her computer. But that also goes for regular graphic rollovers too, because when you create your images in your image-editing program, you can choose whatever font you want, and it'll show up properly in the images. {italic}Flash{plain} buttons are very easily updated.

In Dreamweaver CS3 Essential Training, instructor Garrick Chow delves into the many powerful features of the latest version of this powerful web design application. He covers everything from the simplest basics of using Dreamweaver CS3 to applying it to develop a fully interactive, accessible site. Garrick explains the new interface features, and demonstrates how to create, edit, manage, design, and publish a professional website with Dreamweaver CS3 and complementary applications. Exercise files accompany the training.

Creating Flash buttons

In this movie we're going to talk about creating{italic} Flash{plain} buttons. {italic}Flash{plain} buttons are a quick, and easy way to create rolloversif you don't have the time, or you just don't have the knowledge to create your own graphic rolloversin an image editing program. In the chapter on typography, we talked about creating {italic}Flash{plain} text,and creating {italic}Flash {plain}buttons is not all that different. Again, there's some pros, and cons to consider when you'reworking with {italic}Flash{plain} in your pages. Some of the pros include, font integrity, meaning you can choose any font thatyou want, and it will be displayed properly even if your visitor doesn't have that font installed on his, or her computer.But that also goes for regular graphic rollovers too, because when you create your images in your image-editing program,you can choose whatever font you want, and it'll show up properly in the images. {italic}Flash{plain} buttons are very easily updated.

With just a few clicks, you can change the text, and the entire look of the {italic}Flash{plain} buttons saving yourself a lot of time.Some of the flash buttons have more complex animations, than what's possible with regular JavaScript rollovers.Again, on of the cons that we're working with {italic}Flash,{plain} is that it requires a plug-in so, if somebody doesn't havethe {italic}Flash{plain} plug-in installed on his or her computer, they won't be able to see your {italic}Flash{plain} buttons.That's really becoming less, and less of an issue these days, as more, and more people are getting {italic}Flash{plain} plug-insinstalled on their computers by default. A lot of the times when you buy your computer, the flash plug-in is installed.You run into {italic}Flash{plain} so many times these days, it's becoming less likely that somebody won't have that plug-in installed.

Let's see how we do this. I'm going to open up the folder ourproducts. In there we'll find teacloudteas,which I'll open up, and we just have this blank navigation area that I'll click into, and we'll use that as the placeholderfor the {italic}Flash{plain} button we're going to create. To do so, we're to Common area of the Insert bar. We have the Media button,and from there I'm going to choose Flash Button, which opens up our Flash Button dialog box.We see a little Sample up at the top, and using that we can browse through all the different types of {italic}Flash{plain} buttonsthat are available. Rolling over, or clicking on them will give you a little preview of their rollover interaction.

I'm just going to good go boring here, and choose, Beveled Rect-Green. Next we can add our Button text,and just for this example, we'll say we're doing About Us. We can choose a font, and again, if you have the font installedon your computer, you can use it. I'll just go with Futura. We'll leave the size at 12. We can browse for what this buttonwill link to. In this case, we're linking to aboutus.html. We can choose a background color for the button.For a button like this that's rectangle already, we probably don't need to be too concerned with the background color,but for some weirdly shaped buttons like this, the background color will show through so, it's important to choosea background color that matches the background color of where ever you happen to be placing this button.

In this case, I'm going to sample that background color right there. I'll just leave the name as button1.swf,but you can give it a more specific name if you wanted to, and we'll click on OK. There's the button.It's asking me to give this a title. I'll just call this About Us for Alternate text, and there it is. I'll go ahead, and save this,and we're going to preview this in our browser, and there it is. I didn't even have to choose an over,or a down state, or anything like that. I've got this About Us button. There's the off state, or the out-state.

I'll rollover it, there's over. If I click down, and hold, notice it's got an over while down-state too. This is a multi-state button,and of course, when I click and release on it, it takes me to the aboutus.html page. It's very easy to create a {italic}Flash{plain} button.If I want to edit it, I can just double-click it. If I decide this should have been the About Tea button you can change that.if I want to change the button itself altogether into something like that, or something crazy like StarSpinner click on OK.

There's that button, and now you can see why it was important that I chose the same background color there.I'll save that. Preview that in the browser, and there it is. You can see the star spins when I rollover it.When I click the star it actually gets bigger, and when I click it still takes me to that page.That's how we insert a {italic}Flash{plain} button. Again, it's a very easy way to create a very quick rollover in {italic}Dreamweaver.{plain}I can easily just start adding more buttons, and create my entire Navigation bar very quickly.

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.

Already a member ?

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

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

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