[UPL005] 비트맵을 활용한 인터렉션 속도 개선

Project/UPL 2009. 8. 13. 05:20


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

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


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

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

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

    

설정

트랙백

댓글

  • maeu. 2009.08.13 05:33 신고 ADDR 수정/삭제 답글

    포스팅 시간이 5:20 ... !

    - 뽕

    • jasu 2009.08.13 11:37 신고 수정/삭제

      택뽕 댓글 등록한 시간이 5:33... !

  • 검쉰 2009.08.20 13:15 신고 ADDR 수정/삭제 답글

    확실히 차이가 나는군요

    • jasu 2009.08.20 22:49 신고 수정/삭제

      네 수백개의 오브젝트를 개별적으로 화면 랜더링 처리는 하는 것과 하나의 오브젝트만 랜더링 하는 것에는 차이가 있을 수 밖에 없겠죠 리듬감 있는 모션 적용에서도 활용하면 도움이 될 것 같습니다.

[UPL004] Bitmap을 이용한 물고기 표현

Project/UPL 2009. 8. 8. 02:10


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

기능 설정

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

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

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

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





    

설정

트랙백

댓글

  • lovedev 2009.08.08 15:37 ADDR 수정/삭제 답글

    와... 멋지네요 ^^

  • 액션신 2009.08.10 11:21 ADDR 수정/삭제 답글

    잘보고 갑니다^^

  • juniac 2009.08.10 19:59 ADDR 수정/삭제 답글

    와 바쁘신데도 이런것까지 만드시고, 저도 좀더 열심히 살아야겠어요~

    • jasu 2009.08.12 16:28 신고 수정/삭제

      정운 댓글도 달고 착하네 쿠쿠 그래 볼링이나 치러가자

[UPL002] RTMFP를 이용한 커뮤니케이션

Project/UPL 2009. 6. 23. 22:31


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

    

설정

트랙백

댓글

  • cmr 2009.06.24 10:24 ADDR 수정/삭제 답글

    자수님 블로그에 자주 오는데 참 멋진 작업이네요. 후훗.

    • jasu 2009.06.24 11:36 신고 수정/삭제

      cmr님 오랜만인데요~ 쿠쿠 점심은 뭐 먹나

  • 제라드 2009.06.24 11:11 ADDR 수정/삭제 답글

    정말 멋지십니다.. 저는 이런걸 언제쯤 해보게 될런지...

    • jasu 2009.06.24 11:37 신고 수정/삭제

      플래시가 멋지죠 쿠쿠 감사합니다.

  • SC 2009.06.29 23:48 ADDR 수정/삭제 답글

    와우 정말 굉장합니다. 막.. 뇌를 자극하는군요.. 아마 AIR 랑도 통신할수 있겠죠??
    그럼 서버에 AIR 띄워 노코 AIR로 Sqlite 로 DB 를 관리하면.. 게시판서비스도 할수 있겠네요 ...

    가능할까요??

    • jasu 2009.06.30 17:01 신고 수정/삭제

      안녕하세요
      가능합니다. 다만 rtmfp로 개발할 경우 방화벽 네트워크에서는 다른 외부와 연결이 되지 않을 수 있겠죠 이 부분이 참 아쉽네요 ^^

  • 리노아 2009.07.01 05:35 ADDR 수정/삭제 답글

    자수님 참 멋지십니다~!!
    지금 오전 5시 35분인데 피곤에 케쩝니다.. 살려주세요~

  • 지돌스타 2009.07.01 13:27 ADDR 수정/삭제 답글

    멋진 프로그램입니다. 우주배경이 정말 멋지네요 ㅋㅋㅋ
    오리온성운과 말머리 성운이군요.

    • jasu 2009.07.01 22:10 신고 수정/삭제

      쿠쿠 인터넷에서 성운 이미지를 찾아서 사용하긴 했는데 오리온성운 이군요 감사합니다. ^^

  • 2009.07.07 11:27 ADDR 수정/삭제 답글

    비밀댓글입니다

  • 닥서클 2009.07.09 20:55 ADDR 수정/삭제 답글

    와 이런게 있었군요.. 실시간으로 사람들과 같이 그림을 그리는 그림판을 만들어보고 싶었는데
    퍼포먼스도 그렇고 php를 제대로 활용하는데 한계가 있어서 생각만으로 그첬는데
    이걸 이용한다면 서버를 거치지 않고 훌륭한 퍼포먼스가 나오겠네요!!

    멋진작업니다!!^^

    • jasu 2009.07.16 20:30 신고 수정/삭제

      기술은 단순하지만 그것을 사용하는 것에 따라서는 멋진 작업이 되기도 할 것 같아요 ^^ 감사합니다.

  • 나인 2011.06.20 17:27 ADDR 수정/삭제 답글

    좋은 정보 감사합니다.

    혹시 지금도 udp 때문에 문제가 되나요? FMIS로 구현하려는데 방화벽 때문에 사이트 사용자들이 이용하지 못하면 대략 낭패인지라...

    무튼 정보 잘 봤습니다~

[UPL001] 카운트 모션

Project/UPL 2009. 6. 17. 01:02



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

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

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

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




    

설정

트랙백

댓글

  • 제라드 2009.06.17 08:56 ADDR 수정/삭제 답글

    첫작품을 올리셨군요.^^
    RSS를 구독하던차에 새로운글이 있어 언넝 달려와 봤습니다.
    전에도 이런 숫자관련해서 카운팅 되는거 자수님께 물어보곤 했었는데
    아직도 전 해결을 못하고 있네여 ㅠ.ㅠ
    작품 정말 멋지네요.^^

    • jasu 2009.06.18 02:35 신고 수정/삭제

      작품이라고 하기에는 멋적네요; 그냥 놀이라는 명칭이 적절할 듯 싶어요 ^^ 감사합니다.

  • lovedev 2009.06.17 10:20 ADDR 수정/삭제 답글

    메모리랑 FPS 참 깔끔하네요.. 맘에 든다.. 어쩌지.. 따라할까? 따라하면 지는거나~ 아흑~

    메모리 사용량이나 FPS가 전혀 데미지를 입지 않는것 같아 보이네요? 내컴이 좋은건가?

    • jasu 2009.06.18 02:39 신고 수정/삭제

      따라한다는 표현 보다는 참여한다는 표현으로 접근하시면 어떤가요? ^^ 참여하세요 플래시 놀이는 이미 하고 계시니... ^^ 비주얼이 화려하거나 오브젝트가 크지 않아서 크게 변화를 느낄 수 없는것 같네요 텍스트가 많아지면 fps 반응이 있을 듯 합니다.

  • 지돌스타 2009.06.19 16:43 ADDR 수정/삭제 답글

    정말 멋지네요~~~

  • 슈퍼맨 나올거 같아용~ 빠빠빰~~

    • jasu 2009.06.23 01:00 신고 수정/삭제

      6시간 39분 34초 켜놓으면...

  • 쿠나 2009.08.05 20:00 ADDR 수정/삭제 답글

    오랫만에 들러요 ~ *
    예제 보고 3D 레퍼런스 쪽을 보고 있긴 한데
    후후, 텍스트 하나하나 자르는 부분부터가 버겁습니다 ^^; 대단하시네요 :)

    • jasu 2009.08.05 21:20 신고 수정/삭제

      안녕하세요 ^^
      하나하나 하시다 보면 감이 잡힐거에요
      자신이 알지 못하는 것에 대한 호기심이 도움이 될거라 전 믿고 있거든요 인생도 비슷비슷한거 같기도 하구요 ^^ 행운을 빕니다.!!

[UPL000] 프로젝트 진행 예정

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

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

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

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

    

설정

트랙백

댓글

  • 땡굴이 2009.06.15 01:58 ADDR 수정/삭제 답글

    나도 놀고 싶다. ㅎㅎ; 멋진 작품 기대하겠음.

  • lovedev 2009.06.15 10:02 신고 ADDR 수정/삭제 답글

    와~... 기대 만땅~ ㅋㅋㅋ 이렇게 말 써놓으면 음.. 부담 만땅되겠죠? ^^
    화이팅입니다~.

    • jasu 2009.06.15 13:16 신고 수정/삭제

      쿠쿠 아는 분이 그러심~ 그냥 누구나 할 수 있는 것이더라도 해보는 것에 의미를...

  • 지돌스타 2009.06.15 13:06 ADDR 수정/삭제 답글

    와~~ 자수님의 놀이는 그냥 놀이가 아님~ ^^

    • jasu 2009.06.15 13:17 신고 수정/삭제

      대단한 것도 아닌데 이래 포스트를 올려 놓으니 스스로 무덤을 파는 듯한... 쿠쿠 아무튼 말씀 감사합니다. ^^

  • 하영진(제라드) 2009.06.15 17:32 ADDR 수정/삭제 답글

    역시나 DIK에서도 기대이상 이었지만 지금것도 무척 기대가 되네요.^^

    • jasu 2009.06.17 01:03 신고 수정/삭제

      쿠쿠 안녕하세요
      기대하실 정도의 작업은 아니지만 아무튼 말씀 감사합니다. ^^

  • Han Sanghun 2009.06.20 08:14 ADDR 수정/삭제 답글

    음... 이번에 내가 발표하려는 내용과 통하는군. 일과 놀이와 배움을 분리할 수 없지.

    • jasu 2009.06.23 01:04 신고 수정/삭제

      공통적으로 생각하는 부분이겠죠 ^^ 상훈형님 본지도 꽤 됐네요 잘 지내시죠? ^^