Scroll programmatically and smooth

[Bennny]

Hey, ich hab folgendes Problem:

Eine HBox ist gefüllt mit einigen Bildern und soll per knopfdruck nach links bzw. rechts scrollen. Das Ganze soll jedoch smooth (mit vorgegebener Geschwindigkeit) passieren und nicht einfach Springen. Einfach genau so, wie wenn man mit der Maus in der Scrollleiste draggen würde.

Meine Idee war einfach die horizontalScrollPosition mit caurina.Tweener zu manipulieren

var toScroll:HBox;
var newPosition:Number;
...

Tweener.addTween(toScroll,{horizontalScrollPosition:newPosition,time:5.0,});

Leider ergeben sich damit sehr, sehr schlechte Resultate. Es ruckelt wie wild.

Ich hoffe jemand hat eine Idee, viele Grüße, benny

Wenn du es einfach halten willst, nimm einen Move-Effekt:

PHP-Code:

private function moveHandler(target:*):void
{
   mover.target = toScroll;//Zielobjekt des Moves ist die HBox
   mover.addEventListener(EffectEvent.EFFECT_END,moveEffectEndHandler);
   mover.xTo = newPosition;
   mover.duration = 5000;
   mover.play();
}
private function moveEffectEndHandler(event:EffectEvent):void
{
   //nach dem Move...
}
//...
<mx:Move id="mover" /> 


[sytch]

hi,
geht auch mit tweener... fast noch einfacher... ;-) ruckeln ist mir nicht aufgefallen

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
	<![CDATA[
		import caurina.transitions.Tweener;
		
		[Bindable]
		private var _scrollPosition:Object = {scrollx:0,step:30};
		

		private function scroll(dir:Boolean):void
		{
                        // hier gehen beide varianten, zweitere ist wohl etwas eleganter...
			//Tweener.addTween(this._scrollPosition,{time:1,scrollx:dir ? this._scrollPosition.scrollx + this._scrollPosition.step : this._scrollPosition.scrollx - this._scrollPosition.step,onUpdate:updater});
			Tweener.addTween(this.myBox,{time:1,horizontalScrollPosition:dir ? this.myBox.horizontalScrollPosition + this._scrollPosition.step : this.myBox.horizontalScrollPosition - this._scrollPosition.step});
		
		}
		
		private function updater():void
		{
			this.myBox.horizontalScrollPosition = this._scrollPosition.scrollx;
		}
	]]>
</mx:Script>
	<mx:HBox id="myBox" width="200" height="60" horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalCenter="-0" verticalCenter="-0">
		<mx:Canvas width="50" height="50" backgroundColor="0xff9900"/>
		<mx:Canvas width="50" height="50" backgroundColor="0xff9900"/>
		<mx:Canvas width="50" height="50" backgroundColor="0xff9900"/>
		<mx:Canvas width="50" height="50" backgroundColor="0xff9900"/>
		<mx:Canvas width="50" height="50" backgroundColor="0xff9900"/>
		<mx:Canvas width="50" height="50" backgroundColor="0xff9900"/>
		<mx:Canvas width="50" height="50" backgroundColor="0xff9900"/>
		<mx:Canvas width="50" height="50" backgroundColor="0xff9900"/>
	</mx:HBox>
	<mx:Button label="Button" click="scroll(false)" horizontalCenter="-140" verticalCenter="-0"/>
	<mx:Button label="Button" click="scroll(true)" horizontalCenter="140" verticalCenter="0"/>
</mx:WindowedApplication>

[Bennny]

hey leute, danke für die antworten. Ich habe eure code beispiele ausprobiert, doch leider ruckelt es weiterhin. Mit einem Canvas fällt das nicht sehr auf bzw. ist vielleicht auch nicht so doll, aber bei meinen Images ist es alles andere als smooth. Sollte ich die png Bilder vielleicht in irgend einer art und weiße konvertieren? Warum funktioniert es perfekt, wenn ich mit der hand scrolle?

grüße, benny

[nky]

pack doch die hbox nochmal in ein canvas, und scroll dann die gesamte hbox ..also über den xwert.. das sollte nicht ruckeln.

Gruß
nky