Flash Button Engineの簡単な利用方法から各種機能、サンプル等をご覧いただけます。

インデックス(目次)

 

インデックス(概要)

入門編(イージーモード)

短時間でFlashボタンを作成
短時間でFlashボタンを作成

FBE(Flash Button Engine)は、画像加工ソフト等でWEBページ素材を作成できる方であれば特殊効果付きの

クリック時も特殊効果を
クリック時も特殊効果を

はマウスロールオーバー時のみ反応するボタンを定義しました。FBEはマウスクリック

リンク先の指定
リンク先の指定

FBEはリンク先を指定することも可能です。左のサンプルをクリックして確認して下さい。

ボタンにそれぞれ異なる効果を与える
ボタンにそれぞれ異なる効果を与える

FPEはボタンそれぞれに異なるエフェクトを適用可能です。個別にエフェクトを指定するにはbu

ロールオーバー、クリック時に効果音を再生する
ロールオーバー、クリック時に効果音を再生する

1.2.0よりイベントに応じてを再生できるようになりました。効果音で利用するサウンドファイル(mp3)は

ボタン別に異なる効果音を再生する
ボタン別に異なる効果音を再生する

当フラッシュボタンサンプルは効果音が再生されます。スピーカーのボリュームにお気をつけ下さい

 

応用編(個別定義モード)

任意の矩形をフラッシュボタンに
任意の矩形をフラッシュボタンに

個別定義モードでは、画像の任意矩形をボタンとして動作させることができます。ボタンと

オーバーレイ画像でフラッシュナビゲーション
オーバーレイ画像でフラッシュナビゲーション

マウスロールオーバーイベント発生時に任意の画像を表示させるサンプルです。オーバーレイセクショ

オーバーレイ画像の拡大縮小
オーバーレイ画像の拡大縮小

別記事のサンプルはオーバーレイ画像を右から左へ移動させていました。当サンプルはカスタムエフェ

小さめなオーバーレイ画像の表示
小さめなオーバーレイ画像の表示

マウスロールオーバーイベントに連動して、小さめのオーバーレイ画像(240x150)をその場で回転させるサ

小さめなオーバーレイ画像の移動
小さめなオーバーレイ画像の移動

マウスロールオーバーイベントに連動して、小さめのオーバーレイ画像(240x150)を左から右へ移動させる

大きめなオーバーレイ画像の移動
大きめなオーバーレイ画像の移動

マウスロールオーバーイベントに連動して、大きめのオーバーレイ画像(640x400)を下から上へ移動させる

オーバーレイ画像のズームアウト
オーバーレイ画像のズームアウト

マウスロールオーバーイベントに連動して、大きめのオーバーレイ画像(640x400)をズームアウトさせるフ

 

各種機能

背景の指定
背景の指定

ボタンに移動系エフェクトを適用している場合、背景を用意することでボタンにアクセント

余白制御
余白制御

余白(padding)とはボタン間の空白のことです。準備していただく画像のサイズやエフェクトによってはpad

初期表示エフェクト
初期表示エフェクト

背景画像と通常ボタン画像は、FBE起動時に初期表示エフェクトを適用することができます。

スコープ機能
スコープ機能

スコープとはボタン表示領域をオーバーした画像の表示、非表示を制御するためのものです。 スコ

 

プラグイン

簡単なアルファマスク効果利用方法
簡単なアルファマスク効果利用方法

1.2.0よりアルファマスクプラグイン効果が利用できます。アルファマスクは通常のマスクと異なり、

ボタン毎に異なるアルファマスク効果
ボタン毎に異なるアルファマスク効果

ボタン別にアルファマスク効果を適用するサンプルです。 Flash Player 8以上の環境で御覧いただけま

簡単なマスク効果利用方法
簡単なマスク効果利用方法

マスク効果(プラグイン)を組み合わせることで表現力が大幅にアップします。マスク効果の速度はover_ti

簡単なマスク効果利用方法2
簡単なマスク効果利用方法2

ではeffect_type:1(特殊効果無し)とマスク効果(プラグイン)の組合せを紹介しました。ここでは他のエフェ

ボタン毎に異なるマスク効果
ボタン毎に異なるマスク効果

ボタン別に異なるマスク効果を適用する方法をご紹介します。 サンプルは『特殊効果無し

簡単なフィルタ効果利用方法
簡単なフィルタ効果利用方法

フィルタ効果(プラグイン)を組み合わせることで表現力が大幅にアップします。 サンプルは

簡単なフィルタ効果利用方法2
簡単なフィルタ効果利用方法2

ではeffect_type:1(特殊効果無し)とフィルタ効果(プラグイン)の組合せを紹介しました。ここでは他のエフ

ボタン毎に異なるフィルタ効果
ボタン毎に異なるフィルタ効果

ボタン別に異なるフィルタ効果を適用する方法をご紹介します。 サンプルは『フェードイ

 

サンプル

円形サムネイル画像ナビゲーション
円形サムネイル画像ナビゲーション

マウスロールオーバーイベントに連動して、大きめの円形サムネイル画像(640x640px)を回転させるフラッ

横長サムネイル画像ナビゲーション
横長サムネイル画像ナビゲーション

マウスロールオーバーイベントに連動して、大きめの横長サムネイル画像(1920x150px)をスクロールさせる

ズームインメニュー
ズームインメニュー

横1列に配置された3枚の画像(320x200px)がマウスロールオーバーイベントに連動してズームインするフラ

横長サムネイル画像ナビゲーション2
横長サムネイル画像ナビゲーション2

マウスロールオーバーイベントに連動して、大きめの横長サムネイル画像(1920x150px)をスクロールさせる

サムネイル画像ナビゲーション
サムネイル画像ナビゲーション

マウスロールオーバーイベントに連動して、サムネイル画像(640x750px)を上下にスクロールさせるフラッ

横長フラッシュメニューボタン
横長フラッシュメニューボタン

横長フラッシュメニューボタンです。8x1の単純なボタンですのでで定義します。馴れれば(定義フ

縦長フラッシュメニューボタン
縦長フラッシュメニューボタン

左は縦長フラッシュメニューボタンです。縦長メニューはあまり見かけませんがを利用すること

サムネイル形式フラッシュメニュー
サムネイル形式フラッシュメニュー

5x4で構成されたサムネイル画像をイージーモードでフラッシュボタン化したサンプルです。単純

写真とメニューバーの組合せ
写真とメニューバーの組合せ

写真(商品画像)の下部にメニューバーを配置したフラッシュボタンです。右部には商品の説明用

定義ファイル(XML)の流用
定義ファイル(XML)の流用

当サンプルはで作成したコンテンツの定義ファイルを流用しています。画像ファイルを別途用意

画像加工とマスク効果の組合せ
画像加工とマスク効果の組合せ

通常のボタン画像とロールオーバー画像に少しの工夫を加えることで様々な効果が得られます。

画像加工とフェードイン効果の組合せ
画像加工とフェードイン効果の組合せ

通常のボタン画像とロールオーバー画像に少しの工夫を加えることで様々な効果が得られます。

フェードイン効果とマスク効果の組合せ
フェードイン効果とマスク効果の組合せ

別サンプルとのコンビネーションです。フェードイン効果とマスク効果を組み合わせています。