海賊王をめざす男 マツです。こんにちは。

用途によって、ページ機能をいろいろつくったりします。今回はスライド式。


特徴

・ボタン長押しでページボタン群をスライド。
・表示エリア内をスライド制限。

【デモ】

【ダウンロード】
Tweener を別途ダウンロードしてください。

あんまり操作ボタンを増やしても混乱をまねくので、用途によってナビゲーションを実装するようにしています。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#ffffff" applicationComplete="init();">
	<mx:Script>
		<![CDATA[
			import caurina.transitions.Tweener;
			private var movePx:Number = 50;
			private var plusminus:Number;
			private var pageRepeaterWidth:Number;
			private function init():void
			{
				var _targetObj:Object = pageRepeater;
				_targetObj.dataProvider = TEST_ARYC;
				// 初期化
				Tweener.removeTweens( pageRepeater.container );
				pageRepeater.container.horizontalScrollPosition = 0;
			}
			private function pageButtonInitializeHandler(evt:Event):void
			{
				pageRepeaterWidth = 0;
				prevPageButton.visible = false;
				nextPageButton.visible = false;
			}
			private function pageButtonCreationCompleteHandler(evt:Event):void
			{
				var _targetObj:Object = evt.currentTarget;
				var _targetObjX:Number = _targetObj.x + _targetObj.width;
				if ( _targetObjX != 0 && _targetObjX > pageRepeaterWidth ) {
					pageRepeaterWidth = _targetObjX;
				}
				if ( pageRepeaterWidth > _targetObj.owner.container.width ) {
					prevPageButton.visible = true;
					nextPageButton.visible = true;
				}
			}
			private function pageButtonClickHandler(evt:Event):void
			{
			}
			private function prevPageButtonMouseDown(evt:Event):void
			{
				var _targetObj:Object = pageRepeater.container;
				plusminus = -1;
				var _slideObj:Object = evt.currentTarget;
				_slideObj.addEventListener(Event.ENTER_FRAME, slideEnterFrame);
			}
			private function nextPageButtonMouseDown(evt:Event):void
			{
				var _targetObj:Object = pageRepeater.container;
				plusminus = 1;
				var _slideObj:Object = evt.currentTarget;
				_slideObj.addEventListener(Event.ENTER_FRAME, slideEnterFrame);
			}
			private function slideEnterFrame(evt:Event):void
			{
				var _targetObj:Object = pageRepeater.container;
				var position:Number = _targetObj.horizontalScrollPosition + (plusminus * movePx);
				Tweener.addTween( _targetObj, { horizontalScrollPosition:position, time:2 } );
			}
			private function slideEnterFrameClear(evt:MouseEvent):void
			{
				var _slideObj:Object = evt.currentTarget;
				_slideObj.removeEventListener(Event.ENTER_FRAME, slideEnterFrame);
			}
	   ]]>
	</mx:Script>
	<mx:Style>
		Button {
			background-color: #ffffff;
		}
	</mx:Style>
	<mx:ArrayCollection id="TEST_ARYC">
		<mx:Object>
			<mx:id>0</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>1</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>1</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>2</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>2</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>3</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>3</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>4</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>4</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>5</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>5</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>6</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>6</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>7</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>7</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>8</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>8</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>9</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>9</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>10</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>10</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>11</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>11</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>12</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>12</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>13</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>13</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>14</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>14</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>15</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>15</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>16</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>16</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>17</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>17</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>18</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>18</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>19</mx:page>
		</mx:Object>
		<mx:Object>
			<mx:id>19</mx:id>
			<mx:name>テスト</mx:name>
			<mx:page>20</mx:page>
		</mx:Object>
	</mx:ArrayCollection>
	<mx:HBox id="pageHBox" width="700" height="50" x="250" y="100">
		<mx:Button id="prevPageButton" label="←" width="35" height="35" mouseDown="prevPageButtonMouseDown(event);" mouseUp="slideEnterFrameClear(event);"/>
		<mx:HBox width="200" height="50" horizontalScrollPolicy="off" verticalScrollPolicy="off">
			<mx:Repeater id="pageRepeater">
				<mx:Button id="pageButton"
					width="20" height="18"
					paddingTop="2" paddingRight="0" paddingBottom="0" paddingLeft="0"
					buttonMode="true"
					textAlign="center"
					fontSize="8"
					label="{pageRepeater.currentItem.page}"
					initialize="pageButtonInitializeHandler(event);"
					creationComplete="pageButtonCreationCompleteHandler(event);"
					click="pageButtonClickHandler(event);"
					/>
			</mx:Repeater>
		</mx:HBox>
		<mx:Button id="nextPageButton" label="→" width="35" height="35" mouseDown="nextPageButtonMouseDown(event);" mouseUp="slideEnterFrameClear(event);"/>
	</mx:HBox>
</mx:Application>

HTML5飯