페이스북 플래시웹앱 개발

페이스북 플래시웹앱 개발

플래시 페이스북앱 개발

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]

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 파일 내용을 다음으로 교체

<?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("YOUR APPLICATION ID HERE",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,read_stream,publish_stream"});
			}
			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 아이콘 추가

• http://download.macromedia.com/pub/developer/facebook/flex45_fbgraph_assets.zip 를 클릭하여 다운로드
• 압축 해제
• images 폴더 선택, 복사( Ctrl+C )
• 플래시 빌더 --- 패키지 탐색기 --- RelightMyFireWeb --- src 폴더 선택, 붙이기( Ctrl+V )

6 같이 보기

• 페이스북 데스트탑 플래시앱 개발

7 참고 자료

• http://www.adobe.com/devnet/facebook/articles/flex_fbgraph_pt3.html