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 throughout the entire title, we've seen that Adobe really has been striving to make the process, at least the way that designers and developers can communicate with each other that much better. We know we can take art from Illustrator and bring it into Flash. We know that we can also take artwork from Illustrator bring it into Photoshop and Dreamweaver. What I am about to show you though is taking you to the next level. Recently, Adobe announced the brand new application. Something called the Adobe Flash Catalyst. At a very basic level, Flash Catalyst is a graphical user interface built on top of the Flex framework.
Flash Catalyst allows you to create your artwork in any of the applications that you already know how to use. For example, Illustrator or Photoshop, or even Fireworks. But then to bring them directly into an application that convert them to what Adobe refers to as Rich Internet Applications; it's the next generation of web design. To aid in this process, Adobe actually created a new interchange file format. Something which is called FXG and you will notice that if you go to the File menu, you will see that if we choose Save As, one of the file formats that you can choose is something called FXG, which stands for Flash XML Graphic.
By exporting your file in this particular format, you can bring your artwork into Flex Builder or into Flash Catalyst, but really introducing just the new file interchange format doesn't really change much. I mean after all, a designer still needs to learn to all these technical details and all these different file formats. So instead, let's take a look at how Flash Catalyst and Illustrator work together to remove this divide. I will click Cancel here. And we are just going to simply take this artwork selected inside of Illustrator and I will copy it. Now I will switch over to Adobe Flash Catalyst. I want to create a new Flash Catalyst project. I am just going to use the regular 800x600 setting right here, and I will click OK.
Now I will simply choose Edit, and then I will choose Paste and that graphic from Illustrator comes right here on my artboard. Now you may be thinking, what's so special about that? You can copy and paste from Illustrator into Flash, you can copy and paste from Illustrator into Fireworks, even into Photoshop, as Smart Objects. Well, here is the key thing. When I pasted this into Flash Catalyst, what really happened is that behind the scenes Flash Catalyst turned that artwork into Flex code. In fact, take a look. When I go over here to where it says Design. And I am going to switch to the Code view. Much like in Dreamweaver, you can design HTML pages in a visual way but behind the scenes all the code gets written for you.
Well from a graphic standpoint, what I have done is I have actually drawn something inside of Illustrator, and simply by copying and pasting into Catalyst, Catalyst now converted it into Flex code for me. That means the developers can go right in and start making changes to my graphic or add into interactivity. Even better yet, I can add my own interactivity. Let me choose to go back to my Design view. I will actually click on that piece of artwork right here and a little pop- up shows over here which is referred to as the HUD or the head up display. I can convert that artwork to a component, for example, a button. With one click of a button, I have just created a button. I can double-click on the button over here and I can actually specify Up, Over, Down, and Disabled states.
Let me double-click over here for a second here and go back to my piece of artwork. Here is the key thing about what's happening here. Even though this piece artwork right here has been converted to Flex code or MXML, I can go over here to the Modify menu and choose Edit in Illustrator CS4. This actually takes this piece of artwork and brings it back into illustrator. So if I want to make changes to the artwork, even though it's really been converted to code, I have the ability to work in my own familiar design environment, Adobe Illustrator. So let me zoom in on this for a second here, and instead of using this blue color, let's change this to something else. I will go to the Color panel here, maybe we will choose let's say a yellow color. No, let's choose the bright green instead. So now I have edited it, I'll save that file. I am going to save it.
Notice it automatically saves it in that interchange format called FXG. I click OK. I close the file, return back to Flash Catalyst, choose Accept the Changes and automatically, the button that I have created now gets updated. Remember it's still coded right now. It already is a button, but I have already managed to edit that back inside of Illustrator. This is just a peek at some of the things that you can now start to do between Illustrator and Catalyst in this way, but it's certainly exciting to see how things are going to be down the line in the future.
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.