'AS 3.0'에 해당되는 글 1건

  1. 2009.10.28 Flex 4 로 간단한 3D 구현하기
Flex/AIR/AS3/3D2009.10.28 18:37
Flex4로 변화되면서 가장 큰 변화가 바로 spark library가 포함된 점입니다.

이 spark library를 통해 Flex4에서는 아주 간단하게 Rotate3D를 이용하여 3D 효과를 표현 할 수 있는데

Flex Examples 사이트에서 쉬운 예제가 있어서 소개해 드리겠습니다.

우선 어떤 효과인지 한번 보고 구현하는 방법에 대해 알아보겠습니다.




아래는 위 플래쉬 예제의 소스입니다.
[출처] Flex Example
01 <?xml version="1.0" encoding="utf-8"?>
02 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
03                xmlns:s="library://ns.adobe.com/flex/spark" 
04                xmlns:mx="library://ns.adobe.com/flex/halo" width="360" height="300" backgroundColor="#000000">
05     <fx:Declarations>
06         <!-- Place non-visual elements (e.g., services, value objectshere -->
07         <s:Rotate3D id="rotate3DX"
08                     target="{image}"
09                     angleXFrom="0"
10                     angleXTo="360"
11                     duration="1000"
12                     autoCenterTransform="true" />
13         
14         <s:Rotate3D id="rotate3DY"
15                     target="{image}"
16                     angleYFrom="0"
17                     angleYTo="360"
18                     duration="1000"
19                     autoCenterTransform="true" />
20         
21         <s:Rotate3D id="rotate3DZ"
22                     target="{image}"
23                     angleZFrom="0"
24                     angleZTo="360"
25                     duration="1000"
26                     autoCenterTransform="true" />
27     </fx:Declarations>
28     
29     <mx:ApplicationControlBar width="100%" cornerRadius="0">
30         <s:Button id="buttonX"
31                   label="Rotate3D X-axis"
32                   click="rotate3DX.play();" />
33         <s:Button id="buttonY"
34                   label="Rotate3D Y-axis"
35                   click="rotate3DY.play();" />
36         <s:Button id="bButtonZ"
37                   label="Rotate3D Z-axis"
38                   click="rotate3DZ.play();" />
39     </mx:ApplicationControlBar>
40 
41     <s:BitmapImage id="image"
42                    source="@Embed('assets/3d.jpg')"
43                    resizeMode="scale"
44                    smooth="true"
45                    horizontalCenter="0"
46                    verticalCenter="0"
47                    width="100"
48                    height="100" />
49 
50 </s:Application>


ActionScript로 구현 하시려는 분은 다음 코드를 참고해주세요.
[출처] Flex Example
01 <?xml version="1.0" encoding="utf-8"?>
02 <!-- http://blog.flexexamples.com/2008/10/13/3d-rotating-objects-in-flex-using-the-fxrotate3d-effect-and-flash-player-10/ -->
03 <s:Application name="Spark_Rotate3D_test"
04         xmlns:fx="http://ns.adobe.com/mxml/2009"
05         xmlns:s="library://ns.adobe.com/flex/spark"
06         xmlns:mx="library://ns.adobe.com/flex/halo"
07         initialize="init();">
08     <s:layout>
09         <s:BasicLayout />
10     </s:layout>
11  
12     <fx:Script>
13         <![CDATA[
14             import mx.containers.ApplicationControlBar;
15             import spark.components.Button;
16             import spark.components.ResizeMode;
17             import spark.primitives.BitmapImage;
18             import spark.effects.Rotate3D;
19  
20             [Embed("assets/fx_appicon.jpg")]
21             private const FlexLogo:Class;
22  
23             private var rotate3DX:Rotate3D;
24             private var rotate3DY:Rotate3D;
25             private var rotate3DZ:Rotate3D;
26             private var image:BitmapImage;
27             private var buttonX:Button;
28             private var buttonY:Button;
29             private var buttonZ:Button;
30  
31             private function init():void {
32                 buttonX = new Button();
33                 buttonX.label = "Rotate3D X-axis";
34                 buttonX.addEventListener(MouseEvent.CLICK, buttonX_click);
35  
36                 buttonY = new Button();
37                 buttonY.label = "Rotate3D Y-axis";
38                 buttonY.addEventListener(MouseEvent.CLICK, buttonY_click);
39  
40                 buttonZ = new Button();
41                 buttonZ.label = "Rotate3D Z-axis";
42                 buttonZ.addEventListener(MouseEvent.CLICK, buttonZ_click);
43  
44                 var appControlBar:ApplicationControlBar = new ApplicationControlBar();
45                 appControlBar.percentWidth = 100;
46                 appControlBar.setStyle("cornerRadius"0);
47                 appControlBar.addElement(buttonX);
48                 appControlBar.addElement(buttonY);
49                 appControlBar.addElement(buttonZ);
50                 addElementAt(appControlBar, 0);
51  
52                 image = new BitmapImage();
53                 image.source = FlexLogo;
54                 image.smooth = true;
55                 image.resizeMode = ResizeMode.SCALE;
56                 image.width = 100;
57                 image.height = 100;
58                 image.horizontalCenter = 0;
59                 image.verticalCenter = 0;
60                 addElement(image);
61  
62                 rotate3DX = new Rotate3D(image);
63                 rotate3DX.angleXFrom = 0;
64                 rotate3DX.angleXTo = 360;
65                 rotate3DX.duration = 2000/* 2 seconds */
66                 rotate3DX.autoCenterTransform = true;
67  
68                 rotate3DY = new Rotate3D(image);
69                 rotate3DY.angleYFrom = 0;
70                 rotate3DY.angleYTo = 360;
71                 rotate3DY.duration = 2000/* 2 seconds */
72                 rotate3DY.autoCenterTransform = true;
73  
74                 rotate3DZ = new Rotate3D(image);
75                 rotate3DZ.angleZFrom = 0;
76                 rotate3DZ.angleZTo = 360;
77                 rotate3DZ.duration = 2000/* 2 seconds */
78                 rotate3DZ.autoCenterTransform = true;
79             }
80  
81             private function buttonX_click(evt:MouseEvent):void {
82                 rotate3DX.play();
83             }
84  
85             private function buttonY_click(evt:MouseEvent):void {
86                 rotate3DY.play();
87             }
88  
89             private function buttonZ_click(evt:MouseEvent):void {
90                 rotate3DZ.play();
91             }
92         ]]>
93     </fx:Script>
94  
95 </s:Application>

소스를 보시면 아시겠지만 구현하는게 매우 쉽게 이루어져 있는데 일반적인 effect를 사용하듯이 사용하시면
됩니다.

간단하게 프로퍼티에 대해 설명드리면

angleXFrom : X축의 시작 각도를 설정합니다. (Number 형태로 지정합니다.)
angleXTo : X축의 종료 각도를 설정합니다.
angleYFrom : Y축의 시작 각도를 설정합니다.
angleYTo : Y축의 종료 각도를 설정합니다.
angelZFrom : Z축의 시작 각도를 설정합니다.
angelZTo : Z축의 종료 각도를 설정합니다.

autoCenterTransfrom : true일 경우 회전축을 높이/2, 넓이/2 로 자동 설정합니다.
transformX : 효과의 중심이 되는 X 축을 설정합니다.
transformY : 효과의 중심이 되는 Y축을 설정합니다.
transformZ : 효과의 중심이 되는 Z축을 설정합니다.

duration : 효과 시간을 설정합니다. (1000 = 1초)
easer : easing을 설정합니다. (0.0 ~ 1.0)
filter : 추가 필터를 설정합니다.
startDelay : 효과 시작전 delay를 설정합니다. (1000 = 1초)
target : 효과 대상입니다. (Object 형태로 꼭 이미지가 아니여도 상관없습니다.)
targets : 효과 대상을 배열로 지정합니다. 효과를 적용할 대상들을 array 형태로 지정합니다.

정말로 3D 구현이 참 쉽습니다;; @.,@; 응용해서 참 여러가지를 만들 수 있을 것 같습니다.
점점 쉬워지는 flex 때문에 깊게 안들여다 보는 버릇이 생길까 살짝 두려워 진다는 ㅎㅎ;

[출처] Flex Example
저작자 표시 비영리
신고

'Flex/AIR/AS3 > 3D' 카테고리의 다른 글

Flex 4 로 간단한 3D 구현하기  (0) 2009.10.28
Posted by 코멧'★

티스토리 툴바