위키
포럼
도구
바뀐글
랜덤

"페이스북 플래시웹앱 개발"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-source +syntaxhighlight))
 
(사용자 2명의 중간 판 43개는 보이지 않습니다)
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 추가==
20번째 줄: 31번째 줄:


==RelightMyFireWeb.mxml 수정==
==RelightMyFireWeb.mxml 수정==
RelightMyFireWeb.mxml 파일 내용을 다음으로 교체
RelightMyFireWeb.mxml 파일 내용을 다음으로 교체. 단, 앱아이디 부분에는 자신의 앱ID를 기입
<source lang='actionscript'>
<syntaxhighlight lang='actionscript'>
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
32번째 줄: 43번째 줄:
import mx.events.FlexEvent;
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void {
protected function application1_creationCompleteHandler(event:FlexEvent):void {
Facebook.init("YOUR APPLICATION ID HERE",loginHandler);
Facebook.init("앱아이디",loginHandler);
}
}
protected function loginHandler(success:Object,fail:Object):void {
protected function loginHandler(success:Object,fail:Object):void {
38번째 줄: 49번째 줄:
currentState="loggedin";
currentState="loggedin";
Facebook.api("/me",getMeHandler);
Facebook.api("/me",getMeHandler);
userImg.source=Facebook.getImageUrl(success.uid,"large");
userImg.syntaxhighlight=Facebook.getImageUrl(success.uid,"large");
}
}
protected function login():void {
protected function login():void {
Facebook.login(loginHandler,{scope:"user_birthday,read_stream,publish_stream"});
Facebook.login(loginHandler,{scope:"user_birthday"});
}
}
protected function logout():void {
protected function logout():void {
66번째 줄: 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>
</source>
</syntaxhighlight>
==아이콘 추가==
 
*http://download.macromedia.com/pub/developer/facebook/flex45_fbgraph_assets.zip 를 클릭하여 다운로드
==index.html 생성==
*압축 해제
*패키지 탐색기 --- RelightMyFireWeb --- src 우클릭 --- New --- File
*images 폴더 선택, 복사( {{키|Ctrl|C}} )
*"New File" --- File name:index.html --- [Finish]
*플래시 빌더 --- 패키지 탐색기 --- RelightMyFireWeb --- src 폴더 선택, 붙이기( {{키|Ctrl|V}} )
*패키지 탐색기 --- 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


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

2020년 11월 2일 (월) 00:58 기준 최신판

페이스북 플래시웹앱 개발
플래시 페이스북앱 개발

1 사전 작업[ | ]

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 이 자동으로 생성되어 있으며 내용은 다음과 같다. 

<?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>

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 )

Fb flash web dev 01.png

4 RelightMyFireWeb.mxml 수정[ | ]

RelightMyFireWeb.mxml 파일 내용을 다음으로 교체. 단, 앱아이디 부분에는 자신의 앱ID를 기입 

<?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>

5 index.html 생성[ | ]

  • 패키지 탐색기 --- RelightMyFireWeb --- src 우클릭 --- New --- File
  • "New File" --- File name:index.html --- [Finish]
  • 패키지 탐색기 --- RelightMyFireWeb --- src --- index.html 우클릭 --- Open With --- Text Editor

index.html에 다음 내용을 기입 

<!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>

6 HTML wrapper 해제[ | ]

  • 플래시 빌더 --- Package Explorer --- RelightMyFireWeb 우클릭 --- Properties
  • "Properties for RelightMyFireWeb" --- Flex Compiler --- [ ] Generate HTML wrapper file --- [OK]
  • "Overwriting Files" --- [OK]
  • Project --- Clean --- "Clean"[1] --- [OK]

7 웹서버에 업로드[ | ]

  • 웹서버의 DOCUMENT_ROOT 폴더 아래에 RelightMyFire 폴더 생성
  • 플래시 빌더 --- Package Explorer --- RelightMyFireWeb --- bin-debug 폴더 안에 있는 파일들(swf와 html)을 웹서버의 RelightMyFire 폴더에 업로드
  • http://웹서버주소/RelightMyFire 에 접속하여 테스트
  • login 버튼이 보인다. 버튼을 누르면 새 창이 열리고 다음과 같은 오류 메시지가 나온다.

Error on fb login.png

8 페이스북에 웹페이지 등록[ | ]

  • 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."

9 테스트[ | ]

FB 앱이 필요로 하는 권한.png

  • 이제 앱이 정상적으로 실행된다

10 같이 보기[ | ]

11 주석[ | ]

  1. ↑ 플래시 웹앱에서는 clean이 곧 clean and rebuild이다. clean이 되면 자동으로 build된다.

12 참고[ | ]

원본 주소 "https://zetawiki.com/w/index.php?title=페이스북_플래시웹앱_개발&oldid=604889"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}