Posts tagged ·

flash

·...

Foundation AS3.0 Animation 번역서 베타리더 참여

2 comments


위 도서가 빠르면 요번달 말에 번역서 출판이 될 것이다.

베타리더로 참여한 멤버
엄진우(jin_u), 김형인, 한상훈, 강성규(땡굴이), 공현우(공씨), 지돌스타

번역은 http://drumcap.com 의 윤도선님이다. 해외에서 활동한 실력있는 분으로 김형인의 소개로 알게되어 베타리더를 할 수 있는 기회가 생겨서 흥쾌히 참여하게 되었다. 원서를 힘들게 읽고 있었던터라 더욱더 관심을 갖을 수 밖에 없었다.

이 책은 리뷰에도 작성을 하였지만, 처음 접하는 플래셔들에게도 반드시 자기 주변에 두고 틈나는데로 읽을 가치가 있는 책이다. 나 역시 모르고 지나갔던 것들을 이 책을 통해서 많이 익힐 수 있었다.

그리고, 번역은 누가 했느냐가 중요하다. 그 사람의 능력에 따라 책의 퀄리티가 달라진다고 생각하기 때문이다. 요번에 내가 참여를 하였기 때문에 좋은 말을 쓰는것도 없진 않지만, 훌륭한 책을 번역한 윤도선님에게 다시 한번 감사를 전한다.

요번 여행지중에서 조용하고 편안한 곳에서 읽으려고 컨버팅하여 전자 사전에 담아두었다.

FLAR Tutorial 6 : 타이포 효과 – Typo Effect

no comments

Typo Effects Using Augmented Reality.

요번 튜토리얼은 뻔한 것만 했더니 식상해서 텍스트 효과를 만들어 보았다. PV3D에서 제공하고 있는 것을 이용한 것이니 쉽게 접근할 수 있을 듯 하다. 여기서 체크해야 할 것이 있다면, Camara에 대한 부분이 FLAR과 PV3D는 다르다는 것이다.

음.. 어떻게 설명을 해야 할지는 잘 모르겠다. 같은 공간이지만 트렉킹이 존재하기 때문에 이 부분에 대해서는 나중에 정리가 좀 되면 따로 설명을 하겠다. 실은 아직 나도 잘 모르겠다. -_-;

효과는 위에서 보듯이 마커의 x 좌표를 사용해서 rotationX 축을 변경시켜주는 단순한 효과로 움직임을 표현하고 마커가 사라지게 되면 텍스트가 문맥을 맞춰서 배치가 되는 것을 확인 할 수 있을 것이다.

필요한 소스를 먼저 다운로드 하자. : 마커 변경 됨.
Flash Source, Classes, Marker Image

아래 클래스는 PV3D에서 지원해주는 그래픽 폰트 클래스로 효과를 줄 것이다.
Letter3DMaterial
Text3D
HelveticaBold

그럼 기본적인 코드를 살펴보자.
도큐멘트 클래스 확장 클래스인 “PV3DARApp.as” 이다.

58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
private function _onEnterFrame(e:Event = null):void {
	_capture.bitmapData.draw(_video);
 
	var detected:Boolean = false;
	try {
		detected = _detector.detectMarkerLite(_raster, 80) && _detector.getConfidence() > 0.5;
	} catch (e:Error) {}
 
	if (detected) {
		_detector.getTransformMatrix(_resultMat);
		_markerNode.setTransformMatrix(_resultMat);
		updateMarkerNode(true);
	} else {
		updateMarkerNode(false);
	}
 
	_renderer.render();
}
 
protected function updateMarkerNode(flag:Boolean = true):void
{
	/** 하위 클래스에서 처리하도록 함 */
}

위 코드를 살펴보면 detected 멤버를 확인 할 수 있는데, 이 멤버가 좌표와 마커 인식을 처리에 대한 Boolean 리턴값을 갖는 것으로서 이것을 통하여 하위 객체인 “PV3D_FontEffect.as” 의 updateMarkerNode(flag:Boolean)를 호출하여 아래와 같이 제어하게 되는 것이다.

153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
/** 상위 클래스에서 Boolean 값으로 처리를 하도록 설정이 되어있다. */
protected override function updateMarkerNode(flag:Boolean = true):void
{
	if (flag)
	{
		if (!isVisibleMarker)
		{
			/** 분산 효과 처리 */
			dispersionWords(words1);
			dispersionWords(words2);
			dispersionWords(words3);
 
			isVisibleMarker = true;
		}
	}
	else
	{
		if (isVisibleMarker)
		{
			/** 초기화 효과 처리 */
			writeWords(words1);
			writeWords(words2);
			writeWords(words3);
 
			isVisibleMarker = false;
		}
	}
 
	if (_markerNode.x > 0)
		dispObj3D.rotationZ += 2;
	else
		dispObj3D.rotationZ -= 2;
}

위와 같이 작성이 되면, 마커가 보이고, 안 보이고를 체크하여 효과가 이루어지는 것이다.
타이포의 분산 또는 쓰기 효과를 처리할 수 있게 된다.

요번 포스트도 단순한 효과지만 같은 것만 계속하니 지루해서 만들어 보았다. ^^

작성 후기:
이 코드는 내가 어디에서 본 것을 토대로 작성한 것이다. wonderfl에서 초기 코드를 본 것 같다. 그것으로 FLAR 형태로 변경을 하여 효과를 만들어 본 것이다. 좀 더 생각하면 PV3D에서 효과 낸 것을 자유자재로 FLAR로 가져와 컨트롤 할 수 있을 듯 싶다. 실험적인 것들을 더 만들어 봐야 겠다.

FLAR Tutorial 5 : 애니메이션 .DAE 파일 생성 및 재생.

no comments

The 3DMax to create and apply to the animated a .DAE file.

요번에는 애니메이션이 되는 .dae 파일을 생성해서 아래와 같은 효과를 낼 것이다.
(3DMax와 Collada에 대한 튜토리얼은 이전 포스트를 참조하기 바란다.)

요번에 보여줄 성난 몬스터 애니메이션 소스인 “monster_angry.max” 파일을 제공을 해주신 브리짓닷텀한광재 실장님에게 감사를 전한다. 이것은 맵핑을 하지 않은 상태이다. 2009 LG 모바일 월드컵에 사용된 게임 캐릭터로 맵핑한 자료를 올리기에는 저작권에 문제가 생길지도 모르기 때문에 힘들것 같다.

필요한 소스를 먼저 다운로드 하자.
Flash Source, Classes, Marker Image

이전의 튜토리얼에서와 같이 Collada export를 사용하여 애니메이션을 체크하여 .DAE 파일을 생성하면 된다.
중요한건 각 프레임별로 모션이 적용되어 있어야 한다. 이 .DAE 파일은 64 프레임으로 애니메이션이 되어있다.

위 그림 처럼 Collada .DAE로 저장을 하면…
이전에 보았던 Animation checkbox를 선택하고 Export를 하면 아래와 같은 코드가 생성이 된다.

<library_animations>
<animation>
  <source id="node-ChamferBox358_rotationX.ANGLE-input">
	<float_array id="node-ChamferBox358_rotationX.ANGLE-input-array" count="65">0.03333333 0.06666667 0.1 0.1333333 0.1666667 0.2 0.2333333 0.2666667 0.3 0.3333333 0.3666667 0.4 0.4333333 0.4666667 0.5 0.5333333 0.5666667 0.6 0.6333333 0.6666667 0.7 0.7333333 0.7666667 0.8 0.8333333 0.8666667 0.9 0.9333333 0.9666667 1 1.033333 1.066667 1.1 1.133333 1.166667 1.2 1.233333 1.266667 1.3 1.333333 1.366667 1.4 1.433333 1.466667 1.5 1.533333 1.566667 1.6 1.633333 1.666667 1.7 1.733333 1.766667 1.8 1.833333 1.866667 1.9 1.933333 1.966667 2 2.033333 2.066667 2.1 2.133333 2.166667</float_array>
	<technique_common>
	  <accessor source="#node-ChamferBox358_rotationX.ANGLE-input-array" count="65" stride="1">
		<param name="TIME" type="float"/>
	  </accessor>
	</technique_common>
  </source>
  <source id="node-ChamferBox358_rotationX.ANGLE-output">
	<float_array id="node-ChamferBox358_rotationX.ANGLE-output-array" count="65">0 0 0 0 0 0 0 0 0 0 0 0 0 0.9858586 3.336753 6.142659 8.493553 9.479412 8.493554 6.14266 3.336753 0.9858589 0 1.212546 3.464417 4.676962 4.417889 3.749751 2.836175 1.840787 0.9272113 0.2590737 0 1.212546 3.464417 4.676962 4.417889 3.749751 2.836175 1.840787 0.9272113 0.2590737 0 1.212546 3.464417 4.676962 4.516572 4.086728 3.464416 2.726624 1.950338 1.212546 0.5902338 0.1603896 0 0 0 0 0 0 0 0 0 0 0</float_array>
	<technique_common>
	  <accessor source="#node-ChamferBox358_rotationX.ANGLE-output-array" count="65" stride="1">
		<param name="ANGLE" type="float"/>
	  </accessor>
	</technique_common>
  </source>
  ...
  <sampler id="node-ChamferBox358_rotationX.ANGLE-sampler">
	<input semantic="INPUT" source="#node-ChamferBox358_rotationX.ANGLE-input"/>
	<input semantic="OUTPUT" source="#node-ChamferBox358_rotationX.ANGLE-output"/>
	<input semantic="INTERPOLATION" source="#node-ChamferBox358_rotationX.ANGLE-interpolation"/>
  </sampler>
  <sampler id="node-Dummy21_rotationX.ANGLE-sampler">
	<input semantic="INPUT" source="#node-Dummy21_rotationX.ANGLE-input"/>
	<input semantic="OUTPUT" source="#node-Dummy21_rotationX.ANGLE-output"/>
	<input semantic="INTERPOLATION" source="#node-Dummy21_rotationX.ANGLE-interpolation"/>
  </sampler>
  ...
  <channel source="#node-ChamferBox358_rotationX.ANGLE-sampler" target="node-ChamferBox358/rotationX.ANGLE"/>
  <channel source="#node-Dummy21_rotationX.ANGLE-sampler" target="node-Dummy21/rotationX.ANGLE"/>
  ...
</animation>
</library_animations>

코드를 잘 보면 프레임 수 만큼의 해당 되는 태그들이 뽑힌것을 알 수 있다.
그럼, 여기까지 되었다면 플래시 액션스크립트로 아주 간단하게 효과를 주면 된다.

코드는 아래와 같다.

package 
{
 
	/**
	 * @author jin_u EUM (jin_u@jinustudio.com)
	 * @since 26/02/2010
	 * @version 1.0.0
	 */
 
	import flash.events.Event;
	import flash.events.MouseEvent;
	import org.papervision3d.objects.parsers.DAE;
 
	public class FLAR_3DMax_Ani_DAE extends PV3DARApp 
	{
 
		private var _monster:DAE;
 
		public function FLAR_3DMax_Ani_DAE() {
			addEventListener(Event.INIT, _onInit);
			init('Data/camera_para.dat', 'Data/ghost_corps_marker.pat');
		}
 
		private function _onInit(e:Event):void {
			_monster = new DAE();
			_monster.load('model/monster.dae');
			_monster.scale = 7;
			_monster.z = 30;
			_monster.rotationX = 90;
			_markerNode.addChild(_monster);
 
			addEventListener(Event.ENTER_FRAME, _update);
 
			mirror = !mirror;
			stage.addEventListener(MouseEvent.CLICK, _onClick);
		}
 
		private function _onClick(e:MouseEvent):void {
			mirror = !mirror;
		}
 
		private function _update(e:Event):void {
 
			if (_markerNode.visible)
			{
				if (!_monster.playing)
				{
					_monster.play();
				}
			}
			else
			{
				_monster.pause();
			}
		}
	}
}

부연 설명을 하자면, 마커가 보일때 애니메이션이 진행중임를 체크한 후 진행중이 아니면 진행시키고, 마커가 안보인다면 애니메이션을 중단 시킨다. 이렇게 하면 스크린에서 마커를 놓쳤다고해도 모션이 중간에 사라지는 것을 막을 수있다.

이것 말고도 마커를 인식 실패해서 껌뻑 거림을 막기 위해 처리하는 방법도 있는데, 이것은 다음 포스팅에서 간단하게 알아보자.

작성 후기 :
요즘 FLARToolKit 2.5.0이 지속적으로 업뎃이 되서 살펴보고 있다. FlashPlayer 10.0 버전이라 접근을 할까 말까 고민하고 있다. 대중적인 컨텐츠를 개발하게 된다면 아무래도 FlashPlayer 9.0 버전을 사용해야 할 듯 하다. 시연을 하면서 이곳 저곳을 돌아다녀 보았는데… FlashPlayer 버전에 대해서 언급을 하는 것을 보았기 때문에 내가 이런 생각을 하고있는지 모르겠다.