短時間でFlashボタンを作成はマウスロールオーバー時のみ反応するボタンを定義しました。FBEはマウスクリック時も特殊効果を付け加えることが可能です。 左図の上でクリックして動作サンプルを御覧下さい。

STEP1~STEP3迄の作業手順としてFBEイージーモードの具体的な設定例を説明します。

それではSTEP1から始めましょう。

 
STEP 1

a.画像を準備しましょう

準備した3枚の画像例

画像を3枚準備しましょう。

  • 1枚目は通常ボタン画像です。
  • 2枚目はマウスロールオーバー画像です。
  • 3枚目はクリックボタン画像です。

当サンプルでは2x2のボタンイメージ画像を使用します。

 

b.ファイル設置場所の確認

同一フォルダに移動しましょう

  • 各画像ファイル(btn_normal.jpg、btn_rollover.jpg)
  • 定義ファイル(config.xml)
  • HTMLファイル(misfbe.html)
  • FBE本体(misfbe.swf)
  • フラッシュプレイヤーチェック関数(flash_check.js)
  • FBE制御関数(flash.js)

適当なフォルダを作成し画像ファイル、定義ファイル、HTMLファイル、FBE本体、JavaScirptファイル(flash.js,flash_check.js)を全て同一のフォルダに移動します。 JavaScriptファイル郡(flash.js,flash_check.js)は配布ファイル中の「jsフォルダ」に格納されています。

 
STEP 2

a.クリックエフェクト定義方法

config.xmlはFBE起動時に読み込まれ、FBE自身を制御するための定義ファイルです。 短時間でFlashボタンを作成と異なる点は、マウスクリック時に必要な3パラメータが追加されていることです。 config.xmlをテキストエディタ等で開き、以下の9パラメータをcommonセクション(コモンセクション)中に指定して下さい。

config.xmlの内容(クリックも反応させる為の定義)

<?xml version="1.0" encoding="UTF-8" ?>

<pagedata>

<common>

    <copyright>elz.jp</copyright>

    <col_max>2</col_max>
    <row_max>2</row_max>

    <button_normal>btn_normal.jpg</button_normal>
    <button_over>btn_rollover.jpg</button_over>
    <button_click>btn_click.jpg</button_click>

    <over_effect>4512</over_effect>
    <over_time>5</over_time>

    <click_effect>4515</click_effect>
    <click_time>5</click_time>

</common>

</pagedata>

config.xmlの内容(クリックのみ反応させる為の定義)

<?xml version="1.0" encoding="UTF-8" ?>

<pagedata>

<common>

    <copyright>elz.jp</copyright>

    <col_max>2</col_max>
    <row_max>2</row_max>

    <button_normal>btn_normal.jpg</button_normal>
    <button_click>btn_click.jpg</button_click>

    <click_effect>4515</click_effect>
    <click_time>5</click_time>

</common>

</pagedata>

※UTF-8に対応したテキストエディタが必要です

パラメータ説明
1.col_max (列数)

用意した画像の横分割数を指定して下さい。 当サンプルでは2x2のボタン画像を用意していますので2を指定します。

2.row_max (行数)

用意した画像の縦分割数を指定して下さい。 当サンプルでは2x2のボタン画像を用意していますので2を指定します。

3.button_normal (通常ボタン画像)

通常ボタン画像を指定して下さい。 通常ボタン画像とは常に表示されるボタンイメージ画像です。

4.button_over (ロールオーバーボタン画像)

マウスロールオーバー時に表示させるボタン画像を指定して下さい。 ロールオーバーボタン画像とはマウスロールオーバー時に表示される画像です。

5.button_click (クリックボタン画像)

マウスクリック時に表示させるボタン画像を指定して下さい。 クリックボタン画像とはマウスクリック時に表示される画像です。

6.over_effect (ロールオーバーエフェクト種別)

エフェクト種別を指定して下さい。 エフェクトは多数用意されていますのでエフェクトリファレンスから御覧下さい。

7.over_time (ロールオーバーエフェクト時間)

エフェクト時間を0.1秒単位で指定して下さい。 1秒間エフェクトさせたい場合は、10と指定します。

8.click_effect (クリックエフェクト種別)

エフェクト種別を指定して下さい。 エフェクトは多数用意されていますのでエフェクトリファレンスから御覧下さい。

9.click_time (クリックエフェクト時間)

エフェクト時間を0.1秒単位で指定して下さい。 1秒間エフェクトさせたい場合は、10と指定します。

STEP 3

HTMLへ組み込みましょう

HTMLソース(???.html)を開いて編集します。以下の2つの記述を行います。

  1. 外部JavaScriptファイル(FBEを制御する為のopenFBE関数等が含まれます)読み込み定義を記述して下さい。
  2. FBEを組み込みたい個所へopenFBE関数(JavaScript)を記述して下さい。

※JavaScriptファイル郡(flash.js,flash_check.js)は配布ファイル中の「jsフォルダ」に格納されています。

1.外部JavaScriptファイルの組込み

<!-- ここから外部JavaScriptファイルの読込定義 --> 
<script type="text/javascript" src="flash_check.js"></script>
<script type="text/javascript" src="flash.js"></script>
<!-- ここまで外部JavaScriptファイルの読込定義 -->

※上記コードをHTMLソース先頭の<head>から</head>の間に記述(コピー&ペースト)します。

2.openFBE関数での組み込み(例)

<!-- ここからFBE組込定義 -->
<script type="text/javascript">
<!--
openFBE('misfbe.swf','btn_normal.jpg',335,255,'config.xml','#ffffff');
//-->
</script>
<!-- ここまでFBE組込定義 -->

※FBEを組み込みたい箇所へ、上記コードをHTMLソースに記述(コピー&ペースト)します。後述するパラメータ説明を参考に、画像サイズ等のパラメータを修正して下さい。

※ここでは理解し易くするためにJavaScript無効の環境下での代替イメージ表示定義は省いています。

パラメータ説明

openFBE('FBE本体ファイル名','代替イメージ',横幅,高さ,'定義ファイル名','背景色')

openFBE関数の書式は上記内容となります。当説明に沿ってファイル郡を準備されている場合、第3引数の「横幅」と第4引数の「高さ」を用意した画像サイズへ変更してください。

第2引数で指定されている「btn_normal.jpg」は古いFlashPlayerがインストールされている環境で表示される代替イメージです。FBEをはじめて利用される方はあまり気にしないで下さい。

リファレンスマニュアルHTMLへの組込方法HTMLへの組込み手順には詳細が記載されています。