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.
One of the great things about working with Flash Catalyst is how easy it is to define interactive content. For example, I have this project open right now inside of Flash Catalyst. It's called tour_widget_final. And I have taken some artwork that I started creating inside of Illustrator, and I have brought it in here into this project and started defining some interactivity. For example, I have taken the logo here and turned it into a button component. I have also added a really cool interaction that allows me to have this sun basically rise behind the mountains when you mouse over the logo. When you mouse away from it, the sun kind of drops down below the horizon again.
For example, if I go out to the File menu and I choose to run the project, this will now actually run in a web browser, so I could see how this is going to work and function. So you will see over here that when I move my mouse over this, the sun rises; when I move it out, the sun kind of sets. That's pretty cool, and I have already kind of went to the work of defining that component. Let me go back to Flash Catalyst here. Nut maybe now I realize that I actually want to make some changes to the artwork in that logo. Now I don't want to go back into Illustrator, make the changes, and then have to redefine all my interactivity again. At the same time, I don't want to be forced to try to struggle with some of the basic tools that Flash Catalyst has to edit or work with this piece of art.
So one of the really nice features about working with Flash Catalyst is that I have the ability to perform what we call roundtrip editing with Illustrator. Now remember, this graphic was created inside of Illustrator. I simply turned it into a component here inside of Flash Catalyst. But if I go ahead now and I select it here inside of Flash Catalyst, I can go and choose Modify, and then choose Edit in Adobe Illustrator CS5. Now when I do this, a couple of things are going to happen. Flash Catalyst is going to take a snapshot, or a screenshot, of the entire project, and it's going to place that in the background here.
And this way as a designer, I can preview what my art actually looks like in the context of the entire design. Next, it takes the artwork, in this case here the button component, and it brings it into Illustrator in an editable state. In fact, if I look at my Layers panel, I can see that I have a layer here called button. But inside of it, I also see the various states of that button. I have the Up state, the Over state, the Down state, and the Disabled state. In fact, if I turn off the Up state and I turn on the Over state, you can see that now the sun is visible, but in the Up state the sun is not.
Well, here I can start to make some changes. Let me just do a basic change. I am actually going to go ahead and activate the Over state, and maybe I want the sun to change to a completely different color. So I am actually going to go ahead now and select it, and maybe change it to something else. I am going to hold down my Shift key, so I get the little color ramp over here. May be I wanted to choose, let's say, make me a bright yellow color here. Perfect! So now I am going to go ahead and after I have made that change, come over here and click on the button here that says Done. We see over here, it says, Editing from Adobe Flash Catalyst. I am kind of in this special editing mode now.
Illustrator knows that his artwork came from Flash Catalyst. So when I click on the Done button, I am now going to choose to save this file, and it's going to return me now back to Flash Catalyst. It's going to make those requested design changes that I made inside Illustrator and put them directly inside of the component. So all I have to do right now is go back to the File menu and choose Run Project to see the change now being made already inside of the project. I don't have to worry about anything else for that matter. Notice that when I mouse over this, the sun now has that change that I made. So this is yet another example of the great synergy that exists between Illustrator and Flash Catalyst.
If I start off working inside of Illustrator, and then I bring my artwork into Flash Catalyst, I can start to add interactivity, yet knowing that any time that I need to, I can always return back to Illustrator with this roundtrip edit function to make any design changes in my familiar Illustrator design environment.
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.