Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Okay, I've got a multi page mockup onscreen here, which is eventually going to end up as some kind of interactive application. But for the time being, the entire application has been mocked up inside of Fireworks. So I'll just quickly go through these pages, and show you what's going on here. We have a Master Page. It has our common elements. And each of the other pages represents essentially different content that's going to be available with inside the interactive application. Now we are at the point here where we were basically testing this out, getting client approvals and so on.
So one of the things I want to be able to do is provide them with an interactive mockup. And I can do this using Hotspots to trigger links to other pages in the design. So I'm on my main page, and what I am going to do here is go down to my Web Section in my Tools panel. I am going to choose the Rectangle Hotspot tool. Now you'll see there are three different tools that are here. I like using the Rectangle Hotspot tool, because it's a little more multipurpose. From the standpoint of prototyping, Rectangle Hotspots can be used to create an interactive PDF.
From the standpoint of generating HTML pages, the amount of markup needed to create a Rectangular Hotspots inside of a Web page is a lot less complicated. So we are going to work with the Rectangular Hotspot here. And I am just going to draw a box over my first navigation button here, something along that line. And you'll notice as soon as I let go off the mouse, we get this kind of bright blue rectangle masking out our interactive area. Now look down in the Properties panel, and you'll see we have options here to name the Hotspot.
And naming the Hotspots really is just more a convenience than anything else. It's not utilized in any markup whatsoever. We also can change the Shape of a Hotspot if we want, we can even change the Color. And then we can add a Link, and this is the important thing here for us is the URL. So I am going to click on the Link box here and choose from the dropdown menu. I want this Hotspot to go to growing.htm. So I'll just select it, and you'll see that it shows up inside the list. I could also add Alternate Text if I wanted to. But again, this is just a prototype, so I am not too worried about adding in things along those lines.
Now once I have created one Hotspot, if I want to make sure all my other Hotspots are the same, in terms of dimensions, I can just copy the existing Hotspot. So rather than dragging another shape again, I can just grab my Pointer tool, hold down my Alt key or my Option key on the Mac, and just grab another Rectangle, just like so, and do the same thing over and over again, and I will re-tweak the position of these in a minute. Here we go. So that one there is a little off, so I'll just select it and use the arrow keys to reposition it a little bit.
Do the same with the one above it and below it. Just try to basically cover up the entire area. Now copying the Hotspots also copies the URL, so we want to go into each one of these Hotspots and change that Link. So I am going to choose picking for my second one, and I am going to change the third one to extracting, and the fourth one to bottling, and the fifth one to tasting. Now a couple of things I want to point out here. Where are these Links coming from? We don't have any Web pages for this design.
Well, one of the really cool things about building a multipage design in Fireworks is the fact that every time you create a new page, Fireworks makes a note of it basically, and gives you the ability to link to that page as an HTML document. So it's a very, very handy feature from the standpoint of interactivity in prototyping, especially when you're building either HTML Prototypes, or as we were doing here, just a simple click through that will end up as a PDF file for a client to work their way through. Now if we take a look inside of our Pages panel, you actually see the little blue rectangle sitting inside of our page.
I'm going to go ahead and move by Pages panel away from my Layers and States. I just want to see what's happening with my Layers and States. Now we've got a logo that's being shared across multiple pages and navigation, which is being shared across multiple pages. And this is something we are going to cover in an upcoming lesson, how to share your layers across multiple pages. But for the time being, I just want to show you how to create those Hotspots and apply URLs to them. Now a couple of other things about the Hotspots themselves.
If you do draw them, and they're the wrong size, not to worry. You can scale them really easily. You can grab your Pointer tool and just grab any of the control points, and then just drag them and resize them. Now I find this a little more useful in a lot of ways, because if I was to scale them, and you can scale them, I am going to go ahead and choose Scaling, when you scale the Hotspots, Fireworks automatically changes it from a Rectangle to a Polygon, even though it still looks like a Rectangle.
And this is an important distinction, because, especially if you are planning to turn this into an interactive PDF for a client review, see, PDFs don't handle Polygon Hotspots. They only understand the Rectangle Hotspots. So if you do resize with the Scaling tools, make sure that when you're done - I'll just do one more here, make sure that once you've done the Scaling, you go down on to the Properties panel and change it to a Rectangle. It's a little tip. It's a little frustrating if you do all that work, and then you export your PDF and you find out that the Links don't work.
And that's exactly the reason behind it. Rectangle Hotspots are the only form of Hotspots that PDF support. So adding Hotspots is a pretty simple process. And for testing purposes, you can, as I said, export this out as an Interactive PDF, or you can export it out as HTML images for a client to view online.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.