Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When defining some kind of user interface, you might want to create a checkbox. Well, there happens to be a component for that. So I'm going to start by creating a new blank Flash Catalyst project. I'll click OK to take the default settings and in the Wireframe Components panel, I'll drag the Checkbox component out onto the artboard. Remember, this is the no- frills version of a Checkbox. It's a simple box with the word Checkbox that appears next to it, but we always have full control over the appearance of our components. Before we create a custom version of this however, let's see the parts that make up a Checkbox.
I'll double-click on this component and you'll see that unlike a Button which has four different states - one for Up, Over, Down, and Disabled - a Checkbox component actually has 8 different states. There are four states for when the Checkbox is not checked and there are four states - again Up, Over, Down, and Disabled - for when the Checkbox is checked. Now that we know that, I'll double- click on a blank area to exit the editing mode, and I'll go to the File menu, because I want to import some artwork that I created inside of Illustrator. I'll choose Illustrator File and in my Chapter 3 folder, I'll click on this file called olive_box and click Open.
I'll use the default Illustrator Import Option settings by clicking OK, and I'll click on the Layers panel here so we can see exactly what I just brought in from Illustrator. To see it better on the artboard, I'll also zoom in by using the keyboard shortcut for the Zoom tool by holding down Control and the Spacebar key. I'm on Windows, but if you're on Mac they will be Command+Spacebar. I can click-and-drag to draw marquee around that object to zoom in to see that piece of artwork better. By the way these are the same keyboard shortcuts that you'd find inside of Illustrator or Photoshop. So I see that I have a Group, which I can turn on and off, and I have a Rectangle.
By the way, I just want to note that right now my Rectangle has a white fill inside of it and this is going to be important. We're obviously going to want a user to click anywhere inside the box to check it. However, if the box doesn't have a fill, there's no area to indicate that someone's clicking on that button. In other words, if the box has a fill of none, then running your mouse cursor over that area doesn't do anything for the component. By filling the box white it means that any time I move my mouse within this general area, I can be activating that Checkbox component. To make it a little bit easier when I create this component, I'm actually going to leave the Group layer turned off for now.
But it's important to note that even though you can't see something inside of Flash Catalyst, you can actually still select it. To demonstrate what I mean, I'm going to click on the artboard here to deselect everything. I'm now going to move my cursor into the Layers panel and I'm going to click over here on the Group layer. Notice now that Layer 1 indicates that something is selected. I can't see it, but I now have selected that Group. I'm also going to hold down the Shift key and click on the Rectangle object. Now I have two elements selected, the Group and the Rectangle, and I want to convert both of those to a Checkbox component.
Looking at the HUD I'll now choose to convert my artwork to a component by clicking on the pop-up here and choosing Checkbox. I'd like to edit the various states of my Checkbox, so I'll double-click on it. Now in the regular Up, Over, Down, and Disabled states, I want the box to appear empty. However, when the Checkbox is selected I'd like to see those olives. So in the Pages/States panel, I'll just move this slider here so I can view all the selected states. I'll go to the Selected Up state and turn on the olive group. I'll do the same for the other states as well.
Now that I've turned the olives on in all these states, I'll double-click to exit the editing mode. Now let's see how this appears on a web browser by going to the File menu and choosing Run Project. This will open up in Firefox and I'll be able now to see that button. This was the generic no-frills checkbox and this is the Checkbox that we just created. When you click on it, you can see the olives appear that means the box is checked. Click on it again and the olives disappear. So while Checkboxes may not sound very exciting, know that in Flash Catalyst you can make a checkbox appear any way you'd like.
Get unlimited access to all courses for just $25/month.Become a member