Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Mordy Golding demonstrates how to be more productive, efficient, and creative by taking advantage of Adobe Illustrator to create pixel-perfect web graphics and interactive Flash content. Illustrator CS4 for the Web investigates the pros and cons of pixel- and vector-based web graphics, demonstrates efficient workflows, and explores the creative options available in Illustrator. Mordy also covers design techniques, such as creating typography that works well on screen, adding reflections, and making Flash animations. He discusses new Illustrator CS4 features, including using multiple artboards, bringing art into Dreamweaver, and utilizing Flash Catalyst. Exercise files accompany the course.
One of the most important aspects of creating a great animation is getting the timing just right. Now, here is a big challenge inside of Illustrator. We already kind of jumped through hoops to find a way to find frames inside of Illustrator. We turned our layers into frames. Great! But there is no such thing as timing inside of Illustrator at any level whatsoever. So we are kind of up against the wall over here. We don't know have a Timeline. We are making believe that our layers are frames, and now we are faced with this timing issue. Well, the tip that I am about to share with you right now is kind of a hack. It's a way for you to simulate timing inside of Illustrator. But I will be honest with you upfront that if you find yourself struggling with trying to get timing to be just right inside of Illustrator, that might be a sign that it's time for you to start learning how to use Flash.
Of course here at lynda.com you have plenty of resources to learn that application, but for now let's see how to do, what I would call a poor man's timing implementation inside of Illustrator. So we already know that when I go ahead and I export my SWF file out of Illustrator, I am going to be specifying my Background layer and my Groundswell layer, aesthetic layers. Meaning that those layers will appear on every single frame in the animation. Likewise, the Surfer layer currently has a Blend inside of it, and that Blend will automatically animate whenever that layer plays. But what I really like to happen though is that as soon as that SIGN UP! Button appears, I would like that to kind of pause for a little bit; obviously to give some time for those people to click on that button and do something.
So if you think about it, what I really what to happen here is I want each of these layers to play; first the Background layer, then the Surfer layer, then the Groundswell layer; these being static of course. Because I have my settings sets to about 3 Frames Per Second, each of those particular layers will stay on screen for that amount of time. So what I really want is, though, that for this one particular layer to stay on screen longer. Because I can't specify a timing for one layer, what I can do is fool Illustrator to thinking that that layer is there longer by actually duplicating that layer. So what I will do is I will take this entire layer as it is here and drag it directly to this button on the bottom here, to actually duplicate that layer.
Now I have a layer called SIGN UP copy. I will do the same thing about three or four times. So now if you think about it, even though these layers will be playing in succession, one right after each other, since they are all the same, it appears to the user as if it's just pausing at that point. Now let's go ahead and export the animation and see what that looks like. I am going to the File menu, we will choose Export, again we will choose Flash or SWF for our Export format. We will convert our Illustrator file with our layers into Flash frames. We will Clip to Artboard Size. Let's jump over to Advanced.
We will make sure that our Frame Rate; let's crank it up to around 5 Frames Per Seconds so that moves just a little bit faster. We will go ahead and we will choose Looping. We will animate the Blends in sequence, and we want to Export Static Layers, just the Background and the Groundswell layer. Now, let's go ahead and turn on our Preview. So we see that the surfer kinds of flies across the screen and the logo actually appears for a little bit longer. So now we are actually able to simulate timing inside of Illustrator, even though we really haven't had any timing settings at all to work with. Now like I said before, when you are working inside of Illustrator and you really want to get timing to be just perfect in a certain area, that may be time for you to start learning Flash, and based on information we have learned in this title so far, you can easily take the artwork that you created inside of Illustrator, and then just bring it in Flash to get all your timing and animation correct.
There are currently no FAQs about Illustrator CS4 for the Web.
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.