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 and Flash Professional enjoy a really wonderful relationship. You actually have the ability to take artwork from Illustrator and bring it directly into Flash Professional, and you can do so while maintaining the integrity of your file and really keep a lot of information intact. One of those things are probably one of the most important aspect of any Flash project, which is working with symbols. In fact, I often like to refer to symbols as the lifeblood of Flash. There is really little you can do inside of Flash Professional without the use of symbols, and if you start defining your symbols and thinking about how you are going to use your artwork when you are inside of Illustrator, things will be that much easier for you when you get to Flash.
So let's take a few moments here to actually take a look at symbols inside of Illustrator, and how we can actually set some settings in place that we might use later on inside of Flash Professional. Now inside of this file here called monthly_specials, I already have more artwork that's has already been converted to symbols. For example, the logo here is a symbol, and each of these logos are also converted to symbols. I am going to open up my symbols panel here, so we can take a look at these, and of course, one of the main benefits of working with symbols is that when you have artwork that is used many times in a file, the file size is reduced.
Now in this example here, I only have one instance of each of these symbols on the page, but we refer to artwork that appears in the Symbols panel here as the symbol, meaning the original piece of art is a symbol. If you are familiar with Flash Professional, you might think of this as a Library. But on the artboard, we refer to these as instances of that symbol. So, for example, if I take this Backpack Cal and I just kind of Option+Drag or Alt+Drag to create some copies of this, each of these are now instances of that original symbol. Now when you are writing ActionScript code inside of Flash Professional, not only do you need to, of course, assign a name to a symbol, but you also need to create a name for each of the instances that are being used on the stage, or on the artboard.
After all, if you wanted to create some kind of code where this one acts differently than some of these, if they are all the same symbol, you can't just simply refer to them by their symbol name. In fact, I like to call the name of a symbol the last name, the same way that we all have family names, for example, but we also have first names, because they are several people in a family. So if you want to refer to an individual in the family, you call them by their first name. So we call a first name of a symbol an instance name. One of the really nice things about Illustrator is that you have the ability to actually assign an instance name right here inside of your layout.
So, for example, if I call this one backpack_1, and I click this one over here, and I set this one to have backpack_2, I now have two symbols, two instances, and I have assigned unique instance names to each of those instances. As we will see, one of the great things about working with Illustrator and Flash Professional is that when this artwork gets put into Flash Professional, those instance names remain intact. Now there are actually a variety of different types of symbols that you can create and use inside of Flash Professional. So let's actually create a symbol here inside of Illustrator, and see how we can apply some of those settings as well.
I am going to click on this piece of art right over here, and if I wanted to define this as a symbol, I can use the same keyboard shortcut that exists inside of Flash Professional, simply by typing the F8 key on my keyboard. That brings up the Symbol Options dialog box, where I can assign a name for this - maybe I will call this one Tag, for example, and I can choose between a movie clip and a graphic type of a symbol. Now inside of Flash Professional, I would say that 99 times out of every 100 times that you are creating a symbol, you are probably going to be using the movie clip symbol. In reality, if I am inside of Illustrator, choosing Graphic or Movie Clip has no effect whatsoever here.
This setting only applies when this art eventually makes its way into Flash Professional. The main difference between a graphic symbol and a movie clip symbol is that movie clip symbols contain their own timelines inside them. So I am going to leave this set right now to Movie Clip, and I also have the ability to set what we call the registration. This is the main area, or the part that all scaling attributes, or other type of attributes apply to, kind of as an origin point of that symbol. Most developers who I work with always like to have the origin point set to the upper left-hand corner, and not to the center.
That just makes it easy to position these symbols mathematically and through code. Now there are two other options here in this dialog box. One is called Enable Guides for 9-Slice Scaling, and we are going to talk about that in detail in the next movie, and the Align to Pixel Grid setting is something that we spoke about earlier on in this title, and this setting actually controls the anti-aliasing to make sure that wherever a symbol instance is applied throughout your document, that all of the art within that symbol snaps to the pixel grid. I will click OK to create that symbol, and basically those are the steps you need to take to create symbols inside of Illustrator and to set them up correctly with instance names, so that when you bring them into Flash Professional, it will be that much easier to work with.
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.