建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 图像设计 > Flash教程 >

Flash特效原理:图片平面墙

时间:2011-10-24 14:33来源: 作者: 点击:
    ok ,来到9点的时候,刚刚好吃饱饭。见到这种网上的相册的时候,我对它的分布产生了很多兴趣。它的分布并不是很难,因为你可以想象一下,其实它看起来更加像二维阵列,或者很多效果我们都可以利用二维阵列对其进行分布。而这种分布,可以录入flash当中一个很重要的

    ok ,来到9点的时候,刚刚好吃饱饭。见到这种网上的相册的时候,我对它的分布产生了很多兴趣。它的分布并不是很难,因为你可以想象一下,其实它看起来更加像二维阵列,或者很多效果我们都可以利用二维阵列对其进行分布。而这种分布,可以录入flash当中一个很重要的技术。要产生透视的效果,只是刚刚对容器偏移了一个rotationY角度而已。

  我们做一个实验:采用两个循环进行复制

 

双击代码全选
1
2
3
4
5
6
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

 

  可以采用二维循环:

 

双击代码全选
1
2
3
4
5
6
for(i)
 for(j)
 {
  物体.x=物体.width*j;
 物体.y=物体.height*j;
 }

 

    复制完成了这种二维效果的时候,图片按横竖分布。然后我们需要加一点角度,让装载图片的容器对象进行角度偏移。这样就能够看出一个偏移后的效果,而呈现出一种透视的角度。这种角度可以进行调节。采用flash cs4能够简单地实现到这种图片分布的效果。

  下面为代码清单。

  其中我们需要准备一系列宽和高的都相等的图片,并且对最下面的一行进行一个倒影的效果。这个倒影类可以到网上收集一下,在adobe 核心代码库里面有。可以到google code 里面寻找到。

  结合到这种简化的效果,你可以对其进行改进,因为个人也在偷懒。所以希望用最简化实现方式呈现出来。让这种效果变得更加容易,其中没

  对图片进行交互使用,这些是缺少的。对用户体现大减。好,就写到这里。值得提,flash 分布技术是一种常用的技术。

   1. package   
   2. {  
   3.   
   4.     import flash.display.Sprite;  
   5.     import flash.display.MovieClip;  
   6.     import flash.events.*;  
   7.     import flash.geom.*;  
   8.     import flash.display.DisplayObject;  
   9.     import flash.display.Bitmap;  
  10.     import flash.display.Loader;  
  11.     import flash.net.*;  
  12.       
  13.     import com.image.Reflect;  
  14.       
  15.     public class Main extends Sprite  
  16.     {  
  17.         private var contain:Sprite=new Sprite();//创建容器  
  18.         private var list:Array=new Array();//用于图片管理的数  
  19.         private var count:int=0;  
  20.         private var imageList:Array=new Array();  
  21.   
  22.         public function Main()  
  23.         {  
  24.             init();  
  25.             init_loadImage();  
  26.         }  
  27.           
  28.         private function init():void  
  29.         {  
  30.             addChild(contain);  
  31.             contain.x=0;  
  32.             contain.y=100;  
  33.             contain.z=10;             
  34.             root.transform.perspectiveProjection.fieldOfView=60;//初始化透视角度             
  35.         }  
  36.           
  37.         //加载外部图片  
  38.         private function init_loadImage():void  
  39.         {  
  40.               
  41.             addImages("./image/pic1.jpg","./image/pic2.jpg","./image/pic3.jpg","./image/pic4.jpg",  
  42.                       "./image/pic5.jpg","./image/pic6.jpg","./image/pic7.jpg","./image/pic8.jpg",  
  43.                       "./image/pic9.jpg","./image/pic10.jpg","./image/pic11.jpg","./image/pic12.jpg",  
  44.                       "./image/pic13.jpg","./image/pic14.jpg","./image/pic15.jpg","./image/pic16.jpg",  
  45.                       "./image/pic17.jpg","./image/pic18.jpg","./image/pic19.jpg","./image/pic20.jpg",  
  46.                       "./image/pic21.jpg","./image/pic22.jpg","./image/pic23.jpg","./image/pic24.jpg",  
  47.                       "./image/pic25.jpg","./image/pic26.jpg","./image/pic27.jpg","./image/pic28.jpg",  
  48.                       "./image/pic29.jpg","./image/pic30.jpg","./image/pic31.jpg","./image/pic32.jpg");           
  49.         }  
  50.           
  51.            
  52.          //创建二维阵列分布4x8  
  53.         private function createSprite(array:Array):void  
  54.         {  
  55.             var k:int=0;  
  56.             for (var i:int=0; i<4; i++)  
  57.             {  
  58.                 for (var j:int=0; j<8; j++)  
  59.                 {  
  60.                     var myphoto:MovieClip=new MovieClip();  
  61.                     contain.addChild(myphoto);  
  62.                     myphoto.addChild(array[k]);  
  63.                     //list.push(myphoto);  
  64.                     myphoto.x=myphoto.width*j+10*j;  
  65.                      if(i==3)  
  66.                     {  
  67.                         var r1:Reflect = new Reflect({mc:myphoto, alpha:30, ratio:80, distance:0, updateTime:-1, reflectionDropoff:0});  
  68.                         myphoto.y=myphoto.height*i/2+10*i;  
  69.                     }  
  70.                     else  
  71.                      {  
  72.                       
  73.                        myphoto.y=myphoto.height*i+10*i;  
  74.                      }  
  75.                     k++;  
  76.                 }  
  77.   
  78.             }  
  79.             contain.rotationY=-45;//偏移45度  
  80.         }  
  81.         
  82.       //添加外部图片,偷懒的做法   
  83.         private function addImages(...args):void  
  84.         {  
  85.             count=args.length;  
  86.             for (var i:int=0; i<args.length; i++)  
  87.             {  
  88.                 var loader:Loader=new Loader();  
  89.                 loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);  
  90.                 loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError);  
  91.                 loader.load(new URLRequest(args[i]));  
  92.             }  
  93.         }  
  94.         private function onComplete(event:Event):void  
  95.         {  
  96.             var bitmap:Bitmap=event.currentTarget.content as Bitmap;  
  97.             imageList.push(bitmap);  
  98.             event.currentTarget.removeEventListener(Event.COMPLETE,onComplete);  
  99.             event.currentTarget.removeEventListener(IOErrorEvent.IO_ERROR,onError);  
 100.             count--;  
 101.             if (count==0)  
 102.             {  
 103.                 createSprite(imageList);  
 104.             }  
 105.   
 106.         }  
 107.         private function onError(event:Event):void  
 108.         {  
 109.             throw new Error("路径错误");  
 110.         }  
 111.   
 112.     }  
 113.   
 114.   
 115.   
 116. }  
(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片