TweenLite.to not working with ThrowProps after Mouse Click

[Gary Griswold]

I have written a scroller class that is very closely based upon the example given on the ThrowProps api doc page.  One of the things that I have added is a scrollToY(num) function, which works fine.  But it does not work if called as a result of a mouse click.

 

The viewport being scrolled is a list of words, and when a word is clicked, I would like to scroll that word to the center of the viewport.  But, TweenLite.to is not working unless I comment out the ThrowPropsPlugin.to call in the same class. It appears that the ThrowPropsPlugin is doing something with the mouse clicks that interferes with the TweenLite.to

 

Any help would be greatly appreciated.  The scrolling animation that I am getting is gorgeous.

 

package views.base {

import com.greensock.TweenLite;

import com.greensock.easing.Strong;

import com.greensock.plugins.ThrowPropsPlugin;

import com.greensock.plugins.TweenPlugin;

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.geom.Rectangle;

import flash.utils.getTimer;

import lib.data.IDisposable;

 

public class Scroller extends Sprite implements IDisposable {

 

TweenPlugin.activate([ThrowPropsPlugin]);

 

private var _viewport:Sprite;

private var _bounds:Rectangle;

private var _relativeYPosition:Number;

 

public function Scroller() {

super();

}

public function setViewPort(sprite:Sprite, dimensions:Rectangle) : void {

_viewport = sprite;

_bounds = dimensions;

_viewport.x = _bounds.x;

_viewport.y = _bounds.y;

addChild(_viewport);

ThrowPropsPlugin.track(_viewport, "y"); //track the "y" property's velocity automatically

addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);

addEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler);

}

public function beforeResizeViewport() : void {

if (_viewport) {

_relativeYPosition = Math.max(0, _viewport.y * -1 / _viewport.height);

}

}

public function resizeViewport(dimensions:Rectangle) : void {

_bounds = dimensions;

if (_viewport) {

var yPos:Number = Math.min(_relativeYPosition * _viewport.height, _viewport.height - dimensions.height);

_viewport.y = yPos * -1;

}

}

public function scrollToY(position:Number) : void {

var duration:Number = Math.abs(_viewport.y - position) / _viewport.height * 20;

duration = Math.max(1, duration);

TweenLite.to(_viewport, duration, {y:position});

// _viewport.y = position;

}

public function dispose() : void {

removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);

removeEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler);

if (_viewport && _viewport is IDisposable) {

(_viewport as IDisposable).dispose();

_viewport = null;

}

}

private function addedToStageHandler(event:Event) : void {

stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

}

private function mouseDownHandler(event:MouseEvent):void {

TweenLite.killTweensOf(_viewport);

_viewport.startDrag(false, new Rectangle(_bounds.x, -99999, 0, 99999999));

stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

}

private function mouseUpHandler(event:MouseEvent):void {

_viewport.stopDrag();

stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

var yOverlap:Number = Math.max(0, _viewport.height - _bounds.height);

ThrowPropsPlugin.to(_viewport, {ease:Strong.easeOut, throwProps:{y:{max:_bounds.top, min:_bounds.top - yOverlap, resistance:200}}}, 10, 0.25, 1);

}

private function removedFromStageHandler(event:Event) : void {

stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

}

}

}

[Carl]

hmmm, kind of tough to find errors in all that code.

 

A few notes

 

1. ThrowPropsPlugin does nothing with events so there is no way that it is hijacking a click or something similar
2. I don't see a MouseEvent.CLICK anywhere in your code that calls the scrollToY function
3. I do see that you have  a MouseUpHandler that creates a ThrowProps tween. Its my guess that you are somehow trying to create a TweenLite.to() tween  but your MOUSE_UP handler is still firing.

In summary ThrowPropsPlugin is not hijacking a mouse event. It seems you have multiple events firing that are trying to create multiple tweens on the same properties of the same object. 

[Gary Griswold]

Your analysis of the problem is correct, but I am still puzzled about how to fix it.  Consider the following:

 

1) Class A uses the Scroller class.

2) Class A contains its own mouse up and mouse down handlers to execute when the mouse has been clicked.

3) When Class A senses a mouse click, it calls scrollToY in the scroller class, which executes a tween to scroll.

4) The Scroller class gets the mouse up event immediately after Class A has finished the processing described above.

5) The mouse up event in the scroller executes the ThrowPropsPlugin, which appears to stop the other tween.

 

What would be the best way to resolve the duplicate handling of the mouse up in two classes? 

[jamiejefferson]

You have to decide which tween you want to 'win' because they are both tweens of _viewport.y, so one of them will be overwritten. Maybe try adding a condition to step 5? Something like

if (!TweenMax.isTweening(_viewport)) { ... }

[Gary Griswold]

Wow. This is great.  Thanks.