前段时间做的小项目中，用到了Flex，自己做了一个小的图片浏览器，带预览功能，还有特效。由于特效在使用时，可能会由于点击过快而出现错误，因此代码被注释掉，有兴趣的朋友可以自己试试。代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="830" height="607"
backgroundColor="#000000" xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import com.teamsun.sesd.basis.AboutSesd;
import com.doc.view.docmanager.Constant;
import mx.rpc.soap.LoadEvent;
import mx.collections.ArrayCollection;
import com.doc.view.docmanager.player.helper.PlayItem;
import com.doc.view.docmanager.player.helper.PlayList;
import mx.events.FlexEvent;
import mx.events.MetadataEvent;
import mx.events.SliderEvent;
import mx.core.UIComponent;
import mx.controls.Alert;
import mx.utils.StringUtil;
import mx.controls.SWFLoader;
/*左侧播放区的变量定义*/
//定时器
private var timer:Timer;
//自动播放的延迟
private var _delay:uint = 1000; //默认5秒
//特效数量
private var effectNum:uint = 18;
//加载图像时的索引
private var loadIndex:uint = 1;
//加载预览图时的索引
private var loadPreviewIndex:uint = 1;
//播放列表
private var _playList:PlayList;
//当前播放的索引
private var _currentIndex:int = 0;
//是否在暂停状态
private var _isPause:Boolean = false;
//是否已经播放结束
private var isOver:Boolean = false;
/*图标定义*/
//播放
[Embed(source="assets/player/play.jpg")]
[Bindable]
private var playImage:Class;
[Embed(source="assets/player/play_over.jpg")]
[Bindable]
private var playOverImage:Class;
//暂停
[Embed(source="assets/player/pause.jpg")]
[Bindable]
private var pauseImage:Class;
[Embed(source="assets/player/pause_over.jpg")]
[Bindable]
private var pauseOverImage:Class;
//上一个
[Embed(source="assets/player/previous.jpg")]
[Bindable]
private var previousImage:Class;
[Embed(source="assets/player/previous_over.jpg")]
[Bindable]
private var previousOverImage:Class;
//下一个
[Embed(source="assets/player/next.jpg")]
[Bindable]
private var nextImage:Class;
[Embed(source="assets/player/next_over.jpg")]
[Bindable]
private var nextOverImage:Class;
/*左侧播放区的变量定义*/
/*右侧预览区的变量定义*/
//图片总数
private var imageCount:int;
//第一张图片的 x 坐标位置
private const firstX:int = 30;
//预览图的大小
private const previewWidth:int = 120;
private const previewHeight:int = 90;
//预览图之间的间隔
private const previewPadding:int = 18;
//预览图的数量
private const previewCount:int = 5;
//当前预览区所显示的最上面一副图片的索引
private var topIndex:int = 0;
//当前不需要移动预览区的索引差
private var minIndex:int = 0;
//上箭头
[Embed(source="assets/player/up.png")]
[Bindable]
private var upImage:Class;
[Embed(source="assets/player/down.png")]
[Bindable]
private var downImage:Class;
/*右侧预览区的变量定义*/
private function set isPause(state:Boolean):void
{
this._isPause = state;
setPreviewButtonStatus(state);
}
private function get isPause():Boolean
{
return this._isPause;
}
//停止播放
private function stop():void
{
if(timer.running) timer.stop();
this.isPause = true;
changeImage1(null);
}
//重置定时器
private function resetTimer():void{
if(timer.running) timer.stop();
timer = new Timer(_delay, 5);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
timer.start();
changeImage1(null);
showHint((this._currentIndex + 1) + "/" + this.imageCount);
}
//定时器触发的操作，播放下一张图片
private function onTimerComplete(event:TimerEvent):void{
next(null);
}
//生成随机数
private function randNum():uint{
return Math.floor(Math.random() * effectNum);
}
//切换图片
private function change(fromIndex:uint, toIndex:uint):void{
// var box_prve:Canvas = vs.getChildAt(fromIndex) as Canvas;
// var box_next:Canvas = vs.getChildAt(toIndex) as Canvas;
// var randN:uint = randNum();
// switch(randN){
// case 1:
// box_prve.setStyle("hideEffect", effect1);
// box_next.setStyle("showEffect", effect1);
// break;
// case 2:
// box_prve.setStyle("hideEffect",effect2);
// box_next.setStyle("showEffect",effect2);
// break;
// case 3:
// box_prve.setStyle("hideEffect",effect3);
// box_next.setStyle("showEffect",effect3);
// break;
// case 4:
// box_prve.setStyle("hideEffect",effect4);
// box_next.setStyle("showEffect",effect4);
// break;
// case 5:
// box_prve.setStyle("hideEffect",effect5);
// box_next.setStyle("showEffect",effect5);
// break;
// case 6:
// box_prve.setStyle("hideEffect",effect6);
// box_next.setStyle("showEffect",effect6);
// break;
// case 7:
// box_prve.setStyle("hideEffect",effect7);
// box_next.setStyle("showEffect",effect7);
// break;
// case 8:
// box_prve.setStyle("hideEffect",effect8);
// box_next.setStyle("showEffect",effect8);
// break;
// case 9:
// box_prve.setStyle("hideEffect",effect9);
// box_next.setStyle("showEffect",effect9);
// break;
// case 10:
// box_prve.setStyle("hideEffect",effect10);
// box_next.setStyle("showEffect",effect10);
// break;
// case 11:
// box_prve.setStyle("hideEffect",effect11);
// box_next.setStyle("showEffect",effect11);
// break;
// case 12:
// box_prve.setStyle("hideEffect",effect12);
// box_next.setStyle("showEffect",effect12);
// break;
// case 13:
// box_prve.setStyle("hideEffect",effect13);
// box_next.setStyle("showEffect",effect13);
// case 14:
// box_prve.setStyle("hideEffect",effect14);
// box_next.setStyle("showEffect",effect14);
// break;
// case 15:
// box_prve.setStyle("hideEffect",effect15);
// box_next.setStyle("showEffect",effect15);
// break;
// case 16:
// box_prve.setStyle("hideEffect",effect16);
// box_next.setStyle("showEffect",effect16);
// break;
// case 17:
// box_prve.setStyle("hideEffect",effect17);
// box_next.setStyle("showEffect",effect17);
// default:
// box_prve.setStyle("hideEffect",effect0);
// box_next.setStyle("showEffect",effect0);
// }
//更换图片的边框样式
var fromBox:Canvas = getPreviewCanvas(fromIndex);
fromBox.setStyle("borderStyle", "none");
fromBox.validateNow();
var toBox:Canvas = getPreviewCanvas(toIndex);
toBox.setStyle("borderStyle", "solid");
toBox.validateNow();
movePreviewBoxTo(toIndex);
vs.selectedIndex = toIndex;
if(!isPause)
{
resetTimer();
}
}
private function getPreviewCanvas(index:int):Canvas
{
var box:Canvas = this.previewBox.getChildAt(index) as Canvas;
return box;
}
// 设置图片集
public function set playList(playList:PlayList):void{
System.useCodePage=true;
timer = new Timer(_delay, 5);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
this._playList = playList;
this.imageCount = this._playList.size();
this.recalcPreviewSize();
loadImage();
}
/*根据图片的数量来计算预览区的大小*/
private function recalcPreviewSize():void
{
this.previewBox.height = this.imageCount * this.previewHeight + (this.imageCount + 1) * this.previewPadding;
this.previewBox.y = 0;
}
/*根据图片的索引号，计算图片在 previewBox 内部的相对位置*/
private function getPreviewImageY(index:int):int
{
return index * (this.previewHeight + this.previewPadding);
}
//判断当前要播放的索引是否需要移动 previewBox
private function needMove(toIndex:int):Boolean
{
//当前的图片数量小于容器所能展示的数量，不需要移动
if(this.imageCount <= this.previewCount) return false;
//当前容器显示的是第一张图片
if(this.topIndex == 0)
{
if(toIndex > this.minIndex) return true;
else return false;
}
//当前容器已经移动到最底部
else if(this.topIndex == this.imageCount - this.previewCount)
{
if(toIndex < this.imageCount - this.minIndex) return true;
else return false;
}
//当前容器在中间，可以上移，也可以下移
else
{
if(toIndex - this.topIndex != this.minIndex) return true;
else return false;
}
}
//根据当前的播放索引，获得 previewBox 应处的位置
private function getPreviewBoxY(moveIndex:int):int
{
return moveIndex * (this.previewPadding + this.previewHeight);
}
private function movePreviewBoxTo(toIndex:int):void
{
if(!needMove(toIndex)) return;
var moveIndex:int = toIndex - this.minIndex;
if(moveIndex < 0) moveIndex = 0;
if(moveIndex > this.imageCount - this.previewCount) moveIndex = this.imageCount - this.previewCount;
movePreviewBox(moveIndex);
}
//根据索引，移动 previewBox
private function movePreviewBox(moveIndex:int):void
{
var y:int = -1 * getPreviewBoxY(moveIndex);
this.moveCtrl.xTo = 0;
this.moveCtrl.yTo = y;
this.moveCtrl.target = this.previewBox;
this.moveCtrl.play();
this.topIndex = moveIndex;
}
//将预览区向上移动一格
private function movePreviewBoxUp():void
{
if(this.topIndex > 0)
{
movePreviewBox(this.topIndex - 1);
}
}
//将预览区向下移动一格
private function movePreviewBoxDown():void
{
if(this.topIndex < this.imageCount - this.previewCount)
{
movePreviewBox(this.topIndex + 1);
}
}
/*加载图片*/
private function loadImage():void
{
if(loadPreviewIndex > this._playList.size())
{
//隐藏进度条
this.isPause = false;
loadBar.visible = false;
vs.visible = true;
previewBox.visible = true;
previewOuterBox.visible = true;
vs.selectedIndex = 0;
getPreviewCanvas(0).setStyle("borderStyle", "solid");
getPreviewCanvas(0).validateNow();
//计算不需要移动预览区的索引差
this.minIndex = Math.floor(this.previewCount / 2);
//开始播放
this.speedSlider.enabled = true;
this.playPauseBtn.enabled = true;
this.previousBtn.enabled = true;
this.nextBtn.enabled = true;
this.playPauseBtn.addEventListener(MouseEvent.CLICK, playPause);
this.playPauseBtn.addEventListener(MouseEvent.MOUSE_OVER, changeOverImage1);
this.playPauseBtn.addEventListener(MouseEvent.MOUSE_OUT, changeImage1);
this.previousBtn.addEventListener(MouseEvent.CLICK, previous);
this.previousBtn.addEventListener(MouseEvent.MOUSE_OVER, changeOverImage2);
this.previousBtn.addEventListener(MouseEvent.MOUSE_OUT, changeImage2);
this.nextBtn.addEventListener(MouseEvent.CLICK, next);
this.nextBtn.addEventListener(MouseEvent.MOUSE_OVER, changeOverImage3);
this.nextBtn.addEventListener(MouseEvent.MOUSE_OUT, changeImage3);
showHint((this._currentIndex + 1) + "/" + this.imageCount);
resetTimer();
}
else if(loadIndex > this._playList.size()){
var preImage:SWFLoader = new SWFLoader();
preImage.buttonMode = true;
preImage.useHandCursor = true;
preImage.addEventListener(ProgressEvent.PROGRESS, onLoadingPreview);
preImage.addEventListener(Event.COMPLETE, onLoadedPreview);
preImage.load(_playList.getItem(loadPreviewIndex - 1).preview);
}
else
{
var image:SWFLoader = new SWFLoader();
image.buttonMode = true;
image.useHandCursor = true;
image.addEventListener(MouseEvent.CLICK, onClick);
image.addEventListener(ProgressEvent.PROGRESS, onLoadingImage);
image.addEventListener(Event.COMPLETE, onLoadedImage);
image.load(_playList.getItem(loadIndex - 1).url);
}
}
private function onLoadingPreview(event:ProgressEvent):void{
var numPerc:Number = Math.round((Number(event.bytesLoaded) / Number(event.bytesTotal)) * 100);
if(numPerc > 99) numPerc = 99;
loadBar.setProgress(numPerc, 100);
loadBar.label ="正在载入第" + loadPreviewIndex + "张预览图 " + numPerc + "%";
loadBar.validateNow();
}
//加载完预览图
private function onLoadedPreview(event:Event):void
{
//处理加载的图片
var tempImg:SWFLoader = event.target as SWFLoader;
var matrix:Matrix = tempImg.transform.matrix;
var scale:Number = 0;
var dx:Number;
var dy:Number;
if((tempImg.contentWidth / tempImg.contentHeight) <= (this.previewWidth)/(this.previewHeight))
{
scale = this.previewHeight / tempImg.contentHeight;
if(scale < Constant.MIN_SCALE) scale = Constant.MIN_SCALE;
dx = (this.previewWidth - tempImg.contentWidth * scale) / 2;//将图片水平居中
dy = 0;
}
else
{
scale = this.previewWidth / tempImg.contentWidth;
if(scale < Constant.MIN_SCALE) scale = Constant.MIN_SCALE;
dy = (this.previewHeight - tempImg.contentHeight * scale) / 2;//将图片垂直居中
dx = 0;
}
matrix.scale(scale, scale);
matrix.translate(dx, dy);
tempImg.transform.matrix = matrix;
tempImg.toolTip = this._playList.getItem(this.loadPreviewIndex - 1).name;
//新建一个编号容器
var labelBox:Canvas = new Canvas();
labelBox.width = 55;
labelBox.height = 20;
labelBox.alpha = 0.5;
labelBox.x = this.previewWidth - 55 - dx;
labelBox.y = this.previewHeight - 20 - dy;
labelBox.setStyle("backgroundColor", "0x333333");
//新建一个 Label
var label:Label = new Label();
label.width = 55;
label.height = 20;
label.x = 0;
label.y = 0;
label.setStyle("color", "0xFFFFFF");
label.setStyle("paddingTop", 2);
label.setStyle("textAlign", "center");
label.setStyle("fontWeight", "bold");
label.text = this.loadPreviewIndex + "/" + this.imageCount;
labelBox.addChild(label);
//新建一个容器, 将图片加到容器内
var box:Canvas = new Canvas();
box.width = this.previewWidth;
box.height = this.previewHeight;
box.horizontalScrollPolicy = "off";
box.verticalScrollPolicy = "off";
box.setStyle("backgroundColor", "0x000000");
box.addChild(tempImg);
box.addChild(labelBox);
box.x = this.firstX;
box.y = (this.loadPreviewIndex - 1) * this.previewHeight + this.loadPreviewIndex * this.previewPadding;
box.setStyle("borderColor", "0xFFFFFF");
box.setStyle("borderThickness", 2);
box.setStyle("borderStyle", "none");
box.addEventListener(MouseEvent.CLICK, onPreviewClick);
this.previewBox.addChild(box);
loadPreviewIndex ++;
loadImage();
}
private function onLoadingImage(event:ProgressEvent):void{
var numPerc:Number = Math.round((Number(event.bytesLoaded) / Number(event.bytesTotal)) * 100);
if(numPerc > 99) numPerc = 99;
loadBar.setProgress(numPerc, 100);
loadBar.label ="正在载入第" + loadIndex + "张图片 " + numPerc + "%";
loadBar.validateNow();
}
//加载完成某张图片，将图片加入到当前的画布中
private function onLoadedImage(event:Event):void
{
//处理加载的图片
var tempImg:SWFLoader = event.target as SWFLoader;
var matrix:Matrix = tempImg.transform.matrix;
var scale:Number = 0;
var dx:Number;
var dy:Number;
if((tempImg.contentWidth / tempImg.contentHeight) <= (this.imageBox.width)/(this.imageBox.height))
{
scale = this.imageBox.height / tempImg.contentHeight;
if(scale < Constant.MIN_SCALE) scale = Constant.MIN_SCALE;
dx = (this.imageBox.width - tempImg.contentWidth * scale) / 2;//将图片水平居中
dy = 0;
}
else
{
scale = this.imageBox.width / tempImg.contentWidth;
if(scale < Constant.MIN_SCALE) scale = Constant.MIN_SCALE;
dy = (this.imageBox.height - tempImg.contentHeight * scale) / 2;//将图片垂直居中
dx = 0;
}
matrix.scale(scale, scale);
matrix.translate(dx, dy);
tempImg.transform.matrix = matrix;
//新建一个容器, 将图片加到容器内
var box:Canvas = new Canvas();
box.width = this.imageBox.width;
box.height = this.imageBox.height;
box.horizontalScrollPolicy = "off";
box.verticalScrollPolicy = "off";
box.setStyle("backgroundColor", "0x000000");
box.addChild(tempImg);
box.x=4;
box.y=4;
//将容器加到viewStack中
vs.addChild(box);
//加载下一张
loadIndex ++;
loadImage();
}
//点击图片时播放下一张
private function onClick(event:MouseEvent):void{
next(null);
}
//点击预览图时
private function onPreviewClick(event:MouseEvent):void
{
var box:Canvas = event.currentTarget as Canvas;
var index:int = previewBox.getChildIndex(box);
setCurrentIndex(index);
}
//设置当前播放的索引
private function setCurrentIndex(index:int):void
{
if(!this._playList.validIndex(index))
{
if(index >= _playList.size())
{
this.isOver = true;
showHint("播放结束");
stop();
}
return;
}
var prveIndex:uint = this._currentIndex;
this._currentIndex = index;
change(prveIndex, this._currentIndex);
showHint((this._currentIndex + 1) + "/" + this.imageCount);
}
//播放上一个
public function previous(event:MouseEvent):void
{
setCurrentIndex(this._currentIndex - 1);
}
//播放下一个
public function next(event:MouseEvent):void
{
setCurrentIndex(this._currentIndex + 1);
}
//播放 or 暂停
private function playPause(event:MouseEvent):void{
if(isOver)
{
isOver = false;
isPause = false;
if(this._currentIndex == (this.imageCount - 1))
{
setCurrentIndex(0);
}
else
{
setCurrentIndex(this._currentIndex);
}
}
else
{
if(isPause){
this.isPause = false;
resetTimer();
}
else{
stop();
}
}
}
//设置预览区按钮状态
private function setPreviewButtonStatus(state:Boolean):void
{
this.previousPrev.enabled = state;
this.nextPrev.enabled = state;
}
/*鼠标进入图标时，改变图标*/
private function changeOverImage1(event:MouseEvent):void
{
if(isPause)
{
this.playPauseBtn.source = playOverImage;
}
else
{
this.playPauseBtn.source = pauseOverImage;
}
}
private function changeOverImage2(event:MouseEvent):void
{
this.previousBtn.source = previousOverImage;
}
private function changeOverImage3(event:MouseEvent):void
{
this.nextBtn.source = nextOverImage;
}
/*鼠标移出图标时，改变图标*/
private function changeImage1(event:MouseEvent):void
{
if(isPause)
{
this.playPauseBtn.source = playImage;
}
else
{
this.playPauseBtn.source = pauseImage;
}
}
private function changeImage2(event:MouseEvent):void
{
this.previousBtn.source = previousImage;
}
private function changeImage3(event:MouseEvent):void
{
this.nextBtn.source = nextImage;
}
//格式化速度的显示
private function formatSpeedSlideTooltip(value:Number):String
{
return value + "秒";
}
//拖拽滑块
private function thumbDragHandler():void
{
//停止播放
stop();
}
//放开滑块
private function thumbReleaseHandler():void
{
this._delay = this.speedSlider.value * 200;
next(null);
}
//显示信息
private function showHint(msg:String):void
{
this.hint.text = msg;
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%" x="0" y="0">
<mx:Canvas id="playArea" width="650" height="100%" x="-1" y="-1" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderColor="#FFFFFF" borderStyle="solid">
<mx:Canvas id="controlBar" width="100%" height="60" y="547" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="0" borderColor="#FFFFFF" borderStyle="solid" borderSides="top">
<mx:Image source="{previousImage}" id="previousBtn"
width="32" height="32" x="40" y="14" enabled="false"/>
<mx:Image source="{playImage}" id="playPauseBtn"
width="64" height="64" x="86" y="-3" enabled="false"/>
<mx:Image source="{nextImage}" id="nextBtn"
width="32" height="32" x="163" y="14" enabled="false"/>
<mx:Label x="391" y="22" text="播放速度" width="63" fontFamily="黑体" fontSize="13" color="#FFFFFF"/>
<mx:HSlider id="speedSlider" x="454" y="19" minimum="1" maximum="10" value="5" snapInterval="1"
dataTipFormatFunction="formatSpeedSlideTooltip" allowTrackClick="false"
thumbDrag="thumbDragHandler()" thumbRelease="thumbReleaseHandler()" enabled="false"/>
<mx:Label x="203" y="23" width="180" fontFamily="宋体" fontSize="12" color="#FFFFFF" textAlign="center" id="hint"/>
</mx:Canvas>
<mx:Canvas id="imageBox" width="100%" x="0" y="0" height="547"
horizontalScrollPolicy="off" verticalScrollPolicy="off" backgroundColor="#000000">
<mx:ProgressBar id="loadBar" width="70%" mode="manual" label="正在载入图片数据 0%" labelWidth="{loadBar.width}"
fontSize="12" color="0x9A9A9A" textAlign="center" x="87" y="255"/>
<mx:ViewStack id="vs" x="0" y="0" width="650" height="547" visible="false"/>
<!--<mx:Label x="214" y="248" text="正在加载数据..." width="198" id="loadHint" color="#FFFFFF" fontFamily="宋体" fontSize="12" textAlign="center"/>-->
</mx:Canvas>
</mx:Canvas>
<mx:Canvas width="180" height="100%" x="650" y="0" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:Button x="0" y="0" label="︽" width="180" height="23" id="previousPrev" click="movePreviewBoxUp()"/>
<mx:Canvas id="previewOuterBox" visible="false" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="180" height="558" y="24" x="0" backgroundColor="#000000">
<mx:Canvas id="previewBox" visible="false" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="180" height="558" y="0" x="0" backgroundColor="#000000">
</mx:Canvas>
</mx:Canvas>
<mx:Button x="0" y="583" label="︾" width="180" id="nextPrev" click="movePreviewBoxDown()"/>
</mx:Canvas>
</mx:Canvas>
<mx:Move id="moveCtrl" duration="500"/>
<!-- 特效
<viewStackEffects:Fade id="effect1"/>
<viewStackEffects:Slide id="effect0"/>
<viewStackEffects:Slide id="effect14" direction="down"/>
<viewStackEffects:FlipPapervision3D id="effect2" direction="left"/>
<viewStackEffects:FlipPapervision3D id="effect15" direction="right"/>
<viewStackEffects:FlipPapervision3D id="effect16" direction="down"/>
<viewStackEffects:FlipPapervision3D id="effect17" direction="up"/>
<viewStackEffects:FadeZoom id="effect3"/>
<viewStackEffects:FadeZoom id="effect10" verticalAlign="top" horizontalAlign="left"/>
<viewStackEffects:FadeZoom id="effect11" verticalAlign="top" horizontalAlign="right"/>
<viewStackEffects:FadeZoom id="effect12" verticalAlign="bottom" horizontalAlign="left"/>
<viewStackEffects:FadeZoom id="effect13" verticalAlign="bottom" horizontalAlign="right"/>
<viewStackEffects:Grid id="effect4"/>
<viewStackEffects:GridZoom id="effect5"/>
<viewStackEffects:Squash id="effect6"/>
<viewStackEffects:Squash id="effect7" direction="right"/>
<viewStackEffects:Squash id="effect8" direction="down"/>
<viewStackEffects:Squash id="effect9" direction="up"/> -->
</mx:Canvas>
由于是第一次接触 Flex, 对Flex还不是很熟，感觉很多代码还需优化。进一步学习中。
脚步无法到达的地方，目光可以到达；目光无法到达的地方，梦想可以到达。
