Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the great things about working with Flash Catalyst is that you don't need to give up your actual design applications that you're familiar with. Here are a few tips for building your documents so that you can more easily work with them inside of Flash Catalyst. For example, in this file right here, it's called olive_game.ai, I've created three separate artboards, if I take a look at my Artboards panel, I'll see that I've taken the time to name them. The first one is called PlayGame, the second is called Winner, and the third one is called Loser.
I'll zoom out a bit so that we can see all the artboards together and you'll also see that I've organized all the artwork on different layers. I've named all of my layers and even the objects inside of the layers, I've taken care to name those as well. I've also taken certain art elements and I've converted them into symbols, for example this olive branch right here is made up of many vector elements but I've turned it into a symbol right over here so that it imports into Flash Catalyst as an optimized graphic. As we'll learn later in this video title, optimizing graphics makes for a better user experience in the browser.
In some cases where I have specialized type treatments, for example where I say Right or Sorry here, I've converted that text to outlines. However in some cases like the buttons here for example, or this paragraph of text, I have kept in text form. This way I can actually make text changes directly inside of Flash Catalyst if necessary. You can apply basic effects, for example like drop shadows or glows, using the Effect menu here inside of Illustrator. However, I really try to avoid using any of the others because those may get rasterized when I bring them into Flash Catalyst.
In fact I've found it easier sometimes to add things like drop shadows, in Flash Catalyst directly instead of at this stage of my project. Once you've gotten your basic design elements approved, and you've created the proper structure using things like artboards, layers and symbols, you're ready to bring your project into Flash Catalyst. So I'll switch over to Flash Catalyst and let's see how we perform this import. From the Welcome screen, I'm going to click on Create New Project from Design File, and because I'm working with Illustrator, I'll choose From Adobe Illustrator AI File, I'll navigate to my Exercise_Files folder, I'll go into Chapter 02, and I'll choose the olive_ game.ai file and click on the Open button.
At this point I'm going to get a dialog box, it's called Illustrator Import Options. Flash Catalyst automatically senses the artboard size inside of Illustrator and it gives me options for keeping filters, text, gradients and blends all in an editable state. I can also choose to import any non- visible layers, which by the way is usually the case, hence it's the default setting. And I can also choose to include any unused symbols. For example you may find it useful inside of Illustrator to add multiple symbols that you may add later on and use inside of Flash Catalyst.
Since they don't appear on the artboard itself, you'll need to make sure that you include them because they're not used in your document. But for now, I'll click OK and Flash Catalyst will go through and convert all that Illustrator goodness into Flash Catalyst. Notice by the way this error dialog box. It's just letting you know that if you have a large number of graphics or elements inside of your file, it may slow down performance. This is what we spoke about before where we want to keep in mind the performance aspects of how this is going to play back in a web browser. If during the import, Flash Catalyst encountered any type of graphic that it can't necessarily translate, Flash Catalyst will alert you to that.
To be honest, there's not really much you can do about this, although maybe in the future you may avoid building artwork using such elements. Once you click OK, you're inside of Flash Catalyst with all of your artwork here as well. Notice that each of your artboards have come in as pages inside of Flash Catalyst, the same way you've named the artboards inside of Illustrator. The Layers panel reveals all the layers that you created inside of Illustrator and if you go to the Library panel, you'll see a section here for Optimized Graphics. In this olive_game folder you can see that the three symbols that I created inside of Illustrator, one called Button, one called Text_Field and one called OliveBranch, now appear here in the library as well.
So you've started working on your project inside of Illustrator, you were careful about how you built that project and now you're ready to go inside of Flash Catalyst.
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.