SWFAddress – 플래시에서 Deep Linking 사용하기



1. 시작하기


위키피디아1)의 정의를 보면 Deep Linking은 인터넷 상에서 웹사이트의 메인 페이지나 홈페이지 대신 특정 페이지나 이미지로 연결되는 하이퍼링크를 만드는 것 이라고 되어있습니다.


그리고 이러한 연계를 가능하게 하는 링크를 Deep Link라고 규정하고 있습니다.


즉, 플래시에서 Deep Linking 사용하기란 SWF에 임의의 해시링크(#)를 부여하여 SWF내부에서 새로고침 없이 특정 화면으로 이동하게끔 만드는것이 이번 포스팅의 핵심입니다.


간단한 예제를 통해 사용방법을 알아보도록 하겠습니다. 출발~


2. 다운로드 


SWFAddress는 Asual Site 에서 두가지 종류로 다운로드 가능하니 아래 링크를 참조해주시기 바랍니다. (최신버전 2.4)



3. 사용하기


SWFAddress의 원리는 생각보다 단순합니다.


SWFAddress.getValue() 를 통해 브라우저의 현재 링크값을 받아올 수 있고,


SWFAddress.setValue( $arg: String ) 를 통해 브라우저의 링크값을 변경할 수 있습니다.


또한 SWFAddressEvent.CHANGE 이벤트로 변경된 링크를 확인할 수 있어  다음과 같은 구조를 예상할 수 있습니다.


플래시에서 버튼 클릭시



  1. SWFAddress.setValue( $arg: String ) 로 브라우저의 링크값을 변경해주고

  2. SWFAddressEvent.CHAGNE 이벤트를 발생시켜준 뒤

  3. SWFAddress.getValue() 를 통해 변경된 링크값을 받아서 화면 출력!

 브라우저에서 링크값 변경시



  1. SWFAddressEvent.CHAGNE 이벤트를 발생시켜준 뒤

  2. SWFAddress.getValue() 를 통해 변경된 링크값을 받아서 화면 출력!

아래는 SWFAddress를 활용한 간단한 예제입니다.



lec1-1.png


먼저 간단한 메뉴를 만들고 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 파일을 만들어볼게요. 폴더구조는 아래와 같이 만들었습니다.


lec1-2.png


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

참쉽죠.jpg



참 쉽죠?


더이상의 자세한 설명은 생략한다(…)


4. 마치며


SWFAddress에 대해 최대한 간단한 소개정도로 끝내려고 했는데 주절주절 잡소리가 많았네요.


가볍고 사용하기 쉬우면서도 강력한 편의성을 제공하는 참~ 좋은 라이브러리입니다.


소개는 해드렸으니 더욱 깊게 공부하시어 포풍같이 가르쳐주시길 바랍니다^_^


(더욱 자세한 사항은 SWFAddress API 를 참조해주세요*-_-*)



Rock will NAVER die!!

※ 참고자료


소스 다운로드


1)Deep Linking from Wikipedia


답글 남기기

이메일 주소는 공개되지 않습니다.