Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Say you're a designer who is really comfortable creating artwork inside of Illustrator, but maybe not so much inside of Flash. Now if you want to create an animation, you don't have to worry about learning how to create that animation using Flash; you can actually export an interactive animated SWF file directly out of Illustrator. Now the first thing to realize about animations is that they usually require some timeline in the application, basically, specifying that objects should move over time. Applications like Flash or After Effects, for example, have timelines in them that help designers define movement. But here in Illustrator there is no timeline. But if we take a closer look at understanding what animation really is, we'll see that we can actually define movement inside of Illustrator without the use of a timeline.
Now what exactly is an animation? Flash, the application, uses something called frame based animation. Basically, by having a whole bunch of individual frames and then playing back those frames very quickly, that appears as if something is moving. As we said, Illustrator doesn't really have any frames, but Illustrator does have layers. And what we can do inside of Illustrator is export a SWF file and in that process automatically convert all of our layers into frames. Doing so creates an animation. So the most important thing to realize when you're building a Flash animation inside of Illustrator is you want to make sure that you're paying close attention to how you structure the layers in your document. Now as you'll see in this example right here I have four different layers. I have a Background layer, a Surfer layer, the Groundswell logo is on its own layer and I also have this Sign Up button.
Let me turn off all the layers here, for example. We'll find that that when we play animations out of Illustrator by default, the bottommost layers play first and then each additional layer that appears on top of that appears in successive motion. So when I play this animation back, I'll first see the Background layer appear. Then I'll see the Surfer layer appear, then the Groundswell and then finally the Sign Up one. So for example, if I wanted to create some kind of an animated banner, this might be a way to do that. To actually see this working, I'm going to go over here to choose File and then I'll choose Save for Web and Devices. Let me resize my window just a little bit so I can see them stack on top of each other. For the bottom option right here I'm going to choose SWF for my Export format.
Now rather than convert my entire Illustrator file to one overall SWF file, I'm going to choose this option. Convert my Illustrator layers to Flash frames, which in effect creates an animation. I can specify that that animation loops, meaning it just repeats itself over and over again. I'm also going to set my frame rate right now to 1 second. That means that each frame is going to be on my screen for one second. I'm doing this purposely because I want to be able to slow it down so we can see exactly what's happening here. I use the Preview in Browser feature over here and now let's see exactly how that animation plays. I'll see first the Background, then the Surfer layer, the Groundswell logo and then the button that appears there.
What's important to note about how Illustrator is doing this is that right now each of the layers are basically appearing and then completely disappearing. So if I have some elements, for example, on the Background, if I want that Background layer to appear in every single frame of my animation, I would need to actually duplicate that exact background and copy it to all the four layers in my document. But don't worry about it. We're just here in the beginning talking about how we're creating an animation inside of Illustrator. We'll soon find other ways to be more efficient when we build our animations. Now that we understand how important layers are inside of Illustrator, we can start to think of other ways to make our animations even better.
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.