Flash图片滑动展示效果

看了 lulu studio和 cloudgramer 的图片展示效果，觉得用Flash做一个也应该不难，于是抽空动手写了一个，下面是效果：

程序原理：

在js中，可以用到left来改变图片的位置，在Flash中，当然是通过X坐标来进行改变了。开始的时候，将图片等分排列，代码如下：

public function arrange():void {
for (var i:uint = 0; i < numimage; i++ ) {
addChildAt(images[i], i);
images[i].setTargetX(stage.stageWidth / numimage * i);//设置图片的X坐标为
images[i].addEventListener(Event.ENTER_FRAME, onEnterFrame);
images[i].addEventListener(MouseEvent.MOUSE_OVER, onMouseMove);
}
}

这里要注意的地方就是深度问题，要想四张图片都看得见，图片的深度必须是从低到高，也就是从0至图片的个数-1。

当鼠标经过的时候，要重新布局

//重新排列图片的方位
private function reArrange(flag:uint):void {
//trace("图片长度为:" + images[0].width);
//trace("flag:"+flag)
//初始化第一张图片的地址
images[0].x = 0;
images[0].setTargetX(0);
for (var i:uint = 1; i < numimage; i++ ) {
var rate:Number = (i - flag) == 1 ?1:0;//判断是否碰到用户点击的那张图片
var averx:Number = (stage.stageWidth - images[0].width) / (numimage-1);//判断除第展开那张外，其它剩余每张所占距离
var mytargetX:Number = images[i - 1].getTargetX() + Math.abs(1 - rate) * averx + rate * images[0].width;//要将图片放置的x座标
images[i].setTargetX(mytargetX);//设置目标X坐标
images[i].addEventListener(Event.ENTER_FRAME, onEnterFrame);//移动到目标地址
//trace("rate:" + rate + "  averx:" + averx + "第" + (i + 1) + "张图片x:" + mytargetX);
}

}

布局的时候分为鼠标经过图片之前与之后两个部分。

不是鼠标经过部分的长度为(stage.width-图片长度)/(图片个数-1)。第一张图片的x座标肯定为0，以后根据前一张的x座标来算出自己的座标。如鼠标经过第三张，那个第二张的x座标为第一张的x座标+(stage.width-图片长度)/(图片个数-1)，第三张的x座标的为第二张的x座标+图片长度。

滑动部分是用缓动来进行的。

所谓的缓动就是物体向目标距离移动，刚开始运行速度快，后来运行速度慢。代码比较简单：

//移动到目标地址
private function onEnterFrame(event:Event):void {
var targetX:Number = event.target.getTargetX();
//trace("从" + event.target.x + "移动第"+event.target.place+"张图片到"+ targetX);
event.target.x += (targetX - event.target.x) * easing;
if (Math.abs(event.target.x-targetX)<1) {
//trace("第"+event.target.place+"已经移到")
event.target.x = targetX;
event.target.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
}

简单的来说就是让sprite.x不断的加上(targetX-sprite.x)*缓动系数。以下是缓动的过程。



文本的内容没弄，跟文本向上移的过程也可以使用缓过效果来实现。大家自由发挥。

程序代码：

package
{
import flash.display.Bitmap;
import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.events.ProgressEvent;
import flash.text.TextField;

/**
* ...
* @author xiaoruoen
*/
[SWF(width=800,height=177,backgroundColor=0x000000)]
public class Main extends Sprite
{
private var url_array:Array = ["http://images.cnblogs.com/cnblogs_com/xiaoruoen/316223/r_1.jpg", "http://images.cnblogs.com/cnblogs_com/xiaoruoen/316223/r_2.jpg", "http://images.cnblogs.com/cnblogs_com/xiaoruoen/316223/r_3.jpg", "http://images.cnblogs.com/cnblogs_com/xiaoruoen/316223/r_5.jpg"];//图片地址
//private var url_array:Array = ["E:/FlashEx/Slide/Slide/src/image/1.jpg", "E:/FlashEx/Slide/Slide/src/image/2.jpg", "E:/FlashEx/Slide/Slide/src/image/3.jpg", "E:/FlashEx/Slide/Slide/src/image/4.jpg"];//图片的地址
private var load_info:TextField = new TextField();//图片加载进度条
private var numimage:Number = 4;//图片的个数
private var images:Array = new Array();//放置图片的数组
private var count:Number = 0;//已经加载完成的图片个数
private var easing:Number = .3;//缓动系数
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
var loader:Loader = new Loader();
loader.load(new URLRequest(url_array[count] as String));//加载图片
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
addChild(load_info);
load_info.x = stage.stageWidth / 2;
load_info.y = stage.stageHeight / 2;
}

private function onProgress(event:ProgressEvent):void {
var percent:Number = Math.round(event.bytesLoaded / event.bytesTotal * 10000) / 100;
load_info.text = percent.toString();
}

private function onComplete(event:Event):void {
removeChild(load_info);
var image:Bitmap = Bitmap(event.target.content);
image.scaleX = image.scaleY = .5;

var imageContainer:ImageContainer = new ImageContainer();
imageContainer.addChild(image);//用Sprite封装DisplayObject,让其可以例用鼠标事件
images.push(imageContainer);
count++;
if(count == numimage){//判断图片是否全部加载完成
arrange();//如果加载完成则进行排列
}else {
init();//没有加载完成则继续加载
}
stage.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);//鼠标离开时初始化图片
}

private function onMouseOut(event:MouseEvent):void {
arrange();
}

//初始化排列
public function arrange():void {
for (var i:uint = 0; i < numimage; i++ ) {
addChildAt(images[i], i);
images[i].setTargetX(stage.stageWidth / numimage * i);//设置图片的X坐标为
images[i].addEventListener(Event.ENTER_FRAME, onEnterFrame);
images[i].addEventListener(MouseEvent.MOUSE_OVER, onMouseMove);
}
}
private function onMouseMove(event:MouseEvent):void {
reArrange(getChildIndex(event.target as Sprite));

}

//重新排列图片的方位
private function reArrange(flag:uint):void {
//trace("图片长度为:" + images[0].width);
//trace("flag:"+flag)
//初始化第一张图片的地址
images[0].x = 0;
images[0].setTargetX(0);
for (var i:uint = 1; i < numimage; i++ ) {
var rate:Number = (i - flag) == 1 ?1:0;//判断是否碰到用户点击的那张图片
var averx:Number = (stage.stageWidth - images[0].width) / (numimage-1);//判断除第展开那张外，其它剩余每张所占距离
var mytargetX:Number = images[i - 1].getTargetX() + Math.abs(1 - rate) * averx + rate * images[0].width;//要将图片放置的x座标
images[i].setTargetX(mytargetX);//设置目标X坐标
images[i].addEventListener(Event.ENTER_FRAME, onEnterFrame);//移动到目标地址
//trace("rate:" + rate + "  averx:" + averx + "第" + (i + 1) + "张图片x:" + mytargetX);
}

}
//移动到目标地址
private function onEnterFrame(event:Event):void {
var targetX:Number = event.target.getTargetX();
//trace("从" + event.target.x + "移动第"+event.target.place+"张图片到"+ targetX);
event.target.x += (targetX - event.target.x) * easing;
if (Math.abs(event.target.x-targetX)<1) {
//trace("第"+event.target.place+"已经移到")
event.target.x = targetX;
event.target.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
}
}

}

　　

源代码下载

个人博客地址:http://www.heymemory.com/blog/7/