scrolling like in mobiles

[Drunk-Kong]

Hi to all devs an designers.. I'm just new here...amazing this library..

 

well i'v been drive me crazy for the last couples of days trying to achive a mobile scroll behavoiur like for my app.

I've got a few attemps but i could not achieve it 100%..

 

Any clue, tutorial are more than welcome...

 

I think that with a noce tutorial on how to do a simple scrollbar i could extract i tan dcreate what i want..

 

I must say that i work with FlashDevelop so please no timeLines tutorials..

 

Please help.. i'm stuck into here!!

 

Thanks in advance

[Drunk-Kong]

ok almost done, just simple question.

How to tween for drag. I mean if i drag some object i want it to do it with tween effect.

 

thanks..

 

I'll psot my code as soon i finished it.

[Carl]

check out throwProps. It was built for doing flicky scrolly tweens http://www.greensock.com/throwprops/

 

note the "panel scroll" example in the faq does not require the plugin.

[Drunk-Kong]

That's look perfect, let me give a try..... and post code

[Drunk-Kong]

just chage to up and down.

/** 
* Very simple demo of panel flick-scrolling. It loads in an XML file
* containing the file names for 5 panel jpg files and then arranges them 
* side-by-side in a Sprite (_container) and makes it scrollable horizontally.
* Feel free to add more panels in the XML, change the _panelBounds position/size, 
* add a preloader, error handling, etc. the goal was to keep this simple. 
* 
* Get more code at http://www.greensock.com
**/
package {
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.utils.getTimer;
import flash.events.Event;
import flash.geom.Rectangle;
import com.greensock.TweenLite;
import com.greensock.easing.Strong;

	/**
 * ...
 * @author Fernando Cabello
 */

public class PanelScrollExample extends Sprite {
	private var _panelBounds:Rectangle = new Rectangle(0, 0, 400, 225);
	private var _container:Sprite;
	private var _currentPanelIndex:int = 0;
	private var _panelCount:int;
	private var _x1:Number;
	private var _x2:Number;
	private var _t1:uint;
	private var _t2:uint;

	public function PanelScrollExample() {
		_container = new Sprite();
		_container.x = _panelBounds.x;
		_container.y = _panelBounds.y;
		addChildAt(_container, 0);
		_container.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownHandler, false, 0, true);
		var xmlLoader:XMLLoader = new XMLLoader('assets/panels.xml', {onComplete:_xmlCompleteHandler});
		xmlLoader.load();
	}

	private function _xmlCompleteHandler(event:LoaderEvent):void 
	{
		var panels:XMLList = event.target.content.panel;

		_panelCount = panels.length();

		var queue:LoaderMax = new LoaderMax();
		for (var i:int = 0; i < _panelCount; i++) {
			queue.append( new ImageLoader('assets/' + panels[i].@file, {y:i * _panelBounds.height, height:_panelBounds.height, width:_panelBounds.width, container:_container}) );
		}
		//feel free to add a PROGRESS event listener to the LoaderMax instance to show a loading progress bar. 
		queue.load();
	}

	private function _mouseDownHandler(event:MouseEvent):void 
	{
		TweenLite.killTweensOf(_container);


		_x1 = _x2 = this.mouseY;
		_t1 = _t2 = getTimer();

		//_container.startDrag(false, new Rectangle(_panelBounds.y - 9999, _panelBounds.x, 9999999, 0));
		_container.startDrag(false, new Rectangle(_panelBounds.x, _panelBounds.y -9999, 0, 999999));


		this.stage.addEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler, false, 0, true);
		this.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);
	}

	private function _enterFrameHandler(event:Event):void {
		_x2 = _x1;
		_t2 = _t1;
		_x1 = this.mouseY;
		_t1 = getTimer();
	}

	private function _mouseUpHandler(event:MouseEvent):void 
	{
		_container.stopDrag();
		this.removeEventListener(Event.ENTER_FRAME, _enterFrameHandler);
		this.stage.removeEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler);
		var elapsedTime:Number = (getTimer() - _t2) / 1000;
		var xVelocity:Number = (this.mouseY - _x2) / elapsedTime;
		//we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the _container and if it's more than halfway into the next/previous panel, tween there.
		if (_currentPanelIndex > 0 && (xVelocity > 20 || _container.y > (_currentPanelIndex - 0.5) * -_panelBounds.width + _panelBounds.y)) {
			_currentPanelIndex--;
		} else if (_currentPanelIndex < _panelCount - 1 && (xVelocity < -20 || _container.y < (_currentPanelIndex + 0.5) * -_panelBounds.width + _panelBounds.y)) {
			_currentPanelIndex++;
		}
		TweenLite.to(_container, 0.7, {y:_currentPanelIndex * -_panelBounds.width + _panelBounds.y, ease:Strong.easeOut});
	}

}

}

 

 

thansk very much

[ladyb314]

Hello,

I am trying to use the panel scroll example given on the website, but I need to scroll a movieclip that lives on the stage instead of loading them from xml.

 

I have had no luck with this so I'm hoping someone can help.

 

This is for an android prototype 480x800. I have a movieclip on the stage "base_cards_mc" that has 3 movieclips within it. Each of the movieclips are the same width and height of the stage.

 

Here is my code. If anyone could help, I'd be forever grateful. This code is found on the first frame of my timeline, hence the stop(); at the end.

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.utils.getTimer;
import flash.events.Event;
import flash.geom.Rectangle;
import com.greensock.TweenLite;
import com.greensock.easing.Strong;

// -------------------- Scroll cards -------------------------------//
var panelBounds:Rectangle = new Rectangle(0, 0, 480, 800);
	//var container:Sprite;
	 var currentPanelIndex:int = 2;
	 var panelCount:int = 3;
	 var x1:Number;
	 var x2:Number;
	 var t1:uint;
	 var t2:uint;

	 function PanelScrollExample() {
		//container = new Sprite();
		base_cards_mc.x = panelBounds.x;
		base_cards_mc.y = panelBounds.y;
		base_cards_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler, false, 0, true);

	}
	function mouseDownHandler(event:MouseEvent):void {
		TweenLite.killTweensOf(base_cards_mc);
		x1 = x2 = this.mouseX;
		t1 = t2 = getTimer();
		base_cards_mc.startDrag(false, new Rectangle(panelBounds.x - 9999, panelBounds.y, 9999999, 0));
		this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, false, 0, true);
		this.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true);
	}

	function enterFrameHandler(event:Event):void {
		x2 = x1;
		t2 = t1;
		x1 = this.mouseX;
		t1 = getTimer();
	}

	 function mouseUpHandler(event:MouseEvent):void {
		base_cards_mc.stopDrag();
		this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
		this.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		var elapsedTime:Number = (getTimer() - t2) / 1000;
		var xVelocity:Number = (this.mouseX - x2) / elapsedTime;
		//we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the _container and if it's more than halfway into the next/previous panel, tween there.
		if (currentPanelIndex > 0 && (xVelocity > 20 || base_cards_mc.x > (currentPanelIndex - 0.5) * - panelBounds.width + panelBounds.x)) {
			currentPanelIndex--;
		} else if (currentPanelIndex < panelCount - 1 && (xVelocity < -20 || base_cards_mc.x < (currentPanelIndex + 0.5) * - panelBounds.width + panelBounds.x)) {
			currentPanelIndex++;
		}
		TweenLite.to(base_cards_mc, 0.7, {x:currentPanelIndex * -panelBounds.width + panelBounds.x, ease:Strong.easeOut});
	}





stop();

[Carl]

Hi, it isn't clear what isn't working so its hard to digest all that code and figure out what the problem is.

I have attached a version of ScrollPanelExample that has a movie clip on the stage with all the panels in it and doesn't require any loading.

 

I would suggest you work off of this file and add your images and change the sizes where necessary in the code. didn't have time for all that.

 

Hope it helps

 

 

-c

[ladyb314]

WOW! Thank you for the quick reply and sorry for the confusion, but I think you understood me 100%. I will try what you sent. I really appreciate you putting that together. Thanks a million!!!

[ladyb314]

So I've tried your solution, but unfortunately it seems I can not use outside classes and have multiple frames on my timeline. I need to have this code live on a frame on my timeline for ease of handing this off. So I tried bringing the code over to the first frame of my timeline. I was able to get it to publish to my android device with no errors, but nothing happens when i touch and drag on the screen. Will this work on mobile?

 

I am very rusty in my flash so this i probably an error on my part, but for the life of me I can't figure out what, and I've been working on this one thing for over a week, and the tweenLite package is the best I've found I just need to get it to work. Any help as always will be EXTREMELY appreciated.

import flash.display.*;
import flash.events.MouseEvent;
import flash.utils.getTimer;
import flash.events.Event;
import flash.geom.Rectangle;
import com.greensock.TweenLite;
import com.greensock.easing.Strong;

//class CardScroll extends Sprite {
	 var _panelBounds:Rectangle = new Rectangle(0, 0, 480, 800);
	 var _container:MovieClip;
	 var _currentPanelIndex:int = 0;
	 var _panelCount:int;
	 var _x1:Number;
	 var _x2:Number;
	 var _t1:uint;
	 var _t2:uint;

	 function CardScroll() {
		_panelCount = 3;
		_container.x = _panelBounds.x;
		_container.y = _panelBounds.y;
		addChildAt(_container, 0);
		_container.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownHandler, false, 0, true);

	}



	 function _mouseDownHandler(event:MouseEvent):void {
		TweenLite.killTweensOf(_container);
		_x1 = _x2 = this.mouseX;
		_t1 = _t2 = getTimer();
		_container.startDrag(false, new Rectangle(_panelBounds.x - 99999, _panelBounds.y, 9999999, 0));
		this.stage.addEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler, false, 0, true);
		this.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);
	}

	 function _enterFrameHandler(event:Event):void {
		_x2 = _x1;
		_t2 = _t1;
		_x1 = this.mouseX;
		_t1 = getTimer();
	}

	 function _mouseUpHandler(event:MouseEvent):void {
		_container.stopDrag();
		this.removeEventListener(Event.ENTER_FRAME, _enterFrameHandler);
		this.stage.removeEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler);
		var elapsedTime:Number = (getTimer() - _t2) / 1000;
		var xVelocity:Number = (this.mouseX - _x2) / elapsedTime;
		//we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the _container and if it's more than halfway into the next/previous panel, tween there.
		if (_currentPanelIndex > 0 && (xVelocity > 20 || _container.x > (_currentPanelIndex - 0.5) * -_panelBounds.width + _panelBounds.x)) {
			_currentPanelIndex--;
		} else if (_currentPanelIndex < _panelCount - 1 && (xVelocity < -20 || _container.x < (_currentPanelIndex + 0.5) * -_panelBounds.width + _panelBounds.x)) {
			_currentPanelIndex++;
		}
		TweenLite.to(_container, 0.7, {x:_currentPanelIndex * -_panelBounds.width + _panelBounds.x, ease:Strong.easeOut});
	}






stop();

[ladyb314]

I will try anything at this point. Thank you for all of your help!!

[ladyb314]

So i was able to figure out how to just use regular swipe gestures to accomplish this with the use of TweenLite. Unfortunately if I use anything other than a easeInOut or easeIn tween, My cards swipe completely off the screen.

 

Is there a reason that easeOut causes the tween to move the object further than the distance specified?

 

For example:

This works fine and moves the movieclip to the specified destination, but i don't like the animation because it delays the beginning of the animation:

TweenLite.to(base_cards_mc, 0.6, {x:base_cards_mc.x + 480, ease:Strong.easeIn});

 

This is what i would like to use because the animation is more at the end of the tween, but it moves my movieclip completely off screen instead of to the specified destination.

TweenLite.to(base_cards_mc, 0.6, {x:base_cards_mc.x + 480, ease:Strong.easeOut});

 

I finally see the light at the end of the tunnel thanks to your help. Now just trying to get the animation buttoned up. Thanks again!

[GreenSock]

It sounds like you're just using too strong of an ease. You mentioned that Strong.easeIn appears to delay the start of the tween - it definitely does NOT, but it may appear that way because that particular ease is very strong, so movement is initially very slow and ramps up at the very end. Maybe you want more of a Quad.easeIn or Cubic.easeIn.