플래시 – sewonist.com

Arduino + Flash = Fun

sewon ahn — Sun, 27 Jun 2010 12:25:20 +0000

아두이노란? 아두이노는 매우 쉽고 간단한 피지컬 컴퓨터 플랫폼입니다. 하지만 아주 강력하지요. 주말동안 가지고 놀아 본 아두이노는 아주 약간의 전자 지식만 있으면 매우 흥미있고 재밌는 것들을 만들 수 있을 것 같았습니다. 기본적으로 아두이노는 독립적으로 작동할 수 있지만 저는 항상 뭐든 플래시와 연관시키므로 이번에도 플래시와의 연동을 알아보겠습니다.

0. 준비물

1. as3glue

첫번째로 as3glue 를 다운 받습니다. 아두이노와 플래시를 연동하기 위해서는 정확하게 3가지가 필요합니다. 아두이노에 올릴 스케치, 플래시와 아두이노를 이어줄 프록시서버 그리고 플래시를 만들기 위한 클라이언트 입니다. as3glue 프로젝트는 위에 언급한 3가지가 패키지로 모두 들어있습니다. 특히 플래시클라이언트가 as3 로 작성되어있어 사용하기 매우 편리합니다. 우선 위의 준비물에 있는 링크로 가서 as3Glue_v2_beta2.zip 파일을 다운 받습니다.

(이미지를 클릭하면 크게 볼 수 있습니다.) 압축을 풀면 위와 같은 폴더 구조입니다. 순서대로 applications 폴더에 있는 Serproxy-0.1.3-3 가 프록시 arduino 폴더에 있는 Firmata2 가 스케치 마지막으로 as3 폴더에 있는게 플래시용 클라이언트 입니다.

2. Firmata2

아두이노 IDE를 실행시키고 Firmata2 폴더에 있는 StandardFirmata.pde 를 열어서 아두이노에 올립니다.

3. Serproxy

serproxy 를 자신의 상황에 맞게 설정합니다. 아래는 제 serproxy.cfg 입니다.

# Config file for serproxy
# See serproxy's README file for documentation

# Transform newlines coming from the serial port into nils
# true (e.g. if using Flash) or false
newlines_to_nils=true

# Default settings
comm_baud=57600
comm_databits=8
comm_stopbits=1
comm_parity=none

# Idle time out in seconds
timeout=300

# Comm ports used
comm_ports=1

# Set TCP port and serial port
# you will have to change serial_device to reflect your configuration
# use "ls /dev/cu.usb*" to look for your Arduino serial port.
net_port1=5331
serial_device1=/dev/cu.usbserial-A700e17j

serproxy.cfg 를 메모장이나 vi 로 열어서 위와 같이 수정합니다. glue를 받아서 처음 serproxy.cfg 를 열었다면 위의 예제와 상당히 다를 수 있습니다. 그냥 위의 중요한 부분은 몇군데 안되므로 크게 걱정 할 필요 없습니다. 아 참고로 위의 설정은 MacOS 기준입니다. 윈도우의 경우 테스트는 해보지 않았지만 크게 다르지 않은 것 같습니다. 확인해야 하는 곳은 4군데 입니다. 우선 newlines_to_nils 값이 true 인지 확인 확인합니다. 다음 comm_baud 를 57600 을 설정합니다. net_port1은 플래시와 통신할 포트입니다. 기본은 5331 입니다. 마지막으로 serial_device1 값을 설정합니다. 이 값은 사용자 환경마다 다르니 자신의 /dev 폴더에서 확인하셔야 합니다. 윈도우의 경우 요 값만 없는 것 같습니다. 그러므로 윈도우사용자는 신경 안써도 될 것 같습니다.

설정은 완료하였으면 serproxy를 실행해 줍니다. 윈도우의 경우 serproxy.exe 맥사용자는 serproxy 를 실행합니다.

4. Flash

자 이제 아두이노와 플래시를 연동할 거의 모든 준비가 되었습니다. 위에서 준비한 플래시용 클라이언트를 이용해서 화면의 픽셀 컬러값을 아두이노에 설치한 3개의 LED 로 보내보도록 하겠습니다. glue 에 있는 examples 를 이용해서 바로 확인 할 수도 있습니다. ColorSelect 의 소스는 위의 준비물에서 받을 수 있습니다.

package
{
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.ColorTransform;

	import net.eriksjodin.arduino.Arduino;
	import net.eriksjodin.arduino.events.ArduinoEvent;

	public class colorselect extends Sprite
	{
		private var a:Arduino;
		private var _sheet:BitmapData;
		private var _colorTransform:ColorTransform;

		public function colorselect()
		{
			_colorTransform = new ColorTransform();

			_sheet = new BitmapData(550, 400, false, 0);
			_sheet.draw(this["mc_sheet"]);

			// Arduion
			a = new Arduino("127.0.0.1", 5331);
			// listen for connection
			a.addEventListener(Event.CONNECT,onSocketConnect);
			a.addEventListener(Event.CLOSE,onSocketClose);

			// listen for firmware (sent on startup)
			a.addEventListener(ArduinoEvent.FIRMWARE_VERSION, onReceiveFirmwareVersion);

			addEventListener(MouseEvent.MOUSE_MOVE, handleMouse);

		}

		private function handleMouse(e:MouseEvent):void
		{
			_colorTransform.color = _sheet.getPixel(mouseX, mouseY);
			//trace(_colorTransform.redOffset, _colorTransform.greenOffset, _colorTransform.blueOffset);
			a.writeAnalogPin(9, _colorTransform.redOffset);
			a.writeAnalogPin(10, _colorTransform.greenOffset);
			a.writeAnalogPin(11, _colorTransform.blueOffset);
		}

		// triggered when a serial socket connection has been established
		private function onSocketConnect(e:Object):void {
			trace("Socket connected!");
			// request the firmware version
			a.requestFirmwareVersion();
		}

		// triggered when a serial socket connection has been closed
		private function onSocketClose(e:Object):void {
			trace("Socket closed!");
		}

		// the firmware version is requested when the Arduino class has made a socket connection.
		// when we receive this event we know that the Arduino has been successfully connected.
		private function onReceiveFirmwareVersion(e:ArduinoEvent):void {
			trace("Firmware version: " + e.value);
			if(int(e.value)!=2) {
				trace("Unexpected Firmware version encountered! This Version of as3glue was written for Firmata2.");
			}
			// the port value of an event can be used to determine which board the event was dispatched from
			// this is one way of dealing with multiple boards, another is to add different listener methods
			trace("Port: " + e.port);

			// do some stuff on the Arduino...
			initArduino();
		}

		private function initArduino():void {
			trace("Initializing Arduino");
			// set a pin to PWM
			a.setPinMode(9, Arduino.PWM);
			a.setPinMode(10, Arduino.PWM);
			a.setPinMode(11, Arduino.PWM);

			a.writeAnalogPin(9, 0);
			a.writeAnalogPin(10, 0);
			a.writeAnalogPin(11, 0);
		}
	}
}

뭐가 엄청 길어보이지만 이것 역시 중요한 부분은 몇군데 없습니다. a = new Arduino(“127.0.0.1”, 5331); 우선 아두이노 객체를 생성합니다. 127.0.0.1은 자신컴을 가리키는 ip 입니다. 5331은 아까 Serproxy에서 설정한 net_port1 입니다. 그리고 사용할 Pin을 설정합니다. 이번 예제의 경우 아날로그 출력을 할 것이므로 setPinMode 함수로 9, 10, 11 번을 PWM 으로 설정했습니다. 그리고 플래시에서 마우스 이동시 마다 각 픽셀의 RGB 값을 writeAnalogPin 함수로 3개의 LED를 세팅합니다. 이제 플래시를 퍼블리싱 해보도록 하겠습니다.

위와 같은 메세지가 출력되었다면 정상적으로 아두이노와 연결 된 것입니다.

5. Result

아두이노와 플래시를 연동하면 무엇이 좋을까요? 우선 천번째로는 스케치를 새로 작성해서 아두이노에 올릴 필요가 없어 집니다. 두번째는 어려운 C가 아니라 AS3로 코드를 작성 할 수 있습니다. 세번째는 플래시의 다양한 인터렉티브 요소를 접목 할 수 있습니다. 아두이노로 플래시 애니메이션을 컨트롤 할 수 있고 반대도 가능합니다. 물론 인터넷 연결도 가능해 집니다. 아직은 제가 아두이노에 대해서 많이 모르기 때문에 더 큰 가능성에 대해 설명 할 수 없는게 아쉽네요. 하지만 이 정도로도 충분히 아두이노의 “생각하고, 실험하고 즐겨라!” 에 동참 할 수 있었지 않나 싶습니다.

Adobe Flash, Photoshop, Illustrator CS4 프로그램 에러 때문에 윈도우 비스타 포맷할뻔한 사연

sewon ahn — Mon, 03 Aug 2009 05:30:25 +0000

오늘은 폰트 때문에 윈도우 포맷할 뻔한 이야기 입니다.
저의 pc 사용 패턴은 집과 회사에 데스크탑을 사용하고 노트북은 사용하지 않는 범생이 패턴 입니다. 그리고 윈도우 2000을 사용한 이후로는 윈도우를 한번 설치하면 보통 하드디스크가 배드섹터가 날 때까지 포맷은 거의 하지 않죠. 물론 윈도우는 사용하면 사용할 수록 점점 무거워 지고, 어떠한 종류의 에러는 수정할 수 없는 태생적인 한계 같은 것이 있어서 불가피하게 포맷을 해야할 경우도 있습니만, 나름 윈도우라는 운영체제에 대해서는 꽤 익숙하기 때문이랄까요, 에러가 발생하면 어지간한 것이 아니면 대부분 수정해서 사용하고, 나름 운영체제가 느려지지 않도록 관리도 꽤 하는 터라 저에게 있어서 윈도우 포맷은 아주 드물게 일어나는 이벤트라고 할 수 있을 정도 입니다.

원본 출처 : http://ufx.kr/blog/177

DAE vs. MD2

sewon ahn — Mon, 12 Jan 2009 22:37:24 +0000

Pavpervision3D(이하 PV3D) 에서 애니메이션을 구현하는 방법은 크게 두가지가 있다. 첫번째는 트위너를 이용해서 PV3D 에서 만든 오브젝트를 직접 애니메이션 하는 방법과 3D 모델링 데이터의 애니메이션을 이용하는 방법이다. 전자의 경우는 Coverflow 와 같은 모션이나 트랜지션에 유리하지만 PV3D 에서 지원하는 이동이나 회전, 스케일을 제외한 디테일한 애니메이션에는 한계가 있다. 후자는 Collada 와 같이 애니메이션을 지원하는 3D 포멧을 이용한 방법이다. 이는 3D 제작툴(3ds max)을 이용하여 매우 디테일한 애니메이션이 가능하지만 파일을 파싱하는데 많은 자원을 소비한다는 단점이 있다.

이중 후자의 경우 현재 PV3D 에서 구현할 수 있는 포멧은 Collada의 .dae 와 Quake II의 .md2 가 있다. 오늘은 이 두가지 포멧에 대해서 알아 보겠다.

DAE

[파일정보]
people_ani_max.dae : 1,541 KB
texture_1.png : 106KB
texture_2.png : 109KB
totalFrame : 30

먼저 Collada 의 .dae 포멧이다. Collada는 3D 데이터를 XML 로 저장하는 포멧이다. 오픈소스로 진행되고 있으며 최근 가장 많이 사용 되어지고 있다. 다만 각 어플리케이션에서 저장하는 방법이 약간씩 다른데 이 때문에 PV3D 에서 제대로 읽어오지 못하는 경우가 종종있다. 현재까지 테스트 해 본 바로는 3ds Max 에서 ColladaMAX 로 export 하는 방법이 가장 이상적이다. 다만 ColladaMAX 가 3.05C 이후 업데이트가 없으며 Max 2009 를 지원하지 않는다는 문제가 있다. 누군가 2009용으로 빌드한 것이 있으나 모든 시스템에서 정상적으로 작동되지는 않는다.

.dae 의 경우 3D 데이터에 대한 범용적인 저장 방법이다. 그러므로 대부분의 데이터를 저장 할 수 있다. 현재로서는 가장 현실적인 방법이기는 하나 텍스트인 XML 을 파싱해야하므로 퍼포먼스가 상당히 나쁘다. 위의 샘플에서 볼 수 있드시 30프레임 애니메이션을 로드하는데 상당한 시간이 필요하다.

MD2

[파일정보]
tris.md2 : 378 KB
blade_blue.png : 57 KB
totalFrame : 200

.md2 는 본래 Quake II 용 캐릭터 모델링 데이터 포멧이다. 많은 Quake 유저들을 통해서 많은 캐릭터 파일이 공개 되어있을 뿐 아니라 다른 게임등에도 사용되는 듯 하다. .md2의 특징은 ByteArray 를 통해서 파싱하는데 거의 시간이 걸리지 않는 다는 점이다. 위 md2 샘플을 보면 무려 200프레임의 애니메이션 정보를 담고 있으나 .md2 파일의 용량은 378 KB 밖에 되지 않는다. 30프레임에 1.5 MB 인 .dae 와는 큰 차이를 보인다. 물론 두 파일의 포멧적 특성상 이러한 차이가 나는 것은 당연하겠으나 PV3D에서 에니메이션을 구현할때 확실히 큰 장점이 아닐 수 없다. 하지만 아쉽게도 치명적인 단점이 존재하는데 그것은 파일의 태생상 한 파일에 여러 오브젝트와 메터리얼, 라이트 등에 대한 정보를 담을 수 없다는 것이다.

결과적으로 현시점에서 PV3D 를 웹사이트에 적용 시킨 다면 DAE 이 외는 대안이 없어 보인다. 하지만 이 또한 낮은 퍼포먼스라는 걸림돌 때문에 쉽게 적용시키기 어렵다. 결국 최소화된 모델링 데이터를 통한 최적화 밖에 답이 없어 보인다. Flash Player 10 이 보편화 되고 CS4 를 통한 3D 작업에 대한 정보가 더 많아지면 3D 작업은 CS4 에서 구현하는 것이 가장 좋을 것 같다.

MVC패턴을 이용한 다중메뉴 선택

sewon ahn — Thu, 18 Sep 2008 21:53:11 +0000

제목이 거창 한데 쉽게 설명하면 한 이벤트를 통해 하나 이상의 메뉴가 이 이벤트에 반응 하는 것을 말한다. 사이트를 제작하다보면 주메뉴에 보조메뉴가 같이 있는 경우들이 있다. 이 같은 경우 어떤 메뉴를 선택하든 두 메뉴에 같은 결과가 전달 되어야 한다. 예를 들자면 주메뉴에서 첫번째 메뉴가 활성되면 보조메뉴의 첫번째 메뉴도 자동으로 활성화 되어야 하는 것을 말한다. 아래의 예제 플래시를 보면 쉽게 이해 할 수 있다.

[Flash] http://www.ahnsw.com/examples/MVC/red.swf

Download File

위의 예제는 크게 3부분으로 이루어져 있다. 중간메뉴와, 하단메뉴 그리고 중앙의 박스이다. 하단메뉴를 클릭하면 쓰여있는 숫자만큼 가운데 박스가 회전한다. 중간메뉴는 화살표 방향으로 메뉴가 이동된다. 여기서 이슈는 어떤 메뉴의 버튼을 클릭한다. 두 메뉴 모두에 동일하게 동작해야 한다는 것이다. 이 점을 해결 하기 위해서 MVC패턴을 이용해 보았다. 사실 이 문제만에 촛점을 맞힌 패턴이라면 Observer패턴이라고 불러야 하겠지만 MVC패턴이 Observer패턴을 포용하고 있고 MVC패턴을 이해하기 위한 예제이므로 MVC패턴이라고 명명하겠다.

그림1은 본 예제의 Design Model 메인다이어그램이다. 데이터를 필요로 하는 부분이 없으므로 model 부분에는 어떤 클래스도 없다. 3개의 Midiator 와 2개의 Command가 있다. StageMediator 는 나머지 2개의 Mediator 를 등록한다. CardMediator 는 가운데 박스를 만든다. MenuMediator 는 MiddleMenu, BottomMenu를 포함한다.

MenuMediator를 만들면서 각 메뉴마다 Mediator를 만들어야 할지 하나의 Mediator 에 2 메뉴를 넣어야 할지 상당히 고민했다. 일단 결론은 같은 종류의 UI라면 하나의 Mediator 에 등록하는게 더 나을 것 같다. 의도적인 것은 아니었으나 하나의 Mediator 에 등록하려다 보니 메뉴 자체를 좀더 OOP적으로 만들 수 있었다. 즉 Menu, IMenu 를 통해서 메뉴를 추상화 하고 재사용 가능하게 만들었다.

또 Notification 을 CardMeditor 가 수신할지 따로 Command를 둘지도 매우 고민 스러웠는데 사실 아직까지도 어떤게 더 나은지 맞는 것인지는 모르겠다. 이 예제에서는 control 영역을 사용하기 위해서 SelectCommand 를 따로 두었다. SUB_SELECT 이벤트가 발생하면 자동적으로 SelectCommand 가 CardMeditor 의 rotateCard를 호출한다.

그림2

그림2는 메뉴가 작동하는 시퀀스다이어그램이다. 주의깊게 볼 점은 플래시로 메뉴를 만들때 일반적으로 메뉴의 버튼이 선택되면 그 메뉴가 직접 버튼을 활성화 하게 만들어 왔다. 하지만 본 예제는 버튼의 활성화를 메뉴 스스로 직접 하지 않고 SUB_UPDATE 이벤트가 발생하면 MenuMediator 가 버튼들을 활성화 시킨다.

MVC패턴 디자인은 입문하기가 생각보다 쉽지 않았다. 다만 지금까지 몇건의 작업을 MVC패턴을 이용하면서 확실히 디자인패턴의 유용성을 느낄 수 있었다. 첫번째로 클래스들을 임무별로 확실하게 구분 할 수 있으며 통지를 이용해 언제든지 어디에나 이벤트를 줄 수 있다.

또 처음 사용해보는 프레임웍인 pureMVC 또한 매우 괜잖은 것 같다. Java 나 다른 언어처럼 플래시에서 프레임웍이 대중적이지 않다는 것을 감안한다면 pureMVC는 매우 고무적인 것 같다.