Viewers: in countries Watching now:
Fireworks has come a long way from its roots as a screen graphics editor. As Jim Babbage demonstrates in Fireworks CS4 Getting Started, the latest release can serve as a rapid prototyping tool for a variety of uses--a central hub in the design and production workflow. Since Fireworks is a hybrid imaging application, able to seamlessly mix vector and bitmap images, layered Illustrator and Photoshop documents can be imported, edited, and restructured. Jim shows how to customize the interface and use layout tools like Smart Guides and the 9-Slice Scaling tool to quickly position and align objects on the canvas. He also discusses a variety of delivery options, including web-optimized graphics, interactive PDFs, AIR prototypes, and standards-compliant CSS and HTML. Example files accompany the course.
Symbols are master copies of objects or groups of object which you may want to reuse in a given design. A good example of a symbol might be a navigation button. But symbols can really be anything you think you will use more than once, or objects that you want to share with other designers in your team. Now once a symbol is created, you drag it out of the canvas to create an instance and this instance remains linked to the symbol so that whenever you edit the symbol itself those changes are reflected in all the instances on the canvas and you will find this file in the 05_symbol_editing folder. I am just going to make some adjustments to my panels again. Switch over to my workspace and then I am going to collapse these guys down a bit so I have got a bit of free space here.
Now if I click inside of my canvas area, you will notice if you look really close around the middle of the design you will see that little blue cross-hair. Well that's an indication that this shape is a symbol. So if I double-click on this, I open up the Symbol Editing area and you will notice just above that in the workspace we see now a breadcrumb trail starting. Page 1, which is the original document, and now we are into editing the weather pod symbol, that's what I called it. And now if I move my cursor throughout this open symbol you will see that I have got other objects here and these too are symbols as well.
So I have got symbols within symbols. So nesting symbols can be a really handy way of controlling things and keeping things together. I have also got the ability with symbols to enable something called 9-Slice Scaling and you can see these little blue dashed lines inside of my main area here. Using 9-Slice Scaling eliminates distortion that can happen when I try to re-scale an object, either length-wise or width-wise. I am going to click into one of my other symbols here and when I do that you will see another feature of the way symbols works, this in-place symbol editing. So two things to be aware of here. If you look at the breadcrumbs we are now seeing Page 1, weather_pod and then the style for that little playback button and we are also seeing that style right inside of our main document, right in place. We don't have an extra-- there is no separate document window open or anything like that. Now to get away from this symbol, if I want to cancel my editing I can just double click. I go back to the main symbol and then if I want to go back to my original image, I can just double-click away from the symbol itself and I go back to my original shape.
Now let's take a look at what this 9-Slice Scaling can do for me. I'm going to select my background here. Click on my Transform tool and you can see once I have dragged my Transform controls I still have the same corner radius on my outer shapes. So nothing has been distorted in that sense. I can make it taller, I can make it shorter. I can make it a little bit narrower. I can make it a lot wider than the canvas and expand the canvas out. Each one of these things is not affecting anything about the actual player shape itself. So I am not getting any distortion here. So that's a pretty good thing. So I am going to escape out of that, go back to my original here.
And you will notice that I have got these two player symbols here, our Rewind button and a Play button but what's missing really is a Pause button. So we're going to add in a new symbol and apply some attributes to it. So I'm going to click inside of my main symbol again and then I am going to go to my Document Library, which stores all the current symbols that I am working with, and the one that I want to play with here is this one looks like a Pause button and it's as easy as dragging it into the page, just like that. There is my symbol. Now it's not exactly the right size. But we can change that through scaling. I'm going to resize this guy a little bit, like so. I am going to reposition him ever so slightly, there we go and just press the Enter key or the Return key and I can lock that change into place. And if I wanted to be really sure about my sizes what I can do as well is zoom in a bit on this and take a look. So it's still a little bit big. So I am going to re-scale that just a little bit more, there we go. And lock them into place like so, just drag it in.
Now it still looks a bit different than my other symbols, so I am going to show you another little trick for getting exactly the same kinds of characteristics applied from one symbol to another. So I am going to go over to my Play symbol here. I am going to double-click on that and I am going to select it. I'm going to go to Edit > Copy. I'm going to double-click away from my Play button. Now I am going to re-select my Pause symbol. I am going to choose Edit > Paste Attributes. Now if you want to use the keyboard shortcuts for the PC, it's Ctrl+Alt+Shift+V and for the Mac, it's Command+Option+Shift+V and right away I get the exact same shading and color that the other buttons have. So that's a really quick way to apply identical attributes.
Now I found all these symbols in the Document Library. Now these are symbols that are basically local to this specific document. If I want to bring in a new symbol, I can go to the Common Library and we have got lots of different symbols to pick from. The area that I found most of these symbols was the 2D Objects and you can see if I click on these, there is quite a range of different options here for symbols that I can work with. There is that plus sign we saw at the top of the player and there is the minus sign. There is my Play button and so on. So I can just as easily take one of these and drag it into my document just like I did with the other ones. So I can grab for example the Stop button and drag it over and there it is in place. We will just collapse this back down and if I zoom out a little bit, you can see it's a little bit large, so much like the Pause button was. I can resize it just as easily, place it where I want and it's ready to go as well. And now if I take a quick peek back into my Document Library, I will see that that is now part of Document Library, that new symbol.
So I will just escape out of that and delete that symbol for the time being. One more thing I would like to show you is how you can change the actual symbol itself and how it will update the instances that are on the screen. So I am going to scroll up to the top of my design here and you see my plus sign and my minus sign and they are both separate instances or copies of a symbol. Now what I want to do is make a change to the plus sign. So I'm going to locate that in my Document Library, there it is. And if I double-click on it, you will see I go into what's referred to as isolation mode. You see just the symbol itself. I am going to select it and I am going to apply a Drop Shadow, just like so.
And then when I double-click away from the symbol itself, and go back to my design, you'll see that the instance has been updated with that drop shadow. Not only that, but if you look in the Document Library, you'll see the drop shadow as well. So now every time I make use of that symbol, it's going to have the drop shadow applied to it. So you can see the workflow for editing symbols is pretty intuitive. The breadcrumb navigation makes it really easy to work with symbols and nested symbols. The 9-Slice Scaling guide helps us to scale various symbols without getting any major distortion to them. Symbols have always been a great feature in Fireworks and now they are even easier to work with.
There are currently no FAQs about Fireworks CS4 Getting Started.
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.