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.
So in this file that I have right here, which I am trying to turn into an animated banner, it does have a blend. So I will get the surfer dude that's starts in the left side and then runs across the screen towards the right. It also goes from 0% Opacity to 100% Opacity in the process. However, each of my layers in my file are playing in successive order. But that means my background layers plays first and then it switches to the surfer and during the surfer the background is no longer visible. Same thing applies to all the other layers. So what I really want to do is I want to be able to have certain layers that are visible in every single frame of my animation. In Illustrator you can do that by defining what's called Static Layers. Now the only way to do this is when you export a file as a SWF, so you can't do this to Save for Web method.
So what I will do is I will start by going to File menu and I will choose Export. I will choose for my Format to use the Flash or SWF format. I will choose Export here and the first thing I will do is I will choose to Export my file as layers which are then can be converted to Flash frames. I want to Clip to Artboard size and I will switch now to the Advanced settings and I will make sure that my Frame Rate, let's low it down a little bit to about 3 frames per second. Again, just to really see what's happening here I want to loop that animation, remember I want to animate my Blends also In Sequence, but take a look over here. I also have a setting here called Export Static Layers.
If I click on that option right here, you will see that I can highlight some of these layers, any layer that I have highlighted becomes visible in every single frame of my animation and I can have more than one layer specified as well. For example, say I always want the Background and also the Groundswell logo to be visible in all the layers. I will hold on the Command key; I am on a Mac here, but if you are on Windows, hold down the Ctrl key and then click on the Groundswell layer as well. So with these two layers selected I will now go ahead and choose Web Preview. And take a look at this the Groundswell logo as well as the Background are visible in every frame.
So now I am getting much closer to what I really want to see inside of my animation. What I want is I want the surfer to kind of fly across the screen or I should say surf across the screen and then I want the logo in the far left-hand corner to appear, so that people can sign up. So now I have the animation working just the way that I want and again I can only do this by exporting my files as SWF files. I cannot do this through the Save for Web dialog, because the SWF Export is the only location inside of Illustrator where I can access settings for defining Static Layers. In reality I sure wish it would be easy enough to simply go to the Layers panel click on a layer and turn on the setting directing the Layers panel, but at least here you now know how to create these static layers. At this point though there is really one thing that's missing and that's timing. I mean the surfer surfs across the screen really nice, but there is really no time for me to look at that particular logo as it simply passes by. But now that we have strong grasp on how to define our layers as Static Layers, we can easily see that we can create really cool animated Flash content directly out of Illustrator.
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.