<ステージ等の準備>
●メニューの大きさに合わせてサイズ、色を設定。 fsp:ここでは24
<サンプル> 複数のsampleを表示させているためか、Ie以外のブラウザで動作しなくなる場合があります、その時はサンプルを一度クリックしてください
SAMPLE1
SAMPLE2
SAMPLE3
SAMPLE4
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。
SAMPLE5
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。
<スクリプト> (as2.0)
SAMPLE1
SAMPLE2
import mx.transitions.Tween;
import mx.transitions.easing.*;
var menuItem:Array = new Array("menu1", "menu2", "menu3", "menu4", "menu5", "menu6");
var menuNum = menuItem.length;
//バー、文字の色、サイズの初期設定
var frColor = 0xdddddd;
var bgColor = 0xeeeeee;
var txtColor = 0x333333;
var txtSize = 18;
var w = 150;
var h = 40;
margin = 5;
//垂直配置(true)か水平配置(false)か
var vertical:Boolean = true;
//バーの配置、文字設定、ボタンとしての効果
for (i=1; i<=menuNum; i++) {
menu_mc = this.createEmptyMovieClip("menu"+i, i);
menu_mc.createTextField("tf",i,5,5,w-5,h-5);
menu_mc.tf.text = menuItem[i-1];
if (vertical) {
menu_mc._x = margin;
menu_mc._y = margin+(h+margin)*(i-1);
} else {
menu_mc._x = margin+(w+margin)*(i-1);
menu_mc._y = margin;
}
fillRec(menu_mc);
tfFormat(menu_mc);
menu_mc.onRollOver = rollov;
menu_mc.onRollOut = rollot;
}
function rollov() {
frColor = 0x3300ff;
bgColor = 0x999999;
txtColor = 0xffffff;
fillRec(this);
tfFormat(this);
}
function rollot() {
frColor = 0xdddddd;
bgColor = 0xeeeeee;
fillRec(this);
txtColor = 0x333333;
tfFormat(this);
}
//矩形の描画・塗り
function fillRec(mc) {
mc.clear();
mc.lineStyle("2",frColor);
mc.beginFill(bgColor);
mc.moveTo(0,0);
mc.lineTo(w,0);
mc.lineTo(w,h);
mc.lineTo(0,h);
mc.lineTo(0,0);
mc.endFill();
}
//文字のスタイル
function tfFormat(mc) {
var menuFormat = new TextFormat();
with (menuFormat) {
size = txtSize;
color = txtColor;
align = "center";
bold = true;
}
mc.tf.setTextFormat(menuFormat);
}
(注)
メニューバーのクリックにリンクを貼る方法は、以下のように
switch文を使う方法がある。
・forループ文の最後に、
menu_mc.onRelease = jump;
・スクリプトのどこかに以下のような関数を記述する
(メニューバーが6個の時)
function jump() {
switch (this.num) {
case 1 :
getURL("hogehoge.html");
break;
case 2 :
getURL("hoge/hoge1.txt");
break;
case 3 : getURL("hoge/hoge2.txt");
break;
case 4 : getURL("hoge/hoge3.txt");
break;
case 5 : getURL("hoge/hoge4.txt");
break;
case 6 : getURL("http://hoge.com/");
break;
default :
break;
}
}
import mx.transitions.Tween;
import mx.transitions.easing.*;
var menuItem:Array = new Array("menu1", "menu2", "menu3", "menu4", "menu5", "menu6");
var menuNum = menuItem.length;
//バー、文字の色、サイズの初期設定
var frColor = 0xdddddd;
var bgColor = 0xeeeeee;
var w = 150;
var h = 40;
var txtColor = 0x333333;
var txtSize = 18;
var margin = 5;
//垂直配置(true)か水平配置(false)か
var vertical:Boolean = true;
//バーのボタンモード
var clickable:Boolean = true;
//バーの配置、文字設定、ボタンとしての効果
for (i=1; i<=menuNum; i++) {
menu_mc = this.createEmptyMovieClip("menu"+i, i);
menu_mc.createTextField("tf",i,5,5,w-5,h-5);
menu_mc.tf.text = menuItem[i-1];
if (vertical) {
menu_mc._x = margin;
menu_mc._y = margin+(h+margin)*(i-1);
} else {
menu_mc._x = margin+(w+margin)*(i-1);
menu_mc._y = margin;
}
fillRec(menu_mc);
tfFormat(menu_mc);
menu_mc.onRollOver = rollov;
menu_mc.onRollOut = rollot;
}
function rollov() {
if (clickable) {
frColor = null;
bgColor = 0xff0000;
txtColor = 0xff0000;
tfFormat(this);
clickable = false;
drawFrame(this);
}
}
function rollot() {
for (i=1; i<=4; i++) {
this["mc"+i].clear();
}
frColor = 0xdddddd;
bgColor = 0xeeeeee;
txtColor = 0x333333;
tfFormat(this);
}
//枠線の描画
function drawFrame(menu_mc) {
for (i=1; i<=4; i++) {
menu_mc.createEmptyMovieClip("mc"+i,110+i);
}
drawPoint(menu_mc.mc1);
menu_mc.mc1._x = 0;
menu_mc.mc1._y = 0;
tw1 = new Tween(menu_mc.mc1, "_xscale", None.easeOut, 100, w/2*100, 0.05, true);
tw1.onMotionFinished = function() {
drawPoint(menu_mc.mc2);
menu_mc.mc2._x = w;
menu_mc.mc2._y = 0;
tw2 = new Tween(menu_mc.mc2, "_yscale", None.easeOut, 100, h/2*100, 0.05, true);
tw2.onMotionFinished = function() {
drawPoint(menu_mc.mc3);
menu_mc.mc3._x = w;
menu_mc.mc3._y = h-2;
tw3 = new Tween(menu_mc.mc3, "_xscale", None.easeOut, 100, -w/2*100, 0.02, true);
tw3.onMotionFinished = function() {
drawPoint(menu_mc.mc4);
menu_mc.mc4._x = 0;
menu_mc.mc4._y = h;
tw4 = new Tween(menu_mc.mc4, "_yscale", None.easeOut, 100, -h/2*100, 0.02, true);
tw4.onMotionFinished = function() {
clickable = true;
};
};
};
};
}
//枠線描画用点(2px*2px)の描画
function drawPoint(mc) {
mc.moveTo(0,0);
mc.beginFill(bgColor);
mc.lineTo(2,0);
mc.lineTo(2,2);
mc.lineTo(0,2);
mc.lineTo(0,0);
endFill();
}
//矩形の描画・塗り
function fillRec(mc) {
mc.clear();
mc.lineStyle("2",frColor);
mc.beginFill(bgColor);
mc.moveTo(0,0);
mc.lineTo(w,0);
mc.lineTo(w,h);
mc.lineTo(0,h);
mc.lineTo(0,0);
mc.endFill();
}
//文字のスタイル
function tfFormat(mc) {
var menuFormat = new TextFormat();
with (menuFormat) {
size = txtSize;
color = txtColor;
align = "center";
bold = true;
}
mc.tf.setTextFormat(menuFormat);
}
SAMPLE3
SAMPLE4
import mx.transitions.Tween;
import mx.transitions.easing.*;
var menuItem:Array = new Array("menu1", "menu2", "menu3", "menu4", "menu5","menu6");
var menuNum = menuItem.length;
//バー、文字の色、サイズの初期設定
var frColor = 0xdddddd;
var bgColor = 0xeeeeee;
var txtColor = 0x333333;
var txtSize = "18";
var w = 150;
var h = 40;
margin = 5;
//垂直配置(true)か水平配置(false)か
var vertical:Boolean = true;
//バーのボタンモード
var clickable:Boolean = true;
//バーの配置、文字設定、ボタンとしての効果
for (i=1; i<=menuNum; i++) {
menu_mc = this.createEmptyMovieClip("menu"+i, i);
menu_mc.createTextField("tf",200+i,5,5,w-5,h-5);
menu_mc.tf.text = menuItem[i-1];
if (vertical) {
menu_mc._x = margin;
menu_mc._y = margin+(h+margin)*(i-1);
} else {
menu_mc._x = margin+(w+margin)*(i-1);
menu_mc._y = margin;
}
fillRec(menu_mc);
tfFormat(menu_mc);
menu_mc.onRollOver = rollov;
menu_mc.onRollOut = rollot;
}
function rollov() {
if (clickable) {
clickable = false;
if(_ymouse<this._y+h/2) {
var dirFrom = "down";
} else {
var dirFrom = "up";
}
frColor = null;
bgColor = 0xff0000;
txtColor = 0x3300ff;
txtSize = 22;
tfFormat(this);
drawRec(this);
}
}
function rollot() {
mc.clear();
frColor = 0xdddddd;
bgColor = 0xeeeeee;
txtColor = 0x333333;
txtSize = 18;
tfFormat(this);
}
//バーの塗りエフェクト
function drawRec(over_mc) {
mc = over_mc.createEmptyMovieClip("mc",110);
if(dirFrom=="down") {
mc._y = 0;
var d = 1;
} else {
mc._y = h;
var d= -1;
}
bgColor = 0xffcccc;
drawPoint(over_mc.mc);
tw1 = new Tween(mc, "_xscale", None.easeNone, 100, w/2*100, 0.01, true);
tw1.onMotionFinished = function() {
tw2 = new Tween(mc, "_yscale", None.easeNone, 100, d*h/2*100, 0.2, true);
tw2.onMotionFinished = function() {
clickable = true;
}
};
}
//枠線描画用点(2px*2px)の描画
function drawPoint(mc) {
mc.moveTo(0,0);
mc.beginFill(bgColor);
mc.lineTo(2,0);
mc.lineTo(2,2);
mc.lineTo(0,2);
mc.lineTo(0,0);
endFill();
}
//矩形(バー)の描画・塗り
function fillRec(mc) {
mc.clear();
mc.lineStyle("2",frColor);
mc.beginFill(bgColor);
mc.moveTo(0,0);
mc.lineTo(w,0);
mc.lineTo(w,h);
mc.lineTo(0,h);
mc.lineTo(0,0);
mc.endFill();
}
//文字のスタイル
function tfFormat(mc) {
var menuFormat = new TextFormat();
with (menuFormat) {
size = txtSize;
color = txtColor;
align = "center";
bold = true;
}
mc.tf.setTextFormat(menuFormat);
}
var menuItem:Array = new Array("menu1", "menu2", "menu3", "menu4", "menu5", "menu6");
menuNum = menuItem.length;
//バー、文字の色、サイズの初期設定
var frColor = 0xdddddd;
var txtColor = 0xffffff;
var txtSize = 18;
var w = 150;
var h = 40;
margin = 5;
//バーの配置、文字設定、ボタンとしての効果
for (i=1; i<=menuNum; i++) {
menu_mc = this.createEmptyMovieClip("menu"+i, i);
menu_mc.createTextField("tf",i,5,5,w-5,h-5);
menu_mc.tf.text = menuItem[i-1];
menu_mc._x = margin;
menu_mc._y = margin+(h+margin)*(i-1);
var bb = 68+34*(menuNum-i);
bgColor = "0x0022"+bb.toString(16);
fillRec(menu_mc);
tfFormat(menu_mc);
menu_mc.num = i;
menu_mc.onRollOver = rollov;
menu_mc.onRollOut = rollot;
}
function rollov() {
for (i=1; i<=menuNum; i++) {
mc = _root["menu"+i];
if (i == this.num) { //ロールオーバーされている
bgColor = 0x002244;
frColor = 0xff9900;
} else {
bb = 68+34*Math.abs(i-this.num);
bgColor = "0x0022"+bb.toString(16);
frColor = 0xdddddd;
}
fillRec(mc);
}
}
function rollot() {
for (i=1; i<=menuNum; i++) {
mc = _root["menu"+i];
frColor = 0xdddddd;
bb = 68+34*(menuNum-i);
bgColor = "0x0022"+bb.toString(16);
fillRec(mc);
}
}
//バーの枠線、塗り
function fillRec(mc) {
mc.clear();
mc.lineStyle("2",frColor);
mc.beginFill(bgColor);
mc.moveTo(0,0);
mc.lineTo(w,0);
mc.lineTo(w,h);
mc.lineTo(0,h);
mc.lineTo(0,0);
mc.endFill();
}
//文字のスタイル
function tfFormat(mc) {
var menuFormat = new TextFormat();
with (menuFormat) {
size = txtSize;
color = txtColor;
align = "center";
}
mc.tf.setTextFormat(menuFormat);
}
(注)
bb = 68+34*Math.abs(i-this.num);
bgColor = "0x0022"+bb.toString(16);
の、 "0x0022" と、bbの係数・定数をかえることによって、
バーの色が変わる。
SAMPLE5
SAMPLE1のスクリプトで、
var w = 150; を、 var w = 110;
var vertical:Boolean = true; を、 var vertical:Boolean = false; に
に変えただけで、後は同じ。