ActionScript 3: Zoom functions - drag does not show

Question

I've included a zoom functionality similar to the one explained at this website: http://www.flashandmath.com/howtos/zoom/

Even though it does indeed work in terms of the possibility of moving the image on my stage, the drag-animation is not present, meaning there will be no "movement" of my image, just a sudden change in position.

The problem followed my attempt to change the concept from timeline-based to class-based.

Here is my Main class:

package 
{
import flash.display.MovieClip;
import flash.utils.Dictionary;
import flash.display.Shape;
import fl.transitions.Fly;
import fl.motion.MatrixTransformer;
import flash.events.MouseEvent;
import flash.events.KeyboardEvent;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.ui.Mouse;

public class Main extends Sprite
{
    public static var scale:Number = 1;
    private var _rootMC:MovieClip;

    // ------------------------------

    public var bg_image:Sprite;
    public var spImage:Sprite;
    public var mat:Matrix;
    public var mcIn:MovieClip;
    public var mcOut:MovieClip;
    public var boardWidth:int = 980;
    public var boardHeight:int = 661;

    public var boardMask:Shape;

    public var externalCenter:Point;
    public var internalCenter:Point;

    public static var scaleFactor:Number = 0.8;
    public static var minScale:Number = 0.25;
    public static var maxScale:Number = 10.0;
    //-------------------------------

    public function Main(rootMC:MovieClip)
    {
        _rootMC = rootMC;



        bg_image = new image();

        this.graphics.beginFill(0xB6DCF4);
        this.graphics.drawRect(0,0,boardWidth,boardHeight);
        this.graphics.endFill();

        spImage = new Sprite();
        this.addChild(spImage);

        boardMask = new Shape();
        boardMask.graphics.beginFill(0xDDDDDD);
        boardMask.graphics.drawRect(0,0,boardWidth,boardHeight);
        boardMask.graphics.endFill();
        boardMask.x = 0;
        boardMask.y = 0;
        this.addChild(boardMask);
        spImage.mask = boardMask;

        minScale = boardWidth / bg_image.width;

        mcIn = new InCursorClip();
        mcOut = new OutCursorClip();

        bg_image.addChild(mcIn);
        bg_image.addChild(mcOut);

        bg_image.scaleX = minScale;
        bg_image.scaleY = minScale;

        spImage.addChild(bg_image);
        spImage.addChild(mcIn);
        spImage.addChild(mcOut);

        spImage.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
        _rootMC.stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

        spImage.addEventListener(MouseEvent.CLICK, zoom);

        _rootMC.stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandler);
        _rootMC.stage.addEventListener(KeyboardEvent.KEY_UP, keyHandler);


    }


    private function startDragging(mev:MouseEvent):void
    {
        spImage.startDrag();
    }

    private function stopDragging(mev:MouseEvent):void
    {
        spImage.stopDrag();
    }


    private function zoom(mev:MouseEvent):void
    {
        if ((!mev.shiftKey)&&(!mev.ctrlKey))
        {
            return;
        }
        if ((mev.shiftKey)&&(mev.ctrlKey))
        {
            return;
        }

        externalCenter = new Point(spImage.mouseX,spImage.mouseY);
        internalCenter = new Point(bg_image.mouseX,bg_image.mouseY);

        if (mev.shiftKey)
        {
            bg_image.scaleX = Math.max(scaleFactor*bg_image.scaleX, minScale);
            bg_image.scaleY = Math.max(scaleFactor*bg_image.scaleY, minScale);
        }
        if (mev.ctrlKey)
        {
            bg_image.scaleX = Math.min(1/scaleFactor*bg_image.scaleX, maxScale);
            bg_image.scaleY = Math.min(1/scaleFactor*bg_image.scaleY, maxScale);
        }

        mat = this.transform.matrix.clone();

        MatrixTransformer.matchInternalPointWithExternal(mat,internalCenter,externalCenter);

        bg_image.transform.matrix = mat;
    }

    private function keyHandler(ke:KeyboardEvent):void
    {

        mcIn.x = spImage.mouseX;
        mcIn.y = spImage.mouseY;
        mcOut.x = spImage.mouseX;
        mcOut.y = spImage.mouseY;

        mcIn.visible = ke.ctrlKey;
        mcOut.visible = ke.shiftKey;

        if (ke.ctrlKey || ke.shiftKey)
        {
            Mouse.hide();
        }
        else
        {
            Mouse.show();
        }
    }

}
}

Here is my image class:

package  {
import fl.motion.MatrixTransformer;
import flash.display.MovieClip;
import flash.utils.Dictionary;
import flash.display.Shape;
import fl.transitions.Fly;
import fl.motion.MatrixTransformer;
import flash.events.MouseEvent;
public class image extends MovieClip
    {

    public function image() 
    {
        this.width = 980
        this.height = 500
        this.y = 0
        this.x = 0
    }

}

I know this is a lot of code, but I am really stuck :(

It's quite unusual to pass a parameter to the document class (I didn't know it was possible, though that doesn't mean much:/). I would not use rootMC. What is rootMC? Also you're extending Main with Sprite but not importing Sprite. I'm not sure correcting those two things will help but they certainly stood out for me. — dan-steel, Feb 10 '14 at 12:36
I used rootMC parameter in order of accessing the stage. I read this way of doing it here: http://stackoverflow.com/questions/8672183/as3-cannot-access-stage-from-custom-class Regarding the Sprite import suggestion; it is already imported, I simply forgot to paste it. — user3257755, Feb 10 '14 at 17:09
you don't need to pass stage to the Document class. You can just stage.addEventListener(...) or just addEventListener. Why isn't the MOUSE_UP listener attached to the image, like the MOUSE_DOWN? — dan-steel, Feb 10 '14 at 17:53
If I don't, I'd get this error: TypeError: Error #1009: Cannot access a property or method of a null object reference. — user3257755, Feb 12 '14 at 11:42
then you should add an added to stage Event listener in Mains constructor then call everything else in an init function. http://www.emanueleferonato.com/2009/12/03/understand-added_to_stage-event/ and scroll down to his last example code before his comments section — dan-steel, Feb 12 '14 at 11:46
you can and should also remove that listener in init straight away removeEventListener(Event.ADDED_TO_STAGE, init); What's the frame rate? — dan-steel, Feb 12 '14 at 12:05
Ok, I'm now calling Main() without a parameter. However it doesn't make any differance regarding the main issue; the zoom functionality. — user3257755, Feb 12 '14 at 15:47

score 0 · Answer 1 · answered Feb 11 '14 at 01:24

0

On your MOUSE_DOWN handler, you need to start listening to the MOUSE_MOVE event. On your MOUSE_UP handler, you need to stop listening to the MOUSE_MOVE event.

Not sure if you are already doing this.

In your MOUSE_MOVE event handler, you need to update the x / y positions of the image, in a similar way to what you are probably doing on the MOUSE_UP handler.

answered Feb 11 '14 at 01:24

Kaushal De Silva

592
3
8

I have no MOUSE_MOVE event. What should I add it to? bg_image? – user3257755 Feb 12 '14 at 11:43
Have a look here http://www.flashandmath.com/basic/dragdroptour/dd_tour1.html at the section 'Drag-and-drop with the MOUSE_MOVE event' Your framerate isn't really low for some reason is it? – dan-steel Feb 12 '14 at 17:05
Yes it was very low, fixing the drag and drop problem. However it is impossible to zoom in on the image.. – user3257755 Feb 23 '14 at 10:50

ActionScript 3: Zoom functions - drag does not show

1 Answers1