16 Replies Latest reply on Nov 18, 2009 9:05 PM by Ginger85

    Set boundaries for magnifying cursor

    Ginger85

      Hello,

       

      I have placed an image within a movieclip that I would like to zoom in on when the mouse passes over it. The zoom on the cursor is working, but the mouse remains a magnifying glass even after it rolls off of the zoomable image.

       

      I have tried putting the image and zoom code inside an swf and loading in it into a container via loadmovie, but the same problem with the cursor occurs.

       

      Here is a link to an .swf of the problem:   http://www.gingerjarvis.com/test/

       

       

      How can I set boundaries for the zoom function so that my cursor only becomes a magnifier over the image and is normal outside of it?

       

       

      Thank you so much for your time and help!!

       

       

      Ginger

       

       

       

      This is the code I am using:

       

       

       

      loadMovie("01.jpg", imgHolder);

       

      this.createEmptyMovieClip("zoomImg", 33);

       

      zoomImg.setMask(imgMask);

       

      var zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);

      zoomImg.attachBitmap(zoomBitmap, 5);

      var magPower = 2;

      var zoomMtx = new flash.geom.Matrix();

      zoomMtx.scale(magPower, magPower);

      magGlass.swapDepths(_root.getNextHighestDepth());

       

      _root.onEnterFrame = function()

      {

       

      Mouse.hide();

      magGlass._x = _xmouse - 70;

      magGlass._y = _ymouse - 70;

      zoomImg._x = magGlass._x;

      zoomImg._y = magGlass._y;

      imgMask._x = magGlass._x;

      imgMask._y = magGlass._y;

       

      zoomMtx.tx = -_xmouse * magPower;

      zoomMtx.ty = -_ymouse * magPower;

       

      zoomBitmap.draw(imgHolder, zoomMtx);

      }

        • 1. Re: Set boundaries for magnifying cursor
          kglad Adobe Community Professional & MVP

          AFTER loading is complete add a rollover to imgHolder that triggers an onEnterFrame loop and add a rollout that deletes that loop and hides the custom cursor and shows the mouse.

          1 person found this helpful
          • 2. Re: Set boundaries for magnifying cursor
            Ginger85 Level 1

            Thank you so much for your response!

             

            I hate to be a pain, but would you be able to give me an idea what that code would look like?

             

            As an artist, Actionscript isn't my first strength, but I'm trying my best to learn.

            • 3. Re: Set boundaries for magnifying cursor
              kglad Adobe Community Professional & MVP

              :

               

              var mcl:MovieClipLoader=new MovieClipLoader();
              var lo:Object={};
              lo.onLoadInit=function(target){
              target.onRollOver=function(){
              magGlass._visible=true;
              Mouse.hide();
              this.onEnterFrame=magnifyF;
              }
              target.onRollOut=function(){
              magGlass._visible=false;
              Mouse.show();
              delete this.onEnterFrame;
              }
              }

              mcl.addListener(lo);

              mcl.load("01.jpg",imgHolder);

               

              this.createEmptyMovieClip("zoomImg", 33);

               

              zoomImg.setMask(imgMask);

               

              var zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);

              zoomImg.attachBitmap(zoomBitmap, 5);

              var magPower = 2;

              var zoomMtx = new flash.geom.Matrix();

              zoomMtx.scale(magPower, magPower);

              magGlass.swapDepths(_root.getNextHighestDepth());

              magGlass._visible=false;

               

              function magnifyF()

              {

               

              magGlass._x = _xmouse - 70;

              magGlass._y = _ymouse - 70;

              zoomImg._x = magGlass._x;

              zoomImg._y = magGlass._y;

              imgMask._x = magGlass._x;

              imgMask._y = magGlass._y;

               

              zoomMtx.tx = -_xmouse * magPower;

              zoomMtx.ty = -_ymouse * magPower;

               

              zoomBitmap.draw(imgHolder, zoomMtx);

              }

              1 person found this helpful
              • 4. Re: Set boundaries for magnifying cursor
                Ginger85 Level 1

                Thank you for taking the time to provide me with this actionscript, I really appreciate it.

                 

                I added the code to a new keyframe within the movieclip that loads the zoomable image, after the one that loads it. When I publish it, I am getting an error on line 17: mcl.load("01.jpg", imgHolder);  telling me that "there is no method with the name 'load'." I tried it with 'loadMovie' because that's what I originally used, but I get the same error.  After it is published, the magnifier doesn't exist at all.

                 

                I am obviously still doing something wrong.

                 

                I've uploaded my Stills_Gallery.fla file here: http://www.gingerjarvis.com/test/

                 

                If you have time to look at it, that would be great.  The layer with the magnifier is called "images" and the code is applied to the first section labelled "01", starting on frame 3.

                 

                Thanks again

                 

                 

                • 5. Re: Set boundaries for magnifying cursor
                  kglad Adobe Community Professional & MVP

                  that should be loadClip()

                  • 6. Re: Set boundaries for magnifying cursor
                    Ginger85 Level 1

                    It works!! Thank you so much! A great feeling first thing in the morning!

                     

                    See it here: http://www.gingerjarvis.com/test/

                     

                    Is there a way to tell the cursor to stop magnifying at the outside edge of the cursor instead of the centre when it rolls off? So that the magnifier doesn't interfere with the design, especially on the right side.

                     

                    One last question, how can I stop my scrolling navigation when it reaches the top and bottom of the scrolling movieclip? Right now it scrolls too far and snaps back to the beginning when it reaches the centre.  The height of the movieclip is 578 px.  The height of the mask is 411.8 px.

                     

                    Here is the actionscript on the mc:

                     

                    onClipEvent (load) {

                    ycenter = 120;

                    speed = 1/20;

                    }

                    onClipEvent (enterFrame) {

                    var distance = _parent.mask_mc._ymouse-ycenter;

                    if(_parent.mask_mc.hitTest(_root._xmouse, _root._ymouse, false)){

                    _y -= (distance*speed);

                    }

                    if (_y>0) {

                    _y = -578;

                    }

                    if (_y<-578) {

                    _y = 0;

                    }

                    }

                     

                     

                    Thank you again for your time, I really appreciate what you do on here!

                     

                    Ginger

                    • 7. Re: Set boundaries for magnifying cursor
                      kglad Adobe Community Professional & MVP

                      use:

                       


                       

                      var mcl:MovieClipLoader=new MovieClipLoader();
                      var lo:Object={};
                      lo.onLoadInit=function(target){
                      target.onRollOver=function(){
                      magGlass._visible=true;
                      Mouse.hide();
                      this.onEnterFrame=magnifyF;
                      }
                      target.onRollOut=function(){
                      magGlass._visible=false;
                      Mouse.show();
                      delete this.onEnterFrame;
                      zoomBitmap.dispose();
                      }
                      }

                      mcl.addListener(lo);

                      mcl.load("01.jpg",imgHolder);

                       

                      this.createEmptyMovieClip("zoomImg", 33);

                       

                      zoomImg.setMask(imgMask);

                       

                      var zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);

                      zoomImg.attachBitmap(zoomBitmap, 5);

                      var magPower = 2;

                      var zoomMtx = new flash.geom.Matrix();

                      zoomMtx.scale(magPower, magPower);

                      magGlass.swapDepths(_root.getNextHighestDepth());

                      magGlass._visible=false;

                       

                      function magnifyF()

                      {

                       

                      magGlass._x = _xmouse - 70;

                      magGlass._y = _ymouse - 70;

                      zoomImg._x = magGlass._x;

                      zoomImg._y = magGlass._y;

                      imgMask._x = magGlass._x;

                      imgMask._y = magGlass._y;

                       

                      zoomMtx.tx = -_xmouse * magPower;

                      zoomMtx.ty = -_ymouse * magPower;

                       

                      zoomBitmap.draw(imgHolder, zoomMtx);

                      }

                      • 8. Re: Set boundaries for magnifying cursor
                        kglad Adobe Community Professional & MVP

                        you should not attach code to objects.  give your scrolling movieclip an instance name (say scrolling_mc).  if both your mask_mc and scrolling_mc have registration points along their top edge, you can use:

                         

                        parametersF(mask_mc,mask_mc._y,mask_mc._y,mask_mc._y+mask_mc._height,mask_mc._y-scrolling_ mc._height+mask_mc._height);

                        mask_mc.onRollOver=function(){
                        this.onEnterFrame=scrollF;
                        }
                        mask_mc.onRollOut=function(){
                        delete this.onEnterFrame;
                        }
                        function scrollF(){
                        scrolling_mc._y=mask_mc.m * _ymouse+mask_mc.b;
                        }

                        function parameters(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number){
                        mc.m=(y1-y2)/(x1-x2);
                        mc.b=y1-mc.m*x1
                        }

                         

                         

                        • 9. Re: Set boundaries for magnifying cursor
                          Ginger85 Level 1

                          Thanks for this!

                          I'm not sure what is happening, but now when I scroll off of the image the magnifying circle remains visible and the magnifier doesn't reappear when scrolling back over. Any idea what is going on?

                          For the scrolling menu, I gave my mask instance names scrolling_mc and mask_mc, and repositioned the registration points by dragging the hollow circles to the top edge. I created an actions layer inside the menu movie clip and applied the actionscript you gave me to an empty keyframe.
                          Now the menu isn't working at all... any idea what I'm doing wrong?

                          You can see what it looks like here http://www.gingerjarvis.com/test/


                          Thank you again for all of your time on this.

                          • 10. Re: Set boundaries for magnifying cursor
                            kglad Adobe Community Professional & MVP

                            try:

                             

                            var mcl:MovieClipLoader = new MovieClipLoader();
                            var lo:Object = {};
                            lo.onLoadInit = function(target) {
                                target.onRollOver = function() {
                                    magGlass._visible = true;
                                    Mouse.hide();
                                    this.onEnterFrame = magnifyF;
                                };
                                target.onRollOut = function() {
                                    magGlass._visible = false;
                                    Mouse.show();
                                    delete this.onEnterFrame;
                                    zoomBitmap.dispose();
                                };
                            };
                            mcl.addListener(lo);
                            mcl.loadClip("image1.jpg",imgHolder);

                             

                            this.createEmptyMovieClip("zoomImg",33);

                             

                            zoomImg.setMask(imgMask);

                             

                            var zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);
                            zoomImg.attachBitmap(zoomBitmap,5);
                            var magPower = 2;
                            var zoomMtx = new flash.geom.Matrix();
                            zoomMtx.scale(magPower,magPower);
                            magGlass.swapDepths(_root.getNextHighestDepth());
                            magGlass._visible = false;

                             

                            function magnifyF() {
                                if(zoomBitmap.width==-1){
                                    zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);
                                    zoomImg.attachBitmap(zoomBitmap,5);
                                }
                                magGlass._x = _xmouse-70;
                                magGlass._y = _ymouse-70;
                                zoomImg._x = magGlass._x;
                                zoomImg._y = magGlass._y;
                                imgMask._x = magGlass._x;
                                imgMask._y = magGlass._y;

                             

                                zoomMtx.tx = -_xmouse*magPower;
                                zoomMtx.ty = -_ymouse*magPower;
                                zoomBitmap.draw(imgHolder,zoomMtx);
                            }

                            • 11. Re: Set boundaries for magnifying cursor
                              kglad Adobe Community Professional & MVP

                              check my code for typos.  i see parameters() should be parametersF():

                               


                               

                              parametersF(mask_mc,mask_mc._y,mask_mc._y,mask_mc._y+mask_mc._height,mask_mc._y- scrolling_mc._height+mask_mc._height);

                              mask_mc.onRollOver=function(){
                              this.onEnterFrame=scrollF;
                              }
                              mask_mc.onRollOut=function(){
                              delete this.onEnterFrame;
                              }
                              function scrollF(){
                              scrolling_mc._y=mask_mc.m * _ymouse+mask_mc.b;
                              }

                              function parametersF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number){
                              mc.m=(y1-y2)/(x1-x2);
                              mc.b=y1-mc.m*x1
                              }

                               

                               

                              • 12. Re: Set boundaries for magnifying cursor
                                Ginger85 Level 1

                                The scrolling script worked really well! It is scrolling exactly the way that I hoped it would, thank you!  Do you have any idea why my buttons are no longer usable? The actionscript is applied to an empty keyframe on its own layer inside the menu movieclip.

                                 

                                The magnifier is corrected now, however it still turns off as at the centre of the magnifier. I don't mind this, as I made the magnifier smaller, but I can't figure out a way to make the enlarged image to shift toward the right and bottom- so that the white space doesn't show on the right side and bottom when using the magnifier. The image is loading into an empty movieclip, so is there a way to define a background colour for that, or shift the image?

                                 

                                The current state of the page:  http://www.gingerjarvis.com/test/

                                 

                                Thank you again for continuing to assist me with these issues.

                                • 13. Re: Set boundaries for magnifying cursor
                                  kglad Adobe Community Professional & MVP

                                  magGlass._x = _xmouse-70;
                                      magGlass._y = _ymouse-70;

                                   

                                  is causing teh magnifying glass to move up and to the left.  i don't know why that's being done but if you're trying to shift down and to the right, use:

                                   

                                  magGlass._x = _xmouse;
                                      magGlass._y = _ymouse;

                                   

                                   

                                  and i don't see any code related to those buttons.  do they have anything to do with mask_mc?

                                  • 14. Re: Set boundaries for magnifying cursor
                                    Ginger85 Level 1

                                    Well that shifted it down and to the right, but now its going even farther towards the bottom and to the right without eliminating the white. The top and left side are now doing what I originally wanted though, that is, stopping the magnifier at the outside edge of the magnifier, instead of the centre.  I've checked the source files, but I don't know where the white is coming from.  Any idea how to make the bottom and right look like the top and left?

                                     

                                    Current:  http://www.gingerjarvis.com/test/

                                     

                                    The buttons are inside scrolling_mc. The "menu" movieclip is setup on the timeline this way:

                                     

                                    actions

                                    mask_mc

                                    scrolling_mc

                                     

                                    inside "scrolling_mc", the buttons are all on frame 1 of a single layer.

                                     

                                    Thank you again!

                                    • 15. Re: Set boundaries for magnifying cursor
                                      kglad Adobe Community Professional & MVP

                                      it looks like you should be shifting up 1/2 the height of magnifying lens height.

                                      • 16. Re: Set boundaries for magnifying cursor
                                        Ginger85 Level 1

                                        I think that's where the

                                         

                                        magGlass._x = _xmouse-70;
                                            magGlass._y = _ymouse-70;

                                        came from in the first place, but it doesn't eliminate the white inside the magnifier.  When I remove the -70, it moves the magnified image into the right place, but it moves the magnifier with it.  I have no idea what is going on!