mercredi 25 novembre 2015

Handling Editable Objects

Here's the scenario. A user selects an image, video, or other type of display object. It gets loaded inside a custom class known as EditableObject. The goal of EditableObject is re-sizing and re-positioning. EditableObject has 4 movieclips.

center_mc : Handles drag and drop and contains the display object.

rightside_mc : Handles re-sizing of width on mousedown

bottomside_mc : Handles re-sizing of height on mousedown

bottomright_mc : Handles scaling of object on mousedown

So far I can scale all parts of these objects. The bugs are what's causing trouble.

When I click down on the bottom or right side of the display object, the display object increases size from whichever side it's handling before I move the mouse. I get the amount to move based on the difference of the stageX and stageY positions of the mouse passed on MOUSE_DOWN and at the end of every MOUSE_MOVE. This isn't a problem, it just looks bad and currently solves the second bug..

When I handle bottomright_mc, I can only scale the object down. When trying to scale out, I have to position the mouse outside of EditableObject to get a difference greater than bottomright_mc's current position. This doesn't work because any attempts to exit the bounds of EditableObject trigger MOUSE_UP, even if I add the event listener using this.parent..

I want to be able to re-position and scale anything inside EditableObject using two sides and one corner of EditableObject when a mouse is held down and moved. Currently I can only move the object, scale the object less than its current size, and use the two sides to adjust the objects width and height but without having the mouse match the position of the side it's currently handling on initialization.

Here's an excerpt for the MOUSE_MOVE handler.

private function handleMouseMove(e:MouseEvent):void
                            case "right":
                                    trace("Right triggered.");
                                    this.width = e.stageX - this.x;
                            case "bottom":
                                    trace("Bottom triggered");
                                    this.height = e.stageY - this.y;
                            case "bottomright":
                                    resizeMe(this, e.stageX - this.x, this.height);

                    prevMouseX = e.stageX;
                    prevMouseY = e.stageY;

The full code for the class can be found here on pastebin.

Here's Editable Object in Adobe Flash CC EditableObject in Adobe Flash CC Here's EditableObject currently containing and handling an image inside the editor. enter image description here

Aucun commentaire:

Enregistrer un commentaire