Flash(フラッシュ)のメッセージボード素材(クラゲ)
Flash(フラッシュ) メッセージボード素材(クラゲ)です。
水の中をクラゲが幻想的に泳ぎ回るFlashメッセージボードです。クラゲと泡が下から浮かび上がってくる様は、涼しげな雰囲気を醸し出し、夏にぴったりのホームページ素材となっております。
リンクウェアのため、Flash素材を利用するには当サイトへのテキストリンクが必要です。
利用規約をお読みになってからご利用ください。
Flash素材情報
【サイズ】 横500px〜700px X 縦200px(11.4KB)
【サイズ変更】 不可
【バージョン】 Flash Player8
【ファイル】 jellyfish.swf、imgフォルダ、load.txt、tag.txt、sample.html、AC_RunActiveContent.js
【特徴】 背景画像やタイトル、時計、メッセージボードの色・透明度を外部テキストファイルで変更可能
必要な画像及びサイズ
【キービジュアル部分】
500px X 200px − 500px X 200pxの画像を1つ
600px X 200px − 600px X 200pxの画像を1つ
700px X 200px − 700px X 200pxの画像を1つ
Flash素材の設置方法
tag.txtファイルを開き、中のタグをFlash素材を埋め込みたい位置にコピー&ペーストします。swfファイルを違うフォルダに置きたい時は、Flash素材の設置方法ページを参考にしてください。なお、swfファイルを違うフォルダに置く場合でも、load.txtはFlash素材を埋め込むhtmlファイルと同じフォルダに置く必要があります。
load.txtファイルをテキストエディタで開くと、
&title=Flash Works&
&titlecolor=0xffffff&
&keyvisual=img/key-v1.jpg&
&speed=3.5&
&mtext=Flash Worksへようこそ!!<br>このメッセージボードは、・・・&
mtitle=<b>Flash Works NEWS</b>
&mtitlecolor=0x333333&
&headcolor=0xcccccc&
&headalpha=100&
&bodycolor=0xffffff&
&bodyalpha=60&
&footercolor=0x000000&
&footeralpha=30&
&bttextcolor=0xffffff&
&sb1color=0x999999&
&sb1alpha=100&
&sb2color=0xffffff&
&sb2alpha=100&
&shadowcolor=0x000000&
&shadowalpha=30&
&timecolor=0xffffff&
&watercolor=0x00ffff&
&wateralpha&
&bgcolor=0xffffff&
となっています。
設定項目数が多くなってしまいましたが、それだけオリジナルな素材になると思います。数字やカラーを変更するだけなので、変数の指している場所さえ分かれば簡単だと思いますが、予め、load.txtのコピーをとってからカスタマイズしてください。
最初のtitleでサイトのタイトル等を入力します。文字数制限があるので、確認しながら行ってください。オーバーすると文字が切れます。なお、フラッシュのテキストは、機種に依存するので『_ゴシック』を利用しています。他のフォントを使用したい方は、ここを空欄にして、画像の方にテキストを打ち込んでください。
2行目のtitlecolorでタイトル文字の色を指定します。0xに続けて16進数で指定してください。その他の部分の色指定の仕方も同じです。
白(ffffff)、黒(000000)、赤(ff0000)、青(0000ff)、黄(ffff00)、オレンジ(ff6600)、緑(009900)など
3行目のkeyvisualは、キービジュアル部分の画像までのパスを入力します。フォルダ名や画像名を変更したとき、または、画像フォルダを違った階層に置く場合はパスを調節してください。画像を変更するときは、同じ名前で画像を上書きする方が簡単です。jpg画像・gif画像・png画像・swfファイルを読み込めます。
4行目のspeedは、メッセージボードの上下スライドのスピードを指定します。数が大きくなるほど遅くなります。
5行目のmtextは、メッセージボードに表示させる本文です。基本的なhtmlによって、テキストを装飾できます。外部テキストファイルによって色変更できるようにすると、htmlでのフォントカラーを指定できなくなるので、ここのテキストだけは色変更できません。画像によってテキストが読みにくいときは、色と透明度で調節してください。
6行目のmtitleは、メッセージボードの上部分のタイトルを入力します。一応、基本的なhtmlを利用できるようにしています。
7行目のmtitlecolorでメッセージボードのタイトルの色を指定します。
8行目のheadcolorでメッセージボードのヘッダー画像の色を指定します。
9行目のheadalphaでメッセージボードのヘッダー画像の透明度を指定します。0から100までの数字で指定しますが、数が大きくなるほど透明度がなくなります。
10行目のbodycolorでメッセージボードのボディー画像の色を指定します。
11行目のbodyalphaでメッセージボードのボディー画像の透明度を指定します。
12行目のfootercolorでメッセージボードのフッター画像の色を指定します。
13行目のfooteralphaでメッセージボードのフッター画像の透明度を指定します。
14行目のbttextcolorでメッセージボード下部のopen・closeボタンのテキストカラーを指定します。
15行目のsb1colorでメッセージボード右側にあるスクロールボタンのベースカラーを指定します。
16行目のsb1alphaでメッセージボード右側にあるスクロールボタンのベースの透明度を指定します。
17行目のsb2colorでメッセージボード右側にあるスクロールボタンの三角形のカラーを指定します。
18行目のsb2alphaでメッセージボード右側にあるスクロールボタンの三角形の透明度を指定します。
19行目のshadowcolorでメッセージボード右側にある影の色を指定します。
20行目のshadowalphaでメッセージボード右側にある影の透明度を指定します。
21行目のtimecolorで時計のテキストカラーを指定します。
22行目のwatercolorで泡の上にある水のカラーを指定します。水の中を再現するために、下から、背景、金魚、泡、水といった具合に重ねています。この水のレイヤーによって、水中をよりリアルに再現しています。
23行目のwateralphaで泡の上にある水の透明度を指定します。
24行目のbgcolorでFlashの背景色をしていします。角丸の素材のため、四隅に空きができてしまい、htmlファイルの背景色とFlashの背景色が異なる場合に、ここで簡単に調節できます。
最後に表示動作確認・リンクチェックが正しければ成功です。必要なファイルをアップし、もう一度、動作確認等してください。
なお、上記で説明している行番号は、このページで説明しているload.txtの行番号です。実際には、コメントを入れてありますので、ここでの行番号と異なります。当サイトと照らし合わせてカスタマイズしてください。コメントは削除してもかまいません。
画像作成に便利な無料ソフト
『メッセージボード素材の背景画像を変更したいけど画像編集ソフトを持っていないから変更できない』という方は、以下の無料ソフトをご利用ください。
GIMP-無料(フリー)の画像編集ソフト ― (写真画像の編集・ボタン素材作成)
Inkscape-無料(フリー)のドローソフト ― (イラスト・地図・ボタン素材作成)
無料のFlash(フラッシュ)作成ソフト ― (Flashと同じ動的ファイルswfの作成)