Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
Once you've created your design inside of Illustrator, it's really easy to get started using Flash Catalyst. Now I have Flash Catalyst open right now, and to create a new project based on the Illustrator file that I have already created, I am going to choose this option here called Create New Project from a Design File, specifically from an Adobe Illustrator AI file. Alternatively, you can also go to the File menu here and choose New Project from Design File here, but I am going to choose this option, and I am going to go ahead now inside of Chapter 11 in my exercise files.
I am going to choose tour_ widget_2.ai and click Open. Now I'm going to get this Illustrator Import Options dialog box. Notice that it automatically picks up the width and height of the artboard that I had set inside of Illustrator, and I also have some options here on how to convert certain elements into native Flash Catalyst objects. For example, where it says Filters here, I have it set to Keep Editable. Remember, I had a soft drop shadow that I applied inside of Illustrator, and I want that drop shadow to be editable here inside of Flash Catalyst as well. Now when it comes to text, gradients, and blends, I have these things set to automatic because I just want Flash Catalyst do the best job possible in importing these elements.
I can choose to import non-visible layers, and I also have the ability, if I want to, to include unused symbols. Remember, those get converted into optimized graphics here inside of Flash Catalyst. I am going to choose OK, and Flash Catalyst is now going to go ahead and analyze the Illustrator file. The beautiful thing here is that it's actually turning all that art that I created inside of Illustrator directly into Flex code in the background, and as a designer, I don't need to worry about that. It just kind of happens automatically. Now if there are some types of constructs that exist inside of your Illustrator file that do not translate perfectly into Flash Catalyst, you'll get this dialog box that says Import Issues, and it tells you specifically the different types of things that may not have come in exactly. But I usually just click OK.
It's not like you can do anything anyway, and you just kind of hope for the best. In this case here everything looks great, so I'm not so concerned about it. I just want to show you a few things here. If I look at my Layers panel, you can see that all the layers that I had created inside of Illustrator, they come in beautifully into Flash Catalyst. If I take a look at my Library here, I can see that these elements here that were actually symbols inside of my document, inside of Illustrator, are actually now optimized graphics. If I look over here in my Library, I can see, right over here, that I have those symbols that were now converted to optimized graphics, the tour_icon_backpack, the one for the Calm vacation, and the Desert vacation.
Additionally, if I click on some of these objects, like this text object, I can see that it actually comes in as text, so this is editable. I can use my Type tool here to actually change this if I have a typo, for example, or I want to change the font which I can do here through the Properties panel, and I'll also note that because we chose not to export this graphic as an optimized graphic, meaning not keeping it as a symbol inside of Illustrator, I have the ability to select the individual components here. So, for example, if I wanted to create some kind of an animation where the girl was actually driving on the bike, we can actually do that quite easily here inside of Flash Catalyst.
Finally, note over here that on this tag, if I click on this group, I can see that in my Properties panel - let's go ahead and make the Properties panel just a little bit bigger here, I can see that there is actually a filter. The drop-shadow filter that I applied in Illustrator now is also applied as a live, editable filter here inside of Flash Catalyst. If I decide that I want to make some changes to the appearance of that drop shadow, I can do so using these settings, or I can even just delete it all together. So by taking some time to actually build our files in an intelligent way inside of Illustrator, we have a much easier time actually building the interactions and the animation that we want for the application, or the widget in this case here, inside of Flash Catalyst.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.