지돌스타 - 쿠키랩 블로그

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

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

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

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

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

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

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

FLASH BUILDER 4.5.1 ROCKS  


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

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

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


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

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

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


참고글 

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

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

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

발표 PPT 

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

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

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

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

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

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를 이용한 프로젝트를 개발할 수 있도록 지원해준다.

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

(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"

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

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

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

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

• 프로젝트에 대해 : http://koko8829.tistory.com/818
• 프로젝트 참여안내 : http://sites.google.com/site/koreanflexdoc/volunteer
• 공식페이지 : http://sites.google.com/site/koreanflexdoc/
  

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

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

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

이전부터 많은 지면을 할당하여 원더플(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를 에디터 삼는데서 시작합니다. 이에 대한 대략적인 개요는 다음과 같습니다.

인터넷 상에 멋진 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에 올라온 코드중에 추천받은 코드만 엄선하여 보기 좋게 카테고리를 만들어 분류해주고 있다. 잘 이용하면 큰 도움이 되는 사이트이다.



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으로 개발 환경을 만들 수 있다.

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

• http://labs.adobe.com 에서 Flash Builder 4를 다운로드 받아 설치한다. 
• SVN 플러그인을 설치한다.
• ANT 플러그인을 설치한다. cf) http://blog.flashplatform.kr/213
  

위 과정을 다했으면 기본 개발 환경이 구축된 것이다. 다음으로 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님의 글에서 아이디어를 얻었다. 두분께 감사한다.)

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

Flash, Flex, AIR, ActionScript 프로젝트를 진행하면서 모든 코드를 손수 만들어 사용하는 것은 그다지 추천할 만한 일은 아니다. 왜냐하면 아무리 실력있는 개발자라도 프로젝트에 필요한 코드모음을 전부 만드는 것은 너무 큰 노력이 들뿐만 아니라 코드의 유지보수에도 매우 많은 시간을 허비할 수 있기 때문이다.

Flash 기반 코드 라이브러리는 이미 수년간에 걸쳐 공개되어 있다. 조금만 노력을 기울이면 3D, 트윈, 물리엔진, 수학, 보안, 데이터관리, MVC,   as3corelib, Papervision3d, Away3d, Flex 컴포넌트, 각종 유틸등 ActionScript/Flex/AIR/Flash에 관련된 수십,수백가지 우량(?) 라이브러리들을 쉽게 사용할 수 있다.

• AS3 Code Libraries 
• 유용한 ActionScript 3.0 라이브러리 #1 
• 유용한 ActionScript 3.0 라이브러리 #2

위에 링크되어 있는 라이브러리만 해도 정말 현업에 바로 사용할 수 있는 것들이 정말 많다. 또한 단순히 공개차원을 넘어 지속적으로 업데이트가 되며 완성도가 높아지고 있다.

그럼 다시 생각해보자. 내가 3D 게임을 만들기 위해 3D 엔진을 만들어야할 것인가? 내가 트윈(tween)을 구현하기 위해 트윈엔진을 만들어야 할것인가? 각종유틸이 필요해서 그걸 다 내가 만들것인가? 만약 검증되지 않고 아직 별도로 공개되어 있지 않은 것이라면 당연히 만들어야할 것이다. 하지만 기본적으로 큰 노력없이 쉽게 사용할 수 있고 자동으로 업데이트 및 검증까지 해주는 사람들이 만든 훌륭한 라이브러리가 있는데... 왜!!! 그걸 다 만들 필요가 있는가이다.

재미있게도 위에서 소개한 라이브러리들은 대부분 Google 코드(http://code.google.com)에 공개되어 있다. 이는 무엇을 의미하는가? 업데이트할때마다 압축파일을 받아 라이브러리에 복사하는 수고가 필요없이 SVN으로 간단하게 업데이트 할 수 있다는 것을 말한다. 이것을 적극 활용하는 방법을 소개하는 것이 이 글을 쓰는 목적이다.

필자는 Flash 개발자라면 누구라도(?) 잘 알고 있는 Flash 3D 엔진인 Papervision3D과 Away3D를 SVN을 이용해 가져와 프로젝트에서 활용하는 방법을 언급하고자 한다. 개발환경은 Flash Builder 4를 기준으로 하겠다. (거의 모든 기능을 Flex Builder 3에서도 할 수 있다.)


1. Flex/Flash Builder에 SVN 플러그인 설치
이제부터 설명할 공개 라이브러리를 사용하기 위해 Flash builder에 SVN 플러그인을 설치해야한다. 방법은 어렵지 않다. 다음 링크를 참고한다.

Flex Builder 에서 Subversion(SVN) 사용하기


2. Google Code에서 Papervision3D SVN 주소 확인하기
Google 코드 사이트(http://code.google.com)로 들어가 papervision3d로 검색해서 Papervison3D 구글코드 페이지(http://code.google.com/p/papervision3d/)로 들어간다. Papervision3d의 라이센스와 각종 링크들을 보면 다른 정보들도 확인할 수 있다.

물론 화면 우측 Featured downloads에 있는 zip 및 swc 파일을 받아 직접 프로젝트에 복사해 사용할 수 있으나(많은 블로그에 이 방법을 소개하고 있다.) 앞서 말한데로 새로 업데이트되는 최신소스를 바로바로 사용해보려면 이 방법은 너무 불편하다. 게다가 공개 라이브러리를 사용하는게 4~5개 이상 넘어가면 지속적인 업데이트가 힘들다.

어떤 개발자는 너무 최신 버전이면 버그가 있을지도 모르지 않겠느냐? 라고 의심할 수 있을 것이다. 하지만 Papervision3D와 같이 이미 대중적(?)으로 인기를 모으고 있는 라이브러리라면 철저한 검증없이 함부로 최신화(commit) 하지 않는다.


위 Source 탭으로 들어가 Checkout 메뉴를 보면 아래처럼 SVN checkout 주소가 있다. 이 주소는 저장소의 주소라 불리운다. 여러분은 이 주소로 Papervision3D 소스 코드를 받아올 수 있겠다.




3. SVN을 이용해 Papervision3D 라이브러리 프로젝트 만들기
이제 본격적으로 Papervision3d를 SVN으로 받아와 라이브러리 프로젝트를 만들어보자.

Flash Builder를 실행한다. 실행되면 메뉴에서 File > Import 로 들어간다. 아래 처럼 창이 뜨면 SVN > Checkout Projects from SVN 을 선택한다음 Next 버튼을 누른다.



아래 처럼 보이면 새로운 저장소 위치를 만들기 위해 Create a new repository location을 선택후 Next 버튼을 누른다. 이는 새로운 저장소라는 것은 SVN을 접속할 주소를 의미한다고 보면 되겠다. 여기서는 Google 코드에서 봤던 주소 http://papervision3d.googlecode.com/svn/trunk 가 되겠다.

아래처럼 나오면 주소를 입력하고 Next 버튼을 누른다.



아래 화면처럼 나오면 http://papervision3d.googlecode.com/svn/trunk 저장소 내에 있는 Papervision3D 소스 경로를 볼 수 있다. 우리는 ActionScript 3.0 기반에서 제작하기 때문에 as3/trunk를 선택한다. 이때 선택하는 기준은 그 안에 src 폴더의 상위 폴더이어야 한다. 이 방식은 다른 라이브러리를 참조해서 하더라도 저장소내에 구조가 조금씩 다르지만 같은 방법을 사용하므로 기억하자.


위 창에서 Next 버튼을 누르면 다음 창으로 전환된다. 세부적으로 Check out 하는 방법을 설정할 수 있는데 우리는 최신 버전을 사용할 것이기 때문에 바로 Finish 버튼을 누른다.



이제 Papervison3D 라이브러리를 가져올 SVN 주소 설정을 끝냈으므로 이 라이브러리가 담길 프로젝트를 생성해야한다. 위 절차를 모두 끝내면 자동적으로 다음과 같이 New Project 창이 뜬다. 이때 Flex Library Project를 선택하면 되겠다.


다음 그림처럼 Project name을 Papervision3D(이름은 아무거나 써도 상관없다.)으로 설정하고 Flex SDK Version을 선택한 다음 Finish버튼을 누른다.


참고로 Flex SDK Version을 선택시에 라이브러리가 AIR 코드가 포함되어 있는 경우라면 Include Adobe AIR libraries를 선택해야한다.(예: as3corelib) 또한 라이브러리가 구동되기 위한 SDK가 무엇인지도 알아야한다. 가령 Flash Player 10부터 3D API를 사용한 라이브러리라면 그것을 지원하는 SDK를 사용해야한다는 것을 의미한다. SDK는 Adobe Labs에서 최신버전을 받아 사용하면 된다.(방법을 모르시면 댓글을 ^^)

아래처럼 Confirm Overwrite 메시지가 뜨면 그냥 OK 버튼을 누른다.



이제 구글 코드 저장소로부터 아래처럼 Papervision 3D 코드를 받아온다.


Package Explorer에 추가된 Papervion3D 라이브러리 프로젝트를 확인하자. 하지만 만약 에러메시지가 나온다면 다음과 같이 해보자. 해당 프로젝트를 선택하고 오른쪽 마우스 버튼을 눌러 컨텍스트 메뉴에서 Properties로 들어가보자. 아래와 같은 창이 나오면 왼쪽 메뉴에서 Flex Library Build Path를 누르고 우측 상단 탭에 Classes를 선택한다. 그리고 Select classes to include in the library를 선택한 다음 src 앞에 check박스를 체크한다. 그리고 OK 버튼을 누르면 다시 컴파일 되면서 컴파일 에러가 사라질 것이다.



여러분은 이제 최신버전의 Papervision3D를 사용할 수 있게 되었다. 아래처럼 해당 프로젝트를 선택하고 오른쪽 마우스 버튼을 눌러 컨텍스트 메뉴에서 Team > Update to Head를 선택하는 것만으로 최신버전으로 업데이트 할 수 있게 된다. 이러한 방법은 SVN으로 공유한 다른 라이브러리들을 항상 최신으로 유지하는데 쉬운 방법을 제공하게 된다.


한가지 언급하자면 위에서 소개하는 방법은 Papervision3D를 예로 들었기 때문에 다른 라이브러리의 공개 형태에 따라 수행하는 방법의 차이가 있을 수 있다는 점을 강조하고 싶다. 그러한 점은 개발자가 알아서 체크할 수 있어야 한다.


4. 조금만 더 가다듬어 보기 (관심있는 사람만 읽으면 됨)
3번까지 진행하는 것만으로도 개발하는데 전혀 문제없지만 아래 내용을 좀더 알고 가면 더욱 좋을 듯 싶다.

지금까지 구글 코드로부터 SVN 저장소를 통해 받아온 Papervison3d 라이브러리는 설정파일을 제외한 ActionScript 3.0 코드가 대부분이다. 그래서 실질적으로 프로젝트에 필요한 설정구성요소인 .actionScriptProperties나 .flexLibProperties등의 파일들은 Papervision3D 개발자가 처음부터 저장소에 공유하지 않는다. 왜냐하면 .actionScriptProperties, .flexLibProperties들은 Flex Builder나 Flash Builder와 같이 특정 개발툴에서 필요한 파일이기 때문에 다른 IDE에서는 무의미 할 수 있기 때문이다.

아래 처럼 Papervision3D의 프로젝트 이름에 SVN으로 공유되었으나 폴더그림에 * 표시가 되어 있다. 이 표시는 원래 SVN 저장소 내용과 프로젝트 내용이 다를때 나온다. 이 다른 내용이라는 것은 금방 언급했던 .actionScriptProperties, .flexLibProperties 등이다.


Flash Builder에서는 프로젝트내의 .actionScriptProperties, .flexLibProperties 파일을 직접 볼 수 없도록 되어 있다. 이는 Filter 처리가 되어 있기 때문이다. 아래 그림처럼 선택해 Filter 처리된 파일들을 전부 check out하자.



위 그림 처럼 Filter 처리된 파일을 check out하면 아래처럼 프로젝트 내에 .actionScriptProperties, .flexLibProperties 등을 볼 수 있게 된다. 이 파일의 아이콘에 ?로 표시된 것은 저장소에 이 파일이 존재하지 않음을 나타내는 것이다.

* 표시나 ? 표시를 없애기 위해서 이러한 파일들이 SVN 저장소와 공유되지 않도록 무시할 수 있도록 하면 된다. Flash Builder에 설치된 SVN 플러그인은 이러한 기능을 지원해준다. 메뉴에서 window > Preference로 들어가 창이 뜨면 Team > Ignored Resources로 들어가면 아래 처럼 나온다. 여기에 다음 내용을 Add Pattern하자.





이제 아래 그림처럼 * 표시나 ? 표시가 없어지고 저장소의 원본과 프로젝트의 소스가 일치함을 나타내는 표시로 바뀐다.




5. Away3D를 SVN으로 받아오기

Papervision3D 라이브러리를 이용해서 애플리케이션을 만드는 예제는 굳이 설명안해도 된다고 생각한다. 대신 Away3D를 활용하는 방법을 약간 언급하고자 한다.

Away3D도 Papervision3D처럼 구글코드(http://code.google.com/p/away3d/)를 통해 SVN으로 소스를 공개하고 있다. 하지만 Away3D는 Papervision3D와 다르게 Flash Player 9, Flash Player 10 버전을 함께 제공하면서 Flash Player 10 3D 라이브러리를 이용한 3D 엔진인 Away3DLite도 제공한다. 또한 몇가지 유용한 예제도 함께 제공하고 있다.


Away3D 저장소 주소(http://away3d.googlecode.com/svn/trunk)로 접속하면 아래처럼 나온다. fp9과 fp10은 각각 Flash Player 9, 10 버전을 의미한다. 아무래도 Flash Player 10 버전이 최신이면서 효율적으로 만들어졌으므로 fp10에 있는 공개 라이브러리와 예제소스를 참고할 것이다.

fp10에 보면 Away3D, Away3DLite 소스가 있음을 확인할 수 있다. 또한 그에 대한 예제는 Examples에 들어 있다.


아래는 해당 라이브러리와 예제의 저장소 주소이다.

• Away3D 라이브러리 : http://away3d.googlecode.com/svn/trunk/fp10/Away3D 
• Away3DLite 라이브러리 : http://away3d.googlecode.com/svn/trunk/fp10/Away3DLite
• Away3D 라이브러리 예제 : http://away3d.googlecode.com/svn/trunk/fp10/Examples/Away3D/as/ 
• Away3DLite 라이브러리 예제 : http://away3d.googlecode.com/svn/trunk/fp10/Examples/Away3DLite/as/

여러분은 Papervision3D를 SVN으로 프로젝트를 만든 것처럼 Away3D에서도 그래도 하면 된다. 단. Examples의 경우 중간에 프로젝트 생성시 ActionScript 프로젝트를 선택하기 바란다. 물론 Flash Player 10 기준이라는 점도 명심하자.

예제 프로젝트에서는 해당 라이브러리 프로젝트의 경로를 포함시켜줘야한다. Away3D_Example은 Away3D 라이브러리를 Away3DLite_Examples는 Away3dLite 라이브러리를 포함해야한다. 방법은 간단하다. Away3D_Example와 Away3DLite_Examples내에 libs 폴더안에 각각의 라이브러리 프로젝트에서 만들어진 bin디렉토리에 있는 
swc를 복사하면 된다. 하지만 이는 애플리케이션을 전부 만들고 배포하고 난 다음에 백업을 위해 선택할 방법이고 실제로 개발할때는 다음과 같이 한다.

1. Away3D_Example 프로젝트를 선택한다.
2. 메뉴에서 Project > Properties를 선택한다.
3. 창이 뜨면 좌측 ActionScript Build Path(Flex의 경우 Flex Build Path)를 선택한다.
4. 상단 Library path 탭을 선택한다.
5. Add Project를 선택한 다음 Away3D 라이브러리를 선택한다.
6. OK 버튼을 누른다.
7. Away3D_Example의 .actionScriptProperties를 연다.
아래 그림처럼  default package에 있는 소스 들은 전부 애플리케이션들이다. 이 코드들이 진정한 애플리케이션으로서 동작하려면 .actionScriptProperties내에 application으로 등록해야한다. 수작업이긴 해도 전부 등록하자. 또는 해당 as 파일을 선택후 마우스 오른쪽 버튼을 눌러 Set as Default Application 항목을 선택해도 된다. 이는 애플리케이션으로 등록하는 동시에 Default 애플리케이션으로 잡아준다. Default 애플리케이션을 지칭하는 것은 .actionScriptProperties 파일 내에 actionScriptProperties 태그의 mainApplicationPath 속성이 그 역할을 한다.

위 처럼 설정하면 이제 예제 파일들을 아무 문제없이 동작시킬 수 있을 것이다.
8. Away3DLite_Example도 위와 비슷한 방법으로 하면 되겠다.

아래는 Away3DLite_Examples에 있는 Advanced_Mario1000.as 애플리케이션을 실행하는 화면이다.

아마 어떤 애플리케이션은 as3dmod 라이브러리가 필요하다는 에러가 나올것이다. 이것도 비슷한 방법으로 Google Code에서 가져올 수 있다. 단, 몇가지 다른 설정을 해야하는데 여기서 설명하지 않고 각자의 몫으로 돌리겠다.


정리하며

개발자라면 Google Code와 친해져야하지 않을까? 또한 기존 라이브러리가 있는가 검색을 해보는 성의가 있어야하지 않을까? 그리고 그 라이브러리를 잘 활용하는 방법을 스스로 깨달으려고 노력해야하지 않을까?

잘못된 사항이나 더 좋은 정보가 있다면 얼마든지 댓글이나 트랙백 부탁한다.


참고
bs-papervision : http://code.google.com/p/bs-papervision/ 
as3dmod : http://code.google.com/p/as3dmod/
sandy3d : http://www.flashsandy.org 
alternativa3D : http://alternativaplatform.com/en/alternativa3d/

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

프로그램상에 폰트를 포함할 때 다음과 같은 문장을 사용할 것이다.

[Embed(source='C:/WINDOWS/Fonts/ARIAL.TTF', fontName = "MyFont", mimeType = "application/x-font-truetype")]
private var font:Class;

그런데 Flash Builder 4에서 작업할 때부터 위처럼 Embed한 폰트가 적용이 되지 않았다. 사용한 True Type 폰트는 언제나 테스트할때 문제없이 동작한 것이기 때문에 왜 안되는지 의문이 들었다. Flash Builder 4의 컴파일러인 mxmlc가 버그가 있거나 다른 설정이 추가되었나 싶었지만 그렇지 않았다. 그래서 열심히 구글링해봤더니 폰트를 Embed 처리할때 embedAsCFF 속성이 추가되었다는 것을 발견하고 아래처럼 테스트 코드를 작성해봤다.

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.text.AntiAliasType;
	[SWF(width = "500", height = "240", backgroundColor = "#FFFFFF", framerate = "24")]
	public class FontTest extends Sprite {
		[Embed(source='C:/WINDOWS/Fonts/ARIAL.TTF', embedAsCFF="false", fontName = "MyFont", mimeType = "application/x-font-truetype")]
		private var font:Class;
		public function FontTest() {
			var format:TextFormat = new TextFormat();
			format.font = "MyFont";
			format.size = 30;
			format.color = 0x000000;
			var label:TextField = new TextField();
			label.embedFonts = true;
			label.autoSize = TextFieldAutoSize.LEFT;
			label.antiAliasType = AntiAliasType.ADVANCED;
			label.defaultTextFormat = format;
			label.text = "blog.jidolstar.com";
			addChild(label);
			label.rotation = 5;
		}
	}
}

여기서 embedAsCFF 속성은 도데체 뭔가? 이 전에 CFF(Compact Font Format)가 뭔지 알아야만 했다.

폰트형태는 여러가지 종류가 있다. OTF(Open Type Font)와 TTF(True Type Font)등이 있다. OpenType은 MS와 Adobe가 TrueType의 후속작으로 Cross Platform을 지원하도록 만들 파일 포멧이라고 한다. 이 OpenType에는 Glyph Outline형식에 대한 정의는 없고 TrueType, CFF, Adobe Type 1(PostScript)를 사용한다고 한다. 이 말은 OTF중에는 TrueType으로 글자모양을 정의한 폰트도 있고 CFF 또는 PostScript Font로 정의한 폰트도 있음을 의미한다.
 
OpenType과 TrueType에 대한 더욱 자세한 내용은 아래 링크를 참고하자.
http://en.wikipedia.org/wiki/OpenType
http://en.wikipedia.org/wiki/TrueType

CFF는 OpenType의 하나로서 다음 링크에 더 세세하게 설명하고 있다.
http://en.wikipedia.org/wiki/Compact_Font_Format#Compact_Font_Format

CFF에 대한 스펙은 다음 파일을 참고한다.


Flash Player 10과 Adobe AIR 1.5이상부터 TTF뿐 아니라 CFF도 지원하게 되었다. 이는 PDF와 직접적인 관계가 있는 것 같다.  그래서 폰트를 포함할때 TTF인지 CFF인지 명시할 필요에 의해 생긴 것이 embededAsCFF인듯하다. 만약 TTF를 사용한다면 위 예제처럼 embededAsCFF를 false로 지정해야한다.

필자도 Font Type에 대한 지식은 거의 없어서 난감했다. CFF를 포함하면 글꼴 렌더링시에 텍스트를 보다 쉽게 읽을 수 있으며 작은 크기에서 글꼴의 표시 품질이 향상된다고 Adobe ActionScript 3.0 가이드 문서에는 나와 있을뿐 정확히 TTF와 CFF에 대한 명확한 해석을 찾지는 못했다.

Adobe ActionScript 3.0 가이드 : 글꼴을 이용한 작업


갑자기 대두된 Font 포함문제 때문에 매우 당혹스러웠지만 그나마 해결방법이라도 찾아 다행이다. 이에 대해 정확히 기술된 한글문서를 아직 찾지 못했다. 더욱 다양한 글들이 많이 올라왔으면 한다.

이 실험은 Flash Builder 4 Beta 2에서 테스트 했으며 아래 링크로부터 Flash Builder 4를 다운받을 수 있다.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026

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

Flex 또는 ActionScript 3.0 라이브러리를 만들면서 하나의 네임스페이스를 지정키 위해 manifest설정을 하게 된다. (manifest를 모른다면 일단 Flex Builder에서 나만의 manifest만들기를 먼저 읽어보길 바란다.)

Flash Builder 4 beta 2를 이용하면서 같은 방법으로 manifest를 설정하는데 아래와 같은 에러가 계속 나는 것이다.


경험상 소스상에는 문제가 없는 것이기 때문에 다른 부분을 찾다가 beta 2에 있는 새로운 기능을 포착했다. 아래 이미지는 해당 프로젝트에서 Properties > Flex Library Builder Path 에서 Classes 탭을 선택했을때 화면이다. 이전 버전의 Builder에서는 보이고 있는 라디오 버튼이 없었던 것으로 알고 있는데 이번에 새롭게 들어갔나보다.

저 기능은 라이브러리 컴파일시 컴파일할 대상의 Class를 선택하는 기능인데 이번에 기능이 바뀌면서 자동으로 모든 클래스가 포함되는 것을 선택하도록 하는 기능이 추가된 것이다. 이게 기본값이다. manifest관련 에러가 났던 것인 이 부분이 원인이였다. 다음 처럼 Select classes to Include In the library를 선택해보고 다시 컴파일하면 에러가 사라진다.


아놔~~ 이 때문에 1시간 허비했다. 아직 beta버전이니깐 넘어가자. 정식버전 나오면 나아지겠지.

Flash Builder 4는 이전 Flex Builder 3에 비해 너무도 많은 부분이 개선이 되었다. 이제 개발툴로서 제대로 자리매김하는 것으로 보인다. Flash Builder 4 및 다른 제품군을 다운 받기 위해 아래 링크를 참고하길 바란다.

http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026

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

Flash Builder 4 Plugin을 설치후 기존 프로젝트로 열었을때 황당한 문제에 봉착했다. 아래 그림처럼 툴바에 Run, Debug 버튼이 없어진 것이다.


한번도 이런적이 없어서 몇시간 당황했는데, 해결방법은 이외로 간단했다.

먼저 툴바위에 마우스 오른쪽 버튼을 눌러 Customize Perspective 를 선택한다. 또는 메뉴에서 Window > Customize Perspective 를 선택하면 되겠다. 그럼 다음과 같은 창이 나온다. 여기서 Command 탭을 선택한다.

위 그림과 같이 왼쪽 Available command groups에 Launch를 체크한뒤 OK버튼을 누른다.



휴~ 이거 하나 알아낼려고 엄청 힘들었다. 별것도 아닌것이... ㅎㅎㅎ

Flash Builder 는 언제든지 다운받을 수 있다. 다음 링크를 참고바란다.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026 

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

미국 LA 현지 Adobe MAX 2009 뉴스입니다. ^^

앞전에 Flash CS5에 대해서 다뤘습니다. iPhone 애플리케이션을 만들 수 있다는 등의 이야기를 했죠.

Adobe MAX에서는 공개 세션뿐 아니라 비공개 세션이라는 것을 진행하나 봅니다. 아래 동영상을 통해 새로운 내용을 더욱 보실 수 있습니다. 매우 재미있어요. 꼭 보세요.



동영상에서는 Flash CS5의 새로운 Feature와 Flash IDE와 Flash Builder간에 워크플로우, 새로운 텍스트 엔진, 아이폰 애플리케이션 개발하는 내용을 담고 있습니다.

큰 화면으로 보세요.

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

Adobe MAX 2009 긴급 뉴스입니다. ^^

Flex/Flash 개발자들에게 개발하면서 가장 귀찮은 작업이 무엇일가요?

제 생각에 세세한 조절을 위해 코드를 수정할 때일겁니다. 가령, 100px 움직여야하는 디스플레이 객체를 90,80,70씩 움직여가며 가장 좋은 결과를 보여준다던가 하는 일을 해야할 경우 코딩후 실행, 종료후 코드 수정다음 다시 실행하는 작업을 반복해야할 겁니다.

Adobe MAX 2009 둘째날 저녁에 열린 MAX Bash@LA Live 행사에서 공개한 Flash Builder는 위의 문제를 해결하기 위해 Edit/Continue 기능을 소개했스니다. 듣기로 이 기능은 이미 일본의 Spark 프로젝트 팀에서 먼저 한걸로 알고 있는데요. Anyway....

Edit/Continue 기능은 디버깅 중간에 코드를 수정하면 바로 실행중간에 결과가 반영된다는 겁니다! olleh!!!
Flash Platform 개발자들의 수고를 한층 덜어주는 기능이군요. 제 생각에 이 기능은 Flash Builder 정식버전 및 Flash CS5에서 적용되지 않을까 생각됩니다. 아주아주 기대가 큰 기능입니다.

이 기능이 가능한 것은 어짜피 컴파일 결과물이 AVM2상 메모리에 올라가고 변경된 코드와 대응하는 메모리상의 위치의 값을 변경하는 일이기 때문입니다.

우야꼬 블로그에 가면 키노트 상황을 생생히 사진으로 담았다는... ^^
[at MAX] Sneak peek - Flash Builder Debugging "Edit and Continue"

물론 당연히 있어야할 기능이 들어간 것일뿐입니다만... ㅎㅎ
점점더 Flash 개발자들의 편의를 극대화 시켜주는 군요. 정말 반가운 소식입니다. ^^

Flash Builder는 아래 링크에서 다운로드 받을 수 있어요.

 

Flex Builder 또는 Flash Builder 에서 유용하게 사용할 수 있는 플러그인을 소개했습니다. 더 많을 것이라 생각하는데 함께 공유했으면 좋겠네요. 댓글, 트랙백 모두 환영합니다.

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

참고로 Flash Builder는 아래 링크로 가서 다운받으세요.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026 

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

 

위 그림은 Flex Builder 3(Flash Builder 4)의 Profiling(프로파일링) 기능에서 시간별 메모리의 상태를 보여주고 있는 것이다. 프로젝트를 하다가 저놈의 메모리가 도데체 왜 올라가는지 이해할 수 없었다. 분명 참조를 제대로 지워주고 있지 않으렸다!

 

등록했던 이벤트도 지워주고 자식들도 빼주고 붙여주면서 원인을 분석해갔다. 전체에서 부분으로 부분에서 전체를 훑어보면서 메모리의 변화를 계속 살펴봤다.

 

 

위 그림은 메모리가 정상적으로 반환되고 있는 모습이다. Flash Player에서는 참조관계가 root에 묶여 있거나 환형참조일때 가비지 컬렉션(Garbage Collection)으로 인식하여 어느 서점에 메모리에서 해지를 시킨다. 그래서 개발자는 참조를 잘 지워줘야 한다.

 

메모리가 비정상적으로 올라간 첫번째 원인은 이벤트 핸들러를 등록만 하고 지우지 않은데서 비롯되었다. 그래서 이벤트 핸들러를 약참조(weak reference)로 하도록 해서 해결했다. 약참조의 경우 소멸시점이 명확하지 않을때 유용하게 사용할 수 있다. 그리고 객체 중복 참조로 인해 메모리가 상승했는데 한쪽에서만 참조를 없애고 다른 한 곳에서는 삭제하지 않은 오류를 범했다. ㅡㅡ;

 

아~ Flex Builder에 이 기능이 없었다면 저걸 어떻게 찾을 수 있었을까? Flash Builder 4부터는 이 프로파일링 기능에 퍼포먼스 해석(performance analysis)기능 까지 추가 되고 개선되었다는데~~ 어찌하는지 해봐야 겠다.

 

Flex Builder에서 디버깅&프로파일링 하기 - 1부 -

Flex Builder에서 디버깅&프로파일링 하기 - 2부 -

 
Flash Builder는 아래 링크에서 다운로드 받을 수 있습니다.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026 

기존 Flex Builder 3를 구입한 사람에게만 적용됩니다.

 

Step 1. Adobe Labs에 접속합니다. (http://labs.adobe.com)

 

Step 2. Adobe Flash Builder 4 Beta 다운로드 페이지로 이동합니다.

https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs%5Fflashbuilder4

Adobe 회원이 아니라면 먼저 회원가입하세요.

 

Step 3. 30-day Beta 부분에 request extension serial number 를 선택합니다.

기존 Flex Builder 3를 고객만 해당되며 Flash Builder 4 다운로드 후 21일 후에 Flash Builder 4에 대한 Serial Number를 받을 수 있다고 명시되어 있습니다.

 

 

Step 4. 자신의 이름과 전자우편주소, Flex Builder 3 Serial Number를 입력하고 Do you accept this term?를 check한다음에 Request Serial Number 버튼을 누릅니다.

입력한 전자우편 주소로 Flash Builder 4 Serial Number가 전송되므로 정확하게 입력해야합니다.

 

성공적으로 발송되면 다음과 같은 페이지가 나옵니다.

 

Step 5. 입력한 전자우편 계정에서 Flash Builder 4 Serial Number를 확인합니다.

 

 

Step 6. Flash Builder 4를 실행시키고 받은 Serial Number를 입력합니다.

 

 

이제부터 Flash Builder 사용기간에 구애받지 말고 마음대로 쓰세요.

Adobe Flash Builder 4 Beta가 배포되었습니다. 공식판은 아니고요. Flash Builder 4는 Flex Builder 3의 차기버전으로 Flex SDK 4(Flex Gumbo)를 기본 SDK로 설정되어 있습니다. Flex SDK 4로 만들어진 애플리케이션은 기본적으로 Flash Player 10 버전에서 동작이 가능합니다. 물론 기존 Flex SDK 3도 사용할 수 있습니다.

 

아래 링크에서 언제든지 다운로드 받을 수 있습니다.(회원가입하셔야 합니다.) 윈도우, 맥 버전이 있으니 자신의 운영체제에 맞게 다운로드 받으시면 됩니다.

 

http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs%5Fflashbuilder4

 

 

다음 글을 참고하세요.

• Flex Builder 3의 다음 버전, Flash Builder 4
• [어도비 ACC뉴스레터]Flex 차기버전의 이름이 공개되다.
• Adobe Flash Builder 4

 

1. 설치하기

위 링크에서 다운로드 받아 쉽게 설치할 수 있습니다.

 

처음 설치화면입니다.

 

C:/Program Files/Adobe/Flash Builder Beta 경로에 기본 설치되는군요.

 

설치중인 화면입니다.

 

이름도 Gumbo입니다. ㅎㅎ 아직 Beta라는 것이겠죠.

 

실행해 보겠습니다.

 

30일 Trial버전으로 사용해봅니다.

 

첫 실행 화면입니다. FB 문자가 선명하네요. FB는 Flex Builder가 아니라 Flash Builder 입니다.

 

 

 

2. 사용해보기

 

메뉴 구성 변화

FXP 임포트도 되고 Test Case Class, Test Suit Class도 만들 수 있도록 되어 있네요. Flex Builder로 테스트 주도형 제작이 가능해지겠군요.

 

Data 메뉴가 상당히 직관적으로 바뀌었네요. 또한 더욱 많은 서비스도 지원하도록 만들어졌고요. 진정한 RIA를 구축하기 위한 서버측 기술 지원을 배려한 기능이군요.

 

 

이전에 없었던 Data/Services, ASDoc, Network Monitor 등이 지원되네요.

 

아래는 네트워크 모니터툴입니다. RPC 통신등을 할 때 서버와 통신이 어떻게 되는지 확인하는데 요긴하게 사용할 수 있을 것 같습니다. 이제 Http Watcher가 필요 없겠군요!!!!!

 

 

Flex 코딩해보기

Flex Project를 만들어보겠습니다. SDK를 Flex SDK 3.4와 Flex 4.0을 사용할 수 있도록 되어 있네요. Flex 4.0 기반에서 작업해 보겠습니다.

 

FDT(Flash Development Tools)에서 보이는 구조와 비슷하네요. 프로젝트에 사용하고 있는 Flex 4.0 SDK 라이브러리들도 보이고 각각의 (+)버튼을 누르면 정의된 클래스도 한눈에 볼 수 있습니다. 이거 정말 편해졌군요. SWC도 못봤던 netmone.swc, sparksins.swc등이 있습니다.

 

재미있는 것은 Flex Gumbo가 Fx이니셜로 컴포넌트가 만들어진 것으로 알고 있었는데 FxApplication이 아닌 그냥 Application입니다.

그리고 몇가지 namespace(fx, s, mx)로 구분 되었네요. ComboBox가 DropDownList로 이름이 바뀐 것 같습니다.

 

<?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/halo"
    minWidth="1024" minHeight="768">
    <s:Panel x="14" y="44" width="250" height="200" title="타이틀입니다.">
        <s:Button x="15" y="12" label="버튼"/>
        <s:CheckBox x="15" y="46" label="체크박스"/>
        <mx:ColorPicker x="16" y="71"/>
        <s:DropDownList x="103" y="13"/>
        <s:RichEditableText x="92" y="50" width="147" height="39" text="RichEditableText 컴포넌트"/>
    </s:Panel>
</s:Application>

 

디자인 모드입니다. 스킨도 바뀌고 새로운 컴포넌트도 있네요.

 

실행해볼까요?

헛! 깔끔해진 실행화면!, Flex가 이젠 기본스킨도 이쁘게 나왔네요.

 

 

Theme 선택 기능

프로젝트의 Properties를 보면 Flex Theme가 추가되었습니다. 와우! 그런데 아직 기능이 완벽하지 못한 것 같습니다. 적용이 잘 안되네요 ㅡㅡ;

 

 

Flash CS4 Component 연동

디자인 모드에서 Components를 보시면 Custom에 New Flash Componet, New Flash Container가 있습니다. 즉 Flash CS4에서 만들어진 SWC와 연동이 가능해졌다는 것을 의미합니다.

 

드래그 해서 디자인 뷰에 붙이면 아래처럼 화면에 보이고 선택하면 오른쪽 Properties에 Create in Adobe Flash 버튼이 보입니다.

 

 

버튼을 누르면 Class를 선택할 수 있게 하고 SWC 파일을 선택합니다.

Create 버튼을 누르면 Flash CS4가 실행되면서 컴포넌트를 만들 수 있게 되어 있네요.

 

 

ASDoc 기능

와우! Panel에 마우스를 올려보니 간단한 설명도 나오네요. Eclipse에서는 되던건데… ㅎㅎ

 

앗… ASDoc View가 바로 이런 역할을 가지는 거였군요. 해당 컴포넌트를 선택하면 ASDoc View에 아래처럼 보입니다. 강력하군요.

 

 

Getter/Setter 생성기능 / ASDoc Commnet 기능

 

엄청난 기능(?)이 추가되었군요. Eclipse에서는 당연히 되던건데 왜 Flex Builder에서는 안되나 궁금했던 기능이 이제야 추가되었군요.

 

properties를 만들고 해당 속성의 Getter/Setter 기능을 아래처럼 추가할 수 있습니다. 단축키는 없네요. ㅡㅡ;

또한 Add ASDoc Commnent 기능도 추가 되었습니다. @author, @since 등을 자동으로 붙여줄 수 있으면 좋으련만… 아마 설정이 가능할겁니다. ^^

 

 

이벤트 핸들러 및 Service Call 등록 기능

 

코딩작업 없이 Event 핸들러 및 Service Call 기능을 추가할 수 있게 되었습니다.

 

 

위 그림에서 처럼 버튼을 선택하고 Properties에서 On click에 Generate Event Handler 를 선택하면 아래처럼 이벤트 핸들러가 생성됩니다. 넘 좋군요. ^^

 

버튼을 click하면 바로 아래 코드가 실행되는겁니다.

 

그리고 Generate Service Call을 누르면 Data/Services를 생성해서 연결할 수 있습니다. 와우 RIA 개발툴 다운 면모가 보이는군요.

 

 

File Templates 기능

메뉴의 Windows의 Perferences에 들어가면 아래와 같은 창이 뜹니다.

여기에서 Flash Builder > File Template 가 있습니다. 이를 선택하면 자신의 코딩방식을 설정할 수 있도록 되어 있습니다. 좋은 기능이네요.

 

 

3. 정리하며

이외에도 아직 제가 발견하지 못한 기능이 상당합니다.

 

이제 FDT를 사용하지 않아도 Flash Builder로 충분히 예전에 지원되지 않았던 기능들을 사용할 수 있게 되었습니다. 몇가지 버그가 있는 것 같지만 그 버그만 잘 잡아준다면 훌륭합니다.

 

제가 적지 않은 기능이 있다면 소개해주세요. 그리고 제 블로그에 트랙백(엮인글) 적극 환영합니다. ^^

Flex, Flash, ActionScript, AIR....

Adobe RIA 기술을 처음 접해본 이들에게 이 용어들의 구분은 매우 생소하다. 앞에 3개는 모두 Flash Player에서 돌아가는 SWF파일을 만들어주는 툴 및 언어이다. AIR는 이러한 것을 확장해서 데스크탑 영역까지 애플리케이션을 제작할 수 있는 기술이라고 할 수 있다.

 

많이 헷갈리는 것중에 하나가 바로 Flex, Flash, ActionScript 의 구분이다. ActionScript는 Flex, Flash 애플리케이션을 개발하는 가장 핵심이면서 기반이 되는 언어이다. Flex는 ActionScript 3.0을 확장해 RIA를 지원하기 위한 일종의 프레임워크이다. Flash는 ActionScript 초기 시절부터 있는 일종의 툴로서 이펙트 및 다양한 효과를 제작하는데 적절하도록 구성된다. 결국 Flex, Flash의 태생은 ActionScript 이고 어떤 목적을 가지고 제작하느냐에 따라 Flex, Flash로 구분해서 개발한다. 물론 어떤 것을 선택하든지 결과물은 SWF이다.

 

재미있는 사실은 Flash는 뭔가 디자인 중심적으로 느껴지는 반면, Flex는 개발적이고 기술적으로 여겨는 풍토가 있다. Flash 개발자라고 말하는 것보다 Flex 개발자라고 하면 연봉협상에도 유리할지 모른다. 하지만 Flash 개발이든 Flex 개발이든 어떤 애플리케이션을 만드냐에 따라 선택이 달라지는 것이지 개발의 질이 달라지는 것은 절대 아니다. 여기서 선택이라는 것은 가령 이렇다. 기업솔루션을 구축해야하는 상황이면 서버 구성 및 데이타 통신, 데이터 관리, 각종 컴포넌트를 아낌없이 지원해주는 Flex로 개발하는 것이 좋다. 하지만 Google Map과 같이 Flex 컴포넌트를 전혀 사용하지 않는다면 Flash 기반이나 순수 ActionScript 기반으로 개발하는 것이 맞다.

 

Adobe에서 Flex Builder 3의 다음 버전을 Flex가 아닌 Flash Builder 4로 지정하기로 했다. Flash Builder 4는 현재 Flash CS4와 같은 툴이 아니라 지금의 Flex Builder와 같이 Eclipse기반으로 만들어진 툴이다. 또한 Flex 4 SDK(현 Flex Gumbo)를 기반으로 Flex 개발환경을 지원한다. 결국 그런거다. Adobe RIA기술의 핵심은 Flash다. 그리고 Flex도 결국 Flash다. 다만 Flex SDK를 기반으로 제작하면 Flex SDK로 만들어진 Flash 애플리케이션인 것이다.

 

차기 버전이 Flex Builder 4 대신 Flash Builder 4로 지정한 것은 여러모로 바람직해 보인다. 일단 같은 SWF 결과물을 만들어 준다는 암시를 지니기 때문에 의미전달이 쉬워진다. 겉모습은 전부 Flash이지만 개발방법은 선택하기 나름인 것이다. Flex SDK를 사용하면 그 사람은 여전히 Flex 개발자인 것이다. 앞으로 디자이너와 개발자간에 협력 도구인 Flash Catalyst는 Flash Builder와 매우 자연스럽게 연동이 된다. 그런데 어떤것은 Flex, 어떤 것은 Flash, 이렇게 되면 뭔가 섞일 수 없는 느낌이 든다.

 

2009년 6월 쯤에 1차 베타버전이 나오고 4분기면 정식 버전이 출시될 것이다. 아무튼 기존 보다 개발의 편의성을 극대화 시킬 수 있는 Flash Builder 4가 나오길 기대한다.

 

이것만은 기억하자.

이제 더 이상 Flex는 Flex Builder를 지칭하지 않는다. Flex는 Flex SDK를 지칭하며 그것을 이용해서 개발하는 툴은 Flash Builder 4인 것이다.

Flash Builder 4는 다음 링크를 통해 다운받으세요.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026