有时候,我们制作一些照片展示器,我们想同时载入一些图片,并在舞台上随机显示照片的位置和角度,照片可能有重叠。当我想看某张照片时,我们点击它,照片会从背景跳到前台来显示。
首先我们分析一个这样的软件需要哪些知识。载入照片我们可以使用UILoader组件,利用其source属性指示照片的位置。使用Math.random()方法来给出随机数,以此来随机给出位置和角度。点击照片我们需要MouseEvent事件。我们来看看实例吧:
import fl.containers.UILoader;
import fl.transitions.<a href=http://www.flashabc.net/catalog.asp?tags=Tween>Tween</a> ;
import fl.transitions.<a href=http://www.flashabc.net/catalog.asp?tags=easing>easing</a>.*
var uiloader2:UILoader=new UILoader();
uiloader2.source ="http://www.flashabc.net/upload/10793419_996516.jpg";
var uiloader3:UILoader=new UILoader();
uiloader3.source ="http://www.flashabc.net/upload/8d959233cd760469ac4b5f24.jpg";
var uiloader4:UILoader=new UILoader();
uiloader4.source ="http://www.flashabc.net/upload/3a887671efa05c318601b06e.jpg";
var uiloader5:UILoader=new UILoader();
uiloader5.source ="http://www.flashabc.net/upload/7cf78ffc5178b53d09244d12.jpg";
var ularray:<a href=http://www.flashabc.net/catalog.asp?tags=Array>Array</a>=[uiloader2,uiloader3,uiloader4,uiloader5]
for(var i:int=0;i<ularray.length;i++){
var mytween:Tween=new Tween(ularray[i], "width", Regular.easeIn, 0, 200, 1, true);
var mytween1:Tween=new Tween(ularray[i], "height", Regular.easeIn, 0, 180, 1, true);
addChild(ularray[i])
ularray[i].rotation=Math.random()*50-30
ularray[i].x=(i)*100+50
ularray[i].y=100
ularray[i].width=200;
ularray[i].height=180;
}
for(var j:int;j<ularray.length;j++){
ularray[j].addEvent<a href=http://www.flashabc.net/catalog.asp?tags=List>List</a>ener(MouseEvent.ROLL_OVER,onOver)
}
function onOver(e:MouseEvent):void{
this.swapChildren(e.target as <a href=http://www.flashabc.net/catalog.asp?tags=DisplayObject>DisplayObject</a>,getChildAt(this.numChildren-1));
e.target.scaleX=2;
e.target.scaleY=2;
}
制作详解:
我们要从组件库中拖入一个UILoader组件到舞台,作为模板。利用这个模板我们可以创建若干个该组件,如果给个模板,测试会报错。接下来,我们要给每个组件赋图片地址的值。
把这些组件实例加入到数组库,这样做可以使用循环减少代码。我们使用两个for循环,第一个循环里使用了缓动代码(有关缓动会在后面具体介绍),在这个循环里我们把每个组件一次加入到显示列表中。以及设置了每个组件的位置和角度。
利用第二个循环分别给每个组件加入侦听器,并共用同一个函数。在处理函数里,实现了图片之间的交换。