Jmnote bot (토론 | 기여) 잔글 (봇: 자동으로 텍스트 교체 (-==참고 자료== +==참고==)) |
Jmnote bot (토론 | 기여) 잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>)) |
||
| 20번째 줄: | 20번째 줄: | ||
</fx:Declarations> | </fx:Declarations> | ||
</s:Application> | </s:Application> | ||
</ | </syntaxhighlight> | ||
==SDK 추가== | ==SDK 추가== | ||
| 77번째 줄: | 77번째 줄: | ||
<s:Label id="birthdayLbl" includeIn="loggedin" x="10" y="39"/> | <s:Label id="birthdayLbl" includeIn="loggedin" x="10" y="39"/> | ||
</s:Application> | </s:Application> | ||
</ | </syntaxhighlight> | ||
==index.html 생성== | ==index.html 생성== | ||
| 102번째 줄: | 102번째 줄: | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </syntaxhighlight> | ||
==HTML wrapper 해제== | ==HTML wrapper 해제== | ||
2020년 11월 2일 (월) 00:44 판
- 페이스북 플래시웹앱 개발
- 플래시 페이스북앱 개발
1 사전 작업
- 페이스북 앱ID 발급
- Flash Builder 설치
2 새 프로젝트
- File --- New --- Flex Project
- "New Flex Project" --- Project name: 프로젝트명(예: RelightMyFireWeb) --- (O) Web (runs in Adobe Flash Player) --- (O) Use default SDK (currently "Flex 4.6.0") --- [Finish]
그러면 RelightMyFireWeb.mxml 이 자동으로 생성되어 있으며 내용은 다음과 같다. <source lang='xml'> <?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/mx" minWidth="955" minHeight="600"> <fx:Declarations> </fx:Declarations> </s:Application> </syntaxhighlight>
3 SDK 추가
- http://code.google.com/p/facebook-actionscript-api/ 접속
- "Downloads" --- GraphAPI_Web_1_8_1.swc 클릭 --- GraphAPI_Web_1_8_1.swc 클릭하여 다운로드
- 탐색기에서 GraphAPI_Web_1_8_1.swc 선택, 복사 ( Ctrl+C )
- 플래시 빌더 --- "Package Explorer"의 libs 폴더 선택, 붙여넣기 ( Ctrl+V )
4 RelightMyFireWeb.mxml 수정
RelightMyFireWeb.mxml 파일 내용을 다음으로 교체. 단, 앱아이디 부분에는 자신의 앱ID를 기입 <source lang='actionscript'> <?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/mx" minWidth="600" minHeight="300" creationComplete="application1_creationCompleteHandler(event)"> <fx:Script> <![CDATA[ import com.facebook.graph.Facebook; import mx.events.FlexEvent; protected function application1_creationCompleteHandler(event:FlexEvent):void { Facebook.init("앱아이디",loginHandler); } protected function loginHandler(success:Object,fail:Object):void { if(!success) return; currentState="loggedin"; Facebook.api("/me",getMeHandler); userImg.source=Facebook.getImageUrl(success.uid,"large"); } protected function login():void { Facebook.login(loginHandler,{scope:"user_birthday"}); } protected function logout():void { Facebook.logout(logoutHandler); currentState="loggedout"; } protected function logoutHandler(response:Object):void {} protected function getMeHandler(result:Object,fail:Object):void { nameLbl.text=result.name; birthdayLbl.text=result.birthday; } ]]> </fx:Script> <s:states> <s:State name="loggedout"/> <s:State name="loggedin"/> </s:states> <fx:Declarations> </fx:Declarations> <s:Button id="loginoutBtn" right="10" top="10" label="Log out" click.loggedin="logout()" label.loggedout="Log in" click.loggedout="login()"/> <s:Image id="userImg" includeIn="loggedin" left="10" top="68" width="100"/> <s:Label id="nameLbl" includeIn="loggedin" x="10" y="10"/> <s:Label id="birthdayLbl" includeIn="loggedin" x="10" y="39"/> </s:Application> </syntaxhighlight>
5 index.html 생성
- 패키지 탐색기 --- RelightMyFireWeb --- src 우클릭 --- New --- File
- "New File" --- File name:index.html --- [Finish]
- 패키지 탐색기 --- RelightMyFireWeb --- src --- index.html 우클릭 --- Open With --- Text Editor
index.html에 다음 내용을 기입 <source lang='html5'> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> </head> <body>
6 You need at least Flash Player 10.2 to view this page.
<a href="http://www.adobe.com/go/getflashplayer"><img src=" " alt="Get Adobe Flash player" /></a>
<script type="text/javascript"> swfobject.embedSWF("RelightMyFireWeb.swf", "flashContent", "600", "300", "10.2", null, null, null, {name:"flashContent"}); </script> </body> </html> </syntaxhighlight>
6.1 HTML wrapper 해제
- 플래시 빌더 --- Package Explorer --- RelightMyFireWeb 우클릭 --- Properties
- "Properties for RelightMyFireWeb" --- Flex Compiler --- [ ] Generate HTML wrapper file --- [OK]
- "Overwriting Files" --- [OK]
- Project --- Clean --- "Clean"[1] --- [OK]
6.2 웹서버에 업로드
- 웹서버의 DOCUMENT_ROOT 폴더 아래에 RelightMyFire 폴더 생성
- 플래시 빌더 --- Package Explorer --- RelightMyFireWeb --- bin-debug 폴더 안에 있는 파일들(swf와 html)을 웹서버의 RelightMyFire 폴더에 업로드
- http://웹서버주소/RelightMyFire 에 접속하여 테스트
- login 버튼이 보인다. 버튼을 누르면 새 창이 열리고 다음과 같은 오류 메시지가 나온다.
6.3 페이스북에 웹페이지 등록
- https://developers.facebook.com/apps 접속
- (로그인 안되어 있으면 로그인)
- "설정" --- [설정 편집]
- "어떻게 앱을 Facebook과 통합시킬지 선택하세요" --- [V] Website with Facebook Login --- 사이트 URL: http://도메인/RelightMyFire/ --- [변경 내용 저장]
- "Changes saved. Note that your changes may take several minutes to propagate to all servers."
6.4 테스트
- http://도메인/RelightMyFire/ 접속
- [login]
- "Relight My Fire 앱이 필요로 하는 권한" --- [허가]
- 이제 앱이 정상적으로 실행된다
6.5 같이 보기
6.6 주석
- ↑ 플래시 웹앱에서는 clean이 곧 clean and rebuild이다. clean이 되면 자동으로 build된다.
6.7 참고
-
{{comment.page_title}} ―{{comment.name}}