jasu's blog

1. stage에 마우스 클릭 후, 드로잉하면 30개의 라인을 화면에 그려준다.

플래시는 화면에 올려진 모든 오브젝트를 FPS에 따라 화면에 다시 그리는 과정에서 연산처리에 영향을 주어 CPU 속도를 떨어뜨리게 되는데, 비트맵을 활용하면 사용자의 인터렉션에 영향을 주지 않는 범위를 하나의 오브젝트로 대체하여 속도를 개선할 수 있다.

[아래 보여지는 결과물은 화면이 작은 관계로 오른쪽에 버튼이 개수가 많지 않기 때문에 효과를 제대로 확인하기 위해서는 왼쪽 상단에 있는 ‘F’ 버튼을 눌러 전체 화면으로 하고 테스트해야 한다.]

위 결과물은 왼쪽에 메뉴에 해당하는 버튼그룹이 있고 오른쪽에는 마우스를 오버하면 scale을 주기적으로 변경하는 모션이 적용되어 있다. 왼쪽 메뉴에 해당하는 수많은 버튼들이 모두 stage 상에 올려져 있을 경우, 플래시 전체에 영향을 주어 모션이 부자연스럽고 느리게 움직이는 것을 볼 수 있다.

이때 오른쪽 상단의 ‘비트맵 변환’ 체크박스를 체크하고 확인해 보면 모션이 자연스럽게 적용되는 것을 볼 수 있다. 비트맵 변환을 체크할 경우 왼쪽에 있는 모든 버튼들은 하나의 비트맵으로 처리하여 시각적으로 존재하는 버튼처럼 적용된 것이다. 이렇게 하나의 비트맵으로 적용하여 화면에 배치할 경우 버튼에 마우스 오버시 색을 표시하는 오버효과가 적용되지 않는다. 그렇기 때문에 사용자가 왼쪽 메뉴 영역으로 마우스를 이동할 경우 기존의 비트맵 이미지를 다시 원래의 버튼들로 대체하여 사용자의 눈을 속이는 것이다.

사용자가 마우스를 이동할 경우 인터렉션 반응을 하지 않아도 되는 영역을 이렇게 하나의 오브젝트로 대체하는 것만으로도 플래시의 불필요한 속도저하 요소를 제거할 수 있다.

아래 샘플 화면을 클릭하면 300개의 객체를 EnterFrame 1회마다 Bitmap에 표시하며 각각의 객체는 나머지 객체(299개)와의 위치 관계를 검사하여 유기적으로 좌표를 이동한다.

기능 설정

1. 300개의 +모양의 픽셀 정보를 가지고 있는 객체를 EnterFrame에 따라 화면(Bitmap)에 그리고 alpha 값을 0.86로 적용하는 행위를 반복한다.

2. 300개의 객체에 구현된 특정 메소드 실행시 자신 이외의 299개와의 위치 관계를 조사하여 근접한 경우 일정한 간격을 유지하며 같은 색으로 변경되며 최종적으로 하나의 색만 살아 남게 된다.

3. 객체가 먹이존에 근접한 경우 객체는 먹이존으로 유입되며 먹이존은 마우스로 이동 가능하다.

4. 화면 클릭시 전체(300개) 객체의 색을 랜덤으로 변경하며 클릭한 좌표(지름 40)에 위치하는 객체는 주변으로 흩어진다. (단 먹이존 클릭시 제외)

9000개의 픽셀을 이용하여 BitmapData에 드로잉하는 속도는 기존의 플래시플레이어에서는 상상도 할 수 없는 속도를 낸다. 물론 단순한 setPixel을 통한 색 변환 비주얼이지만...

UPL의 두 번째 작업으로 FlashPlayer10 버전부터 추가된 Real-Time Media Flow Protocol(RTMFP) 통신을 이용하여 채팅 기능을 구현하였다. RTMFP가 기존의 Real-Time Messaging Protocol(RTMP)와 다른 점을 이야기 한다면 크게 두 가지로 볼 수 있다. 하나는 RTMP의 경우 데이터를 client가 공유하기 위해 Flash Media Server가 꼭 필요했던 반면 RTMFP의 경우는 FMS 필요 없이 FlashPlayer 간 직접 통신이 가능하다.(플래시플레이어 간 통신을 위해 호스트 통합 서비스인 Adobe Stratus를 통해서 부여된 id를 이용해서 서로 통신을 한다.) 그리고 두 번째로는 RTMP의 경우는 TCP 프로토콜을 사용하여 데이터 손실 없는 안정적인 통신을 할 수 있는 반면 속도에는 한계는 있었다. 그러나 RTMFP는 UDP를 사용함으로써 데이터 손실이 발생할 가능성이 있지만 속도 면에서는 빠르다.

무엇보다도 미디어 서버를 사용하지 않고 직접 플래시플레이어 사이에 통신을 할 수 있고 속도 면에서도 빠르다는 강력함이 무척 매력적이다.



UPL002에서는 RTMFP를 이용하여 해당 swf을 띄워놓으면 자동으로 채팅의 참여자가 되며 자신의 마우스 움직임과 타이핑 내용이 실시간으로 해당 swf를 띄워놓은 동시 접속자의 화면에 표현된다. swf를 여러 개 띄워놓고 테스트할 수도 있다.

개발 구조는 하나의 swf안에서 서버와 클라이언트 역할을 같이 하게 되며 접속을 하면 기존에 접속된 사용자들의 id를 모두 연결하고 자신의 id도 등록한다. 이때 특정 사용자가 브라우저를 닫거나 swf 실행을 종료할 경우 해당 아이디를 삭제하는데 최종 사용자의 경우에는 자신을 닫는지 여부를 확인할 방법이 없다. 따라서 모든 사용자가 종료하더라도 하나의 아이디는 잔존하며 이후 최초 사용자가 접속을 할 때 기존의 id의 연결을 실패할 때 해당 아이디를 삭제하는 형태로 제작 되었다.

RTMFP의 경우 UDP를 사용하므로 방화벽 차단이 되어 있는 네트워크 상에서는 외부에서 접속한 사용자와 연결이 되지 않을 수 있다.


관련 자료 참고 링크
http://kb2.adobe.com/cps/405/kb405549.html
http://www.adobe.com/devnet/flashplayer/articles/rtmfp_stratus_app.html
http://download.macromedia.com/pub/labs/flashplayer10/flashplayer10_rtmfp_faq_070208.pdf
http://www.adoberia.co.kr/iwt/board/board.php?tn=pds_tech&page=2&id=244&mode=view
http://wooyaggo.tistory.com/tag/rtmfp

UPL의 첫 번째 작업으로 예전에 만들었던 카운팅 모션을 올려봤다. 숫자 카운팅에는 여러 가지 모션을 적용할 수 있을 듯싶은데 개인적으로는 그냥 틱~ 하고 나오는 게 좋긴 하다. 아래 결과물은 화면에서 마우스 클릭을 하면 Math.random()으로 가져온 값을 가지고 모션을 적용한다.

배경으로 나타나는 숫자 모션의 경우는 텍스트의 글자 단위로 잘라서 모션을 적용한 형태이고, 날라오는 듯한 모션의 경우에는 FlashPlayer10버전부터 추가된 3D 속성을 이용하여 글자 단위로 모션을 적용, 전체 묶음으로 중앙 위치 조절이 적용되었다.

UPL에서 default로 적용되는 왼쪽 상단의 기능은 아래와 같다.
표시되는 숫자는 FPS 값과 메모리 용량을 확인할 수 있도록 되어 있다. 메모리용량의 경우는 정확한 용량이라기 보다는 해당 결과물이 진행하는 과정에서 메모리의 증감을 표시하기 위함이다.

위, 아래 화살표 :  FPS를 증가, 또는 감소시키기 위해 사용할 수 있음
P : UPL 진행하는 블로그 카테고리 경로 링크
H : object, embed HTML코드 복사(clipboard copy)
U : swf 경로 복사(clipboard copy)
F, N : FullscreenMode 적용(필요 없을 경우 비활성화 처리됨)

개인적으로 Flash == Play라는 등식이 성립한다고 생각한다. 내가 하고 있는 일을 work로만 생각하기에는 뭔가 손해 보는 느낌에서 일까? 내 머리 속에서 위 등식이 성립하지 않았다면 지금쯤 다른 일을 하여 갑부가 되었거나 대학시절 교양강사의 조언에 따라 정치를 했을지도 모르겠다. ^^ (뭐 가보지 않은 길, 좋게 생각하는 것이 좋지 않은가? 물론 정치는 좋은지 안 좋은지는 모르겠지만 말이다 ^^)

그 동안 즐거운 놀이를 너무 하지 못하여 앞으로 틈틈이 플래시를 가지고 놀아볼까 한다. UPL이라는 명칭은 Useless Play(쓸데없는 놀이) 또는 Useless Pastime(쓸모없는 소일거리) Lab이라는 의미이다. 놀이는 그 자체의 즐거움으로, 그 이상의 이익을 위해 행하지 않는 것에 의미를 두었다. 이름에서 알 수 있듯이 가벼운 마음으로 단순한 형태로 제작될 가능성이 크다. 가능성이라고 이야기 하는 이유는 본인 또한 앞으로 어떤 작업으로 진행하게 될지 알 수 없기 때문이다.(무척 즉흥적이다? 쿠쿠)

예전에 오프라인에서 개인적으로 진행하던 UI&C Lab의 2차 버전쯤으로 보면 좋을 것 같다. 가벼운 작업에 프로젝트 명까지 정해서 하는 이유는 지속성을 유지하기 위함이다. 사실 일을 하면서 개인적인 작업을 진행하기에는 시간적인 여유보다 마음의 여유가 없는 것이 사실이다. 따라서 가벼운 마음으로 틈틈이 진행하되, 어느 정도 일정한 형식을 갖추고 꾸준히 진행할 생각이다.

올려질 포스트에는 미리보기 이미지가 상단에 배치될 것이며 하단에는 결과물에 대한 내용과 실제 구현된 플래시(swf)가 올려질 것이다. 결과물의 기본 포멧도 정할 예정인데, 포멧에는 cpu와 메모리 용량을 체크를 할 수 있는 부분과 swf의 경로를 복사하는 기능, embed 태그 형태로 복사할 수 있는 기능을 제공할 것이다.