Flash Works >> Flash(フラッシュ)のインターフェイス素材 >> インターフェイス素材10(ダイレクトチェンジ)

Flash(フラッシュ)のインターフェイス素材10(ダイレクトチェンジ)

Flash(フラッシュ) インターフェイス素材10(ダイレクトチェンジ)です。
ボタンにマウスオーバーすると、対応するイメージ画像がパズルのように少しずつ表示されていくフラッシュ素材です。基本的な設定の仕方や動作は、Flashインターフェイス素材10と同じです。フォトアルバムとしてもご活用いただけます。

なお、検索ロボットはFlashの中のリンクを辿ることができないため、サイトマップ等を利用してSEO対策してください。

リンクウェアのため、Flash素材を利用するには当サイトへのテキストリンクが必要です。
利用規約をお読みになってからご利用ください。

500px X 240px(3.87KB) 3ボタン
500px X 240px(3.91KB) 4ボタン
600px X 240px(3.88KB) 3ボタン
600px X 240px(3.93KB) 4ボタン
700px X 240px(4.21KB) 3ボタン
700px X 240px(4.26KB) 4ボタン

Flash素材情報

【サイズ】 横500px〜700px X 縦240px(3.87KB〜4.26KB) 3〜4ボタン
【サイズ変更】 不可
【バージョン】 Flash Player8
【ファイル】 interface10.swf、imgフォルダ、load.txt、tag.txt、sample.html、AC_RunActiveContent.js
【特徴】 画像とリンク先・リンクターゲットを外部テキストファイルで変更できます

必要な画像及びサイズ

【ボタン部分】
横500px(3ボタン) − 横150px X 縦80pxの画像を3つ
横500px(4ボタン) − 横150px X 縦60pxの画像を4つ
横600px、700px(3ボタン) − 横200px X 縦80pxの画像を3つ
横600px、700px(4ボタン) − 横200px X 縦60pxの画像を4つ

【イメージ部分】
500px X 240px(4ボタン) − 350px X 240pxの画像を3つ
500px X 240px(5ボタン) − 350px X 240pxの画像を4つ
600px X 240px(4ボタン) − 400px X 240pxの画像を3つ
600px X 240px(5ボタン) − 400px X 240pxの画像を4つ
700px X 240px(4ボタン) − 500px X 240pxの画像を3つ
700px X 240px(5ボタン) − 500px X 240pxの画像を4つ

Flash素材の設置方法

tag.txtファイルを開き、中のタグをFlash素材を埋め込みたい位置にコピー&ペーストします。swfファイルを違うフォルダに置きたい時は、Flash素材の設置方法ページを参考にしてください。なお、swfファイルを違うフォルダに置く場合でも、load.txtはFlash素材を埋め込むhtmlファイルと同じフォルダに置く必要があります。

load.txtファイルをテキストエディタで開くと、
&bgcolor=0xffffff&
&bt1=img/bt_1.jpg&
&img1=img/img_1.jpg&
&linkurl1=http://www.google.co.jp/&
&target1=_self&
となっています。

1行目のbgcolor=0xffffffは、背景色の設定です。最初からイメージ部分を動的に表示しているため、サイトのデザインによっては背景色が合わないという場合があります。その場合、ここで、サイトの背景色と同じ色を0xに続けて16進数で指定してください。
白(ffffff)、黒(000000)、赤(ff0000)、青(0000ff)、黄(ffff00)、オレンジ(ff6600)、緑(009900)など

2行目のbt1=img/bt_1.jpgは、ボタン部分の画像までのパスを入力します。フォルダ名や画像名を変更したとき、または、画像フォルダを違った階層に置く場合はパスを調節してください。画像を変更するときは、同じ名前で画像を上書きする方が簡単です。jpg画像・gif画像・png画像・swfファイルを読み込めます。

3行目のimg1=img/img_1.jpgは、イメージ部分の画像までのパスを入力します。カスタマイズ方法はボタン画像と同じです。

4行目のlinkurl1=http://www.google.co.jp/は、イメージ画像部分のリンク先URLです。相対パスを利用するときは、Flash素材を埋め込むhtmlファイルからのパスをご利用ください。フォトアルバムとしてお使いになりたいときは、linkurl1=に続くURLを削除すことによって、リンクを貼らないようにできます。

5行目のtarget1=_selfは、ウィンドウの開き方を指定します。_self、_blank等で指定してください。

以降、2部分、3部分と上記の繰り返しです。

最後に表示動作確認・リンクチェックが正しければ成功です。必要なファイルをアップし、もう一度、動作確認等してください。

なお、上記で説明している行番号は、このページで説明しているload.txtの行番号です。実際には、コメントを入れてありますので、ここでの行番号と異なります。当サイトと照らし合わせてカスタマイズしてください。コメントは削除してもかまいません。

画像作成に便利な無料ソフト

『インターフェイス素材を利用したいけど画像編集ソフトを持っていないから使えない』という方は、以下の無料ソフトをご利用ください。

GIMP-無料(フリー)の画像編集ソフト ― (写真画像の編集・ボタン素材作成)
Inkscape-無料(フリー)のドローソフト ― (イラスト・地図・ボタン素材作成)
無料のFlash(フラッシュ)作成ソフト ― (Flashと同じ動的ファイルswfの作成)

▲ページトップへ