Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
Symbols are one of the great time saving features of Fireworks, and they've been around since the very beginning of the application. Symbols are a way to contain multiple objects within a single asset, but still have a quick access to editing those objects. They come in very handy, if you're using something over and over again, for example, a navigation button or Logo. Now symbols can be a single object or they can contain text, vectors, and bitmaps, each with their own live filter attributes. A Symbol is a master version of the graphic. When you place a symbol on the canvas, you're actually placing a copy of the symbol known as an instance.
Let's just walk through the process of adding a symbol to a document. So I've got my mockup_index.png file onscreen, and what we're going to do is we're going to flag our Explorer's Podcast as being a new feature to the Web site. So I'm going to go into my Common Library. Now this basically is a collection of different symbols that you can use. They are all stock assets with Fireworks. I'm just going to minimize a couple of panels here, so I can see my Common Library a little bit more easily. We're going to go into the Web & Application folder, and I'm looking specifically for a Symbol called New, and a new batch there.
Getting this on to the canvas is pretty easy. Just grab the Symbol and drag it onto your canvas, just like that. Pretty straightforward stuff. Now I'll just double check in my Layers panel, and make sure that that's in the right spot. It's actually not at the moment. It's inside of the main containing layer for everything else. So I want to bring this into my content region. So I'm just going to grab the little radio button in the layer, and drag it down to my content region. That will move the actual Symbol down into my content region.
So at least it's in the right location. Now as I mentioned earlier, when you drag a symbol on to the canvas, you're working with an instance. Anything you do to the instance is not going to affect the original symbol. However, if you make edits to the original symbol, it may affect the instance on the page. So let's just take a look and see what I mean. I'm going to zoom in a little bit here. You'll notice in the middle of this graphic, you see a little tiny crosshair. That's your incredibly subtle indication that this is an instance, and it belongs to another symbol.
So if I double-click on the button, you'll notice that everything in the background kind of fazes out. I'll zoom out just to show you what I mean. We get a little bit of a hazy view. Everything except the actual Symbol is kind of washed out. I'll zoom back in again and scroll over. This is what's referred to as Edit In Place mode. If you have worked with Flash before, you'll know that terminology. Basically, we're editing the symbol right on top of the canvas, so that we can see updates immediately. And if we were working with a Symbol, for example, that may be inside of navigation buttons that were all based on one Symbol, we could see the changes update on all the buttons at the same time.
Now in this case, we just have the one single object. So all I'm going to do here is select the Vector Rectangle, and you'll see I've got a specific Gradient Fill applied in here. So I'm going to go into my Gradient Fill, and I'm going to make a change to this. I think I don't want to go with red. I want to go with green. So I'm going to click on my first color, and change it to a deep green. Then I'm going to change my second color to a brighter green. You see right away, the effect happens right on top of the image, and you can see those colors are changed immediately.
Now I'll just click away from my Gradient editor, and click away one more time. I still have a stroke or an edge around my shape. That's still red. So it looks like I've got a couple of different options in there. So I'm going to try clicking again. That's one of them. I'll take a look in my Layers panel. I can see all the elements that are part of the actual design. That one there is my outline, and it still has a Linear Gradient Fill as well. So I'm going to go ahead and edit that version as well. So a darker green and a lighter green. There we go.
Not too bad. When I'm done editing the Symbol, I can get back to my original canvas in one of two ways. I can either double-click on the Canvas, or I can go up to the top of the Document Window, and I'll see a little breadcrumb trail here. I can just click on the Index page. That'll take me right back to the Original. I'll zoom back out. Now one other I want to point out. When you bring a symbol on to the canvas, it's copied over to your Document Library. So if I click in the Document Library tab in the panel dock, you'll see there is our New Graphic. It's been brought into our existing design.
If I try to bring that graphic in again, I go to my Web & Application folder, and look for that New button. If I try to drag it on to the canvas again, Fireworks is going to warn me that it can't work with two copies of the same thing. So I either Replace the existing one, or I Don't replace it. In my case here, I Don't want to replace it. So I'm going to click OK. I'll still get another copy of it showing up on the screen. So I'll just quickly delete that. But just to keep in mind that once you bring things in from the Common Library, they get copied into your Document Library, and from this point on, if I want to add additional versions of this symbol or additional instances of the symbol onto the Canvas, I'll just drag them right from the Document Library onto the Canvas.
There are three main types of symbols available within Fireworks: Graphic Symbols, Button Symbols and Animation Symbols. There is also an enhanced graphic symbol referred to as a Component Symbol. In the next few lessons, you'll learn more about the different types of symbols you can create and use.
There are currently no FAQs about Fireworks CS5 Essential Training.
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.