SWFObject 2.x로 3D 태그 적용하기

SWFObject 페이지

http://code.google.com/p/swfobject/

티스토리 기준으로 설명

아래 파일을 내려받아 압축을 풀고 js, swf파일을 티스토리 스킨 편집 페이지에 업로드 한다.

Cumulus.zip

제작자: http://wordpress.org/extend/plugins/wp-cumulus/

블로그 스킨 HTML에서 HEAD 내에 아래 코드를 삽입한다.

<script src="http://www.google.com/jsapi"></script> <script> google.load("swfobject", "2"); </script> <script type="text/javascript" src="./images/j_TeCumulus.js"></script>
자동으로 SWFObject 2.x 최신 버전을 연결해준다.


아래처럼 태그목록 코드를 정리한다.
<s_sidebar_element> <!-- 태그목록 모듈 --> <div class="tagbox"> <h3>Tag</h3> </div> </s_sidebar_element>

<h3>Tag</h3> 밑에 아래 코드를 추가한다.

<div id="htags" style="display:none;"> <tags> <s_random_tags> <a href="" class=""></a> </s_random_tags> <a href="/"></a> </tags> </div> <div id="TiCumulus"> <p>WP-Cumulus by <a href="http://wordpress.org/extend/plugins/wp-cumulus/">wordpress.org</a> requires Flash Player 9 or better.</p> </div> <script type="text/javascript"> var flashvars = { tcolor : "0xFF0000", hicolor: "0x0000FF", bgcolor: "#ffffff", mode : "tags", distr : "true", tspeed : "100", allowScriptAccess : "always", tagcloud : document.getElementById('htags').innerHTML.E4Cumulus('http://도메인/') }; var params = { allowScriptAccess: "always", wmode: "transparent" }; swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9", null, flashvars, params); </script>

완성된 코드

<s_sidebar_element> <!-- 태그목록 모듈 --> <div class="tagbox"> <h3>Tag</h3> <div id="htags" style="display:none;"> <tags> <s_random_tags> <a href="" class=""></a> </s_random_tags> <a href="/"></a> </tags> </div> <div id="TiCumulus"> <p>WP-Cumulus by <a href="http://wordpress.org/extend/plugins/wp-cumulus/">wordpress.org</a> requires Flash Player 9 or better.</p> </div> <script type="text/javascript"> var flashvars = { tcolor : "0xFF0000", hicolor: "0x0000FF", bgcolor: "#ffffff", mode : "tags", distr : "true", tspeed : "100", allowScriptAccess : "always", tagcloud : document.getElementById('htags').innerHTML.E4Cumulus('http://도메인/') }; var params = { allowScriptAccess: "always", wmode: "transparent" }; swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9", null, flashvars, params); </script> </div> </s_sidebar_element>

변수 설정하기

tcolor
0xFF0000 또는 16711680 으로 10진수 입력, = R 255, G 0, B 0

hicolor
마우스 오버했을 때 색상

bgcolor
배경 색상

tspeed
움직이는 속도

tagcloud
태그 목록 전달. 도메인 부분에 블로그 주소를 넣으면 된다. 끝에 / 필수. 그래야 http://도메인/tag/태그명으로 연결이 된다.
도메인 부분을 location.host 스크립트로 바꾸면 자동입력 되도록 할 수 있다.

swfobject.embedSWF(플래시 경로, 출력할 객체 ID, 가로, 세로, 플래시 버전, Adobe express install 경로, 변수, 파라미터);
1.x 버전과 많이 달라졌다.