×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 7318|回复: 19

解析AS3实例-逐步显示格子的效果显示一个图像

[复制链接]
发表于 2010-9-20 15:29:04 | 显示全部楼层 |阅读模式
本帖最后由 cao4811 于 2010-9-20 15:34 编辑

AS3实例-逐步显示格子的效果显示一个图像

完成此例需要外部类库,和一张jpg图片。类库下载解压后和图片一同保存在grid.fla文件的同一目录下。

1、新建fla文件(Actionscript 3.0) 命名为 grid 。

2、此例全部用代码完成,按F9键打开动作面板输入代码:
首先导入 Tweenlite 类(这是一个第三方类库,所以是必需要导入的)
  1. //导入类库
  2. import com.greensock.*;
复制代码
3、声明 2个常量储存要分割的图像的列和排,创建一个数组变量储存所有被分割成小块的图像。
  1. const COLUMNS:uint=10;
  2. const ROWS:uint=10;
  3.          
  4. var gridImages : Array = new Array();
复制代码
4.创建一个Loader对象,加载数据。注册一个侦听器,侦听完成事件。当图像加载完成后,传递给onImageLoaded。
  1. var imageLoader:Loader = new Loader();
  2. imageLoader.load(new URLRequest("myImage.jpg"));
  3. imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
复制代码
5.在 onImageLoaded 方法中,我们要把图像分割成小块。首先要获取被加载的图像的位图数据。储存块的宽度和高度。
然后我们使列和排循环。在这个双重循环内,生成包含最初图像的小块影片剪辑(imageHolder)。小的块被创建被使用,从最初的图像复制到一个小的矩形区域的copyPixels()的方法。我们设定 imageHolder的x和y属性,并且设定它的透明度为0,让它不可见。
我们把 imageHolder压入 gridImages数组并把它加入显示列表。
最后调用revealImage()方法显示出所有的图像小块。
  1. function onImageLoaded(e:Event):void {

  2.         var originalBitmapData:BitmapData = e.target.content.bitmapData;

  3.         var imageWidth : Number  = originalBitmapData.width / COLUMNS;
  4.     var imageHeight : Number = originalBitmapData.height / ROWS;
  5.         
  6.         for (var i = 0; i < COLUMNS; i++) {

  7.                 for (var j = 0; j < ROWS; j++) {

  8.                         var imageHolder:MovieClip = new MovieClip();
  9.                        
  10.                         var image:Bitmap = new Bitmap();
  11.                         image.bitmapData=new BitmapData(imageWidth,imageHeight);
  12.                         image.bitmapData.copyPixels(
  13.                                                                 originalBitmapData,
  14.                                                                   new Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
  15.                                                                   new Point(1,1));

  16.                         imageHolder.addChild(image);

  17.                         imageHolder.x=i*imageWidth;
  18.                         imageHolder.y=j*imageHeight;
  19.                         imageHolder.alpha=0;
  20.   
  21.                         imagesGrid.push(imageHolder);
  22.                         addChild(imageHolder);
  23.                 }
  24.         }
  25.        
  26.         revealImage();
  27. }
复制代码
6、revealImage()方法通过循环为每个imagesGrid图像使用Tweenlite使它的透明度属性产生变化。使用延迟参数使最初图像的块陆续地出现。
  1. function revealImage():void{
  2.         for (var i:int = 0; i < imagesGrid.length; i++){
  3.                 var imageGrid:MovieClip = imagesGrid[i] as MovieClip;
  4.                 TweenLite.to(imageGrid, .3, { alpha: 1,delay:i*.15});
  5.         }
  6. }
复制代码
7、最后完整的代码:(可直接复制)
  1. import com.greensock.*;

  2. const COLUMNS:uint = 10;
  3. const ROWS:uint = 10;

  4. var imagesGrid:Array = new Array();   

  5. var imageLoader:Loader = new Loader();
  6. imageLoader.load(new URLRequest("http://img.jcwcn.com/attachment/forum/month_1002/1002152139351cbb06a9966045.jpg"));
  7. imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);

  8. function onImageLoaded(e:Event):void {
  9.    
  10.         var originalBitmapData:BitmapData = e.target.content.bitmapData;
  11.    
  12.         var imageWidth:Number  = originalBitmapData.width / COLUMNS;
  13.     var imageHeight:Number = originalBitmapData.height / ROWS;
  14.         
  15.         for (var i = 0; i < COLUMNS; i++) {

  16.                 for (var j = 0; j < ROWS; j++) {

  17.                         var imageHolder:MovieClip = new MovieClip();
  18.                        
  19.                         var image:Bitmap = new Bitmap();
  20.                         image.bitmapData = new BitmapData(imageWidth,imageHeight);
  21.                         image.bitmapData.copyPixels(
  22.                                                                 originalBitmapData,
  23.                                                                   new Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
  24.                                                                   new Point(1,1));

  25.                         imageHolder.addChild(image);

  26.                         imageHolder.x = i * imageWidth;
  27.                         imageHolder.y = j * imageHeight;
  28.                         imageHolder.alpha = 0;
  29.   
  30.                         imagesGrid.push(imageHolder);
  31.                         addChild(imageHolder);
  32.                 }
  33.         }
  34.        
  35.         revealImage();
  36. }

  37. function revealImage():void{
  38.         for (var i:int = 0; i < imagesGrid.length; i++){
  39.                 var imageGrid:MovieClip = imagesGrid[i] as MovieClip;
  40.                 TweenLite.to(imageGrid, .3, { alpha: 1,delay:i*.15});
  41.         }
  42. }
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x

评分

参与人数 1 +8 +2 收起 理由
sanbos + 8 + 2 多谢教程,辛苦了。

查看全部评分

发表于 2010-9-25 09:51:57 | 显示全部楼层
看不懂,不知外部类库的作用如何?
回复 支持 反对

使用道具 举报

发表于 2010-9-27 17:38:50 | 显示全部楼层
教程也很详细学习
回复 支持 反对

使用道具 举报

发表于 2010-9-29 09:11:15 | 显示全部楼层
不错,学习下。
回复 支持 反对

使用道具 举报

发表于 2010-9-29 09:37:05 | 显示全部楼层
我的作业。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x
回复 支持 反对

使用道具 举报

发表于 2010-9-29 09:46:48 | 显示全部楼层
终于好了,原来是图片路径的原因。要先把图片传上去。不知道什么时候才能直接看到效果。可能是级别不够。jc:look
回复 支持 反对

使用道具 举报

发表于 2010-9-29 10:10:42 | 显示全部楼层
本帖最后由 sanbos 于 2010-9-29 10:12 编辑

5楼的作业:
我没看到有东西
回复 支持 反对

使用道具 举报

发表于 2010-9-29 10:30:40 | 显示全部楼层
我的作业

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x
回复 支持 反对

使用道具 举报

发表于 2010-9-30 11:09:29 | 显示全部楼层
8# GERRARD22


好象还是没有内容,再检查一下看看。
回复 支持 反对

使用道具 举报

发表于 2011-4-15 13:01:49 | 显示全部楼层
谢谢楼主分享
回复 支持 反对

使用道具 举报

发表于 2014-5-31 09:22:26 | 显示全部楼层
谢谢老师的好教程,效果非常棒
回复 支持 反对

使用道具 举报

发表于 2014-7-8 15:40:56 | 显示全部楼层
看不太懂!  但很赞
回复 支持 反对

使用道具 举报

发表于 2014-11-26 12:35:58 | 显示全部楼层
谢谢老师,做的好教材。
回复 支持 反对

使用道具 举报

发表于 2014-12-8 16:35:07 | 显示全部楼层
本帖最后由 张文烈 于 2014-12-8 16:55 编辑


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x
回复 支持 反对

使用道具 举报

发表于 2018-9-24 21:16:39 | 显示全部楼层
很不错。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [免费注册]

本版积分规则