Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We know that with Flash Catalyst, we can create a variety of different types of components; things like buttons and sliders and scrollbars. However, there may be times when you want to create something called a Custom component. Let's take a look at this example, and see when it might apply. I have an Order Form here, and the Order Form contains several components inside of it. For example, I have text fields were someone can fill out their Name, their Address, their City and their Tax ID number. That's because this Olive oil factory sells direct to the trade to wholesalers, but they also sell things retail to individuals.
So there's a checkbox here, where if someone were actually buying this retail, that they can check this box. Because the Tax ID is not important when I'm making a retail sale, I would actually like to hide this entire element when I'm making a retail sale. So to make this happen we're going to use a Custom component. I already have several components here. In fact, let's test this on our web browser to see what it looks like. I'll press Ctrl+Enter to see what it looks like in a web browser and you can see that I can click on the checkbox, to turn the check on and off, and I can click on each of these text fields to enter information.
However, I'd like to make it so that when I click on this checkbox right here, this entire Tax ID field disappears. So let's go back to Flash Catalyst and we'll make that happen. I'll start by first creating a Custom component. On my artboard, I'm going to select these four fields right here. Next, I'm going to go over here to the HUD and even though, these are already components, I want to nest them inside of a new custom component. So where it says Choose Component, I'm going to scroll down to the bottom where it says Custom/Generic Component.
The main benefit of creating a new component out of this, is that I can set multiple states for this new component. Currently in the HUD, it shows that I have State1 available for this component. So I'm going to click on that to edit that one state. The first thing, I'm going to do is I'm going to change the name of State1 to something that makes a little bit more sense for this application. So in the Pages/States panel I'll double-click where it says State1 and I'll change this to wholesale. I'll hit Enter to accept the value, and now, I'm going to create another copy of this state.
I'm going to duplicate it and I'm going to name this state Retail. If you remember, when we were creating buttons, we had multiple states inside of a button. We had something called Up and Over. But when you create a custom component, you can create almost any kind of state that you want. So here inside of the Retail state, I'm going to go to the Layers panel, and I'm going to turn off the Group that represents the Tax ID. So now I have a component that has two states. The Wholesale state contains a Tax ID field, the Retail state does not.
So now I'm going to double-click in my artboard to exit the isolation mode. And the next thing that I need to do is set up an interaction so that the checkbox triggers a change from one state to another. So I'll click on the checkbox component to select it and then in the Interactions panel I'm going to choose here to Add an Interaction. I'll start by saying that on click I want to play a transition to a state, meaning that when someone clicks on this to check it, I want it to take them to the Retail state. By the way, I only want this to happen when they're currently inside the Wholesale state.
So I'm going to choose a conditional interaction, so that this only occurs when inside of the Wholesale state. Now I'll click OK to apply it. Now obviously when they check on it again, I want to reverse that, so I'm going to create now a second interaction. So with the same component, the checkbox component selected I'm going to add yet another interaction. This time On Click I want to play a transition to the Wholesale state and I want that to happen only when I'm inside the Retail state. Now when I click OK, you can see that I have two interactions for this checkbox.
Now that we've done that, let's see how this works in a web browser. I'll press Ctrl+Enter to test this in my web browser and I'll now see that when the Retail box is unchecked the Tax ID is visible. However, if this is going to be a retail sale, I'll click on this option and I'll see that now the Tax ID is no longer visible. Click on the checkbox again and it now reappears. So by using a Custom component inside of Flash Catalyst, I was able to create some type of object or element inside of my design, which was custom at multiple states.
I was then able to set up interactions, to choose when to navigate those different states.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.