Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the great things about Illustrator CS5 is how well it integrates with a brand-new application from Adobe called Adobe Flash Catalyst. Now, Flash Catalyst is a separate application. It's included as a part of Adobe Creative Suite, and it allows you to create Flash content without having to write any code. What's really nice about Illustrator and Flash Catalyst is not simply that you can take Illustrator artwork and bring it into Flash Catalyst. But if you need to make changes to your artwork after you've already added it into activity, you can still bring your artwork back into Illustrator and make changes.
Let's take a quick look at how that works. I have an Illustrator file open. It's called WaterTheFlowers. And say I want to create a cute little animation where maybe whenever you click on the can, it looks like you're watering the flowers. So, I've created some basic parts of a design. I actually have three layers in my file. I have the flowerpot on one layer, the droplets of water on a second layer and the watering can itself on a third layer. I'm going to switch to the Flash Catalyst application, and I'm going to start off by creating a new Flash Catalyst file from an Adobe Illustrator file. I'll choose this file called WaterTheFlowers.ai, the same file which I was using inside of Illustrator, and I'll click Open.
Flash Catalyst actually has the ability to read a native Illustrator file and then convert them into components. I'll click OK. Now, Flash Catalyst will translate all that information. Let me zoom in a bit here on the artwork, and you can see, if you look at my Layers panel here inside of Flash Catalyst, that it's identical to what I saw inside of Illustrator. To create the effect that I want to go for here, I'm actually going to go to my Layers panel, and click on the Watering Can layer, and hold on the Shift key, and also select the Water layer. With all these elements selected, I'll go to this floating panel here. It's called the HUD, or the Head Up Display, here inside of Flash Catalyst.
I'll choose the convert this artwork into a button component. Now I have the ability to edit the appearance of those buttons in the various states. In this case, here there will be Up, Over, Down or Disabled. I'll click on the Up button here for now. Now when the watering can is just sitting there, I don't want to see the water. So, in this state, I'm actually going to turn off the Water layer. I'll highlight the Over state, and I'll hide the Water layer there as well. Finally, in the Disabled state, I'll also hide the Water. Only in the Down state, when a person clicks on the actual button itself, will you see those droplets of water.
I'm currently in Isolation mode. I'm working directly on the button. So, I'm just going to double-click anywhere on my artboard to exit back to my regular artwork. To see what I've created, I'm going to go to the File menu, and I'm going to choose Run Project. That will launch this content into my Web browser. I can test to see if this works by just moving over to the water can and clicking on it and seeing that each time that I click, the water droplets appear. Great! It works just the way that I need it to. So, I'll close this and come back to Flash Catalyst, and maybe now I realize that I want to make some adjustments to how those water droplets appear.
Right now, the color that I'm using for those water droplets is kind of muted. I'd like to use a bright blue color instead. While there are certain types of edits that I can make inside of Flash Catalyst, it may be easier to change my artwork back in Illustrator. To do so, I'll just make sure that my button is selected on the artboard. I'll go to the Modify menu in Flash Catalyst, and I'll choose Edit in Illustrator CS5. When I do so, Flash Catalyst will automatically switch me to Illustrator. It will load this artwork into a new document and a quick glance at my layers panel reveals all the different states of that button.
Now, in this case here, I want to modify the Down state. So, I'm going to hide the Up state here. I'm going to click on the Down state and use my Selection tool to select the Water. I'll specify a much deeper blue for my color, maybe something about like that. Let's see how that looks. Oh! That looks much better! Now, I'll click on the checkmark over here to let me know that I'm done. The way that Illustrator and Flash Catalyst communicate with each other is through a format called FXG. In reality, I don't care much about the technical details about how this happens. I just click OK to return back to Flash Catalyst.
At this point, my change has already been made inside of Flash Catalyst. All I have to do is go to the File menu and choose to run that project again. I'll see that now, when I go ahead and I click on that watering can, the actual droplets of water are the new blue color that I specified. So, if you are a designer looking to create cool Flash content, and you already know how to use Illustrator, you might want to take a close look at Flash Catalyst. Both Illustrator and Flash Catalyst work really great together.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 45094 Viewers
119 Video lessons · 55982 Viewers
65 Video lessons · 15847 Viewers
113 Video lessons · 83500 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.
Your file was successfully uploaded.