水平方向伸縮ナビゲーション : ActionScript2.0

Tweet

Pocket

水平方向伸縮ナビゲーション。

ソース解説

Flash CSのライブラリ

ライブラリには3つのシンボルを用意する。

背景画像(下記画像) : リンケージ名:Container, 中心点:左上

区切画像 : リンケージ名:Delim, 中心点:左上
文字(item) : リンケージ名:Text, 中心点:上中央

//--------------------------------------------------------------------------
//
//   拡大メニュー
//
//--------------------------------------------------------------------------
function Container()
{
	// 項目数
	var itemLength:Number;
	// 区切数
	var delimLength:Number;
	// 区切
	var delimArr:Array = [];
	//デフォルトの項目幅
	var defaultWidth:Number;
	//ロールオーバー時に開いている項目幅
	var openWidth:Number;
	//ロールオーバー時に閉じている項目幅
	var closeWidth:Number;
	// テキスト
	var textArr:Array = [];
	// コンテナ(自身)の幅
	var containerWidth:Number;
	// コンテナ初期化 : 項目数, 項目幅(デフォルト), 項目幅(開)
	this.initContainer = function(argItemLength, argDefaultWidth, argOpenWidth)
	{
		// 項目数
		itemLength = argItemLength;
		// 区切数
		delimLength = itemLength + 1;
		//デフォルトの項目の幅
		defaultWidth = argDefaultWidth;
		// コンテナの幅
		containerWidth = defaultWidth * itemLength;
		//ロールオーバー時に開いている項目の幅
		openWidth = argOpenWidth;
		//ロールオーバー時に閉じている項目の幅
		closeWidth = (containerWidth - openWidth) / (itemLength - 1);
		// 区切作成
		for (var i = 0; i < delimLength; i++)
		{
			// 両端の区切は作成しない
			if (!(i == 0) && !(i == delimLength - 1))
			{
				// 区切位置
				delimArr[i] = this.attachMovie("Delim", "delim" + i, this.getNextHighestDepth(), new Delim(i * defaultWidth, 0));
				delimArr[i]._alpha = 40;
			}
		}
		// テキスト作成
		for (var j = 0; j < itemLength; j++)
		{
			if (j == 0)
			{
				var left = 0;
			}
			else
			{
				var left = delimArr[j]._x;
			}
			if (j == itemLength - 1)
			{
				var right = containerWidth;
			}
			else
			{
				var right = delimArr[j + 1]._x;
			}
			var x = (left + right) / 2;
			textArr[j] = this.attachMovie("Text", "text" + j, this.getNextHighestDepth(), new Text(x, 0));
		}
		this.onEnterFrame = frameHandler;
	};
	// フレームハンドラ
	var frameHandler = function ()
	{
		var hit = this.hitTest(_root._xmouse, _root._ymouse, true);
		if (hit)
		{
			rollover();
			changeText();
		}
		else
		{
			rollout();
			changeText();
		}
	};
	// ロールオーバー
	var rollover = function()
	{
		for (i = 1; i < delimLength - 1; i++)
		{
			if (delimArr[i]._x < _root._xmouse)
			{
				// マウス位置より小さい区切りのイージング
				var targetX = closeWidth * i;
				var dx = targetX - delimArr[i]._x;
				if (Math.abs(dx) > 1)
				{
					var vx = dx * 0.2;
					delimArr[i]._x += vx;
				}
				else
				{
					delimArr[i]._x = targetX;
				}
			}
			else
			{
				// マウス位置より大きい区切りのイージング
				var targetX = containerWidth - closeWidth * (delimLength - i - 1);
				var dx = targetX - delimArr[i]._x;
				if (Math.abs(dx) > 1)
				{
					var vx = dx * 0.2;
					delimArr[i]._x += vx;
				}
				else
				{
					delimArr[i]._x = targetX;
				}
			}
		}
	};
	// ロールアウト関数
	var rollout = function()
	{
		for (i = 1; i < delimLength - 1; i++)
		{
			var vx = (i * defaultWidth - delimArr[i]._x) * 0.2;
			delimArr[i]._x += vx;
		}
	};
	// 文字変更
	var changeText = function()
	{
		// テキスト作成
		for (var j = 0; j < itemLength; j++)
		{
			if (j == 0)
			{
				var left = 0;
			}
			else
			{
				var left = delimArr[j]._x;
			}
			if (j == itemLength - 1)
			{
				var right = containerWidth;
			}
			else
			{
				var right = delimArr[j + 1]._x;
			}
			var x = (left + right) / 2;
			textArr[j]._x = x;
		}
	};
}
//--------------------------------------------------------------------------
//
//   区切
//
//--------------------------------------------------------------------------
function Delim(argX, argY)
{
	this._x = argX;
	this._y = argY;
}
//--------------------------------------------------------------------------
//
//   テキスト
//
//--------------------------------------------------------------------------
function Text(argX, argY)
{
	this._x = argX;
	this._y = argY;
}
//--------------------------------------------------------------------------
//
//   メイン処理
//
//--------------------------------------------------------------------------
var prop = new Container();
var container = _root.attachMovie('container', 'container', _root.getNextHighestDepth(), prop);
// コントローラ初期化 : 項目数, 項目幅(デフォルト), 項目幅(開)
container.initContainer(4, 100, 140);