Beispiel (rote Fläche nach links wischen):
Dazu folgenden Quelltext
MXML:
Wichtig ist, das die Komponente vom Typ SnapScroller- und der Container eine HGroup ist. Gap sollte auf 0 stehen damit die Elemente direkt nebeneinander liegen und nicht unnötig mit Spacern getrennt sind.<local:SnapScroller x="0" y="0" width="320" height="460"><s:HGroup gap="0" width="100%" height="100%" ><s:Image source="assets/Startscreen_Portrait.png"/><s:Image x="320" source="assets/Startscreen_Portrait.png"/><s:Image x="640" source="assets/Startscreen_Portrait.png"/></s:HGroup></local:SnapScroller>
Die AS3 Komponente (derzeit nur horizontales snapping):
package
{
package
{
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.events.TouchEvent;
import flash.ui.Mouse;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.utils.Timer;
import flashx.textLayout.formats.Float;
import mx.core.InteractionMode;
import mx.core.ScrollPolicy;
import spark.components.Group;
import spark.components.Scroller;
public class SnapScroller extends Scroller
{
private var isMouseDown:Boolean;
private var xStart:Number;
private var mouseUpDownXDistance : Number;
private var t:Timer;
private var nextHorizontalPosition: Number;
private var nextHorizontalPositionDistance : Number;
public function SnapScroller()
{
super();
this.setStyle('horizontalScrollPolicy',ScrollPolicy.OFF);
this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
this.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
}
protected function onMouseDown(event:MouseEvent):void
{
this.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
if (t)
t.stop();
isMouseDown = true;
xStart = mouseX;
}
protected function onMouseMove(event:MouseEvent):void
{
if(isMouseDown)
{
mouseUpDownXDistance = mouseX-xStart;
this.viewport.horizontalScrollPosition -= mouseUpDownXDistance;
xStart = mouseX;
}
}
protected function onMouseUp(event:MouseEvent):void
{
isMouseDown = false;
if(mouseUpDownXDistance > 0)
nextHorizontalPosition = (int(this.viewport.horizontalScrollPosition/this.width))*this.width;
else
nextHorizontalPosition = (int(this.viewport.horizontalScrollPosition/this.width)+1)*this.width;
if (nextHorizontalPosition > ((this.getElementAt(0) as Group).contentWidth)-this.width)
nextHorizontalPosition = ((this.getElementAt(0) as Group).contentWidth)-this.width;
t = new Timer(1,0);
t.addEventListener(TimerEvent.TIMER,timerEnds);
t.start();
stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
this.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
protected function timerEnds(event:TimerEvent):void
{
var distanceToTarget:Number = Math.abs(this.viewport.horizontalScrollPosition - nextHorizontalPosition);
if(this.viewport.horizontalScrollPosition > nextHorizontalPosition)
this.viewport.horizontalScrollPosition -= Math.sqrt(distanceToTarget);
else
this.viewport.horizontalScrollPosition += Math.sqrt(distanceToTarget);
if (distanceToTarget < 0.01)
{
this.viewport.horizontalScrollPosition = nextHorizontalPosition;
t.stop();
t.removeEventListener(TimerEvent.TIMER,timerEnds);
}
}
}
}Tutorial Video
