個別定義モードでは、画像の任意矩形をボタンとして動作させることができます。ボタンとして認識させたい箇所のX座標、Y座標、幅(width)、高さ(height)をbuttonセクションにそれぞれ定義することになります。

STEP 1

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

準備した2枚の画像例

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

 

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

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

  • 各画像ファイル(btn_normal.jpgbtn_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.任意矩形の指定方法

ボタン定義1から5までがボタンとして動作させたい矩形となります。この例では合計5箇所(ボタン)の定義を行う必要があります。

config.xml定義例

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

<common>

    <copyright>elz.jp</copyright>

<!-- 個別定義モード指定 -->
    <button_mode>1</button_mode>

<!-- ボタン画像指定 -->
    <button_normal>btn_normal.jpg</button_normal>
    <button_over>btn_rollover.jpg</button_over>

<!-- エフェクト指定 -->
    <over_effect>3715</over_effect>
    <over_time>6</over_time>

</common>


<expert>

<!-- ボタン1定義 -->
    <button x="20" y="90" w="120" h="80"></button>

<!-- ボタン2定義 -->
    <button x="20" y="220" w="120" h="80"></button>

<!-- ボタン3定義 -->
    <button x="500" y="90" w="120" h="80"></button>

<!-- ボタン4定義 -->
    <button x="500" y="220" w="120" h="80"></button>

<!-- ボタン5定義 -->
    <button x="160" y="95" w="320" h="200"></button>

</expert>


</pagedata>

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

commonセクション パラメータ説明
1. button_mode (ボタンモード)

ボタンモードを指定して下さい。

「1:個別定義モード」を指定した場合「buttonセクション」でボタンサイズ(x,y,width,height)を定義する必要があります。

設定値

  • 0 : イージーモード
  • 1 : 個別定義モード

省略時は「イージーモードになります」

buttonセクション属性値説明
1. x (ボタンX座標)

ボタン位置(X座標)をピクセル単位で指定します。

button_modeが0(イージーモード)の場合、当パラメータは無視されます。

2. y (ボタンY座標)

ボタン位置(Y座標)をピクセル単位で指定します。

button_modeが0(イージーモード)の場合、当パラメータは無視されます。

3. w (ボタン横幅)

ボタン横幅(width)をピクセル単位で指定します。

button_modeが0(イージーモード)の場合、当パラメータは無視されます。

4. y (ボタン高さ)

ボタン高さ(height)をピクセル単位で指定します。

button_modeが0(イージーモード)の場合、当パラメータは無視されます。

リファレンスマニュアル中のcommon(共通セクション)button(ボタンセクション)には各パラメータの詳細説明が記載されています。 当サンプルではご紹介していない設定方法等も御座いますので「FBEの基本」をご理解頂いた後に、参照されることをお勧めします。

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への組込み手順には詳細が記載されています。