I prepared a CustomTransformer Class using AS3.0 which can be used anywhere by creating an instance of the Class. This is mainly with drag and resize functionality. Resizing can be done by four corners and middle of the four sides of the selected object.
parameters: root for flash/Application for Flex application. Or any other workarea.
method
setTarget(targetObject).
setTarget method will set the selected object as a target object of the transformer. parameter targetObject will be any displayObject on the workarea.
In Use:
Code is here:
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
public class CustomTransformer extends Sprite{
public var targetObj:* = null;
private var isDragging:Boolean = false;
private var isResizing:Boolean = false;
private var isLeftTopResizing:Boolean = false;
private var isLeftMiddleResizing:Boolean = false;
private var isLeftBottomResizing:Boolean = false;
private var isMiddleTopResizing:Boolean = false;
private var isMiddleBottomResizing:Boolean = false;
private var isRightTopResizing:Boolean = false;
private var isRightMiddleResizing:Boolean = false;
private var isRightBottomResizing:Boolean = false;
private var tf:TextField;
private var topLeftXPos:Number;
private var topLeftYPos:Number;
private var bottomRightXPos:Number;
private var bottomRightYPos:Number;
public static var ROOT:MovieClip;
public function CustomTransformer(_r:MovieClip):void {
ROOT = _r;
tf = new TextField();
ROOT.addChild(tf);
ROOT.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
ROOT.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
public function setTarget(_dobj:*):void{
this.graphics.clear();
if (this.numChildren > 0){
for (var i:int = this.numChildren-1; i>-1; i--){
removeChildAt(i);
}
}
targetObj = _dobj;
if (targetObj != null){
targetObj.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownHandler);
targetObj.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
targetObj.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
this.x = targetObj.x;
this.y = targetObj.y;
topLeftXPos = 0;
topLeftYPos = 0;
bottomRightXPos = targetObj.width;
bottomRightYPos = targetObj.height;
createRectangles();
}
}
private function createRectangles():void{
for (var i:int = 0; i < 8; i++){ var canvas:Sprite = new Sprite(); setHandCursor(canvas); this.addChild(canvas); canvas.graphics.lineStyle(0.25,0x000000,1); canvas.graphics.beginFill(0xCCCCCC,1); canvas.graphics.drawRect(0,0,10,10); canvas.graphics.endFill(); canvas.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); canvas.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); if (i == 0){ //TOP-LEFT RECTANGLE canvas.x =-10; canvas.y = -10; canvas.addEventListener(MouseEvent.MOUSE_DOWN, topLeftResizeHandler); } if (i == 1){ //TOP-MIDDLE RECTANGLE canvas.x = (targetObj.width-10)/2; canvas.y = -10; canvas.addEventListener(MouseEvent.MOUSE_DOWN, topMiddleResizeHandler); } if (i == 2){ //TOP-RIGHT RECTANGLE canvas.x = targetObj.width; canvas.y = -10; canvas.addEventListener(MouseEvent.MOUSE_DOWN, topRightResizeHandler); } if (i == 3){ //LEFT-MIDDLE RECTANGLE canvas.x = -10; canvas.y = (targetObj.height-10)/2; canvas.addEventListener(MouseEvent.MOUSE_DOWN, leftMiddleResizeHandler); } if (i == 4){ //RIGHT-MIDDLE RECTANGLE canvas.x = targetObj.width; canvas.y = (targetObj.height-10)/2; canvas.addEventListener(MouseEvent.MOUSE_DOWN, rightMiddleResizeHandler); } if (i == 5){ //BOTTOM-LEFT RECTANGLE canvas.x = -10; canvas.y = targetObj.height; canvas.addEventListener(MouseEvent.MOUSE_DOWN, leftBottomResizeHandler); } if (i == 6){ //BOTTOM-MIDDLE RECTANGLE canvas.x = (targetObj.width-10)/2; canvas.y = targetObj.height; canvas.addEventListener(MouseEvent.MOUSE_DOWN, bottomMiddleResizeHandler); } if (i == 7){ //BOTTOM-RIGHT RECTANGLE canvas.x = targetObj.width; canvas.y = targetObj.height; canvas.addEventListener(MouseEvent.MOUSE_DOWN, rightBottomResizeHandler); } } } private function mouseMoveHandler(evt:MouseEvent):void{ if (targetObj != null) { if (isDragging){ targetObj.x = this.x; targetObj.y = this.y; } if (isLeftTopResizing) { if (this.mouseX < bottomRightXPos) { topLeftXPos = this.mouseX; } if (this.mouseY < bottomRightYPos) { topLeftYPos = this.mouseY; } bottomRightXPos = targetObj.width; bottomRightYPos = targetObj.height; } if (isRightTopResizing) { if (this.mouseY < bottomRightYPos) { topLeftYPos = this.mouseY; } if (this.mouseX > 0) {
bottomRightXPos = this.mouseX;
}
topLeftXPos = 0;
bottomRightYPos = targetObj.height;
}
if (isMiddleTopResizing) {
if (this.mouseY < bottomRightYPos) { topLeftYPos = this.mouseY; topLeftXPos = 0; } bottomRightXPos = targetObj.width; bottomRightYPos = targetObj.height; } if (isLeftMiddleResizing){ if (this.mouseX < bottomRightXPos){ topLeftXPos = this.mouseX; topLeftYPos = 0; } bottomRightXPos = targetObj.width; bottomRightYPos = targetObj.height; } if (isRightBottomResizing){ topLeftXPos = 0; topLeftYPos = 0; if (this.mouseX > 0){
bottomRightXPos = this.mouseX;
}
if (this.mouseY > 0){
bottomRightYPos = this.mouseY;
}
}
if (isMiddleBottomResizing){
topLeftXPos = 0;
topLeftYPos = 0;
if (this.mouseY > 0){
bottomRightXPos = targetObj.width;
bottomRightYPos = this.mouseY;
}
}
if (isRightMiddleResizing){
topLeftXPos = 0;
topLeftYPos = 0;
if (this.mouseX > 0){
bottomRightXPos = this.mouseX;
bottomRightYPos = targetObj.height;
}
}
if (isLeftBottomResizing){
if (this.mouseX < bottomRightXPos){ topLeftXPos = this.mouseX; } if (this.mouseY > 0){
bottomRightYPos = this.mouseY;
}
bottomRightXPos = targetObj.width;
topLeftYPos = 0;
}
if (isResizing){
targetObj.x += topLeftXPos;
targetObj.y += topLeftYPos;
targetObj.width = bottomRightXPos-topLeftXPos;
targetObj.height = bottomRightYPos-topLeftYPos;
setTarget(targetObj);
}
}
}
private function mouseUpHandler(evt:MouseEvent):void{
if (isDragging){
this.stopDrag();
isDragging = false;
}
if (isLeftTopResizing) {
isLeftTopResizing = false;
}
if (isMiddleTopResizing) {
isMiddleTopResizing = false;
}
if (isRightTopResizing) {
isRightTopResizing = false;
}
if (isLeftMiddleResizing){
isLeftMiddleResizing = false;
}
if (isRightMiddleResizing){
isRightMiddleResizing = false;
}
if (isLeftBottomResizing){
isLeftBottomResizing = false;
}
if (isMiddleBottomResizing){
isMiddleBottomResizing = false;
}
if (isRightBottomResizing){
isRightBottomResizing = false;
}
isResizing = false;
}
private function mouseDownHandler(evt:MouseEvent):void{
if (targetObj != null)
{
isDragging = true;
this.startDrag();
targetObj.x = this.x;
targetObj.y = this.y;
}
}
private function topLeftResizeHandler(evt:MouseEvent):void {
isResizing = true;
isLeftTopResizing = true;
}
private function topMiddleResizeHandler(evt:MouseEvent):void {
isResizing = true;
isMiddleTopResizing = true;
}
private function topRightResizeHandler(evt:MouseEvent):void {
isResizing = true;
isRightTopResizing = true;
}
private function leftMiddleResizeHandler(evt:MouseEvent):void{
isResizing = true;
isLeftMiddleResizing = true;
}
private function leftBottomResizeHandler(evt:MouseEvent):void{
isResizing = true;
isLeftBottomResizing = true;
}
private function rightMiddleResizeHandler(evt:MouseEvent):void{
isResizing = true;
isRightMiddleResizing = true;
}
private function rightBottomResizeHandler(evt:MouseEvent):void{
isResizing = true;
isRightBottomResizing = true;
}
private function bottomMiddleResizeHandler(evt:MouseEvent):void{
isResizing = true;
isMiddleBottomResizing = true;
}
private function setHandCursor(_dobj:*):void{
_dobj.useHandCursor = true;
_dobj.buttonMode = true;
_dobj.mouseChildren = false;
}
}
}
How to instantiate in flash
//This is main timeline code:
//CustomTranformer class initialised and added to Stage
var transformer:CustomTransformer = new CustomTransformer(this);
addChild(transformer);
//workArea is the background of the Application editing area.
workArea.addEventListener(MouseEvent.CLICK, stageClickHandler);
function stageClickHandler(evt:MouseEvent)
{
transformer.setTarget(null);
}
//First Object named objOne
objOne.addEventListener(MouseEvent.CLICK, objOneClickHandler);
objOne.mouseChildren = false;
function objOneClickHandler(evt:MouseEvent):void
{
transformer.setTarget(objOne);
}
//Second Object named objTwo
objTwo.addEventListener(MouseEvent.CLICK, objTwoClickHandler);
objTwo.mouseChildren = false;
function objTwoClickHandler(evt:MouseEvent):void
{
transformer.setTarget(objTwo);
}
It would be good to see an example and some API docs.
ReplyDeletecool buddy............
ReplyDeleteDo you have any solution of undo and redo functionality in flash as3???
I want to make an application like this..
http://design.uprinting.com/udesign/design.php?site=up&spec=0&product_code=BC&template_id=8264&bop=1