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)  

이 글은 어도비 공식블로그에도 발행되었습니다.
큰변화 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




지난행사

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

직장을 옮기면서 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)
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)


오랜만에 Adobe Labs를 가봤는데 마침 Flash Builder 4, ColdFusion Builder, Flex 4 SDK가 베타 딱지를 떼고 정식으로 배포되기 시작했네요.

  • Adobe ColdFusion Builder
  • Adobe Flash Builder™ 4
  • Adobe Flex® 4 SDK

    위 링크를 통해 자세한 정보를 볼 수 있습니다.
  • 추가사항 1
    정영훈님께서 유용한 댓글을 달아주셨습니다. 이클립스에 Flash Builder를 Plug-in 형태로 설치할 때 멈추는 현상이 있는데 아래 내용으로 문제를 해결할 수 있습니다.

    설치할때 우선 압축을 풀게 되는데 그 경로를 지정할 수가 있습니다.
    그 압축을 푸는 경로에 하글이 섞여 있으면 설치가 안됩니다.

    xp에서는 바탕화면 에 압축을 풀게 딜포트 설정으로 나옵니다
    그 경로를 한글이 없는 경로로 수정하면 설치가 가능합니다.


     

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



    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에 관련된 수십,수백가지 우량(?) 라이브러리들을 쉽게 사용할 수 있다.


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

    그럼 다시 생각해보자. 내가 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하자.

    .actionScriptProject
    .actionScriptProperties
    .flexProperties
    .flexProject
    .project
    bin
    .settings
    참고 : http://labs.adobe.com/wiki/index.php/Flex_Builder:resources:plugins:subversion:filtering




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




    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에 들어 있다.


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


    여러분은 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)




    독립형 FB4(Flash Builder 4)를 사용하지 않고 굳이 Eclipse에 FB4 plugin을 설치하는 이유는 독립형 FB4는 기능의 제약점이 있기 때문이다. 물론 FB4로도 충분히 개발이 가능하지만 Eclipse와 연동하는 것은 이 편이 실무에 더욱 적합하다. 그 이유는 hika님의 글 Flex Builder는 반드시 Plug in 으로 설치 글을 읽어보면 알 수 있다.

    하지만 이러한 설치법은 처음 해보는 사람에게는 단순하지 않다. 한방에 설치하는 독립형 FB4에 비해 이것저것 고려할 것이 많은 것 같은 생각이 들기 때문이다. 이 글을 쓰는 목적은 FB4 plugin을 설치를 하는데 있어서 다소 어려움을 쉽게 극복하기 위한 방법을 소개하기 위함이다.

    설치하는 대략적인 순서는 hika님이 매우 잘 설명해 주었다.
    Flex Builder는 반드시 Plug in 으로 설치

    그러나 더욱 자세한 방법은 Chocodonut님의 글대로 하면 되겠다.
    Flex Builder 3 Professional Eclipse plug-in 설치

    FB4도 위 글과 거의 동일한 방법으로 설치하지만 아래와 같은 몇가지 체크할 사항이 있다. (단, 본인은 Window XP환경에서 테스트 했음을 언급한다. Mac이나 Linux의 경우 아래에서 지적한 문제가 있을지는 테스트해보지 않았다.)

    1. Eclipse는 Ganymede를 설치한다.
    먼저, Eclipse버전은 Ganymede RC2 버전을 이용하기 바란다. 최신 버전인 Galileo는 제대로 설치되지 않는다.
    http://www.eclipse.org/downloads/
    에서 화면 오른쪽에 Older Versions를 선택한 뒤 Eclipse Ganymede SR2 Packages로 들어간다. 여기서 Eclipse IDE for Java EE Developers를 다운로드 받으면 되겠다. 아래 링크로 직접가도 되겠다.
    http://www.eclipse.org/downloads/packages/release/ganymede/sr2

    다운받은뒤 설치를 원하는 곳에 압축을 풀면 설치가 완료이다. 설치완료후 반드시 한번이상 실행해준다.

    만약 Galileo버전을 사용하고 싶다면 굳이 말리지 않는다. ^^
    다음 글을 참고한다.
    http://blog.naver.com/joycestudy/100090900907


    2. Eclipse실행시 JVM terminated. Exit code=-1 에러가 발생하는 경우
    Eclipse 설치폴더에 eclipse.ini를 열어 다음과 같이 수정한다.
    -showsplash
    org.eclipse.platform
    --launcher.XXMaxPermSize
    256M
    -vm
    C:\Program Files\Java\jdk1.6.0_07\bin\javaw.exe
    -Dosgi.requiredJavaVersion=1.5
    -vmargs
    -Xms40m
    -Xmx512m

    원래 eclipse.ini에서 수정된 부분은 -vmargs의 위치가 -Xms40m 바로 위로 이동된 것이며 추가된 부분은 -vm 부분이 들어간 것이다. 이때 javaw.exe 경로는 각자 jdk또는 jre 설치 경로를 따라 설정하면 되겠다. 이렇게 해도 같은 에러가 난다면 검색을 통해 다른 방법을 찾길 바란다.


    3. Flash Builder 4 plug in을 설치시 반드시 Eclipse 설치경로를 지정해줄것!
    FB4 plug in을 설치하면 중간에 Eclipse설치 경로를 지정하는 순서가 있다. 이 부분을 잊지 말고 Eclipse 경로를 지정하기 바란다.


    4. FB4를 실행할때는 Eclise를 실행하거나 FB4에 설치된 Run FB Plug-in with alternate Eclipse를 실행한다.
    FB4 plug-in에서 Run FB plug-in 을 실행하면 eclipse-host-distro의 Eclipse가 실행되므로 이것을 사용하지 말자.

    5. 바로가기를 FB4 아이콘으로 바꾸기
    일반적으로 Eclipse를 실행하기 위해 바탕화면에 바로가기를 만들거나 빠른실행아이콘으로 등록해서 사용할 것이다. 하지만 이 바로가기는 기본 아이콘이 이클립스이다. 그러므로 기존에 사용하는 이클립스 아이콘이 있다면 무엇이 Flash Builder이고 무엇이 Eclipse인지 잘 분간이 안갈터...

    바로가기의 아이콘을 Flash Builder 아이콘으로 바꿔보자.
    1. Flash Builder Plug-in이 설치된 폴더로 가서 eclipse-host-distro 폴더에 가면 Eclipse.ico 파일이 있다. 이것을 복사해서 Eclipse 설치 폴더에 복사한다.
    2. 다음으로 바탕화면 또는 빠른실행아이콘을 선택해 마우스 오른쪽 버튼을 눌러 속성을 선택한다.
    3. 아이콘 변경 버튼을 눌러 Eclipse 설치 폴더에 복사한 Eclipse.ico로 바꿔준다.

    이제 근사하게 Flash Builder 아이콘을 가진 바로가기를 만들 수 있게 되었다.


    6. 이전 워크스페이스를 열때 만약 Run, Debug 버튼이 사라진다면!
    다음 글을 참고한다.
    Flash Builder/Flex Builder의 툴바에서 Run, Debug Launch 버튼이 없어진 경우 해결법


    7. 이전 워크스페이스의 SDK경로는 따로 빼자!
    Flash Builder의 SDK가 아닌 기존에 원래 사용하던 SDK를 참조할 필요가 있는 경우가 있다. 이런 문제를 해결하기 위한 방법은 여러가지가 있겠지만 본인은 C나 D 드라이브로 SDK폴더를 따로 만들어 FB가 이 SDK를 참조하도록 하고 있다.

    다음과 같이 진행한다.

    1. C나 D 드라이브등에 사용할 SDK를 복사한다.(새 FB의 설치경로에 sdks에 있는 파일을 복사할 수 있다.)
    2. FB를 실행한다.
    2. 메뉴에서 Window > Preference를 선택한다.
    3. 창이 뜨면 좌측에 Flash Builder를 열어 Installed Flex SDKs를 선택한다.
    4. 우측에 Flex 3.4, Flex 4.0이 이전 FB버전의 경로를 참고하고 있을 것이다. 이를 C나 D드라이브에 복사한 SDK를 참조하도록 한다.


    8. 기본 플러그인 설치는 기본!
    독립형 FB4에는 설치되지 않는 플러그인이 Eclipse에는 언제든지 설치가 가능하다. 주로 협업이 이뤄지므로 SVN등을 설치해야하고 다양한 배포 경로를 확보하기 위해 ANT관련 설정이 필요할 것이다. C/C++개발을 위한 CDT, PHP개발을 위한 PDT등 플러그인을 제한없이 설치할 수 있으니 Eclipse의 FB4 plugin을 설치하는 편이 훨씬 득이라는 것을 느낄 수 있을 것이다.

    다음글들을 참고하면 좋겠다.
    Flex Builder 에서 Subversion(SVN) 사용하기
    Flex Builder 3에서 ANT 사용하기
    Maven 시작하기


    정리하며
    사실 위에 제시한 사항들은 개인적으로 사용하는 방법이다. 꼭 그렇게 따라할 필요 없으며 필요시 참조하면 무난할 것이라 판단한다.

    실무에 종업하시는 분들은 왠만하면 FB4 플러그인을 사용하고 있다. hika님의 블로그에 실무를 통해 자주 사용하는 설정정보를 정리해두었으니 참고 바란다.

    플래시를 위한 이클립스 기본 설정

    다음 글들은 이외에 개발에 큰 도움이 되는 글이니 참고 바랍니다.
    플래시 어플리케이션 개발하기
    플래시 프로젝트 생성하기


    다운로드
    Flash Builder 및 갖가지 Adobe 제품군을 다운로드 받으려면 다음 링크를 참고하세요.
    http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026

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


     

    Flex Explorer만 선별하여 네이버 오픈케스트에 발행했습니다. Flex, AIR 개발자라면 꼭 들어가서 볼 필요있는 것만 나름대로 엄선했으니 참고 바랍니다. Flex를 처음 공부하는 사람에게는 더욱 필요한 정보가 될 것입니다.  현재 Flex 4 Beta가 나와 있는 상태이지만 Flex 2, Flex 3에 대한 Explorer로 포함합니다. 이는 Flex SDK 버전에 상관없이 유용할 것이 판단했기 때문에 넣었습니다.

     

    그럼 즐 Flex/AIR 하세요.

     

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

     

    제 오픈케스트는 1주일에 한번씩 발행됩니다.

    마음에 드신다면 꼭 구독도 하세요 ^^

     

    이외에 아래 링크들도 유용합니다.

     

     

     

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

     

    Flex 4의 Spark 계열 DropDownList는 List를 확장한 컴포넌트이다. Flex 3에서 ComboBox와 유사하게 사용할 수 있다.

     

    DropDownList는 DropDownBase대신 List를 서브클래스로 한 것이 커다란 변화이다. 이렇게 된데에는 Iwo Banas라는 사람이 기존 Gumbo의 FxComboBox을 더욱 확장이 가능하고 내부적으로 독립화된 구조의 필요성에 대한 제안을 반영한 결과이다. 이에 따라 DropDownList는 dropDown 스킨 부분을 더이상 가지지 않고 List의 dataGroup 스킨을 사용하게 되었다.

     

    DropDownList 컴포넌트의 기능 및 디자인 스펙을 보고 싶다면 아래 글을 보기 바란다. 이 글만 잘봐도 DropDownList에 내부구현 및 사용방법에 대해 어느정도 이해할 수 있을 것이라 생각한다.

     

    http://opensource.adobe.com/wiki/display/flexsdk/Spark+DropDownList

     

    또한 API에 대한 자세한 내용은 아래 글을 참고한다.

    http://livedocs.adobe.com/flex/gumbo/langref/spark/components/DropDownList.html

     

    DropDownList를 사용하는 방법은 Peter deHaan의 블로그만 봐도 쉽게 학습할 수 있다.

    나는 이 블로그에서 DropDownList를 언급한 글들만 골라서 사용해 보았다. Flex 3와 달라 약간 생소하지만 놀라운 스킨 적용의 확장성에 매력을 느끼게 될 것이다. 아래에서 소개하는 4개의 큰 제목을 누르면 해당 포스트로 이동한다.

     

    Setting a content background color on a Spark DropDownList control in Flex Gumbo

     

    이 예제는 DropDownList를 이용하는 매우 간단한 예제로 DropDownList의 DropDown되는 리스트의 배경색을 바꾸는 것이다.

     

     

    Setting the symbol color on the Spark DropDownList control in Flex 4

     

     

    이 예제도 그 전 예제와 비슷한 난이도의 예제로 DropDownList의 Symbol의 색을 변경하는 예제이다.

     

     

    Creating a tile layout Spark DropDownList control in Flex Gumbo

     

     

    이 예제는 DropDownList의 커스텀 스킨을 적용하는 방법을 보여주고 있다. 블로그에 있는 커스텀 스킨은 Gumbo버전이라 작동을 잘 안하는데 스킨은 아래 것을 받아 해보길 바란다. Peter deHaan의 예제에서 PopUp을 사용했는데 Flex 4부터는 PopUpAnchor로 바뀌었다.

     

    List에 보여지는 아이템이 원래 DropDownList의 기본 Skin인 spark.skins.DropDownListSkin과 달라진 점은 PopupAnchor의 DataGroup를 VerticalLayout으로 지정하는데 여기서 사용한 Layout은 HorizontalLayout이라는 점이 다르다. 게다가 위치도 아래표시가 아니라 우측에 표시되도록 했다. 이처럼 스킨부분에서 모든 Layout을 수정할 수 있도록 한 것이 Flex 4 컴포넌트의 컨셉이다. 이것은 Flex 3의 단점을 잘 극복한 부분중에 하나이다.

     

    조금 더 재미있게 바꿔보자. Application과 DropDownSkin을 아래 코드로 바꿔보자.

     

     

    스킨만 바꿨을 뿐인데...(갑자기 어느 광고가 생각남.. ㅋ)

    위 프로그램 처럼 DropDownList의 스킨을 바꿀 수 있다. 그것도 아주 쉽게~~

     

     

    Displaying images in a Spark DropDownList control in Flex Gumbo

     

    방금 예제에서 DropDownList의 스킨을 바꾸는 것을 보여주었다. 그럼 DropDownList에 이미지도 보여줄 수 있을까? 당근 아주아주 쉽게 할 수 있다.

     

     

    여기에서 사용된 BitmapImage는  spark.primitives.* 패키지에 포함되는 것으로 Group을 확장한 Graphic내에 넣을 수 있다. Graphic에 넣을 수 있는 것중에는 <Rect>, <Path>, <Ellipse>등도 포함한다. 관련 내용은 아래 링크를 참고한다.

     

    http://livedocs.adobe.com/flex/gumbo/langref/spark/primitives/package-detail.html

     

     

    정리하며

    지금까지 Flex 4의 Spark DropDownList에 대해서 살펴보았다. Flex 3와 달리 Flex 4에서는 스킨 적용시 ActionScript 3.0 기반이 아닌 MXML이라 직관적이고 편리하게 할 수 있다는 것이 큰 매력이였다. 또한 기능도 매우 확대되었다. Spark 컴포넌트라면 이와 같은 방법으로 스킨을 적용할 수 있다는 것을 이해하는 것이 중요하겠다.


    테스트 환경 : Flash Builder 4 + Flex SDK 4

    Flash Builder 는 아래 링크에서 다운 받자.

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

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

    Flex 4로 넘어오면서 생소하게 느꼈던 부분 중에 하나가 바로 자식(Child) 관리 메소드들의 변화가 아닌가 생각한다. 바뀐 부분이 무엇이고 왜 바뀌었는지 알아보도록 하겠다.

     

    Flex 3에서 Canvas, Box 등의 컨테이너는 모두 mx.core.Container 클래스를 확장해서 만들어졌다. 이 Container 클래스는 flash.display.DisplayObjectContainer에서 정의되어 있는 자식관리 메소드인 numChildren, addChild(), addChildAt(), removeChild(), removeChildAt() 등을 그대로 Override(재정의) 해서 사용했다. 그런데 이렇게 재정의 한것이 문제가 컸다. Flex 3의 Container는 DisplayObjectContainer의 메소드를 그대로 사용하므로 자식은 모두 flash.display.DisplayObject로 받게 된다. 하지만 실제 자식으로 사용할 수 있는 것은 IUIComponent를 구현한 클래스만 자식으로 받을 수 있다. 즉 UIComponent만 자식으로 받을 수 있는 것이다. 아래 코드는 Flex 3의 Container에서 자식을 추가할 때 내부적으로 addingChild()메소드가 호출되는데 거기에 있는 코드이다.

    var uiChild:IUIComponent = IUIComponent(child);
    

     

    Flex 3에서 addChild()를 통해 받는 자식은 DisplayObject인데 런타임시 사용될 수 있는 컴포넌트는 IUIComponent이니 실제 Flex 3를 이용해서 개발하는 사람들은 오용할 소지가 크게 된 것이다. 나도 Container에 Sprite 객체를 넣으려고 하다가 안되서 애먹은 적이 있었는데 바로 이것때문이다.

     

    Flex 4부터는 이 문제를 말끔히 없애고자 DisplayObjectContainer의 자식 관리 메소드를 재정의 하지 않고 다른 메소드를 만들었다. 그 다른 메소드는 무엇일까?

     

    Flex 4에서는 아래와 같이 IVisualElementContainer 인터페이스를 정의했다. 이 인터페이스는 Flex 4의 모든 Spark, Halo 컨테이너에서 모두 구현하고 있다. 보면 알겠지만 addChild대신 addElement, removeChild대신 removeElement로 된 것이다. 결국 Child 대신 Element를 사용한거다.

    package mx.core
    {
    public interface IVisualElementContainer
    {
        function get numElements():int;
        function getElementAt(index:int):IVisualElement
        function addElement(element:IVisualElement):IVisualElement;
        function addElementAt(element:IVisualElement, index:int):IVisualElement;
        function removeElement(element:IVisualElement):IVisualElement;
        function removeElementAt(index:int):IVisualElement;
        function removeAllElements():void;
        function getElementIndex(element:IVisualElement):int;
        function setElementIndex(element:IVisualElement, index:int):void;
        function swapElements(element1:IVisualElement, element2:IVisualElement):void;
        function swapElementsAt(index1:int, index2:int):void;
    
    }
    }
    

     

    위 인터페이스는 정확히 무엇을 의미하는가? 자식 추가할 때 이제 더이상 DisplayObject가 아니라는 것에 주목하자. DisplayObject대신 IVisibleElement를 관리하고 있다. 이것이 핵심이다. 즉 이제 런타임시가 아닌 컴파일 단계서부터 원천적으로 컨테이너에 자식들은 모두 IVisibleElement을 구현한 것만 다루겠다는 것이다. Flex 4는 Flex 3와 다르게 모든 컨테이너는 IVisibleElementContainer를 구현한 것이다. 그리고 mx.core.UIComponent는 IVisibleElement를 구현했다. 이로서 컨터이너에 붙는 자식들을 더욱 명확하게 사용할 수 있게 되었다.

     

    그럼 addChild, addChildAt은 어떻게 했을까? 아래 코드는 Spark 컨테이너의 SkinnableComponent와 GroupBase에 재정의된 것이다. 즉 이들 메소드를 사용하면 런타임시 예외처리를 해준다. 이 클래스를 확장해서 만든 Spark 계열의 컨테이너인 SkinnableContainer, SkinnableDataContainer, Group, DataGroup, Panel 전부 이렇게 동작한다.

        /**
         *  @private
         */
        override public function addChild(child:DisplayObject):DisplayObject
        {
            throw(new Error(resourceManager.getString("components", "addChildError")));
        }
        
        /**
         *  @private
         */
        override public function addChildAt(child:DisplayObject, index:int):DisplayObject
        {
            throw(new Error(resourceManager.getString("components", "addChildAtError")));
        }
    

     

    하지만 기존 Halo 기반의 컨테이너(mx.core.Container)는 addChild(), removeChild() 사용시 예외처리를 해두지 않았다. 물론 IVisualElementContainer는 구현했지만 말이다. 이는 기존 Flex 3 Halo 기반의 컴포넌트와의 호환성 문제 때문에 그리 한 것이라 판단한다.

     

    Flex 4 문서를 보면 되도록이면 Halo보다 Spark 기반의 컴포넌트와 컨테이너를 사용할 것을 권장하고 있다. 지금까지 소개한 내용도 그렇게 권장하는 이유중에 하나일 것이다.

     

    Flex SDK 개발자들이 Flex 2 시절 전부터 이런 문제를 알고 있었을 텐데 왜 지금에서야 바꿨는지... ㅎㅎㅎ

     

     

    참고글

    Spark Group - Functional and Design Specification

     

     

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

     

     

    서기님의 블로그를 보다가 너무 멋진 그림을 봐서 따왔다.

     

    Life Cycle of the Flex UIComponent Base Class

     

    그림의 출처 : http://danorlando.com/?p=122

     

    Flex의 모든 비주얼 컴포넌트는 Sprite를 확장한 UIComponent를 기반으로 한다. 생성할 대 호출되는 함수와 발생되는 이벤트에 대해서 하나의 그림으로 표현되어 있다. Flex 커스텀 컴포넌트를 작성해야할 때 Life Cycle을 이해하는 것은 반드시 필요하다. 그러므로 눈에다 팍팍 익혀두면 도움이 될 것이다.

     

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

     

     

    Flex 3에서 DataGrid의 Header부분의 Separator는 headerSeparatorSkin 스타일로 정의되어 있다. 화면은 Flex DataGrid에 Separator가 붙은 보통의 모습이다.

     

     

    위 프로그램은 아래와 같이 프로그래밍 한다.

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
    <mx:Application
    	name="DataGrid_headerSeparatorSkin_test"
    	xmlns:mx="http://www.adobe.com/2006/mxml"
    	backgroundColor="white" 
    	layout="vertical">
    	<mx:DataGrid id="dataGrid">
    		<mx:dataProvider>
    			<mx:ArrayCollection>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    			</mx:ArrayCollection>
    		</mx:dataProvider>
    	</mx:DataGrid>
    </mx:Application>
    
    

    만약 Separator를 지우고 싶다면 단순히 headerSeparatorSkin 에 mx.skins.ProgrammaticSkin으로 정의하면 된다. 아래는 실행화면과 소스코드이다. mx.skins.ProgrammaticSkin는 프로그램적으로 스킨을 만들 필요가 있을때 사용하는 클래스로 이 클래스 내부에서는 어떤 렌더링도 하지 않기 때문에 headerSeparatorSkin 을 이 클래스로 대체하는 것만으로도 Header의 separator를 삭제할 수 있는 것이다.

     

     

     

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
    <mx:Application
    	name="DataGrid_headerSeparatorSkin_test"
    	xmlns:mx="http://www.adobe.com/2006/mxml"
    	backgroundColor="white" 
    	layout="vertical">
    	<mx:DataGrid id="dataGrid" 
    		headerSeparatorSkin="mx.skins.ProgrammaticSkin">
    		<mx:dataProvider>
    			<mx:ArrayCollection>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    			</mx:ArrayCollection>
    		</mx:dataProvider>
    	</mx:DataGrid>
    </mx:Application>
    
    

     

    위 코드 대신 아래 코드처럼 <Style/> 블록이나 외부 .CSS 파일을 이용해서 headerSeparatorSkin의 스타일을 바꿀 수 있다.

     

     

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
    <mx:Application
    	name="DataGrid_headerSeparatorSkin_test"
    	xmlns:mx="http://www.adobe.com/2006/mxml"
    	backgroundColor="white" 
    	layout="vertical">
        <mx:Style>
            DataGrid {
                headerSeparatorSkin: ClassReference("mx.skins.ProgrammaticSkin");
            }
        </mx:Style>	
    	<mx:DataGrid id="dataGrid">
    		<mx:dataProvider>
    			<mx:ArrayCollection>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    			</mx:ArrayCollection>
    		</mx:dataProvider>
    	</mx:DataGrid>
    </mx:Application>
    

     

    또는 ActionScript 를 사용해 버튼을 누를때 동적으로 headerSeparatorSkin 스타일을 변경할 수 있도록 다음 코드처럼 만들 수 있다.

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
    <mx:Application
    	name="DataGrid_headerSeparatorSkin_test"
    	xmlns:mx="http://www.adobe.com/2006/mxml"
    	backgroundColor="white" 
    	layout="vertical">
        <mx:Script>
            <![CDATA[
                import mx.skins.ProgrammaticSkin;
    
                private function btn_click(evt:MouseEvent):void {
                    dataGrid.setStyle("headerSeparatorSkin", ProgrammaticSkin);
                }
            ]]>
        </mx:Script>
    
        <mx:Button id="btn"
                label="Set header separator skin"
                click="btn_click(event);" />
                
    	<mx:DataGrid id="dataGrid">
    		<mx:dataProvider>
    			<mx:ArrayCollection>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    			</mx:ArrayCollection>
    		</mx:dataProvider>
    	</mx:DataGrid>
    </mx:Application>
    
    

     

    좀더 파헤쳐보자.

     

    DataGrid에는 drawSeparators() 메소드가 protected로 지정되어 있다. 만약 DataGrid를 커스터마이징해서 Separator 그리는 방식을 바꾸고 싶다면 drawSeparators() 부터 찾아가면 된다. 아래 코드는 DataGrid의 drawSeparators() 메소드 정의이다

    /**
     *  Creates and displays the column header separators that the user 
     *  normally uses to resize columns.  This implementation uses
     *  the same Sprite as the lines and column backgrounds and adds
     *  instances of the headerSeparatorSkin and attaches mouse
     *  listeners to them in order to know when the user wants
     *  to resize a column.
     */
    protected function drawSeparators():void
    {
        DataGridHeader(header)._drawSeparators();
        if (lockedColumnHeader)
            DataGridHeader(lockedColumnHeader)._drawSeparators();
    }
    

     

    위 코드에서 볼 수 있듯이 결국 DataGridHeader에 정의된 _drawSeparators()쪽을 살펴봐야한다. 아래는 DataGridHeader의 _drawSeparators()와 drawSeparators() 부분이다.

    mx_internal function _drawSeparators():void
    {
        drawSeparators();
    }
    
    /**
     *  Creates and displays the column header separators that the user 
     *  normally uses to resize columns.  This implementation uses
     *  the same Sprite as the lines and column backgrounds and adds
     *  instances of the headerSeparatorSkin and attaches mouse
     *  listeners to them in order to know when the user wants
     *  to resize a column.
     */
    protected function drawSeparators():void
    {
        if (!separators)
            separators = [];
    
        var lines:UIComponent = UIComponent(getChildByName("lines"));
        
        if (!lines)
        {
            lines = new UIComponent();
            lines.name = "lines";
            addChild(lines); 
        }
        else
            setChildIndex(lines, numChildren - 1);
    
        // required to deal with some 2.x clipping behavior
        lines.scrollRect = new Rectangle(0, 0, unscaledWidth, unscaledHeight + 1);
    
        if (headerSepSkinChanged)
        {
            headerSepSkinChanged = false;
            clearSeparators();
        }
    
        var n:int = visibleColumns ? visibleColumns.length : 0;
        
        if (!needRightSeparator && n > 0)
        	n--;
        
        for (var i:int = 0; i < n; i++)
        {
            var sep:UIComponent;
            var sepSkin:IFlexDisplayObject;
            
            if (i < lines.numChildren)
            {
                sep = UIComponent(lines.getChildAt(i));
                sepSkin = IFlexDisplayObject(sep.getChildAt(0));
            }
            else
            {
                var headerSeparatorClass:Class =
                    getStyle("headerSeparatorSkin");
                sepSkin = new headerSeparatorClass();
                if (sepSkin is ISimpleStyleClient)
                    ISimpleStyleClient(sepSkin).styleName = this;
                sep = new UIComponent();
                sep.addChild(DisplayObject(sepSkin));
                lines.addChild(sep);
                
                separators.push(sep);
            }
            // if not separator
            if ( !(i == visibleColumns.length-1 && !needRightSeparatorEvents) )
            {
                DisplayObject(sep).addEventListener(
                    MouseEvent.MOUSE_OVER, columnResizeMouseOverHandler);
                DisplayObject(sep).addEventListener(
                    MouseEvent.MOUSE_OUT, columnResizeMouseOutHandler);
                DisplayObject(sep).addEventListener(
                    MouseEvent.MOUSE_DOWN, columnResizeMouseDownHandler);
            }
    		else
    		{
                // if not separator
                if ( (i == visibleColumns.length-1 && !needRightSeparatorEvents) )
                {
                    DisplayObject(sep).removeEventListener(
                        MouseEvent.MOUSE_OVER, columnResizeMouseOverHandler);
                    DisplayObject(sep).removeEventListener(
                        MouseEvent.MOUSE_OUT, columnResizeMouseOutHandler);
                    DisplayObject(sep).removeEventListener(
                        MouseEvent.MOUSE_DOWN, columnResizeMouseDownHandler);
                }
    		}
    
            var cols:Array = visibleColumns;
            if (!(cols && cols.length > 0 || dataGrid.headerVisible))
            {
                sep.visible = false;
                continue;
            }
    
            sep.visible = true;
            sep.x = headerItems[i].x +
                    visibleColumns[i].width - Math.round(sepSkin.measuredWidth / 2);
            if (i > 0)
            {
                sep.x = Math.max(sep.x,
                                 separators[i - 1].x + Math.round(sepSkin.measuredWidth / 2));
            }
            sep.y = 0;
            sepSkin.setActualSize(sepSkin.measuredWidth, Math.ceil(cachedHeaderHeight));
            
            // Draw invisible background for separator affordance
            sep.graphics.clear();
            sep.graphics.beginFill(0xFFFFFF, 0);
            sep.graphics.drawRect(-separatorAffordance, 0,
    							  sepSkin.measuredWidth + separatorAffordance,
    							  cachedHeaderHeight);
            sep.graphics.endFill();
    		sep.mouseEnabled = true;
        }
    
        while (lines.numChildren > n)
        {
            lines.removeChildAt(lines.numChildren - 1);
            separators.pop();
        }
    }
    

     

    DataGridHeader의 drawSeparators()에서 headerSeparatorSkin 스타일을 사용하는 것을 찾아볼 수 있다. 개발자는 이 부분을 커스터마이징할 수 있는 것이다.

     

    DataGrid나 DataGridHeader를 커스터마이징할 필요없이 스킨만 변경하고 싶다면 headerBackgroundSkin의 기본 스킨인 mx.skins.halo.DataGridHeaderSeparator를 커스터 마이징하거나 mx.skins.Programmatics를 확장해서 사용하면 되겠다. 아래코드는 DataGrid에서 headerBackgroundSkin이 Style로 정의된 것을 보여주고 있다.

    /**
     *  The class to use as the skin that defines the appearance of the  
     *  background of the column headers in a DataGrid control.
     *  @default mx.skins.halo.DataGridHeaderSeparator
     */
    [Style(name="headerBackgroundSkin", type="Class", inherit="no")]
    

     

     

    아래 코드는 mx.skins.halo.DataGridHeaderSeparator를 보여준다.

    ////////////////////////////////////////////////////////////////////////////////
    //
    //  ADOBE SYSTEMS INCORPORATED
    //  Copyright 2005-2007 Adobe Systems Incorporated
    //  All Rights Reserved.
    //
    //  NOTICE: Adobe permits you to use, modify, and distribute this file
    //  in accordance with the terms of the license agreement accompanying it.
    //
    ////////////////////////////////////////////////////////////////////////////////
    
    package mx.skins.halo
    {
    
    import flash.display.Graphics;
    import mx.skins.ProgrammaticSkin;
    
    /**
     *  The skin for the separator between column headers in a DataGrid.
     */
    public class DataGridHeaderSeparator extends ProgrammaticSkin
    {
    	include "../../core/Version.as";
    
    	//--------------------------------------------------------------------------
    	//
    	//  Constructor
    	//
    	//--------------------------------------------------------------------------
    
    	/**
    	 *  Constructor.
    	 */
    	public function DataGridHeaderSeparator()
    	{
    		super();
    	}
    	
    	//--------------------------------------------------------------------------
    	//
    	//  Overridden properties
    	//
    	//--------------------------------------------------------------------------
    
    	//----------------------------------
    	//  measuredWidth
    	//----------------------------------
    	
    	/**
    	 *  @private
    	 */
    	override public function get measuredWidth():Number
    	{
    		return 2;
    	}
    	
    	//----------------------------------
    	//  measuredHeight
    	//----------------------------------
    
    	/**
    	 *  @private
    	 */
    	override public function get measuredHeight():Number
    	{
    		return 10;
    	}
    	
    	//--------------------------------------------------------------------------
    	//
    	//  Overridden methods
    	//
    	//--------------------------------------------------------------------------
    
    	/**
    	 *  @private
    	 */
    	override protected function updateDisplayList(w:Number, h:Number):void
    	{
    		super.updateDisplayList(w, h);
    		var g:Graphics = graphics;
    		
    		g.clear();
    		
    		// Highlight
    		g.lineStyle(1, 0xFFFFFF, 0.5);
    		g.moveTo(0, 0);
    		g.lineTo(0, h);
    		g.lineStyle(1, getStyle("borderColor")); 
    		g.moveTo(1, 0);
    		g.lineTo(1, h);
    	}
    
    }
    
    }
    

     

    이외로 단순해서 놀랬는가? 결국 이 스킨은 borderColor 스타일로 지정된 색으로 구분자 선만 그어준다. 나는 이것을 바꿔서 실선을 점선을 그리도록 해보겠다. 아래 코드는 이를 구현한 DataGridHeaderDotSeparator 클래스이다.

     

    package
    {
    import flash.display.Graphics;
    
    import mx.skins.halo.DataGridHeaderSeparator;
    
    /**
     * DataGrid Header에 점선을 그린다.
     */ 
    public class DataGridHeaderDotSeparator extends DataGridHeaderSeparator
    {
    	/**
    	 *  Constructor.
    	 */		
    	public function DataGridHeaderDotSeparator()
    	{
    		super();
    	}
    	
    	/**
    	 *  @private
    	 */		
    	override protected function updateDisplayList(w:Number, h:Number):void
    	{
    		var g:Graphics = graphics;
    		
    		g.clear();
    		
    		
    		g.lineStyle(1, getStyle("borderColor"), 1); 
    		var i:int;
    		for( i = 0; i < h; i+=4 )
    		{
    			g.drawCircle( 1.5, i, 0.5 );
    		}
    	}		
    }
    }
    

     

     

    아래 코드는 DataGridHeaderDotSeparator 스킨을 사용하는 예제이다.

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
    <mx:Application
    	name="DataGrid_headerSeparatorSkin_test"
    	xmlns:mx="http://www.adobe.com/2006/mxml"
    	backgroundColor="white" 
    	layout="vertical">
    	<mx:DataGrid id="dataGrid"
    		headerSeparatorSkin="DataGridHeaderDotSeparator">
    		<mx:dataProvider>
    			<mx:ArrayCollection>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    			</mx:ArrayCollection>
    		</mx:dataProvider>
    	</mx:DataGrid>
    </mx:Application>
    
    

     

    아래는 위 코드를 실행한 화면이다. Header부분에 구분자(Separator)가 점선으로 되었다. 좀 뭉뚝하지만 그냥 예제일 뿐이니깐 넘어가자. ^^;

     

     

    Flex는 이처럼 프로그램적으로 스킨을 변경할 수 있다. 물론 이미지를 이용하는 방법도 있다. 이와 같은 방법으로 스킨을 변경하는 것은 Flex의 모든 컴포넌트에서 지원하므로 이런 스킬에 익숙해질 필요가 있겠다.

     

    원본 예제 : Removing the header separator on the DataGrid control in Flex

     

    주절주절 : 그냥 이렇게 가볍게 포스팅하는 것이 좋을 것 같다는 생각이 든다.

     

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

     

    기존 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 사용기간에 구애받지 말고 마음대로 쓰세요.

    ActionScript 3.0(이하 AS3)은 Java와 매우 유사한 구조를 가진다. 그러므로 Java를 공부한 사람이라면 AS3를 쉽게 접근할 수 있게 된다. C++을 했던 사람도 비슷한 구조때문에 쉽게 접근이 가능하다.

     

    AS2를 공부했던 사람은 객체지향적으로 설계된 AS3를 공부하면 된다.

     

    여기서는 ActionScript 3.0에 대해서 어떤 절차없이 생각나는대로 적어보았다. 매우 개인적인 생각이기 때문에 반박하고 싶으신 내용도 있을지 모르겠다. 그렇다면 얼마든지 댓글 환영이다. ^^

     

     

    Java와 ActionScript 3.0 차이점

     

    Java와 AS3간에 차이점을 보여주는 표이다. 쭉 훑어보자.

    http://blog.naver.com/surfwon/30049390718

     

     

    ActionScript 3.0의 아쉬운점

     

    AS3는 객체지향기반의 언어이지만 몇가지 아쉬운 점이 존재한다.

     

    1. 메소드(함수)의 오버로드(overload)를 할 수 없다.

     오버로드는 클래스안에 같은 이름의 함수를 중복해서 사용할 수 있는 기능이다. AS3에서는 Java나 C++에서 지원되는 이 오버로드 기능이 없기 때문에 개발시 아에 생각을 하지 않게 하는 장점도 있지만 정말 필요할때 다른 방법으로 대체해야하는 불편함이 생긴다. 아래글을 보자.

     http://blog.jidolstar.com/484

     

    2. 생성자는 하나만 존재한다.

    위 오버로드를 지원하지 않는 것과 일맥 상통하는 내용이다.

     

    3. 추상클래스가 지원되지 않는다.

    Java와 같은 abstract 키워드가 존재하지 않아 추상클래스를 만들 수 없다. 하지만 throw등을 이용해 컴파일시가 아닌 런타임에서 동작하는 추상클래스는 제작이 가능하다. 추상클래스는 AS3에도 클래스 설계시 꼭 필요하지만 아직 지원하지 않아 아쉬운 부분이다. 아래 글을 보자.

    http://blog.jidolstar.com/452

     

     

    4. private 생성자가 지원되지 않는다.

    private 생성자는 외부에서 클래스 객체를 임의로 만드는 것을 금지시켜주는 역할을 한다. 하지만 AS3에서는 생성자에 public외에는 private, protected 를 쓸 수 없다. private 생성자가 필요한 단적인 예는 싱글턴 패턴을 구현할 때인데 AS3에서는 아래와 같이 다른 방법으로 싱글턴 패턴을 구현한다.

    http://koko8829.tistory.com/304

     

    아래 링크는 싱글턴 패턴을 응용한 형태이다.

    http://blog.jidolstar.com/468

     

     

     

    ActionScript 3.0을 왜 사용해야하는가?

     

    AS2를 주로 했던 사람은 AS3의 강력함을 잘 느끼지 못해서 전향하지 않는 사람들이 많은 것 같다. 아래 글을 보고 AS3를 왜 해야하는가 알아보자.

     

    AS3를 왜 사용해야하는가? : http://ddongkang.tistory.com/76 

     

     

    ActionScript 3.0 의 재미

     

    초보자가 Java, C++에서 느끼지 못하는 AS3의 재미는 처음 만드는 애플리케이션이 시각화된 결과물이라는 점일 것이다. 이 게시판에 앞어 간단한 AS3프로젝트를 통해 3D를 단 몇줄도 안되는 코드로 구현했던 것을 보면 그 의미를 알 것이다. 또한 AS3를 하다보면 매우쉽게 데이터통신, 데이터제어, 각종 미디어 기술지원, Flex, AIR로의 개발확장성등으로 인해 C++, Java와는 또 다른 재미를 느끼게 될 것이다.

     

     

    ActionScript 3.0 공부하자.

     

    AS3는 얼마든지 공부할 수 있다. 좋은 동영상 강좌도 있다.

    AS3 강좌모음 : http://ddongkang.tistory.com/73

     

    AS3 학습을 위해 아래 링크의 문서와 친해지자.(한글이라서 좋다!)

    http://help.adobe.com/ko_KR/ActionScript/3.0_ProgrammingAS3/

    http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/

     

    위 문서는 영문도 있다.

    http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/

    http://help.adobe.com/en_US/AS3LCR/Flash_10.0/

     

     

     

    Flash 기술에 대한 오해

     

    아래 글에 오해하시는 분들이 많으신 것 같아요. 아래 제 댓글을 보시고 제가 보는 관점에서 아래 글을 판단해주셨으면 합니다. ^^

     

    C++,  Java하시던 분(기초수준 및 서버개발만 주로 한 분들)이 AS3나 Flex를 접할때 잘못된 태도가 있다. 내가 좀 언어좀 하는데 그냥 쉽게쉽게 할 수 있겠지라는 마인드이다. 또는 Flash인데 그것도 언어야?... 이런 마인드.. 금물이다.

     

    AS3나 Flex도 그만의 독특한 구조와 기능이 있다. C++, Java만 했던 사람이 데이터 바인딩, 메타데이터태그, 이벤트 모델, 비디오제어, 음원제어, 마이크로폰 제어, 디스플레이객체 다루기, 응용애플리케이션구조,각종보안, XML 다루기등에 대해서 잘 알리가 없지 않은가? 그만큼 Flash 기술이 단순히 그래픽을 위한 기술이다라고 오해하는데서 비롯된다고 생각한다. Flash 기술은 이미 데스크탑에서 모바일, 각종운영체제, 각종 브라우져에 MS계열의 기술보다 더욱 빠르고 거대하게 확장되어 이미 우리 실생활에 적용되고 있다. 그러므로 AS3.0을 공부할때 너무 가벼운 마음으로만 공부한다는 생각은 버리자. 요즘 안드로이드 폰에 Flash 지원하고 앞으로 AIR로 각종 모바일 프로그램을 만들 수 있게 된다는 것을 생각하면 가벼운 기술은 아니구나라는 생각을 할 수 있을 것이다.(못믿겠으면 여기를 본다) Flash는 이미 클라이언트 기반을 넘어 서버기반의 기술도 지원해주어 진정한 RIA의 선봉장에 있다. 이러한 점을 잘 이해하고 Flex,AS3,AIR,Flash등을 공부하는 것이 좋겠다.

     

    Flex Builder에서 라이브러리 프로젝트를 구성하다가 컴파일시 "unable to export SWC oem" 에러가 발생하며 SWC를 생성하지 못하는 경우가 종종 발생한다. 대부분의 경우, 라이브러리 빌드 Assets 경로에 등록한 파일의 경로가 강제로 수정되거나 삭제되었을 때 발생한다. 이 에러를 해결하기 위해 다음과 같이 진행해보자.

     

    이 Assets 경로는 SWC로 만들때 필요한 자원을 포함하기 위한 것으로 comps 컴파일러의 옵션중에 -include-file 을 주는 것과 동일하다.

     

    만약 존재하는 asset이 Assets 리스트에 존재하는데도 불구하고 에러가 발생했다면

     

    1. Project 메뉴 > Properties > Flex Library Build Path > Assets 탭

    2. asset을 uncheck한다.

    3. OK버튼을 누른다.

    4. 다시 똑같이 돌아가서 해당 asset을 re-check한뒤 OK버튼을 누른다.

     

     

    만약 존재하지 않는 asset이 Asset 리스트에 등록되어 있어 에러가 발생했다면 임시로 해당 asset을 추가하는 방법으로 해결한다.

     

    1. New > File 에서  하나의 파일을 만든다.

    2. Project 메뉴 > Properties > Flex Library Build Path > Assets 탭

    3. 새로 만든 파일을 check한다.

    4. OK 버튼을 누른다.

    5. 다시 돌아가 새로운 파일을 uncheck한 뒤 그것을 삭제한다.

     

     

    같은 에러가 발생한 분들에게 도움이 되었으면 한다. ^^

    옥상훈님이 운영하시는 개발자 모임인 OkGosu.Net에서 Adobe RIA관련 커뮤니티 세미나를 엽니다.

    자세한 내용은 아래와 같습니다.

    소개 :
    OkGosu.Net은 지난 2008년 9월1일에 오픈한 커뮤니티로 회원수는 700여명에 달하며 Flex관련 스터디를 하는 개발자의 모임이다. Flex를 비롯하여 RIA와 UX관한 최신 뉴스, 온라인 질문 답변 그리고 정기적인 세미나 활동을 주로 하고 있다.

     

    시간 :
    2009년 5월 23일(토) 13:30 ~ 17:30

     

    장소 :
    서울특별시 서초구 서초동 비트아카데미 멀티미디어관 지하 2층

     

    강의내용 :
    13:30 ~ 14:00 접수 및 입장완료
    14:00 ~ 14:40 플렉스로 구글 가젯 (위젯) 만들기 - 옥상훈
    14:50 ~ 15:30 자바스크립트로 만드는 매쉬업 Adobe AIR 애플리케이션 이야기 - 오창훈
    15:40 ~ 16:20 스타플 서비스에서 사용된 Flex 기술 - 지용호
    16:30 ~ 17:10 플래시 플랫폼으로 구현하는 FaceBook 매쉬업 애플리케이션 개발
                       - 이정웅
    17:10 ~ 17:30 폐회사

     

    강사 :
    옥상훈, 오창훈, 지용호, 이정웅

     

    참가비 :
    무료

     

    저는 스타플 서비스에 사용한 Flex 기술이라는 제목으로 발표할 예정입니다. 강의내용을 어떻게 정해야할지 모르겠는데요. 개발자들 모임이니 기술적인 내용을 원하겠죠? 혹시라도 궁금한 사항을 댓글에 적어주신다면 반영해서 준비하도록 하겠습니다.

     

    사전접수는 아래 링크에서 하시면 됩니다.

     

    사전접수 : http://www.devmento.co.kr/dtfe/conference/register/register_form.jsp?cseq_no=9

    이외에도 5월에는 다양한 행사를 하네요.

    아래 열이아빠님의 글을 참고하시면 도움이 될 것 입니다.

     

    5월에 다채로운 RIA와 관련된 이야기를 만나보세요

     

     

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

    + Recent posts