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

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

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

Flash特效原理:图片圆柱墙

时间:2011-10-24 14:31来源: 作者: 点击:
  网上也有这种不错的图片圆柱的效果,它有一些交互做得不错,采用cs4 或者3d引擎可以创造出这种图片圆柱墙的效果。这种效果主要涉及到圆的分布,借用这种圆的轨迹,我们可以实现这种圆柱图片墙的效果。是不是说错了?我们讨论的圆柱 而为什么提及到圆?那是因为圆这

  网上也有这种不错的图片圆柱的效果,它有一些交互做得不错,采用cs4 或者3d引擎可以创造出这种图片圆柱墙的效果。这种效果主要涉及到圆的分布,借用这种圆的轨迹,我们可以实现这种圆柱图片墙的效果。是不是说错了?我们讨论的圆柱 而为什么提及到圆?那是因为圆这种数学模型在flash 当中是非要实现而基础的应用技术,从图片中看起来会像圆柱形状,但是实际上,我们只是重复复制两个圆,而他的高度只是不同而已。如果细心会发现,你会发现到这种会更加像一种扭曲的二维阵列。和图片平面墙的做法是相同的。采用两个循环来复制图片。

 

双击代码全选
1
2
3
4
5
6
for (var i:int=0; i<2; i++)
    for (var j:int=0; j<num; j++)
{
   创建图片
   配置图片的位置和高度
}

 

  为了让其有不同的图片,我们需要进行外部加载,下面有一种比较傻瓜的做法,但是不提倡,因为只是重用性不够强,只是演示代码。

  private function addImages(...args):void://加载图片

  加载完毕之后,需要进行保存,采用数组来进行,然后对其不同的图片进行位置分布。

  private function createSprite(array:Array):void;//创建图像

  实现圆柱的做法:

 

双击代码全选
1
2
3
4
myphoto.x=R*Math.cos(angle*j);
myphoto.z=R*Math.sin(angle*j); 
    
myphoto.y=i*80+10;//为其指定不同的高度

 

  这样就能实现一种圆柱的效果

  我们把核心的东西记住了就可以了,创建这些程序的时候,能够灵活地结合其他的方式进行交互。

  扩展:

  对图片进行交互,增加鼠标的对图片交互!

  代码清单:这段代码是比较偷懒的做法,需要进行改造。只要把核心的地方弄明白了,其他的都可以进行修改。

  建议和xml结合使用。会增加交互应用。

 

   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.         private var centerX:Number=stage.stageWidth/2;  
  22.         private var centerY:Number=stage.stageHeight/2;  
  23.         private var R:int=300;//b半径  
  24.         private var num:int=16;//边数  
  25.         private var perangle:Number=(num-2)*180/num;  
  26.         private var angle:Number=2*Math.PI/num;  
  27.         public function Main()  
  28.         {  
  29.             init();  
  30.             init_loadImage();  
  31.         }         
  32.         private function init():void  
  33.         {  
  34.             addChild(contain);  
  35.             contain.x=centerX;  
  36.             contain.y=centerY;  
  37.             contain.z=250;            
  38.             root.transform.perspectiveProjection.fieldOfView=80;//初始化透视角度  
  39.             addEventListener(Event.ENTER_FRAME,Run);  
  40.         }  
  41.           
  42.         //加载外部图片  
  43.         private function init_loadImage():void  
  44.         {  
  45.               
  46.             addImages("./image/pic1.jpg","./image/pic2.jpg","./image/pic3.jpg","./image/pic4.jpg",  
  47.                       "./image/pic5.jpg","./image/pic6.jpg","./image/pic7.jpg","./image/pic8.jpg",  
  48.                       "./image/pic9.jpg","./image/pic10.jpg","./image/pic11.jpg","./image/pic12.jpg",  
  49.                       "./image/pic13.jpg","./image/pic14.jpg","./image/pic15.jpg","./image/pic16.jpg",  
  50.                       "./image/pic17.jpg","./image/pic18.jpg","./image/pic19.jpg","./image/pic20.jpg",  
  51.                       "./image/pic21.jpg","./image/pic22.jpg","./image/pic23.jpg","./image/pic24.jpg",  
  52.                       "./image/pic25.jpg","./image/pic26.jpg","./image/pic27.jpg","./image/pic28.jpg",  
  53.                       "./image/pic29.jpg","./image/pic30.jpg","./image/pic31.jpg","./image/pic32.jpg");           
  54.         }  
  55.           
  56.            
  57.          //创建二维阵列分布4x8  
  58.         private function createSprite(array:Array):void  
  59.         {  
  60.             var k:int=0;  
  61.             for (var i:int=0; i<2; i++)  
  62.             {  
  63.                 for (var j:int=0; j<num; j++)  
  64.                 {  
  65.                     var myphoto:MovieClip=new MovieClip();  
  66.                     contain.addChild(myphoto);  
  67.                     myphoto.addChild(array[k]);  
  68.                     list.push(myphoto);  
  69.                     myphoto.x=R*Math.cos(angle*j);  
  70.                     myphoto.z=R*Math.sin(angle*j);   
  71.                   
  72.                     myphoto.y=i*80+10;  
  73.                     myphoto.rotationY=j*perangle+90;//偏移  
  74.                        
  75.                     k++;  
  76.                 }  
  77.   
  78.             }  
  79.             //contain.rotationX=5;//偏移45度  
  80.             sortZ();  
  81.         }  
  82.         
  83.       //添加外部图片,偷懒的做法   
  84.         private function addImages(...args):void  
  85.         {  
  86.             count=args.length;  
  87.             for (var i:int=0; i<args.length; i++)  
  88.             {  
  89.                 var loader:Loader=new Loader();  
  90.                 loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);  
  91.                 loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError);  
  92.                 loader.load(new URLRequest(args[i]));  
  93.             }  
  94.         }  
  95.         private function onComplete(event:Event):void  
  96.         {  
  97.             var bitmap:Bitmap=event.currentTarget.content as Bitmap;  
  98.             bitmap.x=-bitmap.width/2;  
  99.             bitmap.y=-bitmap.height/2;  
 100.             imageList.push(bitmap);  
 101.             event.currentTarget.removeEventListener(Event.COMPLETE,onComplete);  
 102.             event.currentTarget.removeEventListener(IOErrorEvent.IO_ERROR,onError);  
 103.             count--;  
 104.             if (count==0)  
 105.             {  
 106.                 createSprite(imageList);  
 107.             }  
 108.   
 109.         }  
 110.         private function onError(event:Event):void  
 111.         {  
 112.             throw new Error("路径错误");  
 113.         }  
 114.         //排序          
 115.         private function sortZ():void  
 116.         {  
 117.             list.sort(depthSort);  
 118.   
 119.             for (var i:int=0; i<list.length; i++)  
 120.             {  
 121.                 var myimage:MovieClip=list[i];  
 122.                 contain.setChildIndex(myimage,i);  
 123.   
 124.             }  
 125.   
 126.         }  
 127.         //摘录make thing move 姐妹篇一个管理方法   
 128.         private function depthSort(objA:DisplayObject,objB:DisplayObject):int  
 129.         {  
 130.             var posA:Vector3D=objA.transform.matrix3D.position;  
 131.             posA=contain.transform.matrix3D.deltaTransformVector(posA);  
 132.   
 133.             var posB:Vector3D=objB.transform.matrix3D.position;  
 134.             posB=contain.transform.matrix3D.deltaTransformVector(posB);  
 135.             return posB.z-posA.z;  
 136.         }  
 137.           
 138.         private function Run(event:Event):void  
 139.         {  
 140.             contain.rotationY+=0.2;  
 141.             sortZ();              
 142.         }  
 143.           
 144.     }  
 145. }
(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片