FLASHの素材

ドロップダウンメニュー作成の説明

サンプル

1.提供ファイルについて

Flashの素材をご購入後、弊社よりお渡しするファイルは以下の2ファイルになります。

  • dropDownMenu.fla(Flash編集用ファイル)
  • dropDown.as(ActionScriptファイル)

※dropDown.asは編集しないでください

2.フォルダ構造について

この説明書では右記のフォルダ構造で作成することを前提にしております。特に理由がない場合は右記のフォルダ構造で作成されることをおすすめします。

  • dropDown.swfは、"dropDownMenu.fla"からパブリッシュして作成するファイルです。
  • dropDown.asは、パブリッシュ時のみに必要なファイルです。dropDownMenu.flaと同じ階層に配置しておいてください。
  • btnAフォルダには、通常時のボタンデータを格納します。
  • btnBフォルダには、マウスオーバー時のボタンデータを格納します。

dropDown.as、btnA、btnBの名称や設置階層は、変更されますと正常に動作しませんのでご注意ください。

推奨設置階層
推奨設置階層

3.ボタンについて

デザインデータ

下記のボタンのデザインデータを用意してください。ファイルの形式は、gif jpg pngのいずれかになります。

  • 親ボタン(常に表示されているボタン)
  • 子ボタン(親ボタンにマウスをのせると出てくるボタン)

※子ボタンは通常の状態とマウスオーバー状態の二種類のデザインデータが必要です。

ボタン画像の格納フォルダについて

ボタン画像は通常の状態のボタンをbtnAフォルダに、マウスオーバー状態のボタンをbtnBに入れてください。

ボタン画像ファイル名の命名について

ボタンのファイル名は、"btn列番号-行番号.jpg"(※jpgの場合)というファイル名にしてください。行番号は最初から表示されている親ボタンを0とし、子ボタンの上から1とします。

上記のサンプルの場合のファイル名は下記のようになります。

ボタンの命名ルール
ボタンの命名ルール(jpgの場合)
btn列番号-行番号.jpgで、btnA btnBフォルダに各ボタンのデータを保存

4.Flash編集ファイルの設定

dropDownMenu.flaを、Flashで開いて、サイズと背景色を設定してください。

サイズの設定

幅・高さを設定します。HTMLファイル内に表示させるswfファイルのサイズを指定してください。

背景色の設定

背景色を指定してください。

ボタンの命名ルール
ドキュメントプロパティでの設定

ActionScriptの設定

Flashの大きさや、ボタンの数・大きさ、スピードなどの設定は、ActionScriptで設定します。設定箇所は、actionレイヤーの1フレームにまとめています。

注意事項

まずは、actionsレイヤーの1フレームを選んで、アクションパネルを表示させてください。アクションパネルを開くと、設定に関する注意事項を記載しておりますので、必ず先に目を通してください。

つぎに設定箇所について、以下の説明を見ながら設定してください。

※以下の行数はアクションパネルの左側の数字を指しています。設定内容によっては実際に記述する行数と相違することもありますが、特に問題ありません。

48行目 path:String → 画像ファイル格納フォルダへのパス

btnA、btnBフォルダを入れるimagesフォルダへのパスです。パスはswfファイルから見た相対パスになります。推奨階層通りに設置される場合は、特に変更する必要はありません。

49行目 ext → 画像ファイルの拡張子

ボタン画像ファイルの拡張子を指定してください。

50行目 btnNums:Array ⇒ ボタンの列数と各列ごとのボタン数

各列のボタンの数を半角カンマで区切って指定します。new Array(1列目のボタン数,2列目のボタン数,3列目のボタン数・・以下同様・・)と設定し、ボタンの列数と、各列のボタン数を同時に設定できます。

※例1 列数は2列で1列目がボタンが4個、2列目がボタンが5個の場合の設定
var btnNums:Array = new Array(4,5);

※例2 列数は4列で1列目がボタンが4個、2列目がボタンが4個、3列目がボタンが5個、4列目がボタンが5個の場合の設定
var btnNums:Array = new Array(4,4,5,5);

51行目 btnWidth:Number ⇒ ボタンの横幅

ボタンの横幅をピクセル数で指定します。

52行目 btnHeight:Number ⇒ ボタンの縦幅

ボタンの縦幅をピクセル数で指定します。

53行目 viewSpeed:Number ⇒ 子ボタンが表示される時の速度

子ボタンが表示される時の速度を数値で指定します。数値が小さくなるほど表示される時の速度が速くなり、数字が大きくなるほど遅くなります。小数点以下の指定も可能です。

54行目 hideSpeed:Number ⇒ ボタンが隠れる時の速度

ボタンが隠れる時の速度を数値で指定します。数値が小さくなるほど隠れる時の速度が速くなり、数字が大きくなるほど遅くなります。小数点以下の指定も可能です。

56行目 url:Array ⇒ ボタンクリック時のURLの指定

子ボタンがクリックされた時に移動するURLを指定します。url["列番号-行番号"]でボタンを指定します。複数のボタンを指定する場合は改行して次の行で指定します。

※上記のサンプルのようにカテゴリ1のボタン1が押された時はyahooへ、カテゴリ2のボタン1が押された時はgoogleに移動する場合

url["1-1"] = "http://yahoo.co.jp";
url["2-1"] = "http://google.co.jp";

※親ボタンにはurlの指定は出来ません。子ボタンは全てのボタンに指定が可能です。

57行目 target:Array ⇒ ボタンクリック時のtarget属性の指定

子ボタンがクリックされた場合、別ウィンドウで指定したURLを開きたい場合など、target属性を指定する場合に記述します。同じウィンドウ内で開く場合は指定する必要はありません。

target[]内の指定方法は、先のurlの場合と同じで、例えばカテゴリ1のボタン1と、カテゴリ2のボタン1が押された時のtarget属性を_blankにしたい場合は、以下のように記述します。

target["1-1"] = "_blank";
target["2-1"] = "_blank";

ボタンの命名ルール
ActionScriptの設定
ActionScriptは、actionレイヤーの1フレームに全て記述されています。