Video: Creating a checkbox component

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.

Creating a checkbox component

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 Componentspanel, 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 alwayshave full control over the appearance of our components.Before we create a custom version of this however, let's see the parts thatmake up a Checkbox.

I'll double-click on this component and you'll see that unlike a Button whichhas four different states - one for Up, Over, Down, and Disabled - a Checkboxcomponent actually has 8 different states.There are four states for when the Checkbox is not checked and there are fourstates - 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 editingmode, and I'll go to the File menu, because I want to import some artwork that Icreated inside of Illustrator.I'll choose Illustrator File and in my Chapter 3 folder, I'll click on this filecalled olive_box and click Open.

I'll use the default Illustrator Import Option settings by clicking OK, andI'll click on the Layers panel here so we can see exactly what I just broughtin from Illustrator.To see it better on the artboard, I'll also zoom in by using the keyboardshortcut 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 thatpiece of artwork better.By the way these are the same keyboard shortcuts that you'd find inside ofIllustrator 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 fillinside 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 thatsomeone's clicking on that button.In other words, if the box has a fill of none, then running your mouse cursorover that area doesn't do anything for the component.By filling the box white it means that any time I move my mouse within thisgeneral area, I can be activating that Checkbox component.To make it a little bit easier when I create this component, I'm actually goingto leave the Group layer turned off for now.

But it's important to note that even though you can't see something inside ofFlash Catalyst, you can actually still select it.To demonstrate what I mean, I'm going to click on the artboard here todeselect everything.I'm now going to move my cursor into the Layers panel and I'm going to clickover 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 toconvert both of those to a Checkbox component.

Looking at the HUD I'll now choose to convert my artwork to a component byclicking 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 allthe 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 toexit the editing mode.Now let's see how this appears on a web browser by going to the File menu andchoosing 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 youcan make a checkbox appear any way you'd like.

Q: In Flash Catalyst, is it possible to control two sound sources being played at the same time? For example, the main audio will take priority, and the secondary audio will only be played at 20% (or any user defined percentage) of the main audio?

A: In the 1.0 version of Flash Catalyst, this is not possible.

Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.

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.