위키
포럼
도구
바뀐글
랜덤

페이스북 플래시웹앱 개발 편집하기

경고: 로그인하지 않았습니다. 편집을 하면 IP 주소가 공개되게 됩니다. 로그인하거나 계정을 생성하면 편집자가 사용자 이름으로 기록되고, 다른 장점도 있습니다.

편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.

최신판 당신의 편집
1번째 줄: 1번째 줄:
{{테스트|플래시 빌더 4.6}}
{{작성중}}
;페이스북 플래시웹앱 개발
;페이스북 플래시웹앱 개발
;플래시 페이스북앱 개발
;플래시 페이스북앱 개발
10번째 줄: 10번째 줄:
*File --- New --- Flex Project  
*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]
*"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 이 자동으로 생성되어 있으며 내용은 다음과 같다.
<syntaxhighlight 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>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:Application>
</syntaxhighlight>


==SDK 추가==
==SDK 추가==
29번째 줄: 18번째 줄:


[[file:fb_flash_web_dev_01.png]]
[[file:fb_flash_web_dev_01.png]]
==RelightMyFireWeb.mxml 수정==
RelightMyFireWeb.mxml 파일 내용을 다음으로 교체. 단, 앱아이디 부분에는 자신의 앱ID를 기입
<syntaxhighlight 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.syntaxhighlight=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>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</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>
==index.html 생성==
*패키지 탐색기 --- RelightMyFireWeb --- src 우클릭 --- New --- File
*"New File" --- File name:index.html --- [Finish]
*패키지 탐색기 --- RelightMyFireWeb --- src --- index.html 우클릭 --- Open With --- Text Editor
index.html에 다음 내용을 기입
<syntaxhighlight 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>
<div id="fb-root"></div>
<div id="flashContent">
<h1>You need at least Flash Player 10.2 to view this page.</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div> 
<script type="text/javascript">
swfobject.embedSWF("RelightMyFireWeb.swf", "flashContent", "600", "300", "10.2", null, null, null, {name:"flashContent"});
</script>
</body>
</html>
</syntaxhighlight>
==HTML wrapper 해제==
*플래시 빌더 --- Package Explorer --- RelightMyFireWeb 우클릭 --- Properties
*"Properties for RelightMyFireWeb" --- Flex Compiler --- [ ] Generate HTML wrapper file --- [OK]
*"Overwriting Files" --- [OK]
*Project --- Clean --- "Clean"<ref>플래시 웹앱에서는 clean이 곧 clean and rebuild이다. clean이 되면 자동으로 build된다.</ref> --- [OK]
==웹서버에 업로드==
*웹서버의 [[DOCUMENT_ROOT 폴더]] 아래에 RelightMyFire 폴더 생성
*플래시 빌더 --- Package Explorer --- RelightMyFireWeb --- bin-debug 폴더 안에 있는 파일들(swf와 html)을 웹서버의 RelightMyFire 폴더에 업로드
*http://웹서버주소/RelightMyFire 에 접속하여 테스트
*login 버튼이 보인다. 버튼을 누르면 새 창이 열리고 다음과 같은 오류 메시지가 나온다.
[[file:error on fb login.png|400px]]
==페이스북에 웹페이지 등록==
*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."
==테스트==
*http://도메인/RelightMyFire/ 접속
*[login]
*"Relight My Fire 앱이 필요로 하는 권한" --- [허가]
[[File:FB 앱이 필요로 하는 권한.png|300px]]
*이제 앱이 정상적으로 실행된다


==같이 보기==
==같이 보기==
*[[플래시 페이스북 캔버스앱 개발]]
*[[페이스북 데스트탑 플래시앱 개발]]
*[[페이스북 데스크탑 플래시앱 개발]]
*[[페이스북 플래시웹앱 개발 ANT 설정]]
*[[페이스북 HTML5 웹앱]]
*[[플래시 웹앱 개발]]
 
==주석==
<references/>


==참고==
==참고 자료==
*http://www.adobe.com/devnet/facebook/articles/flex_fbgraph_pt3.html
*http://www.adobe.com/devnet/facebook/articles/flex_fbgraph_pt3.html


[[분류:페이스북]]
[[분류:페이스북]]
[[분류:플래시]]
[[분류:플래시]]

제타위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스로 배포된다는 점을 유의해 주세요(자세한 내용에 대해서는 제타위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요.
또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다. 저작권이 있는 내용을 허가 없이 저장하지 마세요!

취소 편집 도움말 (새 창에서 열림)

이 문서에서 사용한 틀:

원본 주소 "https://zetawiki.com/wiki/페이스북_플래시웹앱_개발"