海賊王をめざす男 マツです。こんにちは。
用途によって、ページ機能をいろいろつくったりします。今回はスライド式。
特徴
・ボタン長押しでページボタン群をスライド。
・表示エリア内をスライド制限。
【ダウンロード】
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>
