Wednesday, 11 January 2012

Tween from centre registration point in AS3

When you Tween a DisplayObject it occurs around the registration point (by default the top left corner) of the DisplayObject. There is a plugin called TransformAroundCenterPlugin that allows you to make 2D transformation occur around the DisplayObject's centre. This is assuming your DisplayObject’s registration point is not already at the center. The following example tweens the rectangle shape from the top left registration point. I have drawn a rectangle shape using the drawing API and positioned the rectangle at the centre of the stage.

import com.greensock.TweenLite; 
import flash.display.Sprite;

var rec:Sprite = new Sprite();
rec.graphics.beginFill(0x000000);
rec.graphics.drawRect(0,0,100,100);
rec.graphics.endFill();
rec.x = stage.stageWidth/2 - rec.width/2;
rec.y = stage.stageHeight/2 - rec.height/2;
addChild(rec);

TweenLite.to(rec, 1, {scaleX:1.5, scaleY:1.5});



If you use the TransformAroundCenterPlugin you can tween DisplayObject’s around the centre registration point even when the registration point is not set to the centre. Although you will need to purchase the Club Greensock membership to use this plugin. You can scale static movie clips using the Matrix class, take a look this post.

import com.greensock.plugins.TweenPlugin; 
import com.greensock.plugins.TransformAroundCenterPlugin;
import com.greensock.TweenLite; 
import flash.display.Sprite;

var rec:Sprite = new Sprite();
rec.graphics.beginFill(0x000000);
rec.graphics.drawRect(0,0,100,100);
rec.graphics.endFill();
rec.x = stage.stageWidth/2 - rec.width/2;
rec.y = stage.stageHeight/2 - rec.height/2;
addChild(rec);

TweenPlugin.activate([TransformAroundCenterPlugin]);

TweenLite.to(rec, 1, {transformAroundCenter:{scaleX:1.5, scaleY:1.5}});



There is also a plugin called TransformAroundPointPlugin that lets you define any point to apply transformations during the tween. This example tweens the rectangle scaleX and scaleY properties from the bottom right registration point.

import com.greensock.TweenLite; 
import com.greensock.plugins.TweenPlugin; 
import com.greensock.plugins.TransformAroundPointPlugin; 

TweenPlugin.activate([TransformAroundPointPlugin])

var rec:Sprite = new Sprite();
rec.graphics.beginFill(0x000000);
rec.graphics.drawRect(0,0,100,100);
rec.graphics.endFill();
rec.x = stage.stageWidth/2 - rec.width/2;
rec.y = stage.stageHeight/2 - rec.height/2;
addChild(rec);

var pt:Point = new Point(rec.x + rec.width, rec.y + rec.height);

TweenLite.to(rec, 1, {transformAroundPoint:{point:pt, scaleX:1.5, scaleY:1.5}})

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP