Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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 some artwork and change it into a Radio Button component. But what I want to focus on now is how the Radio Button is actually used, when you'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 label for 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 we want 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 its label 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 three different 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 Radio Buttons 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 going to copy and paste those, and move them out over here, because, maybe I have some other 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 Properties panel 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 my Web browser, and maybe I'll choose Chocolate for my favorite flavor and I want to choose Sunday for my favorite day, but I can't do that because I can only have one Radio Button selected. Even though I know that these are two separate sets of Radio Buttons, Flash Catalyst 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 three buttons right here. In the Properties panel when I scroll down over here, there is another section here 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 these Radio 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 radioGroup and 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, I can 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 for the content that you're creating.
Get unlimited access to all courses for just $25/month.Become a member