Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Flash uses something called frame-based animation. That means that you have several frames inside of a timeline. As you move from one frame to the next inside of the timeline, as things change in each frame, it appears as if there's some kind of motion happening inside of the file. Now, Illustrator doesn't have this concept of frames; however, Illustrator does have layers, and there's a setting inside of Illustrator that allows you to turn layers into Flash frames, and this allows us to create some kind of an animation.
Now, the example I want to talk about here in this movie is creating some kind of an animated web banner, where we're basically rotating between different possible specials here and this Monthly Specials ad banner. You'll notice that over here, in this document that's called animated_banner, I have several layers. I have one layer called Backpack Cali, one called California Calm, and one called Desert to Sea. If I go ahead now and I turn off these top two layers, you can see what this layer looks like. Then I could turn on this layer, and then I could turn on this layer. Basically, when I export a SWF out of Illustrator, I can instruct the Export function to turn each of my Illustrator layers into frames of the Flash file, and that will play back basically one layer after the other.
So, if we think about how this is going to export, if I turn off all of my layers right now, I'll see one frame that has this layer inside of it. Then I'll see another frame that has this layer inside of it. Then I'll see another frame that has this layer inside of it. So, as long as I set up my artwork using layers in this way, I can very easily get animation. Now, we'll talk later about the concept of using symbols here, because as we know, if we use symbols inside of a SWF animation, that can reduce the file size. So, if you think about it, right now, I have a whole banner that exists on three different layers.
So really, I'm creating a SWF that has three separate pieces of artwork inside of it. However, if I can identify certain parts of the artwork that don't change, for example, there is the entire background here and the logo, well, if I would turn that into a symbol, even though those symbols appear on each of the layers, they're only stored once inside of my file. But for now, at least in this example here, I want to get some kind of familiarity with the concept of thinking about layers as frames in an animation. So we just have three completely separate layers here. I'm going to turn all these layers on, because when we use the Save for Web function, if there are hidden layers, then those layers don't get exported at all.
So, I have all my layers turned on, I'm now going to go to the File menu, and I'm going to choose Save for Web & Devices. Now, for my file format, I'm going to choose SWF, but let's take a little closer look at some of the settings that appear here. Now, Illustrator has two options when dealing with SWF files. I could export my Illustrator file as a single SWF file, or I can choose to convert my Illustrator layers into Flash frames. I'm going to choose that second option. I could also choose a Frame Rate. This means how many times per second the frames actually change.
Now, default setting here inside of Illustrator is set to 12, 12 frames per second. That means that each frame is only visible for a 12th of the second. Well, that's not really enough time to actually read this content. So, I'm actually going to change this frame rate. I want to slow things down. I want a person to actually have some time to actually see this. I'm going to change the Frame Rate to 0.5. So that basically means that each frame will be visible for two seconds. Next, I want to make sure that the animation is set to loop. This means that it will constantly repeat itself. Right now, I have three layers in my file.
When the third layer becomes visible, I want it to go back to the first layer again. Finally, let's go ahead and preview this in our browser. I'm going to click on the button over here to preview this in Safari. You can see that right now I've created this file that animates. It's a Flash animation, and it's a rotating ad banner. Each layer from my Illustrator file has become now a Flash frame, and that's why I'm seeing the animation here. So let's go back over here to Save for Web. I'm going to click Cancel, and for quick and easy animation, all you really need to do inside of Illustrator is create several layers and then export it as a Flash file.
Just remember to choose the setting to convert Illustrator layers into Flash frames.
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.