マウススクロール画像ビューアー : ActionScript

Tweet

Pocket

マウスでスクロールする画像ビューアー

//--------------------------------------------------------------------------
//
//   MovieClip : ScrollBar
//
//--------------------------------------------------------------------------
function ScrollBar(container:MovieClip)
{
	this._visible = false;
	var width:Number;
	var containe:MovieClip = container;
	this.initScrollBar = function()
	{
		this._x = (Stage.width - this._width) / 2;
		this._y = (Stage.height - 15);
		width = this._width;
		this._visible = true;
	};
	this.onEnterFrame = function()
	{
		var rightMin = container._width;
		var rightMax = Stage.width;
		var totalDiff = rightMax - rightMin;
		var nowDiff = (container._x + container._width) - rightMin;
		var ratio = nowDiff / totalDiff;
		this.toggle._x = (width - this.toggle._width) * ratio;
		if (ratio >= 1)
		{
			this.toggle._x = width - this.toggle._width;
		}
		else if (ratio < 0)
		{
			this.toggle._x = 0;
		}
	};
}
//--------------------------------------------------------------------------
//
//   MovieClip : ImageContainer　画像を配置するクリップ
//
//--------------------------------------------------------------------------
function ImageContainer(x:Number, y:Number)
{
	this._x = x;
	this._y = y;
}
//--------------------------------------------------------------------------
//
//  Container(MC) : 位置X,Y,配置画像数,  画像コンテナ幅, 高さ, 画像コンテナ水平/垂直マージン, 画像パス配列
//
//--------------------------------------------------------------------------
function Container(imageLength:Number, imageContainerWidth:Number, imageContainerHeight:Number, imageContainerMarginH:Number, imageContainerMarginV:Number, files:Array)
{
	// 画像の数
	var imageLength:Number = imageLength;
	// 画像コンテナ配列
	var imageContainers:Array = [];
	// 画像コンテナ幅,高さ
	var imageContainerWidth:Number = imageContainerWidth;
	var imageContainerHeight:Number = imageContainerHeight;
	// 画像コンテナ水平マージン
	var imageContainerMarginH:Number = imageContainerMarginH;
	// 画像コンテナ垂直マージン
	var imageContainerMarginV:Number = imageContainerMarginV;
	// コンテナ(自身)の幅,高さ
	var containerWidth:Number = ((2 * imageContainerMarginH) + imageContainerWidth) * imageLength;
	var containerHeight:Number = (2 * imageContainerMarginV) + imageContainerHeight;
	// 画像パス配列
	var files:Array = files;
	// 初期化
	this.initContainer = function()
	{
		// コンテナ処理
		this._x = (Stage.width - containerWidth) / 2;
		this._y = (Stage.height - containerHeight) / 2;
		// 画像コンテナ処理
		for (var i = 0; i < imageLength; i++)
		{
			var x = imageContainerMarginH + ((2 * imageContainerMarginH) + imageContainerWidth) * i;
			var y = imageContainerMarginV;
			imageContainers[i] = this.attachMovie("ImageContainer", "imageContainer" + i, this.getNextHighestDepth(), new ImageContainer(x, y));
			// 画像配置用空MC作成
			imageContainers[i].image = imageContainers[i].createEmptyMovieClip("image", 0);
			// 画像読み込み
			imageContainers[i].image.loadMovie(files[i]);
		}
		this.onEnterFrame = moveHandler;
	};
	// 移動処理
	var moveHandler = function ()
	{
		// 速度はマウスとの距離に比例
		var vx = _root._xmouse - Stage.width / 2;
		vx *= 0.1;
		if (this._x >= 0 && vx < 0)
		{
			// 左端処理
			this._x = 0;
		}
		else if (this._x + containerWidth <= Stage.width && vx > 0)
		{
			// 右端処理
			this._x = Stage.width - containerWidth;
		}
		else
		{
			if (_root._ymouse > 0 && _root._ymouse < Stage.height)
			{
				this._x += -vx;
			}
		}
	};
}
//--------------------------------------------------------------------------
//
//  Object : Scroll	:	コンテナのスクロール処理
//
//--------------------------------------------------------------------------
function Scroll(argImageLength:Number)
{
	var imageLength = argImageLength;
	var container:MovieClip;
	var files:Array = [];
	var scrollbar:MovieClip;
	this.initScroll = function()
	{
		// xmlオブジェクト作成
		var myXML:XML = new XML();
		// スペース飛ばす
		myXML.ignoreWhite = true;
		var loading = function ()
		{
			var dataNodes = myXML.firstChild.childNodes;
			for (var i = 0; i < dataNodes.length; i++)
			{
				var itemNode = dataNodes[i].childNodes;
				files[i] = itemNode[0].firstChild.nodeValue;
			}
			createObjects();
		};
		myXML.onLoad = loading;
		// 読み込み
		myXML.load("data.xml");
	};
	var createObjects = function ()
	{
		// 配置画像数,  画像コンテナ幅, 高さ, 画像コンテナ水平/垂直マージン, 画像パス配列
		container = _root.attachMovie("Container", "container", _root.getNextHighestDepth(), new Container(imageLength, 120, 90, 5, 5, files));
		container.initContainer();
		// スクロールバー
		scrollBar = _root.attachMovie("ScrollBar", "scrollbar", _root.getNextHighestDepth(), new ScrollBar(container));
		scrollBar.initScrollBar();
		// 枠
		border.swapDepths(_root.getNextHighestDepth());
	};
}
// アイテム数
var o = new Scroll(8);
o.initScroll();

------------------- data.xml ------------------------------
<?xml version="1.0" ?>
<data>
	<item>
		<file>00.jpg</file>
	</item>
	<item>
		<file>01.jpg</file>
	</item>
	<item>
		<file>02.jpg</file>
	</item>
	<item>
		<file>03.jpg</file>
	</item>
	<item>
		<file>04.jpg</file>
	</item>
	<item>
		<file>05.jpg</file>
	</item>
	<item>
		<file>06.jpg</file>
	</item>
	<item>
		<file>07.jpg</file>
	</item>
</data>