Video: Creating a radio button component

When creating a user interface, another common component that's used is something called the Radio Button. A Radio Button is usually used to present a user with several options. However, you only want the user to be able to choose one of those options. Let's take a closer look at how to build radio buttons inside of Flash Catalyst. I'll create a new project using default settings, and from my Wireframe Components panel, I'm going to drag a Radio Button component out onto my artboard. Let's double-click on this component to see the various states that it has.

Creating a radio button component

When creating a user interface, another common component that's used issomething called the Radio Button.A Radio Button is usually used to present a user with several options.However, you only want the user to be able to choose one of those options.Let's take a closer look at how to build radio buttons inside of Flash Catalyst.I'll create a new project using default settings, and from my WireframeComponents panel, I'm going to drag a Radio Button component out onto my artboard.Let's double-click on this component to see the various states that it has.

Similar to a Checkbox component, it does have eight different states.Four for when the button is not checked, and four for when the button is checked.I'll double-click on the artboard to exit the Editing mode, and we already know,how to change the appearance of this artwork.You can of course go into Illustrator, Photoshop, or Fireworks, bring someartwork and change it into a Radio Button component.But what I want to focus on now is how the Radio Button is actually used, whenyou're building something inside of Flash Catalyst.For example, it's rare that you'd see a Radio button on its own.

Usually, you'd like to present a variety of options to choose from.So I'll take this Radio Button component, then move it over here.I'll go to the Edit menu, and I'll choose Copy.Then I'll choose Paste.And I'll move this down just a little bit.I am holding the Shift key to constrain its movement directly downwards.I'll press Ctrl+V to paste again, and I'll bring out another Radio Button.Now, I have three Radio Button components on my artboard.I'd like them to represent different options, so I am going to change the labelfor each of these components.

I'll select the first one here, and I'll go to my Properties panel.If I scroll down in my Properties panel, you can see a field here called Label.Right now it says Radio Button, not really very descriptive, but let's say wewant to ask people, what their favorite flavor of ice cream is?So for the first choice, I'll change this to say Vanilla.Next, I'll click on this Radio Button component, and I'll change its label to Chocolate.Finally, I'll select the third Radio Button component, and I'll change itslabel to Strawberry.

I apologize to all those people who love Rocky Road, but it didn't make the cut.Now, I'll deselect this and let's see how this works inside of a Web browser.I'll go to the File menu and I'll choose Run Project, and I'll see the threedifferent Radio Buttons.I'll click on the first one, Vanilla here, and then I decided maybe I want Chocolate.Notice what happens when I click on Chocolate.The Vanilla button now is no longer selected.That's because only one of these Radio Buttons can be selected at any one time.In other words, there is something right now that's connecting these three RadioButtons to each other.

I am only able to select one of them out of these three.What exactly is causing this to happen?More importantly, how can I learn to control this?Well, let's go back to Flash Catalyst.I am going to go ahead now and select these three Radio Buttons, and I am goingto copy and paste those, and move them out over here, because, maybe I have someother options that I want to present to the user as well.Maybe, I want to ask them what their favorite day of the week is.Well, I'll click on this button right here, and once again in the Propertiespanel I'll scroll down to where it says Label, and I'll change this one here to Sunday.

We'll make this one here Wednesday.We know that's everybody's favorite day.And we'll choose Friday for the third button.Watch what happens now, when I try to test this in my Web browser.I'm going to press the keyboard shortcut, which is Ctrl+Enter to view this in myWeb browser, and maybe I'll choose Chocolate for my favorite flavor and I wantto choose Sunday for my favorite day, but I can't do that because I can onlyhave one Radio Button selected.Even though I know that these are two separate sets of Radio Buttons, FlashCatalyst doesn't know that, at least not yet.

Let's see how we can teach Flash Catalyst to understand what we're trying to do here.Let's go back to Flash Catalyst and I'm going to select these threebuttons right here.In the Properties panel when I scroll down over here, there is another sectionhere called Component.There's something called Radio Button group, which is right now set to radioGroup.If I select these three, you can see that they also belong to the same radioGroup.By creating different groups inside of Flash Catalyst, I can control how theseRadio Buttons function.So with these three days selected, I'm going to choose radioGroup1.

Now when I select these, I have these belonging to something called radioGroupand these belong to radioGroup1.I can also add tooltips that will help a user interact with my design.So for example, with my days selected, in the tooltip I can type, Choose your favorite day.And for these ice cream flavors, I can type, Choose your favorite flavor.Now let's see how this appears inside of the web browser by choosing File > Run Project.Notice when I run my mouse over these, the tooltip appears to tell me what I should be doing.

More importantly, if I choose Chocolate as my favorite flavor of ice cream, Ican also choose Friday as my favorite day.That's because these are now two separate groups of Radio Buttons.more than just about getting things to look pretty on your screen.Sure, Flash Catalyst can do that, but it can also help you define structure forthe content that you're creating.

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.