Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the most common components that you'll create using Flash Catalyst is the Button component. Buttons have some pretty basic settings and let's see how we work with them. I'm going to create a new project. I'm going to specify though a little bit of a darker color for a background and I'm going to click OK. Next, I'll go over to the File menu and I'll choose Import. I want to bring in an Illustrator file and I'll choose my file here called button which is in Chapter 3 of my Exercise Files. I'll click OK. I'll also click OK on this Import Options dialog box and bring my artwork in right here inside of Flash Catalyst.
Now by taking a quick look at my layers structure here, I have inside of Layer 1 something called Growing, it's a group, and in that I have several different elements. I'm going to use these elements to build my button. To make it easier to see on the screen here, I'm actually going to zoom in. I'm going to press Ctrl+ Plus sign (+) on my keyboard so we get a better view of the button here. I'd like to design a button that looks different when I run my mouse over it. In its default state it looks like this: a monochromatic piece of art. However, if I turn that layer off and I reveal a Color layer, I see a color version of my artwork.
I also want people to identify which part of the project they're going to when they mouse over this. So I have some text that indicates this is the GROWING section of my project. So for now I'm going to turn these two layers off. I'll put monochromatic back on and I'll get to work creating this button. The first thing I need to do is to select my artwork. I can either click on the artboard and drag to select the artwork this way or with it deselected I can also click on that entire group here inside of the Layers panel. Whenever you have some artwork selected the HUD or the Head-Up Display will appear offering you some options.
It's context-sensitive, so depending on what art you have selected, you may see different options. For now you can see that I have the Growing (Group) selected. The HUD is offering the option to Convert that Artwork to a component. Now I want to turn this into a Button component, so I'm going to click on this pop-up menu here and choose to convert this to a Button. In doing so, look at my Layers panel, I no longer have all those options. All I have now is a single element called Button. In the HUD I have the ability to Edit the Button Appearance. Now depending on what that Button is doing at any time throughout the application, it can have four different appearances.
We refer to these four different appearances as four different states. I have the Up state, which is the way that the Button appears when the mouse cursor is not on top of it. There is the Over state, which appears when my mouse is hovering over that Button. The Down state, which refers to when you actually click and hold your mouse button down on top of the Button. Then there's the Disabled state. This is a state that's usually controlled programmatically, which indicates that the Button is not usable right now. For example, if you had some kind of a form that you wanted someone to fill out and you require them to fill out all the fields, maybe the Submit button is grayed out until they go ahead and actually fill out all the items on the form.
That grayed out button would represent a Disabled state. So at this point we've created our button and we want to modify the appearance throughout the different states. There are two ways to do this. I can either click on any of these buttons to jump to a specific state, or I can double-click on the button on the artboard itself. In doing so, everything else on my artboard gets grayed out with these diagonal lines and my button is in full view. If you're familiar with Adobe Illustrator, you might notice this is very similar to working in Isolation mode. In fact, Flash Professional also has similar functionality.
You can always tell where you are in your project by looking in the upper left-hand corner of the document window. Since I haven't saved my project, I have something called Untitled Project and I'm currently in the GrowingButton that appears inside of that project. We call these breadcrumbs, because they identify exactly where you are in your project. To exit this editing mode you can either click on this little arrow here to back out of the project, or you can double-click on any other area on your screen, but for now I really want to focus on changing some of the states of my button, so I will go ahead and double- click on the button to enter the Edit mode for this button.
At this point there are two things to take notice of. First of all, in the Pages and States panel I now see a separate state for each of the states of my button; the Up, Over, Down, and Disabled states. I can click on these to move between these different states. The other thing to notice is that my Layers panel has changed somewhat. It's showing me all the elements inside of the GrowingButton. If I click on the triangle here, I now reveal all the elements that I saw before I created the button. In this mode it's really easy to change how your button appears through different states of functionality.
For example, we already know right now what the button looks like in its Up state. However, we want to change how it looks in its Over state. So I'll go ahead and now click to switch to the Over state and now anything that I change in my artwork will become visible when my button is in this Over state. So I'll come to my Layers panel, I'll turn off the Monochromatic layer, but I'll turn on the Color layer. I'll also turn on the text here that says GROWING. Now to exit the editing I'm just going to double-click on a blank area in my artboard. I can't preview the button, at least not its functionality here inside of Flash Catalyst.
To do so, I'll need to run this project in a web browser. So I'll go to the File menu and I'll choose Run project. This will now open that button inside of my web browser and I can interact with it and see how it works. Notice now when I run my cursor over it, it changes to the Color version and the word GROWING appears. However, I may want to make a few modifications. For example, I note that when I click on it, it goes back to the black version and the word GROWING disappears. Also, in the Over state while the word GROWING does appear, it may be a little bit hard to read that against the dark gray background.
So let's see how we can make changes to our button to address these problems. I'll go back to Flash Catalyst, and once again I'm going to double-click on that button so I can edit the various states of that button. First, I'll click on the Down state and I'll actually show the Color version. This means that when I click on it, it won't change back to the Monochromatic version; it'll remain in Color. Next, I'll go back to the Over state and in the Layers panel I'll click over here where it says Tab to select that rectangle. I'll then click on the handle over here and stretch it out so that the white area actually extends all the way behind the word GROWING.
Now let me point out one new thing that the HUD now displays. It tells me that this object, which is that Tab that I just extended, actually has different properties in the other states of my button. It's asking me if I want to make that exact same change now in all the other states. In reality I don't want to make that change in the other states. I only want this white background to appear behind the word GROWING in the Over state. However, it's important to know about the setting, because this way if I do make a design change, I don't have to physically make that design change in other states as well.
I could tell Flash Catalyst, make this the same in all other states. Now that I've made these changes, let's double-click to exit the Editing mode and go back to the File menu and choose Run Project to see how this button works. Notice now that when I run my mouse over it, the white bar behind the word GROWING makes it easier to read. Likewise, when I click on it, I can see that color does not change back to black-and-white. It only does so when I move my mouse off the button. So creating buttons inside of Flash Catalyst is not hard at all. All you need to do is take some artwork, convert it to a Button component and then specify how that button should look in the various different states.
Get unlimited access to all courses for just $25/month.Become a member