上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




Boxを継承してカスタムコントロールを作ってみました。

実装した内容は以下の通り。
・Box内をドラッグでスクロール
・ドラッグ量により、自動スクロール
・自動スクロールの摩擦を考慮

使いどころとしては、画像などサムネイルを作る際に利用できるかなと思います。



ExBox.as



package
{
import flash.events.Event;
import flash.events.MouseEvent;

import mx.containers.Box;

public class ExBox extends Box
{
private var vx:Number = 0; // X軸方向の速度
private var vy:Number = 0; // Y軸方向の速度
private var oldX:Number = 0; // ドラッグ(MouseMove)時の速度取得用(X座標)
private var oldY:Number = 0; // ドラッグ(MouseMove)時の速度取得用(Y座標)
private var preMouseX:Number = 0; // ドラッグ(MouseMove)時のスクロール位置取得用(X座標)
private var preMouseY:Number = 0; // ドラッグ(MouseMove)時のスクロール位置取得用(Y座標)

private var _friction:Number = 0.8; // 摩擦係数

/**
* デフォルトコンストラクタ
*/
public function ExBox() {
super();
init();
}

/**
* 初期化処理
*/
private function init():void {

// イベント追加
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

/**
* EnterFrame イベント
*/
private function onEnterFrame(event:Event):void {
vx *= _friction;
vy *= _friction;
this.horizontalScrollPosition += vx;
this.verticalScrollPosition += vy;
}

/**
* MouseDown イベント
*/
private function onMouseDown(event:MouseEvent):void {
preMouseX = mouseX;
preMouseY = mouseY;

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
this.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
this.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
this.addEventListener(Event.ENTER_FRAME, onGetAccelerationEnterFrame);
}

/**
* MouseUp イベント
*/
private function onMouseUp(event:MouseEvent):void {
this.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
this.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
this.removeEventListener(Event.ENTER_FRAME, onGetAccelerationEnterFrame);
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

/**
* MouseMove イベント
*/
private function onMouseMove(event:MouseEvent):void {
this.horizontalScrollPosition -= mouseX - preMouseX;
this.verticalScrollPosition -= mouseY - preMouseY;
preMouseX = mouseX;
preMouseY = mouseY;
}

/**
* EnterFrame(速度取得処理) イベント
*/
private function onGetAccelerationEnterFrame(event:Event):void {
vx = this.horizontalScrollPosition - oldX;
vy = this.verticalScrollPosition - oldY;

oldX = this.horizontalScrollPosition;
oldY = this.verticalScrollPosition;
}

/**
* 摩擦係数 set
* value:0.1 ~ 1.0
* valueの値が0.1に近いほど、摩擦抵抗が大きくなります。
* (1.0=摩擦なし)
*/
public function set friction(value:Number):void {
_friction = value;
}
/**
* 摩擦係数 get
*/
public function get friction():Number {
return _friction;
}

}
}



Main.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:custom="*"
layout="absolute"
creationComplete="{onCreationComplete()}">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var list:ArrayCollection = new ArrayCollection();

private function onCreationComplete():void {
var str:String;

for(var i:int = 0; i < 100; i++){
str = "さんぷる" + i;
list.addItem(str);
}
rp1.dataProvider = list;
rp2.dataProvider = list;
}
]]>
</mx:Script>

<mx:Canvas>
<mx:VBox>
<mx:ApplicationControlBar>
<mx:VBox>
<mx:Label text="キャンバス内をドラッグすることでスクロールすることができます。"
fontSize="12" fontWeight="bold" />
<mx:HBox>
<mx:Label text="摩擦係数" />
<mx:NumericStepper id="stpNum" minimum="0.1" maximum="1.0"
stepSize="0.1" value="0.8"/>
</mx:HBox>
</mx:VBox>

</mx:ApplicationControlBar>
<mx:Panel title="ドラッグスクロール Horizontal">
<custom:ExBox id="hbox" direction="horizontal" friction="{stpNum.value}"
width="300" height="100">
<mx:Repeater id="rp1">
<mx:Label text="{rp1.currentItem}" />
</mx:Repeater>
</custom:ExBox>
</mx:Panel>

<mx:Panel title="ドラッグスクロール Vertical">
<custom:ExBox id="vbox" direction="vertical" friction="{stpNum.value}"
width="300" height="200">
<mx:Repeater id="rp2">
<mx:Label text="{rp2.currentItem}" />
</mx:Repeater>
</custom:ExBox>
</mx:Panel>

</mx:VBox>
</mx:Canvas>

</mx:Application>



実行結果は以下のようになります


摩擦係数を変更することでドラッグ後の自動スクロールの挙動が変化します。
摩擦係数は0.1~1.0の範囲で変えることができます。
初期値は摩擦係数=0.8となっています。

摩擦係数の値を大きくするにつれて、速度の減速量が少なくなります。
摩擦係数の値を小さくするにつれて、速度の減速量が大きくなります。

摩擦係数=1.0なら摩擦なし。抵抗がなく速度をずっと維持する為、端に達するため止まりません。

※ よく考えたら摩擦係数を大きくしたときに、速度の減速量を大きくするのが自然でしたね。。

今回のサンプルは以下の書籍を参考に作成しました。
ActionScriptの書籍ですが、アニメーションの原理・考え方などとても参考になります。

少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。