【网站】Hone Hone Clock一款有趣的Flash时钟

今天介绍一款Flash人物时钟，使用的Actionscript脚本语言来实现的。通过小人的动作变换来模拟时间的变动，很有创意！这里说明下这一创意是日本一位工程师设计的，佩服。附上作者博客。

---

原作者博客

---

【正文】
现在我们分析下他的实现过程。
如果直接使用，载入以下链接即可。

---

白色背景

---

<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script> 

---

透明背景

---

<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script> 

---

而Keylion想要继续探索。打开引用链接，可以看到js源码。

/******************************************************************************
    白色背景
******************************************************************************/
var swfUrl = "http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf";

var swfTitle = "honehoneclock";

// 実行
LoadBlogParts();

/******************************************************************************
    入力      なし
    出力      document.writeによるHTML出力
******************************************************************************/
function LoadBlogParts(){
    var sUrl = swfUrl;

    var sHtml = "";
    sHtml += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="' + swfTitle + '" align="middle">';
    sHtml += '<param name="allowScriptAccess" value="always" />';
    sHtml += '<param name="movie" value="' + sUrl + '" />';
    sHtml += '<param name="quality" value="high" />';
    sHtml += '<param name="bgcolor" value="#ffffff" />';
    sHtml += '<param name="wmode" value="transparent" />';
    sHtml += '<embed wmode="transparent" src="' + sUrl + '" quality="high" bgcolor="#ffffff" width="160" height="70" name="' + swfTitle + '" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
    sHtml += '</object>';

    document.write(sHtml);
}

---

/******************************************************************************
    透明背景
******************************************************************************/
var swfUrl = "http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf";

var swfTitle = "honehoneclock";

// 実行
LoadBlogParts();

/******************************************************************************
    入力      なし
    出力      document.writeによるHTML出力
******************************************************************************/
function LoadBlogParts(){
    var sUrl = swfUrl;

    var sHtml = "";
    sHtml += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="' + swfTitle + '" align="middle">';
    sHtml += '<param name="allowScriptAccess" value="always" />';
    sHtml += '<param name="movie" value="' + sUrl + '" />';
    sHtml += '<param name="quality" value="high" />';
    sHtml += '<param name="bgcolor" value="#ffffff" />';
    sHtml += '<param name="wmode" value="transparent" />';
    sHtml += '<embed wmode="transparent" src="' + sUrl + '" quality="high" bgcolor="#ffffff" width="160" height="70" name="' + swfTitle + '" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
    sHtml += '</object>';

    document.write(sHtml);
}

可以看出两个文件差异只在var swfUrl的引用文件上不相同。这两个文件的作用在于可以修改时钟的大小以及网页中的位置。

我将时钟载入我的网站上，效果如下。

访问地址

注：大部分手机浏览器不支持Flash，火狐支持 ,Pc端正常。