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

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

PC&웹/웹프로그래밍 : 2010/02/03 22:11

SWFObject 페이지

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

티스토리 기준으로 설명

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

Cumulus.zip

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

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

자동으로 SWFObject 2.x 최신 버전을 연결해준다.

아래처럼 태그목록 코드를 정리한다.

<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 버전과 많이 달라졌다.

'PC&웹 > 웹프로그래밍' 카테고리의 다른 글

(jQuery) 티스토리 달력 토요일 색상 변경 (0)	2010/02/04
(jQuery) 블로그 목록, 반복 배경 적용하기 (0)	2010/02/04
SWFObject 2.x로 3D 태그 적용하기 (0)	2010/02/03
(jQuery) 티스토리 테터데스크에서 imgempty.png 그림 바꾸기 (0)	2010/02/03
HTML 엘레멘트 좌표 (0)	2010/01/30
(구글 시각화 API) Gauge (0)	2010/01/30