SWFObject 사용하기

1. 시작하기


SWFObject는 SWF파일을 임베딩하고 플래시 플레이어와 관련된 정보를 읽어 낼 수 있는 완벽한 도구 개발에 중점을 둔 자바스크립트API로서 기존 모든 플래시 플레이어 임베딩 방법의 단일화가 목적이고 Adobe 플래시 플레이어 컨텐츠 임베딩에 대한 새로운 표준을 제공하고자 합니다. 라는건 너무 복잡하고..


쉽게말해 html에 SWF를 보여줄 수 있는 참~ 좋은 자바스크립트 API 입니다. ^^;


2. 다운로드


SWFObject는 구글코드 프로젝트그룹이 생성되어 있으며 현재 최종 버전은 v2.2 입니다.


친절하게 SWFObject Generator도 제공하고 있네요^^



3. 사용하기


지금부터 SWFObject를 사용하는 두가지 방법을 가볍게 알아보도록 하겠습니다.


<방법 1>


1) IDE를 켜고,


2) ActionScript 프로젝트를 생성하여 마음대로 플래시 파일을 만들어봅니다.


3) File > Publish (Alt + Shift + F12) 를 실행하면 SWFObject를 사용한 HTML파일이 생성됩니다.


4) 끗~


<방법 2>


1) Flash Builder를 켜고,


2) Flex Project 혹은 ActionScript Project 를 생성한 뒤 마음껏 코딩합니다.


3) Project > Export Release Build 를 선택하여 컴파일 하면 bin-release 폴더에 HTML파일이 생성됩니다.


4) 끗!!


참 쉽죠? ^_^


…….는 훼이크고(…)


eeaf5fe781b2af589b5a19b0f9d01dfe.png



  • [폴더] src : expressInstall.swf 파일의 소스 및 swfobject.js 파일이 포함되어있습니다.

  • expressInstall.swf : 플래시플레이어의 호환성 여부를 체크하여 설치를 유도하게끔 하는 SWF파일입니다. 자세한 설명은 생략하고(…) [추가댓글(이지명):expressInstall.swf는 속성에 정의한 플레이어 버젼에 맞게 업데이트 해주는 역할을 하는 Adobe Express Install을 내장한 놈으로 알고 있네.]

  • index.html : SWFObject를 static 방법으로 사용함으로서, 마크업(MarkUp)에 중점을 둔 방식입니다.

  • index_dynamic.html : 파일명 그대로 SWFObject를 다이나믹하게 사용하는(?) 방식으로서, 자바스크립트에 의존하는 방식입니다.

  • swfobject.js : SWFObject 자바스크립트 API입니다.

  • test.swf : ….파일명만 딱 봐도 느낌이 오시죠?!

아무튼, 다운로드 받은 파일 압축을 풀어보면 위와 같은 유용하게 쓰일 것 같은 파일들이 있는데


이번 포스팅에서는 사용하기도 쉽고 수정하기도 편리한 dynamic 방식으로 알아보도록 하겠습니다.


index_dynamic.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


   


…head 시작

…쏼라쏼라

<!– SWFObject 자바스크립트 API를 사용하겠노라 선포합니다. –>

<SCRIPT type=text/javascript src=“swfobject.js”></SCRIPT>

<!– 우리가 사용해야 할 SWFObject 스크립트 –>

<SCRIPT type=text/javascript>

    swfobject.embedSWF(

        “test.swf”,     // SWF파일 경로

        “myContent”,    // SWF를 보여줄 div ID

        “300”,          // SWF Width

        “120”,          // SWF Height

        “9.0.0”,        // Flash Player Version

        “expressInstall.swf”    // 자세한 설명은 생략한다(…)

        );

</SCRIPT>

…head 끝나고 body 시작

<!– 실제로 SWF 파일이 노출될 영역 –>

<DIV id=myContent>

    <!– Flash Player가 설치되지 않았을 때 페이지에 다음 화면을 노출합니다. –>

    <H1>Alternative content</H1>

    <P>

        <A href=http://www.adobe.com/go/getflashplayer><IMG title=“Get Adobe Flash player” alt=“Get Adobe Flash player” src=http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif rel=“xe_gallery”></A>

    </P>

</DIV>

…body 끝!


주석만으로도 간단한 사용법을 알 수 있습니다.



….


…..


…그런데 임베드 속성이나 flashVars 등은 어디간거지!?










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


// flashVars를 정리하기 위한 object 변수 선언

var flashVars =

{

    // add params

    xmlPath:http://file.bytearray.kr/쏼라쏼라/xml경로~ 등등’

};

 

// 임베드 프로퍼티를 정리하기 위한 object 변수 선언

var params =

{

    allowscriptaccess: ‘always’,

    menu: ‘false’,

    wmode: ‘window’

};

  

// 브라우저별 문제점 해결등을 위해 id, name 을 입력해줍니다.

var attribute =

{

    id: ‘myContent’,

    name: ‘myContent’

};

  

swfobject.embedSWF

(

    “test.swf”,     // SWF파일 경로

    “myContent”,    // SWF를 보여줄 div ID

    “300”,          // SWF Width

    “120”,          // SWF Height

    “9.0.0”,        // Flash Player Version

    “expressInstall.swf”,   // 자세한 설명은 생략한다(…)

    flashVars,      // flashVars 사용

    params,         // params 사용

    attribute       // attribute 사용

);

%EC%B0%B8%EC%89%BD%EC%A3%A0.jpg


참 쉽죠? ^_^


……어렵나요ㅠ_ㅠ


4. 마치며


이번 포스팅에서는 SWFObject가 뭐하는 녀석인지, 어떻게 사용하는지 간단하게 알아보았습니다.


좀더 디테일하게 사용하는 방법들이 있지만 요정도만 알면 나도 천재 개발자!!


Rock will NAVER die!!

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다