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)  


Adobe AIR 2.7 버전이 정식 배포되었습니다. 개발자를 위한 SDK와 Runtime이 함께 배포되었습니다. Adobe AIR 2.7은 데스크탑 또는 모바일 환경 모두 동작하며 모바일의 경우 안드로이드 2.2 이상, BlackBerry Tablet OS, iOS 4.0 이상에서 동작합니다. 

현재 Flash Builder 4.5는 아직 Flex기반 iOS 어플 개발이 불가능하지만 Flash builder 4.5가 이번 달에 새로 배포되면 AIR 2.7이 같이 탑재되면서 Flex로 iOS 어플 개발이 가능하게 됩니다. 현재 Flash Builder 4.5에 AIR 2.7이 없어서 Flex로 iOS 개발을 막아놓았던 것 같네요.

iOS를 위한 AIR 어플은 CPU모드에서 4배이상 빠른 렌더링을 지원합니다. 기존에 Flex로 iOS기반 어플을 만들게 되면 퍼포먼스 문제가 있었는데 이 부분이 말끔하게 해결된 듯합니다. 다음 동영상을 보세요. 

Adobe AIR 2.7 : Faster app performance on iOS  http://goo.gl/VJxnR 

 iOS에서 디버깅 및 테스팅 환경이 많이 개선되었다고 합니다. 또한 Android기반에서 SD카드에 AIR 런타임을 설치할 수 있게 되었습니다. 

데스크탑환경에서 Media Measurement를 위한 통합기반이 지원됩니다. Adobe Flash Player 10.3에서 부터 지원되었으면 AIR 2.7에서도 이것을 지원합니다. 관련된 내용은 아래 링크를 참고하세요.

Measuring video consumption in Flash : http://goo.gl/wPcf0 

또한 Acoustic Echo Cancellation를 지원합니다. Flash Player 10.3에서도 지원하고 있습니다. 여기에 관련된 API가 도입됨에 따라 헤드셋없이도 애코조절이 훨씬 원할해집니다.

그리고 HTMLLoader에서 HTML 컨텐츠에 대한 로케이션 제어 권한이 훨씬 향상되었습니다. 과거에 이 부분때문에 고생한 적이 생각난다는..... 

다음 사이트들을 둘러보시면 AIR 2.7을 이해하는데 더욱 도움이 될 것입니다. 

Adobe AIR 2.7 Now Available : iOS apps 4x Faster! : http://goo.gl/5IEIz 
Adobe AIR 2.7 Developer Release Notes : http://kb2.adobe.com/cps/906/cpsid_90612.html 
Adobe AIR 공식페이지 : http://www.adobe.com/products/air/
Download Adobe AIR SDK : http://www.adobe.com/products/air/ 
Adobe Flash Builder : http://www.adobe.com/products/flash-builder.html

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

이 글은 어도비 공식블로그에도 발행되었습니다.
큰변화 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)  
지난해 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년에 들어서 재미있는 사이트가 생겨났다. 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~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"

얼마전 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




지난행사

행사추천
"Flex로 구현하는 엔터프라이즈 RIA 맥잡기"는 ACC(Adobe Community Champion) 엔터프라이즈팀에서 자발적으로 하는 행사입니다. 엔터프라이즈 기반 RIA 솔루션을 구축하는 기술에 대해서 실제 현업에서 종사하시는 분들의 기술들을 습득할 수 있는 아주 좋은 기회라고 생각합니다. 참가비용 5000원은 행사비용이 아닌 불우이웃을 돕기위한 위한 모금이며 최소한의 참가의지를 알기 위한 정도로 이해해주시면 되겠습니다. 단돈 5000원에 이 정도 급의 좋은 내용을 들을 수 있다는 것은 행운이라고 생각합니다. 관심있으신 분은 주저말고 참가해보세요. 




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

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

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
직장을 옮기면서 Flash에 관심을 가진지도 3년이 넘었다. 당시만해도 PHP정도만 경험이 있었고 수년동안 웹과는 단절된 상태였기 때문에 Ajax로 만들어진 구글맵을 보고 "이런걸 만들 수 있구나..."라는 말을 중얼거리며 꽤 놀랐던 적이 있었다. Web 2.0, RIA라는 단어가 당시 트렌드였고 이 모든 것이 나에게는 매우 신선했고 가능성을 느끼게 하는데 충분했다. 

하지만 3년전 RIA 대표주자인 Flex 2를 처음 접했을때 국내 관련서적은 거의 없었다. Flash IDE를 기반으로 하는 책은 수도 없이 많았지만 개발요구사항을 만족시키기에는 매우 역부족이였고 Flex도 옥상훈님이 쓴 서적 딱 한권 뿐이였다. 사실 모두 기초서적들이라 초반학습에는 도움되었지만 실무에 적용하기에는 너무 부족했다. 또한 기술적으로 도움을 받을 수 있는 인맥도 전혀 없었다.

결국 내가 선택한 방법은 이 블로그이다. 말이 되던 안되던 Flex 하나를 중구장창 파고 들면서 얻은 귀중한 지식을 블로그에 하나씩 써내려갔다. 초반에는 livedocs가 어디 있는지도 몰랐고 구글 검색도 처음 해봤던 시절이라 너무 힘들었다. 블로그의 내용은 관련 카페에 소개하면서 계속 점접을 만들어갔다. 이러한 노력은 몇개월이 지나지 않아 바로 사람들에게 좋은 반응으로 이어졌고 지식공유가 일어났다. 또한 이쯤에 flexdocs.kr 사이트도 운영하게 되었다. 그때 생각하면 너무 어렵게 공부했던 기억뿐이다.

3년이 지난 지금... 사정은 너무도 많이 달라졌다. 3년전 한창 붐을 일으키던 RIA라는 단어는 이미 일상이 되버렸고 모바일이 이슈가 되면서 관련 서적도 쏟아지기 시작했다. Flash Platform에 관련된 서적도 엄청 많이 쏟아졌고 오프라인 서점만 찾아가면 듣도보지도 못한 관련서적을 꽤 많이 발견할 수 있었다.

아무튼 이젠 Flash 공부하는데 천국이 된 것임에 틀림없다.

나는 최근에 국내에 출판된 좋은 서적 4권을 소개하고자 한다.


okgosu의 액션스크립트 정석



okgosu의 액션스크립트 정석은 Flex 서적 2편으로 유명하신 옥상훈님의 책이다. 이 책은 ActionScript 3.0의 전반적인 내용을 다루고 있다. 기초문법부터 시작해 개발환경 및 디스플에이 객체를 다루는 방법을 꽤 상세하게 다루고 있다. 또한 Flash Player 10에 추가된 3D API의 기초를 다루고 있기 때문에 그동안 3D에 대해서 잘 몰랐던 사람이 공부하기에 딱 좋은 서적인 것 같다. 책의 내용이 방대하고 수많은 예시가 있어 ActionScript 3.0을 처음하는 사람에게 꽤 도움이 될 것이다.


플래시 ON 디바이스



이철규님이 번역하신 플래시 ON 디바이스는 Flash Platform을 이용해 모바일 애플리케이션을 개발하고자 하는 사람들을 위한 책이다. 사실 모바일 분야는 Flash Lite에 한정되어 있어서 필자처럼 Flex/ActionScript 3.0 기반으로만 했던 사람들에게는 넘어가기 힘든 장벽이였다. 하지만 이책은 Flash 모바일의 역사를 자세하게 소개하고 꽤 고급주제 심도있게 다루고 있어서 Flash를 이용한 모바일 개발에 관심을 가지는 사람에게 추천해줄 수 있는 책이다.  


비주얼 플렉스 UX 디자인

열이아빠님으로 활동중인 이준하님이 번역하신 비주얼 플렉스 UX 디자인은 Flex 3의 시각 컴포넌트를 사용하면서 생길 수 있는 다양한 어려움을 극복하는데 큰 도움을 준다. 레이아웃, 효과, 스타일, 스킨등을 전반적으로 다루면서 좀더 심도있게 컴포넌트를 적용할 수 있는 방법을 잘 설명해주고 있다. Flex를 이용해 풍부한 UX를 사용자들에게 경험시키고자 할때 이책은 큰 도움이 될 것이다.


ActionScript 3.0 Animation


윤도선님이 번역하신 시작하세요! 액션스크립트 3.0 애니메이션은 내가 베타 리더로도 참여했던 책이다. Flash IDE 타임라인을 이용해 애니메이션을 적용하던 수준을 넘어서 코드 기반으로 수학,물리를 이용한 다양한 에니메이션을 주는 기법에 대해서 아주 쉽게 설명하고 있다. 삼각함수, 속도, 가속도, 마찰, 바운드, 모션공식 일반적으로 수학/물리에 어려움을 느끼는 개발자들에게 꽤 유용하다. 또한 3D API를 이용하는 예도 담겨 있어 더욱 다양한 경험을 준다.


정리하며
최근에 발간된 총 4권의 책을 소개했다. 앞서 설명했듯이 3년전에 이런 고귀한 책들이 있었다면 아마도 지금까지 공부했던 시간의 절반이상은 절약할 수 있었을 것이다. 아무튼 좋은 책은 돈에 구애받지 말고 구입해서 자신의 것으로 만들어 가려는 노력이 빠른 배움의 지름길이다.

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


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)



    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)
    인터넷 상에 멋진 Flash 애플리케이션을 보면서 Flash 개발자라면 한번쯤은 어떻게 구현했을까 의문을 품어봤을 것이다. 필자 또한 그러했다. 하지만 남이 만든 소스를 보기 위해 SWF 파일을 디코드 하더라도 분석하기가 여간 까다로운게 아니다. 차라리 그럴바에 관련 내용을 담은 해외 서적을 하나 구입해서 공부하는게 더 빠를지도 모른다. 

    이 문서는 자신의 Flash 제작 실력을 더욱 한층 높이기 위한 시도를 하고자 하는 분들을 위한 것이다. 중,고급 flash 개발 도약을 위해 도움이 되었으면 한다.

    목차 
    • Wonderfl 소개 
    • Wonderfl의 주요기능 
    • Wonderfl 최고의 코드들 집합 Beautifl
    • Flash Builder 4에서 Wonderfl 코드 테스트 환경 만들기
    • Wonderfl 테스트 환경을 한번에 구축하기!
    • 정리하며
    • 참고사이트


    Wonderfl 소개


    Wonderfl(http://wonderfl.net)은 일본의 Kayac회사에서 제작하고 운영하고 있는 웹사이트로 ActionScript 3.0을 직접 인터넷 상에서 제작하고 컴파일할 수 있는 환경을 제공한다. Wonderfl은 Wonderful + flash가 합쳐진 단어로 생각된다. 매우 재미있고 기억하기 쉬운 단어 조합이다.

    이 사이트는 단순히 컴파일하고 결과만 볼 수 있는 단계를 넘어 각종 공개된 라이브러리와 연동이 가능하며, 개발자들간에 코드 공유를 통해 더 좋은 코드로 개선할 수 있는 환경을 제공한다. 이로써 Flash 개발자간에 코드레벨 SNS를 실현했다고 생각한다.
     
    개인적으로 Flash 개발자라면 이 사이트와 매우 가깝게 지내야한다고 생각한다. 실제로 일본의 매우 유명한 Flash 개발자들의 귀중한 노하우가 많이 공개되어 있기도 하다.

    공개된 라이브러리를 활용하기 위한 환경을 구축하는 일을 매우 귀찮고 방법 또한 난해한 경우가 다분하다. 이런 경우 Wonderfl의 검색기능을 통해 필요한 기술을 쉽게 습득해서 그런 문제를 해결할 수도 있다.


    Wonderfl 주요 기능

    필자는 Wonderfl은 Flash 개발자간 코드공유 SNS라고 정의하고 싶다. Wonderfl의 몇가지 기능을 소개하면서 그 이유를 알아보도록 하자.

    1. 코드 작성
    Wonderfl의 가장 기본적인 기능 중에 하나로 코드 작성후 실시간으로 컴파일하고 결과를 볼 수 있는 기능이다. 이 기능은 Flex 컴파일러인 mxmlc을 활용해서 만든 것으로 파악한다. 그렇기 때문에 일반 ActionScript 3.0 코드외에도 MXML 태그로 작성해도 컴파일이 가능하다. 코드에 대한 라이센스도 함께 지정할 수 있고 작성이 완료된 코드는 블로그나 다른 커뮤니티에 퍼갈 수 있도록 되어 있다.


    2. "Fork"기능을 이용한 다른 사람의 코드 수정
    Fork기능은 이미 만들어진 코드를 퍼가서 자기 입맛대로 수정하는 것을 의미한다. wonderfl에 올라온 모든 코드는 이 작업이 가능하다. Fork의 강력함은 아래 소개하는 필자의 2개의 글을 참고하면 좋겠다.

    10만개 입자를 이용한 유체 시뮬레이션 실험
    Flash 속도 개선을 위한 실험 - 10만개 입자 유체 시뮬레이션 연장전!




    3. 좋아하는 코드 찜하기
    Fork 기능은 매우 강력하지만 또한 부담스러울 수 있다. 수정하지도 않을 코드를 Fork하는 것은 왠지 끌리지 않는다. 이럴때 사용할 수 있는 기능이 favorite 기능이다. 멋진 코드를 발견하면 "add to favorites"를 클릭하자. 그러면 다음에 설명할 "나의 페이지"에서 지금까지 favorite로 지정한 코드 리스트를 언제든지 참고할 수 있게 된다.


    4. Following, Follower 기능
    트위터와 같이 Following, Follower 기능이 존재한다. 코드 공유를 넘어 유용한 코드를 생산하는 사람을 Follow로 등록하면 나의 페이지에서 Following 리스트로 확인할 수 있고, 또 그 사람이 만들어내는 코드를 언제든지 쉽게 확인할 수 있게 된다. 그야말로 개발자 코드레벨 SNS 사이트인 것이다.

    5. 나의 페이지
    나의 페이지는 자신이 만든 코드, Fork나 favorite로 지정된 코드, Follow로 지정한 사람들의 동향을 확인할 수 있는 기능을 가지고 있다. 이 페이지는 "wonderfl.net/user/아이디"로 접근할 수 있다. 필자는 http://wonderfl.net/user/jidolstar 이다.



    6. 질문&답변 기능
    코드중에 이해하기 힘든 코드나 설명이 필요한 코드가 있다면 질문할 수 있다. 방법은 Fork를 하고 tag에 question을 달면 된다. 일본어, 영어로 해야하기 때문에 왠지 부담이 되겠지만 활용하면 분명 좋은 기능이다.





    Wonderfl 최고의 코드들 집합 Beautifl
    Beautifl(http://beautifl.net)은 Wonderfl에 올라온 멋진 코드들만 선별해서 종류별로 소개해준 사이트이다. 이 사이트는 Wonderfl에 올라온 코드중에 추천받은 코드만 엄선하여 보기 좋게 카테고리를 만들어 분류해주고 있다. 잘 이용하면 큰 도움이 되는 사이트이다.

    Beautifl.net의 메인화면



    Flash Builder 4에서 Wonderfl 코드 테스트 환경 만들기
    Wonderfl에서 매우 좋은 코드 툴을 제공하고 있지만 약간의 수정외에는 Flash Builder 만큼 자유롭게 개발하기는 힘들다. Wonderfl에서 조금 놀다보면 이제 그곳에 있는 코드를 가져와 내것으로 만들어보고 싶게 된다.  

    Wonderfl에는 Flash Player에서 제공하는 Native 클래스들(flash.* 패키지로 구성된 것들)뿐 아니라 외부 다른 유용한 라이브러리를 함께 활용할 수 있는 환경이기 때문에 그와 비슷한 환경을 만들어주는 것이 필요하게 된다. 필자처럼 Wonderfl에 공개된 코드를 매번 가져다가 테스트 해보는 사람은 필요할때 마다 라이브러리를 가져다 쓰는 것은 매우 귀찮은 작업이다. 그러므로 필요한 라이브러리를 한번에 가져와 언제든지 테스트 해볼 수 있는 환경을 구축할 필요성이 생긴다.

    여기서는 라이브러리를 자신의 워크스페이스에 포함하는 방법과 그 라이브러리를 이용해 테스트를 하는 방법을 간단히 소개한다.

    1. 라이브러리 가져오기
    Wonderfl에서 사용하는 라이브러리 목록은 사이트 우측상단에 Wonderfl > libraries 메뉴로 들어가면 아래와 같은 화면을 통해 사용한 라이브러리의 종류와 버전을 확인할 수 있다.


    각 라이브러리의 좌측에 download.swc를 직접 다운로드 받아 자신의 프로젝트에 포함시킬 수도 있다. 하지만 여러분은 단순히 라이브러리를 이용하는 차원이 아니라 직접 디버깅하며 코드를 분석할 필요가 있을 수 있다. 이러한 경우에는 직접 라이브러리 프로젝트를 만들어 소스를 항상 참조하는 환경을 만들어야 한다. 이러한 환경을 만들때 참고해야할 사항은 다음과 같다.

    첫째. Wonderfl에 공개된 라이브러리는 다양한 배포 경로를 가진다.
    공개된 라이브러리는 다양한 배포 경로를 가진다. 가령, Google Code에 최종 버전을 압축해서 배포하는 사람도 있지만 그냥 SVN에만 올려놓는 사람도 있다. 또 자신의 웹사이트(TweenMax의 경우)에서 직접 배포하는 경우도 있고 Google이 아닌 다른 커뮤니티(betweenAS3, thread의 경우 libspark.org)에서 배포하는 경우도 있다. 어떤 경우는 소스를 공개하지 않고 SWC만 공개하는 경우도 있다.(Alternative3D의 경우) 우리는 다양한 배포 경로에 맞게 알아서 참고해 사용해야한다.

    둘째. Wonderfl에 사용된 라이브러리의 버전을 확인한다.
    공개된 라이브러리는 왠만하면 Wonderfl에서 사용하고 있는 버전을 이용하는 것이 좋다. 그렇지 않으면 Wonderfl 코드를 사용할 때 버전차이로 컴파일 에러가 발생할 수 있다.  


    셋째. 라이브러리간 의존성을 확인한다.
    가령, jiglibflash 라이브러리의 경우 기본적으로 Papervision3D, Sandy3D, Alternative3D, away3d, five3d 라이브러리가 있는 경우에만 컴파일을 할 수 있다. 만약 jiglibflash에서 away3d, five3d를 제외한 다른 라이브러리만 사용하는 경우에는 해당코드를 찾아 컴파일 대상에서 제외해야한다. 아래 화면은 jiglibflash의 속성에서 필요없다고 판단한 클래스를 제외시키는 방법을 보여준다.



    위와 같은 3가지 참고사항에 따라 Flash Builder의 워크스페이스에 라이브러리 프로젝트를 만들면 다음과 같은 Package Explorer의 모습을 기대할 수 있다.



    2. Wonderfl 애플리케이션 제작 
    위 과정을 통해 라이브러리를 자신의 워크스페이스에 받아왔으면 이제 테스트를 위한 애플리케이션 제작 프로젝트를 만들 차례이다. 

    첫째. Flash Builder의 File>New를 통해 ActionScript 3.0 프로젝트를 만든다. 필자는 프로젝트 이름을 wonderfl로 했다.
    둘째. 만들어진 프로젝트에 libs 폴더를 만들고 소스가 공개되지 않은 SWC 파일을 복사해둔다.

    셋째. 라이브러리 경로를 잡아준다. 지금까지 만들어놓은 라이브러리를 전부 사용하기 위해 먼저 "Add Project..."버튼을 눌러 라이브러리를 모두 등록한다. 또 "Add SWC Folder..." 버튼을 눌러 libs를 입력해 libs 폴더에 SWC를 사용하는 라이브러리로 등록한다.

    넷째, .actionScriptProperites의 <excludedEntries>부분을 모두 삭제한다.
    <excludedEntries>는 FlexSDK를 이용해 mxmlc가 컴파일하는 과정에서 필요없는 라이브러리를 빼는 역할을 한다. 하지만 Wonderfl에 공개된 코드들은 FlexSDK의 모든 라이브러리를 거의 100% 사용하므로 이 부분을 제거할 필요가 있는 것이다. 하지만 .actionScriptProperites 파일은 숨김파일이므로 Package Explorer 창에 바로 보이지 않는다. 이 부분에 대해서는 http://blog.jidolstar.com/665 를 참고하고 <excludedEntries>를 제거하길 바란다.

    다섯째, HTML wrapper 파일은 삭제해준다.
    HTML wrapper 파일을 웹브라우저에서 실행하는 것을 가정하에 Flash 애플리케이션이 자동으로 HTML에 Embed처리 되도록 생성해주는 일종의 템플릿 코드이다. wonderfl의 코드들이 단독 Flash Player 에서 제대로 동작하는 경우가 있다. HTML wrapper 설정을 해지함으로써 제대로 동작하지 않는 것을 방지할 수 있는데, 굳이 이 설정을 한 상태로 하고 테스트 하다가 stageWidth, stageHeight관련 문제가 발생하면 http://blog.jidolstar.com/656를 참고하길 바란다.

     
    여섯째, Wonderfl에서 마음에 드는 소스 코드를 복사한다.
    일곱째, default package에 ActionScript 파일을 만들고 복사한 Wonderfl 코드를 붙인다. 이 때 주의할 것은 파일명과 클래스 명은 동일해야한다. 이때 이름규칙을 정해주면 좋다. bitmap실험은 bitmap_로, 게임은 game_으로, papervision3d면 pv3d_로 시작하도록 만들어놓으면 관리하기 용이해진다.

    여덟째, 만들어진 ActionScript 코드를 실행하기 위해 Default Application으로 설정한다. (아래화면 참고)
    이것은 .actionScriptProperties 파일의 <applications>에 등록하는 과정중 하나이다. 직접 .actionScriptProperties를 편집해도 되겠다.

    아홉째. 실행하고자 하는 ActionScript 파일을 열고 Shift+Alt+X,W를 눌러 실행한다.
    열째. 실행코드에 Wonderfl의 출처를 남겨두는 것이 좋다!
    아래처럼 Wonderfl에서 가져온 코드의 출처를 남겨두면 나중에 다시 참고할 수 있게 된다.

    마지막으로, 일본어 주석은 일본어 번역기를 이용한다.
    필자의 경험상 네이버 일본어 번역기가 원본코드를 깨뜨리지 않고 알맞게 번역해주었다. 활용하면 도움이 된다.


    Wonderfl 테스트 환경을 한번에 구축하기!
    지금까지 라이브러리와 개발환경을 구축하는 방법을 소개했다. 하지만 이러한 개발환경을 만든다는 것은 너무 버겁고 귀찮은 작업이다. 필자는 이러한 문제를 한방에 해결할 수 있는 솔루션을 여러분께 선물하고자 한다.



    필자는 Wonderfl 코드의 테스트 환경을 쉽게 만들어주기 위해 Naver 개발자 센터의 오픈프로젝트로 "원더플 개발환경구축 프로젝트"를 만들었다. 이 페이지는 Google Code와 유사한 오픈 프로젝트이다. SVN을 지원해주기 때문에 이 기능을 이용해서 위에서 설명한 라이브러리들을 단 한번의 Checkout으로 개발 환경을 만들 수 있다.

    이것을 수행하기 위해 먼저 다음과 같은 툴이 필요하다.



    위 과정을 다했으면 기본 개발 환경이 구축된 것이다. 다음으로 SVN에서 라이브러리를 다음과정을 통해 모두 checkout 한다. 

     
    • Flash Builder 4를 실행한후 새로운 워크스페이스를 만든다.
    • 메뉴에서 File>Import를 통해 창이 열리면 SVN>Checkout Projects from SVN을 선택한다.
    • Create a new repository location을 선택후 Next 버튼 누른다.
    • https://dev.naver.com/svn/wonderfl/trunk를 입력한다. 아이디는 네이버 아이디, 비밀번호는 anonsvn이다. 아이디, 비밀번호 모두 anonsvn 이다.
    • 열려있는 모든 프로젝트를 전부 선택한 뒤 Finish 버튼을 누른다. 자동으로 SVN에서 프로젝트에 필요한 라이브러리와 자료를 워크스페이스에 포함시키게 된다. 5~10분 소요됨
    위 과정을 모두 완료했다면 Package Explorer에 다음과 같이 라이브러리 프로젝트들이 생성될 것이다.


    또한 init_template도 있을 것이다. 이것은 테스트 프로젝트를 자동으로 만들기 위한 파일을 모아둔 것이다. 이중에 init.xml은 ANT구동 파일로서 그 역할을 담당하게 된다.(참고로 이런 방법론은 찬익님과 Hika님의 글에서 아이디어를 얻었다. 두분께 감사한다.)

    테스트 프로젝트는 다음과 같은 과정으로 만든다. (복잡해 보일지 모르겠지만 한번 해보면 이보다 쉬운 방법은 없다고 생각할 것이다. ^^)


    • 워크스페이스에 ActionScript 3.0 프로젝트 생성한다.
    • init_template내에 init.xml을 생성한 프로젝트의 root에 복사한다.
    • init.xml을 열어 "프로젝트 이름을 넣는다" 안에 프로젝트 명을 넣는다.
    • Ant View에 init.xml을 드래그 해서 붙인다. 3번 항목에 붙인 프로젝트 이름이 ANT View에 표시될 것이다. 
      만약 Ant View가 없다면 Windows>Show View>Other를 선택해 ANT를 찾아 선택하여 열어준다.
      만약 ANT가 없다면 Flash Builder에 ANT 플러그인이 설치되지 않은 것이므로 먼저 플러그인부터 설치해야한다. 참고 : http://blog.flashplatform.kr/213
    • Ant View에 붙은 해당 프로젝트 이름 옆에 (+) 버튼을 눌러 init가 나오면 두번 클릭해 실행한다. 
      이때 Console창에 마지막에 BUILD SUCCESSFUL이 나오면 ANT 실행을 성공한 것이다.
    • 생성한 프로젝트를 선택한 다음 F5를 눌러 새로고침한다.  
      다음과 같은 변화가 일어난다. 
      - Main.as가 만들어지고 기본 Application으로 등록된다.
      - libs 폴더에 SWC 파일들이 복사된다.
      - remote 폴더가 생긴다. 이 폴더는 외부자원를 로드하는 예제를 작성할때 외부자원을 이곳에 놓고 쓰면 되겠다.
      - HTML Wrapper 폴더가 삭제된다. 
      - Wonderfl에서 사용하는 기본 라이브러리가 자동으로 등록된다. 


    아래 화면은 위 과정을 통해 구축된 애플리케이션의 Package Explorer 화면이다. 이제부터 default package에 필요한 수만큼 Wonderfl에서 가져온 actionscript 코드를 테스트 할 수 있게 되었다.


    더불어, 위 과정을 통해 개인적으로 만든 테스트 프로젝트들 모음을 아래 링크를 통해 볼 수 있다.
    http://dev.naver.com/scm/viewvc.php/branches/jidolstar/?root=wonderfl

    SVN의 https://dev.naver.com/svn/wonderfl/branches/jidolstar 경로로 부터 직접 받아볼 수 있으니 참고 바란다.




    정리하며
    개인적으로 Wonderfl은 필자에게 매우 도움이 되는 사이트이다. 한국의 Flash 개발자들도 Wonderfl을 적극적으로 활용했으면 하는 바램을 가지는 마음에서 이 문서를 작성했다. 아무쪼록 도움이 되었길 바란다. 


    참고사이트



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


    Flash 애플리케이션을 제작할때 항상 고민되는 것은 메모리와 속도일 것이다. 이 문서는 이러한 고민을 했던 분들을 위해 본인의 경험을 반영하여 작성한 것이다. 주의할 것은 이 문서에서 다루는 Object Pool은 메모리, 속도 개선을 위한 하나의 방법일 뿐이지 전부는 아니다라는 것이다. Object Pool이 어떻게 당신의 애플리케이션의 속도와 메모리를 개선시켜줄 것인가 전달하는 것이 문서의 목표이다.

    목차

    1. 객체 관리에 대한 질문!
    2. new 연산자는 비싸다!
    3. Object Pool이란?
    4. Object Pool을 도입할 때 고려사항
    5. Object Pool을 사용해보자.
    6. Object Pool과 new 연산자 사용 비교
    7. 메모리 사용의 폭이 급격한 애플리케이션은 좋지 못하다.
    8. 재사용할 수 있는 클래스 제작
    9. 정리하며
    10. 참고글



    1. 객체 관리에 대한 질문!
    제작된 애플리케이션에 필요한 최소한의 메모리에 대해서 생각해 본적이 있는가? 하나의 애플리케이션에 들어가는 최소 자원(resource)은 얼마나 될까? 그 자원은 얼마나 자주 사용하고 버리는 것일까?

    슈팅 게임을 보면 동일한 적군전투기가 많이 나온다. 그 중에 적군전투기1이 있다고 하자. 적군전투기1이 한 화면에 5개가 나왔다. 아군전투기에 의해 죽든 화면에서 사라지든 어쨌든지 언젠간 화면에서 사라지고 쓸모없게 된다. 좀 있다가 또 적군전투기1이 3개가 나온다. 또 반복해서 사라진다. 당신이 이 슈팅 게임을 만든다면 적군전투기1 관리를 어떻게 할 것인가? 즉, 화면에 나타날때 new로 생성하고 사라지면 delete로 메모리에게 해지요청할 것인가? 아니면 어느 특정 영역에 화면에 나타날 전투기1을 미리 5개에서 10개 생성해놓고 필요할 때마다 재사용할 것인가?

    2. new 연산자는 비싸다!
    new는 클래스를 통해 객체를 생성하는 연산자이다. 이는 비교적 비용이 비싼편이다. 비용이 비싸다는 말을 구체적으로 설명하자면 new를 통해 객체를 생성하여 메모리에 올리고 다 사용했다고 판단될때 delete이나 null등을 이용해 객체참조를 제거하여 가비지 컬렉터에 맡기게 되며 결과적으로 가비지 컬렉터는 이 객체를 어느 특정시점에 제거하는 일련의 객체 생성과 삭제까지 동작이 꽤 복잡하여 메모리, CPU연산등의 자원소비가 크다라는 것을 의미한다. 특히나 클래스의 크기가 크고 복잡하다면 그 비용은 더욱 갑절로 들게 된다. new 연산 사용은 이처럼 비싼 비용을 지불해야 하기 때문에 할 수 있다면 최소한으로 사용하도록 하는 것이 속도와 메모리 관리에 도움을 준다.

    앞서 설명한 슈팅 게임을 보자면 적군전투기1은 수시로 보였다가 안보였다가 한다. 이 경우 new, delete를 반복한다면 경우에 따라서 엄청난(?) 비싼 비용을 지불하게 된다.

    다른 예를 들어보겠다. 본인은 얼마전에 스타플(http://starpl.com)이라는 사이트에서 제공하는 타임라인 애플리케이션을 Flash로 개발했다. 타임라인은 사용자의 기록, 앨범등을 시간순으로 보여주게 되며 좌우측으로 이동해서 내 인생의 기록을 보는듯한 느낌을 주도록 만들었다. 이때 화면에 보여지는 사용자의 기록들이 수시로 보여졌다가 사라진다. 이때 사용된 기록을 보여주는 시각객체(DisplayObject)를 new와 delete를 반복해서 생성 및 삭제한다면 너무 비싼 비용을 들이는 것과 같다.

    스타플의 타임라인

    참고글 : 스타플 타임라인 업그레이드 및 앨범 기능 추가 소식

    앞의 2가지 예에서 언급했듯이 자주 보여지고 사라지는 객체를 필요할 때마다 new연산자를 사용하는 것보다는 어느 특정 영역에 미리 생성해놓고 재사용을 반복하는 구조를 도입한다면 메모리와 CPU연산에 있어서 큰 비용절감을 기대할 수 있게 된다.

    3. Object Pool이란?
    Object Pool(객체 풀)은 객체를 미리 만들어놓고 담아놓는 메모리 영역이다. 개발자는 이 Object Pool에 미리 만들어진 객체를 사용하고 다 사용한 뒤에는 다시 반환시킴으로서 재사용(또는 대여)을 하도록 한다. Object Pool을 사용하면 처음 객체를 생성할때와 더 필요한 객체가 있는 경우를 제외하고 new 연산을 최소화 할 수 있다.

    4. Object Pool을 도입할 때 고려사항
    Object Pool은 미리 객체를 생성하고 지속적으로 재사용하기 위해 사용한다. 이때 미리 객체를 생성한다는 것은 초반 애플리케이션 동작 퍼포먼스에 영향을 미칠 수 있다.

    Object Pool을 사용했을때 다음과 같은 장점을 얻을 수 있다.

    1. new 연산자를 자주 사용해야하는 경우에 도입하면 애플리케이션 속도 향상을 기대할 수 있다.
    2. 가비지 컬렉터에 의존하지 않는 메모리 관리를 꾀할 수 있다.

    하지만 일반적으로 10개가 필요한데 미리 100개를 만들어 항상 10% 미만 정도의 재사용률을 보인다면 그것은 메모리 낭비이다. 그러므로 다음과 같은 조건에서 Object Pool을 사용하고 관리하는 것이 좋겠다.

    1. 비교적 큰 용량의 객체를 자주 사용되거나 반환해야하는 경우에 사용한다.
    2. 미리 생성할 객체를 적당하게 정하도록 한다.

    반대로 위 경우가 아니라면 쓸데없이 Object Pool을 사용하지 말자.


    5. Object Pool을 사용해보자.

    폴리고널 lab에서 간단한 Object Pool을 공개했다. 아래 링크에서 다운로드 받을 수 있다.

    Download: ObjectPool_v1.1.zip

    사용 방법은 매우 간단하다. ObjectPool 클래스는 아래 코드처럼 특정 클래스를 할당(allocate)하면 된다.

    var isDynamic:Boolean = true;

    var size:int = 100;

    var pool:ObjectPool = new ObjectPool(isDynamic);

    pool.allocate(MyClass, size);


    isDynamic 플래그는 Object Pool내의 객체가 비어있는가 체크하기 위해 사용한다. 즉, true이면 Pool은 자동적으로 정해진 크기(size)를 넘어서더라도 Pool의 크기를 확장하여 새로운 객체를 줄 수 있으나 false이면 정해진 크기만큼 객체를 이미 준 경우에는 Pool이 비게 되므로 Error를 발생시킨다. 

    크기(size)를 100으로 지정했기 때문에 미리 Object Pool에 100개의 MyClass의 객체를 생성해 두도록 한다.

    이제부터 MyClass는 아래와 같은 방식으로 사용하면 되겠다.

    myObjectArray[i] = new MyClass();

    // 코드 대신 아래를 사용한다.

    myObjectArray[i] = pool.instance;


    다 사용한 MyClass객체는 Object Pool에 반환해줘야 한다. 이때 가비지 컬렉터의 기능을 이용하는게 아니라 재사용(recycle)을 위해서 다음과 같이 코딩하면 되겠다.

    pool.instance = myObjectArray[i];

    사용방법은 이게 전부다.

    원한다면 자신의 애플리케이션에 맞게 이 공개된 ObjectPool을 개선시킬 수 있다. 가령, 100개의 Pool을 만들어놓지만 처음부터 100개를 생성해놓지는 않겠고 필요할 때마다 생성해주는 구조인 게으른(lazy) 생성을 기대할 수 있을 것이다. 또는 DisplayObject의 경우라면 사용한다는 것을 DisplayObject.parent 속성으로 판단할 수 있다. 위 처럼 pool.instance = '다 사용한 객체'와 같은 형태로 반환하는 것보다 자신의 부모가 존재하지 않는다면 재사용할 객체로 판단하도록 만들면 일종의 자동 Object Pool을 만들 수 있다. 자동 Object Pool은 다음 링크를 참고하면 좋겠다.

    자동 풀링(auto pooling)을 구현해보자.



    6. Object Pool과 new 연산자 사용 비교

    Object Pool을 사용해야하는 타당성은 퍼포먼스 실험을 통해 쉽게 알 수 있다.  이러한 점에서 폴리고널 랩에서 제공하는 실험은 매우 유용한 자료이다.

    실험 방법은 아래와 같다. (폴리고널 랩에서는 이 실험을 Window Vista, Flash Player 9.0.124에서 진행했다.) 그리고 Pool크기는 100으로 지정했다.

    첫번째로 아래 코드처럼 k수 만큼 Object Pool로 부터 객체를 get만 한다.

    for (var i:int = 0; i < k; i++) instances[i] = p.instance;


    두번째로 아래 코드처럼 k수 만큼 Object Pool로부터 객체를 get/set 한다.

    for (i = 0; i < k; i++) instances[i] = p.instance;

    for (i = 0; i < k; i++) p.instance = instances[i];


    세번째로 아래 코드처럼 k수 만큼 Object Pool대신 new 연산자를 사용한다.

    for (i = 0; i < k; i++) instances[i] = new MyClass();



    결과는 다음과 같다.


    네이티브 Object 클래스의 경우 Object Pool을 사용하는 것이 new 연산자를 사용한 것보다 5배 정도 빨랐다.


    Object 보다 더 크고 복잡한 flash.geom.Point의 경우는 약간더 빠른 결과를 보인다.


     flash.display.Sprite 객체를 가지고 하면 무려 80배나 속도 개선이 되었다. 이는 복잡하고 큰 클래스에 Object Pool을 도입하면 효과적일 수 있다고 판단할 수 있다.

    이 실험을 통해 적절한 방법으로 Object Pool을 사용하는 것은 애플리케이션의 퍼포먼스 증가에 지대한 영향을 줄 수 있다는 것을 깨달을 수 있다.


    7. 메모리 사용의 폭이 급격한 애플리케이션은 좋지 못하다.
    본인은 어떤 애플리케이션(Flash가 아니더라도)이든지 그 애플리케이션에 필요한 최소한의 메모리는 항상 존재한다고 생각한다. 무조건 메모리 사용을 줄여보겠다고 new, delete를 반복하는 것은 잘못된 것이다. new, delete를 반복하면 오히려 CPU 및 메모리 사용의 반복을 부축이며 애플리케이션의 전체적인 퍼포먼스를 저하시키는 경우가 발생할 수 있다. 실제로 new,delete를 반복하는 구조로 개발한 애플리케이션을 Flash Builder의 프로파일링 기능을 통해 메모리 사용을 살펴보면 큰폭으로 메모리 사용/해지가 일어난다는 것을 확인할 수 있다. 그러므로 몇몇 사람들이 Object Pool과 같은 개념과 같이 퍼포먼스 향상에 도움이 되는 개념을 전혀 사용하지 않고 Flash는 느리고 가비지 컬렉터 동작은 비정상적이다라고 말하는 것은 섣부른 판단이다라고 생각한다. 얼마든지 메모리를 효율적으로 사용하고 속도 개선을 할 수 있음에도 불구하고 잘못된 개발 방식때문에 전체적인 퍼포먼스가 나빠지는 것은 결국 개발자의 잘못인 것이다. 이는 Flash든 어떤 언어든 동일한 생각으로 접근해야 한다.

    Flash Builder의 프로파일링 기능을 이용해 Object Pool과 new 연산자간의 메모리 변화를 확인할 수 있는 간단한 실험을 해보겠다. (프로파일링 기능을 사용하는 방법은 주제에서 벗어나므로 제외하겠다.)

    먼저 Shape객체를 확장해서 크기와 색이 렌덤하게 그려지는 클래스를 만든다.

    //화면에 출력할 Shape

    class RandomShape extends Shape {

            static private var colorPool:Array = [0xff0000,0x00ffff,0x0000ff,0x00ff00,0x0f0f0f,0xf0f0f0,0xffff00,0xf00cf0,0x00fcaa,0xff0c9a];

            public function RandomShape():void {

            }

            public function draw():void {

                   var radius:Number = Math.random() * 40;

                   var color:uint = colorPool[ Math.floor(Math.random()*9) ];

                   graphics.clear();

                   graphics.beginFill(color,1.0);

                   graphics.drawCircle( 0, 0, radius );

                   graphics.endFill();

            }

    }


    위 클래스를 가지고 자동 Pool을 구현한 클래스를 만든다.(참고 : http://www.diebuster.com/?p=1000)

    //Shape 자동 객체 Pool

    class RandomShapeAutoPool {

            private var _pool:Vector.<RandomShape>;

            public function RandomShapeAutoPool() {

                   //적당히 수로 초기화한다.

                   _pool=new Vector.<RandomShape>();

            }

     

            public function getShape():RandomShape {

                   var key:*, result:RandomShape;

                   //먼저 기존의 pool에서 찾아본다.

                   for (key in _pool) {

                           //만약 해당 객체가 null이라면 new 통해 생성한다.

                           if (_pool[key] === null) {

                                  _pool[key]=new RandomShape;

                                  result=_pool[key];

                                  break;

                           //null 아니라면 parent 조사하여 사용가능한지 판단한다.

                           } else if (_pool[key].parent === null) {

                                  result=_pool[key];

                                  break;

                           }

                   }

                   //기존의 pool안에서 쓸만한 찾지 못했다면

                   if (result === null) {

                           result=new RandomShape;

                           _pool[_pool.length]=result;

                   }

                   //인스턴스를 반환한다.

                   return result;

            }

    }


    이제 테스트할 수 있는 호스트코드를 제작해보겠다.

    package {

            import flash.display.*;

            import flash.events.*;

            import flash.text.*;

            import flash.utils.*;

     

            [SWF(backgroundColor="#ffffff", frameRate="60", width="400", height="400")]

            public class ObjectPoolTest extends Sprite {

                   private var pool:RandomShapeAutoPool=new RandomShapeAutoPool;

                   private var poolFlag:Boolean = false;

                   private var textPoolFlag:TextField;

                   private var shapeCanvas:Sprite;

     

                   public function ObjectPoolTest() {

                           addEventListener(Event.ADDED_TO_STAGE, ADDED_TO_STAGE);

                   }

     

                   private function ADDED_TO_STAGE($e:Event):void {

                           removeEventListener(Event.ADDED_TO_STAGE, ADDED_TO_STAGE);

                           stage.scaleMode=StageScaleMode.NO_SCALE;

                           stage.align=StageAlign.TOP_LEFT;

                           //rf)http://blog.jidolstar.com/656

                           if (stage.stageWidth === 0 && stage.stageHeight === 0) {

                                  stage.addEventListener(Event.ENTER_FRAME, function($e:Event):void {

                                                 if (stage.stageWidth > 0 || stage.stageHeight > 0) {

                                                         stage.removeEventListener($e.type, arguments.callee);

                                                         init();

                                                 }

                                          });

                           } else {

                                  init();

                           }

                   }

     

                   private function init():void {

                           //shape 부모객체

                           shapeCanvas = new Sprite;

                           addChild( shapeCanvas );

                           //PoolFlag 상태표시

                           textPoolFlag = new TextField();

                           textPoolFlag.text = "poolFlag=" + poolFlag;

                           addChild(textPoolFlag);

                           //마우스 클릭 영역

                           graphics.beginFill(0x000000,0);

                           graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);

                           graphics.endFill();

                           addEventListener(MouseEvent.CLICK, MOUSE_CLICK);

                           //반복동작     

                           addEventListener(Event.ENTER_FRAME, ENTER_FRAME);

                   }

     

                   private function MOUSE_CLICK($e:MouseEvent):void {

                           //마우스 클릭때마다 poolFlag 상태를 전환

                           poolFlag = !poolFlag;

                           textPoolFlag.text = "poolFlag=" + poolFlag;

                   }

                  

                   private function ENTER_FRAME($e:Event):void {

                           var shape:RandomShape, i:int, numChildren:int;

                           //poolFlag 따라서 new연산자 또는 Object Pool에서 객체 참조

                           shape = poolFlag ? pool.getShape() : new RandomShape;

                           shape.draw();

                           shape.x = Math.random() * stage.stageWidth;

                           shape.y = 0;

                           shapeCanvas.addChild( shape );

                           //계속 아래로 떨어뜨림. 화면에서 벗어나면 removeChild시킴

                           numChildren = shapeCanvas.numChildren;

                           for( i=0; i<numChildren;i++) {

                                  shape = shapeCanvas.getChildAt(i) as RandomShape;

                                  shape.y += 5;

                                  if( shape.y > stage.stageHeight ) {

                                          shapeCanvas.removeChild( shape );

                                          i--;

                                          numChildren--;

                                  }

                           }

                   }

            }

    }


    동작은 매우 단순하다. poolFlag가 true이면 제작한 자동 Object Pool을 사용하겠다는 것이고 false이면 new 연산자를 사용해 RandomShape객체를 생성하겠다는 것이다. poolFlag 전환은 마우스 클릭으로 할 수 있다. 그리고 비가 내리는 것처럼 Shape 객체는 위에서 부터 아래로 떨어지며 맨 아래에 닿으면 removeChild 시킨다.

    테스트 화면


    실행 코드와 결과물은 http://wonderfl.net/code/805dc65d1f7800b7bee5dc3cd72ca21c0a87c2d6 에서도 볼 수 있다.

    이제 Flash Builder의 프로파일링 기능을 이용해 메모리 변화 및 객체 생성빈도를 살펴보자.

    먼저 new 연산자를 사용했을때 메모리 변화를 보자.

    new 연산자로 객체생성시 Memory Usage


    new 연산자를 사용해 객체를 생성하고 필요없을때 removeChild를 하게 되면 가비지 컬렉션 처리가 되기 때문에 일정한 시점에 메모리가 해지되는 것을 반복하는 것을 확인할 수 있다.

    new 연산자로 객체생성시 Live Object


    위 표는 축적된 객체수(Cumulative Instances), 현재 객체수(Instances), 축적된 메모리(Cumulative Memory), 현재 메모리(Memory)를 나타낸다. 변화 무쌍하며 실제로 보여지지 않는 객체도 가비지 컬렉션 처리가 일어날때까지 메모리에 남아 있다. 분명 비효율적으로 보인다.

    반대로 Object Pool을 이용했을때 메모리 변화이다.

    Object Pool로 객체관리시 Memory Usage

    new 연산자를 사용했을때와 비교가 안될 정도로 고요한 느낌이 든다. 거의 일직선의 메모리 사용율을 보인다.

    Object Pool로 객체관리시 Live Object


    축적되는 객체도 81개를 넘지 않는다. 그만큼 객체 생성과 삭제에 민감하지 않게 되고 가비지 컬렉터 도움을 받지 않고 객체관리가 되는 것을 확인할 수 있다.


    8. 재사용할 수 있는 클래스 제작

    Object Pool을 사용시 한가지 고려할 사항은 재사용할 수 있는 클래스를 만들어야 한다는 점이다. 왜냐하면 Object Pool은 단순히 재사용을 위한 공간만 제공하는 것이지 재사용을 하기 위한 어떤 기능을 클래스에게 줄 수 없기 때문이다. 그래서 재사용이 가능한 클래스를 설계하는 것은 하나의 기술적 이슈가 될 수 있다. 

    재사용할 수 있는 클래스를 어떻게 만드는지 간단한 예를 들어보겠다.

    final public class MyData {

            public var type:String;

            public var id:int;

            public var name:String;

    }


    위 클래스는 데이터를 담는 클래스이다. id, name은 실제 사용하는 데이타 값들이고 이 데이타의 종류는 type으로 구분한다. 이 데이타를 사용하는 인터페이스를 제작해보겠다.

    public interface IMyClass {

            function init($data:MyData):void;

            function clear():void;

            function get data():MyData;

    }


    이 인터페이스는 앞으로 만들 MyClass01, MyClass02... 등을 구현하기 위한 것이다. 초기화 하기 위해 init()함수가 있고 인자로 위에서 제작한 MyData 객체를 받는다. 또한 사용할 필요가 없을때 내부 청소를 위해 clear()함수를 추가했다. 게다가 가지고 있는 data를 참고하기 위해 get data()도 만들었다. 이제 이 인터페이스를 구현한 클래스는 아래처럼 만든다.

    final internal class MyClass01 extends Sprite implements IMyClass {

            private var _data:MyData;

            public function MyClass01() {

            }

            public function init($data:Mydata):void {

                   _data = $data;

                   //구현

            }

            public function clear():void {

                   _data = null;

            }

            public function get data():MyData {

                   return _data;

            }

    }

     

    final internal class MyClass02 extends Sprite implements IMyClass {

            private var _data:MyData;

            public function MyClass02() {

            }

            public function init($data:Mydata):void {

                   _data = $data;

                   //구현

            }

            public function clear():void {

                   _data = null;

            }

            public function get data():MyData {

                   return _data;

            }

    }

     

    final internal class MyClass03 extends Sprite implements IMyClass {

            private var _data:MyData;

            public function MyClass03() {

            }

            public function init($data:Mydata):void {

                   _data = $data;

                   //구현

            }

            public function clear():void {

                   _data = null;

            }

            public function get data():MyData {

                   return _data;

            }

    }



    코드가 길어보이지만 3개 클래스 모두 IMyClass를 구현했고 Sprite를 확장했다. 단지 클래스 이름만 다르며 실제 구현부는 알아서 구현하면 된다.

    개발자는 MyClass01, MyClass02, MyClass03은 매우 자주 new 연산자로부터 생성되는 클래스로 판단했고 그래서 Object Pool을 도입하겠다고 결정했다고 하자. 그럼 다음과 같이 시도해 볼 수 있다.

    import de.polygonal.core.ObjectPool;

    import flash.display.DisplayObject;

     

    public class MyPool {

            private static var poolList:Object;

           

            static public function init():void {

                   poolList = {

                           'type01':new ObjectPool(true),

                           'type02':new ObjectPool(true),

                           'type03':new ObjectPool(true),

                   };

                   poolList.type01.allocate(20, MyClass01);

                   poolList.type02.allocate(10, MyClass02);

                   poolList.type03.allocate(100, MyClass03);

            }

           

            static public function getObject($data:MyData):IMyClass {

                   if( $data === null ) {

                           throw new Error('인자값은 null이면 안됩니다.');

                   }

                   try {

                           var object:IMyClass = poolList[$data.type].object;

                           object.init($data);

                   } catch {

                           throw new Error('데이타의 type값이 잘못된 값입니다.');

                   }

                   return object;

            }

           

            static public function returnObject($object:IMyClass):void {

                   if( $object === null ) {

                           throw new Error('인자값은 null이면 안됩니다.');

                   }

                   $object.clear();

                   if( DisplayObject($object).parent ) {

                           DisplayObject($object).parent.removeChild( DisplayObject($object) );

                   }

                   poolList[$object.data.type].object = $object;

            }

    }



    위에서 제작된 MyPool은 static클래스이며 ObjectPool을 이용해 IMyClass 인터페이스를 구현한 클래스를 init()함수에서 적당하게 할당하는 것을 확인할 수 있다. 또한 getObject()를 통해 인자값 data를 참고하여 참조할 Object Pool을 찾아 IMyClass를 구현한 각각의 클래스의 객체를 받아올 수 있으며 returnObject를 통해 다 사용한 객체를 반환한다.

    실제로 실무에서 이런 형태로 개발했고 이는 매우 유용했다. MyPool 클래스를 더 개선해서 더 많은 수 Object Pool을 감당할 수 있도록 확장할 수 있다면 더욱 유용해질 것이라 생각한다.


    9. 정리하며

    Object Pool 개념은 Flash에만 국한되는 유용한 개념이 아니다. 이런 개념들에 대한 노하우를 계속 쌓아간다면 당신의 애플리케이션은 더욱 좋은 작품으로 탈바꿈할 수 있을 것이다.

    Flash Player가 느리고 메모리 관리가 안된다고 생각하지는 말자. Flash Player 태생자체가 그런것을 어찌하겠는가? 제작한 애플리케이션이 느리다면 그것은 결국 개발자가 잘못한 것임을 항상 인지하자. 중요한 것은 여전히 Flash Player는 유용하고 많이 사용되고 있으며 지금도 나날이 발전하여 Cross OS, Cross Browser를 넘어 Cross Device 세계로 뻗어가고 있다는 점이다.


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

    Frame 메타데이터 태그는 Flex 기반에서 만든 Flash Application에 Preloader를 구현하기 위해서 가장 많이 사용합니다. 실제로 Flex를 뜯어보면 [Frame(factoryClass="mx.managers.SystemManager")] 부분이 존재합니다. 이때 이 SystemManager가 바로 Preloader 역할을 합니다. 재미있게도 이렇게 유용한 Frame 메타데이터 태그에 대한 어떠한 공식문서를 저는 본적이 없다는 겁니다. Flex기반이지만 ActionScript 3.0으로만 개발할때 꼭 필요한 요소인데도 말이죠.

    각설하고,
    지금 말하고자 하는 것은 Flash Builder 4, Flex 4 기반에서 ActionScript 3.0 기반 프로젝트를 만들어 Frame 메타데이터 태그를 사용할때 다음과 같은 에러메시지가 난다는 겁니다.(에러 안날 수 있습니다. 하지만 제 프로젝트에서는 나버리네요.)

    1172: mx.skins.spark:BorderSkin 정의를 찾을 수 없습니다.
    1202: 정의되지 않은 속성 BorderSkin(mx.skins.spark 패키지)에 액세스했습니다.


    이쯤되면 엄청 짜증나죠. 

    ActionScript 3.0기반에서는 chart.swc, spark.swc 같은 것은 사용하지 않죠? 여기서 해결 아이디어가 나옵니다. Flash Builder나 Flex Builder에서 프로젝트를 생성하면 .actionScriptProperties 파일이 생성됩니다. 이 안에는 Flex 컴파일러인 mxmlc를 통해 컴파일할때 필요한 설정이 들어가 있지요. 내부를 살펴보면 <excludedEntries>부분이 보입니다. 이 부분은 기본 Flex SDK에 있는 SWC나 SWZ중에 ActionScript 3.0 기반에서 제작시에 필요없는 SWC, SWZ를 포함해서 컴파일하지 않겠다는 것을 명시하는 겁니다. 그런데 Frame 메타데이터 태그를 사용하면 mxmlc컴파일러가 mx.skins.spark:BorderSkin가 들어가는 코드를 만들어주는데 그게 없어서 에러를 던지는 겁니다. 이 클래스는 sparkskin.swc에 포함되어 있는데 이게 <excludeEntries>에 포함되어 있습니다. 그러므로 <excludedEntries>부분을 주석처리를 하거나 삭제하면 sparkskin.swc를 컴파일시 참조할 수 있습니다.  결국 이렇게 하면 깔끔하게 에러가 없어집니다. 명확히 그 이유를 확인하고 싶으시다면 -keep-generated-actionscript 컴파일 옵션을 사용해보세요.

    참고로 Flash Builder에서 .actionScriptProperties 파일은 숨겨져 있습니다. 숨김설정을 푸는 방법을 간단히 소개하자면...

    1. Package Explorer에서 Filters를 선택합니다.


    2. Flex Package Explorer Filters 창이 뜨면 체크되어 있는 모든 항목 풉니다. .actionScriptProperties만 풀어도 됩니다.


    3. 이제 자신의 프로젝트에 .actionScriptProperties 파일을 볼 수 있습니다.


    추가사항 1
    댓글로 hika님께서 Embed 태그문제를 거론해주셨습니다. mxmlc 컴파일러는 Embed 메타데이터 태그를
    사용하면 중간에 mx.core.BitmapAsset, mx.core.MovieClipAsset, mx.core.FontAsset과 같은 클래스를 확장한 클래스를 만들어줍니다. 그렇기 때문에 이들 클래스가 있는 swc를 프로젝트 내에 포함해야겠지요. 정확히 알고 싶다면-keep-generated-actionscript 컴파일 옵션을 이용해 bin-debug에 들어간 generated 폴더를 확인해 보시면 됩니다.

    Flash 애플리케이션을 만드는데 사용되는 SWC는 playerglobal.swc 뿐입니다. 하지만 mxmlc를 사용해 Embed, Frame 메타데이터와 같은 편리한 기능을 사용하려면 그외에 swc를 포함해줘야합니다. Flash Builder에서 ActionScript 3.0 프로젝트를 만들면 playerglobal.swc, textLayout.swc, flex.swc, utilities.swc를 포함되는 것은 다 이런 이유 때문입니다. 나머지 swc는 모두 <excludedEntries>로 제외해버리죠. 하지만 Frame을 썼을때 위에서 언급한 에러가 발목을 잡으므로 <excludedEntries>를 제거함으로써 문제를 해결할 수 있었다는 것을 언급한겁니다. 그때그때 상황에 맞게 .actionScriptProperties를 가지고 조절하시면 된다는 말씀~ ^^; (간단한건데.. 왜이렇게 설명을 장황하게 했는지 저도 모르겠습니다. ㅎㅎ)

    추가사항 2
    CSS파일이 없습니다라는 에러도 <excludedEntries>를 제거하면 없어집니다. -defaults-css-url 컴파일 옵션이나 .actionScriptProperties내에 <!-- --> 빈 주석을 달아 없애는 것 외에 또 하나의 팁!

    참고글
    Flex에서 순수 AS3로 Preloader 구현하기
    AS3로 SystemManager 의 Preloading을 흉내내기
    ActionScript 3.0에서 Preloader 구현 및 Default css file not found 경고 메시지 없애기
    Preloader의 기본 css 파일이 없습니다(Default css file not found) 경고 문제
    프로젝트 템플릿 ant
    Preloaders in AS3

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



    ACC의 오창훈님과 이문국님이 직접 제작한 Adobe Flash Platform 탐구생활 동영상입니다.

    동영상의 좌측 상단을 누르시면 Flash Builder와 Flash Catalyst의 베타버전을 무료로 다운로드 받을 수 있습니다. ^^

    Flash Builder 100배 즐기기



    Flash Catalyst 100배 즐기기


    출처 : http://www.adoberia.co.kr/trial_down/main.html

    stageWidthstageHeight 속성은 Stage에 정의된 속성으로 관련 디스플레이 객체가 디스플레이 리스트에 추가가 되면서 마지막에 Stage에 추가될 때 발생하는 Event.ADD_TO_STAGE 이벤트 발생 시점부터 stage.stageWidth, stage.stageHeight 형태로 참조할 수 있게 된다. 

    이 값은 ActionScript 3.0 프로젝트를 진행할 시에 정해진 Stage의 기본 폭과 높이를 알려주게 된다. 아래 블로그 글을 통해서 이 속성이 어떤 의미를 가지는지 쉽게 파악할 수 있을 것이다.

    AS3.0에서 stage.stageWidth 와 stage.width 의 차이

    아래 코드처럼 작성한다면 이 값들을 쉽게 참고가 가능하다. SWF 메타데이터로 100,100으로 지정했기 때문에 모든 경우가 100,100으로 나와야 하는 것이 정상이다.
    package {
    	import flash.display.Sprite;
    	import flash.display.StageAlign;
    	import flash.display.StageScaleMode;
    	import flash.events.Event;
    	import flash.text.TextField;
    
    	[SWF(width="100",height="100")]
    	public class MainApp extends Sprite {
    		public function MainApp() {
    			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    		}
    
    		private function onAddedToStage($e:Event):void {
    			var textField:TextField;
    			textField = new TextField();
    			textField.text = stage.stageWidth + "," + stage.stageHeight;
    			addChild( textField );
    			
    			stage.align = StageAlign.TOP_LEFT;
    			stage.scaleMode = StageScaleMode.NO_SCALE;
    			
    			textField = new TextField();
    			textField.text = stage.stageWidth + "," + stage.stageHeight;
    			textField.y = 30;
    			addChild( textField );
    		}
    	}
    }
    

    Flash Player 에서 직접 실행시키면 모두 100으로 나온다. 하지만 IE8에서는 처음에는 100이지만 다음에는 0이 나왔다. IE외에 다른 브라우져는 정상적으로 100이 나온다. 재미있는 것은 IE8에서 stage.scaleMode를 지정하면서 이 값이 리셋되어 버린다는 것이다. 이게 Mac의 FF3.0에서도 이런 현상이 있다고 한다.

    내가 만든 Flash 애플리케이션이 모든 운영체제(Cross OS)의 모든 브라우져(Cross Browser)에서 동작하도록 하기 위해서 다음과 같은 처리가 필요하게 되었다.
    package {
    	import flash.display.Sprite;
    	import flash.display.StageAlign;
    	import flash.display.StageScaleMode;
    	import flash.events.Event;
    	import flash.text.TextField;
    
    	[SWF(width="100",height="100")]
    	public class MainApp extends Sprite {
    		public function MainApp() {
    			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    		}
    
    		private function onAddedToStage($e:Event):void {
    			$e.target.removeEventListener( $e.type, arguments.callee );
    			stage.align = StageAlign.TOP_LEFT;
    			stage.scaleMode = StageScaleMode.NO_SCALE;
    			var count:int = 0;
    			if( stage.stageWidth === 0 && stage.stageHeight === 0 ) {
    				stage.addEventListener( Event.ENTER_FRAME, function ($e:Event):void {
    					if( stage.stageWidth > 0 || stage.stageHeight > 0 ) {
    						stage.removeEventListener( $e.type, arguments.callee );
    						_init();
    					}
    					trace( ++count ); //IE8에서 두번 들어왔다.
    				});
    			} else {
    				_init();	
    			}			
    		}
    		
    		protected function _init():void {
    			var textField:TextField;
    			textField = new TextField();
    			textField.text = stage.stageWidth + "," + stage.stageHeight;
    			addChild( textField );
    		}
    	}
    }
    


    Flex의 경우라면 아마도 이런 처리가 다 되어 있기 때문에 신경쓰지 않고 개발하면 될 것이다. 하지만 ActionScript 3.0으로 개발할 때에는 이런 문제를 간과하면 안될 것 같다.

    참고글
    Firefox 3 Mac Flash Bug stageWidth and stageHeight are 0
    stageWidth is zero in IE
    flash.display.Stage 클래스
    flash.display.DisplayObject 클래스


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

    최근에 Flex 4.0 기반으로 Adobe AIR 애플리케이션을 개발하는 프로젝트를 맡았다. 현시점(2010.2.1) Flex 4.0 SDK에 함께 있는 AIR SDK 버전은 한단계 구버전인 1.5.2이기 때문에 가장 최신 버전인 1.5.3을 기존 Flex 4.0 SDK에 덮어씌운 상태에서 개발을 진행했었다. 문제없이 개발할 수 있다.

    그런데 애플리케이션 배포시 문제가 발생했다. AIR 애플리케이션을 설치하면 설치 디렉토리 밑에 META-INF/AIR/publisherid 파일이 존재해야 한다. 그런데 이 파일이 없는 것이다. publisherid는 인증서의 고유 ID를 담고 있다. 이 파일이 없는 상태에서 배포, 업데이트 모두 잘되지만 badge에서 이미 설치된 AIR 애플리케이션이 있는지 여부를 판단할 수 없었다. 사실 배포,업데이트가 잘 되기 때문에 이 상태로 배포해도 문제는 없지만 너무 꺼름칙했다. (AIR의 장점중 하나가 쉽게 설치된 AIR 애플리케이션과 Flash의 연동이 큰 장점 아니던가....)

    이 문제의 원인을 찾고자 별짓을 다하다가 SDK 문제라는 것에 귀결을 내리게 되었다. 문제는 Flex 4.0 SDK에 AIR 1.5.3 SDK를 덮은것에서 비롯되었다. 기존 Flex 4.0 SDK에서 AIR 1.5.2 기반으로 만들어 배포하면 Publisher ID 파일이 있지만 AIR 1.5.3으로 덮어씌우고 배포하면 이 파일이 없었던 것이다. 개발, 컴파일까지 모두 잘되는데 말이다. ㅎㅎ 

    결국 나는 Flex 4.0 기반으로 애플리케이션을 거의 완성한 상태라서 AIR 1.5.2 기반으로 배포할 수 밖에 없게 되었다. 편리하고 빠른 개발을 위해 Flex 4.0를 선택했지만 AIR 버전이 구버전으로 인한 문제점은 정말 예상치 못한 일이었다.

    개발하다 보면 별에 별일이 많은데... 정말 이렇게 크리티컬한 상황까지 보게 되니 정말 웃기기 까지 한다.

    질문?
    Flex 4.0에 AIR 1.5.3을 덮어씌워도 publisher id 파일이 누락되지 않도록 하는 방법은 뭘까요? 혹시 알게되면 댓글이나 트랙백 부탁합니다.

    추가 1
    Flex 3의 최신버전인 Flex 3.5의 경우에는 AIR 1.5.3 SDK가 함께 있는데... Flex 4는 왜???? ㅡㅡ;;

    추가 2
    Flex 4.0 SDK의 beta 2 버전은 4.0.0.10485 이다. 이 버전은 AIR 1.5.2 SDK이다. 하지만 최신 Nightly Builder 버전으로 다운로드 받으면 AIR 1.5.3이 기본이다. 그냥 이걸로 개발해야겠다.

    추가 3
    Adobe AIR 1.5.3 부터는 PublisherID가 기본적으로 제거됩니다. http://blog.jidolstar.com/655

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




    지난 22일에 Adobe Labs에서 Adobe Stratus 2에 대한 소개가 있었습니다.

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

    Stratus는 RTMFP(Real Time Message FlowProtocal)이라 불리우는 통신프로토콜을 이용해 Flash Player 10이 설치된 클라이언트 까지 P2P(Peer to Peer)가 가능하게한 기술입니다. TCP가 아닌 UDP기반으로 동작하고요.

    이번 Stratus 2는 Adobe Flash Player 10.1 beta, Adobe AIR 2 Beta에서 동작하도록 만들어졌습니다. 재미있게도 이번 버전에서는 애플리케이션 수준에서 멀티케스트와 소스 공급자의 로드를 줄여주는 구조를 지원하게 되었습니다. 맨 위의 그림에서 좌측 그림은 기존 Flash Player끼리 통신하기 위해 서버를 항상 거쳐야만 했었습니다. 서버입장에서는 완전 부담이죠. 그런데 중간 그림에서 볼 수 있듯이 Stratus가 나오면서 서버와는 한번의 접속으로 하고 Flash Player끼리 통신이 되었습니다. 이것도 소스 공급자인 Flash Player 입장에서는 로드가 심할 수 있습니다. 이를 Flash Player 단위에서 분산시키도록 한 것이 이번 배포의 핵심인 것 같네요.

    물론 Stratus 2는 아직 베타버전인 Flash Player 10.1과 AIR 2.0에서만 동작하므로 바로 실무에 사용할 수는 없습니다. 그러나 조만간 이 기술을 사용할 수 있게 되겠죠.

    Stratus 1.0에 대한 많은 실험이 국내에도 있었습니다. 저도 조금 테스트 해봤었고요.
    http://blog.jidolstar.com/498 

    다른 분들의 글들입니다.
    플래시 P2P RTMFP에 대해(예제 파일 첨부)
    [Flex] Stratus를 이용한 P2P방식의 Flash간에 1:1 다이다이 오목게임-_-
    Flash로 p2p를 만들어보자 - Stratus 라이브러리
    Flash로 채팅을 구현해보자.


    하지만 방화벽, 공유기를 통해 접근 문제가 해결되었는지는 미지수네요.(테스트 안해봤음)
    이 문제만 해결되면 정말 멋진 애플리케이션이 많이 나올거라 생각됩니다. ^^

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





    Adobe AIR에는 Webkit 브라우져 엔진이 내장되어 있어 IE나 FireFox와 같은 브라우져 기능을 만들 수 있다. 단순히 그런 기능만 제공하는 거라면 흥미가 떨어지겠지만 중요한 점은 로드되는 컨텐츠에 DOM형태로 접근할 수 있어 실제로 Element를 추가하거나 뺄 수 있고 함수까지 재정의도 가능하다. 이러한 작업을 Javascript에 대한 지식이 있다면 쉽게 할 수 있기 때문에 이것을 이용한 다양하고 재미있는 시도를 해볼 수 있다.

    개발환경은 Flash Builder 라고 가정하겠다. 물론 Flash IDE에서 해도 무방하다.


    AIR에서 DOM 접근의 예

    AIR에서 DOM에 접근해보는 재미있는 예를 들어보겠다.

    Javascript에는 alert() 함수가 존재한다. 알다시피 경고창 띄워주는 함수이다. 이 함수를 AIR에서 커스터마이징할 수 있다. 가령, 원래기능인 경고창을 띄워주지 않고 넘겨준 문자열 정보를 Flash Builder의 Console창에 출력하도록 하는 것이다. 이 기능을 구현해보자.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    <title>Test</title>
    <style type="text/css">
    	body { background-color: #aaaaaa; }
    </style>
    </head>
    <body>
    	<input type="button" value="alert( 'Hello' )" onclick="alert('Hello')"> 
    	<input type="button" value="alert( 'I', 'love', 'you' )" onclick="alert('I', 'love', 'you')">
    </body>
    </html>
    

    위 HTML코드는 Button을 누르면 alert() 함수로 경고창을 띄워준다.

    AIR에서 이 HTML 문서를 로드하는데 HTMLLoader 클래스로 할 수 있다. 이 클래스는 Webkit 엔진을 한번 감싸서 AIR개발자가 손쉽게 사용할 수 있도록 한다. HTMLoader의 load()를 이용해 HTML문서를 로드하고 alert를 아래 코드와 같이 재정의 할 수 있다.

    var _html:HTMLLoader = new HTMLLoader();
    _html.addEventListener( Event.HTML_DOM_INITIALIZE, __ON_HTML_DOM_INITIALIZE );
    _html.load( new URLRequest("test.html") );
    stage.addChild(htmlLoader);
    
    private function __ON_HTML_DOM_INITIALIZE($e:Event):void {
    	//javascript의 alert 함수를 actionscript에서 재정의했다.
    	_html.window.alert = function():void {
    		trace( arguments );
    	}			
    }
    

    참고 1. 위 코드는 완벽한 코드는 아니다. 중요부분만 떼어내었다.
    참고 2. _html.window.alert 내에 재정의 된 함수에 arguments가 뭐냐고 물어보신다면... 
    Adobe문서를 참고하자. 이런것이 가능한 것은 Actionscript와 Javascript가 모두 ECMAScript 규약을 따르고 있기 때문이다.

    Event.HTML_DOM_INITIALIZE 이벤트는 HTML DOM이 만들어졌음을 알려주는 이벤트로 이때부터 HTML의 DOM에 접근할 수 있다. 하지만 모든 DOM이 만들어지는 것을 의미하지 않으며 가장 기본적인 구조만 접근이 가능해진다. 완벽한 DOM구조에 접근하려면 Event.COMPLETE 이벤트를 핸들링해야한다. 

    위 ActionScript 코드의 __ON_HTML_DOM_INITIALIZE() 이벤트 핸들러에서 브레이크 포인트를 찍어서  디버깅 모드로 실행해보면 다음과 같은 DOM구조를 볼 수 있다.


    위처럼 내부적으로 정의된 __HTMLScriptObject 객체가 HTMLLoader의 window속성으로 참조되어 있는 것을 확인할 수 있고 alert도 여기에 포함되어 있는 것을 확인할 수 있을 것이다. 저기에 있는 HTML 내부 속성을 모두 개발자가 커스터마이징 할 수 있다는데 매우 흥미를 느끼지 않는가?

    Flash Builder에서 디버깅 모드로 실행해보면 다음 처럼 윈도우가 나오고 test.html이 HTMLLoader에 로드되는 것을 볼 수 있다. 



    위 버튼을 누르면 누를때마다 alert창이 뜨지않고 다음처럼  Flash Builder의 Console창에 출력된다.


    굳이 Event.COMPLETE가 아니라 Event.HTML_DOM_INITIALIZE 이벤트 발생시 alert를 재정의 하는 것은 Event.COMPLETE 이전에 Javascript가 얼마든지 실행될 수 있기 때문이다. 그러므로 어느때든지 alert가 원래기능을 수행하지 못하게 하는데 가장 적절한 시점은 바로 Event.HTML_DOM_INITIALIZE 이벤트가 발생할 때이다.


    사용자 정의 Trace() 만들자.

    AIR의 HTMLLoader를 통해 불려지는 HTML의 디버깅은 쉽지 않다. 왜냐하면 Flash Builder나 FireFox와 같은 디버깅 툴을 사용할 수 없기 때문이다. 이 때문에 복잡하게 만들어진 JavaScript 코드와 HTML이 섞여 있는 경우라면 어떤 경우에 문제가 발생하는지 찾는것 조차 어려워진다. 

    Flash Builder에서는 trace()문을 사용하면 디버깅에 크게 도움이 된다. 비록 브레이크 포인트를 찍으면서 값을 추적할 수 없지만 trace()문 하나만으로도 많은 부분 문제를 해결하는데 도움을 준다.

    그럼 JavaScript내에 강제적으로 trace()함수를 정의하고 개발자가 필요할때 HTML문서상에서 이 함수를 호출하면 AIR 애플리케이션에 trace으로 들어온 인자값을 출력해주면 어떨까? alert()를 커스터마이징 했었다는 것을 충분히 이해했다면 이 부분도 그리 어려운 것은 아니다.

    private function __ON_HTML_DOM_INITIALIZE($e:Event):void {
    	_html.window.trace = function():void {
    		trace( arguments );
    	}			
    }
    

    참고 : _html.window.trace는 로드되는 HTML DOM에 trace()함수를 정의한 것이고 함수내에 trace()는 ActionScript의 trace라는 것을 인식하자.


    이미 보여준 ActionScript 코드에서 alert 재정의 대신 trace를 정의하도록 만들었다. 이미 언급한 HTML문서에서 onclick="alert()" 구문대신 onclick="trace()" 로 바꿔보자.

    디버깅 모드로 실행하면 Flash Builder의 Console창에 버튼을 클릭할때마다 메시지가 보이는 것을 확인할 수 있을 것이다.

    이 방법은 꽤 유용하다. 웹개발자가 만든 HTML문서가 AIR의 Webkit에도 제대로 동작하지 않는 경우도 꽤 발생한다. 이런경우 어느 지점에서 문제가 되는지 알 수 없어 alert()만 의지해서 디버깅하는 것은 웹개발자에게 너무 가혹하다. AIR개발자는 웹개발자를 위해 이 정도의 기능을 최소한으로 제공해서 웹개발자의 어려움을 덜어주어야 한다고 생각한다.


    몇가지 문제점 극복하기

    하지만 아직까지 문제는 있다.

    1. IFrame으로 로드되는 컨텐츠는 AIR에서 정의한 trace를 직접사용할 수 없다.
    이런 점을 극복하기 위해서 iFrame에 로드되는 문서에서는 parent.trace() 처럼 사용하면 어느정도 해결이 된다.

    2. 기존에 사용하는 HTML문서가 이미 웹상에서 서비스되고 있을때 HTML내 실수로 trace()문을 그대로 남겨두게 되는 경우 문제가 발생한다. 왜냐하면 AIR에 로드되는 경우는 강제적으로 trace()함수를 정의하지만 일반 웹브라우져에서 로드되는 경우에는 trace()정의가 없으므로 trace()함수를 호출하면 에러를 던질 것이기 때문이다. 물론 이런 경우가 발생하지 않도록 웹개발자의 꼼꼼한 테스트가 필요하지만 그게 말처럼 쉬울까?

    이처럼 웹상에서 trace()가 쓰여도 웹개발자의 실수로 인해 trace()를 지우지 못해 발생하는 문제를 해결할 방법은 있다. 먼저 아래처럼 common.js 파일을 만든다.
    try {
    	trace; //trace문이 정의되었는가?
    } catch(e) {
    	trace = function() {}; //정의되어 있지 않으면 강제로 만들어준다.
    }
    

    그 다음 서비스되고 있는 모든 HTML에 common.js를 아래처럼 import한다.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    <title>Test</title>
    <script type="text/javascript" src='common.js'></script>
    <style type="text/css">
    	body { background-color: #aaaaaa; }
    </style>
    </head>
    <body>
    	<input type="button" value="trace( 'Hello' )" onclick="trace('Hello')"> 
    	<input type="button" value="trace( 'I', 'love', 'you' )" onclick="trace('I', 'love', 'you')">
    </body>
    </html>
    

    모든 HTML문서에 common.js가 있어야 한다는 점을 기억하자. 중요하게 봐야할 것은 common.js의 동작방식이다. 이 HTML문서를 AIR에서 로드되면 DOM이 생성되자마자 trace를 정의하므로 try..catch문에서 catch()문으로 가지 않는다. 하지만 일반 웹브라우져에서 로드하면 trace가 생성되지 않아 catch()문이 실행되게 된다. 그러니 웹개발자가 trace()문을 실수로 지우지 않아도 AIR에 로드되든 일반 웹브라우져에 로드되든 문제가 발생하지 않는다.


    실용적으로 만들어보자. 

    AIR에 로드되는 HTML문서에서 trace()문을 이용하는 방법을 알 수 있게 되었다. 이를 좀더 실용적으로 테스트 해볼 수 있도록 만들기 위해서는 trace()의 결과가 console창에만 나오는 것이 아니라 별도의 창을 띄워서 언제든지 trace()내용을 확인할 수 있도록 하는 것이 좋다. 이것은 AIR 개발자와 웹페이지 개발자가 다른 경우 AIR개발자가 웹페이지 개발자에게 해줄 수 있는 최소한의 배려이다.

    여기서는 최소한의 기능만 보여주려고 한다. 아래처럼 창 2개가 있다. 좌측창은 HTML를 로드한 지금까지 예제이고, 우측창은 trace문의 결과물을 보여주는 창이다.


    이것을 구현하기 위해 ActionScript 3.0으로 만들어보자. Flash Builder에서 개발한다면 Flex 프로젝트를 생성하되 Application type은 Desktop(AIR)로 하고 Main Application file 이름을 .mxml이 아닌 .as로 끝나는 확장자를 가지도록 만들어야한다. 나는 Main.as로 만들었다.

    Main.as
    package {
    	import flash.display.NativeWindow;
    	import flash.display.Sprite;
    	import flash.events.Event;
    
    	/**
    	 * 메인 애플리케이션 
    	 * @author jidolstar
    	 */
    	public class Main extends Sprite {
    		public function Main() {
    			//브라우져 띄우기 
    			var window:BrowserWindow = new BrowserWindow();
    			window.width = stage.stageWidth;
    			window.height = stage.stageHeight;
    			window.load( "test.html" );
    			window.activate();
    		}
    	}
    }
    


    BrowserWindow.as


    package {
    	import flash.display.NativeWindow;
    	import flash.desktop.NativeApplication;	
    	import flash.display.NativeWindowInitOptions;
    	import flash.display.NativeWindowType;
    	import flash.display.StageAlign;
    	import flash.display.StageScaleMode;
    	import flash.events.Event;
    	import flash.html.HTMLLoader;
    	import flash.net.URLRequest;
    
    	/**
    	 * Trace 테스트용 브라우저 윈도우
    	 * @author jidolstar
    	 */
    	public class BrowserWindow extends NativeWindow {
    		private var _html:HTMLLoader;
    		private var _trace:TraceWindow;
    
    		/**
    		 * 생성자 
    		 */
    		public function BrowserWindow() {
    			stage.align = StageAlign.TOP_LEFT;
    			stage.scaleMode = StageScaleMode.NO_SCALE;
    			
    			//윈도우 옵션
    			var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
    			initOptions.type = NativeWindowType.NORMAL;
    			super(initOptions);
    			
    			//HTML 로더 
    			_html = new HTMLLoader();
    			_html.width = stage.stageWidth;
    			_html.height = stage.stageHeight;
    			_html.addEventListener(Event.HTML_DOM_INITIALIZE, function ($e:Event):void {
    				//DOM에 trace 함수를 정의한다. 
    				_html.window.trace = function():void {
    					var str:String = "";
    					for( var i:int = 0; i < arguments.length; i++ ) {
    						str += arguments[i] + " ";
    					}
    					//결과물을 창에 출력해준다.
    					_trace.addString( str );
    				}
    			});
    			stage.addChild(_html);
    			
    			//Trace 결과물을 보여주는 창 
    			_trace = new TraceWindow();
    			_trace.width = 300;
    			_trace.height = 300;
    			_trace.activate();
    			
    			//창이 닫힐때 모든 윈도우를 닫는다.
    			addEventListener(Event.CLOSING, function($e:Event):void {
    				var openedWindows:Array = NativeApplication.nativeApplication.openedWindows;
    				for each( var window:NativeWindow in openedWindows ) {
    					window.close();
    				}
    			} );	
    			
    			title = "browser";
    		}
    		
    		public function load($url:String):void {
    			_html.load( new URLRequest( $url ) );
    		}
    		
    	}
    }
    


    TraceWindow.as

    package {
    	import flash.display.NativeWindow;
    	import flash.display.NativeWindowInitOptions;
    	import flash.display.NativeWindowType;	
    	import flash.text.TextField;
    	import flash.display.StageAlign;
    	import flash.display.StageScaleMode;
    	
    	/**
    	 * Trace를 출력해주는 윈도우
    	 * @author jidolstar
    	 */
    	public class TraceWindow extends NativeWindow {
    		private var _textField:TextField;
    		private var _traceText:String = "";
    
    		public function TraceWindow() {
    			stage.align = StageAlign.TOP_LEFT;
    			stage.scaleMode = StageScaleMode.NO_SCALE;
    
    			var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
    			initOptions.type = NativeWindowType.NORMAL;
    			super(initOptions);
    
    			_textField = new TextField();
    			_textField.width = stage.stageWidth;
    			_textField.height = stage.stageHeight;
    			stage.addChild(_textField);
    			
    			title = "trace window";
    		}
    
    		public function addString($value:String):void {
    			_textField.appendText($value + "\n");
    		}
    	}
    }
    


    물론 이것은 ActionScript 3.0 코드이고 이미 언급한 HTML(test.html) 및 common.js 도 함께 소스에 포함해야한다.

    아래는 위 코드들을 압축한 소스이다.


    예제는 단순하지만 더 응용해서 컴포넌트화 시키면 좋을 것이다.


    정리하며
    Adobe AIR의 장점은 크로스 OS, 기존 Flash/Flex 개발자의 접근 향상 정도만 있는 것은 아니다. Adobe는 웹과 매우 친하면서도 데스크탑 영역으로까지 확장했다. 여기서 웹과 매우 친하다는 말에 주목할 필요있다. 웹브라우져에 올라온 Flash와 AIR가 별도의 설치 없이 서로 통신할 수 있고 웹브라우져에서 AIR를 실행할 수도 있다. 또한 오늘 언급한 것처럼 dom에 대한 접근이 매우 쉬운 것도 있다. 아직까지 AIR가 성능 및 기술적 한계가 분명 존재하지만 버전업을 거듭하면서 더욱 나아지고 있다. AIR의 장점을 명확히 인식한다면 AIR만의 매력을 느낄 수 있지 않을까 생각한다.

    아래 링크로부터 AIR에 관련된 정보를 얻을 수 있다.

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


    제가 ACP(Adobe Community Professional)가 되었습니다.
    이로써 Adobe 공인 전문가 그룹에 등록 되었습니다.

    http://lizfrederick.blogspot.com/2010/01/new-acps-for-2010.html

    국적과 상관없이 약 300명 정도가 등록되었습니다. 분류로는 Acrobat, AfterEffect, AIR, Authorware, Captivate, ColdFusion, Creative Suite, Dreamweaver, Fireworks, Flash Media Server, Flash Mobile, Flash Platform, Flash Platform(RIA), Flash Professional, Flex, FrameMaker, Illustrator, InDesign, InDesign Server, Lightroom, LiveCycle ES, Photoshop, PhotoShop Elements, Premiere Pro, Production Premium, RoboHelp, Spry, Visual Communicator등이 있고 저는 Flash Platform(RIA) 분야로 등록되었네요.

    저는 모르고 있었는데 우야꼬가 전화로 축하해주더군요. ^^;
    메일을 보니까 한국 어도비로부터 축하 메일이 왔더군요.
    저 외에 한국에서 ACP로 선정된 분들입니다.

    강성규(땡굴이)
    이정웅(블루메탈)
    이준하(열이아빠)
    배준균

    ACP 후보 추천시 저에 대해서 작성된 내용입니다. (물론 영어로 번역되었겠죠...)

    Flash Platform 기술에 대해 큰 관심을 가지고 있으며 그 기술에 대해 한국어 블로그(http://blog.jidolstar.com)를 운영하고 있다. 한국 어도비 RIA 홈페이지에 분기별로 기술문서를 기고하고 있다. 또한 ACC로써 Flash Platform 기술 전도사로 활동하고 있다(http://adoberia.co.kr/acc/acc.html). 한국어 Flex문서가 없다. 그래서 그는 flexdocs.kr 이라는 사이트를 구축했다. 그는 회사에서 Flash 개발팀장으로 근무하고 있으며 한국 SNS인 Starpl에 Flash 기술을 적용하는데 일조했다(http://starpl.com).

    여러가지로 부족한데 선정해준 Adobe사에 감사하며 이름에 걸맞게 열심히 활동하고 실력도 쌓아가도록 노력하겠습니다.

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

    LCDS, BlazeDS, ZendAMF등을 이용해 AMF(ActionScript Message Format)으로 데이터를 주고받는 형태는 이미 많은 예제들과 문서들이 있다. AMF는 데이터 통신을 위한 일종의 약속된 규약이고 이 데이터를 주고 받고 하는 과정에서 서로의 언어에 맞게 직렬화(Serialization)하는 것은 각 언어에서 지원해주는 라이브러리를 사용하면 된다. ActionScript 3.0은 기본 API에서 지원해준다. 자바의 경우는 BlazeDS나 LCDS를 사용하면 된다. PHP의 경우에는 ZendAMF를 사용하면 된다. 이들을 이용하면 가령, 자바와 java.lang.Interger는 ActionScript의 int나 uint로... java.lang.Double은 ActionScript의 Number형과 직렬화된다. 이는 일종의 기본적으로 지원되는 직렬화이다.

    다음은 BlazeDS에서 기본적으로 지원되는 직렬화이다.
    Serializing between ActionScript and Java

    하지만 이런 기본 직렬화과정을 사용하지 않고 직렬화 자체를 커스터마이징(customizing)할 수 있다. 가령 클라이언트(예,Flash 애플리케이션)에서는 아이디, 이름, 속성, 가격의 정보가 중요하지만 서버(예,자바)에서는 재고(inventory)가 중요한 경우가 있다. 이런 경우에는 Flex와 Java쪽의 직렬화하는 클래스를 다음과 같이 디자인 할 수 있겠다.

    // Product.as
    package samples.externalizable {
    
    import flash.utils.IExternalizable;
    import flash.utils.IDataInput;
    import flash.utils.IDataOutput;
    
    [RemoteClass(alias="samples.externalizable.Product")]
    public class Product implements IExternalizable {
        public function Product(name:String=null) {
            this.name = name;
        }
    
        public var id:int;
        public var name:String;
        public var properties:Object;
        public var price:Number;
    
        public function readExternal(input:IDataInput):void {
            name = input.readObject() as String;
            properties = input.readObject();
            price = input.readFloat();
        }
    
        public function writeExternal(output:IDataOutput):void {
            output.writeObject(name);
            output.writeObject(properties);
            output.writeFloat(price);
        }
    }
    }
    


    // Product.java
    package samples.externalizable;
    
    import java.io.Externalizable;
    import java.io.IOException;
    import java.io.ObjectInput;
    import java.io.ObjectOutput;
    import java.util.Map;
    
    /**
    * This Externalizable class requires that clients sending and 
    * receiving instances of this type adhere to the data format
    * required for serialization.
    */
    public class Product implements Externalizable {
        private String inventoryId;
        public String name;
        public Map properties;
        public float price;
    
        public Product()
        {
        }
    
            /**
            * Local identity used to track third party inventory. This property is
            * not sent to the client because it is server-specific.
            * The identity must start with an 'X'.
            */
            public String getInventoryId() {
                return inventoryId;
            }
    
            public void setInventoryId(String inventoryId) {
                if (inventoryId != null && inventoryId.startsWith("X"))
                {
                    this.inventoryId = inventoryId;
                }
                else
                {
                    throw new IllegalArgumentException("3rd party product
                    inventory identities must start with 'X'");
                }
            }
    
            /**
             * Deserializes the client state of an instance of ThirdPartyProxy
             * by reading in String for the name, a Map of properties
             * for the description, and 
             * a floating point integer (single precision) for the price. 
             */
            public void readExternal(ObjectInput in) throws IOException,
                ClassNotFoundException {
                // Read in the server properties from the client representation.
                name = (String)in.readObject();
                properties = (Map)in.readObject();
                price = in.readFloat();
                setInventoryId(lookupInventoryId(name, price));
            }
            /**
             * Serializes the server state of an instance of ThirdPartyProxy
             * by sending a String for the name, a Map of properties
             * String for the description, and a floating point
             * integer (single precision) for the price. Notice that the inventory 
             * identifier is not sent to external clients.
             */
            public void writeExternal(ObjectOutput out) throws IOException {
                // Write out the client properties from the server representation
                out.writeObject(name);
                out.writeObject(properties);
                out.writeFloat(price);
            }
            
            private static String lookupInventoryId(String name, float price) {
                String inventoryId = "X" + name + Math.rint(price);
                return inventoryId;
            }
    }
    

    위 코드는 ActionScript의 flash.utils.IExternalizable 인터페이스와 Java의 java.io.Externalizable 인터페이스를 이용해 기본직렬화를 무시하고 이들 인터페이스에 정의된 readExternal와 writeExternal 메소드를 호출하여 직렬화 자체를 커스터마이징 할 수 있다는 것을 의미한다. Externalizable 인터페이스를 구현한 클래스에 정의된 메소드가 기본 직렬화보다 우선순위가 높다는 것을 기억하면 되겠다.

    Flex의 ArrayCollection을 다시 한번 보기 바란다. 이 클래스는 flash.utils.IExternalizable를 구현했다.
    mx.collections.ArrayCollection

    꼭 이런 경우만은 아니다. 쓸데없는 데이터의 크기를 줄이기 위한 방법도 해당한다. 예를들어 ActionScript 코드를 보면 다음과 같다.


    class Example implements IExternalizable {
      
          public var one:Boolean;
          public var two:Boolean;
          public var three:Boolean;
          public var four:Boolean;
          public var five:Boolean;
          public var six:Boolean;
          public var seven:Boolean;
          public var eight:Boolean;
           public function writeExternal(output:IDataOutput) {
               var flag:int = 0;
               if (one) flag |= 1;
              if (two) flag |= 2;
              if (three) flag |= 4;
              if (four) flag |= 8;
              if (five) flag |= 16;
              if (six) flag |= 32;
              if (seven) flag |= 64;
              if (eight) flag |= 128;
               output.writeByte(flag);
          }
           public function readExternal(input:IDataInput) {
               var flag:int = input.readByte();
               one = (flag & 1) != 0;
              two = (flag & 2) != 0;
              three = (flag & 4) != 0;
              four = (flag & 8) != 0;
              five = (flag & 16) != 0;
              six = (flag & 32) != 0;
              seven = (flag & 64) != 0;
              eight = (flag & 128) != 0;
          }
     }
    

    데이터 통신을 위해 쓸데없이 Boolean객체를 주고 받을 필요없다. 위 코드처럼 직렬화를 커스터마이징한다면 송수신 데이터 자체의 크기도 줄일 수 있다. 이는 매우 유용하다.


    참고글
    flash.utils.IExternalizable
    커스텀 직렬화의 사용
    ActionScript 3.0 데이터 유형 및 직렬화(serialization)
    Serializing between ActionScript and Java
    AMF 3 스팩
    AS3 BitmapData AMF solution using IExternalizable
    Flex and PHP: remoting with Zend AMF

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

    로컬자원을 서버에 전송하기 위해 우리는 FileReference Class를 사용하면 된다.
    FileReference로 파일을 서버에 전송하는 방법은 많이 공개가 되어 있다.
    알다시피 FileReference의 browse()함수를 호출한 뒤, select 이벤트가 발생시 upload() 함수를 이용하여 선택한 로컬자원을 서버로 보낸다.

    서버에서는 아주 단순하게 서버 임시 저장소에 저장된 파일을 원하는 곳에 복사하기만 하면 된다.
    php의 경우 move_uploaded_file() 메소드를 사용하면 되겠다.

    그럼 Flex 시행도중 캡쳐한 화면을 저장하는 경우에도 위와 같은 방법으로 저장이 가능할까?

    답은 "된다"


    나는 예전에 ImageSnapshot 클래스를 이용해 base64로 변환해서 서버로 전송한 뒤에 base64를 decode하여 저장하는 방법에 대해서 언급한적이 있다. (http://blog.jidolstar.com/301 참고)
    이 방법의 단점은 이미지가 큰 경우 base64로 encode, decode 하는 과정에서 서버성능 및 클라이언트 성능에 따라 속도 및 부하에 영향을 준다. 그러므로 이 방법으로는 PNGEncoder 및 JPGEncoder로 PNG, JPG 파일 형식에 맞는 데이타를 만들었다고 해도, FileReference와 같이 데이타를 전송을 할 수 없었다.

    하지만 Google을 열심히 돌아다녔다니 이 문제점에 대한 해결의 실마리를 찾을 수 있었다.
    (역시 Google!!!)

    간단히 방법을 요약하자면
    화면을 BitmapData로 만들어 PNGEncoder나 JPGEncoder를 이용하여 encode한 다음, 그 결과값인 byteArray값을 서버에 전송한다. 전송된 데이타는 FileReference에서 upload()을 이용해 보낸 파일을 저장할때와 동일하게 저장하면 되겠다.

    1. BitmapData로 캡쳐해라.

    아래 target은 캡쳐할 UIComponent와 같은 DisplayObject 객체이다.

    BitmapData로 캡쳐
    var bitmapData:BitmapData = new BitmapData(target.width, target.height, true, 0xFFFFFF);
    var drawingRectangle:Rectanglenew Rectangle(0, 0, target.width, target.height);
    bitmapData.draw(target, new Matrix(), null, null, drawingRectangle, false);

    단, BitmapData를 이용해서 화면을 캡쳐할 대상이 외부 동영상이나 사진같은 거라면 crossdomain.xml 에 대한 check가 있어야 한다. 컨텐츠 로드시 checkPolicyFile 속성을  true로 설정할 필요가 있겠다.
    그리고 2880px 이상의 크기는 BitmapData로 만들 수 없다.



    2. JPG나 PNG로 Encode 하여 ByteArray를 얻는다.


    Flex 3 SDK에는 mx.graphics.codec 패키지에 JPGEncoder와 PNGEncoder가 있다. 인터넷을 뒤져보면 GIFEncoder등도 있을것이다. Flex 2 환경에서 작업한다면 Google code에 Adobe AS3 Corelib에 이들이 제공된다. 만약 JPGEncoder를 사용한다면 다음과 같이 하면 되겠다.

    JPGEncoder를 이용하여  JPG  ByteArray값 만들기
    import mx.graphics.codec.JPGEncoder;

    var byteArray:ByteArray = new JPGEncoder().encode(bitmapData);


    Flex 3 SDK는 이러한 Encoder가 IImageEncoder로 구현되었다. 필요하다면 언제 어디서나 Encoder를 바꿔야 하는 경우 IImageEncoder를 사용하는 것이 좋을 수 있겠다.
    가령 아래 예제처럼 말이다.

    다양한 Image Encoder 사용하기
    import mx.graphics.codec.*;

    var imageType:String = "jpg";
    var imageEncoder:IImageEncoder;
    if( imageType.toUpperCase() == "JPG" ) imageEncoder= new JPEGEncoder();
    else if( imageType.toUpperCase() == "PNG" ) imageEncoder= new PNGEncoder();
    var byteArray:ByteArray = imageEncoder.encode(bitmapData);



     

    3. 서버에 ByteArray를 전송한다.

    데이타를 전송할때는 FileReference를 사용하지 않는다.
    바로 URLLoader와 URLRequest만 이용해서 전송이 가능하다. 참고 데이타는 POST방식으로 URLVariable을 이용해서 보낼 수 있다.

    Flex/AIR 데이터 전송 방법
    //assumed variable declarations
    //var byteArray:ByteArray = 2번째 단계에서 JPG 데이타를 얻었다.
    //var fileName:String = "desiredfilename.jpg" //저장할 파일 이름이다. 아무거나 적자!
    //var uploadPath:String = "저장할 때 사용되는 서버측 script 경로"
    //var parameters:URLVariables = 이미지 이외에 다른 보낼 다른 데이타가 있다면 이것을 이용한다.
    //function onComplete(eventObj:Event):void {  성공적으로 데이타를 전송했을때 핸들러 함수 정의
    //function onError(eventObj:ErrorEvent):void {  이미지 전송을 실패했을때 핸들러 함수 정의

    var urlRequest:URLRequest = new URLRequest();
    urlRequest.url = uploadPath;
    //urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
    urlRequest.method = URLRequestMethod.POST;
    urlRequest.data = UploadPostHelper.getPostData(file, byteArray, parameters);
    urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );
    urlRequest.requestHeaders.push( new URLRequestHeader( 'Content-Type', 'multipart/form-data; boundary=' +UploadPostHelper.getBoundary()) );

    var urlLoader:URLLoader = new URLLoader();
    urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
    urlLoader.addEventListener(Event.COMPLETE, onComplete);
    urlLoader.addEventListener(IOErrorEvent.IO_ERROR, onError);
    urlLoader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onError);
    urlLoader.load(urlRequest);


    위에 진한 부분에 대한 클래스는 아래에 정의되어 있다. 당신은 이 클래스가 어떻게 구성되었는가 열심히 공부할 필요가 없다.(원한다면 해도 된다. 말리지 않음 ^^)

    UploadPostHelper Class (Language : java)
    package {

        import flash.events.*;
        import flash.net.*;
        import flash.utils.ByteArray;
        import flash.utils.Endian;

        /**
         * Take a fileName, byteArray, and parameters object as input and return ByteArray post data suitable for a UrlRequest as output
         *
         * @see http://marstonstudio.com/?p=36
         * @see http://www.w3.org/TR/html4/interact/forms.html
         * @see http://www.jooce.com/blog/?p=143
         * @see http://www.jooce.com/blog/wp%2Dcontent/uploads/2007/06/uploadFile.txt
         * @see http://blog.je2050.de/2006/05/01/save-bytearray-to-file-with-php/
         *
         * @author Jonathan Marston
         * @version 2007.08.19
         *
         * This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 3.0 License.
         * @see http://creativecommons.org/licenses/by-nc-sa/3.0/
         *
         */

        public class UploadPostHelper {

            /**
             * Boundary used to break up different parts of the http POST body
             */

            private static var _boundary:String = "";

            /**
             * Get the boundary for the post.
             * Must be passed as part of the contentType of the UrlRequest
             */

            public static function getBoundary():String {

                if(_boundary.length == 0) {
                    for (var i:int = 0; i < 0x20; i++ ) {
                        _boundary += String.fromCharCode( int( 97 + Math.random() * 25 ) );
                    }
                }

                return _boundary;
            }

            /**
             * Create post data to send in a UrlRequest
             */

            public static function getPostData(fileName:String, byteArray:ByteArray, parameters:Object = null):ByteArray {

                var i: int;
                var bytes:String;

                var postData:ByteArray = new ByteArray();
                postData.endian = Endian.BIG_ENDIAN;

                //add Filename to parameters
                if(parameters == null) {
                    parameters = new Object();
                }
                parameters.Filename = fileName;

                //add parameters to postData
                for(var name:String in parameters) {
                    postData = BOUNDARY(postData);
                    postData = LINEBREAK(postData);
                    bytes = 'Content-Disposition: form-data; name="' + name + '"';
                    for ( i = 0; i < bytes.length; i++ ) {
                        postData.writeByte( bytes.charCodeAt(i) );
                    }
                    postData = LINEBREAK(postData);
                    postData = LINEBREAK(postData);
                    postData.writeUTFBytes(parameters[name]);
                    postData = LINEBREAK(postData);
                }

                //add Filedata to postData
                postData = BOUNDARY(postData);
                postData = LINEBREAK(postData);
                bytes = 'Content-Disposition: form-data; name="Filedata"; filename="';
                for ( i = 0; i < bytes.length; i++ ) {
                    postData.writeByte( bytes.charCodeAt(i) );
                }
                postData.writeUTFBytes(fileName);
                postData = QUOTATIONMARK(postData);
                postData = LINEBREAK(postData);
                bytes = 'Content-Type: application/octet-stream';
                for ( i = 0; i < bytes.length; i++ ) {
                    postData.writeByte( bytes.charCodeAt(i) );
                }
                postData = LINEBREAK(postData);
                postData = LINEBREAK(postData);
                postData.writeBytes(byteArray, 0, byteArray.length);
                postData = LINEBREAK(postData);

                //add upload filed to postData
                postData = LINEBREAK(postData);
                postData = BOUNDARY(postData);
                postData = LINEBREAK(postData);
                bytes = 'Content-Disposition: form-data; name="Upload"';
                for ( i = 0; i < bytes.length; i++ ) {
                    postData.writeByte( bytes.charCodeAt(i) );
                }
                postData = LINEBREAK(postData);
                postData = LINEBREAK(postData);
                bytes = 'Submit Query';
                for ( i = 0; i < bytes.length; i++ ) {
                    postData.writeByte( bytes.charCodeAt(i) );
                }
                postData = LINEBREAK(postData);

                //closing boundary
                postData = BOUNDARY(postData);
                postData = DOUBLEDASH(postData);

                return postData;
            }

            /**
             * Add a boundary to the PostData with leading doubledash
             */

            private static function BOUNDARY(p:ByteArray):ByteArray {
                var l:int = UploadPostHelper.getBoundary().length;

                p = DOUBLEDASH(p);
                for (var i:int = 0; i < l; i++ ) {
                    p.writeByte( _boundary.charCodeAt( i ) );
                }
                return p;
            }

            /**
             * Add one linebreak
             */

            private static function LINEBREAK(p:ByteArray):ByteArray {
                p.writeShort(0x0d0a);
                return p;
            }

            /**
             * Add quotation mark
             */

            private static function QUOTATIONMARK(p:ByteArray):ByteArray {
                p.writeByte(0x22);
                return p;
            }

            /**
             * Add Double Dash
             */

            private static function DOUBLEDASH(p:ByteArray):ByteArray {
                p.writeShort(0x2d2d);
                return p;
            }

        }
    }



    한가지 중요한 정보를 언급하겠다.
    URLLoader를 이용해 서버에 전송할때, 프로그램이 같은 도메인상에 있는 경우에는 보안문제가 없다. 하지만 다른 도메인에 위치한 서버로 이미지를 전송할때는 반드시 crossdomain.xml을 check해야한다.

    1. Security.loadPolicyFile(http://다른도메인/crossdomain.xml); 를 URLLoader의 load()함수를 호출하기 전에 호출한다.

    2. Flash Player 9.0.124.0 버전부터는 HTTP Header 보안취약점을 해결하기 위해서 cross domain 정책이 변경되었는데.... 서버측에 있는 crossdomain.xml에 allow-http-request-headers-from가 추가되어져야 한다. 이것은 HTTP 헤더 전송을 허용할지 결정해준다.

    crossdomain.xml (Language : xml)
    <?xml version="1.0"?>
    <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
    <cross-domain-policy>
          <allow-access-from domain="*.jidolstar.com" />
          <allow-http-request-headers-from domain="*.jidolstar.com" headers="*"/>
    </cross-domain-policy>

    위 처럼 서버측 crossdomain.xml에 allow-http-request-headers-from을 추가함으로 다른 도메인간에 HTTP 헤더 전송을 허용할 수 있다.

    서로 다른 도메인에 SWF와 서버측 코드가 배치되어 있다면 반드시 이 사실을 숙지하길 바란다.


    3. Flash Player 10에서는 사용자 인터렉션이 반드시 필요하다.

    다음글을 참고하세요.

    http://blog.jidolstar.com/411 


     

    4. 서버측 코드 작성

    만약 위 3번 코드에서 var parameters:URLVariables를 아래와 같이 작성했다고 하자.

    URLVariables 설정 (Language : java)
    var parameters:URLVariables = new URLVariables();
    parameters.method = "id";
    parameters.userId = "2000321";


    그럼 PHP 코드로 아래와 같은 방법처럼 만들면 되겠다.(테스트는 안해봤음)

    PHP 코드 예제 (Language : php)
    <?php
    $method = $_POST['method'];
    $userId = $_POST['userId'];
    $file_temp = $_FILES['Filedata']['tmp_name'];
    $file_name = $_FILES['Filedata']['name'];
    $file_size = $_FILES['Filedata']['size'];

    if( $method == "id" )
    {
      $movePath = "/home/myPath/images/$userId_$file_name";
    }
    else
    {
      $movePath = "/home/myPath/images/time_".time()."_".$file_name;
    }

    move_uploaded_file($file_temp,$movePath);

    echo "save Complete";
    ?>


    마지막 save Comple 메시지를 받기 위해서는 Flex의 Complete 이벤트 발생시 아래와 같은 방법으로 받으면 되겠다. 이것을 알아내는데도 많이 힘들었다. 일종의 팁이다. ^^;

    데이타 받기 (Language : java)
    var loader:URLLoader = URLLoader(event.target);
    var bytedata:ByteArray = loader.data;
    var strData:String = bytedata.toString();
    trace( strData)


    실제 업무에도 잘 이용하고 있다.
    이미지 에디터 등을 만들때 아주아주 유용한 자료가 될 것이다.

    누가 예제 프로그램 만들어서 트랙백 걸어 주시면 고맙겠다.


    자료 출처 
    http://marstonstudio.com/2007/08/19/how-to-take-a-snapshot-of-a-flash-movie-and-automatically-upload-the-jpg-to-a-server-in-three-easy-steps/


    지돌스타 블로그내 참고자료
     - ImageSnapshot 클래스에 대해 : http://blog.jidolstar.com/301
     - FileReference의 UploadCompleteData 이벤트 : http://blog.jidolstar.com/324
     - 동영상 캡쳐 방법 : http://blog.jidolstar.com/215


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

    + Recent posts