专栏首页菩提树下的杨过Flash/Flex学习笔记(52):使用TweenLite

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.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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • “AS3.0高级动画编程”学习:第二章转向行为(上)

    因为这一章的内容基本上都是涉及向量的,先来一个2D向量类:Vector2D.as (再次强烈建议不熟悉向量运算的童鞋,先回去恶补一下高等数学-07章空间解释几何...

    菩提树下的杨过
  • Flash/Flex学习笔记(51):3维旋转与透视变换(PerspectiveProjection)

    Flash/Flex学习笔记(49):3D基础 里已经介绍了3D透视的基本原理,不过如果每次都要利用象该文中那样写一堆代码,估计很多人不喜欢,事实上AS3的Di...

    菩提树下的杨过
  • 单例模式(singleton)之“世上安得双全法”

    单例模式作为设计模式的入门模式,网上有各种写法,有点象孔乙己“茴”字的四种写法,都研究烂了,还能玩出啥新意?稍安勿躁,先来回顾一下:

    菩提树下的杨过
  • 八、通过断点调试观察JS执行过程

    利用chrome开发者工具中的断点调试,我们能够一步步观察JavaScript的执行过程,直观感知函数调用栈、作用域链、变量对象、闭包、this等关键信息的变化...

    用户6901603
  • 探究{ a = 1; function a(){} }和{ function b(){}; b = 1 }

    相信大部分人都了解了,这里再重复啰嗦一下。js是解析执行的,变量提升是js中执行上下文的工作方式。变量声明和函数声明在编译阶段会被提前。

    lhyt
  • mui 百度语音识别转换文字

      用mui混合开发的APP,现有一个功能需求就是语音转换成文字,并把语音进行保存。对此考虑两种选择讯飞和百度。最终选择了百度语音。

    kmonkey
  • 我理解的JavaScript预编译

    JavaScript执行过程首先先语法分析,就是分析一遍代码有没有语法错误,解析期间不会执行代码。接着就开始预编译,预编译完了就开始一行一行执行代码。

    wade
  • 执行上下文

    解析: a)先填充参数,x:undefined;y:undefined;z:undefined; b)函数申明,在vo对象里有了function fn(){};...

    天天_哥
  • 零基础入门系列之基础语法与控制结构

    我只讲上手编程需要哪些最基本的东西,有很多东西省略了,建议去看毕向东视频或者看书。

    乔戈里
  • 从Generator到Async function

    为什么说Async function是从Promise,Generator一路走来的?

    ayqy贾杰

扫码关注云+社区

领取腾讯云代金券