Start learning with our library of video tutorials taught by experts. Get started
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.
So far in this chapter, we've looked at graphic symbols, button symbols and animation symbols. Now Fireworks also comes with another special symbol, referred to as a component symbol. Now component symbols are a little different from your average symbol. They have special controls in them, so you can edit the instances independently of the original symbol. So let's take a look at where we can find these component symbols and the kinds of things they can do. I'm going to go down to my Common Library, and I'm just going to expand that window a little bit, so we can see things a little bit better, and you'll see a whole range of different symbol folders in here.
Now, the one I'm going to look at, specifically, is the HTML folder, but component symbols are found at other places like Flex Components, as well as the Mac section as well and the Win section. We're going to go into the HTML section here, and you'll see inside of this folder, we have a whole series of symbols that basically are kind of like UI components, dropdown menus, buttons, HTML headings, radio buttons, the kind of things you'd use on a Web page and most likely, in many cases, for a Web form, and in fact, that's what we're going to do here.
We're going to make a couple of changes to our current Web page to add in a small sign up form. So if we take a look over at our page for a second, you'll see down here, there's a little box it says Sign Up! And I'll zoom in a bit on this, so it's a little bit easier to see the wording. We've got a little call to action here about signing up for the monthly newsletter, and what I'd like to do in the interest of reducing the number of clicks the user has to make to get to what they need to do is we're going to add the Sign Up form right here inside this window. So before we actually drop in the component symbols, I want to do a little bit of set up here with my background.
First of all, I'm going to grab my Pointer tool and select the background, and we're going to scale this. It's just a plain old rectangle, so I don't need to worry about nine-slice scaling or anything like that, just make this a little bit taller. That should do the job. Double-click, and then I'm going to click inside my text and because they are going to be filling in the form right in this little box, I don't think I need the Join here text anymore either. So I'm going to delete that. So now we get a bit of space to drop in our component elements. I'll grab my Pointer tool again. I am going to hop over to my Common Library and remember, I'm still in the HTML folder and what I want is the TextField.
Now I'm going to work with the Windows TextField, but you can feel free to work with the Mac one, if you like. And bringing these into your design is just like bringing in any other symbol. You just click and drag and when I let go, you'll see I get a TextField dropped into my little Sign Up! sheet here. Now where this type of symbol differs from the average symbol is that you can control different properties of this symbol in a special panel called the Symbol Properties panel, and it's docked with the main Properties panel at the bottom of the screen. So I'm just going to select the Symbol Properties, and I'm going to make this window a little bit bigger, so we can see it, a few different things we can change here, mostly in this case related to the actual label, inside the TextField.
So for example, I'm not likely to have a TextField with a label called Text. So I'm going to change that label, and all I need to do is go into that Symbol Properties panel, select the word, Text. I'm going to type in Name and when I press the Enter key or tab away from that area, you'll see that my field updates. So I now have a Name label, rather than just an unlabelled text, and I can change quite a few other things in here. For the Text, I can change the Color, the Font, the Size, the Style, the Weight and so on, and I can also change the type of TextField that is.
We can go from Text to Password. So we've got a few different controls in there. We can even change the State of the entire TextField. We can just set it up as Normal or as Selected. If I just click on Selected, you'll see a slight difference between the fields. It's a little bolder around the edges, but I'm going to leave it at Normal though. The other thing I'd like to do with this instance is make it a bit wider, so I have more room for a name to go in there. So I'm going to grab my Scaling tool, and I'm going to drag across. As far as the scaling of the TextField itself, that's not so bad, but you might have noticed that the Name shifted a bit when I was scaling, and that's got to do with the way nine-slice scaling guides are set up in the symbol.
So I'm going to double-click to lock it into place, and we're going to take a look at those nine-slice scaling properties. So just like any other symbol, to edit this symbol itself, just double-click on the instance. It brings you into, in this case, Isolation mode, because we're working with nine-slice scaling guide, so we can see where the guides are currently placed. I'm going to zoom in just a little bit to make it a little bit easier to see things, and I'll grab my Pointer tool. The first thing I want to do is I want to move this guide over past the text, so I want to keep my text out of the area where this nine-slice scaling guides are going to stretch or scale anything.
Now, the other thing you might notice, if I put my mouse over the text block itself, is the block extends for the entire TextField, and I'd like to change that. I want this text block just to be formfitting to whatever text I type in. So I'm going to double-click on the text block and then over in the upper-right corner, I can actually change this from a fixed text block to a variable text block. I'd just move my cursor to that upper -right corner of control handle and double-click, and that basically converts the text to an expandable text box.
The last thing I'll do here is move the label, because it's very rare that you'll find the label for your field inside the field itself. So I'll grab my Pointer tool, and I'll move that label up there, just above. So it lines up with the edge of the TextField. Now, when I double-click on the canvas here, I'll go right back to my original Web design, and you'll see that those changes have been put into place. There's my Name. It's been shifted up and if I select that TextField and I try to scale it, you'll notice that my Name doesn't move anymore. Looks like it's too small.
If I choose my Scaling tool, I'll scale my TextField, you'll notice that the Name doesn't move anymore. Now if I make it too narrow, you'll notice it does kind of shift down a little bit, which means we may need to make a few more changes to our actual nine-slice scaling guide. So I'm going to undo that change there in terms of scaling. I'm going to double-click on the symbol again, and we'll take a look, and it looks like we're fairly close to the edge here with our nine-slice scaling guides. So I'm just going to shift this guide over a little bit further, and it will give me a little more flexibility for scaling.
We won't see any real difference in the actual field itself, but once I scale it again, I should have a little more flexibility with the width of the field. So that's not so bad. I'm going to bring that back out to its original length there, just like so, and I'm going to scroll down a bit. Now, I need another TextField, because I need to have one for the e-mail address. So I could drag it in from the Common Library. Remember that when you drag a symbol on to your canvas it gets added to the Document Library.
So I could drag in another symbol from my Document Library. Remember, when you drag a symbol in from the Common Library or any symbol really, it gets added to your Document Library, so that's the place you'll put it in from. So I can click and drag it over, or I can just hold down my Alt key and create a copy, just like that and again, I want to customize this field a little bit. I want to change the label. So I'm going to go down to my Symbol Properties and change it from Name to Email. So now I've got my two TextFields exactly the same width, with completely different labels.
I'm going to zoom out a little bit, and the last thing I am going to add in here is a Submit button, because if you don't have a submit button in your form, it's not going to go anywhere. So I'm going to go back to my HTML folder, and I am just going to grab my button and just drag it on. And again, much like the TextFields, this symbol also has some control, so I can change the label. So right now, it just says Label, so we're going to change it from Label to Sign Up! And now, I've got a customized little form, sort of form elements on my page.
I'll just zoom back out a bit, just to see how things are positioned, and that's not too bad. That looks pretty good. So there you go. A different type of symbol that you can work with, the component symbols, there's quite a few of them to experiment with inside of the common library. That's another tool you can use when you're designing your Web pages or building out applications.
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.