5 Replies Latest reply on Mar 12, 2009 3:21 PM by Newsgroup_User

    Resizing a sprite dynamically (image hotspot)

    jeffreypritchard Level 1
      Hi,

      I have a question about dynamically scaling a sprite. I have an application that displays an image on the screen, and on top of that image, I dynamically draw semi-transparent sprites that act as hotspots for the image underneath.

      I can't seem to figure out how to scale the hotspots proportionally to the image component that scales beneath it. The hotspots extend UIComponent (so I can interact with them) and they contain a sprite which is the visual hotspot on the screen (that's all fine).

      The image underneath is a simple Image component. When I resize the image (by resizing the window), I'd like for the hotspots to remain where they were in relation to the image.

      I've tried creating another component extending the Image class which would draw all the hotspots and then tried to lay it on top of the image (figuring I could set the scale content to true like the image), but had the same results (the hotspots were drawn, but did not react to the resizing whatsoever).

      Should I be using the Bitmap class to draw the hotspots instead ? I have no idea at this point. I'm stumped. Any guidance would be appreciated. Maybe I'm approaching the whole thing wrong, I just don't know at this point. I hope I explained the issue well enough to get some kind of feedback.

      Thanks very much for your time.
        • 1. Re: Resizing a sprite dynamically (image hotspot)
          Level 7

          "jkpritchard" <webforumsuser@macromedia.com> wrote in message
          news:gp8r62$qo7$1@forums.macromedia.com...
          > Hi,
          >
          > I have a question about dynamically scaling a sprite. I have an
          > application
          > that displays an image on the screen, and on top of that image, I
          > dynamically
          > draw semi-transparent sprites that act as hotspots for the image
          > underneath.
          >
          > I can't seem to figure out how to scale the hotspots proportionally to the
          > image component that scales beneath it. The hotspots extend UIComponent
          > (so I
          > can interact with them) and they contain a sprite which is the visual
          > hotspot
          > on the screen (that's all fine).
          >
          > The image underneath is a simple Image component. When I resize the image
          > (by
          > resizing the window), I'd like for the hotspots to remain where they were
          > in
          > relation to the image.
          >
          > I've tried creating another component extending the Image class which
          > would
          > draw all the hotspots and then tried to lay it on top of the image
          > (figuring I
          > could set the scale content to true like the image), but had the same
          > results
          > (the hotspots were drawn, but did not react to the resizing whatsoever).
          >
          > Should I be using the Bitmap class to draw the hotspots instead ? I have
          > no
          > idea at this point. I'm stumped. Any guidance would be appreciated. Maybe
          > I'm
          > approaching the whole thing wrong, I just don't know at this point. I
          > hope I
          > explained the issue well enough to get some kind of feedback.

          Have you tried putting both the Image and the UIComponents in a Canvas and
          scaling that?


          • 2. Re: Resizing a sprite dynamically (image hotspot)
            jeffreypritchard Level 1
            Hi Amy,

            I've tried placing them all on a canvas and scaling the canvas (and with it, it's children), but the overlays (the UIComponents) still stay exactly where the were placed initially.

            It doesn't seem to matter what type of component I try, they don't seem to move or scale with the image below.

            Would a better solution be to use the Bitmap class and try to augment the appearance of the image itself ? I've never used the Bitmap class before, but I'm thinking it might simplify the scaling of the image (scaling one thing versus several things).

            thanks very much for your time.
            • 3. Re: Resizing a sprite dynamically (image hotspot)
              Level 7

              "jkpritchard" <webforumsuser@macromedia.com> wrote in message
              news:gpbbal$2ah$1@forums.macromedia.com...
              > Hi Amy,
              >
              > I've tried placing them all on a canvas and scaling the canvas (and with
              > it,
              > it's children), but the overlays (the UIComponents) still stay exactly
              > where
              > the were placed initially.
              >
              > It doesn't seem to matter what type of component I try, they don't seem to
              > move or scale with the image below.
              >
              > Would a better solution be to use the Bitmap class and try to augment the
              > appearance of the image itself ? I've never used the Bitmap class before,
              > but
              > I'm thinking it might simplify the scaling of the image (scaling one thing
              > versus several things).
              >
              > thanks very much for your time.

              Dunno. I'd have to play with it to see what the issue is, and unfortunately
              this is a busy time for me.


              • 4. Re: Resizing a sprite dynamically (image hotspot)
                jeffreypritchard Level 1
                Hi Amy,

                I figured it out. I kept banging on your idea of using a canvas to scale the UIComponents as a group, but it didn't work because I was scaling the canvas based on properties of the image (the underneath layer) that were not set (I was trying to retrieve them after Event.ADDED_TO_STAGE).

                The solution was to wait until the Event.RENDER fired and then get the dimensions of the loaded image, figure out what percentage of the original image's size the image scales to, and then just scale the canvas sitting on top of it to match. Sprinkle in a listener for Event.RESIZE and boom, it works like a champ.

                This method works better than I hoped because now it doesn't matter what size the original image is in relation to it's container (larger or smaller), it will scale itself and all of it's overlays (canvas layer) together .

                It seems like many times I'm looking in the right place for my solution (in the API), just at the wrong time (usually too soon, before the properties I am looking for are set) .

                Thanks very much for putting me on the right track.

                Jeff
                • 5. Re: Resizing a sprite dynamically (image hotspot)
                  Level 7

                  "jkpritchard" <webforumsuser@macromedia.com> wrote in message
                  news:gpc0a3$rfg$1@forums.macromedia.com...
                  > Hi Amy,
                  >
                  > I figured it out. I kept banging on your idea of using a canvas to scale
                  > the
                  > UIComponents as a group, but it didn't work because I was scaling the
                  > canvas
                  > based on properties of the image (the underneath layer) that were not set
                  > (I
                  > was trying to retrieve them after Event.ADDED_TO_STAGE).
                  >
                  > The solution was to wait until the Event.RENDER fired and then get the
                  > dimensions of the loaded image, figure out what percentage of the original
                  > image's size the image scales to, and then just scale the canvas sitting
                  > on top
                  > of it to match. Sprinkle in a listener for Event.RESIZE and boom, it works
                  > like
                  > a champ.
                  >
                  > This method works better than I hoped because now it doesn't matter what
                  > size
                  > the original image is in relation to it's container (larger or smaller),
                  > it
                  > will scale itself and all of it's overlays (canvas layer) together .
                  >
                  > It seems like many times I'm looking in the right place for my solution
                  > (in
                  > the API), just at the wrong time (usually too soon, before the properties
                  > I am
                  > looking for are set) .
                  >
                  > Thanks very much for putting me on the right track.

                  Glad you figured it out :)