7 Replies Latest reply on Jun 14, 2006 11:50 AM by Newsgroup_User

    Making a draggable Magnifying Glass

    Dava Level 1
      Hi,

      I've found some script online here: http://director-online.com/buildArticle.php?id=900

      This is to make a magnifying glass which moves with the cursor over an image. This works fine, but I need to use this on a touchscreen where I will have no cursor, therefore I need to make the magnifying glass a draggable item. (ie. the equivilent to holding the mouse down and dragging the item to another position on screen). I'm not that familiar with lingo so I can't work out how to modify this script to get it to do what I want.

      Any help greatly appreciated! I've pasted the script below.

      Thanks, David.

      ------------------------------------------------------------------------------------------ -----------

      Here is the complete code from this behavior.

      property pGlassImage, pGlassMask, pGlassRect, pRegPoint, pLastLoc, pOrigImage

      on beginSprite me

      -- get the image to use as the magnifying glass (next sprite)
      pGlassImage = sprite(me.spriteNum+1).member.image

      -- get the original image
      pOrigImage = duplicate(pGlassImage)

      -- take the matte image from another member
      pGlassMask = member("glass mask").image.createMask()

      -- determine the rect of the glass mask, with the center at 0,0
      pGlassRect = rect(-member("glass mask").width/2,-member("glass mask").height/2,member("glass mask").width/2,member("glass mask").height/2)

      -- get the registration point of the glass
      pRegPoint = sprite(me.spriteNum+1).member.regPoint

      end


      on exitFrame me

      -- get new mouse location
      ml = the mouseLoc

      -- only update image if the location has changed
      if ml <> pLastLoc then

      -- get the relative location inside the image
      loc = mapStageToMember(sprite me.spriteNum, ml)

      -- if outside the image, hide glass
      -- otherwise, show glass with new image imprint
      if voidP(loc) then
      sprite(me.spriteNum+1).loc = point(-1000,-1000)

      else
      -- get the area inside the image
      sourceRect = rect(loc,loc) + pGlassRect

      -- determine the area of the glass to use
      destRect = rect(pRegPoint,pRegPoint) + pGlassRect

      -- figure out the mask offset so things line up correctly
      maskOffset = loc - point(pGlassRect.width/2,pGlassRect.height/2)

      -- copy pixels from image into glass using the mask
      pGlassImage.copyPixels(pOrigImage, pGlassImage.rect,pOrigImage.rect)
      pGlassImage.copyPixels(sprite(me.spriteNum).member.image, destRect,sourceRect,[#maskImage: pGlassMask, #maskOffset: maskOffset])

      -- position the sprite under the cursor
      sprite(me.spriteNum+1).loc = the mouseLoc

      -- remember the current location
      pLastLoc = ml

      end if

      end if

      end


      on endSprite me

      -- restore original image
      pGlassImage.copyPixels(pOrigImage, pGlassImage.rect,pOrigImage.rect)

      end
        • 1. Re: Making a draggable Magnifying Glass
          Level 7
          I have only built one touch screen application and that was many years ago,
          so this information may be outdated. Hopefully someone will chime in if I am
          wrong.

          For the most part, the fact that you are using a touch screen does not
          require any special coding on your part. The touchscreen driver sends mouse
          events as if the user were in fact using a mouse. When you touch the screen
          for example, a mouse down event is generated. Director will not be aware of
          the fact that this event was generated from the touchscreen. It will treat
          the event just like a regular mouse down event.

          So you see, events like mouse down, moving the mouse cursor around, mouse
          up, double-clicks can all occur on the touch screen. I can't recall if or
          how a right-click event was generated by the touch screen, so you may want
          to check with the documentation specific to the touchscreen you are going to
          be using. I may be a good idea to avoid using right-clicks all together, as
          how th euser will generate these events (if possible) may be clumbsy.

          The bottom line, you likely won't have to change that code at all.


          • 2. Re: Making a draggable Magnifying Glass
            Level 7
            This code will most likely work. Try it and see. This code just looks at
            the change in the location of the cursor from one frame loop to another.

            You still have a cursor with a touch screen. You just don't have a
            mouse. You'll have to look at the docs that come with the touch screen
            that you use. There is usually some set up control to allow the cursor
            to show or not. You'll also have to see if the screen registers both
            mouse down and mouse up events. Some don't.

            --
            Rob
            _______
            Rob Dillon
            Adobe Community Expert
            http://www.ddg-designs.com
            412-243-9119

            http://www.macromedia.com/software/trial/
            • 3. Re: Making a draggable Magnifying Glass
              Level 7
              Just a small addition to the prvious answers:
              Depending on product, the calibration software for the touchscreen can give
              several options for "touchmode".
              Fx. 3M/Microtouch has 3 different settings - it can be usefull to know, when
              programming.
              - Drawing mode (default): Reacts as a normal mouse. Creates a mousedown when
              the screen is touched, and a mouseup when you liftoff the finger.
              - TouchDown mode: Creates a mousedown, a small pause and then a mouseup when
              the screen is touched.(button mode)
              - LiftOff mode: Mousedown and mouseup happens when you liftup the finger
              from the screen.
              In all modes, the cursor follows your finger if you slide over the screen.

              The script you mention, will work fine on a 3M/Microtouch screen in Drawing
              mode.


              • 4. Re: Making a draggable Magnifying Glass
                Dava Level 1
                Wow. Many thanks for these answers. I didnt even know that touchscreens had different touch modes that you could change. Thats really good to know. I'm getting the screen in in a week or so, so I'll test it out then.

                Many thanks again everyone....

                David
                • 5. Re: Making a draggable Magnifying Glass
                  Dava Level 1
                  Hi again,

                  Got the touchscreen in and all works OK. My only problem now seems to be that the user has touch exactly the centre of the magnifying glass to drag it, and even then it's doesn't always drag nicely.

                  I need to make the whole magnifying glass touchable/draggable. From my limited brainpower I'm guessing that it might be that the code is pointing to the registration point of the circle as opposed to the whole circle:

                  " -- get the registration point of the glass
                  pRegPoint = sprite(me.spriteNum+1).member.regPoint"

                  ...but I'm only guessing and clutching at straws and I don't know what to do to change it anyway...

                  Any help is most gratefully received.

                  Thanks, David
                  • 6. Re: Making a draggable Magnifying Glass
                    Level 7

                    > My only problem now seems to be that
                    > the user has touch exactly the centre of the magnifying glass to drag it,

                    Haven't seen that before...
                    How does it work with a mouse?
                    Do you use any ink settings on that sprite, different that copy?

                    >and even then it's doesn't always drag nicely.

                    Depending on the type of touchscreen (capacitive/resistive, serial/usb)
                    there are different communication speeds. Some have the possibillity to
                    tweak the settings in the calibration software. You should be able to get
                    movements similar to normal mousedragging. Well, it will never be suitable
                    for the newest shooting games, but for dragging a sprite, it should be fine.
                    Did you try setting a high FPS for your movie?


                    • 7. Re: Making a draggable Magnifying Glass
                      Level 7
                      ^ Sorry, I did not see the code that you supplied.

                      The line
                      sprite(me.spriteNum+1).loc = the mouseLoc
                      sets the center of the glass to where you place the cursor (or the
                      finger....)

                      Instead you could make the magnifying glass draggable, and adjust the mask
                      position after that.. The mapStageToMember must then follow the center of
                      the glass, instead of the the mouseLoc. Notice that the registrationPoint of
                      the glass has an offset in the demo.