Flash/Flex学习笔记(52):使用TweenLite

简介: TweenLite是第三方出品的专用于各种缓动动画的类库,其性能据说已经超过了Adobe官方的Tween. 从网上找到了一篇中文的说明文档:http://files.cnblogs.com/yjmyzz/tweenLite%e4%b8%ad%e6%96%87%e6%89%8b%e5%86%8c%e4%b8%8e%e5%8f%82%e6%95%b0%e8%af%b4%e6%98%8e.

TweenLite是第三方出品的专用于各种缓动动画的类库,其性能据说已经超过了Adobe官方的Tween.

从网上找到了一篇中文的说明文档:http://files.cnblogs.com/yjmyzz/tweenLite%e4%b8%ad%e6%96%87%e6%89%8b%e5%86%8c%e4%b8%8e%e5%8f%82%e6%95%b0%e8%af%b4%e6%98%8e.pdf

这是官方的测试示例:

AS3类库下载: http://files.cnblogs.com/yjmyzz/greensock-tweening-platform-v10-as3.zip

用Silverlight的朋友们也不要流口水:因为Silverlight也有相应的tween类库了,详见 http://www.cnblogs.com/nasa/archive/2008/09/11/1288782.html (只不过功能相对Flash而言还有点弱)

 

下面是一个基本的使用示例:

import flash.events.MouseEvent;
import gs.*;
import gs.easing.*;

btnStart.addEventListener(MouseEvent.MOUSE_DOWN,btnStartMouseDownHandler);
btnStop.addEventListener(MouseEvent.MOUSE_DOWN,btnStopMouseDownHandler);

function btnStartMouseDownHandler(e:MouseEvent):void {
	tweenStart(0);
}

function btnStopMouseDownHandler(e:MouseEvent):void {
	TweenLite.killTweensOf(mc);
}

function tweenStart(d:uint=1):void {
	TweenLite.to(mc, 0.75, {autoAlpha:0.1, scaleX:0.02,scaleY:0.02, ease:Bounce.easeInOut, delay:d, onComplete:tweenEnd});
}

function tweenEnd():void {
	TweenLite.to(mc, 0.75, {autoAlpha:1,scaleX:1,scaleY:1,ease:Back.easeInOut, delay:1, onComplete:tweenStart});
}

下面这种图片轮换广告,以前曾经用Silverlight实现过(见:Silverlight之ListBox/Style学习笔记--ListBox版的图片轮换广告),今天用TweenLite也来弄一个:

import flash.text.TextFieldAutoSize;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.ui.Mouse;
import flash.ui.MouseCursor;
import gs.*;
import gs.easing.*;
import flash.events.MouseEvent;

var imgNums:uint;
var arrImg:Array;
var arrBitMap:Array;
var arrTxtMC:Array;
var _loader:Loader;//装载
var _rate:TextField;//进度显示
var _index:uint = 0;
var _container:Sprite;
var _isLeft:Boolean;


//初始化
function init() {
	imgNums = 4;
	arrBitMap = new Array(imgNums);
	arrTxtMC = new Array(arrTxtMC);
	arrImg = ["http://images.24city.com/jimmy/ListBoxSlideShow/img/001.jpg",
	  "http://images.24city.com/jimmy/ListBoxSlideShow/img/002.jpg",
	  "http://images.24city.com/jimmy/ListBoxSlideShow/img/003.jpg",
	  "http://images.24city.com/jimmy/ListBoxSlideShow/img/004.jpg"];
	_loader = new Loader();
	_rate = new TextField();
	_container = new Sprite();
	_isLeft = true;

	_rate.text = '';
	_rate.autoSize = TextFieldAutoSize.CENTER;
	_rate.textColor = 0x000000;
	_rate.x = (stage.stageWidth - _rate.width)/2;
	_rate.y = loadMC.y + 15;
	this.addChild(_rate);
	sendRequest(arrImg[_index]);

	Mouse.cursor = MouseCursor.BUTTON;

}

//发送请求
function sendRequest(p_url:String) {
	var m_request = new URLRequest(p_url);
	_loader.load(m_request);
	_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
	_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
}


//事件,下载中;
function onProgress(e:Event) {
	var m_info:LoaderInfo = e.target as LoaderInfo;
	var m_percent:uint = (m_info.bytesLoaded/m_info.bytesTotal)*100;
	_rate.text = m_percent.toString() + " %," + (_index+1) + " / " + imgNums;
}

//事件,下载完毕;
function onComplete(e:Event) {
	var _imageData:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true,0xFFFFFFFF);
	_imageData.draw(_loader, new Matrix(stage.stageWidth/_loader.width, 0, 0, stage.stageHeight/_loader.height, 0, 0));
	var m_image:Bitmap = new Bitmap(_imageData);
	arrBitMap[_index] = m_image;
	var txtMc:TextMC = new TextMC();
	txtMc.txt.text = (_index+1).toString();
	arrTxtMC[_index] = txtMc;
	_index++;
	if (_index > imgNums - 1) {
		this.removeChild(_rate);
		this.removeChild(loadMC);
		//trace("全部加载完成!");
		loadContainer();
	}
	else {
		sendRequest(arrImg[_index]);
	}
}

//加载最外层容器
function loadContainer():void {
	for (var i:int=0; i<imgNums; i++) {
		var img:Bitmap = arrBitMap[i];
		_container.addChild(img);
		img.y = 0;
		img.x = img.width * i;


	}
	addChild(_container);

	for (i=imgNums-1; i>=0; i--) {
		var txt:TextMC = arrTxtMC[i];
		txt.y = stage.stageHeight - txt.height + 5;
		txt.x = stage.stageWidth + 10 - (txt.width+5)*(imgNums-i);
		addChild(txt);
		txt.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
	}
	_index = 0;
	tweenStart();//启动动画
	setCurrentTxt();

	_container.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);
	_container.addEventListener(MouseEvent.ROLL_OVER,RollOverHandler);

}

function tweenStart(d:uint=1):void {
	TweenLite.to(_container,0.2,{x:-stage.stageWidth*_index,delay:d,onComplete:tweenEnd});
	setCurrentTxt();
}

function tweenEnd():void {
	if (_isLeft) {
		_index++;
	}
	else {
		_index--;
	}
	TweenLite.to(_container,0.2,{x:-stage.stageWidth*_index,delay:1,onComplete:tweenStart});

	if (_index >= 3) {
		_isLeft = false;
	}
	else if (_index<=0) {
		_isLeft = true;
	}
}

//设置当前高亮文本按钮索引
function setCurrentTxt():void {
	//trace(_index);
	for (var i:uint=0; i<imgNums; i++) {
		if (i == _index) {
			arrTxtMC[i].gotoAndStop(2);
		}
		else {
			arrTxtMC[i].gotoAndStop(1);
		}
	}
}

function MouseDownHandler(e:MouseEvent):void {	
	var _temp:int = parseInt((e.currentTarget as TextMC).txt.text,10)-1;	
	if (_temp==0){
		_isLeft = true;
	}
	if (_temp==imgNums-1){
		_isLeft = false;
	}
	_index = _temp;
	tweenStart(0);
}

function MouseOutHandler(e:MouseEvent):void {
	tweenStart();
}

//停止动画;
function RollOverHandler(e:MouseEvent):void {
	TweenLite.killTweensOf(_container);	
}



init();

 源文件下载:http://cid-2959920b8267aaca.skydrive.live.com/self.aspx/Flash/TweenLiteDemo.rar

目录
相关文章
|
内存技术 分布式计算 Spark
flash/flex 之 自定义MXML组件
1. 新建 mxml组件 代码如下                         [Bindable]            private var textstr:String = "字符串按钮";            public function set BTNtext(par_...
991 0
|
内存技术
Flash/Flex学习笔记(57):实用技巧
布朗运动: varnumDots:uint=50; varfriction:Number=0.9; vardots:Array; varlife:uint=0; functioninit(){ graphics.
769 0
Flash/Flex学习笔记(54):迷你滚动条ScrollBar
先看最终效果: 整个swf最终不到4k,如果用系统的组件List来做的话,最终尺寸会接近30k ! (当然,核心代码是从网上收集到的:))   大致原理: 把要显示的对象上面加一层遮罩,然后根据滚动条的位置,上下移动显示对象。
950 0
|
内存技术
Flash/Flex学习笔记(56):矩阵变换
先回顾一下Silvelright中的矩阵变换[转]WPF中的MatrixTransform,简单点讲:矩阵变换能改变对象的x,y坐标,x或y方向上的缩放,以及对象在x,y轴上的旋转(扭曲变形) 上面这个是WPF/Silverlight中的3*3变换矩阵,其中X,Y用于改变对象的坐标;M11,M22用于对象在x,y轴上的缩放;而M12,M21用于y轴,x轴上的扭曲。
862 0
|
内存技术
Flash/Flex学习笔记(48):反向运动学(下)
先要复习一下三角函数与余弦定理: 对于直角三角形,三边长a,b,c与三个角A,B,C的关系如下: 正弦函数: 余弦函数: 正切函数: 反正切函数:(好象现在的教科书里改叫“余切”函数)   或 勾股定律:   但对于不是直角的三角形,就必须用余弦定律来处理了...
939 0
|
内存技术
Flash/Flex学习笔记(47):反向运动学(上)
先回顾上篇所说的"正向运动学":以人行走的例子来说,基本上可以理解为大腿驱动小腿,小腿驱动脚,从而引发的一系列姿态调整和运动。再举一个例子,我们用着拿一根软鞭或链条的一端挥舞,被手挥舞的这一端会把"能量"向另一端传递(即固定端驱动紧接的部分,而紧接的部分又驱动下一段紧接的部分),从而使整个系统也随之运动.
724 0
|
Java 索引 内存技术
Flash/Flex学习笔记(49):3D基础
之前我们所做的动画都是基于x,y二维坐标轴的,在三维动画中我们还需要增加一个垂直于屏幕“向里”或“向外”的Z轴,那么z轴到底是应该向外,还是向里呢?这个其实无所谓,不过为了统一,习惯上通常把z轴约定为向里,即所谓的“右手坐标系” 右手坐标系的得名:伸出右手,让食指、中指、大拇指相互垂直;然后 食指指向x轴正向,中指指向y轴正向,则大拇指所指方向即为z轴正向。
837 0
|
Java 内存技术 Spring
Flash/Flex学习笔记(44):万有引力与粒子系统
万有引用公式: 其中G为万有引力常数   var numParticles:uint=50;//粒子总数 var G:Number=0.03;//万有引力常数 var particles:Array=new Array(numParticles); var bounce:Number=-0.
814 0
|
Java Spring 内存技术
Flash/Flex学习笔记(41):碰撞检测
碰撞检测基本上可能分为二类:对象与对象的碰撞检测、对象与点的碰撞检测 为了方便测试,先写一个box类(生成一个小矩形) package { import flash.display.Sprite; public class Box extends Sprite { ...
866 0
|
内存技术 数据格式 XML
Flash/Flex学习笔记(37):不用系统组件(纯AS3)的视频播放器--只有8.82K
以前为了赶项目,利用系统组件制作过一款视频播放器(见Flash/Flex学习笔记(6):制作基于xml数据源的flv视频播放器),但是系统组件实在是太大了,最终生成的swf居然有103K,随着AS3的深入学习,昨天又弄了一个只用AS3的播放器,最终只有8.82K,呵呵,这肥减得那是相当厉害。
1226 0