Package | com.greensock |
Class | public class FlexBlitMask |
Inheritance | FlexBlitMask ![]() |
bitmapMode
can be turned off to restore interactivity in the DisplayObject
whenever you want. It is a Flex-friendly version of BlitMask. When scrolling very large images or text
blocks, a FlexBlitMask can greatly improve performance, especially on mobile devices that have weaker
processors. update()
the FlexBlitMask and it syncs the pixels.
The FlexBlitMask basically sits on top of the DisplayObject in the display list and you can
move it independently too if you want.scrollX
and scrollY
properties to move the
target DisplayObject inside the masked area. For example, to scroll from top to bottom over
the course of 2 seconds, simply do: myFlexBlitMask.scrollY = 0;
TweenLite.to(myFlexBlitMask, 2, {scrollY:1});
bitmapMode
of course), as though the FlexBlitMask is
filled with a grid of bitmap copies of the target.smoothing
to false
or
for maximum quality, set it to true
bitmapMode
to get either maximum performance or interactivity
in the target DisplayObject anytime. (some other solutions out there are only viable for
non-interactive bitmap content) <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" frameRate="60" layout="absolute" xmlns:greensock="com.greensock.*" creationComplete="tween()"> <mx:Script> <![CDATA[ import com.greensock.TweenLite; private function tween():void { myText.y = 50; TweenLite.to(myText, 6, {y:-100}); } ]]> </mx:Script> <greensock:FlexBlitMask id="blitMask" target="{myText}" wrap="false" x="20" y="50" width="300" height="200" smoothing="true" /> <mx:Label text="FlexBlitMask Example" fontSize="24" /> <mx:Text id="myText" x="20" y="50" width="135" height="500" text="FlexBlitMask can be great for high-performance scrolling. Performance is of paramount importance in mobile apps. There is, of course, a trade-off in memory because an extra bitmap version of the target needs to be captured/maintained, but overall performance while scrolling can be significantly improved. It doesn't make sense to use FlexBlitMask if you're tweening the scale or rotation of the target, though - it is primarily for scrolling (tweening the x and/or y properties)." /> <mx:Button id="tweenButton" label="Tween" x="20" y="260" click="tween()" /> </mx:Application>
target
is being scaled or rotated
because it forces a flushing and recapture of the internal bitmap. FlexBlitMasks are MUCH better when you are
simply changing x/y properties (scrolling) because it can reuse the same cached bitmap over and over.Property | Defined by | ||
---|---|---|---|
autoUpdate : Boolean
If
true , the FlexBlitMask will automatically watch the target to see if
its position/scale/rotation has changed on each frame (while bitmapMode is true )
and if so, it will update() to make sure the FlexBlitMask always stays synced with the target . | FlexBlitMask | ||
bitmapMode : Boolean
When
true , the FlexBlitMask optimizes itself for performance by setting the target's
visible property to false (greatly reducing the load on Flash's graphics rendering
routines) and uses its internally cached bitmap version of the target to redraw only the necessary
pixels inside the masked area. | FlexBlitMask | ||
fillColor : uint
The ARGB hexadecimal color that should fill the empty areas of the FlexBlitMask.
| FlexBlitMask | ||
height : Number Height of the FlexBlitMask
| FlexBlitMask | ||
rotation : Number [write-only] Rotation of the FlexBlitMask (always 0 because FlexBlitMasks can't be rotated!)
| FlexBlitMask | ||
scaleX : Number scaleX (warning: altering the scaleX won't actually change its value - instead, it affects the
width property accordingly) | FlexBlitMask | ||
scaleY : Number scaleY (warning: altering the scaleY won't actually change its value - instead, it affects the
height property accordingly) | FlexBlitMask | ||
scrollX : Number
Typically a value between 0 and 1 indicating the
target's position in relation to the FlexBlitMask
on the x-axis where 0 is at the beginning, 0.5 is scrolled to exactly the halfway point, and 1 is scrolled
all the way. | FlexBlitMask | ||
scrollY : Number
Typically a value between 0 and 1 indicating the
target's position in relation to the FlexBlitMask
on the y-axis where 0 is at the beginning, 0.5 is scrolled to exactly the halfway point, and 1 is scrolled
all the way. | FlexBlitMask | ||
smoothing : Boolean
If
false (the default), the bitmap (and the FlexBlitMask's x/y coordinates)
will be rendered only on whole pixels which is faster in terms of processing. | FlexBlitMask | ||
target : DisplayObject The target DisplayObject that the FlexBlitMask should mask
| FlexBlitMask | ||
width : Number Width of the FlexBlitMask
| FlexBlitMask | ||
wrap : Boolean
If
true , the bitmap will be wrapped around to the opposite side when it scrolls off
one of the edges (only in bitmapMode of course), like the FlexBlitMask is filled with a
grid of bitmap copies of the target. | FlexBlitMask | ||
wrapOffsetX : Number
When
wrap is true , wrapOffsetX controls how many pixels
along the x-axis the wrapped copies of the bitmap are spaced. | FlexBlitMask | ||
wrapOffsetY : Number
When
wrap is true , wrapOffsetY controls how many pixels
along the y-axis the wrapped copies of the bitmap are spaced. | FlexBlitMask | ||
x : Number x coordinate of the FlexBlitMask (it will automatically be forced to whole pixel values if
smoothing is false ). | FlexBlitMask | ||
y : Number y coordinate of the FlexBlitMask (it will automatically be forced to whole pixel values if
smoothing is false ). | FlexBlitMask |
Method | Defined by | ||
---|---|---|---|
FlexBlitMask(target:DisplayObject = null, x:Number = 0, y:Number = 0, width:Number = 100, height:Number = 100, smoothing:Boolean = false, autoUpdate:Boolean = true, fillColor:uint = 0x00000000, wrap:Boolean = false)
Constructor
| FlexBlitMask | ||
disableBitmapMode(event:Event = null):void
Identical to setting
bitmapMode = false but this method simplifies adding that
functionality to tweens or using it as an event handler. | FlexBlitMask | ||
dispose():void
Disposes of the FlexBlitMask and its internal BitmapData instances, releasing them for garbage collection.
| FlexBlitMask | ||
enableBitmapMode(event:Event = null):void
Identical to setting
bitmapMode = true but this method simplifies adding that
functionality to tweens or using it as an event handler. | FlexBlitMask | ||
normalizePosition():void
Repositions the
target so that it is visible within the BlitMask, as though wrap
was enabled (this method is called automatically when bitmapMode is disabled while wrap
is true ). | FlexBlitMask | ||
setActualSize(w:Number, h:Number):void
| FlexBlitMask | ||
setSize(width:Number, height:Number):void
Sets the width and height of the FlexBlitMask.
| FlexBlitMask | ||
update(event:Event = null, forceRecaptureBitmap:Boolean = false):void
Updates the FlexBlitMask's internal bitmap to reflect the
target's current position/scale/rotation. | FlexBlitMask |
autoUpdate | property |
autoUpdate:Boolean
[read-write]
If true
, the FlexBlitMask will automatically watch the target
to see if
its position/scale/rotation has changed on each frame (while bitmapMode
is true
)
and if so, it will update()
to make sure the FlexBlitMask always stays synced with the target
.
This is the easiest way to use FlexBlitMask but it is slightly less efficient than manually calling update()
whenever you need to. Keep in mind that if you're tweening with TweenLite or TweenMax, you can simply set
its onUpdate
to the FlexBlitMask's update()
method to keep things synced.
Like onUpdate:myFlexBlitMask.update
.
public function get autoUpdate():Boolean
public function set autoUpdate(value:Boolean):void
bitmapMode | property |
bitmapMode:Boolean
[read-write]
When true
, the FlexBlitMask optimizes itself for performance by setting the target's
visible
property to false
(greatly reducing the load on Flash's graphics rendering
routines) and uses its internally cached bitmap version of the target
to redraw only the necessary
pixels inside the masked area. Since only a bitmap version of the target
is shown while in bitmapMode,
the target
won't be interactive. So if you have buttons and other objects that normally react to
MouseEvents, they won't while in bitmapMode. If you need the interactivity, simply set bitmapMode
to false
and then it will turn the target's
visible
property back to true
and its mask
property to the FlexBlitMask itself. Typically it is best to turn bitmapMode on at least when you're
animating the target
or the FlexBlitMask itself, and then when the tween/animation is done and you need
interactivity, set bitmapMode back to false. For example:
var bm:FlexBlitMask = new FlexBlitMask(mc, 0, 0, 300, 200, true);
TweenLite.to(mc, 3, {x:200, onUpdate:bm.update, onComplete:completeHandler});
function completeHandler():void {
bm.bitmapMode = false;
}
public function get bitmapMode():Boolean
public function set bitmapMode(value:Boolean):void
See also
fillColor | property |
fillColor:uint
[read-write]
The ARGB hexadecimal color that should fill the empty areas of the FlexBlitMask. By default,
it is transparent (0x00000000). If you wanted a red color, for example, it would be
0xFFFF0000
.
public function get fillColor():uint
public function set fillColor(value:uint):void
height | property |
height:Number
[read-write]Height of the FlexBlitMask
Implementation public function get height():Number
public function set height(value:Number):void
rotation | property |
rotation:Number
[write-only]Rotation of the FlexBlitMask (always 0 because FlexBlitMasks can't be rotated!)
Implementation public function set rotation(value:Number):void
scaleX | property |
scaleX:Number
[read-write] scaleX (warning: altering the scaleX won't actually change its value - instead, it affects the width
property accordingly)
public function get scaleX():Number
public function set scaleX(value:Number):void
scaleY | property |
scaleY:Number
[read-write] scaleY (warning: altering the scaleY won't actually change its value - instead, it affects the height
property accordingly)
public function get scaleY():Number
public function set scaleY(value:Number):void
scrollX | property |
scrollX:Number
[read-write]
Typically a value between 0 and 1 indicating the target's
position in relation to the FlexBlitMask
on the x-axis where 0 is at the beginning, 0.5 is scrolled to exactly the halfway point, and 1 is scrolled
all the way. This makes it very easy to animate the scroll. For example, to scroll from beginning to end
over 5 seconds, you could do:
myFlexBlitMask.scrollX = 0;
TweenLite.to(myFlexBlitMask, 5, {scrollX:1});
public function get scrollX():Number
public function set scrollX(value:Number):void
See also
scrollY | property |
scrollY:Number
[read-write]
Typically a value between 0 and 1 indicating the target's
position in relation to the FlexBlitMask
on the y-axis where 0 is at the beginning, 0.5 is scrolled to exactly the halfway point, and 1 is scrolled
all the way. This makes it very easy to animate the scroll. For example, to scroll from beginning to end
over 5 seconds, you could do:
myFlexBlitMask.scrollY = 0;
TweenLite.to(myFlexBlitMask, 5, {scrollY:1});
public function get scrollY():Number
public function set scrollY(value:Number):void
See also
smoothing | property |
smoothing:Boolean
[read-write]
If false
(the default), the bitmap (and the FlexBlitMask's x/y coordinates)
will be rendered only on whole pixels which is faster in terms of processing. However,
for the best quality and smoothest animation, set smoothing
to true
.
public function get smoothing():Boolean
public function set smoothing(value:Boolean):void
target | property |
target:DisplayObject
[read-write]The target DisplayObject that the FlexBlitMask should mask
Implementation public function get target():DisplayObject
public function set target(value:DisplayObject):void
width | property |
width:Number
[read-write]Width of the FlexBlitMask
Implementation public function get width():Number
public function set width(value:Number):void
wrap | property |
wrap:Boolean
[read-write]
If true
, the bitmap will be wrapped around to the opposite side when it scrolls off
one of the edges (only in bitmapMode
of course), like the FlexBlitMask is filled with a
grid of bitmap copies of the target. Use the wrapOffsetX
and wrapOffsetY
properties to affect how far apart the copies are from each other. You can reposition the
target
anywhere and FlexBlitMask will align the copies accordingly.
public function get wrap():Boolean
public function set wrap(value:Boolean):void
See also
wrapOffsetX | property |
wrapOffsetX:Number
[read-write]
When wrap
is true
, wrapOffsetX
controls how many pixels
along the x-axis the wrapped copies of the bitmap are spaced. It is essentially the gap between
the copies (although you can use a negative value or 0 to avoid any gap).
public function get wrapOffsetX():Number
public function set wrapOffsetX(value:Number):void
See also
wrapOffsetY | property |
wrapOffsetY:Number
[read-write]
When wrap
is true
, wrapOffsetY
controls how many pixels
along the y-axis the wrapped copies of the bitmap are spaced. It is essentially the gap between
the copies (although you can use a negative value or 0 to avoid any gap).
public function get wrapOffsetY():Number
public function set wrapOffsetY(value:Number):void
See also
x | property |
x:Number
[read-write] x coordinate of the FlexBlitMask (it will automatically be forced to whole pixel values if smoothing
is false
).
public function get x():Number
public function set x(value:Number):void
y | property |
y:Number
[read-write] y coordinate of the FlexBlitMask (it will automatically be forced to whole pixel values if smoothing
is false
).
public function get y():Number
public function set y(value:Number):void
FlexBlitMask | () | constructor |
public function FlexBlitMask(target:DisplayObject = null, x:Number = 0, y:Number = 0, width:Number = 100, height:Number = 100, smoothing:Boolean = false, autoUpdate:Boolean = true, fillColor:uint = 0x00000000, wrap:Boolean = false)
Constructor
Parameterstarget:DisplayObject (default = null ) — The DisplayObject that will be masked by the FlexBlitMask
|
|
x:Number (default = 0 ) — x coorinate of the upper left corner of the FlexBlitMask. If smoothing is false , the x coordinate will be rounded to the closest integer.
|
|
y:Number (default = 0 ) — y coordinate of the upper right corner of the FlexBlitMask
|
|
width:Number (default = 100 ) — width of the FlexBlitMask (in pixels)
|
|
height:Number (default = 100 ) — height of the FlexBlitMask (in pixels)
|
|
smoothing:Boolean (default = false ) — If false (the default), the bitmap (and the FlexBlitMask's x/y coordinates) will be rendered only on whole pixels which is faster in terms of processing. However, for the best quality and smoothest animation, set smoothing to true .
|
|
autoUpdate:Boolean (default = true ) — If true (the default), the FlexBlitMask will automatically watch the target to see if its position/scale/rotation has changed on each frame (while bitmapMode is true ) and if so, it will update() to make sure the FlexBlitMask always stays synced with the target . This is the easiest way to use FlexBlitMask but it is slightly less efficient than manually calling update() whenever you need to. Keep in mind that if you're tweening with TweenLite or TweenMax, you can simply set its onUpdate to the FlexBlitMask's update() method to keep things synced. Like onUpdate:myFlexBlitMask.update .
|
|
fillColor:uint (default = 0x00000000 ) — The ARGB hexadecimal color that should fill the empty areas of the FlexBlitMask. By default, it is transparent (0x00000000). If you wanted a red color, for example, it would be 0xFFFF0000 .
|
|
wrap:Boolean (default = false ) — If true , the bitmap will be wrapped around to the opposite side when it scrolls off one of the edges (only in bitmapMode of course), like the FlexBlitMask is filled with a grid of bitmap copies of the target. Use the wrapOffsetX and wrapOffsetY properties to affect how far apart the copies are from each other.
|
disableBitmapMode | () | method |
public function disableBitmapMode(event:Event = null):void
Identical to setting bitmapMode = false
but this method simplifies adding that
functionality to tweens or using it as an event handler. For example, to enable bitmapMode at
the beginning of a tween and then disable it when the tween completes, you could do:
TweenLite.to(mc, 3, {x:400, onStart:myFlexBlitMask.enableBitmapMode, onUpdate:myFlexBlitMask.update, onComplete:myFlexBlitMask.disableBitmapMode});
event:Event (default = null ) — An optional Event that isn't used internally but makes it possible to use the method as an event handler like addEventListener(MouseEvent.CLICK, myFlexBlitMask.disableBitmapMode) .
|
See also
dispose | () | method |
public function dispose():void
Disposes of the FlexBlitMask and its internal BitmapData instances, releasing them for garbage collection.
enableBitmapMode | () | method |
public function enableBitmapMode(event:Event = null):void
Identical to setting bitmapMode = true
but this method simplifies adding that
functionality to tweens or using it as an event handler. For example, to enable bitmapMode at
the beginning of a tween and then disable it when the tween completes, you could do:
TweenLite.to(mc, 3, {x:400, onStart:myFlexBlitMask.enableBitmapMode, onUpdate:myFlexBlitMask.update, onComplete:myFlexBlitMask.disableBitmapMode});
event:Event (default = null ) — An optional Event that isn't used internally but makes it possible to use the method as an event handler like addEventListener(MouseEvent.CLICK, myFlexBlitMask.enableBitmapMode) .
|
See also
normalizePosition | () | method |
public function normalizePosition():void
Repositions the target
so that it is visible within the BlitMask, as though wrap
was enabled (this method is called automatically when bitmapMode
is disabled while wrap
is true
). For example, if you tween the target
way off the edge of the BlitMask and
have wrap
enabled, it will appear to come back in from the other side even though the raw coordinates
of the target would indicate that it is outside the BlitMask. If you want to force the coordinates to normalize
so that they reflect that wrapped position, simply call normalizePosition()
. It will automatically
choose the coordinates that would maximize the visible portion of the target if a seam is currently showing.
setActualSize | () | method |
public override function setActualSize(w:Number, h:Number):void
Parameters
w:Number |
|
h:Number |
setSize | () | method |
public function setSize(width:Number, height:Number):void
Sets the width and height of the FlexBlitMask.
Keep in mind that a FlexBlitMask should not be rotated or scaled.
You can also directly set the width
or height
properties.
width:Number — The width of the FlexBlitMask
|
|
height:Number — The height of the FlexBlitMask
|
See also
update | () | method |
public function update(event:Event = null, forceRecaptureBitmap:Boolean = false):void
Updates the FlexBlitMask's internal bitmap to reflect the target's
current position/scale/rotation.
This is a very important method that you'll need to call whenever visual or transformational changes are made
to the target so that the FlexBlitMask remains synced with it.
event:Event (default = null ) — An optional Event object (which isn't used at all internally) in order to make it easier to use update() as an event handler. For example, you could addEventListener(Event.ENTER_FRAME, myFlexBlitMask.update) to make sure it is updated on every frame (although it would be more efficient to simply set autoUpdate to true in this case).
|
|
forceRecaptureBitmap:Boolean (default = false ) — Normally, the cached bitmap of the target is only recaptured if its scale or rotation changed because doing so is rather processor-intensive, but you can force a full update (and regeneration of the cached bitmap) by setting forceRecaptureBitmap to true .
|