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

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>

コメント


  1. 初めまして。
    動的に作成されたこれらのMCにそれぞれ動的に別々のリンクをつけることって難しいでしょうか?

    コメント by saira — 2009-06-29 @ 6:04 PM

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。