Adobe Flash Builder 4.5.1 이 정식 배포되었습니다. (한국 2011년 6월 21일) 
Adobe Flash Builder 4.5에서 Flex를 이용해 iOS, BlackBerry 어플을 배포할 수 없었는데, 이 점이 개선되었습니다. 이제 Adobe Flash Builder 4.5.1 을 이용해 iOS(iPhone, iPad), BlackBerry, Android 어플을 Flex나 ActionScript 3.0으로 개발할 수 있게 되었습니다. 

아래 화면은 Flash builder 4.5.1에서 Flex 모바일 프로젝트로 Apple iOS, BlackBerry Tablet OS, Google Android 어플을 개발할 수 있음을 보여줍니다. 


아래 링크를 통해 Flash builder 4.5.1 의 개선된 내용을 확인할 수 있습니다. 
Flash Builder 4.5.1 Release Notes
Flash Builder 4.5.1 with Improved iOS Support  
 
Flash Builder 4.5.1로 업데이트 하기 위해서는 2가지 방법이 있습니다.  기존 Flash Builder 4.5가 설치했다면 다음 방법을 택일할 수 있습니다.(먼저 Download a free trial of Flash Builder 4.5 Premium Edition 에서 Flash Builder 4.5를 다운받아 설치하세요.)

1. Flash Builder 4.5 자동업데이트 기능을 이용 
이 방법은 빌더를 실행하고 Help > Search for Flash Builder Updates...로 들어가시면 됩니다. 열이아빠님의 말에 의하면 많이 느리답니다. 참고: 열이아빠님의 플래시 빌더 4.5.1 

2. 업데이트 파일을 다운받아 업데이트 실시
Adobe Flex Support Center 에서 직접 다운받으실 수 있습니다. 이 방법이 첫번째 방법보다는 빠릅니다. ^^

Flash Builder 4.5.1에는 AIR 2.6이 탑재되어 있습니다. 그러므로 최근에 배포된 AIR 2.7을 다운받아 설치하시면 AIR 2.6, AIR 2.7 환경에서 개발이 가능합니다. AIR 2.7은 iOS 어플의 속도를 적어도 4배이상 향상시켰기 때문에 AIR 2.7을 설치할 것을 권고하는 바입니다.

Flash Builder 4.5.1을 이용해 Flex 4.5.1 기반에서 개발하면 생산성이 극대화 됩니다. 하나의 프로젝트로 iOS, Android, BlackBerry 어플개발을 할 수 있습니다. 아래 링크에 있는 영상을 보시면 약 8분여만에 트위터와 연동하는 어플을 만들어 각각의 디바이스에 실행해보는 모습을 보여주고 있습니다. 

FLASH BUILDER 4.5.1 ROCKS  


여러분은 Flash Builder 4.5.1에서 iOS 어플 개발하는 방법은 다음 동영상과 문서를 통해 배울 수 있습니다. 중요한 것은 Mac뿐 아니라 Window환경에서도 iOS 어플을 개발할 수 있습니다.

Build iOS applications with Flex and Flash Builder 4.5.1
 
Using Flash Builder 4.5 to package applications for Apple iOS device 
Flex/AIR for iOS Development Process Explained! 

Android와 BlackBerry 어플을 어떻게 만드는지도 알 수 있습니다. 다음 문서들을 보세요.
Using Flash Builder 4.5 to package applications for Google Android device 
Using Flash Builder 4.5 to package applications for BlackBerry Tablet OS devices 


기존 Flash 개발자나 Flex, ActionScript, AIR 개발자는 모두 별 어려움없이 iOS, Android, BlackBerry 어플을 개발할 수 있다는 점이 이번 Flash Builder 4.5.1 배포의 가장 큰 매력이 아닌가 생각합니다. 

하지만 한가지 아셔야 하는 것은 각각 OS별로 특정 기능은 지원할 수 없다는 점입니다. 가령 안드로이드 기반의 위젯같은 것은 현재로선 개발이 불가능하지요. 그러므로 이런 경우에는 원래 개발 방식대로 개발해야할 것입니다. 

AIR 2.7이 Linux 환경에서 더이상 지원하지 않는다는 뉴스는 개발자로서 아쉬움이 남지만, Flash Builder 4.5.1의 런칭으로 극복되길 바라는 바입니다.


참고글 

열이아빠님의 플래시 빌더 4.5.1
Download a free trial of Flash Builder 4.5 Premium Edition
Adobe Flex Support Center - 여기서 Flash Builder 업데이트 버전을 직접 받을 수 있습니다.
Flash Builder 4.5.1 Release Notes
FLASH BUILDER 4.5.1 ROCKS  
Flash Builder 4.5.1 with Improved iOS Support
Build iOS applications with Flex and Flash Builder 4.5.1
Flex SDK and Flash Builder updates available - adds iOS and BlackBerry PlayBook support
(동영상)Mobile Application Development with Flex and Flash Builder
Flash Builder Developer Center 
Adobe Flash Builder 4.5.1, AIR 2.7 and iOS
Hands On with Flash Builder 4.5.1 for Apple iOS 
Flex/AIR for iOS Development Process Explained!
Build iOS applications with Flex and Flash Builder 4.5.1  
Build Mobile Apps for Android Devices, BlackBerry PlayBook, iPhone and iPad Today! 
(우야꼬)Flash Builder 4.5로 iPhone 4용 듀얼 브라우져 앱 만들기 
(지돌스타)Adobe AIR 2.7 SDK 및 Runtime 정식 런칭. iOS환경에서 4배 빨라졌다! 
Episode : Mr.MixIt And Pyramix Games For Android and iOS 
What’s your favorite Flash Builder 4.5 feature?
Flash Builder 4.5 에서 plug-in 버전 설치 하기
AIR 2.7 now available for desktop, Android, iOS and Blackberry Tablet OS.

글쓴이 : 지돌스타(http://blog.jidolstar.com/773)  
2011년 5월 28일에 진행한  ACC 기술세미나에 스피커로 참여했습니다. 주말 좋은 날씨임에도 불구하고 귀중한 시간 내어주신 분들께 감사드립니다. 어려운 주제임에도 끝까지 경청해주셔서 더욱 고맙고요. 

구준호님이 촬영해 주신 인증샷 ^^


출처 : Flash Platform facebook 사이트 http://facebook.com/flashplatformkr



아마도 많은 분들이 발표자료를 보고 싶어하실 것 같아 블로그를 통해 공유해드립니다. 


발표 PPT 


Molehill3D 예제소스 다운로드
http://goo.gl/pFHEv 

위 예제소스는 Flash Builder 4.5 기반에서 만들어진 것들입니다. 이것 자체가 Workspace이므로, 다운로드 받은 파일을 압축을 푼뒤 Flash Builder 4.5 메뉴에서 File > Switch Workspace를 통해 위 소스를 경로로 잡으면 되겠습니다. (되도록이면 압축푼 장소를 영문경로로 잡아주세요. 한글경로로 잡으면 안될 수도 있습니다.)

발표 중간에 몇가지 유용한 정보를 말씀드렸습니다.
- Flash Player 11 Incubator ActionScript 3.0 API 문서 (임시): http://jidolstar.net/asdocs/incubator/   
- Molehill 3D API (Stage3D API) 관련 유용한 링크들 : http://goo.gl/pcIzG
- Adbobe Flash Builder 4.5에서 Molehill 3D 개발환경 및 Away3D 4.0 예제 실행방법 :  http://goo.gl/uXuH2
- Adobe Flash Platform 한국 SNS : http://facebook.com/flashplatformkr 

이번에 발표내용은 저 자신도 너무 어렵고 힘든 주제였습니다. 그럼에도 불구하고 세미나 주제로 이것을 정한 이유는 이 분야에 대한 관심을 가지는 개발자들이 많아져서 많은 정보를 공유할 수 있는 분위기가 되었으면 하는 작은 바램이 있기 때문입니다. 저 자신도 열심히 공부해서 뭔가 의미있는 결과를 만들어내길 강하게 바라고 있습니다. 함께 좋은 정보 공유하길 바랍니다. 

글쓴이 : 지돌스타(http://blog.jidolstar.com/770)  

이 글은 어도비 공식블로그에도 발행되었습니다.
큰변화 1 : http://blog.naver.com/adobe_korea/100129033987
큰변화 2 : http://blog.naver.com/adobe_korea/100129042984 
큰변화 3 : http://blog.naver.com/adobe_korea/100129043356


Adobe Flash Builder 4.5 는 Flex와 ActionScript 언어를 사용하여 모바일, 웹, 데스크탑 어플리케이션을 신속히 제작할 수 있는 통합개발도구(IDE)이다.

이번에 출시된 Flash Builder 4.5에는 Apple의 iOS, Google의 Android, Blackberry Tablet OS 모바일 어플리케이션 개발 및 테스트, 배포를 위한 기능이 추가되었다. 또한 Flash Builder 4.5는 개발 및 테스트 할 수 있는 시간을 크게 단축시키기 위한 도구 지원하고 더욱 향상된 성능으로 완성도 높은 어플리케이션을 개발할 수 있도록 도와준다. 또한 Flash Builder와 Adobe Flash Catalyst를 이용해 개발자, 디자이너간에 쌍방향 워크플로우를 가능하게 함으로써 프로젝트 디자인 및 개발을 동시에 수행할 수 있도록 했다. Flash Builder 4.5는 기존 Flex 3, Flex 4, Flex 4.5 버전에 상관없이 모든 Flex 버전에 대응할 수 있도록 했다.
 
이 문서는 Flash Builder 4.5에 어떠한 큰 변화가 있는지 구체적인 설명을 통해 이해시키는데 도움을 주는 것을 목적으로 한다.

큰변화 1. 모바일 및 멀티스크린 어플리케이션 개발
Flash Builder 4.5는 Flex 및 ActionScript를 이용해 모바일 AIR 어플리케이션을 개발, 테스트, 배포를 지원한다. 기존 Flash Builder를 이용했던 개발자들의 경험을 그대로 반영하여 웹, 데스크톱, 모바일 어플리케이션을 만들 수 있다. Flash Builder 4.5부터는 Google Android, Apple iOS, Blackberry Tablet OS 어플리케이션도 개발할 수 있게 되었다.

현재시점(2011년 5월)에 공식배포되어 있는 Flash Builder 4.5는 ActionScript Mobile Project상에서 Android, iOS 어플리케이션만 개발이 가능하며, Flex Mobile Project의 경우에는 Android 어플리케이션만 개발이 가능하다. 하지만 2011년 6월에 Flash Builder 4.5는 한번더 업데이트가 될 예정이며 앞서 언급한 모든 OS의 어플리케이션 개발이 가능하겠다.

Adobe Flex 4.5 SDK는 아래화면처럼 모바일 환경에 알맞은 일반적인 템플릿를 제공한다. Flash Builder 4.5는 이 Flex 4.5 SDK를 이용한 프로젝트를 개발할 수 있도록 지원해준다.

Adobe Flash Builder 4.5의 Mobile Project Wizard

Flash Builder 4.5에서 모든 모바일 프로젝트는 데스크탑 시뮬레이터 또는 디바이스를 선택적으로 연결하여 테스트 및 디버깅을 할 수 있다. 중요한 것은 같은 프로젝트내에 같은 소스를 가지고 다양한 디바이스 환경에 적용할 수 있다는 점이다. 이것은 Flash Builder 4.5가 멀티스크린 어플리케이션 개발환경을 제공한다는 것을 의미한다. 또한 Flash Builder 4.5는 개발 완료시 배포를 위해 간소화된 방법을 제공하고 있다.

다음 링크를 통해 Adobe Flex 4.5 SDK와 Flash Builder 4.5를 이용한 개발에 대해서 대략적으로 학습해 볼 수 있다.

- Hello World: Build a mobile app in five minutes
- (동영상)Guided Tour of mobile application development with Flash Builder 4.5
- Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5
- [따라하기]Flash Builder 4.5로 iPhone 4용 듀얼 브라우저 앱 만들기


큰변화 2. Flex 와 ActionScript 프로젝트 코딩 및 테스트 시간 단축
Flash Builder 4.5는 최적화된 코딩 환경을 제공하기 위한 기능이 추가되었다. 이것은 좀더 코딩을 더욱 빠르고 생산적인 코딩이 될 수 있도록 한다.

코드 템플릿(Code template), 퀵어시스트(Quick Assists), 코드힌트(Code hits), 메타데이터 코드(Metadata code) 자동 완성 등 Flash Builder 4.5는 코딩 시간을 단축시키기 위한 갖가지 기능들을 제공한다.

여기서는 코드 템플릿과 퀵어시스트만 살펴보겠다.

2.1 코드 템플릿(Code Template)
Flash Builder 4.5부터 코드 템플릿(또는 snippets: 쓸모있는 코드 조각) 지원이 추가되었다. 이것은 자주 사용하는 MXML, ActionScript, CSS 코드를 미리 추가해 개발자가 일일히 타이핑하지 않고  개발할 수 있도록 도와준다. Flash Builder 4.5에는 package, class, for 루프, while 루프, switch 블록등과 같은 100개가 넘는 코드 템플릿이 제공된다. 개발자는 자신의 커스텀 템플릿도 정의할 수 있으며 템플릿을 import/export할 수 있어 다른 개발자와 공유할 수도 있다.
 
아래 화면은 메뉴에서 Window > Preferences를 선택한뒤 Flash Builder > Editors > Code Templates를 선택했을때 모습이다. ActionScript, CSS, Flash Builder, MXML의 코드 템플릿이 적용되어 있다. 화면에서 MXML의 Button 클래스 코드 템플릿을 Preview창에서 확인할 수 있다.

실제 코딩시에는 아래 화면처럼 Button을 입력한 뒤 Ctrl+Space키를 누르면 아래와 같이 코드힌트를 볼 수 있다. 여기까지는 이전 Flash Builder에서도 제공하는 것이다. (참고 : MacOS에서는 Spotlight의 단축키가 Ctrl+Space로 되어 있으므로 설정>Spotlight에서 단축키 사용을 해제하면 된다.)


다시 한번 Ctrl+Space를 누르면 아래 화면처럼 Button에 대한 코드 템플릿만 보이게 된다. 해당 템플릿을 선택후 더블클릭 또는 Enter를 입력하면 코드가 추가된다.


아래 화면은 Button의 코드템플릿을 사용해 코드를 추가한 결과화면이다.


2.2 퀵어시스트(Quick Assists)
퀵어시스트는 코드 템플릿만큼이나 굉장히 유용하다. 이벤트 핸들러 함수를 자동으로 생성, 변수나 메서드의 이름을 리펙토링, Getter/Setter 생성, 로컬변수 및 인스턴스 변수 자동 생성, import 생성, 로컬변수를 인스턴스 변수로 변경, 생성되지 않은 클래스 및 메서드 생성 등등 거의 못하는게 없다. 퀵어시스트를 받을 부분에 커서를 올려놓고 Ctrl+1(MacOS에서는 Cmd+1)을 시도해보면 되겠다.

퀵어시스트를 조금 맛보도록 하자. 아래 코드처럼 UserVO 클래스를 만들고 생성자에 result.createCursor()을 만들었다. 앞으로 result는 ArrayCollection 클래스의 변수가 될 것이다. result위에 커서를 올려놓고 ctrl+1를 눌러보자. 아래화면처럼 2가지 선택이 나온다. 하나는 result 로컬변수 또하나는 인스턴스 변수이다. 로컬변수를 선택하자.


우리는 자동으로 아래 코드처럼 var result:Object 로컬변수가 생성되었음을 알 수 있다. 생성된 로컬변수 result위에 커서를 올려놓고 ctrl+1키를 눌러보자. 이번에는 새로운 퀵어시스트가 나온다. 첫번째는 로컬변수를 필드로 변환한다는 것, 두번째는 UserVO안에서 result 이름을 바꾼다는 것, 세번째는 Workspace내에 모든 result의 이름을 바꾼다는 것이다. 우리는 첫번째를 선택할 것이다.


아래처럼 result는 로컬변수에서 인스턴스 변수로 변경되었음을 알 수 있다.


result의 변수 타입을 Object에서 ArrayCollection으로 변경하고 ArrayCollection에서 퀵어시스트를 받아보자. 우리는 의도한바 이미 정의된 ArrayCollection을 import하는 것을 선택하면 되겠다.


아래처럼 ArrayCollection클래스가 자동으로 import 되었다.

퀵어시스트는 mxml 코드 상에서도 위력을 발휘한다.

아래 코드에 click 마우스 이벤트의 핸들러 함수인 onClick 위에 커서를 올려놓고 ctrl+1 키를 눌러보자. 그럼 아래 화면처럼 event 핸들러를 생성할 것임을 퀵어시스트가 알려주고 있다. 이것을 선택하자.


퀵어시스트의 도움으로 이벤트 핸들러 함수를 MXML 코드내에 자동으로 삽입하게 되었다.

퀵어시스트 기능은 이외에도 다양한 기능이 있으므로 필요하다면 Ctr+1(MacOS에서는 Cmd+1)을 활용하길 바란다.

코드 템플릿 및 퀵어시스트외에 코드힌트(Code hits), 메타데이터 코드(Metadata code) 자동 완성등 빠른 개발을 위한 기능에 대해 조금더 알아보고 싶다면 다음 글을 참고하길 바란다.

- Coding productivity enhancements in Flash Builder 4.5 



큰변화 3. 디자이너/개발자 워크플로우(workflow) 개선
이전 버전인 Flash Builder 4와 Flash Catalyst CS5는 개발자와 디자이너 간에 Flex 프로젝트를 진행하기 위한 협력도구 관계이다. 그 점은 지금도 변함없지만 이전 버전의 문제는 추가적인 개선을 위해 디자이너와 개발자간에 양방향 워크플로우를 지원하지 못했다는 점이다. 결국 개발이 끝난 Flex코드는 더이상 디자이너가 고칠 수 있는 여지를 마련되지 못했는 것이다. 하지만 Flash Builder 4.5와 Flash Catalyst CS5.5 부터는 양방향 협력이 가능하다. 다음 그림은 개선된 양방향 워크플로우를 보여주고 있다.

개선된 양방향 워크플로우



다음 링크를 통해 Flash Catalyst CS5.5 정보를 더욱 자세히 볼 수 있겠다.

- Flash Catalyst CS5.5 공식페이지
- Understanding new Flash Catalyst CS5.5 and Flash Builder 4.5 workflows
- What's New in Adobe Flash Catalyst CS 5.5
- (동영상)ADC Presents - Introduction to Flash Catalyst CS5.5 


큰변화 4.  최신 플랫폼 지원 및 성능 향상 
Flash Builder 4.5는 Eclipse의 마지막 버전(3.6.1 "Helios")을 지원한다. 또한 MacOS에서 Eclipse의 Cocoa 버전을 지원한다. 이전 Flash Builder는 Eclipse plug-in 버전을 따로 배포했다. 하지만 Flash Builder 4.5부터는 설치 디렉토리 > utilities 내에 Adobe Flash Builder 4.5 Plug-in Utility가 추가적으로 제공한다.

Flash Builder 4.5 설치시 함께 설치되는 Flex 4.5는 웹/데스크탑 어플리케이션을 위한 새로운 Spark DataGrid, Form, Image 컨트롤이 포함되었다. 또한 Flex 4.5는 모바일 어플리케이션 개발에 적합한 컨트롤을 제공한다. 
Flex 4.5에 대한 소개는 다음 링크를 참고한다.

- Introducing Adobe Flex 4.5 SDK 

Flash Builder 4.5는 종속되는 라이브러리가 많은 대용량 어플리케이션의 리팩토링 작업에 필요한 시간을 65% 단축했다. 또한 복잡한 어플리케이션을 프로파일링하는데 필요한 메모리를 60% 줄이고 그 응답속도도 향상시켜 Flex 어플리케이션 개발속도를 단축할 수 있게 되었다.


큰변화 5. PHP 개발 지원
Flash Builder 4.5는 PHP 개발자들을 겨냥한 새로운 버전의 Flash Builder가 소개되었다. Flash Builder 4.5 for PHP는 Flash Builder 4.5와 Zend Studio 8이 통합되었다. Flash Builder 4.5 for PHP를 이용하면 Flex와 PHP를 유연하게 개발이 가능해진다. 하나의 통합환경내에서 프로젝트 생성, PHP서비스 연결, 디버깅 워크플로우등이 모두 지원된다. PHP와 함께 개발을 원하는 개발자는 Flash Builder 4.5 for PHP 버전을 다운로드 받길 바란다.

다음 링크를 통해 Flash Builder 4.5 for PHP에 대해서 학습할 수 있겠다.

- Introducing Flash Builder 4.5 for PHP
- Streamlining Flex and PHP development with Flash Builder for PHP


더욱 많은 Flash Builder 4.5 정보
지금까지 Flash Builder 4.5의 큰변화라는 주제로 살펴보았다. Flash Builder 4.5 및 관련 기술들에 대한 문서 및 동영상을 아래 링크를 통해 공유하겠다.  

- Flash Builder 4.5 공식페이지
- Using Adobe Flash Builder 4.5 (PDF p.250) 
- Flex 4.5 SDK, Flash Builder 4.5 and Flash Catalyst CS 5.5 Now Available!
- Sharing projects between Flash Professional and Flash Builder
- Flex Test Drive for Mobile - Build a mobile application in an hour 
- Flash Builder Developer Center 
- Tour de Flex
- (동영상)Building Apps with Flash Builder 4.5
- (동영상)Mobile Flex 4.5 Demonstration
- (동영상)Tour de Mobile Flex on iOS
- (동영상)Preview of Flex on iOS devices
- (동영상)Flex on the iPad
- (동영상)Comb Over Charlie - an AIR 2.6 multiscreen game
- (동영상)Flex Charts on the iOS, Android and the PlayBook

Adobe CS 5.5가 출시 되었습니다. 동시에 Flash Builder 4.5와 Flash Catalyst CS 5.5도 함께 출시되었습니다. 개인적으로는 Flash Builder 4.5를 많이 기다렸습니다. 

Flash Builder 4.5의 공식 홈페이지는 다음과 같습니다.

Adobe Flash Builder 4.5 : http://www.adobe.com/products/flash-builder.html 

개인적으로 보는 Flash Builder 4.5의 가장 큰 변화는 모바일, Flex 4.5, PHP 개발지원등이 아닌가 싶습니다. 
특별히 기존 beta버전으로 공개되었던 Burrito에서는 안드로이드 기기 컴파일만 지원했는데 이번에는 iOS 어플 개발도 지원해줍니다. Flash IDE를 잘 사용할 줄 모르는 저로서는 가장 기다렸던 기능중에 하나입니다. 

다운로드는 다음 링크에서 Try버전으로 다운받을 수 있습니다. 

Adobe Flash Builder 4.5 다운로드 : http://goo.gl/hDi55

아래 화면은 Flash Builder 4.5를 설치하는 중간 화면입니다. AIR For Apple iOS Support가 눈에 띕니다. 


Flash Builder 설치후 실행한다음 ActionScript Mobile AIR Project를 만들면 다음과 같은 Setting 화면을 볼 수 있습니다. 기존에는 Android 어플만 개발이 가능했으나 이제 1개의 프로젝트로 아이폰, 안드로이드 개발이 모두 가능해졌습니다. (참고 : Flex Mobile AIR Project 에서는 여전히 Android 기반으로밖에 지원하지 않는 것 같았습니다.)



처음 실행해보면 아래와 같은 설정화면이 나옵니다. 이 부분은 Flash Builder Burrito를 이용해 Android 개발을 해본 사람은 친숙한 화면입니다. Apple iOS가 Target platform으로 등록되어 있음을 주목하세요. (참고 - Flex로 쉽게 모바일 어플을 만들자. - Adobe AIR Launchpad)


이제.... Flash Builder 에서도 iOS, Android 어플 개발이 모두 가능해졌군요. 더불어 테스트 해볼 것이 많아졌습니다.

참고로 Adobe CS 5.5는 현재 Try버전으로 다운받아 설치해 볼 수 있습니다. 다음 링크를 참고하세요.

Download a free trial of Creative Suite 5.5 Master Collection 

위 링크에서 다운로드 받아 설치하고 있는 화면입니다. Adobe AIR를 이용해 설치하네요. 



Adobe Flash CS 5.5, Flash Builder 4.5, Flash Catalyst CS 5.5 에 대해서 더욱 자세히 알고 싶다면 다음 링크를 참고하면 좋겠습니다.

Adobe Flash Builder 4.5 : http://help.adobe.com/en_US/flashbuilder/using/index.html
Adobe Flash Professional CS 5.5 : http://help.adobe.com/ko_KR/flash/cs/using/index.html 
Adobe Flash Catalyst CS 5.5 : http://help.adobe.com/ko_KR/flashcatalyst/cs/using/index.html 


좀더 학습을 원하시면 다음 링크도 유용합니다.

Adobe Flex 4.5 문서 : http://help.adobe.com/en_US/flex/using/index.html
Adobe Flash Platform용 ActionScript 3.0 참조 설명서 : http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/index.html
Adobe AIR : http://help.adobe.com/ko_KR/air/build/index.html 
Adobe 개발자 센터 :  http://www.adobe.com/devnet.html 
Tour de Flex : http://www.adobe.com/devnet/flex/tourdeflex.html 
 
글쓴이 : 지돌스타(http://blog.jidolstar.com/765)  
지난 2011년 2월말에 Flash Player 11 Incubator 버전이 배포됨에 따라서 3D GPU 가속 렌더링을 위한 Molehill을 미리 경험할 수 있게 되었다. 하지만 Molehill의 등장은 반드시 3D GPU 가속 및 3D 표현 향상만을 의미하지 않는다. 이 관점은 3D 렌더링 엔진을 이용해 2D 렌더링 형태로 활용해도 된다는 관점에서 이해될 수 있다. 기존(현재) Flash Player 10 이하에서 렌더링은 2D를 표현하기 위해 CPU를 이용한 계산으로 렌더링을 하지만 Molehill을 이용하면 이것 조차 GPU를 적용할 수 있으니 기존 2D 게임을 Molehill버전으로 바꿔주면 더욱 쾌적하고 빠른 게임이 될 수 있다.

이 글의 목적은 Molehill을 이용한 2D 그래픽 GPU 가속에 대한 내용을 소개하는데 있다. 그럼 먼저 Molehill에 대해서 간단하게 소개하고 2D 렌더링 속도에 어떤 장점이 있는지 살펴보도록 하겠다.

참고로 아래 글을 통해 Molehill관련 데모와 개발환경 구축방법을 볼 수 있겠다.

Adobe Flash Player 11 Incubator의 "Molehill" 3D를 활용하기 위한 개발환경 만들기http://blog.jidolstar.com/759 



1. Molehill을 이해하기
Flash Player 10.1 이후로 3D API가 공개되었다. 이것은 flash.display.Stage위에 flash.display.DisplayObject기반에서 3D를 다룰 수 있는 API를 추가적으로 제공해준 형태이다. 하지만 완벽한 GPU렌더링을 하지 않으며 z-sort, clipping등과 같은 3D 렌더링을 위한 주요 기능은 전부 배제되었기 때문에 몇몇사람들은 2.5D라고 불렀다.

Molehill에서 3D는 flash.display.Stage위에서 렌더링되는 것이 아니다. 전혀 다른 영역에서 그려지며 flash.display.Stage와는 철저하게 물리적으로 분리되어 있다. 즉 DisplayObject기반으로 돌아가는 것이 아니며 그것과 전혀 연관없는 다른 stage위에서 동작한다. 이와 비슷한 개념은 본인의 블로그의 StageVideo 개념에 대해서 설명하면서 이야기 한바 있다.(StageVideo는 이미 현재 공식배포중인 Flash Player 10.2 기반에서 동작되어지는 부분이다.) StageVideo처럼 별도의 영역에서 렌더링 되어진다는 것이 Molehill에서 지원하는 GPU가속의 비밀(?)인 것이다. 아래 링크를 통해 StageVideo에 대해서 이해할 수 있다.

Flash Player 10.2의 StageVideo에 대해http://blog.jidolstar.com/743

Molehill의 렌더링 영역과 기존 Stage 렌더링 영역이 물리적으로 분리되어 있다는 것은 결국 Molehill만의 별도의 API가 있다는 것을 의미한다. 구체적으로 flash.display.Stage 대신 flash.display.Stage3D 가 존재한다.


위 그림은 Stage3D의 Stage의 관계를 묘사하고 있다. Flash 2D graphics는 Stage 영역을 말하며 Stage3D[0], Stage3D[1]은 Stage3D 영역이다. Stage3D는 Stage위에 올라올 수 없으며 항상 아래에 있다. Stage가 투명인 경우에 Stage3D를 보여줄 수 있다는 점을 말하고 있다. Stage3D는 Stage속성의 stage3Ds.<Vector>를 참고하여 stage.stage3Ds[0] 형태로 접근이 가능하다. 이와는 별도로 StageVideo는 Stage3D 아래에 위치한다. Stage위에 존재할 수 있는 DisplayObject는 Stage3D위에 올라올 수 없다는 점도 기억해둘 필요 있다.

아래 그림은 Stage3D API문서의 일부분을 캡쳐한 것이다.



Stage3D는 flash.display3d.Context3D의 렌더링 영역이며 Stage3D로부터 Context3D를 참조할 수 있다.  Context3D는 일종의 메모리 공간으로 3D 객체를 다루는 데이터 영역이다. (Stage3D와 Context3D의 관계를 이해하기 위해 Bitmap과 BitmapData와의 관계처럼 해석해도 무방할 듯 싶다.) Context3D에서는 z-buffer, back buffer, Color, blend mode, pixel 및 vertex shader 프로그램, vertex stream, vertext indeices, texture 등과 같은 다양한 3D 기능이 담겨있다. 즉 진정한 3D 기능이 모두 주어진 셈이다. 참고로 아래그림은 flash.display3D 패키지에 포함되어있는 Context3D 관련 클래스들이다. 



Molehill API에 익숙해지기 위해 한글문서만큼 좋은 것은 없을 것이다. 아직 초반 기술이라 Adobe에서 제공하는 별도의 한글문서가 없지만 검색해보면 응용형태로 API를 이해해 볼 수 있도록 정리한 고마운 글도 있으니 참고바란다.

Molehill Getting Started :  http://blog.naver.com/q3korea/120126463667


위 문서에 있는 코드를 보면서 느끼겠지만 Molehill API는 매우 저수준의 언어로 구성되어 있다. 결국 학습하기가 어려울 뿐아니라 코딩하는 양도 만만치 않다. 이 때문에 Molehill API를 고수준의 언어로 랩핑(wapping)해준 새로운 3D 라이브러리를 찾기 마련이다. 이미 Away3D, Alternative3D와 같은 유명한 Flash 3D 라이브러리는 기존 Flash Player 9, 10 기반에서 제공하는 API의 인터페이스를 크게 변경하지 않고 Molehill을 경험할 수 있도록 제공하고 있다.


2. 기존 방식과 Molehill과의 2D 렌더링 속도 비교

제목에서 기존방식이라 함은 flash.display.Stage 기반의 렌더링 방식을 의미한다. 기존방식의 렌더링을 위해서는 GPU 도움을 받기 어렵다. 결국 이 기반에서 수많은 렌더링 대상 객체의 수는 제한적일 수 밖에 없었다. 물론 그 안에서도 적절한 최적화를 통해 훌륭한 게임이 많이 나올 수 있었지만 제약은 분명히 있었다.

Molehill을 2D로 표현한다는 것은 실제로는 3D지만 2D처럼 이용한다는 말과 동일하다. 


위 그림은 3D 상에서 사각형을 표현하기 위한 방법을 묘사하고 있다. 기본적으로 3D 객체는 Vertext 3개로 구성된 삼각형 모양의 조각들의 조합으로 이뤄진다. 위처럼 사각형을 하나 만든다면 삼각형 두 조각이 필요한 샘이다. 두개의 삼각형이 한개의 사각형을 이룬다는 점은 하나의 2D 객체 한개를 표현하기 위한 방법으로 사각형 하나면 되고 화면의 시선방향에 대해 사각형의 면이 직각을 이루면 그것이 2D인 것이다. 표현하는 방법은 약간 복잡하더라도 GPU 가속의 큰 도움을 받을 수 있기 때문에 그 정도는 감수할 수 있다.

2.1 기존방식 예제
작년에 필자는 Flash 어플의 속도 개선을 위한 다양한 실험을 했었다. 

Flash 속도 개선을 위한 실험 - 10만개 입자 유체 시뮬레이션 연장전!http://blog.jidolstar.com/671

어떤 언어든 당연한 이야기 이겠지만 ActionScript 3.0으로 만들어지는 코드 한줄 한줄이 Flash 어플 속도에 얼마나 영향을 미칠 수 있는가 알 수 있다. 이외에도 계산이든 렌더링이든지 속도를 향상시킬 수 있는 방법은 여전히 많다. 가령 Pixel Bender, Shader 등을 이용해서 더 빠른 속도를 만들어 낼 수 있다. 하지만 그것도 기존에 나와 있는 다양한 3D 게임들을 따라올법만한 속도는 아닐것이다. 

아래에 위 실험을 통해 사용된 코드를 볼 수 있다.

이 코드를 컴파일 하기 위해 아래 라이브러리 및 클래스가 미리 준비되어야 한다.

com.adobe.utils.AGALMiniAssembler : http://goo.gl/ITcrn 
net.hires.debug.Stats : http://goo.gl/EgZ1s


//출처 : http://wonderfl.net/c/c0Gi/read , http://clockmaker.jp
package 
{
	/**
	 * 수많은 화살표 데모
	 * 고속화를 위한 테스트 
	 * 화살표 1000개 
	 * @author Yasu
	 */
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	import flash.utils.*;
	
	import net.hires.debug.Stats;
	
	[SWF(width="465", height="465", backgroundColor="0xFFFFFF")]
	public class NoMolehillTest extends Sprite {
		private const NUM_PARTICLE:uint = 1000;
		private const ROT_STEPS:int = 120;
		
		private var forceMap:BitmapData = new BitmapData( 233, 233, false, 0x000000 );
		private var randomSeed:uint = Math.floor( Math.random() * 0xFFFF );
		private var particleList:Vector.<Arrow> = new Vector.<Arrow>(NUM_PARTICLE, true);
		private var rect:Rectangle = new Rectangle( 0, 0, 465, 465 );
		private var seed:Number = Math.floor( Math.random() * 0xFFFF );
		private var offset:Array = [new Point(), new Point()];
		private var timer:Timer;
		private var world:Sprite = new Sprite();
		private var rotArr:Vector.<BitmapData> = new Vector.<BitmapData>(ROT_STEPS, true);
		
		public function NoMolehillTest() {
			
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.quality = StageQuality.BEST;
			stage.frameRate = 110;
			
			addChild(world);
			
			// 포스 맵의 초기화를 행합니다
			resetFunc();
			
			// 루프 처리
			addEventListener( Event.ENTER_FRAME, loop );
			
			//시간차이로 포스(force)맵과 색변화의 상태를 변경할 것임
			var timer:Timer = new Timer(1000)
			timer.addEventListener(TimerEvent.TIMER, resetFunc);
			timer.start();
			
			//화살표를 생성
			var dummy:Sprite = new Sprite();
			dummy.graphics.beginFill(0xFFFFFF, 1);
			dummy.graphics.lineStyle(1, 0x0, 1);
			dummy.graphics.moveTo(2, 4);
			dummy.graphics.lineTo(8, 4);
			dummy.graphics.lineTo(8, 0);
			dummy.graphics.lineTo(20, 7);
			dummy.graphics.lineTo(8, 14);
			dummy.graphics.lineTo(8, 10);
			dummy.graphics.lineTo(2, 10);
			dummy.graphics.lineTo(2, 4);
			
			var matrix:Matrix;
			var i:int = ROT_STEPS;
			while (i--)
			{
				matrix = new Matrix();
				matrix.translate( -11, -11);
				matrix.rotate( ( 360 / ROT_STEPS * i )* Math.PI / 180);
				matrix.translate( 11, 11);
				rotArr[i] = new BitmapData(22, 22, true, 0x0);
				rotArr[i].draw(dummy, matrix);
			}
			
			// 파티클을 생성
			for (i = 0; i < NUM_PARTICLE; i++) {
				var px:Number = Math.random() * 465;
				var py:Number = Math.random() * 465;
				particleList[i] = new Arrow(px, py);
				world.addChild(particleList[i]);
			}
			
			// 상태표시 
			addChild(new Stats);
		}
		
		private function loop( e:Event ):void {
			
			var len:uint = particleList.length;
			var col:Number;
			
			for (var i:uint = 0; i < len; i++) {
				
				var arrow:Arrow = particleList[i];
				
				var oldX:Number = arrow.x;
				var oldY:Number = arrow.y;
				
				col = forceMap.getPixel( arrow.x >> 1, arrow.y >> 1);
				arrow.ax += ( (col      & 0xff) - 0x80 ) * .0005;
				arrow.ay += ( (col >> 8 & 0xff) - 0x80 ) * .0005;
				arrow.vx += arrow.ax;
				arrow.vy += arrow.ay;
				arrow.x += arrow.vx;
				arrow.y += arrow.vy;
				
				var _posX:Number = arrow.x;
				var _posY:Number = arrow.y;
				
				var rot:Number = - Math.atan2((_posX - oldX), (_posY - oldY)) * 180 / Math.PI + 90;
				var angle:int = rot / 360 * ROT_STEPS | 0;
				// Math.abs보다 더 빠른 계산을 위해 
				angle = (angle ^ (angle >> 31)) - (angle >> 31);
				arrow.rot += (angle - arrow.rot) * 0.2;
				arrow.bitmapData = rotArr[arrow.rot];
				
				arrow.ax *= .96;
				arrow.ay *= .96;
				arrow.vx *= .92;
				arrow.vy *= .92;
				
				// 좌표 배치 좌표를 정수화해 둡니다
				arrow.x = arrow.x | 0;
				arrow.y = arrow.y | 0;
				
				( _posX > 465 ) ? arrow.x = 0 :
					( _posX < 0 ) ? arrow.x = 465 : 0;
				( _posY > 465 ) ? arrow.y = 0 :
					( _posY < 0 ) ? arrow.y = 465 : 0;
			}
		}
		
		private function resetFunc(e:Event = null):void{
			forceMap.perlinNoise(117, 117, 3, seed, false, true, 6, false, offset);
			
			offset[0].x += 1.5;
			offset[1].y += 1;
			seed = Math.floor( Math.random() * 0xFFFFFF );
		}
	}
}

import flash.display.*;

class Arrow extends Bitmap
{
	public var rot:int = 0;
	public var vx:Number = 0;
	public var vy:Number = 0;
	public var ax:Number = 0;
	public var ay:Number = 0;
	
	function Arrow( x:Number, y:Number) {
		this.x = x;
		this.y = y;
	}
}

위 코드는 아래 링크에서 실행해 볼 수 있다. 
http://wonderfl.net/c/c0Gi/read


아래 화면은 위 코드를 실행시에 CPU 사용율과 함께 스크린 캡쳐를 한 것이다.



1000개의 화살표를 렌더링하는데 40~50 FPS 정도의 속도를 유지하면서 CPU 사용율이 70~80 정도 되었다.(필자 PC 스펙이 너무 구형이라 그럴 수도... ㅡㅡ) 분명 속도 자체는 문제 없겠지만 CPU 사용율이 너무 커서 다른 업무에 방해가 될 수 있다. 결국 CPU 사용율을 줄이기 위해 stage.frameRate를 20~30으로 줄일 수 밖에 없다. 또는 성능에 따른 렌더링 주기 조정(http://diebuster.com/flash/170)을 통해 CPU 점유율을 줄일 수 있다. 



2.2 Molehill을 이용한 2D 렌더링 예제

기존방식으로 렌더링하는 것은 속도 개선 및 CPU 사용율 줄이기에 대한 노하우가 크게 필요하다는 사실을 알았다. 물론 Molehill을 쓴다고 이런 노하우는 필요하다. 그래서 같은 방법으로 노하우를 적용하되 Molehill을 함께 사용한다면 사용자의 경험을 더욱 극대화 시킬 수 있을 것이다.

좋다. 그럼 위 예제를 Molehill 버전으로 변경한 코드를 보자. html에 embed시에 wmode는 반드시 direct로 지정되어야 한다. Flash Builder에서 테스트 하시려면 http://blog.jidolstar.com/759 에서 그 방법을 알 수 있다.

이 코드는 아래 코드가 미리 있어야 하겠다.

com.adobe.utils.AGALMiniAssembler : http://goo.gl/ITcrn 
net.hires.debug.Stats : http://goo.gl/EgZ1s
minimalcomps : https://github.com/minimalcomps


//출처 : http://wonderfl.net/c/4VE6
package 
{
	/**
	 * FP11로의 테스트.5000 파티클.빠르지는 되지만 범용성 없음
	 */
	
	import flash.display.*;
	import flash.display3D.Context3D;
	import flash.display3D.Context3DBlendFactor;
	import flash.display3D.Context3DCompareMode;
	import flash.display3D.Context3DProgramType;
	import flash.display3D.Context3DRenderMode;
	import flash.display3D.Context3DTextureFormat;
	import flash.display3D.Context3DVertexBufferFormat;
	import flash.display3D.IndexBuffer3D;
	import flash.display3D.textures.Texture;
	import flash.display3D.VertexBuffer3D;
	import flash.geom.*;
	import flash.events.*;
	import flash.text.TextField;
	import flash.utils.*;
	import flash.geom.*;
	import net.hires.debug.Stats;
	import com.bit101.components.ComboBox;
	
	[SWF(width="465", height="465", backgroundColor="0xFFFFFF")]
	public class MolehillTest extends Sprite {
		private const TEXTURE_WIDTH:int = 2048;
		private const NUM_PARTICLE:uint = 16380; // 파티클 최고수 
		private var ROT_STEPS:int = 0;
		
		private var num_limit:uint = 5000; // 렌더링 하는 수
		
		private var forceMap:BitmapData = new BitmapData( 233, 233, false, 0x000000 );
		private var randomSeed:uint = Math.floor( Math.random() * 0xFFFF );
		private var particleList:Vector.<Arrow> = new Vector.<Arrow>(NUM_PARTICLE, true);
		private var rect:Rectangle = new Rectangle( 0, 0, 465, 465 );
		private var seed:Number = Math.floor( Math.random() * 0xFFFF );
		private var offset:Array = [new Point(), new Point()];
		private var timer:Timer;
		private var world:Sprite = new Sprite();
		private var rotBmp: BitmapData;
		private var text : TextField;
		
		private var combobox : ComboBox;
		
		
		private var context : Context3D;
		private var program : ShaderProgram;
		private var iBuffer : IndexBuffer3D;
		private var vBuffer : VertexBuffer3D;
		private var uvBuffer : VertexBuffer3D;
		private var texture : Texture;
		private var ortho : Matrix3D = new Matrix3D();
		private var r_rot_steps : Vector.<Number> = Vector.<Number>([0,0,0,0]);
		
		private var vb : Vector.<Number> = new Vector.<Number>();
		private var uvb : Vector.<Number> = new Vector.<Number>();
		private var ib : Vector.<uint> = new Vector.<uint>();
		private const vunit : int = 4;
		private const uvunit : int = 2;
		
		private var uirect : Sprite = new Sprite;
		
		public function MolehillTest() {
			
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.quality = StageQuality.BEST;
			stage.frameRate = 110;
			
			addChild(world);
			
			// 포스 맵의 초기화를 행합니다
			resetFunc();
			
			// 루프 처리
			//addEventListener( Event.ENTER_FRAME, loop );
			
			//시간차이로 포스(force)맵과 색변화의 상태를 변경할 것임
			var timer:Timer = new Timer(1000)
			timer.addEventListener(TimerEvent.TIMER, resetFunc);
			timer.start();
			
			//화살표를 생성
			var dummy:Sprite = new Sprite();
			dummy.graphics.beginFill(0xFFFFFF, 1);
			dummy.graphics.lineStyle(1, 0x0, 1);
			
			dummy.graphics.moveTo(2, 4);
			dummy.graphics.lineTo(8, 4);
			dummy.graphics.lineTo(8, 0);
			dummy.graphics.lineTo(20, 7);
			dummy.graphics.lineTo(8, 14);
			dummy.graphics.lineTo(8, 10);
			dummy.graphics.lineTo(2, 10);
			dummy.graphics.lineTo(2, 4);
			
			var bmpw : int = TEXTURE_WIDTH;
			ROT_STEPS = bmpw / 16; 
			var matrix:Matrix;
			rotBmp = new BitmapData(bmpw, 16, true, 0x0);
			var i:int = ROT_STEPS;
			while (i--)
			{
				matrix = new Matrix();
				matrix.translate( -11, -7);
				matrix.rotate( ( 360 / ROT_STEPS * i )* Math.PI / 180);
				matrix.scale(0.75, 0.75); // 크기를 줄였어요.
				matrix.translate( 8+i*16, 8);
				rotBmp.draw(dummy, matrix);
			}
			
			// 파티클을 생성합니다
			for (i = 0; i < NUM_PARTICLE; i++) {
				var px:Number = Math.random() * 465;
				var py:Number = Math.random() * 465;
				particleList[i] = new Arrow(px, py);
				//world.addChild(particleList[i]);
			}
			
			// ui
			uirect.graphics.clear();
			uirect.graphics.beginFill(0x000000, 0.8);
			uirect.graphics.drawRoundRect(0, 0, 200, 100, 16, 16);
			uirect.graphics.endFill();
			
			combobox = new ComboBox(uirect, 80, 8, "5000", new Array(500, 1000, 5000, 10000, 16380));
			combobox.selectedIndex = 2;
			num_limit = 5000;
			
			addChild(uirect);
			
			// 디버그용의 스탓트를 표시하고 있습니다
			addChild(new Stats);
			
			//
			stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, createContext3D);
			stage.stage3Ds[0].requestContext3D();
			stage.stage3Ds[0].viewPort = new Rectangle(0, 0, rect.width, rect.height);
			
		}
		
		private function createContext3D(e:Event):void 
		{
			context = (e.target as Stage3D).context3D;
			context.configureBackBuffer(465, 465, 0, false);
			context.setRenderToBackBuffer();
			context.setBlendFactors(Context3DBlendFactor.SOURCE_ALPHA, Context3DBlendFactor.ONE_MINUS_SOURCE_ALPHA);
			context.enableErrorChecking = true;
			
			text = new TextField();
			text.textColor = 0xffffff;
			text.text = context.driverInfo;
			text.width = 465;
			text.y = 450;
			addChild(text);
			
			program = new ShaderProgram(context, new VertexShader(), new FragmentShader());
			ortho = MatrixUtil.ortho(rect.width, rect.height, false);        
			r_rot_steps[0] = 1/ROT_STEPS;
			
			for (var i : int = 0; i < NUM_PARTICLE; i++) {
				// 시험 삼아 정적인 다각형 정보와 매프레임 갱신하는 위치 정보를 다른 vertexBuffer로 해 보았지만, 속도적으로는 변화 없음
				vb.push( -8, -8,  0, 0);
				vb.push(  8, -8,  0 ,0);
				vb.push(  8,  8,  0 ,0);
				vb.push( -8,  8,  0, 0);
				
				uvb.push( 0,          0);
				uvb.push( 1/ROT_STEPS,0);
				uvb.push( 1/ROT_STEPS,1);
				uvb.push( 0,          1);
				
				
				ib.push( i*4+0, i*4+1, i*4+2, i*4+0, i*4+2, i*4+3 );
			}
			vBuffer = context.createVertexBuffer(vb.length / vunit, vunit);
			vBuffer.uploadFromVector(vb, 0, vb.length / vunit);
			
			uvBuffer = context.createVertexBuffer(uvb.length / uvunit, uvunit);
			uvBuffer.uploadFromVector(uvb, 0, uvb.length / uvunit);
			
			iBuffer = context.createIndexBuffer(ib.length);
			iBuffer.uploadFromVector(ib,0,ib.length);
			
			try {
				texture = context.createTexture(TEXTURE_WIDTH, 16, Context3DTextureFormat.BGRA, false);
				texture.uploadFromBitmapData(rotBmp);
				context.setTextureAt( 1, texture );
			} catch (e:Error) {
				text.text = e.message;
			}
			
			addEventListener(Event.ENTER_FRAME, loop);
		}
		
		private function loop( e:Event ):void {
			
			context.clear(0.4, 0.4, 0.5, 1); //이 정도치에 clear가 없으면 texture가 사라진다
			
			num_limit = parseInt(combobox.items[combobox.selectedIndex]);
			
			var len:uint = num_limit < particleList.length ? num_limit : particleList.length ;
			var col:Number;
			var index : int = 0;
			for (var i:uint = 0; i < len; i++) {
				var arrow:Arrow = particleList[i];
				
				var oldX:Number = arrow.x;
				var oldY:Number = arrow.y;
				
				col = forceMap.getPixel( arrow.x >> 1, arrow.y >> 1);
				arrow.ax += ( (col      & 0xff) - 0x80 ) * .0005;
				arrow.ay += ( (col >> 8 & 0xff) - 0x80 ) * .0005;
				arrow.vx += arrow.ax;
				arrow.vy += arrow.ay;
				arrow.x += arrow.vx;
				arrow.y += arrow.vy;
				
				var _posX:Number = arrow.x;
				var _posY:Number = arrow.y;
				var rot:Number = - Math.atan2((_posX - oldX), (_posY - oldY)) * 180 / Math.PI + 90;
				var angle:int = rot / 360 * ROT_STEPS | 0;
				// Math.abs의 고속화군요
				angle = (angle ^ (angle >> 31)) - (angle >> 31);
				//arrow.rot += (angle - arrow.rot) * 0.2;
				//arrow.bitmapData = rotBmp;
				
				arrow.ax *= .96;
				arrow.ay *= .96;
				arrow.vx *= .92;
				arrow.vy *= .92;
				
				// 배치 좌표를 정수화해 둡니다
				//arrow.x = arrow.x | 0;
				//arrow.y = arrow.y | 0;
				
				( _posX > 465 ) ? arrow.x = 0 :
					( _posX < 0 ) ? arrow.x = 465 : 0;
				( _posY > 465 ) ? arrow.y = 0 :
					( _posY < 0 ) ? arrow.y = 465 : 0;
				
				vb[index++] = (_posX - 465.0/2)-8;
				vb[index++] = (_posY - 465.0/2)-8;
				vb[index++] = angle >> 0;
				index++;
				
				vb[index++] = (_posX - 465.0/2)+8;
				vb[index++] = (_posY - 465.0/2)-8;
				vb[index++] = angle >> 0;
				index++;
				
				vb[index++] = (_posX - 465.0/2)+8;
				vb[index++] = (_posY - 465.0/2)+8;
				vb[index++] = angle >> 0;
				index++;
				
				vb[index++] = (_posX - 465.0/2)-8;
				vb[index++] = (_posY - 465.0/2)+8;
				vb[index++] = angle >> 0;
				index++;
			}
			vBuffer.uploadFromVector(vb, 0, num_limit*4); 
			
			context.setProgram(program.program);
			
			context.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, ortho, true);
			context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 4, r_rot_steps);
			
			context.setVertexBufferAt(0, vBuffer, 0, Context3DVertexBufferFormat.FLOAT_2);
			context.setVertexBufferAt(1, vBuffer, 2, Context3DVertexBufferFormat.FLOAT_2);
			context.setVertexBufferAt(2, uvBuffer, 0, Context3DVertexBufferFormat.FLOAT_2);
			
			context.drawTriangles(iBuffer, 0, 2*num_limit);
			context.present();
		}
		
		private function resetFunc(e:Event = null):void{
			forceMap.perlinNoise(117, 117, 3, seed, false, true, 6, false, offset);
			
			offset[0].x += 1.5;
			offset[1].y += 1;
			seed = Math.floor( Math.random() * 0xFFFFFF );
		}
	}
}

import com.adobe.utils.AGALMiniAssembler;
import flash.display3D.Context3D;
import flash.display3D.Context3DProgramType;
import flash.display3D.Program3D;
import flash.geom.Matrix3D;

import flash.display.*;

class Arrow// extends Bitmap
{
	public var rot:int = 0;
	public var vx:Number = 0;
	public var vy:Number = 0;
	public var ax:Number = 0;
	public var ay:Number = 0;
	public var x:Number = 0;
	public var y:Number = 0;
	
	function Arrow( x:Number, y:Number) {
		this.x = x;
		this.y = y;
	}
}

class ShaderProgram
{
	public var program : Program3D = null;
	
	public function ShaderProgram(context : Context3D, vsh : AGALMiniAssembler, fsh : AGALMiniAssembler)
	{
		program = context.createProgram();
		program.upload(vsh.agalcode, fsh.agalcode);
	}
}

class VertexShader  extends AGALMiniAssembler
{
	//
	// 
	//  vBuffer0(x,y)     --> attribute(0) : va0.xy
	//  vBuffer1(rot,rsv) --> attribute(1) : va1.x, va1.y
	//  uvBuffer2(u,v)    --> attribute(2) : va2.xy
	//
	// 
	//  projmatrix(transposed)   --> | vc0.x  vc1.x  vc2.x  vc3.x |
	//                               | vc0.y  vc1.y  vc2.y  vc3.y |
	//                               | vc0.z  vc1.z  vc2.z  vc3.z |
	//                               | vc0.w  vc1.w  vc2.w  vc3.w |
	//
	//  texture coord step       --> vc4.x   (1/rotation steps)
	//
	// 
	//  position                 --> op.xyzw
	//
	// 
	//  texture coord            --> v0.uv
	//
	//  m44 op, va0, vc0             position = (x,y) * projmatrix
	//  mov v0, va2                  uv = (u,v)
	//  mul vt0.x, va1.x, vc4.x      
	//  add v0.x, va2.x, vt0.x       u = u + (rot*texture_coord_step)
	//
	private var src : String =
		"m44 op, va0, vc0 \n" + // m33라도 좋을지도
		"mov v0, va2 \n" +
		"mul vt0.x, va1.x, vc4.x \n" +
		"add v0.x, va2.x, vt0.x \n" +
		"";    
	
	public function VertexShader()
	{
		assemble(Context3DProgramType.VERTEX, src);
	}
}

class FragmentShader  extends AGALMiniAssembler
{
	private var src : String =
		"mov ft0, v0\n" +
		"tex ft1, ft0.xy, fs1 <2d,repeat,nearest>\n" + 
		"mov oc, ft1\n";
	
	public function FragmentShader()
	{
		assemble(Context3DProgramType.FRAGMENT, src);
	}
}
class MatrixUtil
{
	public static function ortho(w : int, h : int, rev : Boolean) : Matrix3D
	{
		return new Matrix3D(Vector.<Number>([2/w, 0, 0, 0,  0, rev?-2/h:2/h, 0, 0,  0, 0, 1, 0,  0, 0, 0, 1]));
	}
	
}


위 코드는 아래 링크를 통해 실행해 볼 수 있다.
http://escargot.la.coocan.jp/molehill_fast/index.html


아래 화면은 화살표를 5000개로 맞춰놓고 렌더링한 캡쳐화면이다. 기존방식보다 4000개 이상 처리함에도 불구하고CPU 점유율과는 비교가 안될 정도로 떨어졌고 FPS도 50~60사이이다. 


아래 화면은 16380개로 올린 결과 화면이다. CPU 점유율은 24%로 전보다 다소 올라갔으나 FPS는 변함이 거의 없다. CPU 점유율이 올라간것은 as3 코드 loop 부분이 더 복잡해서일 뿐이다. 


두가지 결과만 보더라도 Molehill을 통한 GPU 가속은 꽤나 유용함을 금방 알 수 있다. 
 
아래 링크의 예제를 통해 같은 방법으로 비교해보는 것도 괜찮을 것 같다.

기존방법 Clear Water: http://wonderfl.net/c/9R8a
Molehill이용 Clear Water  : http://wonderfl.net/c/enj6
관련 기술 설명 : http://goo.gl/eySSG


3. Molehill 기반 2D framework 소개 

Molehill을 이용해 2D를 렌더링하는 것이 얼마나 이득이 될 수 있는가 알아보았다. 이러한 이득은 곧바로 필요성으로 이어져 관련 framework 개발로 이어질 수 있다. 찾아보니 실제로 그런 프로젝트가 있었다.

소개하고자 하는 M2D라는 오픈소스 프로젝트는 Molehill을 이용해 2D을 표현하도록 하도록 하는데 목적이 있다. Molehill의 저수준의 언어 접근성을 고수준으로 만들어주어 개발이 용이하게 만든것이 특징이다. 이는 iOS기반 GPU가속 2D라이브러리인 Cocos2D와 같은 필요성에서 탄생된 프로젝트이다.



아직 진행중인 프로젝트이기 때문에 관련된 문서도 없고 기능도 제약이 있다. 

ND2D라는 라이브러리도 있다. 


ND3D를 만든 개발자가 Molehill 버전의 2D 엔진인 ND2D를 만든것이다.
위 사진은 아래 링크에서 실행해 볼 수 있다.
http://www.nulldesign.de/2011/03/10/nd2d-molehill-2d-engine/ 

소스는 아래 링크에서 다운받을 수 있겠다.
https://github.com/nulldesign/nd2d

M2D보다는 ND2D가 더 좋아보인다. ^^


4. 정리하며 

지금까지 내용을 통해 Flash Player 차세대 렌더링 엔진 Molehill을 이용해 2D 표현시 어떤 장점이 있을까 객관적인 자료를 찾아보고 분석해보았다. Molehill을 이용해 GPU 가속을 할 수 있다는 것 자체는 큰 장점이긴 하나 그만큼 연구해야할 내용은 더 많아진 것은 사실이다. 앞으로 Flash Player가 모바일에서 활약하는 날이 올때 그 빛은 엄청 발할 것이라 판단한다. 그러므로 우리 개발자들은 미리 준비할 필요가 있겠다.

Flash Player 11 Incubator를 통해 차세대 3D 엔진인 Molehill을 미리 경험할 수 있다는 것은 큰 혜택이다. 새롭게 연구해야하는 과정은 참 어렵다. 필자도 이런 어려운 과정을 겪고 있으며 혼자 이런 연구를 하는게 무척이나 힘들다. 뭔가 이러한 일을 함께 하는 사람들이 많았으면 하는 바램이다.


5. 관련글


 글쓴이 : 지돌스타(http://blog.jidolstar.com/763)


올해들어 Adobe Flash/AIR에 관련된 기술이 모바일의 흐름에 따라 급변하고 있습니다. 바쁘게 일하고 있는 사람으로써 이런 신기술을 흡수하기가 너무 어려울 정도입니다.

최근 새로운 CS 5.5버전이 발표되었고 Flash Builder 4.5가 함께 소개되었습니다. Flash Builder 4.5부터는 안드로이드 뿐만 아니라 블랙베리, iOS기반 어플도 개발할 수 있게 되었습니다. 현재 브라질에서 열리고 있는 Flash Camp에서 Flash Runtime의 미래라는 주제로 멀티스레드지원, 빠른 GC, 새로운 숫자형, Stage3D, StageVideo, Threaded video pipeline등의 차세대 Flash에 추가될 내용들이 소개되어지고 있고요. Adobe가 Flash의 GPU가속에 대한 지원을 아끼지 않으면서 3D렌더링에 대한 다양한 API가 만들어져 이미 Flash Player 11 Incubator 버전이 개발자들 사이에서 실험되고 있습니다. 모두 모바일에 초점이 맞추어 제한된 화면, 제한된 밧데리, 전혀 다른 사용자 경험에 따라 변해가고 있다는 생각입니다. 굉장히 전략적이고 빠른 대응을 하고 있습니다. 결국 시장의 급격한 변화에 Flash 기술이 따라가고 있으며 어찌보면 Cross Device, Cross Platform분야에서 만큼은 매우 선도적입니다.

Flash 기술이 급변함에 따라 예전처럼 쉽게 접근할 수 있던 Flash가 이제 더 이상 아닌 것처럼 느껴집니다. 더욱 전문성이 더해지기 시작했고 Flash의 원래 장점이였던 개발의 저변화를 통한 다양한 컨텐츠 생산이 약간 없어지는 상황이 발생하지 않을까라는 조심스런 추측도 합니다. 하지만 한편으로는 Flash IDE는 여전히 디자이너 접근을 용이하게 해주기 때문에 별 영향이 없을 것 같다는 생각도 합니다. 그러나 분명한 것은 모바일 디바이스의 대중화에 따른 사용자 경험이 바뀌고 이에 따라 기존 웹중심의 컨텐츠는 모바일 중심으로 변화하고 있다는 것에 대해 발빠르게 대응해야한다는 점은 인정해야할 사실이고 또한 준비해야합니다.

새로운 트랜드 대응에 도움을 주기 위해 관련된 정보를 링크해둡니다. 참고하시고 이를 통해 국내에서도 관련된 다양한 정보가 쏟아져 나오길 기대해 봅니다.


아래는 관련 동영상입니다.

글쓴이 : 지돌스타(http://blog.jidolstar.com)


작년에 Powerfl 이라는 조직(?)을 만들고 별 성과없이 흐지부지 되었는데...(저의 불찰) 다행히 이 멋진 이름을 올해부터 다시 사용할 수 있게 되었습니다. 바야흐로 Powerfl 팀블로그를 운영하기 시작했습니다. 

 
올해 초부터 저를 비롯한 8명의 Flash 개발자들이 최소 1주일에 2편씩 돌아가면서 글을 올리고 있습니다. 이 블로그에 저자로 참여하는 분들 모두 자신이 관심을 두고 있는 분야에 대해 심혈을 기울여서 저작활동을 하고 있습니다. Flash 시장이 침체(?)되어 있는 가운데도 이 블로그를 통해 Flash의 리얼함과 Flash만의 저력을 볼 수 있는 것 같습니다. 

여기에 올린 글은 각자의 블로그에 퍼갈 수 없습니다. (당연히 방문자도 퍼가시는 것은 금지입니다. 링크는 가능) 그것은 팀블로그에 참여한 저자들의 약속이고 Powerfl의 고유의 특성을 살리기 위한 취지이기도 합니다. 한국에서 팀블로그가 가능하구라는 것을 이 블로그를 통해 깨닫고 있습니다. 그래서 열심히 하고 싶은 마음이 생깁니다.

저는 "Away3D로 만들어보는 태양계"라는 주제로 글을 쓰기 시작했습니다. 당초 Away3D만을 다루려고 했지만 웬지 식상할 것 같고... 제가 개인적으로 열심히 안할 것 같아서 좀 더 임팩트를 줄 수 있는 주제를 선정했습니다. Flash로 이런것도 할 수 있어? 라는 생각이 들정도로 강력한 임팩트를 주고 싶네요. ㅋㅋㅋ 

현재 팀블로그의 겉모양은 아직 완성된 것은 아니며 좀더 독자들이 편하게 볼 수 있도록 수정중입니다.

Flash Player Molehill버전도 prerelease되었고 여러가지로 실험해볼 것이 산더미 같네요. 작년에 실패한 것을 이번에 만회.. 아니 그보다 더 멋진 활동을 해보고 싶네요. 그럼 즐~~~ Flash 하세요.

지돌스타 (http://blog.jidolstar.com)  

Flash Burnning Day는 매일 반복되는 업무와 야근으로 지쳐 개발에 대한 열정을 잃어가는 당신을 위해 준비한 자리입니다.

평소 Flash로 만들어 보고 싶었던 애플리케이션게임 등을 개발하고 공유하는 행사로, ACC가 직접 Flash Burnning Day에 참여하여 참여자들과 함께 개발을 진행하게 됩니다
만들어진 작품은 adoberia.co.kr 사이트를 통해 공유될 예정이고

<공유의 장시간에는 프로젝트도 공유하고 시상식도 함께 진행됩니다.

<행사 안내>

일시

3 12(토요일) 09:30~18:30 (9 시간)

장소

디자인 티모(서울대 입구역 4번 출구)

참가대상

* Flash에 관심이 있는 모든 분

참가비

(유료) 5,000(개인 당)

팀장이 팀원 비용을 함께 입금해주세요.

입금계좌

이문국 / 국민은행 36702-04-108394

참가방법

1.      댓글 신청(순번/이름/ID입력)

2.      계획서 작성 후 adobe@reseedcorp.com 발송

3.      참석가능 여부 이메일 회신

4.      참가비입금

5.      참가등록완료

 


<AGENDA>

09:30 ~ 09:50

오프닝조별 멘토 ACC 소개

09:50~12:00

팀별 프로젝트 진행 

12:00~12:30

Lunch Time

12:30~17:00

팀별 프로젝트 진행

17:00 ~ 18:00

공유의 장시상



<성공적인 Flash Burnning Day를 함께 만들기 위하여 >

 

1.      가능한 행사시간 내에 완성할 수 있는 프로젝트 범위로 기획서 부탁 드립니다.

거창한 기획서보다는 완성된 프로젝트로 말하는 Flash Burnning Day로 준비하고자 합니다.

정해진 시간 내에 진행된 프로젝트의 완성도와 창의성을 토대로 평가가 진행됩니다.

2.      행사 운영을 원활히 하고퀄리티 높은 행사 진행을 위해 선착순 40팀까지만 신청이 가능합니다.

3.      팀 인원은 1~3인까지 가능합니다. (개인 혼자서도 가능)

4.      본 행사는 점심을 제공하지 않습니다.

5.      무선인터넷 사용이 가능하나 동시 접속시 느려질 수 있으니 인터넷이 꼭 필요하신 팀은 무선인터넷 준비를 부탁 드립니다.



 



======================================================================================================

추가 설명을 드리자면..
우선 말 그대로 버닝데이입니다.
아침부터 저녁까지 정해진 시간 동안 버닝합니다.
ACC분들과 카페 스탭 분들이 행사를 함께 진행하지만..
직접 코딩을 해주지는 않습니다.
단, 문제에 대한 풀이 방향을 함께 고민하고 응원할 예정입니다.

액션스크립트에 익숙하지 않아도 누구나 참가할 수 있으며,
주제도 자유주제입니다.
혼자 참가해도 되고, 최대 3명까지 함께 참가해도 됩니다.

기획서는 자세히 쓸 필요없으며,
정해진 시간내에 도전할 수 있는 범위내에서 간단하게 제출하시면됩니다.

점심을 제공하지 않기 때문에 팀별로 준비를 하셔야하며..
시간을 절약하기 위한 음식 또는 점심 패스(환영)도 추천드립니다. 
(아침을 많이 먹고 오세여 ^^)

구체적인 평가 방식은 당일 알려드리겠지만..
창의성 < 완성도가 더 높게 평가될 예정입니다.

마지막으로 좋은 평가를 받은 팀에게는 훈훈한 시상품들이 준비되어 있으며..
본 행사는 지속적으로 진행(업그레이드) 예정이고,
년 말 가장 높은 점수를 받은 팀에게는 더욱 훈훈한 시상품이 준비될 예정입니다.
물론 예정이지만.. 여러분의 호흥도에 따라 시상품의 규모도 커질 수 있다는 점 ^^;

시간이 얼마 안 남았습니다.

함께 버닝에 참여할 많은 분들의 도전 기다리겠습니다.


*** 행사에 관한 의견 및 궁금한 사항은 덧글로 남겨주세요. ***


저는 참석할 수 있을지 모르겠어요 ^^;;;

지난해 2010년 11월 30일 Flash Player 10.2 Beta가 처음 배포되면서 가장 눈에 띈 것은 바로 StageVideo가 아닌가 싶다. 이전 버전 Flash Player 10.1은 H.264 코덱 영상의 하드웨어 가속 기능을 강화하여 동영상 재생시 CPU 점유율을 감소시켰다는데 의미가 있었다. 10.2에서는 비디오 랜더링 파이프라인을 더욱 확장하고 색상 보정 기능과 이미지 스케일링등의 각종 기능을 추가했다. 즉, GPU가속 기능을 더욱 확대했다는 것을 의미하며 이로써 1080P 해상도의 HD 동영상을 보여주는데 CPU 점유율 0%에 가까운 수준이 되었다고 한다. 이것은 새로운 비디오 렌더링 방식인 StageVideo를 도입한데서 비롯된다. 이 문서는 StageVideo 에 대해서 이해하는 것을 목적으로 한다. (현재 시점에서 Flash Player 10.2이 공식 배포중이다.)


StageVideo 구조에 대해 
Flash Player 10.2 부터 지원하는 StageVideo는 어떻게 동작하는 것일까? 어떻게 해서 CPU 점유율을 줄이고 GPU 가속을 받을 수 있을까? 이런 부분에 대한 궁금증이 생길것이다. 

아래 화면은 전통적으로 사용된 기존 Flash Player에서 Video 시각객체(DisplayObject) 렌더링하는 방식을 묘사하고 있다. 


기존에 Flash Player에서 Video를 보여주는 위해 시각객체의 부모격인 flash.display.Stage위에 추가해야만 했다. 이 방식의 문제점은 동영상 렌더링을 위한 Video객체가 다른 시각객체와 연결되어 있어 CPU 점유율이 높아질 수 밖에 없는 구조라는 점이다. GPU를 적극활용하기에는 물리적으로 불리한 방식이다. 

반면에 다음 그림은 비디오를 렌더링하기 위해 Flash Player 10.2부터 지원하는 StageVideo를 사용했을때를 묘사한다.


전통적인 방식과 달리 Flash Player 10.2부터는 비디오를 렌더링하기 위해 flash.display.Stage의 도움을 받지 않는다. flash.display.Stage 뒤에 StageVideo가 물리적으로 분리가 되어 있어 다른 시각객체들과 연관성 없이 동작이 가능해졌다. 이렇게 됨으로써 flash.display.Stage위에 시각객체들이 그래픽 가속을 받지 않더라도 StageVideo만은 GPU가속이 가능하게 된 것이다. 


StageVideo 사용여부에 따른 CPU 점유율 

운영체제 및 그래픽카드별로 StageVideo를 사용여부에 따른 CPU 점유율에 대한 비교 표가 다음 링크에 공유되어 있다. 

Stage Video with the Brightcove Player : http://goo.gl/ZALsa


CPU 점유율이 분명 개선이 되었다는 것을 확인할 수 있다. 

다음 동영상은 지난 2010 Adobe MAX 행사에서 StageVideo 사용여부에 따른 퍼포먼스를 보여주고 있다.



결국 StageVideo를 이용하면 다른 시각객체들과 무관하게 되어 GPU를 이용해 렌더링함으로써 CPU점유율과 메모리 사용량이 많이 줄어든다는 것을 알 수 있다.


Flash Player 10.2 환경에서 StageVideo를 느껴보자.

Adobe에서 제공하는 Big Buck Bunny라는 제목의 HD 동영상을 통해 여러분은 직접 StageVideo 환경을 경험해볼 수 있다. 아래 링크로 방문해보길 바란다.




StageVideo Running : true가 되어 있는지 확인하고 플레이 해보길 바란다. false라면 Flash Player 10.2가 설치가 되었는지 확인해보고 10.1 이하라면 다음 링크에서 10.2 버전을 다운로드 받아 설치하면 되겠다. 

Adobe Flash Player 10.2 다운로드 : http://get.adobe.com/kr/flashplayer


StageVideo의 제약사항 
StageVideo는 다른 시각객체(DisplayObject)와 별도의 구조를 가진다. 이렇게 됨으로써 비디오 객체가 기존 시각객체가 가지는 특징 및 속성을 활용하는데 제약이 따른다. 가령 다음과 같은 제약사항이 있다.

- StageVideo는 회전할 수 없다. 단지 90 회전만 가능하다.
- StageVideo는 ColorTransform 또는 3D transform을 적용할 수 없다.
- StageVideo 객체는 alpha채널, blendmode, filter, mask, scale9Grid등을 적용할 수 없다.
- StageVideo에 렌더링 되는 영상은 BitmapData 객체로 복사할 수 없다.
- StageVideo에 렌더링 되는 영상은 bitmap 캐쉬 할 수 없다.
- 영상은 SWF 파일에 Embed 될 수 없다. 반드시 NetStream 객체를 이용해서 운영되어야만 한다.
- wmode가 transparent나 opaque인 경우는 GPU 가속에 제한된다. wmode를 direct로 지정해야한다. 
- 기본 하드웨어에 따라 몇몇 색상이 지원되지 않을 수 있다. 이러한 경우 Flash Player의 임의의 color space을 사용한다.

위와 같은 제약사항은 사실 거의 제약이라고 보지 않아도 된다. 왜냐하면 Youtube 영상을 보면서 회전하거나 filtering 하는 경우는 드물기 때문이다. 제약사항은 있으나 GPU 가속이 된다는 것만으로도 큰 효과를 기대할 수 있겠다. 



StageVideo API 사용하기
이 문서를 보는 사람중에 개발자도 분명히 있을 것이다. 개발자는 Flash Builder Burrito와 Flex SDK  4.5.0.18623 이상의 환경만 갖춰진다면 StageVidoe를 테스트해볼 수 있다. 

Flash Builder Burrito 다운받기 : http://labs.adobe.com/technologies/flashbuilder_burrito/

완벽한 개발환경을 갖추기 위해서는 여러분의 브라우져에 Flash Player 10.2 디버그 버전을 설치하는 것이 좋겠다. 다음 링크에서 윈도우, Mac, 리눅스 환경에서 각 브라우져별 Flash Player 10.2 디버그 버전을 받아 설치할 수 있겠다. 

다음 문서를 통해 여러 시나리오로 StageVideo API를 테스트 해볼 수 있다.

조금 더 구체적으로 개발환경을 구성하는 방법과 함께 StageVideo API를 이용한 개발방법을 경험하시려면 다음 동영상을 보기 바란다.

StageVideo 사용법 : http://gotoandlearn.com/play.php?id=134

추가사항 
오창훈 님께서 저보다 먼저 글을 써주셨네요. ^^ 소스코드도 있으니 참고하세요.


정리하며 

지금까지 Flash Player 10.2에서 지원하는 StageVideo에 대해서 다뤄봤다. 

이미 Flash Player를 이용한 동영상 서비스는 보편화 된 상태이다. 이제 HD급 영상에 대한 렌더링도 GPU가속이 됨으로써 많은 관련 업체들이 적극적으로 StageVideo를 도입 할 것으로 판단한다. 

Flash Player 10.2 부터는 StageVideo 개념외에 IE9에서 GPU 가속지원, 네이티브 커스텀 마우스 커서 지원, 멀티모니터 풀스크린 지원, Sub-pixel 텍스트 렌더링 지원을 하게 되었다. 이런 부분도 함께 보면 업무 추진에 도움이 되지 않을까 생각한다. 자세한 내용은 다음 링크를 통해 확인해 볼 수 있겠다. 

Flash Player 개발자 센터 : http://www.adobe.com/devnet/flashplayer.html
Flash Player 10.2 feature : http://www.adobe.com/products/flashplayer/


StageVideo와 관련된 내용들

Adobe Flash Player 10.2 다운로드 : http://get.adobe.com/kr/flashplayer
(영문)Adobe 개발자 센터에서 소개하는 Stage Video : http://goo.gl/5bmBV
(영문)Flash Player 10.2 Beta: Stage Video : http://labs.adobe.com/technologies/flashplayer10/stagevideo.html
(영문)Getting started with stage video : http://www.adobe.com/devnet/flashplayer/articles/stage_video.html
(동영상)MAX Sneaks : Flash Player Video Performance Improvements : http://www.youtube.com/watch?v=geK7geL3I40
(동영상)StageVideo 사용법 : http://gotoandlearn.com/play.php?id=134
(영문)Introducing SimpleStageVideo : http://www.bytearray.org/?p=2571
(한글)StageVideo에 대해 : http://hazbola.tistory.com/222 
(영문)Delivering video and content for the Flash Platform on TV : http://www.adobe.com/devnet/devices/articles/video_content_tv.html
(한글)어도비, 동영상 가속 기능 강화된 플래시 플레이어 10.2 베타 발표 http://www.kbench.com/hardware/?no=93384&sc=1
Flash Player 개발자 센터 : http://www.adobe.com/devnet/flashplayer.html
Flash Player 10.2 feature : http://www.adobe.com/products/flashplayer/
[StageVideo 샘플 소스 공유]플래시 플레이어 10.2 정식 Release : http://lovedev.tistory.com/619


글쓴이 : 지돌스타(http://blog.jidolstar.com/743

몇일전 2011 Adobe Community Professional(ACP)이 되었다는 메일을 받았습니다. 


ACP는 전세계적으로 300명내외 있습니다. 한국에는 저를 비롯해 열이아빠로 잘알려진 이준하님, Flex 엔터프라이즈 컨설팅으로 활동중이신 배준균님, 작년 소셜게임 최고의 주가를 달렸던 선데이토즈 대표 이정웅님, ActionScript 카페를 운영하며 지속적인 활동중이신 땡굴이 강성규님, 총 5명이 2011 ACP가 되었습니다. 

작년에는 이렇다할 활동을 못해 아쉬웠는데, 올해는 새로운 팀블로그 파워플(http://powerfl.com) 을 통해 꾸준한 글을 올리고 개인블로그를 통해 지속적인 관련 기술을 공유하려고 합니다. Flash에 대해 일주일에는 한개 이상 올리는 것을 목표로 삼으려고 합니다. 오프라인 활동은 회사에서 제 위치 때문에 많이 못합니다. 대신 온라인 활동을 주로 하려고 합니다. 

열심히 활동하겠습니다.




스타플에서 타임라인을 새롭게 개편해서 베타 오픈을 했습니다. 미진한 점이 아직 많으나 사용자들의 의견을 듣고자 베타로 오픈합니다.


스타플 타임라인 : http://timeline.starpl.com (PC에서만 접속하실 수 있습니다.)
(샘플1)위콘의 타임라인 : http://timeline.starpl.com/wecon
(샘플2)지돌스타의 타임라인 : http://timeline.starpl.com/jidolstar


기존 타임라인은 스타플 서비스 자체에 포함되어 있는 형태였습니다. 수차례에 걸쳐서 타임라인을 전면 개편하면서 지속적인 사용성을 높혀왔습니다.

스타플 최초 타임라인 - 길다란 달력형태


2번째 스타플 타임라인 - 카테고리와 글로 엮어짐

3번째 스타플 타임라인 - 키워드로 엮어짐

4번째 스타플 타임라인 - 중요기록과 키워드로 묶음


스타플을 최근에 사용하셨던 분들은 정말 놀라셨을지도 모르겠네요. 이런 역사가 있었다니 말이죠? ^^

기존 사용자분들은 스타플이 지난해 말에 개편하면서 타임라인이 없어진 것에 대해 많이들 아쉬워 하셨습니다. 제작하는 우리도 너무 아쉬웠으나 스타플을 더욱 유용하고 좋은 서비스로 탈바꿈하기 위한 선택이였음을 이해해 주실 것이라 생각합니다.

관심사로만 묶여서 자신의 공간을 잃어버린 것 같다는 아쉬움을 이제 타임라인을 통해 찾으실 수 있게 되었습니다.

타임라인은 기존 스타플과 연동이 됩니다. 즉, 타임라인에서 작성하신 글은 스타플에도 올라갑니다. 반대로 스타플에 올리신 글은 타임라인으로 보낼 수도 있습니다.


스타플 회원이시라면 누구나 http://timeline.starpl.com 으로 접속하시면 스타플 타임라인을 사용하실 수 있습니다. (모바일 사용자는 PC를 통해 접근하셔야 합니다.)


처음 접속하시면 위와 같은 문구를 보실 수 있습니다. 베타 버전은 기존 타임라인 사용자의 글이 올라와 있지는 않습니다. 대신 정식 오픈때에 복구 서비스를 진행할 예정입니다. 타임라인에 대한 문의 및 의견은 스타플에서 <타임라인> 관심사를 넣어주시고 글을 작성해주시면 됩니다. http://starpl.com/jidolstar/keyword/10078175/space 처럼요.   



타임라인 처음 접속했을대 모습입니다. 아무것도 없지요. 여러분은 어렵지 않게 타임라인에 직접 글을 작성하시거나 스타플에 작성된 글을 타임라인에 담으실 수도 있습니다.



타임라인 추가나 편집하기를 통해 타임라인에 카테고리를 넣으실 수 있습니다.


위 화면은 스타플에서 올린 글을 타임라인에 가져오는 기능입니다. 만들어진 카테고리에 자신만의 추억을 담아보세요.



타임라인에 스타플에 올렸던 제 글들을 올려봤습니다. 이제 좀 그럴듯해지네요.



타임라인은 스킨도 지원합니다. 전 개인적으로 이 색이 가장 좋네요.




배경에 이미지도 입힐 수 있어요. 아직 사용자가 직접 올리는 기능은 없지만 조만간 지원해주지 않을까요? ^^;





타임라인에 올린 글이나 사진은 위처럼 보실 수 있어요. 양쪽에 방향버튼 (< , >)를 클릭하시면 이전, 이후 사진을 보실 수 있고요.


스타플에도 작은 변화가 생겼습니다.


스타플에 블랙홀 같은 별이 아래 처럼 바뀌었어요. 옆에 타임라인 행성도 보이네요.


타임라인 행성을 선택하시면 바로 타임라인으로 이동합니다. 가운데에 나의 별을 선택하시면 아래와 같은 멋진 화면도 보실 수 있죠. 마우스 드래그로 하면 회전도 되고 마우스 스크롤로 확대축소할 수 있습니다. 별똥별도 떨어지네요 ㅎ




물음표(?)는 다음 서비스를 말하는 것이겠죠? ^^ 무엇일까요? 저도 아직 모릅니다. 아무튼 더 좋은 서비스를 만들게 되면 내별에 또 다른 행성이 붙게 되겠네요.


스타플에서도 타임라인에 직접 글을 올릴 수 있습니다. 자신의 글의 '수정|삭제' 옆에 시계모양의 '등록' 버튼을 이용하시면 됩니다. 모바일 회원이 작성하신 글은 모바일 아이콘이 표시됩니다. 타임라인에 작성된 글은 타임라인 표시가 주어집니다.




스타플 타임라인에 대해서 간략히 소개했습니다.

말씀드렸지만 아직 베타라 중간중간 버그도 있고 사용성도 미진한 부분이 있습니다. 좋은 아이디어나 개선사항 있으시면 언제든지 '타임라인'관심사로 글을 작성해주세요. 성심성의껏 의견을 참고해서 반영할 수 있도록 노력하겠습니다.

스타플 타임라인에 여러분의 추억을 담아보세요.

http://timeline.starpl.com (모바일은 지원을 하지 않고 있습니다. PC를 이용해 주세요.)

글쓴이 : 지돌스타(http://blog.jidolstar.com)




2011년에 들어서 재미있는 사이트가 생겨났다. ActionScript 3.0 코드기반 SNS인 Wonderfl.net에서 만들어진 사이트로, 이 사이트를 통해 wonderfl에서 만들어지는 Flash 컨텐츠를 웹상에서 안드로이드 apk로 자동으로 변환해 다운로드 받을 수 있다.

Flash2Android : http://wonderfl.net/flash2android

단, 이 서비스는 2011년 1월 말까지만 할 예정인 것 같다. 그 이후는 어떻게 될지 잘 모르겠다.

위 사이트를 어떻게 활용할 수 있는지 궁금해하는 사람을 위해 짧은 동영상을 준비해 보았다.


 
코드 경로 : http://wonderfl.net/c/zPyr

위 동영상에서 보여주고 있는 과정을 성공적으로 수행하기 위해 아래 내용을 알고 있어야 하겠다.
1. 안드로이드 OS가 2.2 프로요 이상이어야 한다.
2. 안드로이드 폰에 Adobe AIR가 설치되어 있지 않는다면 중간에 설치과정이 필요하다.
3. 안드로이드 폰에서 설정 > 응용프로그램 > 알 수 없는 소스(시판되지 않은 응용프로그램 설치 허용)이 체크되어 있어야 한다.
4. wonderfl.net에서 Flash 컨텐츠를 apk로 변환할 수 있는 것은 자신이 직접 Fork(일종의 펌질)나 작성된 코드에 국한된다.

wonderfl.net에서 ActionScript 3.0이나 Flex 코드를 웹사이트를 통해 컴파일 할 수 있던 것은 Adobe에서 관련 컴파일러를 공개하기 때문에 가능하다. 안드로이드 컴파일러도 공개가 되어 있기 때문에 이 모든것이 가능한 것이라 생각하면 되겠다.

모든 Flash 어플은 모두 안드로이드 APK로 변환될 수 있다. 하지만 모두 정상동작하는 것은 아니다. 데스크톱 브라우져에서 돌아가는 플래시 중에는 키보드 입력으로 동작하는 것들이 꽤 있다. 이러한 것들은 안드로이드 폰에 설치한 후 실행이 된다 하더라도 동작을 시킬 수 없다. 또한 마우스 이벤트와 터치는 엄연히 다르며모바일은 제약된 사양을 가지므로 데스크탑만큼 좋은 퍼포먼스를 보여줄 수 없기 때문에 이에 대한 최적화 과정도 반드시 필요하다. 

wonderfl에서 작성했던 플래시 어플중 키보드로 동작되던 것을 터치이벤트 또는 가속센싱 이벤트를 통해 동작하도록 바꾼뒤 테스트를 해보았다.

아래 동영상은 ABC flyer라는 일본의 개발자가 올린 플래시 어플이다. 이 어플을 Fork한뒤 키보드 대신 가속도 센싱을 이용해 비행기를 조정하도록 수정해 보았다.


 
작성 코드 : http://wonderfl.net/c/eTHE

Flash Player 10.1, AIR 2.0 부터는 가속계를 사용할 수 있는 API인 flash.sensors.Accelermeter가 추가 되었기 때문에 이것이 가능한 것이다.

다음 동영상은 예전에 키보드 이벤트를 이용해 2D 상에서 비행기를 부드럽게 움직이는 방법을 모색하기 위해 만들었던 플래시 어플이다. 키보드 대신 멀티터치 이벤트를 이용해 적용해보았다.


 
멀티터치 적용전(키보드) 코드 : http://wonderfl.net/c/57qJ
멀티터치 적용후 코드  : http://goo.gl/x0KAW

Flash CS5 및 Flash Builder Burrito 에서 위 코드는 모두 테스트 해볼 수 있다.


정리하며
Flash가 장점인 것은 hika님의 말대로 배포라는 것에 동의한다. 설계, 기획, 제작과정을 보자면 C, C++, Java와 같은 보편적으로 널리 사용되는 언어로 개발하는 것과 비교할때 쉽다고 생각할 수 있지만 VM이라는 제약환경때문에 퍼포먼스를 올리기 위한 노력에 비하자면 오히려 더 어려운 경우도 발생한다. 하지만 배포만큼은 Flash를 따라올 수 있는 플랫폼이 아직 존재하지 않는다.

이 배포는 종전까지 웹과 데스크탑(AIR)로 국한되었지만 이제 다양한 디바이스들도 이에 포함되게 되었다. 이 글의 내용이 그러하듯이 말이다. 그렇다고 개발이 편해지는 것은 아니다. 지금까지 쌓아왔던 노력과 리소스는 분명 활용될 수 있지만 디바이스 마다 특색이 있어 접근 방법이 다르기 때문에 그에 대한 개발 비용은 여전히 존재한다. 

Flash는 앞으로 크로스 플랫폼 지원과 더불어 3D는 행보도 볼만할 것 같다. 차세대 Flash Player의 코드명 Molehill은 그 가능성을 보여주었다.

앞으로 Flash의 행보가 어떻게 될지 기대가 된다.


참고글
Flash2Android : http://wonderfl.net/flash2android
Flex로 쉽게 모바일 어플을 만들자. - Adobe AIR Launchpad : http://blog.jidolstar.com/717
원더플(Wonderfl)을 이용해 ActionScript 3.0을 공부하자. - 자동 테스트 환경 구축 소개 : http://blog.jidolstar.com/669
플래시 빌더 5 프리뷰 설치해보기 : http://koko8829.tistory.com/934
안드로이드 2.2 프로요와 Flash Player 10.1의 만남 : http://blog.jidolstar.com/712
어도비, 모바일과 다양한 기기를 위한 에어 2.5 공개 : http://blog.jidolstar.com/716
차세대 Flash Player 3D API Molehill : http://blog.jidolstar.com/733
Flex Test Drive for Mobile - Build a mobile application in an hour : http://goo.gl/qm8PY
What's new in Flash Builder "Burrito" : http://goo.gl/Z4Baz
Introducing Adobe Flex SDK "Hero" : http://goo.gl/dYzbH
Mobile development using Adobe Flex SDK "Hero" and Flash Builder "Burrito" : http://goo.gl/5iiZM
Coding productivity enhancements in Flash Builder "Burrito" : http://goo.gl/bSb4r

글쓴이 : 지돌스타(http://blog.jidolstar.com/739)


몇 일전 저는 뜻하지 않게 감동적인 선물을 받았습니다. "마로의 꿈 - 액션스크립트 3.0으로 배우는 소셜 게임 프로그래밍" 이라는 이명희/김종훈 님이 쓰신 책이였습니다.

몇 번 책선물을 받은 적이 있지만 이번 책은 너무도 특별했습니다. 바로 저자인 이명희님께서 직접 엽서까지 보내서 선물로 주신 겁니다. 사실 이명희님를 만난 적이 없는 것 같습니다.(제가 오프라인 활동을 너무 안하다 보니...) 이명희님께서는 원래 C/C++ , Java등 다른 분야에서 개발하시던 분인데 게임 개발을 위해 ActionScript 3.0을 접하시다가 제 블로그를 알게 되었다고 합니다. 책을 보낸 이유는 제 블로그를 통해 도움을 많이 받아 감사하다는 것이였습니다. 초판 날짜를 보니 아마도 발행되자마자 바로 보내셨더군요. 정말 감동이였습니다.

처음에는 다 그렇듯이 Flash 개발이 쉽다고들 하지만 그것은 어디까지나 Flash IDE를 통해 디자인적 접근이 그러한 것이고 게임처럼 고도의 경험과 기술이 들어가는 분야로 접근하면 다른 언어와 마찬가지로 어려운 것은 사실입니다. 왜냐하면 Flash 게임개발은 그 분야대로 노하우가 필요한 것은 분명하니깐요. 아마도 diebuster(http://diebuster.com)을 방문해서 글을 보신 경험이 있다면 Flash가 결코 만만하지는 않구나라는 생각이 들겁니다. Flash가 대중적이긴하나 VM이기 때문에 속도와 질을 극대화 시키는 것은 쉽지 않거든요. 특히나 게임분야는 말할 것도 없지요.

책 소개를 해야겠네요. 이 책은 "마로의 꿈"이라는 게임을 기반으로 쓰여진 책입니다. 저자가 직접 간단한 소셜게임을 만들었고 그 게임에 녹아있는 각종 스킬을 소개하는 내용을 담았습니다. 마지막에는 게임에 사용된 인공지능 및 소셜게임을 네이버에 등록하는 방법도 소개합니다. 게임은 2D지만 여느 소셜게임처럼 3D 느낌을 다룹니다. 자원생성, 자원관리, 지도제작, 아바타 제작 및 애니메이션등 정말 소셜게임이 필요한 핵심내용을 담고 있습니다. 게임이라는 특성상 진부하고 어려운 내용을 담을 것 같지만 실제로 이 책은 300페이지가 채안되면서도 간단하고 명쾌하게 설명해주고 있어서 처음 소셜게임에 입문하시는 분들에게는 국내서적으로 이만한 책은 없다고 생각합니다.

국내에서 IT서적하면 항상 인기부류인 기초를 다루는 책이 나오는 것이 실상임에도 이런 책이 출판이 될 수 있었다는 것도 참 신기합니다. 요즘 스마트폰 붐으로 약간 침체된듯한 국내 Flash분야에 활기를 불어넣는데 이 책이 일조할 수 있을 것이라 생각합니다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/736)


Flash Player 10.2 beta가 2010년 12월 초에 배포가 되었다. 아무튼 강력한 GPU가속을 이용해 비디오 렌더링을 최적화 시킨 것이 가장 큰 변화라고 볼 수 있겠다. GPU를 이용하다보니 CPU 사용율이 급격히 줄어든다. 아래 동영상을 통해 Flash Player 10.2 beta의 GPU를 이용한 동영상 렌더링 효과를 눈으로 확인할 수 있다.


현재 Flash Player 10.2 beta는 정식 버전이 아니므로 자동으로 배포되어지지 않는다. 그러므로 다음 링크를 통해 다운로드 받을 수 있다. 개발자라면 debug 버전을 받을 것을 추천한다.


이번 배포의 변화는 다음과 같다.
1. Stage Video 하드웨어 가속
2. IE9에서 하드웨어 가속 지원
3. 네이티브 커스텀 마우스 커서 지원
4. 멀티모니터에서 풀스크린모드 지원 

이미 꽤 지난 내용이라 검색해보면 한글로된 설명글들도 있다.


Flash 분야에 손놓고 지낸지 오래라... 좀 파악하고 있는 중이다. ㅎㅎ

글쓴이 : 지돌스타(http://blog.jidolstar.com) 

이 블로그를 시작한지도 3~4년이 되어 갑니다. 그동안 Flex, Flash, 천문, 스타플 관련해서 지속적으로 글을 써왔습니다. 지금 돌이켜보면 그렇게 열심히 써왔던 것들이 피가 되고 살이 되어 돌아온다는 것을 너무도 잘 느꼈습니다. 블로그를 통해 온라인에서 다양한 사람들과 교류를 할 수 있었고 미약하게 나마 좋은 사람들도 만나게 되었습니다. 또한 ACC, ACP라는 명함도 달게 되었고요.

이 블로그에는 되도록이면 Adobe 기술에 관련된 것 외에는 담지 않으려고 노력했습니다. 그래서 Flash 관련 내용이 대부분입니다. ACC가 된 이후로는 Adobe 기술에 대한 부분만 집중적으로 올렸었는데, 요즘에는 관련 글이 잘 써지지 않습니다. 왜냐하면 현재 주 업무가 아이폰 개발이다 보니 그렇네요. 그러다보니 블로그가 죽는다는 느낌이 듭니다. 또한 스스로 정리하는 것도 많이 줄어드는 것 같구요.

그래서 이제 좀더 포괄적으로 블로그를 운영하려고 합니다. 제가 최근에 공부하고 느끼는 모든 것을 왠만하면 다 담으려고 합니다.  관련기술, 천문, 스타플에 대한 것만 올리려고 합니다. 제가 좋아하는 드럼과 개인적인 일상 내용은 전부 배제할겁니다.

많은 지식이 있어서 이 블로그를 활용하는 것은 아닙니다. 오히려 너무도 부족함을 느끼기에 블로그를 더욱 쓰고 싶습니다. 지식 욕구를 채우고 또한 좋은 정보도 제공하며 많은 사람들을 만나는 통로를 이 블로그를 통해 만들어 갈 것입니다.

(2011.07.21)이 글은 조금 오래된 글로 약간 현시점과 다른 내용이 있을 수 있습니다. 현재 Flash Builder는 4.5.1 까지 공식 배포중입니다. Flex 4.5.1 SDK, AIR 2.7도 함께 배포중이므로 참고하세요. 



한동안 아이폰 개발로 Flash 관련된 일을 전혀 하지 못하다 보니 Flash를 주제로 다룬 여기 블로그도 많이 정체되어 있다는 느낌을 지울 수 없더군요. 그래서 시간내서 간단하게 하나 적어봅니다.


지난 몇일전에 미국에서 Adobe MAX가 열렸었죠. 바쁜 나머지 관심있게 지켜보지 못해 주요 주제가 무엇인지는 잘 모르겠지만 여기저기 들리는 것을 보면 결국 "모바일"인 것 같습니다. 이번에 Preview 버전으로 배포된 Flash Builder "Burrito", Flex SDK "Hero", Flash Catalyst "Panini" 모두 모바일 개발에 대한 내용이 추가되었습니다.

저는 이 글에서 Flash Builder를 이용해 Flex나 AIR 어플리케이션을 만들어본 경험이 있는 분들에게 모바일 개발을 아주 쉽게 할 수 있는 일종의 팁을 전달하고자 합니다. 먼저 Flash Builder "Burrito"에 대해서 잠깐 소개하고 Adobe AIR Launchpad를 이용해 어떻게 모바일 AIR 어플리케이션을 만들 수 있는지 소개합니다.


Flash Builder와 Mobile이 만나다. - Flash Builder "Burrito"

Flash Builder "Burrito"에는 Flex SDK "Hero"가 이미 내장되어 있기 때문에 따로 설치할 필요가 없습니다. 여러분은 아래 링크에서 Flash Builder "Burrito"를 다운로드 받을 수 있습니다. 단, Adobe 회원에 먼저 가입하셔야 합니다.

http://labs.adobe.com/technologies/flashbuilder_burrito/

설치는 기존 Flash Builder 4 와 거의 동일합니다. 기존에 설치된 Flash Builder와 별도의 위치에 설치되므로 안심하고 설치하시면 됩니다.

Flash Builder "Burrito"를 실행하시면 먼저 아래와 같은 Start Page가 눈에 띕니다. 이 화면만 보아도 알 수 있듯이 Mobile과 Desktop&Web이 나눠져 있습니다. 여기를 따라 가면 간단한 예제가 있으니 쉽게 따라하실 수 있습니다.



Flash Builder "Burrito"는 아래처럼 모바일 프로젝트를 만들 수 있습니다.


현재는 아래처럼 안드로이드 플렛폼만 지원하고 있습니다. 테스트는 데스크탑에서 가상의 장비를 선택해 시뮬레이션을 할 수 있으며 또한 장비가 있다면 직접 물려서 테스트 해볼 수도 있습니다.


개인적으로 안드로이드 폰(HTC Desire)를 소유하고 있어서 Mobile 버전으로 간단하게 만들어 디바이스 시뮬레이팅을 할 수 있었습니다. 인증서 발급이나 별도의 설정없이 너무 간단하게 만들 수 있어서 기존 Flex 개발자라면 안드로이드용 어플 개발을 쉽게 할 수 있게 되었습니다. 아래 사진이 바로 그 실행결과입니다.



배포도 상당히 간단해서 기존에 AIR 어플리케이션에서 배포버전을 배포하듯이 간단한 인증서 발급만으로 APK로 배포할 수 있습니다.


Adobe AIR Launchpad - AIR 프로젝트 자동화 생성기
Adobe AIR 라운치 패드가 새로 배포되었습니다. 이것은 금방 소개한 Flash Builder "Burrito"를 겨냥해서 제작되었습니다. 이 어플은 Flex개발자들이 데스크탑 및 모바일 AIR 어플을 만드는데 도움을 주기 위한 일정의 자동화 프로젝트 생성기입니다.
 
Flash Builder에서 AIR 프로젝트를 만드는 것은 매우 쉽습니다. 하지만 AIR의 전반적인 기능을 이해해야 제대로된 설정을 할 수 있고 각종 설정은 사실 손이 많이 가는 작업일 수 있습니다. 능숙한 개발자야 문제가 안되지만 초보개발자라면 가이드라인을 제시받고 싶어할 것입니다. 이때 아주 유용할 것 같습니다.

설치하기 위해 다음 링크로 가시면 됩니다.
http://labs.adobe.com/technologies/airlaunchpad/

아래는 실행 첫화면입니다. 프로젝트를 자동으로 생성시켜주기 위한 첫번째 단계로 만들 어플이 데스크탑인지 모바일용인지 선택합니다.

어짜피 데스크탑용이야 많이 해봤으므로 저는 모바일을 선택했습니다. 아래와 같은 화면이 나옵니다. 프로젝트를 생성하기 위해 총 4단계(Setting, Configuration, Samples, Generate)를 거칩니다. 아래 화면은 그중 첫번째 단계지요.

위 화면에서 볼 수 있듯이 어플의 기본 설정을 도와줍니다. Application Name에 어플 이름을 등록하고 버전정보, 풀스크린, 자동회전, 인터넷 엑세스, GPS 등 사용여부를 결정할 수 있고 Icons를 선택하면 사용할 아이콘을 미리 등록할 수 있도록 합니다. 일반 AIR 프로젝트에서는 XML을 직접 편집해야했는데 이런 것을 이용하면 많이 편하겠네요. Install Location은 안드로이드 프로요 버전의 경우 내장 또는 외장(SD카드) 중 둘중에 한곳에 설치할 수 있습니다. 이때 설치 위치를 결정해줍니다. 일반적으로 Auto를 선택하면 되겠네요.

다음으로 아래화면과 같이 Configuration으로 넘어갑니다.  여기서는 소스 코드상에서 각종 핸들링을 지원할 것이냐 결정해줍니다. 필요한 것을 선택하면 원하는 코드가 미리 들어가 있게 됩니다. 참고로 Splash Screen은 실행전에 보여지는 로딩화면으로 생각하시면 됩니다. 여기서 미리 설정할 수 있게 해주네요. 아주 편합니다.
 


이제 아래 화면에서 볼 수 있듯이 Sample로 넘어갑니다. 초보개발자들에게는 이것처럼 좋은게 없겠다는 생각도 듭니다. 아무래도 아무것도 없는 코드보다 샘플이 일단 들어가 주면 개발에 도움이 될 것이기 때문입니다.



마지막으로 Generate 단계입니다. 지금까지 설정한 것을 토대로 AIR 프로젝트를 생성해 줍니다. 먼저 File location에서 프로젝트를 생성할 경로를 설정해줍니다. 그 다음 Generate AIR Project가 활성화 됩니다. 이 버튼을 클릭하면 생성이 완료됩니다. 이때 자동으로 탐색창을 띄워줍니다.


이제 만들어진 프로젝트를 Flash Builder "Burrito"로 열어봅시다. Flash Builder를 실행한 뒤 아래 처럼 File > Import Flash Builder Project를 선택합니다.


아래와 같은 창이 뜨면 만들어진 프로젝트를 여러분의 워크스페이스에 올려놓을 수 있습니다. 창에서 Import Project 를 보면 File과 Project folder를 볼 수 있습니다. Adobe AIR LaunchPad는 프로젝트를 폴더와 압축파일로 두개 만들어주므로 이들중 아무거나 선택해서 프로젝트를 등록하면 별 무리가 없습니다.

여기서는 File을 통해 프로젝트를 임포트 해보지요.


아래처럼 만들어진 프로젝트 압축파일을 선택하면 그 아래에 Import Method가 나옵니다. 여기서 압축된 프로젝트를 어느 곳에 어떤 이름으로 프로젝트를 압축을 풀어 만들 것인가 결정할 수 있습니다. 저는 그냥 Finish 버튼을 눌러 프로젝트를 임포트 하겠습니다.


이제 Flash Builder 에서 해당 프로젝트를 아래 처럼 열람할 수 있게 되었습니다. Adobe AIR LaunchPad를 통해 설정한 대로 프로젝트 명은 TestAIR가 되었고 각종 Sample View가 이미 만들어져 있습니다.


TestAIR 메인 페이지를 열어보았습니다. 아래처럼 mxml 코드를 볼 수 있습니다. 기존 AIR와 달라진 점은 Application이 MobileApplication이라는 점입니다. 당연한 이야기 겠죠? 참고로 firstView가 views.TestAIRHome으로 설정되어 있습니다. 위 패키지에서 views에 들어간 mxml중에 가장 최상위 뷰를 TestAIRHome으로 선택한 다는 것을 의미합니다.

Adobe AIR LaunchPad 의 2번째 단계에서 각종 핸들러를 선택해서 만들어진 코드입니다. 간단하게 trace가 출력되록 되어 있으며 여러분은 필요하다면 이 부분을 수정해서 원하시는 기능을 만드시면 됩니다.

디자인 모드로 들어가 봤습니다. 아래 화면과 같이 모바일에 최적화된 화면을 보여줍니다. Flash builder에서 모바일 어플을 만들 수 있게 된 것이 흥미롭습니다.


위 프로젝트를 실행해보겠습니다. Ctrl+F11 을 누르거나 메뉴에서 Run > Run을 선택해 실행합니다. 그러면 아래와 같은 창이 나오는데 이 화면은 이 글의 초반부에도 보였던 창의 모습입니다. 실행하기 위해 어떤 플랫폼에서 그리고 어떤 디바이스에서 시뮬레이팅을 할 것인지 결정해주는 역할을 합니다. 이 설정화면은 나중에 Run > Run Configurations에서 바꿀 수 있습니다.



위 화면에서 보면 타겟 플랫폼은 안드로이드입니다. 아직까지는 이것밖에 없습니다. 왜냐하면 Flash Builder "Burrito"가 Preview 버전이니깐요. 앞으로 정식버전이 나오면 윈도우, 아이폰 등도 지원하길 희망합니다. ^^

Launch method를 보면 On desktop과 On device가 있습니다. On desktop은 말그대로 데스크탑에서 모바일 시뮬레이터를 띄워줘 테스트 하는 겁니다. 안드로이드를 보니 제가 가지고 있는 HTC Desire도 있어서 기뻤습니다. 반대로 On device는 실제 장비에 물려서 테스트 합니다. 이들 모두 별 설정없이 실행이 가능했습니다. 

이제 Run만 누르면 바로 실행됩니다. 아래는 On device에서 실행해본 것입니다. Adobe AIR LaunchPad를 이용해 등록했던 각종 뷰 종류를 리스트에서 볼 수 있습니다. 마우스로 드래그 하면 아래 있는 나머지 리스트도 볼 수 있습니다. 하지만 데스크탑에서 시뮬레이션 하는 것이므로 Accelerometer나 Multitouch, Gesture등을 수행해 볼 수 없었습니다. 대신 안드로이드 폰이 있는 분은 직접 테스트 해볼 수 있습니다.







저는 제 안드로이드 폰인 HTC Desire에 위 어플을 실행해보고자 합니다. 먼저 메뉴에서 Run > Run Configuration을 선택합니다. 아래 화면처럼 좌측 메뉴에 Mobile Application에서 TestAIR를 선택한뒤 좌측상단에 복사하기 버튼을 누릅니다. 그럼 1개가 더 생성됩니다. 새로 생성된 것은 Name을 TestAIR on Device로 하고 기존것은 TestAIR on Desktop으로 명명합니다. 그리고 새로 생성된 것의 Launch method는 On device를 선택합니다. 그리고 Run을 누르면 자신의 안드로이드 폰에 해당 어플이 실행됩니다.


하지만 여기서 안드로이드 폰이 개발폰이 되도록 먼저 설정해야합니다.
1. 자신의 안드로이드 폰의 홈화면에서 menu > 설정을 누릅니다. 그리고 응용프로그램 > 개발 화면에서 USB 디버깅이 선택되어 있어야 합니다.
2. 자신의 안드로이드 폰에 AIR 런타임이 설치 되어야 합니다. 설치가 안된 안드로이드 폰이면 설치되도록 유도하니 Market에 직접 찾지 않고도 자연스레 설치할 수 있을겁니다.

아래는 제 폰에서 실제로 실행해보는 화면입니다.





정리하며

여기서 설명하지 않은 개발 방법이나 배포 방법에 대한 간단한 가이드는 다음 링크를 참고하면 좋을 것 같습니다.
Flex Test Drive for Mobile - Build a mobile application in an hour 

2009년 미국에서 Adobe MAX 를 참가해 Flash Builder로 아이폰 어플리케이션을 만드는 데모를 본 적이 있습니다. 당시에는 꽤 흥미를 느꼈습니다. 금방이라도 아이폰 어플을 Flash로 개발할 수 있을 줄 알았습니다. 하지만 Apple정책이 변경되면서 퇴색되었죠. 그것도 Flash CS5 런칭 몇일전에 Apple의 이기적인(?) 정책 발표였습니다. 그 후 1년이 지나 안드로이드 플랫폼이 강세가 이어지며 Flash기술은 다시 이야기 거리가 되고 있습니다. Apple도 안드로이드의 강세 행보에 위협을 느껴서(?) 일부 정책 수정있기도 했죠. 어쨌든 Flash가 모바일 디바이스에 자리 잡으려면 아직 해결해야할 과제가 산적해 있지만 그래도 노력한 만큼 성과는 있을 것이라 생각합니다. 


관련글
Flex Test Drive for Mobile - Build a mobile application in an hour
What's new in Flash Builder "Burrito"
Introducing Adobe Flex SDK "Hero"
Mobile development using Adobe Flex SDK "Hero" and Flash Builder "Burrito"
Coding productivity enhancements in Flash Builder "Burrito"


한국 Adobe에서 Flash Platform 웹 접근성 세미나가 10월 7일 강남 교보타워 23층 이벤트홀에서 진행할 예정입니다.

요즘 장애인들도 웹에 쉽게 접근할 수 있도록 기술적, 정책적 이슈가 많이 대두되고 있습니다. 어도비에서도 관련 문제에 대해서 인식하고 있으며 이 이슈를 처리해야할 다양한 대안을 마련하고 있습니다.

흔히들 Flash는 웹 접근성과는 별개라고 생각합니다. 물론 예전에는 그랬죠. 하지만 Flash Player가 진보하면서 접근성에 관련된 API도 추가된 것을 볼 수 있듯이 이 부분에 대한 다양한 노력이 있는 것 같습니다.

예상컨데 앞으로 웹접근성은 선택이 아닌 필수가 될 것이며 웹환경이 장애인과 비장애인간을 차별하지 못하도록 법제화가 될 것입니다. 이번 세미나를 통해 미리미리 준비한다면 그것 또한 큰 경쟁력이 될 것입니다.

자세한 사항 및 등록은 아래 링크를 참고하시길 바랍니다.

http://www.adobeflex.co.kr/iwt/board/board.php?tn=news&id=341&mode=view

얼마전 hTC 디자이어 안드로이드 스마트폰을 구입했다. 스마트 폰에는 항상 관심이 많았으나 정작 구입하려고 하니 아이폰으로 할지 안드로이드로 할지 선택의 기로에 서게 되었다. 결국 안드로이드 선택... 왜냐하면 아이폰, 아이팟 터치 계열을 회사에서 너무도 많이 봤고 개발용으로는 하나 이미 장만한 터였다.



Flash 개발자로서 안드로이드 2.2 프로요에 관심을 안가질 수 없었다. 오픈 스크린 프로젝트(Open Screen Project)의 일환으로 만들어진 Flash Player 10.1이 안드로이드 2.2 프로요에 탑재되기 시작했기 때문이다. 본인이 구입한 hTC 디자이어 폰은 2.1이 설치되어 있었지만 hTC에서 2.2 업그레이드 버전을 내놓았기 때문에 어렵지 않게 설치할 수 있었다.

안드로이드 2.2 프로요에 탑재된 Flash Player 10.1을 테스트 하기 위해 필자가 만들었던 몇가지 Flash 애플리케이션에 접속해 보았다.

아래는 실험적으로 만들어본 3D 태양계 시뮬레이터를 Papervision3D로 만든 것이다. 아래 주소로 접속할 수 있다.  마우스 드래그로 회전이 되고 방향키로 확대/축소 할 수 있다.
http://weconize.com/~blackhole/planet3d (임시 링크이다)


 

Papervision3D는 Flash Player 10부터 지원하는 3D API를 전혀 사용하지 않았다. 그럼에도 불구하고 동작하는 것을 보면 신기하다. 3D API를 적극적으로 활용한 Away3DAlternativa 3D로 만들면 훨씬 부드러운 화면을 보여줄 수 있을 것이라 판단한다.

스타플(http://starpl.com/)의 별지도(http://starpl.com/map) 에 접속해보았다.


위 화면은 hTC 디자이어, 안드로이드 2.2 프로요에서 스타플 별지도에 접속해본 모습이다.



위 화면은 웹브라우져로 본 스타플 별지도와 hTC 디자이어로 본 별지도 모습을 비교해 보았다.


 

위 동영상에서 볼 수 있듯이 부자연스럽긴 하지만 Flash 로 만들어진 별지도가 잘 동작하고 있다. 단지 웹기반으로 만들어서 버튼이 너무 작아 누르기가 불편했으며 마우스 이벤트와 터치 이벤트는 명백히 다르기 때문에 동작에 무리가 빠른다. 이런 불편함을 해소하기 위해서는 모바일을 감안한 Flash 애플리케이션을 만들어야 함을 알 수 있다.

아래 화면은 2010 남아공 월드컵을 위해 만들었던 Flash 축구 게임이다. 실행이 잘된다. 또한 사운드도 잘나왔다. 하지만 마우스 이벤트 기반으로 만들었기 때문에 터치에 대응하지 않아 실제 게임은 불가능했다. 데스크탑에서 마우스 사용과 모바일에서 터치는 엄연히 다른 사용자 반응이므로 모바일에서도 동작시키려면 그에 맞게 개발해야함을 알 수 있다.

월드컵 게임 : http://weconize.com/~blackhole/worldcup (임시링크이다.)



필자 블로그(http://blog.jidolstar.com)에 Flex 시절부터 인연이 있으신 분들은 아마도 Flex 한글화 문서(http://flexdocs.kr)를 잘 알고 있을 것이다.  여기서 제공하는 3D 게시판(http://flexdocs.kr/board)도 동작시켜보았다.




위 동영상에서 볼 수 있듯이 Flex 애플리케이션도 문제없이 돌아간다. 단지 데스크탑용이기 때문에 모바일 용에도 대응할 수 있도록 만들어야 하는 문제는 있다.


마지막으로 유명한 Flash 3D 라이브러리인 Alternativa 3D 에서 제공하는 Demo를 보고자 한다.

접속 URL : http://blog.alternativaplatform.com/en/category/3d/

 

위 동영상에서는 블로그 위에 있는 Flash 컨텐츠를 바로 스마트폰에서 볼 수 있음을 알 수 있다. 중간에 Youtube 동영상도 잘 동작한다. 참고로 동영상에 게임은 Flash로 만든 온라인 탱크 게임이다. Flash의 멀티터치 API를 이용해 게임을 즐기는 것도 가능해 짐을 보여준다. 또한 Alternativa 3D 라이브러리를 이용해 제작된 3D Flash 데모를 보여준다. 모바일 수준에서 Flash가 이런 렌더링 능력을 보여준다는 것이 대단할 따름이다. 

 

오픈 스크린 프로젝트란?
오픈 스크린 프로젝트의 슬로건은 'Singular Experience, multiple Devices'이다. 간단히 말해 웹에서 플래시를 통해 얻었던 사용자 경험을 휴대폰, 텔레비전, 그리고 다양한 전자기기에서도 동일하게 느끼도록 한다. 그러기 위해 Adobe는 자신의 스펙 및 기술적 정보를 공유하고 관련 기기업체도 이에 맞게 지원하여 서로 윈윈(Win-win)하는 프로젝트이다. 이번 구글의 안드로이드 2.2 프로요에 Flash Player 10.1가 기본 탑재된 것은 바로 이 프로젝트의 성과물이라고 할 수 있다.



오픈 스크린 프로젝트 공식 홈페이지
미국 LA Adobe MAX 2009 - 오픈 스크린 프로젝트와 플래시 플랫폼 서비스에 대해
PC-모바일 넘어 디지털 가전까지 확장
어도비-엔비디아, 플래시 플레이어 GPU 가속 협력 발표
어도비의 야심작, 오픈 스크린 프로젝트
안드로이드에서 동작하는 Flash Player 10.1 영상

 

정리하며
어도비가 Flash를 다양한 디바이스에서 동작시키기 위해 오픈 스크린 프로젝트를 진행했고 이제 그 결과물을 우리는 하나씩 볼 수 있게 되었다. 

하지만 방금 보여줬던 몇가지 동영상을 보더라도 데스크탑에서 동작하는 Flash 애플리케이션은 모바일에서 사용하기에는 너무 불편한 것은 사실이다.  그래서 디바이스의 특징(가령 데스크탑과 모바일)에 따라 Flash Player 10.1에서 제공하는 터치 및 가속센싱과 같은 API를 활용하여 사용자 경험을 극대화 하기 위한 개발자의 노력이 필요하게 되었다. 그럼에도 불구하고 개발의 약간의 불편함을 제외하고는 기존에 만들어놓은 Flash 컨텐츠를 거의 그대로 사용할 수 있다는 점은 큰 장점이 아닐 수 없다.

Flash Player 10.1 부터 제공하는 새로운 기능은 다음 링크를 참고하면 되겠다.
http://www.adobe.com/products/flashplayer/features/


최근 Apple의 정책 변경에 따라 Flash, AIR를 이용한 앱 개발에 물꼬를 틀 것으로 보인다. Adobe 기술을 이용해 이제는 아이폰, 아이패드와 같은 장치에도 애플리케이션을 배포할 수 있게 된 것이다. 사용자는 기존 다양한 Flash 컨텐츠가 안드로이드 계열의 디바이스 뿐 아니라 iOS 기반에도 탑재가 가능해짐으로써 기존 Flash 컨텐츠를 경험할 수 있는 기회가 더욱 많아졌다.


글쓴이 : 지돌스타(http:/blog.jidolstar.com/712)

이글은 Adobe RIA 공식 사이트에도 소개 되었습니다.
http://adoberia.co.kr/iwt/blog/blog.php?tn=flex&id=546


Flash Platform 커뮤니티인 플래시 액션스크립트 카페가 주최하는 제7회 플래시 액션스크립트 커뮤니티 컨퍼런스가 9 11일에 개최됩니다.

 

세미나 정보

§ 일시: 2010 9 11일 토요일 (오후 12 ~ 5)

§ 장소: 역삼동 GS타워 25층 대강당 [약도보기]

 

세미나 신청 방법

§ 인원: 선착순 100

§ 참가비: 5,000

§ 참가방법: 본 글에 댓글 등록(순번/이름/ID 입력) à 참가비 입금 à 입금 확인 à 등록 완료

§ 입금계좌: 카페매니저 강성규 / 우리은행 / 590-099329-02-101 (입금자명과 등록자명이 동일해야 합니다)

 

AGENDA

시간

내용

발표자

12:20 ~ 13:00

등록

13:00 ~ 13:50

알면 도움되는 참조이야기

허남진(허수아비)

14:00 ~ 14:50

대화하는 코드

강동혁(동강)

15:00 ~ 15:50

아크로버스 AR(Augmented Rreality)

정해윤 팀장

16:00 ~ 16:50

Flash and Social Network Game

윤진상(우야꼬)

16:50 ~ 17:00

맺음말

       

출처 : http://adoberia.co.kr/iwt/blog/blog.php?tn=flex&id=541

자바 커뮤니티 공동 3 세미나

자바 개발자를 위한 ‘共感(공감)을 찾아서 세번째

 

지난 2 세미나에 이어서 OKJSP, JBoss User Group, KSUG 공동 주최하고,

한국어도비시스템즈가 후원하는 자바 개발자를 위한개발 공감’ 세번째 세미나가

진행됩니다. 최근 IT 업계를 선도적으로 이끌어 가고 있는 모바일과 시장에서 차별화된

전략을 갖추실 있는 유용한 기술과 정보들을 자리에서 들으실 있는 기회입니다.

특별히, T스토어 주최 안드로이드 앱 공모전에서 금상을 수상한 블투맞고’ 개발자이신

김재철님을 초대하여 개발자 여러분과 함께할 수 있는 공감 세션을 마련했습니다.

 


행사 안내



 


AGENDA




특별 경품


5분께 화제의 서적 '안드로이드 프로그래밍 정복(김상형 저)'을 드립니다.



등록 : http://adoberia.co.kr/iwt/blog/blog.php?tn=flex&id=540




오랜만에 오픈캐스트를 올렸습니다. 즉흥적으로 만든거지만 유용하리라고 생각합니다.

좋은 정보가 되길 바랍니다.

http://opencast.naver.com/FL188/18

글쓴이 : 지돌스타(http://blog.jidolstar.com/694)

Adobe 본사 대회의실에서 Powerfl 2차모임을 가졌습니다. 첫번째 킥오프모임보다 다소 적은 인원이 참석했으나 분위기는 그때보다 더 좋았습니다.

1. Powerfl 구조 소개 - 맹기완(히카), 자료는 이후 공개 
2. 통합로더 소개 - 원종운(야매코더)
   - http://scripter.egloos.com/2500161
3. 외부라이브러리(pv3d, jiglibflash)를 이용한 개발  - 지용호(지돌스타)
   -  http://blog.jidolstar.com/691

4. 자기소개

위 4가지를 진행하면서 가장 좋았던 시간은 바로 4. 자기소개였다는... 전에 모임은 너무 많이 오셔서 이름과 얼굴이 매치가 되지 않았는데 소규모로 모이니 이제가 매치되었습니다. 또한 현업에서 어려움과 기술적 노하우를 함께 공유하는 시간을 자기소개 시간에 가지니깐 분위기가 업되더군요. 단순히 발표자가 발표하고 끝나버리는 기존의 모임과는 사뭇달라 좋았습니다.

파워플은 BSD 라이센스를 기반으로 SVN으로 Flex, ActionScript 3.0 라이브러리 및 애플리케이션을 공유하고 발전시키는 환경을 제공합니다. 파워플의 전체적인 구조를 기완님께서 소개해주셨고 기술적인 검증도 모두 마친 상태라고 합니다. 파워플은 약 15개의 프로젝트로 구성되며 한개한개 여러분의 참여를 필요로 하고 있습니다. 앞으로 지속적인 관심 부탁하고요. 

원종운님이 개인적으로 만들고 사용하고 계신 통합로더를 소개하는 자리가 있었습니다. 거창한 것은 아니였습니다만 그것을 통해서 다양한 이야기가 오고가고 또한 로더를 더 발전시킬 수 있는 아이디어를 공유할 수 있었습니다. 파워플에 올라오는 라이브러리나 애플리케이션들은 처음부터 거창할 수 없습니다. 문제가 있더라도 그 문제 있는 자체부터 시작해 함께 공유하며 완성되어 가는 겁니다. 사실 제 블로그도 그렇게 시작한겁니다. 

마지막으로 제가 얼마전에 소개한 축구게임(http://blog.jidolstar.com/691)을 어떤 기술을 이용해 만들었는지 설명하는 자리를 마련했습니다. 현업에서 있지만 실제로 공개라이브러리를 활용하지 못하고 있다는 것에 문제가 있다고 봅니다. 가령 3D나 물리엔진을 만든다고 생각해보세요. 답이 안나옵니다. 그리고 이런 것들을 몰라서 못하시는 분들도 계십니다. 파워플이 추구하는 바는 파워플을 통해 다양한 유용한 라이브러리들이 공개가 되면서 정말 좋은 애플리케이션들이 만들어지고 공개되어 지는 것입니다. 그래서 한국 Flash 업계에 새바람이 일어났으면 합니다.

파워플 모임은 최소한 1개월에 한번씩 진행할 것입니다. 주중에 잡아야 하는 점은 양해 부탁합니다. 

또한 Adobe 회의실을 빌려주시고 작은 선물도 챙겨주신 어도비 이수하 과장님께 감사의 말씀을 드립니다.
발표중이신 맹기완(히카)님 

상단 좌측부터 구준호 님, 오권우(소주) 님, 전은정(바나나킥) 님, 김주호 님, 박준우(June) 님, 윤도선(드럼캡) 님, 전재열 님, 김어진이(니케) 님(뒷모습 ^^;) 

우측부터 정진우(꼬깨비) 님, 임대찬(싸**임) 님, 박동준님  

좌측부터 정진우(꼬깨비)님, 이상훈 님, 사광호(쿠로) 님

발표하신 원종운(야매코더) 님

모임 끝나고 간단하게 음료수 한잔.... ^^;; 
정말 좋은 이야기 많이 했습니다.
이날.. 정진우님이 한턱 쏘셨다는.... 감사합니다. ^^

파워플 카페 : http://cafe.naver.com/powerfl
파워플 블로그 : http://blog.powerfl.com/
파워플 공식페이지 : http://powerfl.com (예정) 

글쓴이 : 지돌스타(http://blog.jidolstar.com/693

한창 축구게임을 만들고 있다. 이에 관련되어 테스트 해본 코드를 공유해본다.

3D를 표현하기 위해 Papervision3d와 물리엔진을 표현하기 위해 jiglibflash를 이용했다. 공을 클릭하면 임의의 힘이 주어지고 클릭한 부분을 참조하여 방향이 결정된다. 키보드 A,S,D,W로 카메라 조정이 된다.

원더플(wonderfl.net)에 소스를 올려두었으니 부디 많은 Fork가 이뤄져서 더 좋은 모습으로 탈바꿈 되는 모습을 보고 싶다. ^^

http://wonderfl.net/c/j8ly

package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.events.MouseEvent;
	import flash.filters.BlurFilter;
	import flash.geom.Vector3D;
	import flash.system.IME;
	import flash.system.IMEConversionMode;
	import flash.ui.Keyboard;
	import flash.ui.Mouse;
	import flash.ui.MouseCursor;
	import flash.utils.getTimer;
	
	import jiglib.cof.JConfig;
	import jiglib.geometry.JBox;
	import jiglib.geometry.JCapsule;
	import jiglib.geometry.JPlane;
	import jiglib.geometry.JSphere;
	import jiglib.geometry.JTerrain;
	import jiglib.math.JMatrix3D;
	import jiglib.physics.RigidBody;
	import jiglib.plugin.papervision3d.Papervision3DPhysics;
	import jiglib.plugin.papervision3d.Pv3dMesh;
	import jiglib.plugin.papervision3d.pv3dTerrain;
	
	import net.hires.debug.Stats;
	
	import org.papervision3d.Papervision3D;
	import org.papervision3d.core.utils.InteractiveSceneManager;
	import org.papervision3d.core.utils.Mouse3D;
	import org.papervision3d.events.FileLoadEvent;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.materials.shaders.FlatShader;
	import org.papervision3d.materials.shaders.GouraudShader;
	import org.papervision3d.materials.shaders.LightShader;
	import org.papervision3d.materials.shaders.PhongShader;
	import org.papervision3d.materials.shaders.ShadedMaterial;
	import org.papervision3d.materials.special.FogMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.parsers.Collada;
	import org.papervision3d.objects.parsers.DAE;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.objects.primitives.Cylinder;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
	import org.papervision3d.view.layer.ViewportLayer;
	import org.papervision3d.view.layer.util.ViewportLayerSortMode;
	
	[SWF(width="465", height="465", backgroundColor="#000000", frameRate="24")]
	/**
	 * Papervision3D + jiglibflash 을 이용한 축구게임 프로토 타입 
	 * 간단하게 만들어 봤습니다. Fork를 통해 향상되고 멋진 기능을 가진 게임이 탄생하기 바랍니다. 
	 * 1. click ball
	 * 2. press key w,a,s,d
	 * 
	 * author : Yongho Ji, jidolstar@gmail.com
	 */ 
	public class SoccerGamePrototype extends BasicView {
		private var _physics:Papervision3DPhysics;
		private var _light:PointLight3D;
		private var _vpBallLayer:ViewportLayer;
		
		private var _ground:Plane;
		private var _ball:RigidBody;
		private var _ballRadius:Number = 30;
		
		private var _isShooting:Boolean = false;
		private var _isIniting:Boolean = false;
		private var _firstTime:Number;
		private var _ballX:Number;
		private var _windForce:Vector3D;
				
		private var _keyForward:Boolean=false;
		private var _keyBackward:Boolean=false;
		private var _keyLeft:Boolean=false;
		private var _keyRight:Boolean=false;
		
		/**
		 * 생성자 
		 */ 
		public function SoccerGamePrototype() {
			super(465, 465, true, true, "Target");
			configStage();
			configScene();
			initPhysics();
			createBall();
			createGround();
			createGoalNet();
			createGoalPost();
			createBox();
			startRendering();
			addEventHandler();
			addChild(new Stats);
		}
		
		/**
		 * 스테이지 환경 설정 
		 */ 
		private function configStage():void {
			stage.scaleMode=StageScaleMode.NO_SCALE;
			stage.align=StageAlign.TOP_LEFT;
			stage.quality=StageQuality.BEST;
			stage.frameRate = 24;
			stage.showDefaultContextMenu = false;
		}
		
		/**
		 * 이벤트 핸들러 함수 등록 
		 */ 
		private function addEventHandler():void {
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
			stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
		}
		
		/**
		 * 3D 환경 기본 설정 
		 */ 
		private function configScene():void {
			viewport.containerSprite.sortMode=ViewportLayerSortMode.INDEX_SORT;
			viewport.containerSprite.addLayer(_vpBallLayer=new ViewportLayer(viewport, null));
			_vpBallLayer.sortMode=ViewportLayerSortMode.Z_SORT;	

			camera.x=-500;
			camera.y=200;
			camera.z=0;
			
			_light=new PointLight3D(true, false);
			_light.x=-400;
			_light.y=300;
			_light.z=-100;
		}
		
		/**
		 * 물리엔진 기본 설정 
		 */ 
		private function initPhysics():void {
			_physics=new Papervision3DPhysics(scene, 10);
		}
		
		/**
		 * 바닥 생성  
		 */ 
		private function createGround():void {
			_ground = new Plane( new WireframeMaterial(0xff0000), 1000, 1000, 10, 10 );
			scene.addChild(_ground);
			var jGround:JPlane = new JPlane(new Pv3dMesh(_ground));
			jGround.setOrientation(JMatrix3D.getRotationMatrixAxis(90));
			_physics.addBody(jGround);
			jGround.y = 0;
			jGround.friction = 10;
		}
		
		/**
		 * 그물망 생성
		 */ 
		private function createGoalNet():void {
			var i:Number, dx:Number = 15, dy:Number = 15, dd:Number = 15;
			var w:Number = 600, h:Number = 300, d:Number = 100;
			var movie : Sprite = new Sprite();
			var g:Graphics = movie.graphics;
			var jGoalNet:RigidBody;
			var material:MovieMaterial,materials:MaterialsList;
			
			//Back
			g.lineStyle(3,0xaaaaaa,2);
			for( i = 0; i <= w; i+=dx ) {
				g.moveTo(i,0);
				g.lineTo(i,h);
			}
			for( i = 0; i <= h; i+=dy ) {
				g.moveTo(0,i);
				g.lineTo(w,i);
			}
			material = new MovieMaterial(movie,true,false,false,null);
			material.oneSide = false;
			materials=new MaterialsList();
			materials.addMaterial(material, "back");
			jGoalNet = _physics.createCube( materials, w, 100, h, 5, 1, 5, 0, 0 );
			jGoalNet.movable = false;
			jGoalNet.rotationY = 90;
			jGoalNet.material.restitution = 0.01;
			jGoalNet.moveTo(new Vector3D(600+50,150,0,0));
			
			//Top
			movie = new Sprite;
			g = movie.graphics;
			g.lineStyle(3,0xaaaaaa,2);
			for( i = 0; i <= w; i+=dx ) {
				g.moveTo(i,0);
				g.lineTo(i,d);
			}
			for( i = 0; i <= d; i+=dd ) {
				g.moveTo(0,i);
				g.lineTo(w,i);
			}			
			jGoalNet = _physics.createCube( materials, w, 1, d, 3, 1, 1, 0, 0 );
			jGoalNet.movable = false;
			jGoalNet.rotationY = 90;
			jGoalNet.rotationZ = 90;
			jGoalNet.material.restitution = 0.01;
			jGoalNet.moveTo(new Vector3D(550,300,0,0));
			
			//Left
			movie = new Sprite;
			g = movie.graphics;
			g.lineStyle(3,0xaaaaaa,2);
			for( i = 0; i <= d; i+=dd ) {
				g.moveTo(i,0);
				g.lineTo(i,h);
			}
			for( i = 0; i <= h; i+=dy ) {
				g.moveTo(0,i);
				g.lineTo(d,i);
			}			
			jGoalNet = _physics.createCube( materials, d, 1, h, 1, 1, 1, 0, 0 );
			jGoalNet.movable = false;
			jGoalNet.material.restitution = 0.01;
			jGoalNet.rotationY = -180;
			jGoalNet.moveTo(new Vector3D(550,h/2,-w/2,0));
			
			//Right
			jGoalNet = _physics.createCube( materials, d, 1, h, 1, 1, 1, 0, 0 );
			jGoalNet.movable = false;
			jGoalNet.material.restitution = 0.01;
			jGoalNet.moveTo(new Vector3D(550,h/2,w/2,0));
			
		}
		
		/**
		 * 볼 포스트 생성 - Cylinder 3개로 생성 
		 */ 
		private function createGoalPost():void {
			function createCapsule($radius:Number,$height:Number):JCapsule {
				var material:FlatShadeMaterial = new FlatShadeMaterial(_light, 0xFFFFFF, 0x555555, 5);
				var cylinder:Cylinder = new Cylinder(material,$radius,$height,15,1,-1,true,false);
				var jCapsule:JCapsule = new JCapsule(new Pv3dMesh(cylinder),$radius,$height);
				jCapsule.movable = false;
				jCapsule.material.restitution = 0.9;
				scene.addChild(cylinder);
				_physics.addBody( jCapsule );
				return jCapsule;
			}	
			
			var jCapsule:JCapsule;
			jCapsule = createCapsule(10,300);
			jCapsule.moveTo(new Vector3D(500,150,-300,0));
			jCapsule = createCapsule(10,300);
			jCapsule.moveTo(new Vector3D(500,150,300,0));
			jCapsule = createCapsule(10,610);
			jCapsule.rotationX = 90;
			jCapsule.moveTo(new Vector3D(500,300-5,0,0));
		}
		
		/**
		 * 4개의 Box들 생성 
		 */ 
		private function createBox():void {
			var materials:MaterialsList=new MaterialsList();
			materials.addMaterial(new FlatShadeMaterial(_light, 0x00FF00, 0x555555, 5), "all");
			var box:RigidBody;
			for (var i:int=1; i < 5; i++) {
				box=_physics.createCube(materials, 100, 100, 100, 3, 3, 3);
				box.mass=1;
				box.x = 300;
				box.y=300 * i;
				_vpBallLayer.addDisplayObject3D(_physics.getMesh(box));
			}
		}
		
		/**
		 * 축구공 생성 
		 */ 
		private function createBall():void {
			var material:FlatShadeMaterial = new FlatShadeMaterial(_light, 0xFFFFFF, 0x555555, 105);
			_ball=_physics.createSphere(material, _ballRadius, 10, 8);
			material.interactive = true;
			_vpBallLayer.addDisplayObject3D(_physics.getMesh(_ball));
			_ball.x=-300;
			_ball.y=300;
			_ball.mass=1;
			_ball.friction=10;
			
			var mesh:DisplayObject3D = _physics.getMesh(_ball);
			mesh.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, press);
			
			//공을 누른다.
			function press($e:InteractiveScene3DEvent=null):void {
				mesh.removeEventListener(InteractiveScene3DEvent.OBJECT_PRESS, press );
				mesh.addEventListener(InteractiveScene3DEvent.OBJECT_RELEASE, release );
			}
			//공을 찬다!
			function release($e:InteractiveScene3DEvent=null):void {
				mesh.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, press );
				mesh.removeEventListener(InteractiveScene3DEvent.OBJECT_RELEASE, release );				
				shootBall();
			}			
		}
		
		/**
		 * 축구공을 찬다.
		 */ 
		private function shootBall():void {
			_isShooting = true;
			_ballX = _ball.x;
			_firstTime = getTimer();
			
			var mesh:DisplayObject3D = Pv3dMesh(_ball.skin).mesh;
			mesh.calculateScreenCoords(camera); //공의 스크린 좌표 계산. 3D->2D
			var kickPower:Number = Math.random()*500+200;
			var kickPosZTheta:Number = Math.tan( (stage.mouseX-mesh.screen.x-viewport.width/2)/_ballRadius )
			var kickPosYTheta:Number = Math.tan( (stage.mouseY-mesh.screen.y-viewport.height/2)/_ballRadius );
			var kickPowerX:Number = kickPower * Math.cos(kickPosYTheta)*Math.cos(kickPosZTheta);
			var kickPowerY:Number = kickPower * Math.sin(kickPosYTheta);
			var kickPowerZ:Number = kickPower * Math.cos(kickPosYTheta)*Math.sin(kickPosZTheta);
			_ball.addWorldForce(new Vector3D(kickPowerX,kickPowerY,kickPowerZ),_ball.currentState.position);
			_ball.addBodyTorque(new Vector3D(0, 0, 0));
			
			_windForce = new Vector3D( 0, 0, Math.random()*10-5);
		}
				
		/**
		 * 3D 렌더링, 물리엔진 가동, 키보드에 따른 카메라 이동, 축구공 액션 
		 */ 
		protected override function onRenderTick(event:Event=null):void {
			_physics.step(); 
			if( _isShooting ) {
				_ball.addWorldForce(_windForce,_ball.currentState.position);
				if( _ball.x > 500 || _ball.x < _ballX || getTimer() - _firstTime > 2000 ) {
					_isShooting = false;
					_isIniting = true;
					_firstTime = getTimer();
				}
				_ballX = _ball.x;
			}
			if( _isIniting ) {
				if( getTimer() - _firstTime > 2000 ) {
					_isIniting = false;
					_ball.x=-300;
					_ball.y=400;
					_ball.z = 0;
					_ball.setVelocity( new Vector3D(0,0,0) );
				}
			}
			moveCamera();
			super.onRenderTick(event);
		}
		
		/**
		 * 카메라 이동 
		 */ 	
		private function moveCamera():void {
			var dist:Number = 30;
			if (_keyForward) {
				camera.moveForward(dist);
			}
			if (_keyBackward) {
				camera.moveBackward(dist);
			}
			if (_keyLeft) {
				camera.moveLeft(dist);
			}
			if (_keyRight) {
				camera.moveRight(dist);
			}
		}
		
		/**
		 * 키보드 Down 핸들러 
		 */ 
		private function keyDownHandler(e:KeyboardEvent):void {
			if (e.keyCode == 229) {
				IME.conversionMode=IMEConversionMode.ALPHANUMERIC_HALF;
			}
			switch (e.keyCode) {
				case 87:
					_keyForward=true;
					break;
				case 83:
					_keyBackward=true;
					break;
				case 65:
					_keyLeft=true;
					break;
				case 68:
					_keyRight=true;
					break;
				
			}
		}
	
		/**
		 * 키보드 Up 핸들러 
		 */ 
		private function keyUpHandler(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 87:
					_keyForward=false;
					break;
				case 83:
					_keyBackward=false;
					break;
				case 65:
					_keyLeft=false;
					break;
				case 68:
					_keyRight=false;
					break;
			}
		}

	}
}




글쓴이 : 지돌스타(http://blog.jidolstar.com/689)


flexdocs.kr은 2007년 이래로 지금까지 벌써 4년째 운영되고 있습니다. 조광제님 및 많은 분들의 도움으로 지금까지 명맥을 이어가고 있습니다. 비록 Flex 2.0 문서이지만 아마도 한글문서가 절실하셨던 분들은 이 사이트가 상당히 유용했으리라 생각합니다.

서비스는 현재 무료호스팅을 받아 운영되기 때문에 별도의 자본이 필요하지 않으나 도메인은 항상 비용이 들어갑니다. 지금까지는 호스팅, 도메인 모두 제 자비를 들여서 운영해 왔습니다. 이런 중에 몇일전 아래와 같은 메일을 받았습니다.

사실 도메인 하나만 볼때 비싼 것은 아니지만 제가 관리하고 있는 도메인만 해도 수십개 됩니다. 이런 도메인들을 전부 제 개인비용으로 부담하는 것은 문제가 있다고 봅니다. 게다가... 전 가정이 있어서~ ^^;

그래서 제안하는 바, 오늘 부로 flexdocs.kr에 들어가는 모든 비용은 기부 형태로 운영되었으면 합니다. 다음 조건에서 제안하는 바입니다.

1. 기부액은 자유롭게 합니다. (하지만 너무 많이 기부하면 부담됩니다. ^^)
2. 모든 기부자는 flexdocs.kr에 날짜, 이름, 액수를 공개합니다.(필요하다면 가칭을 사용해드립니다.)
3. 기부금 사용한 내역은 flexdocs.kr에 투명하게 공개합니다.
4. 사이트는 개인적 이득 및 상업적으로 운영되지 않습니다.
5. 사이트 운영 및 사이트 발전을 위한 활동외에 다른 목적으로 기부금을 사용하지 않습니다.
6. 운영은 지돌스타(http://blog.jidolstar.com)가 맡으나 다른 분에게 양도 될 수 있습니다.
7. 만약 피치 못한 사정으로 사이트를 닫는 경우, 기부금이 남는다면 여타 다른 좋은 활동 단체에 기부금이 전달될 수 있습니다. 이때 제 블로그를 통해 공지합니다.

기부는 다음 계좌로 하시면 됩니다.

신한은행 753-02-426937 지용호

입금자는 본인으로 하시고 입금하신후 확인을 위해 아래 번호로 문자를 주시거나 메일을 보내주세요.
010-2018-영삼이일
jidolstar@gmail.com


flexdocs.kr가 정상적으로 운영될 수 있도록 노력하겠습니다. 감사합니다.

지돌스타(http://blog.jidolstar.com)




파워플 프로젝트 공식 카페를 오픈했습니다.

http://cafe.naver.com/powerfl

프로젝트 진행에 적절한 커뮤니케이션의 필요로 오픈하게 되었습니다.

현재 http://powerfl.net, http://powerfl.com, http://powerfl.co.kr 로도 접속이 가능합니다. 이 도메인은 공식페이 주소이지만 아직 없는 관계로 카페로 포워딩 처리 했습니다.

가입은 자유이며 일정수준의 활동률을 보이면 자동으로 등업처리 됩니다. 단, 참여멤버, 개발멤버는 실제 프로젝트에 참여하는 사람에 한해 운영자가 지정하며, 솔루션 제공자에게는 감사멤버로 지정할 계획입니다.

C로 이미지,구조체등 바이너리 데이터를 MySQL에 담는 방법을 알아보자.  또한 C로 저장한 바이너리 데이터를 Flash에서 엑세스하는 법도 다루겠다.

이 글을 이해하려면 기본적으로 C와 ActionScript 3.0, Flex 4에 대해 알아야 한다. 그리고 예제에서 테스트한 C코드는 전부 이클립스+CDT+MinGW 환경에서 작업한 것들이다. 이런 환경을 구축해 본적이 없다면 다음 글을 참고한다.

  • Eclipse Galileo에서 C,C++ 개발환경 구축하기 - CDT, MinGW 
  • Eclipse, MinGW, CDT 환경에서 C/C++과 MySQL 연동



  • 1. Binary 타입 데이터를 DB에 저장하는 것에 대해
    바이너리(Binary) 타입의 데이터를 DB에 저장한다는 것은 가령, 이미지나 사운드와 같은 데이터를 DB에 저장한다는 의미로 해석하면 편하다.

    Binary파일을 DB에 넣을때 어떤 형태로 넣을 수 있을까? 

    한가지 예는 익히 잘 알고 있는 Base64로 치환해서 text형태로 넣는 방식을 생각해볼 수 있다. Base64는 ASCII코드로 화면에 출력할 수 있는 64개 문자(ABCD...89+/e등)을 이용해 Binary 데이터를 Text로 표현해준다. 하지만 이 방식의 단점은 데이타를 64진수로 표현한 문자열이기 때문에 용량이 필연적으로 커지고 또 encode/decode를 해야하는 부담이 존재한다. base 64에 대해서 알고 싶다면 다음 링크를 보자.

    Tistory에서 블로그 데이터 백업파일은 XML이다. 이 XML에 이미지와 같은 바이너리 파일은 담을 수 없으므로 Base64로 변형해 담게된다. 단지 대체하는 문자의 순서가 표준 방식인 ABCD...89+/e 순이 아니라 Vezh...식인 점이 다를 뿐이다. 참고로 아래 링크에 우야꼬님이 Flash로 컨버팅 해놓은 것이 있다.


    티스토리에서 백업기능을 왜 XML로 했을까? XML은 화면에 출력해볼 수 있는 언어이다. 화면에 출력할 수 없는 Binary보다는 훨씬 사용하기 쉽고 공유하기 쉽다.

    Base64는 아스키 시대의 유물이다. 요즘에는 pc에서 모바일까지 UTF8을 지원해주므로 이제 Base64에 의존하지 않고 Base256과 같은 것을 만들 수 있다. 이는 꽤 유용하다. 아래 hika님의 블로그를 보면 ActionScript 3.0으로 이와 관련된 글이 있다. 참고 바란다.


    하지만 Binary를 text로 decode/encode하는 과정이 반복되는 환경에 Base64와 같은 것을 적용하면 오히려 부담이 된다. 그러므로 필요하다면 Binary는 직접 Binary 자체를 저장하는 것이 좋겠다. 

    많은 DB에 BLOB(Binary Large OBject) 타입을 지원한다. 이 타입을 이용하면 DB에 어떤 형태의 Binary 데이타든지 넣을 수 있게 된다. 이 타입은 Text와 거의 동일하며 Binary 데이터를 넣을 수 있는 것만 다르다.

    아래는 인터넷에서 찾은 BLOB에 대해 설명이다.
    컴퓨터에서, BLOB[블랍]은 대체로 이미지나 사운드 파일과 같은 하나의 커다란 파일을 말하며, 그 크기 때문에 특별한 방법으로 다루어져야한다. 에릭 레이몬드에 따르면, BLOB에 관한 주요 아이디어는 DBMS와 같은 파일 처리기가 BLOB을 어떻게 처리할 것인가를 해결하기 위해 파일을 이해할 방법이 없다는 것이다. 다른 자료들에서는, 이 용어가 커다란 데이터 객체를 지칭하기 위해, 그리고 이러한 것들을 다룰 때 존재하는 문제점들을 암시하기 위해 만들어졌다고 강조한다. BLOB을 다루는 애플리케이션은 영화나 TV 프로그램 등과 같은 대형 멀티미디어 객체들의 데이터베이스 저장이다. BLOB은 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체들을 저장하기 위해 주로 사용된다. 그러나 모든 DBMS가 BLOB을 지원하는 것은 아니다.

    컴퓨터 그래픽에서, blob(소문자로 쓴 BLOB)은 "재미있는 모양 형태"를 갖는 시각적 객체로서, 유연하고, 애니메이션을 따른다.

    일반적으로, blob은 무정형이며, 정의를 내리기 힘든 객체이다. UFO 연구에서는 물론, 천문학에도 blob이라는 것이 있다. "The Blob"이라는 제목의 과학 공상영화도 있었다.


    2. 이미지를 DB에 저장하기
    사실 Binary타입의 일종인 이미지(jpg,png등)를 DB에 저장하는 예제는 정말 많다(php에서 만큼은...). 그래서 굳이 여기에 예제를 적을 필요가 있겠냐만은.. 요즘 C를 이용해 다양한 시도를 하는 만큼, 이 부분도 적어본다.

    필자는 앞서 Eclipse기반에서 C/C++ 개발을 위한 환경만들기에 관련된 글을 적었다.

    아래에 소개할 예제들은 모두 위 글에서 언급한 환경에서 작성되었음을 밝힌다.

    간단히 이미지를 저장할 수 있는 테이블을 만들어보자. DB는 MySQL을 사용한다.
    mysql> describe images;
    +-------+------------+------+-----+---------+-------+
    | Field | Type       | Null | Key | Default | Extra |
    +-------+------------+------+-----+---------+-------+
    | id    | int(11)    | NO   | PRI |         |       |
    | data  | mediumblob | YES  |     | NULL    |       |
    +-------+------------+------+-----+---------+-------+
    2 rows in set (0.00 sec)
    


    위와 같은 구조의 테이블을 만들것이다. 다음 Create문으로 위 테이블을 생성한다.

    CREATE TABLE `images` (
      `id` int(11) NOT NULL auto_increment,
      `data` mediumblob,
      PRIMARY KEY  (`id`)
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8

    테이블을 만들때 data field가 mediumblob라는 것에 주목하자. 참고로 MySQL에서 BLOB타입은 Tiny BLOB(255, 2^8-1 bytes), BLOB(65,535=2^16-1 bytes), Medium BLOB(16777215=2^16-1 bytes), Long BLOB(4294967295=2^32-1 bytes)등을 지원한다.

    다음은 임의 크기의 이미지를 불러와 제작한 테이블에 저장하는 C코드이다. (공개된 PHP코드는 많은데 이외로 C코드는 많이 없다.)
    #define SOCKET int
    
    #include <stdio.h>
    #include <stdlib.h>
    #include <string.h>
    #include <mysql/mysql.h>
    
    #define DB_HOST "localhost or ip or domain"
    #define DB_USER "DB 접속 ID"
    #define DB_PASS "DB 접속 password"
    #define DB_NAME "데이타베이스 이름"
    
    int main(void) {
    	MYSQL *connection, conn;
    	FILE *fp;
    	unsigned long len, file_size;
    	int query_stat;
    	char *buf , *buf_to, *query, *stat = "INSERT INTO images(data) VALUES('%s')";
    
    	//DB 초기화 및 접속
    	mysql_init(&conn);
    	connection = mysql_real_connect(&conn, DB_HOST, DB_USER, DB_PASS, DB_NAME, 3306, (char*)NULL, 0);
    	if(connection==NULL) {
    		fprintf(stderr, "Mysql connection error : %s", mysql_error(&conn));
    		return EXIT_FAILURE;
    	} else {
    		printf("Mysql connected\n");
    	}
    
    	//이미지를 불러오기
    	fp = fopen("d:/image.png", "rb");
    	if(fp==NULL) {
    		fprintf(stderr, "image open error");
    		mysql_close(connection);
    		return EXIT_FAILURE;
    	}
    	rewind(fp);
    	fseek(fp,0,SEEK_END);
    	file_size = ftell(fp); //파일의 사이즈를 찾음
    	fseek(fp,0,SEEK_SET);
    	buf = (char*)malloc(file_size);
    	fread(buf, sizeof(char), file_size, fp); //파일을 읽어와 buf에 참고
    	fclose(fp);
    
    	//이미지내 escape string 적용
    	buf_to = (char*)malloc(file_size*2+1);
    	mysql_real_escape_string(connection, buf_to, buf, file_size); 
    
    	//Query 문 작성
    	query = (char*)malloc(strlen(stat)+file_size*2+1);
    	len = snprintf(query, strlen(stat)+file_size*2+1, stat, buf_to); 
    
    	//Query 문 실행
    	query_stat = mysql_real_query(connection, query, len); 
    	if(query_stat != 0) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    	}
    
    	//할당한 메모리 반환
    	free(buf);
    	free(buf_to);
    	free(query);
    
    	//DB 커넥션 닫기
    	mysql_close(connection);
    	return EXIT_SUCCESS;
    }
    

    위 코드는 d:/image.png 를 로드해 DB 테이블에 insert 하는 과정을 보여주고 있다. 실제로 테스트가 완료되었고 잘 동작한다.

    mysql_real_escape_string() 함수는 바이너리 데이터를 insert하기 위해 SQL insert 문을 작성하는데 있어서 '\0'과 같은 문자가 들어가는 것을 방지해준다. SQL insert문은 텍스트 데이터로 작성되어야 하므로 '\0'과 같은 문자가 중간에 삽입되어 있으면 그것이 문자열의 종료를 의미하기 때문에 이 함수의 호출은 필연적이다.

    mysql_real_escape_string() 함수의 2번째 인자는 to, 3번째 인자는 from이다. 즉 from에서 '\0'과 같은 문자를 피하도록(escape) "\\0"등으로 치환해줘 그것이 to에서 참조되도록 하는 것이다. 이때 to의 사이즈는 from의 2배+1 이어야 한다.  buf_to = (char*)malloc(file_size*2+1); 문에서도 볼 수 있듯이 buf는 file_size의 크기를 가지는데 buf_to는 그의 2배+1로 메모리를 할당했다. 그 이유는 최악의 상황에서 escape처리할 문자가 from데이터의 2배가 될 수 있기 때문이다. 그리고 마지막 +1은 문자열의 마지막은 항상 '\0' 처리가 되어야 하므로 그 공간을 만들어주는 것을 의미한다.

    mysql_real_escape_string()에 대해서는 다음 링크를 참고한다.


    Query문을 작성하는데 있어서 snprintf() 함수를 이용했다. 이 함수는 printf나 sprintf와 용법이 비슷하게 문자열 치환 용도로 사용하는데 이 함수는 특별히 buffer 길이에 맞게 null문자까지 포함해 안전하게 복사해주는 기능을 가진다. 다음글을 참고하길 바란다.


    mysql_real_query() 함수는 바이너리 데이터를 포함한 Query를 수행하기 위해 사용한다. mysql_real_query에 대해서는 다음 링크를 참고한다.


    이제 저장한 이미지를 불려들어 saved-image.png로 파일에 저장해보자.


    #define SOCKET int
    
    #include <stdio.h>
    #include <stdlib.h>
    #include <string.h>
    #include <mysql/mysql.h>
    
    #define DB_HOST "localhost or ip or domain"
    #define DB_USER "DB 접속 ID"
    #define DB_PASS "DB 접속 password"
    #define DB_NAME "데이타베이스 이름"
    
    int main(void) {
    	MYSQL *connection, conn;
    	MYSQL_RES *result;
    	MYSQL_ROW row;
    	FILE *fp;
    	int query_stat;
    	unsigned long *lengths;
    
    	//DB 초기화 및 접속
    	mysql_init(&conn);
    	connection = mysql_real_connect(&conn, DB_HOST, DB_USER, DB_PASS, DB_NAME, 3306, (char*)NULL, 0);
    	if(connection==NULL) {
    		fprintf(stderr, "Mysql connection error : %s", mysql_error(&conn));
    		return EXIT_FAILURE;
    	} else {
    		printf("Mysql connected\n");
    	}
    
    	//Query문 수행
    	query_stat = mysql_query(connection,"SELECT data FROM images WHERE id=1");
    	if(query_stat != 0) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    		return EXIT_FAILURE;
    	}
    
    	//Query문 수행한 결과를 통해 데이터 참조
    	result = mysql_store_result(connection);
    	if(result == NULL) {
    		fprintf(stderr, "result is null\n");
    		return EXIT_FAILURE;
    	}
    	row = mysql_fetch_row(result);
    	lengths = mysql_fetch_lengths(result);
    	mysql_free_result(result);
    	printf("file lengths : %ld\n", lengths[0]);
    
    	//이미지 저장
    	fp = fopen("d:/savedImage.png", "wb");
    	if(fp==NULL) {
    		fprintf(stderr, "image save error");
    		mysql_close(connection);
    		return EXIT_FAILURE;
    	}
    	fwrite(row[0], lengths[0], 1, fp);
    	fclose(fp);
    
    	//DB 커넥션 닫기
    	mysql_close(connection);
    	return EXIT_SUCCESS;
    }
    
    코드를 보면 이미지를 insert하는 것보다 select하는게 오히려 쉽다. 실행후 마지막에 d:/savedImage.png가 있다면 성공한 것이다.


    3. 구조체를 DB에 저장하기
    대학시절 C언어의 구조체를 파일로 저장해본 경험이 있는가? 또 저장한 구조체를 다시 읽어 화면에 출력해본 적이 있는가? 이런 짓을 해봤다면 당신은 이미 DB에 구조체도 넣을 수 있다. 이 구조체도 일반 이미지와 같은 Binary파일이기 때문이다.

    이 방법은 일반 이미지를 DB에 넣어본 경험이 있는 분이라면 쉽게 이해할 수 있다.


    3.1 테스트 구조체 만들기

    저장할 구조체를 만들어보자. 개인정보를 담는 아주 간단한 구조체인 Personal을 만든다.

    #include <stdio.h>
    #include <stdlib.h>
    
    //#pragma pack(1) //struct member alignment를 1로 설정, 기본 설정이 8이라면 이것으로 20->19로 줄인다.
    typedef struct st_person {
    	unsigned __int16 user_id; //id, 2bytes 정수
    	char user_name[15]; //이름, 15bytes 캐릭터형
    	unsigned __int16 age; //나이, 2bytes 정수형
    
    }PERSON;
    //#pragma pack() //struct member alignment 원상복구
    
    int main(void) {
    	printf("struct PERSON size : %d\n",sizeof(PERSON));
    	return EXIT_SUCCESS;
    }
    


    분석할 것도 없다. 총 19bytes의 데이터를 담는 구조체를 만들었고 main함수에서 이 구조체의 크기를 출력한다.

    하지만 이 프로그램을 실행하면 실제 구조체 크기인 19bytes가 아닌 20bytes로 출력된다. 왜 그럴까 찾아보다가 발견한 것이 struct member alignment라는 용어였고 이것을 설정하는 코드중에 #pragma pack()이 있다는 것이다.

    위 코드에서 #pragma pack() 2부분 주석처리를 해제하고 다시 실행하면 19byte로 나온다. 19가 20로 된다는 것은 운영체제 별, 기본설정별로 전부 다르기 때문에 자세한 설명은 관련 내용을 찾아보길 바란다.

    필자는 DB에 저장시에 하나의 Field에 여러명의 Personal 정보를 넣는것을 목적으로 하기 때문에 1~2bytes 차이가 저장되는 사람의 숫자만큼 증가되는 문제가 생길 수 있다. 이런 경우에 #pragma pack()을 적절히 사용하면 남는 공간을 줄일 수 있다.

    #pragma pack는 온라인 게임이나 네트워크 프로그램에서 이기종간 통신 간 패킷단위를 struct로 정의해 통신하는 경우에 유용하다. 그리고 사용시 주의 사항도 있으므로 이에 대해서는 더욱 학습이 필요하다.


    3.2 구조체를 담을 DB 테이블 제작

    위 구조체를 담을 DB 테이블은 다음 쿼리로 만들면 되겠다.


    CREATE TABLE `persons` (
      `AREA` int(11) NOT NULL auto_increment,
      `COUNT` smallint(5) unsigned default NULL,
      `DATA` blob NOT NULL,
      PRIMARY KEY  (`AREA`)
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8
    


    area가 key값이고 area별로 사람들의 데이터가 data에 담긴다. 이 data는 여러명의 데이터가 담겨질 것이다. 아마도 이게 유용한거냐?라는 질문을 한다면 이것은 한가지 예일 뿐이고 필자는 실제로 유용한 방법이였다. ^^


    3.3 구조체 포인터 배열을 만들어 DB에 저장하고 읽어오기
    구조체를 DB 테이블에 저장하는 것은 이미지를 저장할때와 별반 다른 것이 없다. 위에서 제시한 구조체로 이루어진 데이터의 경우가 특별할 것 같지만 실제로는 똑같다. 구조체를 만들때 user_id, user_name, age 순으로 만들었기 때문에 각각 2+15+2 = 19바이트가 1개의 개인정보 바이너리 데이터가 된다. 만약 2명이면 19x2=38 바이트의 바이너리 데이터가 되는 것이다. 이 모든 것을 수행하는 간단한 코드는 다음과 같다.


    #define SOCKET int
    
    #include <stdio.h>
    #include <stdlib.h>
    #include <memory.h>
    #include <string.h>
    #include <mysql/mysql.h>
    
    #define DB_HOST "localhost or ip or domain"
    #define DB_USER "DB 접속 ID"
    #define DB_PASS "DB 접속 password"
    #define DB_NAME "데이타베이스 이름"
    
    #define TABLE_NAME "persons"
    #define SQL_DROP_TABLE "DROP TABLE IF EXISTS %s"
    #define SQL_CREATE_TABLE "CREATE TABLE `%s` (\
    `AREA` int NOT NULL AUTO_INCREMENT,\
    `COUNT` smallint unsigned,\
    `DATA` BLOB NOT NULL,\
    PRIMARY KEY(`AREA`)\
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8"
    #define SQL_INSERT_DATA "INSERT INTO %s(DATA,COUNT) values('%s',%d)"
    #define SQL_SELECT_DATA "SELECT `DATA`, `COUNT` FROM %s WHERE `AREA`=%d"
    
    #pragma pack(1) //struct member alignment를 1로 설정, 기본 설정이 8이라면 이것으로 20->19로 줄인다.
    typedef struct st_person {
    	unsigned __int16 user_id; //id, 2bytes 정수
    	char user_name[15]; //이름, 15bytes 캐릭터형
    	unsigned __int16 age; //나이, 2bytes 정수형
    
    }PERSON;
    #pragma pack() //struct member alignment 원상복구
    
    int connect();
    int close();
    int create_table();
    int drop_table();
    PERSON* add_data(PERSON *person_list, int index, unsigned __int16 user_id, unsigned __int16 age, char* user_name);
    int remove_all_data(PERSON* person_list);
    int insert_data(PERSON* person_list, int count);
    int select_data(int area);
    
    MYSQL *connection, conn;
    
    int main(void) {
    	printf("PERSON struct size : %d\n",sizeof(PERSON));
    	connect();
    	drop_table();
    	create_table();
    
    	PERSON *person_list;
    	person_list = add_data(NULL,0,1,30,"jidolstar");
    	person_list = add_data(person_list,1,2,22,"joykim");
    	person_list = add_data(person_list,2,3,2,"tae hyun");
    	insert_data(person_list,3);
    	free(person_list);
    	select_data(1);
    
    	person_list = add_data(NULL,0,4,30,"addlayer");
    	person_list = add_data(person_list,1,5,22,"eye");
    	person_list = add_data(person_list,2,6,2,"unclejoe");
    	person_list = add_data(person_list,3,7,3,"miracle");
    	insert_data(person_list,4);
    	free(person_list);
    	select_data(2);
    
    
    	close();
    	return EXIT_SUCCESS;
    }
    
    /**
     * DB 접속
     */
    int connect() {
    	// mysql 초기화
    	mysql_init(&conn);
    
    	// DB 연결
    	connection = mysql_real_connect(&conn, DB_HOST, DB_USER, DB_PASS, DB_NAME, 3306, (char*)NULL, 0);
    	if(connection==NULL) {
    		fprintf(stderr, "Mysql connection error : %s", mysql_error(&conn));
    		exit(0);
    	} else {
    		printf("Mysql connected\n");
    	}
    	return 0;
    }
    /**
     * 데이타 베이스 닫음
     */
    int close() {
    	mysql_close(connection);
    	printf("mysql closed\n");
    	return 1;
    }
    
    /**
     * 테이블 생성
     */
    int create_table() {
    	int query_stat;
    	char buff[1024];
    
    	memset(buff,0x00,sizeof(buff));
    	sprintf( buff, SQL_CREATE_TABLE, TABLE_NAME );
    	query_stat = mysql_query(connection,buff);
    	if( query_stat != 0 ) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    		exit(0);
    	} else {
    		printf("created table\n");
    	}
    	return 0;
    }
    
    /**
     * 기존 테이블 삭제
     */
    int drop_table() {
    	int query_stat;
    	char buff[1024];
    
    	//기존 테이블 삭제
    	memset(buff,0x00,sizeof(buff));
    	sprintf( buff, SQL_DROP_TABLE, TABLE_NAME );
    	query_stat = mysql_query(connection,buff);
    	if( query_stat != 0 ) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    		exit(0);
    	} else {
    		printf("table dropped\n");
    	}
    	return 0;
    }
    
    /**
     * 데이터 추가
     */
    PERSON* add_data(PERSON *person_list, int index, unsigned __int16 user_id, unsigned __int16 age, char* user_name) {
    	PERSON *current;
    	if(person_list == NULL ) {
    		person_list = (PERSON*)malloc(sizeof(PERSON));
    		current = person_list;
    	} else {
    		person_list = (PERSON*)realloc(person_list, sizeof(PERSON)*(index+1));
    		current = person_list + index;
    	}
    	current->user_id = user_id;
    	current->age = age;
    	memset(current->user_name,0x00,sizeof(current->user_name));
    	strcpy(current->user_name,user_name);
    	//printf("added user_id:%d, age:%d, name:%s\n",current->user_id,current->age,current->user_name);
    	return person_list;
    }
    
    /**
     * 모든 데이터 삭제
     */
    int remove_all_data(PERSON* person_list) {
    	free(person_list);
    	return 0;
    }
    
    /**
     * 데이타를 디비 테이블에 삽입
     */
    int insert_data(PERSON* person_list, int count) {
    	int query_stat;
    	unsigned long len, size;
    	char *buf_to, *query;
    
    	size = sizeof(PERSON)*count*2+1;
    	buf_to = (char*)malloc(size);
    	mysql_real_escape_string(connection, buf_to, (char*)person_list, sizeof(PERSON)*count);
    
    	//Query 문 작성
    	query = (char*)malloc(sizeof(SQL_INSERT_DATA)+size);
    	len = snprintf(query, sizeof(SQL_INSERT_DATA)+size, SQL_INSERT_DATA, TABLE_NAME, (char*)buf_to, count );
    
    	//Query 문 실행
    	query_stat = mysql_real_query(connection, query, len);
    	if(query_stat != 0) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    	} else {
    		printf("insert complete\n");
    	}
    
    	//할당한 메모리 반환
    	free(buf_to);
    	free(query);
    	return 0;
    }
    
    /**
     * 데이타를 디비에서 읽어옴
     */
    int select_data(int area) {
    	char query[1024];
    	int query_stat;
    	int count=0;
    	int i;
    	PERSON *person_list, *person;
    	MYSQL_RES *result;
    	MYSQL_ROW row;
    
    	memset(query,0x00,sizeof(query));
    	sprintf(query, SQL_SELECT_DATA, TABLE_NAME, area);
    	query_stat = mysql_query(connection,query);
    	if(query_stat != 0) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    		exit(0);
    	}
    
    	//갯수만큼 화면에 데이터 출력
    	result=mysql_store_result(connection);
    	row = mysql_fetch_row(result);
    	mysql_free_result(result);
    	count = atoi(row[1]); //갯수
    	person_list = (PERSON*)row[0]; //한개의  데이터
    	for( i=0; i<count; i++ ) {
    		person = person_list + i;
    		printf("user_id:%d, age:%d, name:%s\n",person->user_id,person->age,person->user_name);
    	}
    	free(person_list);
    	return 0;
    }
    

    위 코드를 천천히 분석하면 어떻게 구조체 정보를 데이타베이스에 저장하고 읽어올 수 있는지 어렵지 않게 분석할 수 있을 것이다. 코드 자체는 연습용으로 급조된 거라서 중간중간 엉성한 부분은 그냥 넘어가자 ^^


    4. ActionScript 3.0으로 바이너리 데이터 읽어오기 

    필자가 C를 지금까지 파고 든 가장 큰 목적은 Flash에서 C로 저장된 구조체 데이터를 읽어오는 것에 있다. ActionScript 3.0 API에는 바이너리 데이터를 다룰 수 있는 강력한 클래스가 존재한다. 그것은 ByteArray이다. 이 ByteArray를 이용하면 구조체 바이너리 데이터를 아주 쉽게 사용할 수 있게 된다.

    DB에 저장된 바이너리 데이터를 Java로 로드해 AMF로 flash로 전송해주고 Flash에서는 이 데이터를 해석해 사용한다.

    자바에서 해당 데이터를 로드할 때 변환되는 Value Object의 형태는 다음과 같을 것이다.
    package com.jidolstar.person.domain;
    
    public class PersonArea {
    	private int area;
    	private int count;
    	private byte[] data;
    	
    	public int getArea() {
    		return area;
    	}
    	public void setArea(int area) {
    		this.area = area;
    	}
    	public int getCount() {
    		return count;
    	}
    	public void setCount(int count) {
    		this.count = count;
    	}
    	public byte[] getData() {
    		return data;
    	}
    	public void setData(byte[] data) {
    		this.data = data;
    	}
    }
    


    위 자바객체를 BlazeDS나 LCDS를 이용해 AMF(ActionScript Message Format)으로 전송하면 Flex나 ActionScript 3.0에서 직렬화되는 객체는 다음과 같을 것이다.
    package {
    	import flash.utils.ByteArray;
    
    	[RemoteClass(alias="com.jidolstar.person.domain.PersonArea")]
    	public class PersonArea	{
    		public var area:int;
    		public var count:int;
    		public var data:ByteArray;
    	}
    }
    


    위 클래스에서 자바에서 AMF로 넘겨주는 PersonArea를 직렬화 처리하기 위해 [RemoteClass(alias="com.jidolstar.person.domain.PersonArea")] 를 사용했다는 것에 주목하자. 또한 자바의 byte[] 포멧은 ActionScript 3.0의 ByteArray로 직렬화 처리된다.

    우리는 최종적으로 다음 ActionScript 3.0 클래스로 변환되기를 희망한다.

    package {
    	public class AreaDetail {
    		public var area:int;
    		public var id:int;
    		public var name:String;
    		public var age:int;
    	}
    }
    


    다음 코드는 이를 진행해 줄 Flex 4 코드이다.
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    			   xmlns:s="library://ns.adobe.com/flex/spark" 
    			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
    			   xmlns:halo="library://ns.adobe.com/flex/halo">
    	<fx:Declarations>
    		<s:RemoteObject id="ro" destination="personRO">
    			<s:method name="getPersonArea" result="result_handler(event)" fault="mx.controls.Alert.show(event.fault.faultString)"/> 
    		</s:RemoteObject>
    		<s:ArrayCollection id="ac"/>
    	</fx:Declarations>
    	<fx:Script>
    		<![CDATA[
    			import mx.collections.ArrayCollection;
    			import mx.controls.Alert;
    			import mx.rpc.events.ResultEvent;
    			
    			private function result_handler($event:ResultEvent):void {
    				var personArea:PersonArea = $event.result as PersonArea;
    				var count:int = personArea.count;
    				var person:PersonDetail;
    				var data:ByteArray = personArea.data;
    				var area:int = personArea.area;
    				ac.removeAll();
    				data.endian = Endian.LITTLE_ENDIAN; //구조체로 저장된 데이터가 little endian인 경우 이 설정을 해야한다.//http://blog.naver.com/kimsumin75/20055881438
    				ac.disableAutoUpdate();
    				while( count-- ) {
    					person = new PersonDetail;
    					person.area = area;
    					person.id = data.readShort()
    					person.name = data.readUTFBytes(15,"utf-8");
    					person.age = data.readShort();
    					//trace(data.readByte()); //만약 c에서 #progma pack(1)을 사용하지 않았다면 19가 아닌 20바이트가 넘어올 것이므로 1바이트가 비게 된다. 이때는 이 부분의 주석이 풀어져야 제대로 읽어올 수 있다.
    					ac.addItem(person);
    				}
    				ac.enableAutoUpdate();
    				ac.refresh();
    			}
    
    			protected function button1_clickHandler(event:MouseEvent):void
    			{
    				ro.getPersonArea(parseInt(tiArea.text));
    			}
    
    		]]>
    	</fx:Script>
    	<halo:Form x="10" y="7" width="225" height="132">
    		<halo:FormItem label="area">
    			<s:TextInput id="tiArea" text="1"/>
    		</halo:FormItem>
    		<s:Button label="불러오기" click="button1_clickHandler(event)"/>
    	</halo:Form>
    	<halo:DataGrid x="243" y="10" height="360" width="385" dataProvider="{ac}">
    		<halo:columns>
    			<halo:DataGridColumn headerText="AREA" dataField="area"/>
    			<halo:DataGridColumn headerText="ID" dataField="id"/>
    			<halo:DataGridColumn headerText="NAME" dataField="name"/>
    			<halo:DataGridColumn headerText="AGE" dataField="age"/>
    		</halo:columns>
    	</halo:DataGrid>
    </s:Application>
    


    위 코드에서 중요한 부분은 result_handler() 메소드 부분이다. ByteArray로 직렬화되어 들어온 데이터를 어떻게 읽어들이고 사용하는지 보여주고 있다. 중요한 것은 구조체의 정의시 user_id, user_name, age순으로 했기 때문에 ByteArray로 읽을때도 그와 같은 순으로 읽어야 하며 각각 읽어들일때 Byte도 잘 따져야 한다. 각각 2, 15, 2 바이트씩 총 19바이트를 저장했기 때문에 ByteArray에서 2바이트 정수를 읽어주는 readShort()메소드를 사용했다. 또한 문자열을 읽기 위해 readUTFBytes()를 이용했다.

    //trace(data.readByte()); 으로 주석된 부분이 있다. 이 부분은 c코드에서 #progma pack(1)으로 처리하지 않았을때 구조체의 크기는 19바이트가 아닌 20바이트가 되므로 ByteArray로 읽을때 항상 1바이트가 남게된다. 그러므로 c코드에서 #progma pack(1)가 꼭 필요하다는 것을 여기서도 알 수 있다. 

    마지막으로 ByteArray를 읽기전에 data.endian = Endian.LITTLE_ENDIAN 처리를 했다. Endian의 종류는 두가지이다. Big Endian과 Little Endian이다. 이것은 데이타를 메모리에 쓰는 방식의 차이로 필자가 c코드를 돌려 구조체를 저장할때 방식이 Little Endian방식으로 저장했기 때문에 ByteArray로 넘어온 데이타도 그렇게 읽을 수 밖에 없게 된다. 이 방식의 차이와 장단점은 아래 링크를 통해 살펴보길 바란다.

    Big Endian과 Little Endian


    5. 정리하며

    바이너리 데이터를 데이타 베이스에 저장하고 최종적으로 Flash기반에서 로드하는 것까지 다뤄봤다. 꽤 많은 내용을 다룬 것 같지만 실상은 매우 단순하다. 바이트 단위로 데이타를 이해한다면 그리 어렵지 않은 내용들이며 결국 이런 처리를 익숙하게 할 수 있겠는가가 중요한 것 같다.

    필자는 ActionScript나 Java등에 익숙하다 보니 이들 언어에서 메모리 관리등을 모두 다 해주니깐 게을러지는 것 같다. 이들 언어를 하더라도 c언어는 꾸준히 해주어야하고 종종 실무에도 적용해줘야겠다.

    글쓴이 : 지돌스타(http://blog.jidolstar.com/681)
    2010.04.27 10:00 AM 현재 27분이 참석인원으로 등록되었습니다.
    맹기완, 김어진, 지용호, 김주호, 안세원, 박준우, 이성우, 한재화, 김범람, 문길섭, 정태현, 정진우, 사광호,  임대찬, 구준호, 이슬기, 이상훈, 윤도선, 김동진, 이진건, 유지남, 김학영, 박동준, 김민규, 김현우, 오현식 (이상 26명, 무작위순)

    참석대상중에 개발자가 아니더라도 프로젝트에 관심이 있으신 회사대표나 이사급분들이 오셔도 좋을 것 같습니다. 아직 10분이 오실 수 있는 여유가 있으니 참석하실 분은 제게 문자(성함,회사,직급 정도)로 남겨주세요.



    파워플에 대한 소개가 1주전에 있은 후에 많은 분들의 관심과 성원이 있었습니다. 그에 힘입어 파워플(Powerfl) 킥오프 모임을 하고자 합니다.

    장소 : 한국 Adobe 대회의실. (서울 강남 교보타워 B동 16층 - 지도)
    일정 : 2010년 4월 27일(화요일) 저녁 7시~9시
    주최자 : 맹기완(Bsidesoft 대표), 지용호(위콘 커뮤니케이션즈 개발팀장, ACC)
    연락 : 지용호 (010 - 2018 - 0321, jidolstar@gmail.com)
    참여 대상
    • Flash,Flex,AIR 관련 업계 관계자 또는 개발자
    • 백엔드 서비스 관계자 또는 개발자
    • 각종 포탈, 에이전시, SI업계 관계자

    내용

    • 파워플에 대해
    • 파워플 아키텍쳐 
    • 파워플 서비스 전략 및 로드맵
    참석인원
    • 30명 내 (Adobe 대회의실 정원입니다.)
    • 정원이 제한되어 있는 관계로 참석을 희망하시는 분은 미리 아래 연락처로 연락주시길 바랍니다.
      지용호(010 - 2018 - 0321)
    • 기존 참가 신청자도 저한테 참석여부를 보내주시길 바랍니다.

    공식페이지 : powerfl.com, powerfl.net, powerfl.co.kr 중 예정에 있습니다.
    2차 모임 : 분위기 봐서 만들겠습니다. 그럼 회비가 필요하겠군요. ^^

    파워플에 대해서 잘 모르시겠다면 다음 링크를 보세요.



    파워플에 대한 이해를 돕기 위해 아래 이미지를 참고해주세요.




    파워플은 단순히 Wonderfl 사이트를 모방한 한국 사이트가 아닙니다. Wonderfl을 밴치마킹했지만 Flex, Flash를 알고리즘 및 코드 단위가 아닌 아키텍쳐 기반의 솔루션 단위까지 승격한 서비스를 제공합니다. 솔루션 단위로 Flex, Flash 애플리케이션 및 라이브러리를 공유하게 되면 기업차원의 마케팅 및 홍보를 도모할 수 있게 되고 솔루션 프로젝트 단위로의 확장 및 재생산을 할 수 있게 됩니다. 그 결과 어도비 기술의 활용도를 최대한 끌어올림으로써 한국 IT분야의 새로운 혁신을 꽤할 수 있게 된다고 생각합니다.

    애초에 Wonderfl는 flash이기 때문에 가능했던 겁니다. 반대로 Flash가 아니라면 이러한 시도는 할 수 없었습니다. 그만큼 Flash의 활용도는 뛰어납니다. Powerfl도 Flash이기 때문에 이러한 서비스가 가능해지는 겁니다. Flash의 다양한 활용성과 범용성에도 불구하고 한국 IT에서의 인식은 차갑기만 합니다. 파워플은 Flash 기술의 장점을 최대한 살려 사업적인 영역까지 재확대 시키고 사용자의 인식을 바로잡는데 크게 일조할 것이라 생각합니다.

    여러분들이 그 주인공이 되었으면 합니다.

    글쓴이 : 지돌스타(http://blog.jidolstar.com/680)


    Flash는 다양한 보안모델을 가진다. 보안모델에 따라 동작하지 않는 경우에는 Flash Player는 여지없이 Security Error를 발생시킨다. 이러한 보안모델이 있으면 개발할 때는 난해하지만 사용자 입장 및 서버 관리자 입장에서 보안문제를 적절히 처리할 수 있기 때문에 안심하고 Flash 어플리케이션을 사용할 수 있는 것이다.

    Flash Player 보안에 관련된 것은 다음 글을 보면 자세히 나온다.

    Flash Player 보안


    각설하고...
    SWF파일과 그것을 감싸는 HTML이 동일한 도메인에 위치하는 경우에는 <object>및 <embed> 태그에 allowScriptAccess 매개변수값을 sameDomain이나 always를 지정하는 것만으로 SWF에 ExternalInterface.addCallback() 함수로 자신내부의 메소드를 호출할 수 있게끔 되어 있는 경우 보안상 아무 문제없이 HTML에서 SWF의 메소드를 호출할 수 있다. 다음글을 참고해 보자.

    아웃바운드 URL 액세스 제어

    하지만 SWF파일과 HTML이 동일한 도메인에 위치하지 않은 경우에는 Flash Player 보안이 더욱 강화된다. allowScriptAccess 매개변수를 기본적으로 allowScriptAccess="always"로 지정해야 하는 것 외에 다른 보안 설정이 필요하다. 그것은 SWF에 Security.allowDomain()  메소드가 가능하게 한다.

    SWF가 domain1.com에 있고 HTML이 domain2.com에 있다고 할 때 HTML에서 SWF내에서 ExternalInterface.addCallback()으로 외부접근을 허락한 메소드를 접근하려면 SWF에  Security.allowDomain("domain2.com");을 지정해 주어야 한다. 이 말은 이 SWF는 domain2.com에 있는 HTML에서 접근하는 것을 허락한다는 것을 의미한다.

    어떤 도메인에 있던지 SWF 내부의 메소드 접근을 항상 허용하려면 Security.allowDomain("*") 로 지정하면 된다. 하지만 이것은 보안상 좋지 않는 방법이다.

    서로 다른 도메인에 있는 SWF와 HTML에 대해서 이런 보안이 있는 이유는 명료하다. 내가 배포한 SWF에 정의된 함수를 HTML에서 접근할 수 있도록 ExternalInterface.addCallback()을 정의했는데, 다른 사람이 다른 도메인에서 이것을 악용할 소지가 있을 수 있기 때문이다.

    일반서비스인 domain.com과 파일서버인 file.domain.com을 보자. 두개다 domain.com을 사용하지만 domain.com은 file.domain.com의 슈퍼도메인이다.  이는 Flash Player 6 이전에는 같은 것으로 인식했으나 Flash Player 7이상으로 되면서 다른 도메인으로 인식하게 되었다. 이렇게 된 것은 보안상 문제로 보안정책의 변경이 필요했기 때문이다. file.domain.com에 어떤 사용자가 악성 스크립트를 심은 swf를 업로드 했다고 가정하자. 이때 domain.com과 file.domain.com을 동일하게 인식해버리면 이 swf는 domain.com에 마음대로 접근이 가능해진다. 그래서 flash player는 file.domain.com과 domain.com을 다르게 인식하는 것이다. 이것은 crossdomain정책과 같다.

    더 자세한 내용은 다음 글을 참고한다.

    Security.allowDomain()에 대해

    아쉬운 것은 Security.allowDomain("*.domain.com") 식의 지정이 안된다는 것이다.  crossdomain.xml 설정시에는 와일드카드(*)를 *.domain.com 형태로 사용할 수 있지만 Security.allowDomain()에서 안되는 것은 이외다.

    개인적으로 개발환경과 테스트환경, 배포환경이 모두 다르기 때문에 와일드카드 지원이 있으면 좀 편할텐데 하는 아쉬움이 남는다.

    글쓴이 : 지돌스타(http://blog.jidolstar.com/675 )





    Flex 4까지 공식 배포되기 시작했지만 Flex 역사가 수년이 지났음에도 불구하고 버젓한 한글문서라고는 flexdocs.kr 가 다였습니다. 일본어를 어렵게 번역하고 수번이나 수정하면서 한 것들이라 중간중간 필요한 내용이 누락되거나 단어가 이상한 것도 있었지만 그동안 Flex 학습에 큰 도움을 준 것은 사실입니다. 아쉽게도 Flex 3에 대한 한글문서가 잠깐 선보였다가 갑자기 사라진 뒤로는 이제 더이상 Flex관련 한글 문서는 기대하기 힘들겠다 생각했습니다.

    그러나 열이아빠님께서 이러한 분위기를 깨뜨려주셨습니다.

    개인적으로 진행하시던 Flex 4 한글 문서화를 공개하신겁니다. Flex 4 한글 문서화 프로젝트는 단순히 한글 문서를 만드는데만 그친다고 보지 않습니다. 개발자들끼리 뭔가 새로운 네트워크를 만들어주는 좋은 장치일 수 있습니다. 그래서 저도 동참하기로 마음먹었고 미약하게나마 지원해 드릴 수 있는 부분은 적극적으로 하려고 합니다.

    Flex 2, 3에 대한 개발경험이 있으신 분이시고 번역작업에 동참하시고 싶으신 분이라면 언제든지 참여하실 수 있습니다. 자세한 내용은 다음 글을 참고하세요.

    어도비에 한글 문서가 없다고 불만만 가지지 말고 이런 상황을 잘 이용할 필요가 있습니다. 단순한 작업 같지만 매우 중요하고, 그러면서 뭔가 다른 개발자들에게 도움이 될 수 있는 일이면서 자신의 인맥을 넓힐 수 있는 중요한 계기가 될 수 있습니다.

    많은 Flex 개발자 분들의 참여를 부탁드려요.

    글쓴이 : 지돌스타(http://blog.jidolstar.com)



    공지 : 파워플 킥오프 모임을 참고해 주세요. http://blog.jidolstar.com/680


    이전부터 많은 지면을 할당하여 원더플(wonderfl.net)에 관련된 글을 많이 적었습니다. 제 블로그에 꽤 많은 Flash 개발자들이 다녀가시기 때문에 이제 원더플을 모르시는 분은 거의 없을 듯 합니다.

    아시다시피 원더플은 웹에서 직접 코딩하고 컴파일되어 결과를 사이트에서 바로 확인할 수 있다는 장점이 있습니다. 여기에 SNS기능도 곁들여서 세계적으로 많이 애용되고 있는 사이트입니다. 저는 이 때문에 칭찬을 아끼지 않았죠.

    하지만 원더플은 중요한 한계점이 있습니다. Flex든 ActionScript든 딱 한개의 문서만 만들 수 있습니다.  현업에서 실제로 더 중요시 되는 것은 아키텍쳐와 설계 부분에 대한 부분입니다. 그러므로 원더플의 이런 구조로는 이런 요구를 수용하기에는 부족할 수 밖에 없지요. 가령, 제 경우만 하더라도 이전에 Flex로 제작해 놓은 3D 게시판이나 상용에서 사용할 만한 이미지 에디터, 천문프로그램 정도의 코드를 원더플에 개시하기에는 너무 역부족이였습니다.

    파워플(Powderfl)이란?!


    지금 소개해드리고자 하는 것은 원더플의 한계를 극복하면서도 더욱 파워풀하게 Flex, ActionScript 3.0 코드를 공유할 수 있는 파워플(powderfl) 프로젝트입니다.

    파워플은 ActionScript 코드를 웹에 개시하고 보여주며 소스를 공유하는 것까지는 원더플과 비슷한 컨셉입니다. 하지만 파워플은 원더플처럼 웹에서 직접 코딩할 수 있는 조악한(?) 에디터를 대신 Flash Builder를 에디터로 삼고 그 결과를 SVN으로 전송해주면 원더플과 똑같이 SWF 애플리케이션을 웹에서 볼 수 있도록 합니다.

    이 아이디어는 애초부터 hika님으부터 나온 것이고, 저는 프로젝트 명만 정했습니다. ^^
    Powerfl(Power + Flash) 프로젝트 명은 제가 생각해도 너무 잘지은듯.... ^^ 마침 도메인도 다 비어 있었다는 ㅋㅋ


    파워플 개요
    앞서 말씀드렸듯이 파워플은 원더플의 한계점을 극복하기 위해 Flash Builder를 에디터 삼는데서 시작합니다. 이에 대한 대략적인 개요는 다음과 같습니다.

    1. 서버에 계정을 만들면 svn레포지토리를 할당받는다.
    2. 로컬에서 레포지토리 싱크를 하면 서버측 swc를 전부 내려받고 기본적인 폴더 구조를 내려받는다.
    3. 로컬에서 개발한 후 커밋하면 훅스크립트( http://www.javajigi.net/pages/viewpage.action?pageId=110395394 )를 이용하여 자동으로 서버측에서 컴파일을 일으킨 후
    4. 원더플과 마찬가지로 swf를 웹에 게시한다.
    5. 커밋로그를 작성할 때 다양한 매크로를 지원하여 swf에 대한 기술을 손쉽게 하고 서버가 swf를 컴파일한 후 swf에 대한 자세한 분석레포트를 같이 올린다.
    6. svn에 커밋된 내용은 웹에서 완전히 보고, 수정하고, 삭제할 수 있으며 기존 원더플 방식을 웹에서 파일을 새로 만들어 편집하는 것도 가능하게 한다.
    7. 상대방의 svn 중 원하는 패키지를 import할 수 있게 되어 유저가 작성한 라이브러리를 캡슐화한 상태에서 공유할 수 있다.
    8. 유저는 자신의 swf를 구동하는 도중에 몇개라고 썸네일을 생성해낼 수 있다.
    9. 서버에서 생성된 swf 및 썸네일은 전부 로컬로 다운로드 받을 수 있으며, 특정 유저의 레포지토리를 zip파일로 내려받을 수 있다.

    대략적으로 보면 에디터를 Flash Builder 뿐 아니라 웹에도 에디팅이 되게 하고 SVN이 되기 때문에 어떤 에디터를 써도 무방하다는 것을 알 수 있습니다. 그만큼 파워플! 한거죠 ㅋ


    파워플은 왜 필요한가?
    일단 한국에서 뭔가 설계, 아키텍쳐, 기술을 공유하는 것은 너무 어렵습니다. 딱히 그 이유에 대해서 말씀드릴 필요는 없고, 이런 개발 환경에서 개발자들이 힘을 합해 파워플과 같은 사이트를 만들어 운영하기 시작하고 활성화 되면 어도비에서도 한국에 대한 관심을 가지기 시작할 겁니다. 뭔가 시장이 활발한 것을 보여줘야 어도비도 반응할 것이고 '어도비는 일본만 좋아해'라며 부러운 시선을 가지지 않아도 될겁니다. 

    파워플은 아마도 개발자들이 참여하는 만큼 초반부터 영어로된 사이트가 되지 않을까 생각합니다. 정상적으로 만들어져서 운영이 된다면 한국개발자뿐 아니라 일본, 미국 개발자들도 유용하게 쓸 수 있는 사이트가 되지 않을까요? 만약 그렇게 정말루~ 된다고 생각해보세요.

    그리고... 파워플이 활성화 되서 어도비 공식 기술 사이트로 선정되었다고 생각해보세요. 정말 뿌듯할 겁니다.

    카페나 블로그에서 정보 공유하는 것을 뛰어 넘어서 우리도 뭔가 이런 일을 누군가는 해야만 한국 Flash 발전이 있을 것이고 이러한 활동이 Flash에만 국한되는 것이 아니라 관련 업종에도 영향을 주어 여러 벤치마킹한 사이트들이 많아진다면 그 또한 즐거운 일입니다.

    파워플의 특성상 유용한 공개 프레임워크들이 많이 올라올 수도 있을 겁니다. 특이하고 멋진 아키텍쳐로 이루어진 애플리케이션도 경험할 수 있을 겁니다. 다른 개발자들과 함께 협업을 통해 함께 쓸 수 있는 결과물을 도출할 수 있을 겁니다. 그리고 우리도 Flex 5 만들 수 있지 않을까요?


    파워플 개발 팀원 모집

    파워플 서비스가 오픈되려면 다음과 같은 분야의 다양한 노가다를 필요로 합니다.
    • 리눅스 서버 셋팅 (아마도 데비안이 후보)
    • 아파치를 다양한 mod와 합체하여 최적화 컴파일설치
    • 서비스는 php로 작성
    • db는 mySQL..오라클 꼴보기 싫으면 pSQL이나 mSQL 쓸지도..
    • svn설치 및 아파치 연동
    • svn 훅스크립트 작성을 위한 리눅스 스크립트…냐 아니면 펄이나 파이썬이냐..아니면 php냐..
    • mxmlc와 mod연동
    • 웹사이트 제작
    • 위의 모든 서비스를 웹사이트에 인테그레이션
    • rss 및 다양한 웹배포수단 연동모듈작성
    • 예상컨데 자바나 c계열 소켓서버의 브릿지를 통해 as3 socket에서 인증을 처리해주고 아파치웹서버에 접근할 수 있게 해줄 예정(귀찮은데 펄데몬으로?)
    • 기타 워드프레스 인테그레이션도 하고 싶은…ㅋㅋㅋ

    어떤 분야든 좋습니다. 함께 하실 분을 찾습니다.


    현재 맴버


    제작일정
    • 모집마감 : 없음(언제라도 들어와만 주신다면 감사할 따름 ^^;)
    • 프로젝트 런칭 및 킥오프미팅 : 아직은 미정이지만 4월 20일정도
    • 오픈 예정 : 6월? ㅎㅎ 과연

    관련글
    신규 프로젝트 팀원 모집


    어쨌거나~~ 한번 정도 만나서 이와 관련된 이야기를 해보고 진행하는 것은 꽤 생산적인 일이 될겁니다.
    우리도 원더플과 같이 멋진 국제 기술 사이트를 만들어 보자구요!
    참여하실 분은 주저말고 신청해주세요. 단, 어느 부분에 있어서 하고 싶다는 것을 적어주시면 더욱 좋습니다.
    여러분의 참여가 한국 개발 현실을 바꿀 수도 있습니다. ^^

    이미 사비 들여서 도메인도 구입해 두었습니다.
    powerfl.com, powerfl.net, powerfl.co.kr

    도메인도 샀으니 해야만 합니다. ^^

    많은 참여 부탁합니다.

    글쓴이 : 지돌스타(http://blog.jidolstar.com/673)

    + Recent posts