Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once we've brought our artwork into Flash Catalyst, we're ready for the next step to define components to start adding interactivity to our project. A component is a specific element that adds a certain type of functionality to your project. For example, take a button. That's something that a user would interact with, and when they click on it, it does something. A button is pretty much always a button. However with Flash Catalyst, we can actually design that button to look like anything. To help us do that, there is a user interface element inside of Flash Catalyst called a Heads-Up Display or HUD for short.
This is an element that will appear when you make some kind of a selection. For example, let's take a look at the three bottles that appear here inside of the application. In order for a user to play the game, we want them to run their mouse over these bottles and choose one of these bottles. To make it easy to understand that a user should interact with these elements, we can create effects like rollovers. But first, we'll need to turn these elements into components. Now there are two ways to select elements inside of Flash Catalyst. There is the traditional way, using your Selection tool to click on artwork directly on the artboard.
I'll click off of it to deselect it, or I can go to the Layers panel. Notice by the way that all the layers that I created inside of Illustrator have translated perfectly here inside of Flash Catalyst. I'll click on the triangle here to reveal the contents inside of the Bottles layer. And if I want to select the Rosemary bottle, I can just click on it here inside of the Layers panel. That automatically selects it on the artboard. Now, notice that when this element is selected, the HUD appears. It's telling me that right now, I have the Rosemary group selected and it's offering me the option to perform two different tasks.
I can either convert that artwork to a component or I can optimize that artwork. In this case, we want to turn that bottle into a component. Specifically we want to create a Button component. This will allow us to add specific functionality to that element. So I'll choose Button and now Flash Catalyst has automatically converted that artwork into a Button. Let's do the same for the other two bottles. I'll come to the Layers panel, I'll click on Mandarin Orange, and I'll convert that to a Button.
Finally I'll select the Jalapeno artwork and convert that to Button as well. Notice that in the Layers panel, each of these bottles, which was made up of various elements of artwork, has been converted to a single button element. Let's click on the top button here, which was the Rosemary bottle. What I'd like to do is actually edit the appearance of that button. I'd like to make it so that when a user mouses over that bottle, something happens or something changes to indicate that that person can click on it. Notice that the HUD now tells me I have a Button selected and I can choose to edit various elements of that button.
These are the Up state, the Over state, the Down state and the Disabled state. Since I want to change the way the artwork looks when somebody mouses over it, I'm going to edit the Over state. So I'll click on the Over button inside of the Heads-Up Display. Notice that now the artwork that I've created here for the bottle has been isolated on my artboard. This is just like using the Isolation mode inside of Illustrator, where everything else is grayed out and instantly locked so that I can focus on just the artwork here at hand. At the top of my screen, I have the Pages or States panel.
Since I'm working with a button here, I have four states, the Up, Over, Down, and Disabled state, and currently the Over state is highlighted. That means that any change that I make to the artwork right now is the way this button is going to appear when I run my mouse over it. If I look at my Layers panel, I see that everything else was hidden, and I can now see the individual art elements inside of the Rosemary bottle. Remember that I created those text labels inside of Illustrator. I'd like to make it so that when somebody mouses over the bottle, the Text appears identifying the flavor.
So next to the Text layer here, I'll click to reveal that layer. Just so that you can see what I've done, when I'm in the Up state of my button that label is not visible, but when you're in the Over state of that button, that label is visible. Next, I'd like to add some kind of a glow around the bottle itself. So I'll select the bottle by clicking on it in the Layers panel and then here in the Properties panel, I'll scroll down towards the bottom where it says Filters and I'll add a Glow filter. For the color, I'll choose black, and on my screen, you can see exactly how that's going to look. Great! So what I've done just now is I've specified a different Over state for my button.
I'd like to exit this editing mode. So I'll simply double-click anywhere else on my artboard to return back to our regular view. Now let's do the same thing for the other two flavors. I'll click on the Next button in the Layers panel to select it. In the HUD, I'll click on the Over button to modify that state. In the Layers panel, I'll choose to reveal that Text layer, and I'll select the Bottle and specify a Glow filter changing its color to black. When I'm done, I'll simply double-click to exit the Editing Mode and I'll work on the final bottle: Select it, modify the Over state, reveal the Text layer, select the bottle and specify the Glow.
Another way to exit the Editing Mode would be to look at the elements over here, which are called breadcrumbs. This identifies exactly where I am inside of my project, and by clicking on olive_game, I return to the top part of my project. So with a few clicks of the mouse, I was able to add interactivity to my project. Let's see how that actually works. To do that, we're going to test our project. I'll go to the File menu, and I'll choose Run Project. The keyboard shortcut for that is Ctrl+ Enter on Windows or Command+Enter on Macintosh.
This will build the game, and now open up my web browser so that I can interact with it and see exactly how others would use it. Notice that now when I run my mouse over the bottles, they glow and the label underneath the bottom identifies which flavor it is. So you can already see how easy it is to use Flash Catalyst, let's go back to the Flash Catalyst application and I'll choose File > Save As and I'll save this as olive_game2 to save our progress here and I'll choose Save. With the buttons done, we're already well on our way to create our interactive game widget.
In the next movie, we'll extend the functionality by adding pages to our widget.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65577 Viewers
61 Video lessons · 96353 Viewers
56 Video lessons · 110105 Viewers
82 Video lessons · 105070 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.