Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are several different types of button components. We've already discussed the Generic Button and things like Checkboxes and Radio Buttons, but there is also something called the Toggle Button. A Toggle Button is very much like a light switch. It's on or it's off. Let's take a look at how we can customize a Toggle Button inside of Flash Catalyst. I'll create a new project and I'll use the default settings, and I'll bring some artwork in from Illustrator. I'll choose Import > Adobe Illustrator File, and I'll choose this file here in my Chapter 03 folder called bottle. I'll click Open and I'll bring this now into Illustrator.
A Toggle Button is very much like a Radio Button or a Checkbox in that it has eight different states. It has the usual Up, Over, Down and Disabled state, both when the switch is on, and when it's off. Well, in this example here, I have a bottle of olive oil, and rather than having just a simple checkbox that's on or off, I want to create two states: one when the bottle is full of olive oil, and one when it's empty. So to start with, I'll select all of my artwork here and from the HUD, I'll choose to convert this to a Toggle Button. Next, I'll double-click on the button to modify its different states.
Right now, the bottle appears full, but I'll go to the four different selected states, and I'll change the bottle's appearance in these states. So I'll click on the Selected Up state, and I'll turn off the shape that makes the bottle look like it's full. I'll do the same for the Over, Down, and Disabled states as well. Now, I'll double-click on the artboard and let's test this by pressing Ctrl+Enter or Command+Return on the Mac to see how this looks in a Web browser. Right now the button is on, but if I click on it, it toggles to the off position. Clicking on it again turns it back on.
This is unlike a button that just allows you to click on a button once and have a Down state. This remains in this state until I click on it again to return it to its original appearance. Remember that any action that I apply to a button can control something else. For example, I may use a Toggle Button to have a certain state of my application appear when the button is on. When it's off, I may have that certain element disappear. Remember that with Flash Catalyst, you always have complete control over the user experience.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65131 Viewers
61 Video lessons · 96044 Viewers
56 Video lessons · 109871 Viewers
82 Video lessons · 104994 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.