여러분은 어떤 툴로 플래시를 개발 하시나요? 플래시를 개발 할 수 있는 툴은 참 다양하게 있습니다. SWF 포멧 자체가 공개 되어 있기 때문에 심지어 바이너리를 수정 해서도 만들 수 있습니다. 일반적인 경우 Flash IDE 나 Flash Builder 를 많이 이용 하지요. 저 같은 경우 재작년 까지는 Flash Develop 이 가벼워서 애용하다가 최근에는 Flash Builder 에서 주로 작업을 하고 있습니다. 모두 좋은 툴이므로 본인의 상황에 맞게 이용하면 되겠지요.
그런데 근래에 들어 사용횟수가 부쩍 늘어난게 있는데 바로 Vim 입니다. 정확하게는 터미널에서 작업을 한다고 해야 되겠네요. 터미널에서 작업을 하면 가장 좋은게 더 이상 마우스 질을 하기 위해서 손을 움직이지도 않아도 된다는 겁니다. 디자이너 출신인 제가 마우스 질 하기가 귀잖다는게 참 아이러니 하네요. ㅎㅎㅎ 여튼 그래서 터미널에서 플래시를 개발하는 방법과 유용한 Vim 플러그인을 소개 해 보겠습니다. 참고로 테스트 환경은 MaxOS X 10.7.2, Vim 7.3 입니다.
1. Download lastest Flex SDK or Flash Builder
2. Setting PATH & alias
[bash]
export PATH=/usr/local/git/bin:/opt/local/bin:/opt/local/sbin:/usr/bin:/bin: /usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin:/opt/local/bin:/usr/local/git/bin:/Applications/Adobe Flash Builder 4.5/sdks/4.5.1_AIR3/bin
alias flash=’/Applications/Adobe Flash Builder 4.5/player/mac/11.1/Flash Player Debugger.app/Contents/MacOS/Flash Player Debugger’
[/bash]
빌드를 편하게 하기 위해서 PATH 와 단축키를 설정 합니다. PATH 에는 빌더의 bin 폴더를 alias 에는 사용할 플레이어 실행 파일을 설정합니다. 플레이어의 경우 절대경로 상에서 실행하지 않으면 안되므로 alias 로 만들어 줘야 합니다. 이렇게 하면 간단하게 mxmlc 로 컴파일 하고 flash 로 실행 할 수 있게 됩니다.
3. Download Vundle
Vim 플러그인 관리툴 입니다. 한번에 간단하게 플러그인 들을 설치/관리 할 수 있습니다. 파일트리를 볼 수 있는 NERD Tree 와 actionscript syntax 를 해주는 vim-actionscript 등을 유용한 플러그인을 설치 할 수 있습니다.
4. Download AutoComplPop
Vim 같은 터미널 에디터를 쓸 때 참 아쉬운게 자동완성 기능인데 IDE 처럼 완벽하지는 않지만 나름 코딩시간을 많이 줄여 줍니다.
5. Setting .vimrc
[bash]
" my setting
set nu
set autoindent
set smartindent
syntax enable
set nocompatible " be iMproved
filetype off " required!
set rtp+=~/.vim/bundle/vundle/
call vundle#rc()
" let Vundle manage Vundle
" required!
Bundle ‘gmarik/vundle’
" My Bundles here:
"
" original repos on github
Bundle ‘tpope/vim-fugitive’
Bundle ‘Lokaltog/vim-easymotion’
Bundle ‘rstacruz/sparkup’, {‘rtp’: ‘vim/’}
Bundle ‘tpope/vim-rails.git’
Bundle ‘jeroenbourgois/vim-actionscript’
Bundle ‘scrooloose/nerdtree’
" vim-scripts repos
Bundle ‘L9’
Bundle ‘FuzzyFinder’
" non github repos
Bundle ‘git://git.wincent.com/command-t.git’
" …
filetype plugin indent on " required!
"
" Brief help
" :BundleList – list configured bundles
" :BundleInstall(!) – install(update) bundles
" :BundleSearch(!) foo – search(or refresh cache first) for foo
" :BundleClean(!) – confirm(or auto-approve) removal of unused bundles
"
[/bash]
Vundle 설치를 위한 설정과 자동들여쓰기 옵션 등을 본인의 기호에 맞게 설정합니다. 대충의 설정이 끝났습니다. 이제 열심히 코딩 합시다. ^^
영상은 어웨이에 구를 넣어 swf 를 만들기 까지 vim 과 builder 코딩시간비교 입니다. 원래 목표는 “vim 이 훨씬 빨라요.” 뭐 이런 결과를 보여드리고 싶었는데 별반 차이가 없네요. ㅎㅎㅎ
]]>이런 시점에서 Adobe Labs 에 Packager for iPhone 의 업데이트 되었습니다. 지금까지는 Flash CS5 를 이용해서만 앱을 만들 수 있었지만 이제는 Flash Builder 나 Flex SDK 를 사용하는 다른 툴에서 아이폰용 앱을 만들 수 있게 되었습니다. 그래서 Flash Bulider 에서 앱을 만들어보려고 Packager for iPhone 를 Flash Builder 의 SDK 에 넣었지만 당연하게도 탬플릿이 없어서 만들어 볼 수가 없었습니다. 제 기억에 Packager for Android 의 경우에는 xmp로 배포해서 Flash Builder 에 바로 설치 했던 것 같은데 말이죠. 그래서 일단 다른 템플릿을 찾아봤는데 다행히도 FlashDevelope용 템플릿을 벌써 누군가 만들어 놨더군요. 아마 다음버전에는 템플릿이 포함될 것 같습니다. 오늘은 이 FlashDevelop를 이용해서 앱을 만들어 보기로 하겠습니다.
그전에 잠시~
플래시가 스마트폰에서 돌아가는 걸 잠깐 살펴 보겠습니다. 플래시가 아이폰에서 돌아갈 수 있게 되서 1희1비 하시는 분들도 있을 것 같습니다. 하지만 실상은 그렇게 좋기만 한 건 아닙니다. 물론 앱스토어에 플래시를 올릴 수 있게 되었으니 플래시개발자로서 더 많은 기회를 얻은 것은 사실입니다. 하지만 그 기회가 그렇게 생각처럼 크지 않다는게 문제 입니다. 위의 표는 플래시가 스마트폰에서 구동되는 상태를 아주 대강 보여주고 있습니다. 각OS 가 있고 그 위에 VM 인 AIR 가 있습니다. 그 위에서 우리의 플래시 파일이 돌아갑니다.
1차문제는 각 폰의 스펙이 천차만별이라는 겁니다. 뭐 이건 노가다로 어느정도 해결 할 수 있습니다. 하지만 2차문제는 조금 본질적입니다. 우리가 플래시에서 구현 할 수 있는 액션은 OS 와 SWF 중간에 있는 AIR에 의존적입니다. 근데 이 AIR 가 폰의 모든 기능을 소화해 주지 않는 다는 겁니다. 예를 들자면 제 아이폰은 500만 화소의 카메라가 있지만 AIR 는 카메라를 지원하지 않습니다. G센서라던가 GPS 모두 지원하지 않습니다. 결국 스마트폰을 그닥 스마트하게 사용 할 수 없게 되지요. 아래는 AIR 에서 지원하지 않는 기능 목록입니다.
물론 앞으로 버전업을 하면서 지원여부가 어떻게 될지는 모르겠습니다. 그리고 기존 AIR 에 없던 기능들도 아이폰용으로 추가된게 있는 걸 보면 각 OS별로 AIR의 지원스펙이 다르게 나올 수도 있을 것 같습니다. 여튼 결론은 Object-C 같은 Native 언어로 만드는 앱과 플래시로 만드는 앱의 성격이나 기능이 분명히 나뉠 거라는 겁니다. 이에 플래시개발자들은 프로젝트의 요구사항을 잘 판단해서 앱개발을 해야 될 것 같습니다.
서론이 상당히 길어졌는데 본론인 FlashDevelop에서 앱만드는 과정을 살펴 보겠습니다. 우선 먼저 준비물들 입니다.
- Flex 4 SDK – http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex4sdk
- Packager for iPhone – http://labs.adobe.com/downloads/packagerforiphone.html
- FlashDevelop – http://www.flashdevelop.org/community/viewforum.php?f=11
- FlashDevelop iPhone Project – 090-ActionScript-3-iPhone-AIR-AS3-Projector
- .p12 & .mobileprovision
5번의 인증서는 제가 전에 올린 글을 참고 해서 만들면 됩니다. (Flash CS5 iPhone os settings) 이제 모든 준비물이 준비되었습니다.
아래 내용과 이미지는 http://blubl.geoathome.at/2010/09/flash-iphone-entwicklung-mit-flashdevelop-und-dem-adobe-packager-for-iphone/ 를 수정, 변경 한 것임을 먼저 알립니다.
Flex 4 SDK 와 Packager for iPhone
제일 먼저 다운받은 Flex 4 SDK 폴더에 Packager for iPhone 를 복사해서 합칩니다.
FlashDevelop iPhone Project Template
FlashDevelop 프로젝트를 다음의 경로에 복사합니다.
C:[FlashDevelop]FlashDevelopProjects
이제 프로젝트 생성 메뉴에서 iPhone 프로젝트를 볼 수 있습니다.
Flex SDK 경로 수정
아이폰 패키지가 들어가 있는 SDK로 경로를 자신에 맞게 수정합니다. 위치는 다음과 같습니다. Project -> Properties… -> “Compiler Options” -> “Custom Path to Flex SDK”
PackageApplication.bat 수정
PackageApplication.bat 파일 13번줄의 Flex SDK 위치도 변경해줍니다. 주의할 점은 경로에 bin 폴더까지 포함 된다는 점 입니다. 사실 이 배치파일이 이 템플릿의 핵심이 아닐가 싶습니다. 요것만 있으면 Flash Builder에서 만든 swf 를 ipa 로 바꿀 수 있으니까요. Flash Builder 의 프로젝트 SDK 와 ADL 도 경로만 수정해 주면 될 듯 합니다.
인증서 복사
swf 를 만들고 테스트 하는데 까지는 인증서가 필요 없지만 .ipa로 만들기 위해서는 반드시 인증서 파일이 필요합니다. 인증서 파일을 “certificates” 폴더에 복사합니다. 인증서 이름은 “iphone_dev.p12” 와 “iphone_dev.mobileprovision” 로 변경합니다. 이 파일 이름은 PackageApplication.bat 에 정의 되어 있습니다.
SWF 테스트
이미 프로젝트 탬플릿에 텍스트가 들어가 있으니 바로 빌드를 해봅니다. 만약 정상적으로 “Air Debug Launcher” 를 실행시키지 못한다면 Project -> Properties… -> Test Movie… -> “Run custom command…” -> Edit 에서 아이폰패키지 SDK 의 ADL.exe 를 실행 할 수 있도록 경로를 수정합니다.
.ipa 만들기
PackageApplication.bat 을 실행합니다. 만들 ipa 의 종류를 묻는 질문이 나옵니다. 해당상황에 맞게 선택합니다. 각 옵션이 정확하게 어떤차이가 있는지 정확히는 모르겠습니다. 다만 test 의 경우 컴파일 시간이 짧은 대신 최종 ipa 의 용량이 조금 큽니다. store 의 경우 는 반대로 컴파일이 오래걸리고 ipa 용량이 조금 작습니다. store의 경우 아마 컴파일을 최적화 해 주는게 아닌가 싶습니다.
please be patient~ ㅎㅎㅎ
드디어 그토록 원하던 ipa가 생성 되었습니다.
해당 파일은 아래의 위치에 생성됩니다.
다음에는 실제로 ipa를 만들어 아이폰에서 구동되도록 만들어보고 이때 주의할 점과 팁을 알아보도록 하겠습니다.
]]>아직까지는 대부분의 플레이어가 Flash Player 9이기 때문에 FP10으로 실 프로젝트를 진행 할 수는 없다. 다만 성급한 작업자로서 FP10의 새로운 기능들과 테스트를 위해서 FP10 swf파일(이하 swf)을 만들 수 있는 환경을 만들어 보았다.
1. 준비물
FP10으로 작업을 하기 위해서는 swf를 만들어 줄 SDK와 FP10이 필요하다. 아직까지 Flash 10이 없으므로 현재까지 swf를 만들 방법은 Flex SDK를 이용하는 수 밖에 없다. 최신에 나온 Flex 3, Flex 4 모두 이용 할 수 있다. 다만 Flex 4 의 변경된 점 도 알아볼 겸 Flex4 를 추천한다. 그리고 마지막으로 FP10을 준비한다.
– Flex 3 SDK : 다운로드
– Flex 4 SDK : 다운로드
– Flash Player 10 : 다운로드
– Flash Player 10 Debug : 다운로드
최근 FP10 Debug 또한 릴리즈 되었다. Debug를 이용할 사용자라면 FP10 Debug를 설치 할 것을 추천한다.
2. Flash Player 10 설치하기
a. 기존의 Flah Player 삭제
b. FP10 설치
3. Flex Builder 3 설정하기
a. flex_config.xml 설정
기존에는 FLEX_SDK/frameworks/flex-config.xml 을 수정해 줬어야 하지만 최신 SDK 는 FP10 이 기본으로 설정 되어 있으므로 따로 수정해줘야 할 필요는 없다. 다만 필자도 이상하게 playerglobal.swc 가 인식이 안되어서 제대로 컴파일이 안되는 문제가 있었는데 만약 Flex Builder 에 SDK 를 설치하고 나서 제대로 컴파일이 안된다면
[sourcecode language=”xml”]
[/sourcecode]
[sourcecode language=”xml”]
두 부분의 {targetPlayerMajorVersion}을 10 으로 변경하고 재설치 해보기 바란다.
b. Flex SDK 설치
메뉴 -> Window > Preferences > Flex > Installed Flex SDKs 에서 새로운 SDK를 설치한다.
c. Project 설정
새로운 Project를 생성하고 메뉴 -> Project > Properties > Flex Compiler 에서 Flex SDK version 과 Require Flash Player version 을 수정한다.
4. 테스트
새로운 mxml 파일을 만들고 아래에 코드를 넣어 버젼을 확인한다.
[code xml]
…수정중…
[/code]
5. 맺음말
FP10은 많은 새로운 기능들을 선보이며 화려하게 선보였다. 아직은 버그나 보안, 시스템에 최적화 등 많은 문제점을 가지고 있지만 이러한 것들은 앞으로 충분히 개선이 되리라 생각한다. 따끈따끈한 FP10 으로 모두 즐플 하시길 바랍니다.
6. 참고
http://opensource.adobe.com/wiki/display/flexsdk/Targeting+Flash+Player+10+Beta
http://blog.jidolstar.com/360