DoNT :: 플래시 위젯 만들기

Do Not Think!!!

Posted 2007/10/18 11:58

Filed under 글로 기록하기

기능 : 윕 상에 존재하는 플래시 파일을 재생 할 수 있는 간단한 플래시 위젯
설정 내용 : 재생할 플래시 주소, 자동 재생 여부
화면 구성 : 플래시 재생 영역, 플래시 재생/중지 버튼 영역
WZDAPI를 이용하여 위젯 작성하기

1. 기본 xhtml 파일 작성하기
다음과 같은 구조의 xhtml 파일을 작성합니다. 이 파일을 기본으로 위젯을 작성하게 됩니다.

기본 xhtml 파일 (Language : xml)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://wzdapi.com/widget/" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
/*]]>*/
</script>
</head>
<body>
</body>

2. 위젯 정보 입력하기
<head /> 태그 안에 다음 내용을 입력합니다. 위젯 정보, 이름, 아이콘등의 정보를 설정합니다.
위젯 정보 중 다음 3가지는 필수적으로 들어가야 합니다.

<meta name="apiVersion" content="1.0" />
<meta name="author" content="WZDWORKS" />
<title>플래시 로더</title>

위젯 정보 입력하기 (Language : xml)

<meta name="apiVersion" content="1.0" />
<meta name="author" content="WZDWORKS" />
<meta name="website" content="http://wzd.com" />
<meta name="description" content="온 세상 플래시 파일을 내 페이지 안으로!" />
<meta name="version" content="1.0" />
<meta name="autoRefresh" content="0" />
<title>플래시 로더</title>
<link rel="icon" type="image/gif" href="/Design/images/widget/icon_flash.gif" />

3. 설정창 구성하기
<head /> 태그 안에 다음 내용을 입력합니다. 위젯의 설정창을 구성하는 정보입니다.

사용자 삽입 이미지

설정창 구성하기 (Language : xml)

<widget:preferences>
<widget:preference type="text" name="flashUrl" label="플래시 경로" defaultValue="" />
<widget:preference type="boolean" name="autoPlay" label="자동재생" defaultValue="true" />
</widget:preferences>

4. HTML 구성하기
<body /> 태그 안에 다음 내용을 입력합니다. 위젯의 화면 구성을 위한 부분입니다.
위젯을 구성하는 전체 레이아웃을 결정합니다. 플래시 위젯은 플레시 재생화면, 재생/중지 버튼, 접기 버튼으로 구성되어 있습니다.

사용자 삽입 이미지

HTML 구성하기 (Language : html4strict)

<div class="swfContainer">
<img class="defaultSWF" src="/Design/images/widget/flash/default.gif" />
</div>
<div class="playerContainer">
<img class="play" src="/Design/images/widget/flash/btn_play.gif" />
<img class="stop" src="/Design/images/widget/flash/btn_stop.gif" />
</div>
<div class="drawer">
</div>

5. JavaScript 작성하기
JavaScript를 이용하여 플래시 위젯의 동작을 구현합니다. 플래시 재생/중지 버튼 기능, 접기 버튼 기능, 위젯 크기 조절 등의 기능을 구현하고 있습니다.

JavaScript 작성하기 (Language : javascript)

var WZD_Flash = {
swfObject : null,
drawer : null,

size : { width: 300, height: 300 },
minSize : { width: 0, height: 300 },
maxSize : { width: 0, height: 0 },

folded : false,

load : function() {
this._initPlayer();
this._initDrawer();

if (widget.getValue('autoPlay')) {
WZD_Flash._play(0);
}
},

resize : function(width, height) {
if (!this.folded) {
height -= 48; // player 높이 빼기
}

this.size.width = this.maxSize.width || (width - 15);
this.size.height = this.maxSize.height || (height - 12); // drawer 높이 빼기
this.size.height = Math.max(this.minSize.height, this.size.height);

var swfContainer = widget.body.getElementsByClassName('swfContainer')[0];
swfContainer.style.width = this.size.width + 'px';
swfContainer.style.height = this.size.height + 'px';

if (this.swfObject) {
this.swfObject.width = this.size.width;
this.swfObject.height = this.size.height;
}
},

compactResize: function() {
var swfContainer = widget.body.getElementsByClassName('swfContainer')[0];
swfContainer.style.height = this.minSize.height + 'px';

if (this.swfObject) {
this.swfObject.height = this.minSize.height;
}
},

_initDrawer : function() {
if (this.drawer) {
return;
}
this.drawer = new UWA.Controls.Drawer;
this.drawer.onChange = function(folded) {
WZD_Flash.folded = folded;
widget.body.getElementsByClassName('playerContainer')[0][folded ? 'hide': 'show']();
}.bind(this);
this.drawer.appendTo(widget.body.getElementsByClassName('drawer')[0]);

if (widget.getValue('autoPlay')) {
this.drawer.hide();
} else {
this.drawer.show();
}
},

_initPlayer : function() {
var paly = widget.body.getElementsByClassName('play')[0];
paly.onclick = function() {
WZD_Flash._play(0);
};

var stop = widget.body.getElementsByClassName('stop')[0];
stop.onclick = function() {
WZD_Flash._stop();
};
},

_play : function(index) {
this._makeSWFObject(index);
this.swfObject = widget.body.getElementsByTagName('object')[0];
},

_stop : function() {
this._setEmptySWF();
this.swfObject = null;
},

_makeSWFObject : function(index) {
var flashUrl = widget.getValue('flashUrl');
if (null == flashUrl || '' == flashUrl) {
this._setEmptySWF();
return;
}

this._setSWF('<object type="application/x-shockwave-flash" data="'+flashUrl+'" width="'+this.size.width+'" height="'+this.size.height+'"><param name="movie" value="'+flashUrl+'" /></object>');
},

_setSWF : function(swf) {
widget.body.getElementsByClassName('swfContainer')[0].innerHTML = swf;
},

_setEmptySWF : function() {
this._setSWF('<img class="defaultSWF" src="/Design/images/widget/flash/default.gif" />');
}
}

widget.onLoad = widget.onRefresh = function() {
WZD_Flash.load();
};

widget.onResize = function(width, height) {
WZD_Flash.resize(width, height);
};

widget.onMaximize = function(width, height) {
WZD_Flash.maxSize = { width: width - 100, height: height - 250};
};

widget.onRestore = function() {
WZD_Flash.maxSize = { width: 0, height: 0 };

WZD_Flash.compactResize();
};

6. CSS 작성하기
위젯의 디자인을 적용합니다.

CSS 작성하기 (Language : css)

div.swfContainer {
height : 300px;
margin : 0 auto;
text-align : center;
}

div.playerContainer {
background : #FFFFFF none repeat scroll 0%;
border : 4px solid #DFDFDF;
height : 40px;
text-align : center;
}

img.defaultSWF {
margin-top : 50px;
}

img.play, img.stop {
margin-top : 5px;
cursor : pointer;
}

7. 에뮬레이터로 확인하기
다음 코드를 추가하면 에뮬레이터에서 위젯이 동작하는 것을 테스트할 수 있습니다.

사용자 삽입 이미지

에뮬레이터로 확인하기 (Language : javascript)

<script type="text/javascript" src="http://wzdapi.com/widget/emulator.js"></script>

Posted by young.un

Tag 위자드웍스, 위젯, 위젯만들기

Response

You can track responses via RSS / ATOM feed

No Trackback
No Comment