`

flex/flash 3d基础1

阅读更多
新的flex/flash给了3D一个很好的展示平台,下面就让我们走进flash3d世界
【贝武易科技专业flex3D开发--www.newflash3d.com】
十分感谢kirupa.com的贡献。
下面我们进入flex,新建一个项目Zooming Figures如下:


选择项目根目录,单击右键选属性,导入一个SWC文件,这个文件为我们从flash cs3输出来库文件,具体的输出方法见http://bvu.iteye.com/blog/283173


导入Figure.swc。(我们在下面提供了该文件)
导入界面


导入完毕后,关键的一部是要在flex中使用它,把主程序改为
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="absolute">
<local:figure/>
</mx:Application>

我们分析一下代码
xmlns:local="*",告诉程序一个新的组见空间,local是新的组件空间名,*表示应用这个组件空间里的所有组件,我们在--flex组件样式演示--里有专门的介绍,这里就不细说了。
<local:figure/> 生成一个组件,我们可以看到场景中多出了一个人物角色的图,他就是我们的figure组件了。


上面我们成功的导入了一个swf来作为flex的应用,但是上面的方法导入的swf,我们发现有一个问题是在应用它的scaleX、scaleY的时候不起作用。
所以我们利用另外一种方法导入,使用SWFLoader组件,这个组件很好的控制和利用了swf的属性,同时可以控制导入的swf作为一个MovieClip,控制它的播放和暂定等。
所以,利用SWFLoader组件作为导入完整的代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init();">
<mx:Canvas width="300" height="300">
	<mx:SWFLoader id="swfload" source="assets/Figure.swf"/>
</mx:Canvas>
<mx:Script>
	<![CDATA[
	    private var FigureA:MovieClip;  
		private function init():void{    
		    FigureA = swfload.content as MovieClip;
		    addEventListener(Event.ENTER_FRAME, aa);
		}
		private function aa(evt:Event):void {
			text1.text = String(FigureA.x);
		}
		
	]]>
</mx:Script>
<mx:Text id="text1"/>
</mx:Application>

简单的解析:
我们通过mx:SWFLoader把Figure.swf导进去。
把SWFLoader放到一个Canvas里去,代码如下:
<mx:Canvas width="300" height="300">
<mx:SWFLoader id="swfload" source="assets/Figure.swf"/>
</mx:Canvas>
<mx:Text id="text1"/>是加入一个辅助显示的文字组件;
好,准备元素准备好了,下面我们就进入三维的世界!!
因为flex\flash它们只是一个二维的平面显示(X,Y),我们需要模拟出一个Z轴出来,我们这样定义,以你作为参考,你的显示屏幕的平面为0平面,也就是Z轴为零,所有的图像都投影到这个平面来显示出来,远离你而去的方向为Z轴的正方向,冲着你来的方向为Z轴的负方向。
三维里的基本概念:
供投影显示的平面(这里是我们的flex显示屏幕);
焦距;
Z轴;
当然,这所有的元素都是虚的概念,需要我们去在空间想像的去构建。
焦距:FocalLength = 300;
在flex里的代码为
private var FocalLength:Number;
FocalLength=300;

默认的情况下我们的flex舞台的坐标为X、Y,如下图


我们虚拟出一个Z轴来,如图


看下面的关系图:


从这个图我们可以看出,物体(红色箭头)如果沿着Z轴平行移动,在观察点看来,它投影到显示屏幕上的显示物体(小的红色箭头)他们始终是有这么一种关系:(注:“:”是比的意思)
物体投影的高度:焦距=物体实际的高度:(物体的Z轴值+焦距)
如果我们定义一个缩放比率(scaleRatio):
缩放比率(scaleRatio)=物体投影的高度:物体实际的高度;
那么我就可以获得
缩放比率(scaleRatio)=物体投影的高度:物体实际的高度=焦距:(物体的Z轴值+焦距)
如下图


对于X和Y轴,他们服从同样的关系,但是我们只要用一个缩放比率(scaleRatio)就行,他们服从同样的规律。
【贝武易科技专业flex3D开发--www.newflash3d.com】
这一节就讲到这里,请看下一节,flex/flash 3d基础2,接着讲。
  • 大小: 43.2 KB
  • 大小: 24.2 KB
  • Figure.rar (28.8 KB)
  • 描述: FigureMov.swf供下载
  • 下载次数: 170
  • 大小: 55.4 KB
  • 大小: 16.8 KB
  • Figure.rar (29.6 KB)
  • 描述: Figure.swf 静止的Figure
  • 下载次数: 160
  • 大小: 23.1 KB
  • 大小: 31.3 KB
  • 大小: 41.7 KB
  • 大小: 30.4 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics