Shu Player 는 AIR 응용프로그램을 독립적으로 실행 될 수 있도록 exe 파일로 만들어 준다. 사실 AIR 응용프로그램은 AIR 런타임이 설치되어진 환경에서 설치하고 실행 하는게 더욱 편리하기는 하나 모든 시스템에 AIR 런타임이 설치되 있음을 보장 받을 수 없음을 감안 한다면 응용프로그램을 배포 할 때 있어 좋은 솔루션이 될 수 있다.
드래그앤 드랍의 매우 직관적인 인터페이스에 윈도우 / 맥을 모두 지원하는 장점이 있으나 Shu Lite 버전이 100파운드 Shu 버전이 250파운드는 조금 비싼 감이 있다.
최근 Adobe 에서 배포하고 있는 몇몇 어플리케이션들(Adobe Media Player, Adobe Configurator)이 이와 유사한 방식으로 AIR 를 독립적으로 실행 시키는 것으로 봐서는 더 나은 Wrapp 방법이 있을 듯 싶다.
Splash 창이 나오는 무료 데모버전을 아래의 링크에서 받을 수 있다.
]]>현재 트윈을 위해 나와 있는 함수들은 다음과 같다.
– Tween : 플래쉬 내장 기본 함수
– Tweener : caurina.transitions.Tweener
– TweenLite : gs.TweenLite
현재 사용해본 것들 중에는 TweenLite가 단연 독보적 이다. 성능이나 사용성 에서 모두 만족 스럽다. 하지만 여기에 만족하지 못하고 더 나은 Tween 엔진을 위해 새롭게 gTween 이 나왔다.
gTween: A New Tweening Engine for AS3 Developers
There are a lot of great tweening engines out there. Personally, I’m a huge fan of Jack Doyle’s TweenLite (and he’s been incredibly productive adding new features lately). However, none of these libraries exactly fit the needs of me and my team. I wanted an engine that was small, fast, hugely flexible, and built from the ground up for AS3 and developers.
gTween을 공개한 Grant Skinner(이름인지 확실히 모르겠다)는 블로그에서 윗 처럼 gTween의 의의를 설명하고 있다. gTween은 더 작고 더 빠르고 더 유연한 (올림픽 슬로건인가?) Tween 엔진이 될 것이다.
필자도 아직 사용해 보진 않았으나 공개하고 있는 개요만 보아도 상당히 흥미로운 기능들이 보인다. 간단히 알아보면 Developer Oriented, Proxy Tweening, Interruptible, Sequencing, Timing Modes, Pause All, Events, Resource Management 이다. 이 중 Interruptible이나 Sequencing등은 모션 작업을 하는데 더욱 유용하게 쓰일 것 같다. 또 이벤트를 컨트롤을 addEventListener를 사용하여 as3 이벤트 작성 방법과 동일하여 편리 할 것 같다.
현재 알파를 공개중이며 개발자들의 많은 피드백을 원하고 있으니 영어가 능통하신 분들은 의견을 보내줘도 좋을거 같다.
]]>아직까지는 대부분의 플레이어가 Flash Player 9이기 때문에 FP10으로 실 프로젝트를 진행 할 수는 없다. 다만 성급한 작업자로서 FP10의 새로운 기능들과 테스트를 위해서 FP10 swf파일(이하 swf)을 만들 수 있는 환경을 만들어 보았다.
1. 준비물
FP10으로 작업을 하기 위해서는 swf를 만들어 줄 SDK와 FP10이 필요하다. 아직까지 Flash 10이 없으므로 현재까지 swf를 만들 방법은 Flex SDK를 이용하는 수 밖에 없다. 최신에 나온 Flex 3, Flex 4 모두 이용 할 수 있다. 다만 Flex 4 의 변경된 점 도 알아볼 겸 Flex4 를 추천한다. 그리고 마지막으로 FP10을 준비한다.
– Flex 3 SDK : 다운로드
– Flex 4 SDK : 다운로드
– Flash Player 10 : 다운로드
– Flash Player 10 Debug : 다운로드
최근 FP10 Debug 또한 릴리즈 되었다. Debug를 이용할 사용자라면 FP10 Debug를 설치 할 것을 추천한다.
2. Flash Player 10 설치하기
a. 기존의 Flah Player 삭제
b. FP10 설치
3. Flex Builder 3 설정하기
a. flex_config.xml 설정
기존에는 FLEX_SDK/frameworks/flex-config.xml 을 수정해 줬어야 하지만 최신 SDK 는 FP10 이 기본으로 설정 되어 있으므로 따로 수정해줘야 할 필요는 없다. 다만 필자도 이상하게 playerglobal.swc 가 인식이 안되어서 제대로 컴파일이 안되는 문제가 있었는데 만약 Flex Builder 에 SDK 를 설치하고 나서 제대로 컴파일이 안된다면
[sourcecode language=”xml”]
[/sourcecode]
[sourcecode language=”xml”]
두 부분의 {targetPlayerMajorVersion}을 10 으로 변경하고 재설치 해보기 바란다.
b. Flex SDK 설치
메뉴 -> Window > Preferences > Flex > Installed Flex SDKs 에서 새로운 SDK를 설치한다.
c. Project 설정
새로운 Project를 생성하고 메뉴 -> Project > Properties > Flex Compiler 에서 Flex SDK version 과 Require Flash Player version 을 수정한다.
4. 테스트
새로운 mxml 파일을 만들고 아래에 코드를 넣어 버젼을 확인한다.
[code xml]
…수정중…
[/code]
5. 맺음말
FP10은 많은 새로운 기능들을 선보이며 화려하게 선보였다. 아직은 버그나 보안, 시스템에 최적화 등 많은 문제점을 가지고 있지만 이러한 것들은 앞으로 충분히 개선이 되리라 생각한다. 따끈따끈한 FP10 으로 모두 즐플 하시길 바랍니다.
6. 참고
http://opensource.adobe.com/wiki/display/flexsdk/Targeting+Flash+Player+10+Beta
http://blog.jidolstar.com/360
채널을 로드하는데 시간이 조금 걸리니 잠시만 기다려주시기 바랍니다. #channels: 155 #frames: 30, startTime: 0 endTime: 0.966667 애니메이션을 로드 하는데 시간이 상당히 걸리는데 아직까지는 줄이는 법을 모르겠다. 실작업에 사용하기에는 참 부담스러운 시간이다.
지금까지 공부한 여러가지를 복합적으로 적용시켜보았다. 가장 어려웠던건 카메라 돌리기였다. 일단 lookAt 이 센터로 잡혀 있어서 x, y, z 만 이동 시켜 주면 된느데 이걸 원으로 그리는 게 무지 힘들었다. 원은 어떻게든 그리겠는데 구는 아직도 제대로 구현이 안되고 있다.
W, A, S, D 를 누르면 캐릭터가 걷는데 핵심은 W를 눌러서 앞으로 갈때 걷는 애니메이션을 보여주는 부분이다. 나머지 키로 방향 전환을 하는데 정확하게 컨트롤을 하지 않아서 가끔 문워크를 한다. 이럴때는 S 키를 한번 눌러주면 해결된다.
]]>Papervision3D 2 Great White 의 재질 테스트이다.
기본 소스는 http://dev.papervision3d.org/2008/06/25/pv3d-20-materials/ 를 참고하였다.
특이점은 Environmental Map 과 BitmapFileMaterial 인데 전자는 lightmap이 제대로 만들어지지 않는 것 같고 [ 추가 – lightmap 보다는 pointLight 가 정상 작동 하지 않는 것 같다. Goraud 매터리얼 만 해도 그림자가 고정적으로 보여 하는데 맵핑 되어진 상태로 있다. ] 후자는 이미지 색이 빠진다. 후자는 목록에서 Select Material 를 누르면 다시 볼 수 있다.
일단 이 소스에서는 단일 맵핑만 되어있는데 실제 3D에서는 여러 맵핑이 공존해야 하는데 이게 가능한지의 여부는 아직 모르겠다. 추가 – 혹시 해서 다시 확인해 봤는데 Composite Material 에 여러 재질을 추가 할 수 있다.
light 에 관련한 material 들이 제대로 동작하지 않는건 본 예제에 사용한 collada와 관련 있는 듯하다. 단순한 collada 에서는 light 가 제대로 작동해서 이에 관련 된 material 도 정상작동한다.
]]>
dTribe에 입사해서 메인으로는 처음 작업한 사이트. 일주일이라는 엄청나게 짧은 일정 때문에 많이 힘들었다. 메인으로 처음 작업한거라 정성을 많이 들이고 싶었지만 짧은 일정때문에 욕심만큼 많은 걸 하지 못해서 조금은 아쉽다.
처음으로 실 프로젝트에 SVN 을 이용해 보았고 팀원 셋이서 클래스를 나눠 각각 맡은 부분을 작업하고 그 클래스 들을 합쳐 만들어 보았다. 여러모로 처음 시도 해본게 많아서 시행착오도 조금은 있었지만 또한 많은 걸 배울 수 있었다.
새로워진 FP10 의 Drawing API 에 대해 설명이 있어 링크한다.
http://www.senocular.com/flash/tutorials/flash10drawingapi/
Collada를 이용한 애니메이션이다. 이것을 테스트 하기 위해서 로우폴리곤 소스를 열심히 찾았는데 결국 국내에서는 쓸만한 것을 찾을 수가 없었다. 어찌어찌 하다가 재미난 프로젝트를 발견했는데 FFX Project 이다. FFX 에서 나오는 모델링 데이터를 뽑아내는 프로젝트 인거 같은데 스퀘어에서 만들어낸 양질의 모델링 데이터를 가져다 쓸 수 있어서 완전 좋았다. 이 프로젝트에 대해서는 추후에 한번 더 포스트 할 기회가 있을 것 같다.
위의 테스트 플래쉬에서 사용된 소스는 총 3030 triangles 와 2 png 로 이루어져있다. 테스트 해 본 결과 3000개 까지는 어느 정도 소화 하는 것 같지만 더 많아지면 스크립트를 파싱하는 시간 15초를 초과 하게 되서 플래시플레이어가 스크립을 강제종료시켜 버리는 문제가 있었다. 그렇지 않고 로드가 된다고 해도 위에서 처럼 퍼포먼스가 너무 떨어져서 1000개 이상의 폴리곤은 사용은 좀 어려울 것 같다.
위 이미지는 똑같은 Collada 파일을 3D MAX에서 렌더링 한 것으로 확실히 광원효과와 하드웨어 가속을 받는 3D 프로그램이 더 좋은 퀄리티를 보여준다. 당연한건가? ㅡ.ㅡa ㅋㅋㅋ
요청으로 위의 작업물 소스를 올립니다. 이 소스에는 Papervision3D가 없습니다. Papervision3D는 다음의 주소에서 받으 실 수 있습니다. http://pv3d.org/2007/12/12/1-downloading-papervision3d-20-alpha-great-white/ 버전은 반드시 2.0 GreattWhite로 사용하셔야 합니다.
]]>Adobe 가 Flash 를 인수하면서 새롭게 바뀐 것 중에 하나가 바로 ActionScript(AS) 이다. 이전 AS가 단순히 모션에 도움을 주는 Script 였다면 최근 AS3는 Language 에 더 가까워 지고 있는 것 같다. 이는 FLEX나 AIR를 통해 더욱 확실히 알 수 있다. 이런 변화를 통해 AS를 이전까지는 힘들게 여겨지던 기술들도 속속 AS3를 통해서 등장하고 있다. 그 중 하나가 플래쉬를 이용한 3D이다. 예전부터 이러한 시도는 꾸준히 있어왔는데 사실 AS2 의 한계로 실제 필드에서 사용하기에는 무리가 많았다. 하지만 최근 여러 3D라이브러리가 나오면서 불가능하게만 여겨지던 3D영역이 손쉽게 개발되고 있다.
현재 널리 알려져 있는 라이브러리로는 Sandy3D, Papervision3D, Away3D 등이 있는데 각각 장단점이 있는 것 같으나 전부 속속들이 들여다 보지는 못해서 아직 정확한 성능의 차이나 사용상의 용이성등의 평가는 어렵다. 이번 글에서는 셋중 실제 홈페이지에 가장 많이 적용되고 있는 Papervision3D (PV3D)를 기준으로 작성하였다. PV3D는 실무에서도 많이 쓰이고 있을 뿐 아니라 개발 또 한 활발히 이뤄지고 있어 앞으로 더욱 기대되는 라이브러리 이다. 참고로 사용된 PV3D의 버전은 2.0a GreatWhite 이다.
II. Object Build Solution
이번에 테스트 해본 오브젝트 생성 방법은 총 4가지 이다. 첫번째는 PV3D에 기본으로 있는 Object Class를 이용한 방법이고, 두번째는 AS3 Geom Class Exporter를 이용한 방법, 세번째는 DAE 파일을 PV3D의 기본 collada 클래스로 생성한 방법이고 마지막은 같은 DAE 파일을 ASCollada의 DAE 클래스로 생성한 방법이다.
1. 기본 내장 클래스
PV3D는 기본적으로 org.papervision3d.objects 패키지에서 오브젝트를 선언하고 있다. 하위로 종류별로 parsers, primitives, spceial로 구분되며 이 구문에서는 primitives 안의 기본 오브젝트들로 생성하였다.
[sourcecode language=”as3″]var cube:Cube = new Cube(materialList, 100, 100, 100);
var cone:Cone = new Cone(new WireframeMaterial(0xFF0000));
var sphere:Sphere = new Sphere(new WireframeMaterial(0xFF0000));[/sourcecode]
가장 빠른 성능을 보이지만 기본으로 제공하는 이외의 형태를 만들지 못하기 때문에 UI 나 Navigation 이 외에는 활용성 면에서는 조금 부족하지 않나 싶다. 결국 사용자화된 오브젝트를 쓰기 위해서는 외부파일을 로드 해야만 한다.
2. AS3 Geom Class Exporter
이는 3D MAX 에서 AS3 Geom Exporter라는 Max Script를 설치하여서 각 라이브러리 별 .as파일로 바로 export하는 방법이다. 이 방법 또한 각 라이브러리에 맞게 .as파일을 만들어 주기 때문에 성능면에서는 좋지만 이름에서 처럼 Geom 에 대한 데이터만 만들어 주기 때문에 위치나 맵핑에 관한 정보없이 단순한 오브젝트만 만들어 주는 것같다. 결국 애니메이션과 맵핑을 위해서 손이 한번 더 가야 한다.
[sourcecode language=”as3″]test = new Test(new WireframeMaterial(0xFF0000));[/sourcecode]
3. Collada
collada 는 뒤에 좀 더 자세히 설명하겠지만 간단히 말해서 3D데이터를 표준 XML 로 만들어주는 프로젝트이다. 확장자는 .dae 를 사용한다. 이 방법은 PV3D에서 기본으로 지원하던 collada 클래스를 이용하는 방법이다.
[sourcecode language=”as3″]collada = new Collada(“test.DAE” , materialList);[/sourcecode]
4. DAE
이 방법은 위의 방법과 .dae 파일을 사용한다는 점에서 동일하나 .dae 파일을 파싱하는 클래스가 Collada 가 아닌 DAE 이다. 두 파일의 차이는 DAE는 ASCollada 프로젝트의 파일을 PV3D에 합친것으로 이는 PV3D 2.0a 이후 버전에 적용되었다. 또한 위의 방법과 결정적 차이는 .dae파일의 Animation 을 컨트롤 할 수 있다는 점이다.
[sourcecode language=”as3″]dae = new DAE();
dae.animate = true;
dae.load(“test.DAE”, materialList);[/sourcecode]
III. Collada
collada의 정의를 홈페이지에서 보면 다음과 같이 규정하고 있다. ‘COLLADA is an open digital-asset exchange schema for the interactive 3D industry’ collada 에는 대부분의 3D 데이터가 저장되는데 특히 맵핑과 애니메이션이 매우 유용하다. 3D MAX 와 같은 프로그램에서 모델링과 맵핑을 하고 이를 collada로 export 한 후 PV3D 를 통해 Flash 에 바로 적용 할 수 있기 때문이다. 참고로 3D MAX 에서 collada 파일을 export 하기 위해서는 ColladaMax 같은 플러그인을 별도로 설치 해야한다.
IV. Example
위에서 말한 4가지 방법으로 예제를 만들어 보았다. 아래 소스를 보면 알 수 있겠지만 똑같은 조건하에 오브젝트만 생성하고 있는데 생성되어지는 기본값이 조금씩 상이한 것을 알 수 있다. 특히 같은 .dae 파일을 사용하는 Collada 와 DAE 클래스의 다른 점을 눈여겨 볼 필요가 있을 것 같다.
[sourcecode language=”as3″]
package {
import fl.events.ScrollEvent;
import fl.events.SliderEvent;
import flash.display.*;
import flash.filters.*;
import flash.display.Stage;
import flash.events.*;
import flash.ui.Mouse;
import org.papervision3d.core.proto.DisplayObjectContainer3D;
import org.papervision3d.objects.parsers.Collada;
import org.papervision3d.objects.parsers.DAE;
// Import Papervision3D
import org.papervision3d.cameras.*;
import org.papervision3d.scenes.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.special.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.materials.shaders.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.lights.*;
import org.papervision3d.render.*;
import org.papervision3d.view.*;
import org.papervision3d.events.*;
import org.papervision3d.core.utils.*;
import org.papervision3d.core.utils.virtualmouse.VirtualMouse;
import Test;
public class TestObject extends MovieClip {
public var viewport :Viewport3D;
public var scene :Scene3D;
public var camera :Camera3D;
public var renderer :BasicRenderEngine;
private var materialList : MaterialsList;
private var cont:DisplayObject3D;
private var test:Test;
private var collada:Collada;
private var dae:DAE;
public function TestObject() {
init();
}
public function init():void {
stage.scaleMode = “noScale”
stage.showDefaultContextMenu = false;
init3D();
addEventListener( Event.ENTER_FRAME, loop );
for (var i:int = 1; i < 5; i++) {
this.getChildByName("btn"+i).addEventListener( MouseEvent.CLICK, clickHandler );
}
function clickHandler( e:MouseEvent ):void {
changeObject( e.currentTarget.name );
}
this.getChildByName("carZoom").addEventListener( SliderEvent.CHANGE, carZoomHandler );
function carZoomHandler( e:SliderEvent ):void {
camera.zoom = e.currentTarget.value - 100;
doTrace( String( "camera.zoom : "+camera.zoom ));
}
}
public function doTrace( val:String ):void {
var temp:String = TextArea(this.getChildByName("traceTA")).text;
temp = val + "n" + temp;
TextArea(this.getChildByName("traceTA")).text = temp;
}
private function changeObject( _name:String ):void {
removeObject();
switch (_name) {
case "btn1" :
cont = new DisplayObject3D();
var cube:Cube = new Cube(materialList, 100, 100, 100);
var cone:Cone = new Cone(new WireframeMaterial(0xFF0000));
var sphere:Sphere = new Sphere(new WireframeMaterial(0xFF0000));
cube.x = 400;
cone.z = 400;
sphere.z = -100
cont.addChild( cube );
cont.addChild( cone );
cont.addChild( sphere );
scene.addChild(cont);
doTrace("-------------------------");
doTrace("var cube:Cube = new Cube(materialList, 100, 100, 100);nvar cone:Cone = new Cone(new WireframeMaterial(0xFF0000));nvar sphere:Sphere = new Sphere(new WireframeMaterial(0xFF0000));");
doTrace("-------------------------");
break;
case "btn2" :
//Create Test
test = new Test(new WireframeMaterial(0xFF0000));
scene.addChild(test);
doTrace("-------------------------");
doTrace("test = new Test(new WireframeMaterial(0xFF0000));");
doTrace("-------------------------");
break;
case "btn3" :
//Create Collada
collada = new Collada("https://sewonist.com/examples/TestObject/test.DAE” , materialList);
scene.addChild(collada);
doTrace(“————————-“);
doTrace(“collada = new Collada(“test.DAE” , materialList);”);
doTrace(“————————-“);
break;
case “btn4” :
//Create DAE
dae = new DAE();
dae.animate = true;
dae.load(“https://sewonist.com/examples/TestObject/test.DAE“, materialList);
scene.addChild(dae);
doTrace(“————————-“);
doTrace(“dae = new DAE();ndae.animate = true;ndae.load(“test.DAE”, materialList);”);
doTrace(“————————-“);
break;
}
}
private function removeObject():void {
scene.removeChild( cont );
scene.removeChild( test );
scene.removeChild( collada );
scene.removeChild( dae );
}
// ___________________________________________________________________ Init3D
public function init3D():void {
// Create viewport
viewport = new Viewport3D();
addChild( viewport );
// Create Renderer
renderer = new BasicRenderEngine();
// Create scene
scene = new Scene3D(true);
// Create Material
materialList = new MaterialsList();
materialList.addMaterial( new WireframeMaterial(0xFF0000), “ColorMaterial” );
materialList.addMaterial( new WireframeMaterial(0xFF0000), “all” );
// Create camera
camera = new Camera3D();
renderer.renderScene(scene, camera, viewport);
}
// ___________________________________________________________________ Loop
public function loop(event:Event = null):void
{
if ( cont ) {
cont.yaw(1);
}
if ( test ) {
test.yaw(1);
}
if ( collada ) {
collada.yaw(1);
}
if ( dae ) {
dae.yaw(1);
}
renderer.renderScene(scene, camera, viewport);
}
}
}
[/sourcecode]
V. Results
위의 결과표는 매우 주관적인 견해라는 것을 꼭 기억해주기 바란다. 기본클래스를 이용한 경우에도 따로 추가해주면 맵핑과 애니메이션이 가능하다. 또 한 COLLADA를 이용하는 클래스도 사용성이 꼭 나쁘다고 할 수는 없다. 다만 위의 표는 각 방법에 대한 차이를 좀더 쉽게 이해하기 위해서 만들었으니 차이에 대해 참고 정도의 역활이었으면 한다.
확실히 플래쉬에서 구현되는 3D는 많은 제약을 가지고 있다. 특히 하드웨어 가속을 받지 않기 때문에 성능이나 기능 면에서 현란한 3D게임 같은 화면을 기대 하는 것은 무리가 있다. 하지만 날로 좋아지는 컴퓨터의 성능과 AS3의 성능 향상으로 플래쉬에서 3D를 이용한 다양한 시도가 가능 할 것으로 기대 된다. 조만간 웹에서 Coverflow 와 같은 화려한 UI 나 스페셜포스 같은 FPS 게임을 경험하게 될 지도 모른다.
VI. Links
Papervision3D : http://pv3d.org/
Collada : http://www.collada.org/mediawiki/index.php/Main_Page
ColladaMax : http://www.feelingsoftware.com/content/view/65/79/lang,en/
AS3 Geom Exporter : http://seraf.mediabox.fr/showcase/as3-geom-class-exporter-for-3ds-max-english/
ASCollada : http://ascollada.org/
프로젝트 : 복면달호
클라이언트 : 영화사 도로시
작업기간 : 12월10일 ~
상태 : 티저사이트 오픈
‘복수혈전’으로 스크린에서 고배를 마셨던 이경규의 복귀작으로 기대를 모으고 있는 작품 이라는…”복면달호” 메인디자인은 다른 분이 하시고 전 플래쉬작업만 하고 있습니다. 타영화사이트 처럼 올플래쉬로 안만들기때문에 플래쉬 작업이 많지는 않고 이벤트성 플래쉬가 조금 들어가고 있습니다. 위의 복면만들기도 그중 하나… 복면색상을 칼라로만 입혔으면 쉽게 갔을땐데 기획단계에서 꼭 패턴을 입혀달라고 해서 엄청 어려워저버린 작업 ㅜ,.ㅜ 복면은 ‘시티오브히어로’의 그것에서 힌트를 얻었다는 후문이 ㅎㅎㅎㅎ
]]>