인터넷에서 만난 문서입니다.
쭉 보면 PV3D에 대한 기본 개념을 잡는데 조금 도움이 될 것 같습니다.
근데 언어가 영어가 아닙니다. +_=;;;;...(그래도 그림도 잘되어 있고...코드는 영어니까~^^...)
Posted by chacolina

댓글을 달아 주세요

  1. 오.. 좋은데요.

    2009.03.10 11:15 신고 [ ADDR : EDIT/ DEL : REPLY ]

Papervision3D를 익혀보자 (입문)

1.Papervision3D 관련 class들을 다운받는다. (  http://code.google.com/p/papervision3d/  )
2.Papervision3D는 AS3.0의 기본 계층구조와는 다른  별도의 계층구조를 가지고 있으므로 경우에 따른 상속관계를 잘 따져보아야 한다. (무엇을 상속 받았는가에 따라 가능한 기능이 달라지므로 계층구조를 숙지해야할 필요가 있다.)
3.Papervision3D의 기본 요소(viewPort3D,  Sceane3D,  Camera3D, BasicRenderEngine )를 익히고 활용해본다.


1.Papervision3D 관련 class들을 다운
http://code.google.com/p/papervision3d/  를 방문하여 최신버젼을 다운받고 폴더 중 nochump 와 org을 flex내 현재 프로젝트의 
src폴더에 넣는다.




2. Papervision3D 계층구조 및 기본 요소

AS3.0 DisplayObject 계층구조 보기




**Papervision3D의 기본 요소(viewPort3D,  Sceane3D,  Camera3D, BasicRenderEngine )
package
{
    import flash.display.Sprite;
    import flash.events.Event;
   
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;

[SWF (width="640", height="480", frameRate="36", backgroundColor="0xEEEEEE")] //meta tag는 꼭 붙여줍니다.
    public class PV3Test1 extends Sprite
    {
        // 1. ViewPort
        private var viewPort:Viewport3D;
        // 2. Scene3D
        private var scene3D:Scene3D;
        // 3. Camera3D
        private var camera3D:Camera3D;
        // 4. BasicRenderEngine
        private var randerEngine:BasicRenderEngine;

        //3D Object
        private var plan:Plane;
       
        public function PV3Test1()
        {
            super();
            //1.ViewPort 만들고 화면에 붙이기
            this.viewPort= new Viewport3D();
            this.addChild(this.viewPort);  //눈에 보이는 것이므로 addChild
            //2.Scene3D 만들기
            this.scene3D= new Scene3D();
            //3.Camera3D 만들기
            this.camera3D= new Camera3D();
            this.camera3D.zoom=40;
            this.camera3D.moveBackward(500);
            //4.RanderEngine 만들기
            this.randerEngine= new BasicRenderEngine();

            //3D Object 만들기
            this.plan= new Plane();
            this.scene3D.addChild(this.plan); //눈에 보이는 것이므로 addChild
           
            this.addEventListener(Event.ENTER_FRAME, onEnter);
        }
         private function onEnter(e:Event):void
         {
             this.plan.rotationY++;
             this.randerEngine.renderScene(this.scene3D, this.camera3D, this.viewPort );
         }
     
    }//class
}//package

위의 코드는 PV3D의 기본 틀이다. 자 이제부터는 위의 기본 요소들을 하나씩 짚어보면서 Papervision3D의 상속관계를 알아본다.

!!!!!상속받은 class로 직접 이동하는 방법..
ctrl 을 누르고 원하는 class 이름 위에 커서를 올리면 이름에 underline이 생깁니다. 그 상태에서 class 이름을 클릭하면 곧바로 해당 class 로 이동하게 됩니다. (mac은 사과를 누르세요~) 이러한 방법으로 잘 모르는 class일지라도 상속관계를 찾아들어가 유추할 수 있는 것입니다.


1. ViewPort3D
*상속관계 ViewPort3D -> Sprite
(ViewPort는 Sprite 상속받았으므로 눈에 보이는 것임을 알 수 있다.)
ViewPort는 PV3D에 의해서 만들어지는 화면(이미지/영상)을 플래시에 연결시키는 ... 클래스이다.     
PV3D는 flash와는 전혀 다른 독자적인 화면랜더링 방식을 취하기 때문에 PV3D와 flash를 연결해주는 것이 필요하다.
그 역할을 ViewPort가 하는 것이다. { PV3D <--> flash }


2. Scene3D
*상속관계 Scene3D -> SceneObject3D -> DisplayObjectContainer3D -> EventDispatcher -> Object
(기본 상속관계 뼈대를 벗어나 자기만의 상속관계를 가진다는 것을 알 수 있다.)
Scene3D는 PV3D에서 stage와 같은 역할을 하는 객체이다. 그러므로  container 역할이 필요함(
DisplayObjectContainer3D 상속 )
여기서 DisplayObjectContainer3D 는 DisplayObject3D를 담을 수 있는 능력이 있어서
addChild( displayObject3D ) / removeChild /  numChildren 와 같은 기능이 가능하다.
( AS3  DisplayObject 기본 계층구조의 DisplayObjectContainer 참조)


3. Camera3D
*상속관계 Camera3D -> CameraObject3D -> DisplayObject3D -> DisplayObjectContainer3D -> EventDispatcher -> Object
( DisplayObjectContainer3D을 상속받았다는 것이 매우 중요하다.)
DisplayObject3D ::: 플래시의 Sprite 같은 객체로서
x, y, z, scaleX, scaleY, scaleZ, rotationX, rotationY, rotationZ, alpha, ... addChild/ removeChild 가 가능하다.
기존 flash는 고정 카메라였으나 PV3D에서는 다양한 각도와 움직임이 있기 때문에 상당히 복잡한 메카니즘을 가지게 된다.


4.BasicRenderEngine
*상속관계 BasicRenderEngine -> AbstractRenderEngine ->  EventDispatcher -> Object
플래쉬는 플래시 플레이어가 알아서 랜더링 해주지만 플래시 플레이어는 DisplayObject를 상속받은 객체만 랜더링 해준다...
PV3D는 DisplayObject를 상속받은게 아니라서.... 별로도 랜더링 해 줄수있는... flashPlayer 같은 객체가 필요하다...!!   
그 역할을 RenderEngine이 하는 것이다.


*** Plane (for 3D Object)
*상속관계 Plane -> TriangleMesh3D -> Vertices3D -> DisplayObject3D -> DisplayObjectContainer3D -> EventDispatcher -> Object
TriangleMesh3D :: 삼각형 면  <--- 안에 내용( material )을 채울 수 있다..
눈에 보이기 위한 최소면 단위는 삼각형이다. (3개 vertexs(점들)이 이루는 최소면 )  그래서 눈에 보이는 도형들은 모두 TriangleMesh3D 로 만든다. (점 두개가 모이면 선...선은 눈에 보이지 않는다...점 세개가 모이면 면이 된다. 그러므로 최소한의 면은 점 세개가 모여서 만들어진 트라이앵글이다.) 복잡한 도형의 경우 여러개의 triangle을 연결하여 만드는 것이다.



3.Papervision3D 활용

Basic 틀이 되는 코드 만들기
SuperClass: Sprite

PV3DTest


결과



기본이 되는 코드를 별도 class로 만들어 놓으면 기본 사항을 반복하여 코딩하지 않아도 되므로 유용하다.
기본 내용을 포함한 Base3D라는 class를 만들어 저장하고 이것을 Document class로 불러들여 (상속) 활용하도록 해보자.

먼저 flex내에서 Base3D class를 만들기 위한 as 파일을 생성한다.
해당 프로젝트 src폴더에서 오른쪽 마우스 클릭 > new > Actionscript class

팝업이 뜨면 package 이름/ 경로와 as. 파일의 name, 기본적으로 상속받을 Superclass를 지정해준다. (Superclass 시작은 대문자)
package 이름/경로는 본인이 원하는대로 적어주면 자동으로 생성된다.
여기서는 자신이 만든 class를 timo라는 폴더에 넣어두어 관리하고있다.




Package: timo.pv3d  SuperClass: Spriite

Base3D



Base3D를 상속받은 여러가지 Document class를 만들어보기
.

Superclass: Sprte   (사각형 안을 채우기)

PV3DTest1


결과



Superclass Base3D  (양쪽 면에 다른 색 입히기  )

PV3DTest2


결과



Superclass Base3D  (회전 중심축 이동하기 )

PV3DTest3


결과



Superclass: Base3D  (표면에 perlinNoise 를 입히기)

PV3DTest4


결과



Superclass Base3D  (이미지 파일을 표면에 입히기)

PV3DTest5


결과



Superclass Base3D  (지구 이미지를 입히고 지구를 도는 달을 만들어보기)

PV3DTest6


결과



Superclass Base3D (특정 개체의 움직임을 절대 중심에 두고 카메라를 이동 시켜보기 )

PV3DTest7


결과



Reference
http://blog.papervision3d.org/
http://code.google.com/p/papervision3d/ 
Posted by chacolina

댓글을 달아 주세요

  1. 신명용 강사님 수업 내용 중 Papervision3D 입문 부분을 정리해서 올립니다. 도움이 되길 바랍니다.
    계속 강조했던 부분은 코드 몇개 짜는 것이 중요한 것이 아니라 계층구조 및 원리에 대한 이해가 필요하다는 것입니다.

    그리고 3D max 등에서 얻은 결과물을 임포트하여 활용 할 수도 있다니..3D tool이 가능하신 분들은 더 멋진 것을 만들 수 있겠습니다.

    마지막으로 위의 내용은 flex 환경을 기본으로 하였으니 참고하시기 바랍니다. 아마도 flash에서 하는 것은 아래 동윤씨가 초반에 써놓으신 가이드를 보시면 될 것 같습니다. 그럼 안녕....

    2009.03.05 19:31 신고 [ ADDR : EDIT/ DEL : REPLY ]


다양한 웹사이트와 레퍼런스를 참조한 결과 단순히 다음 코드 한줄로 될 줄 알았습니다만,
보안정책상 마우스나 키보드 이벤트를 받은 후처리로서의 동작으로만 가능하다고 합니다.

즉, 시작부분에 단순히 다음 코드를 삽입해서 자동으로 풀스크린으로 들어가도록 하는것은 동작하지 않는것 같습니다.
stage.displayState = StageDisplayState.FULL_SCREEN;

다음과 같이 메뉴나 버튼등을 활용하여 이벤트 처리시 풀스크린 진입을 가능하게 해주면 됩니다.
아래의 예는 플래시에서 우측클릭시 뜨는 팝업메뉴에 Go Full Screen / Exit full Screen 메뉴를 삽입한 경우입니다.

... 클래스의 constructor 부분에서 다음과 같이 built-in 메뉴를 풀스크린 관련 메뉴 아이템으로 대체, 이벤트 핸들러 선언.
     
            var fullscreenCM:ContextMenu = new ContextMenu();
            fullscreenCM.addEventListener(ContextMenuEvent.MENU_SELECT, menuHandler);
            fullscreenCM.hideBuiltInItems();
           
            var fs:ContextMenuItem = new ContextMenuItem("Go Full Screen" );
            fs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, goFullScreen);
            fullscreenCM.customItems.push( fs );
           
            var xfs:ContextMenuItem = new ContextMenuItem("Exit Full Screen");
            xfs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, exitFullScreen);
            fullscreenCM.customItems.push( xfs );
           
            contextMenu = fullscreenCM;

   
다음과 같이 이벤트 핸들러 구현.
        // functions to enter and leave full screen mode
        public function goFullScreen(event:ContextMenuEvent):void
        {
           stage.displayState = StageDisplayState.FULL_SCREEN;
        }
        public function exitFullScreen(event:ContextMenuEvent):void
        {
           stage.displayState = StageDisplayState.NORMAL;
        }

중요한것은 이걸로 끝이 아니고 publish된 html 파일에서 allowFullScreen 내용들을 true로 수정해 주어야 합니다.
수정하지 않으면 다음과 같이 보안관련 에러가 발생합니다.


  
<script language="JavaScript" type="text/javascript">
    AC_FL_RunContent(
        'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
        ...

        'allowFullScreen', 'true',

        ...

        ); //end AC code
</script>

    <object classid="clsid:d27 ...
    ...
    <param name="allowFullScreen" value="true" />
    <param name="movie" value="test.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />    <embed src="test.swf" quality="high" bgcolor="#ffffff" width="1280" height="760" name="test" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    </object>



Posted by 박동윤(http://www.cre8ive.kr) cre8ive

댓글을 달아 주세요


Papervision3D 의 기본 뼈대가 되는 코드는 다음과 같습니다.

기본적으로 Sprite 클래스를 상속받고, Viewport3D, Scene3D, Camera3D, BasicRenderEngine 들을 생성/초기화 한 후,
Event.ENTER_FRAME 의 이벤트헨들러에서 계속적으로 renderScene 을 호출하여 3D 화면을 렌더링 합니다.
아래는 검은 배경에 와이어프레임형태의 구(Sphere)를 하나 그리는 내용입니다.

package
{
    import flash.display.Sprite;
    import flash.events.Event;
 
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.objects.primitives.Sphere;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
 
    [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
    public class HelloPV3D extends Sprite
    {
        private var viewport:Viewport3D;
        private var scene:Scene3D;
        private var camera:Camera3D;
        private var renderer:BasicRenderEngine;
 
        public function HelloPV3D()
        {
            viewport = new Viewport3D();
            addChild(viewport);
 
            scene = new Scene3D();
            camera = new Camera3D();
            renderer = new BasicRenderEngine();
 
            var sphere:Sphere = new Sphere();
            scene.addChild(sphere);
 
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
        }
 
        private function enterFrameHandler(event:Event):void
        {
            renderer.renderScene(scene, camera, viewport);
        }
 
    }
}

Viewport3D, Scene3D, Camera3D, BasicRenderEngine 이들이 핵심이라고 할 수 있는데, 이들의 정체를 Reference 에서 살펴보면 다음과 같습니다.

Viewport3D Inheritance flash.display.Sprite
Scene3D Inheritance SceneObject3D Inheritance DisplayObjectContainer3D Inheritance flash.events.EventDispatcher
Camera3D Inheritance CameraObject3D Inheritance DisplayObject3D Inheritance DisplayObjectContainer3D Inheritance flash.events.EventDispatcher
BasicRenderEngine Inheritance AbstractRenderEngine Inheritance flash.events.EventDispatcher

BasicRenderEngine links Viewport3Ds, Scene3D, and Camera3Ds together by gathering in all of their data, rendering the data, then calling the necessary functions to update from the rendered data

한편, 위와 같은 일련의 기본적인 초기화 코드를 구현해 놓은 클래스가 있는데, 바로 BasicView 입니다.
BasicView 를 사용하면 Viewport3D, Scene3D, Camera3D, BasicRenderEngine 초기화 과정을 거치지 않아도 됩니다.

package
{
    import org.papervision3d.objects.primitives.Sphere;
    import org.papervision3d.view.BasicView;
 
    [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
    public class BasicViewTest extends BasicView
    {
        public function BasicViewTest()
        {
            var sphere:Sphere = new Sphere();
            scene.addChild(sphere);
            startRendering();
        }
 
    }
}

이때 render.renderScene(scene, camera, viewport) 부분이 startRendering() 으로 바뀐 것을 볼 수 있습니다.
만약 매 프레임 렌더시에 무언가를 하려면 다음과 같이 BasicView 의 render 함수를 오버라이드해서 우리가 구현할 수 있습니다.

package
{
    import flash.events.Event;

    import org.papervision3d.objects.primitives.Sphere;
    import org.papervision3d.view.BasicView;
 
    [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
    public class BasicViewTest extends BasicView
    {
        public function BasicViewTest()
        {
            var sphere:Sphere = new Sphere();
            scene.addChild(sphere);
            startRendering();
        }

        override protected function onRenderTick(event:Event=null):void
        {
            // 여기서 추가적인 무엇인가를 수행
            renderer.renderScene(scene, camera, viewport);
        }

    }
}

onRenderTick 은 BasicView 클래스에 구현되어 있습니다만, 우리가 여기서 override 하여 우리만의 추가적인
기능을 부여할 수 있습니다.


이번엔 면(Plane)을 하나 만들어 빙글빙글 돌려 보겠습니다.



package
{
    import flash.display.Sprite;
    import flash.events.Event;
 
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    
    import org.papervision3d.materials.ColorMaterial; // 면에 입힐 재질 라이브러리
    import org.papervision3d.objects.primitives.Plane; // 면을 위한 라이브러리 

    [SWF(width="640", height="480", backgroundColor="#ffffff", frameRate="60")]
    public class HelloPV3D extends Sprite
    {
        private var viewport:Viewport3D;
        private var scene:Scene3D;
        private var camera:Camera3D;
        private var renderer:BasicRenderEngine;
        public var plane:Plane; // Plane(면) 클래스의 인스턴스변수 선언

        public function HelloPV3D()
        {
            viewport = new Viewport3D();
            addChild(viewport);
 
            scene = new Scene3D();
            camera = new Camera3D();
            renderer = new BasicRenderEngine();
 
            var material:ColorMaterial = new ColorMaterial(0x33ddff, 1); // 파란색 재질 생성
            material.doubleSided = true;

            plane = new Plane(material, 300, 300, 1, 1); // 위에서 만든 재질로 면을 생성
            scene.addChild(plane); // 씬에 면을 추가
 
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
        }
 
        private function enterFrameHandler(event:Event):void
        {
            plane.yaw(2); // 면을 2도씩 Y축을 기준으로돌린다
            renderer.renderScene(scene, camera, viewport);
        }
 
    }
}

위에서 x, y, z 축의 회전은 각각 pitch, yaw, roll 을 사용합니다. 즉,
plane.pitch(2);
plane.yaw(2);
plane.roll(2);
이렇게 다 써주면 x,y,z 축 모두를 기준으로 빙글빙글 돌겠죠.
Posted by 박동윤(http://www.cre8ive.kr) cre8ive

댓글을 달아 주세요

Official Reference
http://papervision3d.googlecode.com/svn/trunk/as3/trunk/docs/index.html

활용사례 Websites
http://www.airtightinteractive.com/projects/tiltviewer/app/
http://www.whitevoid.com/application.html
http://www.eric-tombarel.com/
http://www.o2memoryproject.com/
http://www.babynrs.nl/
http://www.redbull.com/flightlab/#/Game/1231095529844-53040032
Posted by 박동윤(http://www.cre8ive.kr) cre8ive

댓글을 달아 주세요

  1. 우앙 넘 멋지네요

    2009.02.18 21:48 신고 [ ADDR : EDIT/ DEL : REPLY ]


타임라인 기반 플래시에서 easing 이라고 불렸던, 기타 애프터이펙트나 3D 프로그램들의 애니메이션 그래프에서 볼 수 있는
부드러운 가/감속 기능을 구현해 놓은 클래스 입니다. 어떤 인터렉션 작업을 하던 필수적으로 사용되므로 꼭 알아놓아야 할
클래스 중에 하나입니다.

기본적으로는 Adobe 에서 구현해놓은 Tween 클래스가 이미 flash 에 내장이 되어있습니다만, 퍼포먼스를 이보다 개선한 클래스들이 몇 있습니다. 그중 널리 사용되는 유명한 클래스가 caurina tweener 이고, 다른하나는 tweenmax 입니다.

Caurina Tweener
http://code.google.com/p/tweener/

TweenMax
http://blog.greensock.com/tweenmaxas3/


Posted by 박동윤(http://www.cre8ive.kr) cre8ive

댓글을 달아 주세요



CS4의 Preferences 의 ActionScript 3.0 Settings 메뉴는 CS3와 달리
위 화면과 같이 세가지로 구분이 되어있습니다. 아래 설명은 Adobe Help 에서 찾은 설명입니다. 참고하세요.
즉 .as 로 존재하는 library 들은 위와같이 첫번째 source path 에 경로를 지정해주면 되고,
.swc 로 존재하는 library 들은 두번째의 library path 에 경로를 지정해주면 됩니다.

이렇게 flash의 Preferences 에서 설정한 라이브러리는 모든 flash파일에 공통적으로 적용이 되고 사용할 수 있으므로, Papervision3D 와 같은 라이브러리는 여기서 설정하여 사용할 수 있게 하면 좋겠죠. (Application level)

각 flash파일에서만 필요한 라이브러리는 해당 파일의 publish setting 화면에서 ActionScript 3.0 Setting 에서 path를 지정해 줄 수 있습니다. (Document level)

Set the location of ActionScript files

To use an ActionScript class that you’ve defined, Flash must locate the external ActionScript files that contain the class definition. The list of folders in which Flash searches for class definitions is called the classpath for ActionScript 2.0 and the source path for ActionScript 3.0. Classpaths and source paths exist at the application (global) or document level. For more information about classpaths, see Classes in Learning ActionScript 2.0 in Adobe Flash or “Packages” in Programming ActionScript 3.0.


You can set the following ActionScript locations in Flash:

  • ActionScript 2.0

    • Application level (available to all AS2 FLA files):

      • Classpath (set in ActionScript preferences)

    • Document level (available only to the FLA file that specifies this path):

      • Classpath (set in Publish Settings)

  • ActionScript 3.0

    • Application level (available to all AS3 FLA files):

      • Source path (set in ActionScript preferences)

      • Library path (set in ActionScript preferences)

      • External library path (set in ActionScript preferences)

    • Document level (available only to the FLA file that specifies these paths):

      • Source path (set in Publish Settings)

      • Library path (set in Publish Settings)

      • External library path (set in Publish Settings)

      • Document class (set in Document Property inspector)

In ActionScript 3.0, there are two additional paths that you can set to specify the locations of ActionScript resources.

The Library path specifies the location of pre-compiled ActionScript code which resides in SWC files you have created. The FLA file that specifies this path loads every SWC file at the top level of this path and any other code resources that are specified within the SWC files themselves. If you use the Library path, be sure none of the compiled code in the SWC files is duplicated in uncompiled AS files in the Source path. The redundant code will slow down compilation of your SWF file.

The External Library path specifies the location of SWC files that contain code used for compiler error definitions. This path can be used to load external code resources in SWC format so that the classes within them can be used at runtime. When you compile a SWF, the SWC files in the External Library path are not added to the SWF file, but the compiler verifies that they are in the locations you specified. The External Library path is most often used for runtime shared libraries. For more information about runtime shared libraries, see Working with runtime shared assets. For more information about loading external code at runtime, see Programming ActionScript 3.0.

For each type of resource path, you can specify more than one path for Flash to look in. Resources found in any of the paths specified will be used.

Posted by 박동윤(http://www.cre8ive.kr) cre8ive

댓글을 달아 주세요


1. Papervision3D 설치

Papervision3D Google Code - Download 에서 Papervision3D 라이브러리 zip 파일을 받을 수 있습니다.
http://code.google.com/p/papervision3d/

받으신 압축파일은 데스크탑이나 기타 위치에 풀어놓으면 됩니다.
(아래의 경우는 Papervision3D_2.0.869 라는 폴더)

Flash 의 Preference - ActionScript - ActionScript 3.0 Settings 에서 다음과 같이 해당 폴더를 지정해 줍니다.
이렇게 하면 Flash 에서 Papervision3D 에 정의/구현 되어 있는 DisplayObject3D, ViewPort3D 등 3D 관련
Class 들을 사용 할 수 있게 됩니다. 

CS3 에서 설정방법



CS4 에서 설정방법



2. 샘플 코드 실행
많은 Papervision3D의 샘플코드들을 받아보면 Document Class 방식으로 되어있어 .as 파일만 존재합니다.
따라서, 이를 실행해보기 위해서는 신규 AS3.0 의 fla 파일을 만들어 해당 class 를 지정해 주어야 합니다.
즉 .as 파일을 실행하기 위한 껍데기(?)가 필요한 것입니다.

다음 예제파일을 실행해 보도록 하겠습니다.
http://pv3d.org/2009/02/03/internal-carousel/

다음과 같이 일단 .as 파일을 flash 에서 오픈합니다.



새 Flash 파일을 만듭니다. (AS3.0으로)


새파일을 .as 파일이 있는 폴더에 같이 저장합니다. (fla 로저장되겠죠. 이름은 상관 없습니다)
저장 후, 우측의 Properties 탭에서 Class 라는 부분의 필드에 해당 .as 의 파일명 (=클래스명)을 입력해 줍니다.
이때 .as 는 입력하지 않습니다.
CS3 에서는 화면 아래쪽에 Document Class 라는 필드가 있습니다.


입력후 우측의 연필모양의 버튼을 눌렀을때 .as 파일이 잘 열리면 제대로 연결 지정이 된 겁니다.
즉 새로만든 Test.fla 파일은 지정한 InternalCarousel 이라는 클래스를 사용하여 동작한다고 명시를 해 준 것입니다.


실행을해봅니다. 실행이 되지 않으면 output 창의 로그를 확인하세요. 주로 Papervision3D 라이브러리 패스가
올바르게 설정되지 않은 경우가 많습니다.


Posted by 박동윤(http://www.cre8ive.kr) cre8ive

댓글을 달아 주세요

  1. 야호..설치..실험 모두 잘 되었어요..아흐 공부하면 할 수록 방대한 액션스크립트여...-_-;;;

    2009.02.17 13:04 신고 [ ADDR : EDIT/ DEL : REPLY ]

CS3 /AS3.0 이후의 큰 특징중 하나인 Document Class 라는 개념입니다.
코드부분이 완전히 분리되어서 별도의 독립적인 파일이 존재합니다. .fla / .as

아래 영상을 참고하세요.
http://www.adobe.com/designcenter/video_workshop/?id=vid0129

Papervision3D 를 보시려면 Document Class 를 알고 시작하면 도움이 많이 됩니다.
아래는 Adobe Help 에 있는 설명입니다. 참고하세요.

Declare an ActionScript 3.0 document class

When you use ActionScript 3.0, a SWF file may have a top-level class associated with it. This class is called the document class. When the SWF is loaded by Flash Player, an instance of this class is created to be the SWF file's top-level object. This object of a SWF file can be an instance of any custom class you choose.

For example, a SWF file that implements a calendar component can associate its top level with a Calendar class, with methods and properties appropriate to a calendar component. When the SWF is loaded, Flash Player creates an instance of this Calendar class.

  1. Deselect all objects on the Stage and in the Timeline by clicking a blank area of the Stage. This displays the Document properties in the Property inspector.
  2. Enter the filename of the ActionScript file for the class in the Document Class text box in the Property inspector. Do not include the .as filename extension.
Note: You can also enter the Document Class information in the Publish Settings dialog box.

Posted by 박동윤(http://www.cre8ive.kr) cre8ive

댓글을 달아 주세요

ActionScript 3.0을 공부하기위한 가장 기본적으로, 항상 참고해야할 사이트 입니다.
ActionScript Technology Center
http://www.adobe.com/devnet/actionscript/

레퍼런스
http://help.adobe.com/en_US/AS3LCR/Flash_10.0/

페이지를 보시면 다음과 같이 레퍼런스와 Programming 가이드 문서가 있습니다.
한글 버전은 주요 Object들의 이름들까지 한글로 번역을 해놓아서 오히려 혼돈의 우려가 있더군요.
(예:Display Object - 표시객체)
따라서, 영문문서를 보는것이 좋습니다. 아래와 같이 문서들이 있습니다.



일단은 Flash 를 기준으로 스터디를 하기 위해 Flash용 문서를 받아 보시면 됩니다.
(ActionScript 에 대한 내용은 기본적으로 같습니다.)

해당 페이지로 들어가셔서 우측 상단을 보시면 PDF 로 다운로드 받을 수 있는 메뉴가 있습니다.
PDF 로 저장해놓고 수시로 볼 수 있는게 좋겠죠.


AS3.0 의 주요 특징
- ActionScript 3.0 goes beyond the scripting capabilities of previous versions of ActionScript. It is designed to facilitate the creation of highly complex applications with large data sets and object-oriented, reusable code bases.
- 새로운 버전의 ActionScript Virtual Machine2 (AVM2) 사용
- ActionScript 3.0 is architecturally and conceptually different from previous versions of ActionScript.
- A single SWF file cannot combine ActionScript 1.0 or 2.0 code with ActionScript 3.0 code.

AS2.0 과의 표면적인 차이점
완전한 프로그래밍 언어의 성격을 갖추면서 변수의 타입을 명확하게 명시를 해주어야 합니다.
기존처럼 타임라인 여기저기서 무비클립등에다가 임의로 이름만 써서 변수를 만들던 방식은 이제 통용불가!

다음과 같이 변수 선언시 var 를 붙이고, 변수이름 뒤에는 : 와 타입명을 명시해주어야 함.
var myNumber:Number = 17;
var myString:String = "Hello SADI";


class (클래스) 와 object (객체) 그리고 instance(인스턴스) 개념
AS3.0 이 Object Oriented Programming 을 지향하면서 이들의 개념도 알아야 제대로 다룰 수 있게 되었습니다.
이들은 Processing 이나 Java 에 등장하는 class 와 같습니다.

Two words that are often used as synonyms for data type are class and object. A class is simply the definition of a data type—it’s like a template for all objects of the data type, like saying “all variables of the Example data type have these characteristics: A, B, and C.” An object, on the other hand, is just an actual instance of a class; a variable whose data type is MovieClip could be described as a MovieClip object. The following are different ways of saying the same thing:

•The data type of the variable myVariable is Number.
•The variable myVariable is a Number instance.
•The variable myVariable is a Number object.
•The variable myVariable is an instance of the Number class.

즉 class 는 붕어빵 틀과 같은 틀을 말하고 object 나 instance 라는 말은 실제로 찍어낸 붕어빵들을 말합니다.


이벤트 핸들링
AS3.0 에서는 다음과같이 이벤트 리스너 메소드(=함수) 를 만들어놓고, addEventListener 라는 함수로 등록을 해줍니다.

function myEventResponse(event:MouseEvent):void
{
// myButton 이 클릭되었을때 실행할 동작 구현...
}

myButton.addEventListener(MouseEvent.CLICK, myEventResponse);


DisplayObject 계층구조 (신명용 강사님의 세미나 자료 내용)
AS3.0 으로 Flash 를 제대로 다루려면, 다음 구조를 정확히 알고있어야 합니다.

MovieClip Inheritance Sprite Inheritance DisplayObjectContainer Inheritance InteractiveObject Inheritance DisplayObject Inheritance EventDispatcher Inheritance Object

Object  최상위 객체 - 모든 클래스는 Object를 상속
EventDispatcher
 이벤트 발생기
 addEventListner(이벤트타입, 리스너함수);
 removeEventListener(이벤트타입, 리스너함수);
 dispatchEvent(이벤트)
DisplayObject
 눈에 보이는 객체 : Graphics, Bitmap, Shape
 x, y, width, height, alpha, rotation, visible,
 mouseX, mouseY, scaleX, scaleY
 (AS1.0에서는 속성들 앞에 _ 가 붙었으나 이젠 붙이지 않음)
InteractiveObject
 사용자에 반응하는 객체
 SimpleButton, TextField
DisplayObjectContainer
 다른 객체를 포함할 수 있는 객체 (Sprite, Stage, Loader)
 담긴객체 : child, 담는객체 : parent, 깊이 : index
 mouseChildren, numChildren, tabChildren
 contains(), addChild(), addChildAt(), removeChild(),
 removeChildAt(), getChildIndex(), getChildAt(),
 setChildIndex()
Sprite
 프레임이 없는 무비클립
 buttonMode, graphics, hitArea, soundTransform ...
 startDrag(), stopDrag()
MovieClip
 프레임을 가진 Sprite


Posted by 박동윤(http://www.cre8ive.kr) cre8ive

댓글을 달아 주세요


티스토리 툴바