使用TweenLite與TimelineLite改變MovieClip的亮度以及大小

First, go to http://www.greensock.com/tweenlite/ 

and download the library package for AS3. Then unpack the archive into your directory.

I created a new folder: TimelineLite-Trial, and unzip the file there. Then create a .fla file in Flash CS5.5, and create a Actionscript3.0 class file: Main.as, and apply it as .fla's document class.

Open the Main.as, and dump the lines:

package  {
	
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.display.BlendMode;
	import flash.events.Event;
	import flash.display.Loader;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
		
	import com.greensock.*;
	import com.greensock.data.TweenLiteVars;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.ColorTransformPlugin;

	public class Main extends MovieClip
	{
		private const FRAME_URL:String = "icon glasses_4.png";
		private const ICON_URL:String = "icon_4-normal.png";
		
		private var _frame:Loader;
		private var _icon:Loader;
		
		private var _frameContainer:Sprite;
		private var _iconContainer:Sprite;
		
		private var _container:MovieClip = new MovieClip();
		
		private var _timelineIcon:TimelineLite;
		private var _timelineFrame:TimelineLite;
		private var _timelineIconBright:TimelineLite;
		
		public function Main() 
		{
			this.addEventListener(Event.ADDED_TO_STAGE, this.addedToStage);
			TweenPlugin.activate([ColorTransformPlugin]);
		}
		
		private function addedToStage($e:Event):void
		{
			this._frame = new Loader();
			var $req:URLRequest = new URLRequest(this.FRAME_URL);
			this._frame.contentLoaderInfo.addEventListener(Event.COMPLETE, this.onFrameLoaded);
			this._frame.load($req);
		}
		
		private function onFrameLoaded($e:Event):void
		{
			this._frame.blendMode = BlendMode.SCREEN;
			
			this._frameContainer = new Sprite();
			this._frame.x = - this._frame.width / 2;
			this._frame.y = - this._frame.height / 2;
			this._frameContainer.addChild(this._frame);
			
			this._frameContainer.x = this._frame.width / 2;
			this._frameContainer.y = this._frame.height / 2;
			this._container.addChild(this._frameContainer);
			
			this._icon = new Loader();
			var $req:URLRequest = new URLRequest(this.ICON_URL);
			this._icon.contentLoaderInfo.addEventListener(Event.COMPLETE, this.onIconLoaded);
			this._icon.load($req);
		}
		
		private function onIconLoaded($e:Event):void
		{
			this._iconContainer = new Sprite();
			this._icon.x = - this._icon.width / 2;
			this._icon.y = - this._icon.height / 2;
			this._iconContainer.addChild(this._icon);
			
			this._iconContainer.x = this._icon.width / 2;
			this._iconContainer.y = this._icon.height / 2;
			this._container.addChild(this._iconContainer);
			
			this._frameContainer.scaleX = 0.1;
			this._frameContainer.scaleY = 0.1;
			this._frameContainer.alpha = 0;
			
			this._timelineIcon = new TimelineLite({onComplete:this.animationPlayed});
			
			
			this._timelineIcon.append(
									  	new TweenLite(
													  	this._iconContainer,
													  	0.2,
													  	{scaleX:1.5, scaleY:1.5}
													  )
									  
									  );
			this._timelineIcon.append(
									  	new TweenLite(
													  	this._iconContainer,
													  	0.2,
													  	{scaleX:0.75, scaleY:0.75}
													  )
									  
									  );
			this._timelineIcon.append(
									  	new TweenLite(
													  	this._iconContainer,
													  	0.1,
													  	{scaleX:1, scaleY:1}
													  )
									  
									  );
			
			this._timelineIconBright = new TimelineLite();
			this._timelineIconBright.append(
									  	new TweenLite(
													  	this._iconContainer,
													  	0.5,
													  	new TweenLiteVars().colorTransform(0xEEEEEE)
													  )
									  
									  );
			
			this._timelineFrame = new TimelineLite();
			this._timelineFrame.append(
									  	new TweenLite(
													  	this._frameContainer,
													  	0.5,
													  	{scaleX:1, scaleY:1, alpha: 1}
													  )
									  
									  );
									  
			this._timelineIcon.insert(this._timelineIconBright);						  
			this._timelineIcon.insert(this._timelineFrame);
			
			this._timelineIcon.gotoAndStop(0);
			
			this._container.x = 120;
			this._container.y = 150;
			this._container.mouseChildren = false;
			this._container.addEventListener(MouseEvent.MOUSE_DOWN, this.onTouched);
			
			this.addChild(this._container);
			
			playBtn.addEventListener(MouseEvent.MOUSE_DOWN, this.onButtonTouched);
			
		}
		
		
		private function onTouched($e:MouseEvent):void
		{
			playNavAnimation();
		}
		
		private function playNavAnimation():void
		{
			this._timelineIcon.restart();
		}
		
		
		private function animationPlayed():void
		{
			trace("animation played");
		}
		
		private function onButtonTouched($e:MouseEvent):void
		{
			this._timelineIcon.reverse();
		}
		
	}
	
}

Some points to highlight:

1. 'TimelineLite' accepts 'TweenLite' as its child, you can use function 'append()' to append a new 'TweenLite' object to the current Tween object list, which will play the tweens sequentially.

2. You also can insert a 'TweenLite' object by specifying which position of the whole timeline to place your 'TweenLite' object, which will play the different tweens simultaneously. In this case, you should use 'insert()'.

3. 'TimelineLite' even accept TimelineLite as children, so you can nest different complex tweens.

4.  'play()', 'restart()', 'gotoAndStop()' and 'reverse()' should be mostly used to control the tween animation.

5. If you want to change some properties that shipped with 'ColorTransform', you must active that plugin firstly. 

6. For my case, passing {tint: 0xFFFFFF} to TweenLite constructor didn't work, only new TweenLiteVars().colorTransform(0xEEEEEE) worked.