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.
Illustrator is a great front-end design application for going into Flash Catalyst, so in this chapter I want to focus on using Illustrator to build great files that are eventually going to go into Flash Catalyst, and I want to talk about the synergy that exists between Illustrator and Flash Catalyst. Of course, if you want to find out more information about Flash Catalyst itself, I suggest you to take a look at one of my other titles here at the Online Training Library at lynda.com. It's called Flash Catalyst CS5 Essential Training. Here, however, let's focus specifically on using Illustrator and Flash Catalyst together.
Now there are several things to note. First of all, if you do use multiple artboards inside of Illustrator, those artboards do get converted into additional pages, or states, when you get into Flash Catalyst. However, I find that many times it's probably easier just to separate your content into different layers instead. This way you build the pages and states as you need them inside of Flash Catalyst. One of the great things about working with Illustrator files is that all of the structure that you put into your documents, meaning things like groups and also the layers that you've create, all those are maintained when your artwork gets brought into Flash Catalyst.
So you'll see that here in this file, maybe I'm just creating some kind of a widget, for example, and I want to have something on a web site that will maybe offer up different monthly specials. So what I've done is I've created one artboard, but I have several different layers that I've created. Maybe the specials themselves are going to end up turning into some kind of a data list, for example. That may be dynamically driven by a database so that this way the latest monthly specials are always loaded into this widget. One of the nice things about working with Flash Catalyst is that I can easily do that from a design perspective but then hand it off to a developer to actually write the code that goes into that end.
For example, maybe the code will sense where the person is logging in from and show them some kind of vacation specials that maybe will appeal to them. However right now I'm focused purely on how this application should look and how it should function. So I've created these separate layers here. I've also put this tag on a layer that's over here. Note that I have a soft drop shadow applied to this. This is actually just a group, and I have a drop shadow applied to that group. Again, one of the nice things about the synergy between Illustrator and Flash Catalyst is that sometimes these types of effects, basic things like, for example, drop shadows, get converted to native drop shadows inside of Flash Catalyst.
So I'll be able to edit it and make changes, and it will actually look great. Now a few other things to note as well. There's a concept inside of Flash Catalyst called an optimized graphic. If we take a look at some of the artwork that appears over here, for example, Backpack, well these little footprints over here are made up of many different vector paths. If I convert all those to code inside of my Flash Catalyst project, that could actually be a hindrance from a performance issue, because it's going to require that many more lines of code. The same thing would apply, for example, to this tree in the background here or maybe to some of these other vector elements in this graphic.
So what I've done here inside of Illustrator is I've actually defined them as symbols. These get turned into an optimized graphic, meaning a separate embedded SWF, that gets loaded once when my project is actually loaded into a web browser. The down side to using optimize graphics is that they're treated as a single image that are really not editable inside of Flash Catalyst. So if I know I want to tweak or make adjustments to the graphics themselves, I don't want to use optimized graphics in those cases, meaning I kind of have to be proactive and not use symbols when I know that's going to happen.
So, for example, in this document, these bottom pieces of art here are simply going to be used as they are. So I'm going to turn those into symbols, which they are right now. If I look my Symbols panel, I can see that right now this is Tour_Icon_Backpack, Tour_Icon_Calm, and Tour_Icon_Desert. However, the Explore California logo right now is also set up as a symbol, but maybe I want to kind of mess up around with the animation here. Maybe I want the girl on the bicycle to kind of zoom by. It's a nice little animation, or maybe I want the sun to spin or kind of have it kind of rise and set. Maybe I want to create some kind of code where it will sense what time of day it is, so maybe it will be night or day.
So I may want to go ahead and actually kind of mess around with some of the artwork here inside of Flash Catalyst. If I leave it as a symbol now inside of Illustrator, when this opens up inside of Flash Catalyst, it will be an optimized graphic. So what I'm going to do in this case here is I'm going to break the link to that piece of art. This way all the vector artwork will be editable and adjustable when I get it into Flash Catalyst. So keeping all these things in mind, I know that when I bring this into Flash Catalyst, everything will be just set up the way that I need it.
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.