ヤシマ機関アナログ時計 Flash 素材

ヤシマ機関アナログ時計ブログパーツのベースとなっているヤシマ機関アナログ時計 Flash 素材を配布しています。

ヤシマ機関アナログ時計 Flash 素材は、時計の秒針、分針、時針、背景と枠の画像を取り替えることによりデザインを自由にカスタマイズできます。
画像の修正のみでカスタマイズできますので、Flash の知識が無い方でも簡単にオリジナルアナログ時計が作成できます。

ヤシマ機関アナログ時計 Flash 素材は商用利用も可能です。
ウェブサイトにもう一つ何か欲しいとお考えのウェブデザイナー様にぜひご利用頂きたい一品です。
（素材の利用については、Flash 素材利用規約をご覧ください。）

使い方

以下のリンクをクリックし、素材が含まれた ZIP ファイルをダウンロードしてください。

yashima_clock.zip

この ZIP ファイルの内容は、ヤシマ機関アナログ Flash 時計【丸】と同じデザインとなっており、以下のファイルが含まれています。

clock.swf
ヤシマ機関アナログ時計 Flash 本体。
この Flash は ActionScript3 で記述されているため、実行には FlashPlayer 9 以上が必要です。
時計用画像
アナログ時計のデザインに使用する以下の画像が含まれています。
  • bg.png - 背景
  • hour.png - 時針
  • minute.png - 分針
  • second.png - 秒針
  • frame.png - 枠
embed.js
clock.swf を読み込むための JavaScript ファイル。
ブログパーツ配布用スクリプトとしても使用できます。
exam.html
サンプル実行用の HTML ファイル。

とりあえず動かしてみたい場合は、ウェブサーバ上で公開されている適当なディレクトリで ZIP ファイルを解凍し、ブラウザから exam.html にアクセスしてください。（FlashPlayer から画像を読み込むため、ファイルを解凍して file: プロトコルでローカルファイルシステム上の exam.html にアクセスしても表示されません。必ずウェブサーバ経由でアクセスしてください。）
以下のヤシマ機関アナログ時計ブログパーツ【丸】と同じデザインの時計が表示されます。

Get Adobe Flash player

デザインのカスタマイズ

Flash 素材のデザインを変更する場合は、以下の手順で行ってください。

  1. 時計用画像を修正する

    各時計用画像をお好みのデザインに修正します。

    各画像は Flash 実行時において、embed.js で指定した時計全体のサイズの中心点に合わせて配置されます。
    （デフォルトで付属している各画像ファイルは 157px × 157px となっていますが、embed.js では Flash のサイズを 160px × 160px と指定していますので、各画像は (1.5px, 1.5px) を基準位置として配置されます。）
    各画像の幅が偶数幅の場合中心点がずれますので、奇数幅にしておく方が無難だと思います。
    各画像のサイズをバラバラにしておくこともできます。正方形でなくても構いません。

    秒針、分針、時針は 0 時 0 分 0 秒の状態で作成します。
    またこれらの針の画像はそのサイズのまま中心点に合わせて配置されますので、余白部分も残しておいてください。
    （この辺の意味が分かりにくければ以下のカスタマイズ例をご覧ください。）

    各時計用画像には jpeg、png、gif フォーマットを使用できます。
    ただし、背景画像以外は重ね合わせて表示されますので、透過 png または 透過 gif を使用してください。
    （png 以外のファイル形式については動作確認をしていませんので、ご注意ください。）

    各画像は、以下の順に（画面奥から）レンダリングされます。

    1. bg.png
    2. hour.png
    3. minute.png
    4. second.png
    5. frame.png

    各画像を消すと単純に表示されなくなります。
    例えば秒針を表示させたくない場合、second.png を削除するか、second.png を完全に透過なファイルに置き換えることで実現できます。
    （サンプルとしての都合上、ZIP ファイルには完全に透過な frame.png を含めておりますが、消していただいても動作は変わりません。）

    なお、素材の ZIP ファイルに含まれている画像をそのまま使用して頂いても結構です。

  2. embed.js を修正する

    embed.js をテキストエディタで開きます。
    ファイルの先頭部分に設定用の変数が指定されていますので、必要に応じて編集します。(編集箇所は赤字部分です。)

    (function() {
    var clockswf = 'clock.swf';
    var width = 160;
    var height = 160;
    var bgcolor = "#ffffff";
    var flashvars = {
	//tick:"sec,min,hour",
	//imagebase:"/",
    }

    各設定用変数の意味は以下のとおりです。

    clockswf
    ヤシマ機関アナログ時計 Flash 本体を指す URL。
    embed.js、clock.swf とそれを呼び出す HTML ファイルを異なるディレクトリに配置したり、異なるホスト (ウェブサイト) から embed.js を読み込む場合は、http://example.com/swf/clock.swf というような http:// や https:// から始まる完全な URL を指定する必要があります。
    これらの条件に当てはまらない場合、修正する必要はありません。
    width
    アナログ時計表示領域の幅です。
    時計用画像のサイズを変更した場合、それに合わせたサイズを指定してください。
    height
    アナログ時計表示領域の高さです。
    時計用画像のサイズを変更した場合、それに合わせたサイズを指定してください。
    bgcolor
    アナログ時計表示領域の背景色です。
    デフォルトの背景色は白です。
    背景色を変更する場合、#000000 といった # で始まる HTML 色を指定してください。white や black といった色名での指定は一部のブラウザで無効になります。
    flashvars
    clock.swf の実行時オプションを指定します。
    デフォルトではすべてコメントアウトされていますので、有効にする場合は各行の // を削除してください。
    clock.swf と画像ファイルを置くディレクトリを分ける際は、imagebase に画像ファイルを置いた URL を指定してください。
    特定の画像ファイルのみ別ディレクトリに配置することはできません。

    カスタマイズ例 に embed.js の修正方法を例示しています。JavaScript に詳しくない方はそちらもご覧ください。

  3. exam.html から呼び出し用 HTML コードをコピーする

    exam.html 以外の HTML ファイルに時計を表示する場合は、exam.html から以下の部分をコピーして貼り付けてください。

    <script type="text/javascript" src="embed.js"></script>

    embed.js と HTML ファイルを異なるディレクトリや異なるホスト (ウェブサイト) に配置する場合は、src には以下の例のような http:// や https:// から始まる完全な URL を指定してください。

    <script type="text/javascript" "src="http://example.com/swf/clock.swf"></script>

  4. サーバに配置する

    修正が完了したら時計用画像、clock.swf、embed.js と呼び出し用 HTML ファイルをウェブサーバに配置してください。
    配置後、想定通りに時計が動いていれば完成です。

実行時オプション

clock.swf に渡す FlashVars に以下のオプションを指定することで、ヤシマ機関アナログ時計の動作を変更することができます。

tick

時計の針の進め方をカチカチさせます。（針の進み方が、秒単位／分単位／時単位となり、スムーズに動かなくなります。）
秒針をカチカチさせる場合は sec、分針をカチカチさせる場合は min、時針をカチカチさせる場合は hour を tick に指定してください。
カンマ区切りで複数指定することもできます。複数指定する際、順序は関係ありません。

以下のように指定すると、すべての針がカチカチします。

var flashvars = {tick:"sec,min,hour"};
Get Adobe Flash player
imagebase

時計用画像ファイルを配置したディレクトリの URL を変更します。
clock.swf を複数個インストールするのを避けたい場合などに使用してください。

imagebase には、絶対 URL か埋め込み元の HTML ファイルからの相対 URL を指定します。
imagebase が指定されない場合 clock.swf が置かれたディレクトリが画像ファイルを配置するディレクトリとなります。

以下のように指定すると、/swfimages から時計用画像をロードします。

var flashvars = {imagebase:"/swfimages"};

時計用画像の別ホストへの配置はサポートしていません。

カスタマイズ例

ヤシマ機関アナログ時計 Flash 素材のカスタマイズ例です。

  1. 時計画像を作成します。例に使用するファイルは以下の4つです。
    ブログパーツや素材に含まれている画像との違いを明確にしたかったので、各画像のサイズを 133×145 にしてみました。

    背景の例
    背景 (bg.png)
    時針の例
    時針 (hour.png)
    分針の例
    分針 (minute.png)
    秒針の例
    秒針 (second.png)

    時針、分針、秒針は透過 png で作成してください。
    上の例ではグレー部分が透過色です。

    これらの画像が時計に埋め込まれる際は、ブラウザで直接使用されず FlashPlayer により処理されますので、IE6 等透過 png が扱えないブラウザ上でも問題なく表示されます。

  2. ZIP ファイルを解凍し、時計用画像を先ほど作成した画像で置き換えます。
    このときに frame.png を削除して頂いても結構です。

  3. embed.js を以下のように編集します。

    (function() {
    var clockswf = 'clock.swf';
    var width = 160;
    var height = 160;
    var bgcolor = "#ff0000";
    var flashvars = {
	tick:"sec",
	//imagebase:"/",
    }

  4. 画像等 Zip ファイルに含まれるすべてのファイルをウェブサーバへアップロードします。
    ブラウザから exam.html にアクセスすると以下のように表示されます。