com.greensock.transform.FlexCrop

Package	com.greensock.transform
Class	public class FlexCrop
Inheritance	FlexCrop mx.core.UIComponent

An example implementation of a cropping tool that works with TransformManager in Flex, making it relatively simple to allow users to interactively crop a DisplayObject using a rectangular mask. A FlexCrop object is a UIComponent that places itself in front of its target (the DisplayObject that it should crop) and it also creates another UIComponent object that serves as the target's mask. So the FlexCrop object and the mask UIComponent are both automatically added to the display list. When the FlexCrop's attached property is true, the target will move/scale/rotate along with the FlexCrop object (changes to the FlexCrop are also applied to the target). When maskEnabled is true, the target will be masked visually.

The FlexCrop object is treated as just another TransformItem in the associated TransformManager so that it is able to be moved/scaled/rotated/selected.

When the FlexCrop's cropMode property is true, it automatically detaches from the target (attached is set to false) and the following also occur, which you can customize using the configureCropMode() method:

maskEnabled is set to false so that the target becomes fully visible (not masked).
The line color of the selection box becomes red (the TransformManager's lineColor is temporarily changed).
The alpha of the FlexCrop is set to 0.3 so that the rectangle becomes visible.
A "enterCropMode" Event is dispatched.

When cropMode is changed to false, a "exitCropMode" Event is dispatched.

To enter cropMode, simply double-click on the FlexCrop object or manually set cropMode to true. You could also create a button in your interface to toggle cropMode. Or use TransformManager's addSelectionBoxElement() method to add a cropping button/icon to the actual selection box if you prefer. To exit cropMode, double-click the FlexCrop object again or deselect both the target and FlexCrop object (by clicking off of them) (you can disable this behavior with the configureCropMode() method).

Example AS3 code:

import com.greensock.transform.*;

//create the TransformManager first 
var manager:TransformManager = new TransformManager();
 
//now create FlexCrop objects for mc1, mc2, and mc3 which are all DisplayObjects on the stage
var mc1Crop:FlexCrop = new FlexCrop(mc1, manager);
var mc2Crop:FlexCrop = new FlexCrop(mc2, manager);
var mc3Crop:FlexCrop = new FlexCrop(mc3, manager);

//change the default cropMode behavior of mc1Crop so that the lineColor is 0x00FF00 and the alpha is 0.5
mc1Crop.configureCropMode(false, 0.5, 0x00FF00, true);

Copyright 2011-2012, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/eula.html or for corporate Club GreenSock members, the software agreement that was issued with the corporate membership.

	Property	Defined By
		attached : Boolean If true, transformations that are made to the FlexCrop (move/scale/rotation) will also affect to the target.	FlexCrop
		cropMode : Boolean When the FlexCrop's cropMode property is true, it automatically detaches from the target (attached is set to false) and the following also occur, which you can customize using the configureCropMode() method: maskEnabled is set to false so that the target becomes fully visible (not masked). The line color of the selection box becomes red (the TransformManager's lineColor is temporarily changed). The alpha of the FlexCrop is set to 0.3 so that the rectangle becomes visible. A "enterCropMode" Event is dispatched. When cropMode is changed to false, a "exitCropMode" Event is dispatched. To enter cropMode, simply double-click on the FlexCrop object or manually set cropMode to true.	FlexCrop
		height : Number [override]	FlexCrop
		maskEnabled : Boolean If true, the target will be masked by the crop.	FlexCrop
		rotation : Number [override] [write-only]	FlexCrop
		scaleX : Number [override] [write-only]	FlexCrop
		scaleY : Number [override] [write-only]	FlexCrop
		target : DisplayObject [read-only] The target DisplayObject that the FlexCrop object should affect (mask/crop).	FlexCrop
		transform : Transform [override] [write-only]	FlexCrop
		width : Number [override]	FlexCrop
		x : Number [override] [write-only]	FlexCrop
		y : Number [override] [write-only]	FlexCrop

	Method	Defined By
		FlexCrop(target:DisplayObject, manager:TransformManager, attached:Boolean = true, fillColor:uint = 0x000000, alpha:Number = 0) Constructor	FlexCrop
		calibrateDepths(event:Event = null, leaveTarget:Boolean = false):void Adjusts the depth levels of the target or FlexCrop object in the display list so that the FlexCrop is on top of the target.	FlexCrop
		configureCropMode(maskEnabled:Boolean, alpha:Number, lineColor:uint, autoApplyOnDeselect:Boolean = true):void Allows some customization of the cropMode, like alpha, lineColor, etc.	FlexCrop
		destroy():void Destroys the FlexCrop object, removing its internal event listeners, disabling the mask, and releasing it for garbage collection.	FlexCrop
		update(event:Event = null, calibrateBox:Boolean = true):void Forces an update of the FlexCrop object so that it either applies any recent scale/rotation/movement to the target (if attached is true) or records the offset values (if attached is false).	FlexCrop

Property Detail

attached

property

attached:Boolean

If true, transformations that are made to the FlexCrop (move/scale/rotation) will also affect to the target. Set attached to false to move/scale/rotate the crop and its target independently.

Implementation
public function get attached():Boolean
public function set attached(value:Boolean):void

cropMode

property

cropMode:Boolean

maskEnabled is set to false so that the target becomes fully visible (not masked).
The line color of the selection box becomes red (the TransformManager's lineColor is temporarily changed).
The alpha of the FlexCrop is set to 0.3 so that the rectangle becomes visible.
A "enterCropMode" Event is dispatched.

When cropMode is changed to false, a "exitCropMode" Event is dispatched.

Implementation
public function get cropMode():Boolean
public function set cropMode(value:Boolean):void

height

property

height:Number[override]

Implementation
public function get height():Number
public function set height(value:Number):void

maskEnabled

property

maskEnabled:Boolean

If true, the target will be masked by the crop. Technically the target's mask gets set to a UIComponent object that the FlexCrop creates internally.

Implementation
public function get maskEnabled():Boolean
public function set maskEnabled(value:Boolean):void

rotation

property

rotation:Number [write-only] [override]

Implementation
public function set rotation(value:Number):void

scaleX

property

scaleX:Number [write-only] [override]

Implementation
public function set scaleX(value:Number):void

scaleY

property

scaleY:Number [write-only] [override]

Implementation
public function set scaleY(value:Number):void

target

property

target:DisplayObject [read-only]

The target DisplayObject that the FlexCrop object should affect (mask/crop).

Implementation
public function get target():DisplayObject

transform

property

transform:Transform [write-only] [override]

Implementation
public function set transform(value:Transform):void

width

property

width:Number[override]

Implementation
public function get width():Number
public function set width(value:Number):void

property

x:Number [write-only] [override]

Implementation
public function set x(value:Number):void

property

y:Number [write-only] [override]

Implementation
public function set y(value:Number):void

Constructor Detail

FlexCrop

()

Constructor

public function FlexCrop(target:DisplayObject, manager:TransformManager, attached:Boolean = true, fillColor:uint = 0x000000, alpha:Number = 0)

Constructor

Parameters

	`target:DisplayObject` — the target DisplayObject that the FlexCrop object should affect (mask/crop).

	`manager:TransformManager` — the TransformManager instance that should be used to manage the transformations/selections

	`attached:Boolean` (default = `true`) — if `true` (the default), transformations that are made to the FlexCrop (move/scale/rotation) will also affect to the `target`. Set `attached` to `false` to move/scale/rotate them independently.

	`fillColor:uint` (default = `0x000000`) — the fill color (hex value) of the FlexCrop object. When `cropMode` is `false` the FlexCrop's alpha is 0, so you won't see the fill color unless `cropMode` is `true`. This basically controls the interactive mask color.

	`alpha:Number` (default = `0`) — the initial alpha value of the FlexCrop object (typically 0 is best).

Method Detail

calibrateDepths

()

method

public function calibrateDepths(event:Event = null, leaveTarget:Boolean = false):void

Adjusts the depth levels of the target or FlexCrop object in the display list so that the FlexCrop is on top of the target.

Parameters

	`event:Event` (default = `null`) — an optional Event, making it easier to use `calibrateDepths()` as an event listener. The Event isn't used at all internally.

	`leaveTarget:Boolean` (default = `false`) — if `true`, the `target` will remain exactly where it is in the display list and the FlexCrop object will be moved above it rather than leaving the FlexCrop where it is and moving the `target` under it.

configureCropMode

()

method

 public function configureCropMode(maskEnabled:Boolean, alpha:Number, lineColor:uint, autoApplyOnDeselect:Boolean = true):void

Allows some customization of the cropMode, like alpha, lineColor, etc.

Parameters

	`maskEnabled:Boolean` — if `true`, the mask will stay enabled when in `cropMode`.

	`alpha:Number` — sets the `alpha` that the FlexCrop object should be when in `cropMode`. Set the `fillColor` to control the color.

	`lineColor:uint` — sets the line color of the selection box when in `cropMode`. This temporarily changes the TransformManager's `lineColor` while in `cropMode`.

	`autoApplyOnDeselect:Boolean` (default = `true`) — if `true`, deselecting the FlexCrop object and its `target` will automatically set `cropMode` to `false`.

destroy

()

method

public function destroy():void

Destroys the FlexCrop object, removing its internal event listeners, disabling the mask, and releasing it for garbage collection.

update

()

method

public function update(event:Event = null, calibrateBox:Boolean = true):void

Forces an update of the FlexCrop object so that it either applies any recent scale/rotation/movement to the target (if attached is true) or records the offset values (if attached is false).

Parameters

	`event:Event` (default = `null`) — an optional Event, making it easier to use `update()` as an event listener. The Event isn't used at all internally.

	`calibrateBox:Boolean` (default = `true`) — if `true`, the FlexCrop's rectangle will be updated to match the native bounding box of the `target`. This can be helpful if the `target`'s size or bounding box changed since the last update.

Wed Aug 1 2012, 12:57 AM -05:00

GreenSock TransformManager ActionScript API Docs	All Packages \| All Classes \| Index \| Frames No Frames
FlexCrop	Properties \| Methods