출처: http://wooyaggo.tistory.com/381
[따라하기] Flash Builder 4.5로 iPhone 4용 듀얼 브라우저 앱 만들기
어도비에서 얼마전에 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를 만들어보는 간단한 샘플을 만들어 보겠습니다.
브라우저를 위와 아래 두개를 띄워 트위터와 페이스북을 동시에 쓰는 앱을 만들어보겠습니다.
(급조해서 만든 아이디어치고는 괜찮지 않아요? ㅋㅋ)
자, 서론 다 빼고 간단하게 따라하기로 바로 만들어보겠습니다.
개발자 인증서 받기
----------------------------------------------------------------------------------------------
먼저 개발에 앞서 인증서를 발급받는 방법을 초간단하게 훑어보겠습니다. (맥용입니다. 윈도용은 빡세서 못하겠어요 -_-)
(제가 제작년 이맘때쯤 혼자서 이거 할때를 생각하면... 아후... 이거 생각보다 혼자하면 빡쎄요 ㅠ.ㅠ)
자 먼저 애플 개발자 센터에 가봅시다.
iOS Provisioning Portal 로 들어갑니다.
인증서 관리 포털에서 "Certificate"탭을 선택합니다.
(만약 인증서 센터가 아예 처음이라면 하단에 "click here to download now"를 선택하시면 초기 인증서 발급과정을 보고 진행할 수 있습니다.)
Download를 눌러 "개발용 인증서"를 다운받습니다.
그리고 "Provisioning" 탭을 눌러 들어갑니다.
이제 다운로드 받은 폴더로 가서 "개발용 인증서"를 더블클릭합니다.
키체인이 열리면서 인증서가 등록됩니다.
이때 등록된 인증서를 우클릭해서 Export를 선택합니다.
여기서 메뉴에 "p.12"파일을 선택할 수 있습니다.
쨔잔~
---------------------------------------------------------------------------------------------
Flash Builder 4.5를 실행합니다.
"Package Explorer"에서 우클릭 > New > ActionScript Mobile Project를 선택합니다.
Next를 눌러 다음과 같이 프로젝트 명을 iDualBrowser라고 입력합니다.
프로젝트명을 입력하고 Next를 선택하면 모바일 환경 설정을 할 수 있습니다.
위 그림은 기본 설정인데 우리 프로젝트에 맞게 다음과 같이 설정을 해줍니다.
"Platform Settings"에서 Target Devices를 아이폰, 아이팟용으로 설정해줍니다.
큰 의미는 없지만 설정은 설정이니까요 :)
해보진 않았지만 아마 저 설정에 따라서 앱스토어에 등록될 때 설정이 될거라고 생각합니다.
그리고 "Automatically Reorientation"은 체크 해제해주고 (아이폰을 기울이면 자동으로 회전되는 그 기능입니다, 꼭 지원되야 되는 앱이 아니면 안하는게 건강에 좋아요 ㅋ)
그리고 전체 화면에 체크해줍니다 (체크하지 않으면 시간과 통신사, 배터리를 표시해주는 상단 탭이 나타납니다)
그리고 마지막으로 애플리케이션의 ID를 지정해줍니다.
이 애플리케이션 ID는 매우 중요합니다.
꼭 기록해두시거나 알아보기 쉬운 ID를 지정합니다.
마지막으로 "Finish"를 누르면 프로젝트 생성을 마치고 코딩창으로 이동합니다.
다음과 같은 코드를 입력합니다.
StageWebView를 만드는 코드는 어렵지 않습니다.
http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/media/StageWebView.html#includeExamplesSummary
StageWebView API 보기
한줄씩 살펴보겠습니다.
var topView: StageWebView = new StageWebView;
topView.stage = this.stage;
StageWebView 객체를 생성하고 stage를 지정해줍니다.
addChild가 아닌 stage를 등록해주는 이유는
실제로 iOS에서 보여지는 브라우저 화면은 디스플레이 객체의 하나로써 보여지는게 아니라
stage위에 즉, 캔버스보다 위에 별도로 보여지는 영역이기 때문입니다.
즉 어떤 객체 밑으로 넣을 수 없다는 점을 꼭 기억해야합니다.
topView.viewPort = new Rectangle( 0, 0, this.stage.stageWidth, this.stage.stageHeight / 2 );
브라우저의 크기를 지정해줍니다.
x, y를 따로 지정해주는게 아니라 보여질 영역을 직접 지정해주는 것입니다.
상단의 절반을 차지하도록 설정한 것입니다.
topView.loadURL( "http://twitter.com" );
그리고 나서 어떤 페이지를 보여줄지 URL을 지정해줍니다.
이렇게 상단과 하단을 나눠서 두 개의 StageWebView를 생성해줍니다.
addChild같은건 하지 않습니다.
여기서 Command + F11을 누르면 다음과 같이 뜰 것입니다.
디버그의 옵션이 중요해진 이유는
시뮬레이터로 디버깅을 할 것이냐
디바이스에서 테스트하기 위해 ipa파일을 뽑을것이냐를 선택해야하기 때문입니다.
먼저 시뮬레이터로 테스트해보겠습니다.
"Launch Method"에서 on desktop을 선택하고 iPhone 4를 선택합니다.
설정을 마치고 Run을 클릭합니다.
앗!!
사이즈가 묘하게 나옵니다??
이는 버그인지 설정인지는 판단하기 어렵지만 우선 정확하게 표현하기 위해서는
SWF설정을 해줘야합니다.
위와 같이 SWF 메타데이터 설정을 해줍니다.
잠깐, 왜 320*480인가요? 아이폰 4용이라면서요?
----------------------------------------------------------------------------------------------------------------
가로 세로가 320*480인 이유는 Objective-C로 개발해보신 분들은 아시겠지만
애플이 고해상도인 아이폰4와 기존의 아이폰 3를 모두 호환하기 위한 기가막힌 묘책입니다.
기존의 아이폰3용앱들을 그 두 배의 해상도인 아이폰 4 용에서 돌리기 위해서는
모두 좌표체계나 이미지를 모두 2배로 늘려야했죠.
이에 대해서 많은 개발자들이 아이폰4가 나오면 엄청난 후폭풍이 몰려올거다라고 걱정했었지만
정작 아이폰4용 SDK가 나오자 기가막힌 해결책이 담겨있었습니다.
고해상도 스크린을 지원하기 위해서 개발자들은 기존의 앱을 수정할 필요가 전혀없었습니다.
이유인 즉슨,
해상도가 높아지면서 좌표체계의 변화는 두배로 느는것이 아니라
0.5 단위로 줄어든것이었습니다.
즉 가로가 320이었 기존과 고해상도는 모두 똑같이 320입니다.
대신 아이폰 3에서는 한 픽셀을 이동하기 위해서는 1을 움직여야했지만
아이폰 4에서는 한픽셀을 이동하기 위해서는 0.5만 움직이면 되는것입니다.
그래서 고해상도라고해서 실제로 해상도가 2배가 되는 것이 아닙니다.
단 이미지의 경우는 특별히 고해상도 이미지가 사용되긴 합니다.
그래서 SWF설정도 640*960이 아닌 320*480인 것입니다.
----------------------------------------------------------------------------------------------------------------
이렇게 설정하고 디버그를 해보면 다음과 같이 정상적으로 보입니다.
제 모니터가 작아서 스샷은 짤렸습니다만 -_-a
이제 정상적으로 보여집니다.
그러면 이제 아이폰에서 직접 테스트를 해볼까요?
먼저 디버그 버튼 옆의 아래로 향한 화살표를 선택하고 "Run Configurations"를 선택합니다.
현재 디버그 설정은 선택하고 우클릭 > Duplicate를 선택하여 하나 더 만듭니다.
좀전에 "On desktop" 대신에 "On device"를 선택합니다.
그러면 빨간색 에러표시가 나면서 "Packaging setting"을 먼저 하라며 링크를 제시해줍니다 (자상도 하여라)
파란색 "Configure"를 누르면 "Packaging settings" 창이 나옵니다.
위에서 만들어놓은 인증서와 Provisioning file을 선택해 넣습니다.
"OK"를 누르고 이전 창으로 다시 돌아갑니다.
"Run"버튼이 활성화 되어 있는 것을 볼 수 있습니다.
이제 실행을 하면 인증서의 비밀번호를 입력하면
다음과 같이 패키지가 진행되는 것을 볼 수 있습니다.
두구두구...
패키징이 끝나고 다음과 같이 어떻게 아이폰에 넣어서 테스트하는지 친절히 알려줍니다.
1. 아이폰을 USB에 연결합니다.
2. 이전 버전 앱이 설치되어 있다면 언인스톨해주세요. (안하셔도 됩니다. 뒤에 팁으로 알려드릴께요)
3. *.ipa 파일을 아이튠즈 라이브러리로 드래그 앤 드랍으로 끌어넣습니다. (걍 더블클릭하셔도 됩니다.)
4. 디바이스 > 애플리케이션 탭에서 체크가 되어 있는지 꼭 확인해주세요.
5. 동기화 해줍니다.
이전 버전을 지우지 않고
-app.xml 파일에 보면 버전정보가 있습니다.
컴파일 하기 전에 이 버전을 높여주면 됩니다.
0.01 -> 0.02 -> 0.03 이런식으로요.
새로 설치되는 앱의 버전이 더 높다면 아이튠즈는 새 앱으로 "Replace"해줍니다.
일일이 지우는거 무지 귀찮기 때문에 꼭 숙지해두시기 바랍니다.
컴파일이 모두 되었으면
bin-debug 폴더에 생긴 ipa 파일을 볼 수 있을 것입니다.
더블클릭하여 아이튠즈에 설치합니다.
디바이스 > 애플리케이션 탭을 선택하여 보면
제일 마지막에 iDualBros...라고 앱이 설치되어 있는 것을 볼 수 있습니다.
이제 하단의 동기화(Sync)버튼 또는 적용(Apply)를 눌러 동기화시켜줍니다.
동기화가 끝나기를 기다립니다.
자 이제 아이폰에서 돌려봅니다~!!
감동입니다...
플래시로 레티나 디스플레이 앱을 만들 수 있게 되다니... ㅠ.ㅠ
이제 디버깅을 익혔으면
실제로 배포를 하기 위한 방법을 알려드리겠습니다.
먼저 배포용 인증서를 발급받아야합니다.
개발자 센터에서 App IDs 탭을 눌러 앱 아이디를 만듭니다. (이 예제에서는 앱 아이디가 바껴서 헷갈리실 수도 있는데 아까 프로젝트 생성할 때와 동일한 아이디를 지정해줘야합니다.)
그리고 "Provisioning"탭으로 이동하면 상단에 "Distribution"메뉴를 클릭하여 배포용 Provisioning 파일을 발급받습니다.
이렇게 발급받은 Provisioning파일을 다운받습니다.
이렇게 발급받아놓은 다음
Flash Builder로 돌아와 디버그 버튼 옆, 옆, 옆에 있는 Release버튼을 클릭합니다.
Release 버튼을 누르면 나오는 인증서 패널에서 배포용 인증서와 배포용 Provisioning파일을 설정합니다.
Apple App Store용 패키지 타입을 설정합니다.
Ad hoc이란?
---------------------------------------------------------------------------------------------------------------------------
Ad hoc은 애플 앱스토어를 거치지 않고
특정한 단체용 앱으로 사용하기 위한 패키지타입입니다.
예를 들어 대기업용 사내 인트라넷 앱을 개발할 경우에는
앱스토어가 아니라 사내에서 따로 배포해야되는데 그럴때 Ad hoc 을 선택해주시면 됩니다.
(Ad hoc은 "특별한 목적을 위해서"라는 뜻의 라틴어라고 합니다. 무슨 약자인지 한참 찾았네요 ㅋㅋ)
-----------------------------------------------------------------------------------------------------------------------------
이렇게 설정하고 "Finish"를 선택하면 두구두구.... 드디어 패키지가 시작됩니다.
이렇게 릴리즈된 패키징 파일은
다음과 같이 나타납니다.
이렇게 패키징된 파일은 앱스토어에 등록할 수 있게 됩니다.
(테스트용은 당연하겠지만 등록안되요 ㅋ)
Adobe Flash Builder 4.5는 아이폰용 뿐만아니라 안드로이드용도 동시에 개발할 수 있습니다.
안드로이드의 경우는 직접 폰에서 디버깅을 할 수도 있고
디버거의 연결로 직접 콘솔창에 trace를 찍어볼 수도 있습니다.
아이폰도 예전에 비하면 훨씬 간편해지긴 했습니다만
아직도 손이 많이 가는 것은 사실입니다.
그래도 고해상도 지원도 가능해졌고
StageWebView가 가능해지면서 무수히 많은 가능성이 열렸습니다.
이제 연락처 가져오기, APNS, In-App Purchase 등이 남아있습니다.
아마 Molehill 이 지원되는 그날만을 꿈꿔봅니다 :)
For the better.
(난 댓글을 좋아해요~ ↓↓↓)
-
우와 신기하네요 ㅋㅋ
StageWebView 페이지 스크롤은 되나요??2011/05/15 20:24 [ ADDR : EDIT/ DEL : REPLY ]
당연하지~
-
Flex 스크롤 보면 안드로이드나 아이폰 기본 스크롤 컴포넌트에 비해서 감도라던지 부드러움이라던지 좀 별로던데 이건 어떤가요?
스크롤바를 이야기하는거였구나 따로 스크롤바 지정은 없어~
스크롤 시켜주는 메소드도 없고~-
어엌ㅋ 그렇군요..
잘봤습니다 :)
-
비밀댓글입니다
-
비밀댓글입니다
-
아무래도 일반적인 방법이 아니라 해결방법 찾기가 쉽지않네요.
다행이 구글링하니 관련 글이 몇 개 있어 적용해보는 중입니다.
우야꼬님 덕분에 힘내서 반드시 업로드 시키겠습니다!
정말 감사합니다^^ -
아자! 업로드 했습니다.
http://forums.adobe.com/thread/729402
위 글 참고해서 Payload폴더 내의 파일명을 바꾼 다음에 압축해서 올리니 잘 올라갔네요. 아...이 감격이란...
저 같은 경우를 위해 간단히 설명드릴께요.
플래시CS5에서 만든 ipa를 zip으로 확장자를 바꿔 압축을 푼 뒤 맥에서 터미널을 띄워 Payload폴더 내 파일의 이름을 바꿔줍니다.(위 링크 참고)
그리고 Payload폴더를 다시 압축하여 업로드 하니 해결됐습니다.
우야꼬님 감사합니다~ 심사 통과하고 앱스토어에 올라오는데로 링크 걸께요 ^^ -
찰카닥
후후 이런 알짜배기 글을!! 좋은공부 되겟다!! 오늘 이걸로 하루를 시작해보겟어+_+
굿 포스팅!!!! as3로 ios, android 어플 개발이 얼마만큼 효과가 있을까는 이제 개발자들의 몫이 되었군.
-
꼼꼼한 강좌 감사합니다 !
-
다음책은 언제나오나요 ? +_+
-
우아. 꼼꼼한 정리 감사합니다. 아무래도 iOS쪽으로는 설정부분에서 손댈게 많아서 여간 번거로운게 아닙니다.
저 혹시 질문하나 드립니다. 플래시 5.5에서 iOS용으로 퍼블리싱 할때 섬네일 넣을 수 있는 기능이 있던데. 플래시 빌더에서는 퍼블리싱 되어지는 ipa파일에 섬네일을 삽입하는 방법이 있나요? -
질문자ㅎ
깔끔하게 정리된거 잘봤습니다. 하나하나 따라하면서 끝까지 왔는데요 에러가 발생하는데 어떻게 해줘야할지 몰라 이렇게 질문을 드립니다..
에런내용은 무슨 ID가 매칭이 안된다고 하는데 ㅡㅡ; provisioning파일 만들때 뭐가 잘못된건지
The AIR application ID "Airmobileios" does not match the pattern "com.mytest.Airmobileios" specified in the provisioning profile. Either change the applications ID, or use a provisioning profile that matches the existing ID. -
질문자ㅎ
App Id가 프로젝트 이름이지요? 그렇다면 똑같이 했는데도 그런 메세지가 나오네요..
제가 windows로 개발자 인증서를 발급받았는데 그게 영향이 있을까요? ㅡㅡ; -
질문자ㅎ
해결을 했습니다. App id를 com.mytest.Airmobileios로 하니깐 인식을을 하네요 ^^
전엔 Airmobileios로 했어거던요 ㅋㅋ 암튼 답변감사드립니다. 
이거 윈도우에서도 해봤는데 Xcode에서 직접 개발해봤던 나로선 디바이스에 물려서 iTunes를 거쳐야 한다는 것이 너무 불편하긴 하네. 패키징도 꽤 오래걸리는데..... 그건 참 불편하네 ㅎㅎ
-
김범경
질문드립니다~
이차저차해서 배포파일까지 만들었고 마지막 단계에서는 app loader로 ipa배포파일을 store에 upload를 해야 되는데...
맥이 없거든요? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
근데 다행히 제가 만든 어플은 저희 업체들만 사용하게 될거라 저희 게시판을 통해서 ipa파일만 배포해도
관계는 없습니다... 그런데 그런식으로 배포 하려면 ad hoc방식으로 배포를 한다는 것인가요.??
그렇다면 등록된 device에서만 설치 가능한 것 맞는지요...?
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
츌처: http://forums.adobe.com/thread/729402
Application Loader CodeResources / CodeSign errors
Sep 27, 2010 7:50 AM
Each step I go in I got a new Error.
Does anyone have an idea on what's going one with the following errors:
1)
"The CodeResources file must be a symbolic link to _CodeSignature/CodeResources. Make certain that bundle is on a locally-mounted volume"
2)
"Application failed codesign verification. The signature was invalid, or it was not signed with an Apple submission certificate."
Thanks
1581 Views 2 Replies Latest reply: Christian Pugliese, Sep 29, 2010 3:46 AM
Was this helpful? Yes No
Replies
-
Sep 29, 2010 1:00 AM in reply to Christian Pugliese
I don't have any idea about Error 1, but I got error 2 last night I did the following: When I deployed my application on App Store I was using Developer Provisioning Profile, So I created a "Distribution Provisioning profile" on the Apple Provisioning Portal, and I revoked my Distribution Certificate and recompiled the app. Flash CS5 created the ipa. I used Application Loader App to upload my binary. But it accepts only .zip file so I renamed my .ipa to .zip and after that I unarchive it by double clicking the .zip folder which created a Payload Folder. Inside the Payload folder I found an app which I compress into .zip and then uploaded it using Application Loader successfully.
Was this helpful? Yes No
-
Sep 29, 2010 3:46 AM in reply to s4shanonly
Thanks.
I figured out and fixed both of them.
The 1st error was due to the the zip/ipa rename thing. I got rid of it by following <maretron> post here:http://forums.adobe.com/message/3129598
cd ~/Desktop/Payload/<app-name>.app
rm CodeResources
ln -s _CodeSignature/CodeResources CodeResources
cd ~
2nd error I revoked all my certificates and I've also deleted all Developer/Distribution entries on the keychain, then creating it all again solved it.
* Important to note that just revoking and creating new CSR and certificates wouldnt work for me, I needed to delete private/public entries before creating a new CSR file.Was this helpful? Yes No
'ADOBE > Flash' 카테고리의 다른 글
| [Flash] html 플래시 배경 투명하게 올리기~~ (0) | 2020.09.15 |
|---|---|
| 플래시 액션스크립트 tab 포커스 관련 ie 브라우져 관련 (0) | 2020.09.15 |
| flash 플래시 보안 관련 (0) | 2020.09.15 |
| Flash Air 의ADT 패키지 빌드시 SWF 버전이 안맞아 에러가 나는 경우. (0) | 2018.05.09 |
| 플래시 최신 게임이 실행 안될때 플래시 업데이트 또는 최신 버전 설치 (0) | 2014.05.28 |
댓글 영역