import flash.display.MovieClip;
import flash.display.Sprite;
import com.greensock.loading.*;
import com.greensock.TweenMax;
import com.greensock.events.LoaderEvent
import com.greensock.loading.data.ImageLoaderVars;
import com.greensock.loading.display.ContentDisplay;
import flash.events.MouseEvent;
import flash.text.TextField;
import com.greensock.loading.display.*;
import flash.display.StageScaleMode;
/**
* ...
* @author littlejoe
*/
public class Main extends Sprite{
private var xPhotography:XMLLoader;
private var xImgList:XMLList;
//通过这种方式用到舞台上的元件。
public var thumbHolder:MovieClip;
public var mainHolder:MovieClip;
public var titleTxt:TextField;
public var descTxt:TextField;
public function Main() {
stage.scaleMode = StageScaleMode.SHOW_ALL;
//加载xml文件
xPhotography = new XMLLoader("photography.xml");
xPhotography.load();//开始加载
xPhotography.addEventListener(LoaderEvent.COMPLETE, xmlLoaded);
}
private function xmlLoaded(e:LoaderEvent):void {
//content相当于原来loader的data
var xData:XML = e.target.content;
//输出元素师img相关的
xImgList = new XMLList(xData.img);
//setup a loadermax object
var thumbLoader:LoaderMax = new LoaderMax( { name:"thumbLoader" } );
var nImgWidth:Number = 150;
var nImgHeight:Number = 100;
var nMaxCols:Number = 2;
for (var i:int = 0; i < xImgList.length(); i++)
{
//对每个对象的载入,设置参数
var iLoad:ImageLoader = new ImageLoader("images/thumbs/" + xImgList[i].@url, new ImageLoaderVars()
.name(xImgList[i].@name)//p1,p2..!!!
.width(nImgWidth)
.height(nImgHeight)
.smoothing(true)
.container(thumbHolder)
//位置!!!
.x((i % nMaxCols) * nImgWidth)
.y(int(i / nMaxCols) * nImgHeight)
.scaleMode("proportionalOutside")//完整匹配
.crop(true) //将图像超出部分剪去
//再重新定义属性吗?
.prop("index", i)
.prop("url", xImgList[i].@url)
.prop("title", xImgList[i].@title)
.prop("desc", xImgList[i].@desc)
.alpha(0)
)
thumbLoader.append(iLoad);//loaderMax中的append,增加到队列
}
thumbLoader.load();
thumbLoader.addEventListener(LoaderEvent.COMPLETE, thumbLoaded);//加载完成后才会调用此函数
}
private function thumbLoaded(e:LoaderEvent):void
{//对thumbImg设置单击事件
for (var i:int = 1; i < xImgList.length()+1; i++)
{
var cdImg:ContentDisplay = LoaderMax.getContent("p" + i);//对应前面的name,就是.name,content仅是一个“容器”
cdImg.buttonMode = true;
cdImg.addEventListener(MouseEvent.CLICK, thumbClick);
//开始载入时的渐变
TweenMax.to(cdImg, 1, { autoAlpha:1, delay:(i * 0.2) } );//延迟多少秒后开始载入
}
}
private function thumbClick(e:MouseEvent):void
{
var vars:Object = ImageLoader(e.currentTarget.loader).vars;
checkOldImage(vars.index);//相当于点击index=1这张图
}
private function checkOldImage(index:Number):void
{
//如果已经载入过,就直接缓动显示,没有的话去加载,顺便设置其属性,等下次直接判断家在过,直接缓动
//单击一次,载入一张,再单击下一张,前一张将被移除,所以numChildren最大为1,位置时0
if (mainHolder.numChildren == 1 )
{
//getChildAt返回位于指定索引处的子显示对象实例。
var oldClip:Sprite = Sprite(mainHolder.getChildAt(0));
//隐藏前面的,重新加载新的图片
TweenMax.to(oldClip, 0.5, { autoAlpha:0, onComplete:function() { mainHolder.removeChildAt(0);loadImage(index) }})
}else {
loadImage(index);
}
}
private function loadImage(index:Number):void
{
//get filename,就是图片的存储名称
var file:String = xImgList[index].@url;
//change text display
titleTxt.text = "Title:" + xImgList[index].@title;
descTxt.text = "Description:" + xImgList[index].@desc;
var mainLoad:ImageLoader = new ImageLoader("images/main/" + file, new ImageLoaderVars()
.width(500)
.height(500)
.scaleMode("proportinalInside")
.container(mainHolder)
.smoothing(true)
.alpha(0)
)
//setup event listener
mainLoad.load();
mainLoad.addEventListener(LoaderEvent.COMPLETE, imageLoaded);
}
private function imageLoaded(e:LoaderEvent):void
{
//ContentDisplay与name对应
var imgClip:ContentDisplay = LoaderMax.getContent(e.currentTarget.name);
TweenMax.to(imgClip, 0, { colorTransform: { exposure:2 }} );//曝光
TweenMax.to(imgClip, 1.5, { colorTransform: { exposure:1 }, autoAlpha:1 } );
}
}
}
<?xml version="1.0" encoding="UTF-8"?>
<data>
<img url="SDZoo-9.jpg" name="p1" title="zoo 1" desc="zoo from San Dieago"/>
<img url="SDZoo-17.jpg" name="p2" title="zoo 2" desc="zoo from San Dieago"/>
<img url="SDZoo-29.jpg" name="p3" title="zoo 3" desc="zoo from San Dieago"/>
<img url="squirrel-1.jpg" name="p4" title="squirrel 1" desc="Squirrel"/>
<img url="SDZoo-3.jpg" name="p5" title="zoo 4" desc="zoo from San Dieago"/>
<img url="Lorne2009-5.jpg" name="p6" title="Sea" desc="touch the wave"/>
<img url="Lorne2009-28.jpg" name="p7" title="Smile" desc="ocean smile"/>
<img url="Lorne2009-30.jpg" name="p8" title="Car" desc="R33 Skyline"/>
</data>