Getting Started with Fireworks: Using Hotspots

Getting Started with Fireworks: Using Hotspots

on Feb 2nd 2011 with 4 comments
Tutorial Details
  • Program: Fireworks
  • Version: CS5+
  • Est. Time: 5 minutes

Today we’ll be looking at using “Hot Spots”, aka the Internal Linking tool, in Fireworks – this awesome little tool allows you to essentially create “links” inside of your Fireworks document that link to Pages in your site, or external URLs. We’ll walk you through how to use the basic interface elements for this feature and we’ll create a simple project to showcase the various ways you can add hot spots to your own projects.

Getting Started With Fireworks

This is the part of our series of Getting Start with Fireworks posts where we’re be examining the program and what it has to offer to web designers. If you haven’t used Fireworks before, or even if you’re just a little confused as to what makes it so great for web designers, this is a great place to start out!

About the Hot Spot Tool in Fireworks

The Hot Spot tool in Fireworks is actually pretty simple to use:

  1. Select an item that you want to act as a “link” in your document
  2. Apply a destination URL or page in your document
  3. That’s it!

Using it can be a bit tricky if you’ve never really worked with Fireworks before though, so in this video, Connor Turnbull is going to show us how to use the tool to create hot spots, or internal links, in your own Fireworks based projects! Let’s get started:

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://cookandmix.wordpress.com LadyLawrence

    Nice videocast. I’ve never really used Fireworks and this makes me want to start. Love how you can clearly see how the site would look live (linked) with the exported prototype.

  • Pingback: Primeros pasos con Fireworks: El uso de puntos de acceso

  • Brett

    So does the hotspot tool basically output as image maps in the HTML code like a normal hotspot? I would expect this to not be as effective with SEO as would a traditional text link setup. In the example given you are using basic text links for the navigation but hotspots traditionally output as an image with coordinates set to designate where on the image the “linkable” area will be. You can can alt tags to this but using a text-based navigation I think would be much more effective.

    I haven’t used the hotspot tool in Fireworks but I have used the one in Dreamweaver. I use it frequently for graphic heavy sites that rely on either me making multiple images for the buttons or doing a simple series of hotspots to avoid saving all those different images.

    I think it would be beneficial to say that this method is great during those times when a traditional text-based navigation is not as plausible.

    • Connor Turnbull

      “to not be as effective with SEO as would a traditional text link”

      Just remember, this is not a good process for creating final pieces. Only prototypes and initial mockups ;)

  • Pingback: Getting Started with Fireworks: States and Behaviors | Webdesigntuts+

  • Pingback: Getting Started with Fireworks: States and Behaviors | Shadowtek | Hosting and Design Solutions

  • Jonathan Bechtel

    I’ve looked over this tutorial several times, but when I create my own files from scratch I can’t get the hotspots to work. What ALWAYS happens is the new page opens in a new window and I get message saying the page doesn’t exist. I’ve played with different settings and I always get the same thing.

    Connor, do you know what I might be doing wrong?