Join Jim Babbage for an in-depth discussion in this video Sharing assets to pages, part of Fireworks CS5: Rapid Prototyping.
With the master page in place one of the other things we want to try to avoid is having duplicate assets throughout all of our pages. I want to minimize these elements because the more assets you have in a page, the larger the file is going to and the more page level alterations you may need to make if you decide to make a change to an element that appears on several pages. So, we are going to share some of the layers that we see in the index page with other pages that are currently in our design. Now, the areas that are going to appear pretty much everywhere are going to be our header, our navigation, to a degree, and also the footer.
Those elements are all going to be available on all the different pages. Let's start off by taking a look in that header layer and see what we have. We have some old design variations on the logo, and then we have the actual final version, which is visible at the moment. So, we are going to get rid of this sublayer. I won't need that. And this particular layer is going to be shared to all the other pages we have in the design. Now, we can do this in two different ways. We can share it first and then make some changes to the other pages.
I am going to go ahead and remove the header layer from the other pages first. It just makes it little easier to select things. So, I'll go to my mission page, select my header layer, and trash it. Again, you may have to click more than once, because the first time you click the trashcan it deletes the contents of the layer. The second time you click it, it deletes the layer itself. tourSpecific, same thing. Go back up to my index page, go to my Layer Options and choose Share Layer to Pages. You might remember doing this when we were working in the wireframe.
In this case here, the header needs to be on every page, so I am just going to go ahead and select both the pages and click Add. When I click OK and I move to my other pages, you'll see that my logo is back in place, and it's editable and controllable from any page, unlike elements in the master page, which can only be edited from the master page. Elements inside of a shared layer can be selected and edited on any page, and those changes are updated on all the pages that share that layer.
All right, so that's one step. The next one is - go back up to my index page - the next one we want to share is the nav, which is the elements we have inside it here. So, again I am going to go to my mission page, and let's see where my navigation is. There it is there. It's got a different name in this case, but we are going to delete it anyway, so go ahead and get rid of that, and then go to the tourSpecific page and the same idea here. We'll get rid of that again. On the tourSpecific page, we have a slightly different setup. You'll notice we have some subnavigation here.
We are going to be sharing this layer eventually as well, but to other specific pages. So, for the time being, I am just going to leave this alone. What I will do is rename it. I am going to change it from nav bar to full nav, so at least it differentiates it a bit more accurately from the other pages. Back up to my index page, and I will make sure that my navigation layer is selected and choose, from the Options menu, Share Layer to Pages.
In this case here, mission is the only one we are going to be sharing. Click OK. And so now if I hop to mission you can that it sharing there as well. Now, one of the things to note about sharing layers is when you share a layer, it basically gets stacked on top of the last layer. So, you notice now my navigation is kind of obscuring my logo. Not a big deal; these layers work the same way as traditional layers. I can grab the navigation and drag it down below, and now I'm back to the way I need to be. The last thing I want to share is the sidebar, this element right in here.
So, if I just go ahead and locate my sidebar, and in fact, here it actually is buried inside the main content - tisk, tisk, tisk. Let's see here. Monthly special is okay. It had been dropped in there. So, I am going to go ahead and separate this out now. The reason I'm doing this is that sublayers can't be shared independently from the main parent layer. So, while it's nice for organization, if you are going to share it, it's going to actually be its own parent layer in order to function that way. So, I am going to go ahead and select that monthly specials and drag it upwards.
I am just going to drop it between my navigation and main content. So now it's its own layer, and you can see, the only things that are selected are the elements inside the monthly specials. So I am going to select that. I am going to rename that "sidebar." I am going to go ahead and share that as well. Now this one is going to be pretty common, so I will go ahead and share this to both of my other pages and click OK. So, those elements are taking care of.
Each one of the pages has those elements, and I am just going to go ahead and check. You'll see, there is my sidebar there and another sidebar here. I am going to remove that one, and I am going to go to my tourSpecific, and there it is again. I'll remove it from the design as well. So, now we've got just the one shared layer. It's not too important whether it's stacking order because it's not overlapping anything to begin with. Now, one last thing I'd like to do, in the spirit of asset management, is deal with the footer.
Right now, the footer is grouped in terms of the graphics, but all the text elements are all separate pieces here. Now, I am going to be reusing the footer over and over again, and this is going to appear in different positions on different pages because the page lengths are going to vary. So, rather than have to worry about all these individual elements, what I am going to do is convert all the footer content into a symbol. So, I am going to choose the footer layer, just like so. Then I am going to go and press F8, and I am going to call this, pretty obviously, "footer." I don't need to enable 9-slice scaling on this.
I don't need to save this to the Common Library either. It's unlikely I'll use it in anything but this one specific project. So, I'll just go ahead and click OK, so now I have got a symbol. What I am going to do is go on my mission page. I am going to select the original footer information and delete it. I'll open up my Document Library and drag in my footer symbol and just reposition that wherever I need to do it, like so. Do the same thing on my index page: make sure the footer is selected, delete content of the footer, drag in to my footer symbol.
There we go. With the help of smart guides, I got that lined up nice and neat. Now, we have many other pages that need to be incorporated into this design, but we are just going to go ahead and bring in one more at this point, to show you how I am going to import page content. Now, this may sound a little bit contrived just for the purposes of the lesson, but there are going to be situations where you're working with other designers, being supplied files, whether it's artwork or full-page layouts that need to be incorporated into the prototype. So, we'll walk through the process of importing one of these finished pages and show you what I am going to go through to get that sorted out.
What I am going to do is go to my File menu and choose Import, and the page I am going to import is called tourMain. It will be basically be adding to the drilldown hierarchy of our tour section, which has sort of it's own set of subpages. So, I am going to select that file, and you can see over here in the preview, lots of content, no header, no sidebar. We still have footer in here, but it will deal with that when we get the page popped in. So, I am going to choose Open, the preview box will come up, and it's really important for this process that the Insert after current page option is selected.
We don't want to drop the stuff into an existing page. We want Fireworks to generate a brand- new page for us, based on this content. So, I am going to choose Insert, and you can see it's brought in with the original name of the page. I am just going to change the stacking order of the pages a little bit so they make a little bit more sense. If we take a look at the page itself, you can see, there is all our content. No sidebar or header yet; we'll fix that in a minute. You'll also notice that we have footer in here.
Now, as I mentioned, there was footer in that original design. What's happened is that this footer is also a symbol. Now, if you take a look over at the Document Library, you are going to see we now have two footer symbols: one that's called the Graphic and one that says Graphic Imported. The imported one is not the expensive European version; it's actually just a copy that came with the file so it's been labeled as imported. To reduce any kind of confusion over having multiple symbols with the same name, we are going to select that symbol, and we are going to trash it, and watch what happens onscreen when I do this. Delete the symbol, you delete the asset on the page.
That's fine. We don't need it in there. We've got our own version of it. But just remember, if you do delete symbols from the Document Library, you are also deleting any iterances of them on the pages. So, I am going to drag in my new version of my symbol here, reposition that, like so. So, now we are dealing with the same symbol on all those guys. As I mentioned, we've got some sharing to do here. The header and the sidebar need to go into this page, as well as some navigation. So, I am going to hop up to my index page, and I am going to go and locate.
I'll just collapse my Document Library, and there is my navigation, which is going to be a bit different on the tour page. So, we are not going to worry about that layer, but I do want my sidebar, so I am going to go ahead and select it, go to my Options menu and choose Share Layer to Pages and add the tourMain to our shared pages. Do the same thing for the header. So now, if I take a look at tourMain I've got a header, and I've got sidebar.
I don't have any navigation yet, and as I mentioned, the navigation on the tour page this is a little bit different. So, on the tourSpecific page, we've actually got subnavigation in our main navigation area. I want to share this form of navigation to my other tour pages. So, I am going to go into my Layers panel, I am going to select my full nav, and I am going to go ahead and choose Share Layer to Pages, and we want to share this with tourMain. We'll add that and click OK. So, now if I switch over to tourMain, there is my navigation.
Now, again, we have that stacking issue, because we added in the full nav last, it basically went to the top of the stack. So, what I am going to do is just literally drag it down underneath the header. Now, we've got the same look for our header. So, we've gone through the process here of importing an entire document into our existing Fireworks file. Made some changes to it, customized it by sharing some layers from our existing document, dropped in the footer symbol, and so on. The basic process for adding to the rest of the prototype, if you are dealing with other designers, is very, very similar to this.
So, inside your lesson 4 folder, among other files, you are going to find these three: mockup_exploreres_final, mockup_ resources_final and mockup_tourWine_final. Take some time between now and the next lesson to try your hand at importing these files and see how you do.
- Planning and creating wireframes
- Creating multi-page mockups
- Adding interactive calendars and pop-up windows
- Embedding SWF files into an HTML prototype
- Creating AIR prototypes with rollovers, events, and pages
- Exporting to FXG 2.0
- Integrating with Flash Catalyst
- Creating customized mobile designs in Device Central
- Testing a mobile project