3 Replies Latest reply on Oct 24, 2006 7:26 PM by jsteinmann

    create slice from magic wand selection

    jsteinmann Level 1
      There has to be a better way of doing this that I'm not aware of.

      I have a map of the US with borders that define each individual state. I would like to make a rollover that changes the color of the each state when moused over. Simple right? For some reason I can't get the tools to work for me the way I would think makes sense so perhaps someone can help.

      What I would ideally like to do is use the magic wand to select each state area, then convert that wand selection into a polygon slice (then adding the behavior from there is cake, and changing the rollovers hue for the color change, etc.... i know how to do rollovers). Unfortunately it doesn't appear it will let you do this.... In both Fireworks and Image Ready I end up with either a square box for a slice that will not work because it doesn't follow the jagid lines of the states borders, or if you try to use an image map in Image Ready (which will let you define that specific area) you cant create a rollover without it trying to show the entire map as the rollover, or in fireworks, it doesn't seem to let you make an image map into a rollover but rather a swap image. I don't know.... either I'm confused or what would seem like a simple application is missing from both Photoshop and Fireworks.

      Select an area with the wand, and convert that area into a slice so it can be used for a rollover.... seems to make sense and simple but haven't found the right tools to do the job simply. Anyone have any suggestions other then using the polygon slice tool to actually try and carve out each state by hand with 20 little polygon slice dots? perhaps something that should be added to future software?
        • 1. Re: create slice from magic wand selection
          Level 7
          You can create polygon slices from vector shapes so the trick would be
          to find a vector map of the usa where each state is an individual shape.

          I did a quick search on Google and didn't find anything but maybe
          someone else has a link to one.

          alex

          jsteinmann wrote:
          > There has to be a better way of doing this that I'm not aware of.
          >
          > I have a map of the US with borders that define each individual state. I
          > would like to make a rollover that changes the color of the each state when
          > moused over. Simply right? For some reason I can't get the tools to work for
          > me the way I would think makes sense so perhaps someone can help.
          >
          > What I would ideally like to do is use the magic wand to select each state
          > area, then convert that wand selection into a polygon slice (then adding the
          > behavior from there is cake... i know how to do rollovers). Unfortunately it
          > doesn't appear it will let you do this.... In both Fireworks and Image Ready I
          > end up with either a square box for a slice that will not work because it
          > doesn't follow the jagid lines of the states borders, or if you try to use an
          > image map in Image Ready (which will let you define that specific area) you
          > cant create a rollover without it trying to show the entire map as the
          > rollover, or in fireworks, it doesn't seem to let you make an image map into a
          > rollover. I don't know.... either I'm confused or what would seem like a
          > simple application is missing from both Photoshop and Fireworks. Select an
          > area with the wand, and convert that area into a slice so it can be used for a
          > rollover.... seems to make sense. Anyone have any suggestions other then using
          > the polygon slice tool to actually try tan carve out each state by hand with 50
          > little polygon slice dots?
          >
          • 2. Re: create slice from magic wand selection
            Level 7
            There is a reason you can't do this in FW or ImageReady. It won't work
            correctly. That said, let's go through the process of creating polygon
            slices from bitmap selections, and then get into why things won't work.

            Make a second frame That has the map with the intended rollover colors.

            To create the slices in FW, use the magic wand to make your selection.
            Then go to Select > Convert Marquee to Path. Right click on the newly
            created vector shape and choose Insert Polygon Slice. (You can create
            polygon hotspots the same way, but for a rollover to work, you need a
            sliced image anyway).

            This will not work with a filled bitmap selection because bitmaps always
            have rectangular boundaries, even when they are not visible.

            Once the slice is created, click on the pointer icon in the middle of
            the slice and choose add simple rollover. Sounds easy enough, right?

            There are a couple problems with this, however: 1)you will end up with
            an incredibly complicated table layout on export. I have no idea how
            long the page would take to download or react to the rollovers 2) even
            though the slices are "polygons" you can't have real polygon bitmaps in
            your page - we're back to the rectangle boundary issue. So when two
            polygons "overlap" your rollover effect will be unpredictable and most
            likely undesirable. Polygon slices are supposed to solve this overlap
            issue by using JavaScript, image maps and multiple slices, but I find it
            doesn't always work, because, in the end, you're dealing with
            rectangular bitmaps. For example, I created polygon slices for these
            three states (Alabama, Georgia and Florida) The resulting rectangular
            image slices totaled to 5 images, and the html code needed to set these
            images up in a table was, well, scary. AND the rollovers were not
            working as I would expect due to the original overlap.

            The resulting code is INSANE. I did a test using six different states on
            a map and the code to display this alone was over 150 lines long (table
            code, JavaScript and image map code). I shudder at the thought of
            editing this.

            Also, as is found in the FW help files, be careful not to overuse
            polygon slices, because they require more JavaScript code than similar
            rectangular slices. Using too many polygon slices can increase web
            browser processing time.

            I am not a Flash user, but I see this as something that would be better
            done in Flash. Flash is not limited to the rectangular, grid-based
            layout of images on a web page.

            Others here may have better suggestions (CSS solution, perhaps), but
            this is what I came up with in the last little while. Probably not what
            you wanted to hear, but I hope it helps.

            --
            Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
            Extending Knowledge, Daily
            http://www.communityMX.com/
            CommunityMX - Free Resources:
            http://www.communitymx.com/free.cfm
            ---
            .:Adobe Community Expert for Fireworks:.
            news://forums.macromedia.com/macromedia.fireworks
            news://forums.macromedia.com/macromedia.dreamweaver

            jsteinmann wrote:
            > There has to be a better way of doing this that I'm not aware of.
            >
            > I have a map of the US with borders that define each individual state. I
            > would like to make a rollover that changes the color of the each state when
            > moused over. Simply right? For some reason I can't get the tools to work for
            > me the way I would think makes sense so perhaps someone can help.
            >
            > What I would ideally like to do is use the magic wand to select each state
            > area, then convert that wand selection into a polygon slice (then adding the
            > behavior from there is cake... i know how to do rollovers). Unfortunately it
            > doesn't appear it will let you do this.... In both Fireworks and Image Ready I
            > end up with either a square box for a slice that will not work because it
            > doesn't follow the jagid lines of the states borders, or if you try to use an
            > image map in Image Ready (which will let you define that specific area) you
            > cant create a rollover without it trying to show the entire map as the
            > rollover, or in fireworks, it doesn't seem to let you make an image map into a
            > rollover. I don't know.... either I'm confused or what would seem like a
            > simple application is missing from both Photoshop and Fireworks. Select an
            > area with the wand, and convert that area into a slice so it can be used for a
            > rollover.... seems to make sense. Anyone have any suggestions other then using
            > the polygon slice tool to actually try tan carve out each state by hand with 50
            > little polygon slice dots?
            >
            • 3. create slice from magic wand selection
              jsteinmann Level 1
              thanks Jim. Yeah, the solution you found was the only one I could come up with too in Fireworks (i found another in Image ready that I explain below), but like yourself, in the end I thought there had to be a better way so I posted this to see because i didin't have the desired results with some of the rollovers and it was a little unpredictable if there was even the slightest overlap. Lots of code too. I have the same US state map in a nice flash application and it does the trick and looks great, but knowing that there is always that very slim chance that a web user may not have the flash plugin (you know, that one guy living under a rock with internet explorer 2.0 still running on their pentium 1)... so I thought I could recreate it with rollovers.

              one thing i did find interesting that kind of works was in Image Ready. Granted it's again one big 50 layered coding mess, but you can create 50 duplicate maps that only have one state visible (just create the duplicate layer, magic wand the state, then select inverse and delete everything else other then that state) aand change the color of that state with hue/sat, select each state with wand on the original full 50 state map and make a polygon image map for each state (perfect carve of the shape). Then have each one of those image maps have a rollover and with the rollover selected, remove the sight of all the other 50 states you created with layers but the one that is being swapped and place that over top of your copy of the original map. This DOES work.... and it was the other solution I found other then the one in Fireworks. However, you create a big file with 52 layers and 50 polygon image maps and I can only imagine the code would look insane. For now I'm sticking with flash for this. thanks everyone for the help