Flash Game Dev :: Starling & Mobile

JSON으로 통신할 때 테스트하려고 브라우져에서 보면

죄다 텍스트로 나와서 짱났었는데

브라우저 플러그인을 쓰니 완전 편하네요 ㅋ

FireFox : [ JSON View 바로 설치 ]



Chrome : [ JSON Formatter ]




p.s) IE는 취급 안함다 ㅋ



For the Better.

어도비에서 얼마전에 Adobe Creative Suite 5.5를 선보였습니다.

사실 그 전에 이미 Flash Builder Burrito가 올라와서 많이 사용되었었는데

이번 CS 5.5 정식버전에서 Flash Builder 4.5로 정식 릴리즈 되었습니다.

새로 릴리즈된 버전에서는 iOS용 빌드가 포함되었습니다.



또 이번 AIR 2.7에서부터는 iOS에서도 웹 브라우저를 띄울 수 있게 되었습니다.

바로 StageWebView입니다.

그동안 이 기능이 지원되지 않아서 페이스북이나 트위터등 다양한 외부 API를 쓰기 어려웠습니다.

oAuth를 지원하기 위해서는 앱내에서 브라우저를 띄우는게 필수이기 때문입니다.

StageWebView가 지원되면서 이제 페이스북이나 네이트등의 외부 API를 사용할 수 있게 되었습니다.

oAuth는 무지 어려우므로 일단 Flash Builder 4.5를 둘러보고 iOS를 만들어보는 간단한 샘플을 만들어 보겠습니다.



브라우저를 위와 아래 두개를 띄워 트위터와 페이스북을 동시에 쓰는 앱을 만들어보겠습니다.

(급조해서 만든 아이디어치고는 괜찮지 않아요? ㅋㅋ)

자, 서론 다 빼고 간단하게 따라하기로 바로 만들어보겠습니다.

개발자 인증서 받기
Flash Builder 4.5를 실행합니다.

"Package Explorer"에서 우클릭 > New > ActionScript Mobile Project를 선택합니다.



Next를 눌러 다음과 같이 프로젝트 명을 iDualBrowser라고 입력합니다.



프로젝트명을 입력하고 Next를 선택하면 모바일 환경 설정을 할 수 있습니다.



위 그림은 기본 설정인데 우리 프로젝트에 맞게 다음과 같이 설정을 해줍니다.



"Platform Settings"에서 Target Devices를 아이폰, 아이팟용으로 설정해줍니다.

큰 의미는 없지만 설정은 설정이니까요 :)

해보진 않았지만 아마 저 설정에 따라서 앱스토어에 등록될 때 설정이 될거라고 생각합니다.

그리고 "Automatically Reorientation"은 체크 해제해주고 (아이폰을 기울이면 자동으로 회전되는 그 기능입니다, 꼭 지원되야 되는 앱이 아니면 안하는게 건강에 좋아요 ㅋ)

그리고 전체 화면에 체크해줍니다 (체크하지 않으면 시간과 통신사, 배터리를 표시해주는 상단 탭이 나타납니다)



그리고 마지막으로 애플리케이션의 ID를 지정해줍니다.

이 애플리케이션 ID는 매우 중요합니다.

꼭 기록해두시거나 알아보기 쉬운 ID를 지정합니다.



마지막으로 "Finish"를 누르면 프로젝트 생성을 마치고 코딩창으로 이동합니다.

다음과 같은 코드를 입력합니다.

StageWebView를 만드는 코드는 어렵지 않습니다.

StageWebView API 보기



한줄씩 살펴보겠습니다.


StageWebView 객체를 생성하고 stage를 지정해줍니다.

addChild가 아닌 stage를 등록해주는 이유는

실제로 iOS에서 보여지는 브라우저 화면은 디스플레이 객체의 하나로써 보여지는게 아니라

stage위에 즉, 캔버스보다 위에 별도로 보여지는 영역이기 때문입니다.

즉 어떤 객체 밑으로 넣을 수 없다는 점을 꼭 기억해야합니다.


브라우저의 크기를 지정해줍니다.

x, y를 따로 지정해주는게 아니라 보여질 영역을 직접 지정해주는 것입니다.

상단의 절반을 차지하도록 설정한 것입니다.


그리고 나서 어떤 페이지를 보여줄지 URL을 지정해줍니다.

이렇게 상단과 하단을 나눠서 두 개의 StageWebView를 생성해줍니다.

addChild같은건 하지 않습니다.



여기서 Command + F11을 누르면 다음과 같이 뜰 것입니다.



디버그의 옵션이 중요해진 이유는

시뮬레이터로 디버깅을 할 것이냐

디바이스에서 테스트하기 위해 ipa파일을 뽑을것이냐를 선택해야하기 때문입니다.

먼저 시뮬레이터로 테스트해보겠습니다.

"Launch Method"에서 on desktop을 선택하고 iPhone 4를 선택합니다.



설정을 마치고 Run을 클릭합니다.



앗!!

사이즈가 묘하게 나옵니다??

이는 버그인지 설정인지는 판단하기 어렵지만 우선 정확하게 표현하기 위해서는

SWF설정을 해줘야합니다.



위와 같이 SWF 메타데이터 설정을 해줍니다.

잠깐, 왜 320*480인가요? 아이폰 4용이라면서요?
이렇게 설정하고 디버그를 해보면 다음과 같이 정상적으로 보입니다.



제 모니터가 작아서 스샷은 짤렸습니다만 -_-a

이제 정상적으로 보여집니다.



그러면 이제 아이폰에서 직접 테스트를 해볼까요?

먼저 디버그 버튼 옆의 아래로 향한 화살표를 선택하고 "Run Configurations"를 선택합니다.

현재 디버그 설정은 선택하고 우클릭 > Duplicate를 선택하여 하나 더 만듭니다.



좀전에 "On desktop" 대신에 "On device"를 선택합니다.

그러면 빨간색 에러표시가 나면서 "Packaging setting"을 먼저 하라며 링크를 제시해줍니다 (자상도 하여라)

파란색 "Configure"를 누르면 "Packaging settings" 창이 나옵니다.



위에서 만들어놓은 인증서와 Provisioning file을 선택해 넣습니다.

"OK"를 누르고 이전 창으로 다시 돌아갑니다.



"Run"버튼이 활성화 되어 있는 것을 볼 수 있습니다.

이제 실행을 하면 인증서의 비밀번호를 입력하면

다음과 같이 패키지가 진행되는 것을 볼 수 있습니다.



두구두구...

패키징이 끝나고 다음과 같이 어떻게 아이폰에 넣어서 테스트하는지 친절히 알려줍니다.



1. 아이폰을 USB에 연결합니다.

2. 이전 버전 앱이 설치되어 있다면 언인스톨해주세요. (안하셔도 됩니다. 뒤에 팁으로 알려드릴께요)

3. *.ipa 파일을 아이튠즈 라이브러리로 드래그 앤 드랍으로 끌어넣습니다. (걍 더블클릭하셔도 됩니다.)

4. 디바이스 > 애플리케이션 탭에서 체크가 되어 있는지 꼭 확인해주세요.

5. 동기화 해줍니다.




컴파일이 모두 되었으면

bin-debug 폴더에 생긴 ipa 파일을 볼 수 있을 것입니다.



더블클릭하여 아이튠즈에 설치합니다.



디바이스 > 애플리케이션 탭을 선택하여 보면

제일 마지막에 iDualBros...라고 앱이 설치되어 있는 것을 볼 수 있습니다.

이제 하단의 동기화(Sync)버튼 또는 적용(Apply)를 눌러 동기화시켜줍니다.



동기화가 끝나기를 기다립니다.





자 이제 아이폰에서 돌려봅니다~!!





감동입니다...

플래시로 레티나 디스플레이 앱을 만들 수 있게 되다니... ㅠ.ㅠ



이제 디버깅을 익혔으면

실제로 배포를 하기 위한 방법을 알려드리겠습니다.

먼저 배포용 인증서를 발급받아야합니다.

개발자 센터에서 App IDs 탭을 눌러 앱 아이디를 만듭니다. (이 예제에서는 앱 아이디가 바껴서 헷갈리실 수도 있는데 아까 프로젝트 생성할 때와 동일한 아이디를 지정해줘야합니다.)



그리고 "Provisioning"탭으로 이동하면 상단에 "Distribution"메뉴를 클릭하여 배포용 Provisioning 파일을 발급받습니다.



이렇게 발급받은 Provisioning파일을 다운받습니다.



이렇게 발급받아놓은 다음

Flash Builder로 돌아와 디버그 버튼 옆, 옆, 옆에 있는 Release버튼을 클릭합니다.



Release 버튼을 누르면 나오는 인증서 패널에서 배포용 인증서와 배포용 Provisioning파일을 설정합니다.



Apple App Store용 패키지 타입을 설정합니다.

Ad hoc이란?
이렇게 설정하고 "Finish"를 선택하면 두구두구.... 드디어 패키지가 시작됩니다.



이렇게 릴리즈된 패키징 파일은



다음과 같이 나타납니다.

이렇게 패키징된 파일은 앱스토어에 등록할 수 있게 됩니다.

(테스트용은 당연하겠지만 등록안되요 ㅋ)



Adobe Flash Builder 4.5는 아이폰용 뿐만아니라 안드로이드용도 동시에 개발할 수 있습니다.

안드로이드의 경우는 직접 폰에서 디버깅을 할 수도 있고

디버거의 연결로 직접 콘솔창에 trace를 찍어볼 수도 있습니다.

아이폰도 예전에 비하면 훨씬 간편해지긴 했습니다만

아직도 손이 많이 가는 것은 사실입니다.

그래도 고해상도 지원도 가능해졌고

StageWebView가 가능해지면서 무수히 많은 가능성이 열렸습니다.

이제 연락처 가져오기, APNS, In-App Purchase 등이 남아있습니다.

아마 Molehill 이 지원되는 그날만을 꿈꿔봅니다 :)



For the better.



(난 댓글을 좋아해요~ ↓↓↓)

아셔씀까?

fla에 있는 이미지 파일들을 linkage 만 걸어줘도 빨라진다는 사실을 ?!

특히나 반복이미지로 애니메이션주는 무비클립일 경우 음청 빨라집니다.

거의 3배이상?

자 ㄱㄱ


↓↓↓ 효과 보신 분들 댓글 달아주셈~ ↓↓↓