1. 시작하기
위키피디아1)의 정의를 보면 Deep Linking은 인터넷 상에서 웹사이트의 메인 페이지나 홈페이지 대신 특정 페이지나 이미지로 연결되는 하이퍼링크를 만드는 것 이라고 되어있습니다.
그리고 이러한 연계를 가능하게 하는 링크를 Deep Link라고 규정하고 있습니다.
즉, 플래시에서 Deep Linking 사용하기란 SWF에 임의의 해시링크(#)를 부여하여 SWF내부에서 새로고침 없이 특정 화면으로 이동하게끔 만드는것이 이번 포스팅의 핵심입니다.
간단한 예제를 통해 사용방법을 알아보도록 하겠습니다. 출발~
2. 다운로드
SWFAddress는 Asual Site 에서 두가지 종류로 다운로드 가능하니 아래 링크를 참조해주시기 바랍니다. (최신버전 2.4)
- Asual – SWFAddress Page : http://www.asual.com/swfaddress/
- 다운로드 (Including docs, samples and sources)
- 다운로드 (Just the core scripts & Libraries)
3. 사용하기
SWFAddress의 원리는 생각보다 단순합니다.
SWFAddress.getValue() 를 통해 브라우저의 현재 링크값을 받아올 수 있고,
SWFAddress.setValue( $arg: String ) 를 통해 브라우저의 링크값을 변경할 수 있습니다.
또한 SWFAddressEvent.CHANGE 이벤트로 변경된 링크를 확인할 수 있어 다음과 같은 구조를 예상할 수 있습니다.
플래시에서 버튼 클릭시
- SWFAddress.setValue( $arg: String ) 로 브라우저의 링크값을 변경해주고
- SWFAddressEvent.CHAGNE 이벤트를 발생시켜준 뒤
- SWFAddress.getValue() 를 통해 변경된 링크값을 받아서 화면 출력!
브라우저에서 링크값 변경시
- SWFAddressEvent.CHAGNE 이벤트를 발생시켜준 뒤
- SWFAddress.getValue() 를 통해 변경된 링크값을 받아서 화면 출력!
아래는 SWFAddress를 활용한 간단한 예제입니다.
먼저 간단한 메뉴를 만들고 1~3프레임에 이미지를 배치하였습니다.
Actions 패널을 열고 아래와 같은 코드를 입력합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | /** * Test SWFAddress * * Description * * * Author : siamcatt (siamcatt@gmail.com) * Create : Sep 25, 2011 */ //————————————– // Imports //————————————– import SWFAddress; import SWFAddressEvent; import flash.events.MouseEvent; //————————————————————————– // Constructor //————————————————————————– init(); function init(): void{ // 다 알잖아요 *-_-* stop(); var i: int, len: int; i = 0; len = 3; for( i; i < len; ++i ) { this[‘menu’+i].buttonMode = true; this[‘menu’+i].addEventListener( MouseEvent.CLICK, clickHandler ); } // SWFAddress 이벤트리스너 생성 // SWFAddressEvent.INIT = SWFAddress가 초기화되고 발생하는 이벤트 SWFAddress.addEventListener( SWFAddressEvent.INIT, initAddressHandler ); // SWFAddressEvent.CHANGE = 브라우저의 주소값 변경시 발생하는 이벤트 SWFAddress.addEventListener( SWFAddressEvent.CHANGE, changeAddressHandler ); } //————————————————————————– // Event handlers //————————————————————————– function clickHandler( $e: MouseEvent ): void{ // 메뉴 클릭시 SWFAddress.setValue( $arg ) 를 통해 브라우저의 링크값을 변경시킨다. // 변경될 링크값은 메뉴의 인스턴스네임으로 지정 // 기본주소#/menu0 ~ 2 SWFAddress.setValue( $e.target.name ); } function initAddressHandler( $e: SWFAddressEvent ): void{ // 브라우저의 초기값을 /menu0 으로 지정한다. SWFAddress.setValue( “/menu0” ); } function changeAddressHandler( $e: SWFAddressEvent ): void{ var address: String = SWFAddress.getValue(); // SWFAddress.getValue() 혹은 $e.value 로 받아올 수 있다. switch( address ) { case “/menu0”: gotoAndStop(1); break; case “/menu1”: gotoAndStop(2); break; case “/menu2”: gotoAndStop(3); break; } } |
SWF 로드 완료시 SWFAddress.INIT 을 통해 주소를 변경시켜줍니다.
그 후 각 메뉴를 누를때마다 브라우저 주소를 변경시켜주고 변경된 주소값을 참조하여 화면을 바꿔주는거지요!
컴파일 후 SWF를 실행시켜보겠습니다.
각 메뉴를 누르면 맛있는 음식들이 보이네요..*-_-*
이번엔 HTML 파일을 만들어볼게요. 폴더구조는 아래와 같이 만들었습니다.
index.html 소스는 아래와 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | … …head <!– swfobject.js 등록 –> <SCRIPT type=text/javascript src=“swfobject/swfobject.js”></SCRIPT> <!– swfaddress.js 등록 –> <SCRIPT type=text/javascript src=“swfaddress/swfaddress.js”></SCRIPT> <SCRIPT type=text/javascript> // flashVars var flashVars = { // add params }; var params = { allowscriptaccess: ‘always’, menu: ‘false’, wmode: ‘window’ }; // 크로스브라우징을 해 id, name 을 동일하게 입력해줍니다. var attribute = { id: ‘myContent’, name: ‘myContent’ }; swfobject.embedSWF ( ‘index.swf’, // swf 경로 ‘myContent’, // div id ‘400’, // width ‘260’, // height ’10’, // flash version ‘swfobject/expressinstall.swf’, flashVars, params, attribute );</SCRIPT> … …body <!– swfobject에서 지정한 id를 참조하여 화면에 출력!! –> <DIV id=myContent> </DIV> |
결과 : http://file.bytearray.kr/blog/20110925_0/TestSWFAddress/index.html
참 쉽죠?
더이상의 자세한 설명은 생략한다(…)
4. 마치며
SWFAddress에 대해 최대한 간단한 소개정도로 끝내려고 했는데 주절주절 잡소리가 많았네요.
가볍고 사용하기 쉬우면서도 강력한 편의성을 제공하는 참~ 좋은 라이브러리입니다.
소개는 해드렸으니 더욱 깊게 공부하시어 포풍같이 가르쳐주시길 바랍니다^_^
(더욱 자세한 사항은 SWFAddress API 를 참조해주세요*-_-*)
Rock will NAVER die!!
※ 참고자료