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.
Putting ourselves into the mindset of interactivity, we know that when you are working inside of Flash, you can either have text that appears on your screen which you simply look at and read, but there is also type that you interact with. For example, let's say you have a field that you want someone to actually type in some information, or maybe there is some dynamic text that's being displayed inside of your Flash animation that's maybe coming from a database. Well, Illustrator lets you define that kind of text right upfront here inside of your layout. To show you, I am actually going to specify some different settings for this text that appears over here that says Sign Up! Now, this is already a symbol, but I want to show you another way that you can actually edit or modify symbol inside of Illustrator.
We already know that I can go ahead and I can double click on this symbol to isolate that symbol, and what we created here was a Nested symbol. I can double-click on that one as well to isolate that symbol. But I am going to tap the Esc key, because I want to show you another way to do that. Remember when I go ahead and I double click on a symbol on the Artboard, all the rest of the artwork just simply grays out. So I see my artwork in a context of everything else in my design. But let's say I want to focus just on the symbol alone, I just want to work with that text. I really don't want to see anything else. Well, come over to the Symbols panel and you will see that I have that particular button right here. If I double click on a symbol in the Symbols panel, I have the ability to isolate that symbol, but everything else is removed from my vision. In fact, take a look at my Layers panel right here, it says that I am in Isolation Mode, and the only thing I have available to me right now is my Text button, nothing else.
When you do things in this way, you are able to focus specifically on this piece of artwork without anything else getting in your way. So let's take a look at this text. I will go over here and I will click on just the text object right here. I will go up to the Window menu, I will choose Type, and then I will choose Flash Text. This brings up the Flash Text dialog box. Now, you will see here that for Type, I have three different options to choose from. Static Text means that its just regular plain text that's just sitting there, for me to read. Dynamic Text means that that text would now be brought in from a database or a script or some other kind of way for me to actually make that text change on the fly as the SWF is being played back in the web browser.
Alternative, there is something called Input Text. Input Text would simply be the kind of text that I would expect somebody else to interact with and type into my layout. For example, if I wanted someone to type in their email address so I could send them something, I might have a text field that I will create. I will choose the typeface in a way that type should look, but I will define that as Input Text. That way when that's displayed in the final Flash file, it will be a field that the user can simply go ahead and type some information into. The way that Flash deals with these is that it turns these text objects almost into like symbols. For example, I will choose Dynamic Text here. When I do so, I am going to click OK over here, and I could add an Instance name for that text object. I could choose the Rendering Type; and this is just a simple way for Flash to do a better job at anti- aliasing that type so looks better on my screen.
I also have additional options when I choose Input Text. The most important part here is defining the maximum number of Characters that I will allow in that particular field. Once I am done, I will simply Edit out of that particular symbol, and I now know that I have changed the text inside of that particular symbol button. Now again, the real benefit here is simply that I can define something here inside of Illustrator and not have to wait to actually define or change that when I am inside of Flash. More importantly, if I am working with a developer, the developer right away knows simply by looking at the text exactly what my intention is for how that text should be used inside of the animation.
Remember, as with almost all of these settings here that we are specifying for Flash, all these settings only apply to the text when it gets brought into Flash itself, but here inside of Illustrator, whether I define Static Text or Input Text, or Dynamic Text, it has no effect whatsoever inside 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.