使用actionscript3.0构建一个异步加载图片的画廊（四）

发布于，归属于actionscript3。 前3个座位已被强势霸占！ 共有552人围观    

引言


上一篇教程明河讲解了如何使用actionscript3.0读取和处理xml，今天明河将主要讲解如何使用actionscript3.0构建个图片画廊，在接下来的教程中有如下工作：

  • 构建一个图片画廊的影片剪辑作为画廊的容器
  • 构建图片剪辑类

使用actionscript3.0构建个图片画廊

1、新建个图片画廊影片剪辑

在lib.Gallery的加个变量

  1. //图集的影片剪辑
  2.         public var imagesClip:MovieClip = new MovieClip;

在lib.Gallery的构造函数内加上如下代码：

  1. imagesClip.y = 180;
  2.             //将图集的影片剪辑添加到舞台
  3.             addChild(imagesClip);

设置图片画廊影片剪辑的y轴位置，并添加到舞台。

2、构建lib.Img类（打开库中的Img元件的文档类）

Img是单个图片剪辑，我们需要知道该图片剪辑的id，设置其宽度、高度，及其位置。Img并非在实例化时就加载图片，而是由外部控制何时加载，所以我们需要一个独立的加载图片的方法loadImage，加载完图片还需要将图片加入到图片剪辑，同时也要向图片剪辑加入图片名，所以我们还需要一个方法displayImage
接下来来看详细的代码：
一、构造函数，设置图片剪辑的几个主要属性（变量的定义略过）

  1. //构造函数
  2.         /**
  3.         *@param load {String} 图片路径
  4.         *@param m {Object} 主文档画廊类实例
  5.         */
  6.         public function Img(load:String,m:Gallery):void {
  7.             orgWidth = width;
  8.             orgHeight = height;
  9.             //设置图片路径
  10.             src = load;
  11.             //主文档画廊类实例
  12.             main = m;
  13.             //透明度
  14.             alpha = 0;
  15.             //设置图片宽度
  16.             imgWidth = main.imgWidth;
  17.             imgHeight = main.imgHeight;
  18.             //获取字体名
  19.             fontName = Font.enumerateFonts()[0].fontName;
  20.            
  21.         }

src将保存图片路径，main指向舞台，我们不需要一开始就显示这个图片剪辑，所以设置alpha = 0;（请看库中的Img元件是有loading背景的，我们并不希望一实例化就显示。）
fontName为字体名（图片名部分将采用嵌入的字体，示例中明河嵌入的是微软雅黑，关于这部分将在图片名部分详解）。
二、loadImage函数
loadImage将读取指定src的图片，这部分代码如下：

  1. /**
  2.         *读取图片
  3.         */
  4.         public function loadImage():void{
  5.             imageLoader.load(new URLRequest(src));
  6.             imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,displayImage);
  7.         }

监听加载完成事件。
三、displayImage函数

  1. /**
  2.         *显示图片
  3.         */
  4.         public function displayImage(_e : Event):void{
  5.             //如果此id后还存在图片实例，加载下一个图片
  6.             if(main.images[id + 1] != null && !main.images[id + 1].parent) main.images[id + 1].loadImage();
  7.             //控制在缩放时对位图进行平滑处理
  8.             Bitmap(imageLoader.content).smoothing = true;
  9.             //设置图片位置
  10.             imageLoader.x = main.spaceBetween/2 - ( orgWidth /2 ); 
  11.             imageLoader.y = main.spaceBetween/2 - ( orgHeight /2 );
  12.             imageLoader.width = imgWidth;
  13.             imageLoader.height = imgHeight;
  14.             //添加到图片剪辑
  15.             addChild( imageLoader );
  16.            
  17.             //显示文件名
  18.             var descr:TextField = new TextField();
  19.             var extensionIndex:Number = src.lastIndexOf( '/' );
  20.             ImgName = src.substr(extensionIndex+1,src.length);
  21.             descr.text = ImgName;
  22.             descr.y = imageLoader.y + imageLoader.height ;
  23.             descr.x = 10 - ( orgWidth /2 );
  24.             //指定将文本视为左对齐文本
  25.             descr.autoSize = TextFieldAutoSize.LEFT;
  26.             //嵌入字体
  27.             descr.embedFonts = true;
  28.             //格式化文字
  29.             var format:TextFormat = new TextFormat(fontName, 12, 0);
  30.             format.color = 0x5B4846;
  31.             descr.setTextFormat(format);  
  32.             addChild( descr );
  33.            
  34.         }

这部分看似代码很多，其实很好理解，可以分成二个部分：

  • 向图片剪辑添加图片
  • 向图片剪辑添加图片名

向图片剪辑添加图片

  1. //如果此id后还存在图片实例，加载下一个图片
  2.             if(main.images[id + 1] != null && !main.images[id + 1].parent) main.images[id + 1].loadImage();
  3.             //控制在缩放时对位图进行平滑处理
  4.             Bitmap(imageLoader.content).smoothing = true;
  5.             //设置图片位置
  6.                 imageLoader.x = main.spaceBetween/2 - ( orgWidth /2 ); 
  7.                         imageLoader.y = main.spaceBetween/2 - ( orgHeight /2 );
  8.             imageLoader.width = imgWidth;
  9.             imageLoader.height = imgHeight;
  10.             //添加到图片剪辑
  11.             addChild( imageLoader );

这里要做个很重要的判断，即如果此id后还存在图片实例，加载下一个图片，也就是触发大于id索引值的图片剪辑加载图片，这样，我们无需再循环数组重复加载图片。
这里说明下!main.images[id + 1].parent如果一个图片剪辑已经加入到了图片集影片剪辑，那么该图片剪辑取父容器的时候就存在，反之那么该图片剪辑还未加入到图片集影片剪辑。
向图片剪辑添加图片名

  1. //显示文件名
  2.             var descr:TextField = new TextField();
  3.             var extensionIndex:Number = src.lastIndexOf( '/' );
  4.             ImgName = src.substr(extensionIndex+1,src.length);
  5.             descr.text = ImgName;
  6.             descr.y = imageLoader.y + imageLoader.height ;
  7.             descr.x = 10 - ( orgWidth /2 );
  8.             //指定将文本视为左对齐文本
  9.             descr.autoSize = TextFieldAutoSize.LEFT;
  10.             //嵌入字体
  11.             descr.embedFonts = true;
  12.             //格式化文字
  13.             var format:TextFormat = new TextFormat(fontName, 12, 0);
  14.             format.color = 0x5B4846;
  15.             descr.setTextFormat(format);  
  16.             addChild( descr );

文件名来源于图片路径，但我们只需要最后一段URI，即XXX.png即可。所以这里做了如下处理：

  1. var extensionIndex:Number = src.lastIndexOf( '/' );
  2.             ImgName = src.substr(extensionIndex+1,src.length);

关于字符串的处理有太多的方法了，明河这里用的是笨办法，推荐使用正则。
为啥要使用嵌入字体？
嵌入字体后使swf文件体积大增，但这里有不得不使用嵌入字体的理由，请看demo，图片剪辑有带旋转的效果，如果不使用嵌入字体，就没办法显示文字。关于嵌入字体明河推荐看一篇很好的教程

下一篇教程将是本教程的完结篇，讲解最难部分：如何制作滑动效果。
actionscript3.0实战教程完成后，明河打算再发个系列教程，讲解如何构建wordpress插件。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

3个座位已被强势霸占！

  1. 丕子

    哇哦 一下4篇连载 写的简单明白 一学就会

    明河共影回复于 2010年06月09日 3:45

    ……太感动了，总算有人欣赏了，我写到第四篇，以为都没人看呢，万分感谢！

  2. !朽,,木"~

    别感动了，呵呵，我看了下我该感动才对呢，。。

    我刚从as2的痛苦中解脱出来，现在看AS3， 看到你的东西收货很多，谢谢

同类