1. 시작하기
SWFObject는 SWF파일을 임베딩하고 플래시 플레이어와 관련된 정보를 읽어 낼 수 있는 완벽한 도구 개발에 중점을 둔 자바스크립트API로서 기존 모든 플래시 플레이어 임베딩 방법의 단일화가 목적이고 Adobe 플래시 플레이어 컨텐츠 임베딩에 대한 새로운 표준을 제공하고자 합니다. 라는건 너무 복잡하고..
쉽게말해 html에 SWF를 보여줄 수 있는 참~ 좋은 자바스크립트 API 입니다. ^^;
2. 다운로드
SWFObject는 구글코드 프로젝트그룹이 생성되어 있으며 현재 최종 버전은 v2.2 입니다.
친절하게 SWFObject Generator도 제공하고 있네요^^
- Google Code – SWFObject : http://code.google.com/p/swfobject/
- 다운로드 (Source & Samples)
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) 끗!!
참 쉽죠? ^_^
…….는 훼이크고(…)
- [폴더] 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 }; // 임베드 프로퍼티를 정리하기 위한 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 사용 ); |
참 쉽죠? ^_^
……어렵나요ㅠ_ㅠ
4. 마치며
이번 포스팅에서는 SWFObject가 뭐하는 녀석인지, 어떻게 사용하는지 간단하게 알아보았습니다.
좀더 디테일하게 사용하는 방법들이 있지만 요정도만 알면 나도 천재 개발자!!
Rock will NAVER die!!