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.
You know, as they often say, timing is everything, and when it comes to Illustrator and creating animations, it's really important to get the timing set correctly. However, because Illustrator is really just using blends to simulate motion, there is no such concept of this timing at all inside of Illustrator. In fact, we don't even have frames; all we have are simply these layers, and we're making believe that those layers are going to become frames, and if we find any blends, we're going to animate them. It's really all just the hack, if you think about it. It's kind of cool that you can do it inside of Illustrator, but we really need to make sure that our timing is done correctly.
So, to get around this problem about timing, we're going to have to kind of fudge around a little bit with the layers. Let me show you, specifically, what I mean. As we know, we have something called the frame rate inside of Illustrator, specifically for exporting Flash content. That means that each frame will play, and I'll have certain number of frames playing every second. I know that I have the ability to set certain layers to be static layers, so right now my Background layer, I know I am going to be setting as a static layer, and then I'll have this animation play. Then I'll go to this layer, then I'll go to this layer, go to this layer, so on and so forth.
But what I really want it to do is play the animation, and then I want to display this Backpack Cali on its own, and let it pause here for just a moment. Unfortunately, there's no way to tell just this one layer to kind of stop at this one point. So to get around that problem, what we can actually do is just duplicate this layer several times, and what's really going to be happening is that we'll see multiple layers playing, but since all the layers look exactly the same, it will appear as if the animation is pausing at that point. So to do that, I am actually going to take this entire layer right here and simply drag it to the New Layer Icon to duplicate that layer.
Notice over here, I have created Backpack Cali copy. Now I want it to pause for, you know, some amount of time, so I am actually going to create maybe several copies. I am going to take this copy, make a copy of it, make a copy of it, and let's make a copy of this. So I now have, if I look at my Layers panel here - let's kind of extend it down a little bit here - I have the first version, and then I have four copies of it right here. And I am going to do the same thing for the other ones as well. So I'll take the California Calm one, drag that over here, and let's make some copies of that as well.
Finally, I'll make several copies of the Desert to Sea layer as well. So now, you can see what's happening inside of the animation. I am going to have the Background layer, which is set to static. It'll play the blend, but then it's going to appear to pause as these five layers play. Then I'll see the next animation, and once again, it will appear to pause as these five layers play. So I am actually going to go ahead now and just turn on all of my layers. By the way, a nice way to do that is just to Option+Click on any empty layer. If you Option+Click on a layer or Alt+Click if you're on Windows, that will either toggle visibility for all the layers that are currently available in your document or hide them.
So now all my layers are visible. I am now going to go to File menu and choose Export. We'll choose SWF or Flash here. Export that. Convert my Illustrator layers to SWF Frames. Clip to Artboard Size. Let's go to Advanced. Let's change the Frame Rate to 8 frames per second, set it to loop. We'll animate our blends in sequence, and we'll export the Background layer as a static layer. Now I'll click on the Web Preview button, and I could see that the animation plays and pauses just a moment before the next animation begins.
Of course, if I want a longer pause, I would just add a few more copies of that layer. Now if you take that layer itself and you turn it into a symbol, you're also ensuring that the file size is not going to get too large. So that's how you would actually control timing. As I said earlier on, it's really a hack because Illustrator doesn't even have a concept of animation at all. But what we're simply doing is taking several different layers, taking some blends, defining motion, turning them into an animation that can export as a SWF directly out of Illustrator.
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.