2010年10月11日

再学AS3（七）——相册（网页推荐作品）
效果图：

一、新建文件夹，名为“推荐作品”；在该文件夹内新建两个文件夹，一个名为“images”、一个名为“xml”。如图所示：

二、在“images”文件夹内放几张图片，图片大小最好统一宽高，我这里均设置为宽320像素高220像素；图片分别名为“01.jpg”、“02.jpg”、“03.jpg”、“04.jpg”……图片不宜过多，一般四张最好。

三、在“xml”文件夹内用记事本写如下语句：
<images>
  <image source="images/01.jpg">这是图片说明</image>
  <image source="images/02.jpg">这是图片说明</image>
  <image source="images/03.jpg">这是图片说明</image>
  <image source="images/04.jpg">这是图片说明</image>
</images>

“这是图片说明”换成你所加入的图片说明（我这里只添加了四张图片）。
保存时注意文件名后输入“.xml”，保存类型为“UTF-8”。如图所示：

四、新建FLA文档，保存在“推荐作品”文件夹内，宽为图片的宽，高为图片高再加上24像素；然后在第一帧上输入如下语句：
stage.scaleMode="noScale" ;
//利用函数画圆
function huayuan(se:uint,r:Number):Sprite {
 var yuan:Sprite=new Sprite();
 yuan.graphics.beginFill(se);
 yuan.graphics.drawCircle(0,0,r);
 yuan.graphics.endFill();
 return yuan;
}
//利用函数画矩形
function huajuxing(se:uint,w:Number,h:Number):Sprite {
 var juxing:Sprite=new Sprite();
 juxing.graphics.beginFill(se);
 juxing.graphics.drawRect(0,0,w,h);
 juxing.graphics.endFill();
 return juxing;
}
//添加右键菜单
var myContextMenu:ContextMenu = new ContextMenu();
removeDefaultItems();
addCustomMenuItems();
this.contextMenu = myContextMenu;
function removeDefaultItems():void {
 myContextMenu.hideBuiltInItems();
 var defaultItems:ContextMenuBuiltInItems = myContextMenu.builtInItems;
}
function addCustomMenuItems():void {
 var zuozhe:ContextMenuItem = new ContextMenuItem("制作：刘常");
 myContextMenu.customItems.push(zuozhe);
 var wangzhi:ContextMenuItem = new ContextMenuItem("刘常闪吧博客",true);
 myContextMenu.customItems.push(wangzhi);
 wangzhi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, wz);
}
function wz(event:ContextMenuEvent):void {
 var url:URLRequest=new URLRequest("http://space.flash8.net/space/?401869/");
 navigateToURL(url,"_blank");
}
//舞台的宽与高
var wtw:uint=stage.stageWidth;
var wth:uint=stage.stageHeight;
//下方黑色矩形
var jx:Sprite=huajuxing(0xAAAAAA,wtw,24);
addChild(jx);
jx.y=wth-24;
//分隔线
var fgx:Sprite=huajuxing(0xEEEEEE,wtw,1);
addChild(fgx);
fgx.y=wth-24;
//标题文本
var bt_txt:TextField=new TextField();
bt_txt.width=150;
bt_txt.height=19;
bt_txt.textColor=0x000000;
bt_txt.selectable=false;
bt_txt.x=5;
bt_txt.y=wth-21.5;
addChild(bt_txt);
//按钮显示
var btnxs:Sprite=huayuan(0x666666,9);
addChild(btnxs);
//导入转场效果
import fl.transitions.Tween;
import fl.transitions.easing.*;
//一些变量
var tt:Timer=new Timer(4000);
var b:uint=0;
var zhongshu:uint=0;
var loader:Loader;
var _request:URLRequest;
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
var fadeTween:Tween;
//载入外部XML文件
xmlLoader.load(new URLRequest("xml/xc.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
function xmlLoaded(event:Event):void {
 xml = XML(event.target.data);
 xmlList = xml.children();
 zhongshu=xmlList.length();
 for (var a:int = 0; a < zhongshu; a++) {
  //按钮背景
  var btnbj:Sprite=huayuan(0xDDDDDD,7);
  addChild(btnbj);
  btnbj.x=wtw-20*zhongshu+a*20;
  btnbj.y=wth-12;
  //显示序号
  var xh_txt:TextField=new TextField();
  xh_txt.width=10;
  xh_txt.height=19;
  xh_txt.textColor=0x000000;
  xh_txt.selectable=false;
  xh_txt.autoSize = TextFieldAutoSize.CENTER;
  xh_txt.text=(a+1)+"";
  xh_txt.x=(wtw-20*zhongshu-5)+a*20;
  xh_txt.y=wth-21.5;
  addChild(xh_txt);
  //按钮
  var btn:Sprite=huayuan(0x000000,7);
  addChild(btn);
  btn.alpha=0;
  btn.x=wtw-20*zhongshu+a*20;
  btn.y=wth-12;
  btn.name = xmlList[a].attribute("source");
  btn.addEventListener(MouseEvent.CLICK,dj);
  btn.buttonMode=true;
 }
 //默认载入第一张图片并显示图片说明
 imageLoader = new Loader();
 imageLoader.load(new URLRequest(xmlList[b].attribute("source")));
 addChild(imageLoader);
 bt_txt.text = xmlList[b];
 //按钮显示
 btnxs.x=wtw-zhongshu*20;
 btnxs.y=wth-12;
}
//添加计时监听事件
tt.addEventListener(TimerEvent.TIMER,gx);
tt.start();
//按钮点击转场
function dj(e:MouseEvent):void {
 tt.stop();
 b=int(e.target.name.substr(8,1)-1);
 btnxs.x=e.target.x;
 btnxs.y=e.target.y;
 tt.start();
 imageLoader = new Loader();
 imageLoader.load(new URLRequest(e.target.name));
 addChild(imageLoader);
 bt_txt.text =xmlList[b];
 fadeTween = new Tween(imageLoader,"alpha",None.easeNone,0,1,1,true);
}
//自动转场
function gx(e:TimerEvent) {
 b++;
 if (b>=zhongshu) {
  b=0;
 }
 btnxs.x=wtw-zhongshu*20+b*20;
 imageLoader = new Loader();
 imageLoader.load(new URLRequest(xmlList[b].attribute("source")));
 addChild(imageLoader);
 bt_txt.text = xmlList[b];
 fadeTween = new Tween(imageLoader,"alpha",None.easeNone,0,1,1,true);
}