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.
Now that we understand how to take a blend and turn that into motion by creating a SWF file out of Illustrator, let's see how you might kind of put entire banner together with all this motion in place. Now I'm going to take my Layers panel out here for a minute here, just so we can focus a little bit more on exactly how the layers are structured in this file. I am going to start by turning them all off except for the bottom one, and I'm working in this file called animated_banner_motion2. Now you can see in the background here I have just this information. This information itself doesn't really change in each of the frames.
Next, I have an animation here that basically brings in the Backpack Cali Special. Then I have one that just has it in place itself. Then I have another layer here that brings in the California Calm animation, and then I see it in its entirety as well. And then I have the Desert to Sea one as well and then on its own. So let's see how we can now export this using the functions that we've already learned. I am actually going to now just simply click and drag to turn all these layers on. Remember that a layer has to be on in order to export correctly as a SWF.
I'll come over here to the File menu, and I'll choose Export. From the Format pop-up, let's choose Flash. Then I'll choose to export this. We'll choose to convert our layers to SWF Frames, Clip to Artboard Size. Let's go to Advanced. Let's change the frame rate to 8 frames per second. We want it to loop, we want to animate all the blends in sequence, and then we'll choose Web Preview. Now notice over here we're seeing all the different banners that are appearing: Backpack Cali, the California Calm, and then Desert to Sea.
But the Background layer only shows once at the beginning of the animation because it's on its own separate layer. I really need that to be on every single layer. But I can't, in any way, ensure that it's always going to be on every single layer because that would mean that it would also need to be the part of the blend, and I don't really want that background to move. I want it to remain static. So let me close this and come back to the SWF Options dialog box, so we can see how to do that. There is an option at the bottom over here called Export Static layers. If I turn this option on, I'll actually see a list of every single layer that exists inside of my Illustrator file.
Now I had created one layer called Background, and if I choose that option, that means that that one layer is going to become a static layer. What happens is that Illustrator actually takes that entire layer, converts it in the background to a symbol, and then adds that to every single frame inside of my animation. Now there is no limit to how many layers you can actually turn into static layers. For example, I can hold down my Command key, or if you're on Windows hold down the Ctrl key, and you could select multiple different layers and determine that those should be static as well.
But for now, I just want the Background layer to be static. And now if I choose Web Preview, we can see what happens. That background layer is always there, and the animation looks great. The only thing that really is kind of a problem with this animation right now is that it's kind of playing very quickly so I don't really have time to see or pause at the end of each of these specials to really understand what it's talking about. So I need to kind of adjust the timing here somehow. Well, I am going to close this over here and come back to the SWF Options dialog box. While I can't really change anything here in the frame rate - the frame rate is standard across the entire animation, I'm going to need to somehow employ some other techniques to try to get the timing right for this kind of animation.
But for now, we know how we can create these static layers that play back in every single frame of the animation.
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.