Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Wafel

ThrowProps list - mobile TouchEvents

Recommended Posts

Hi,

 

I am kinda new to GSAP, but when I first saw the ThrowProps I sure wanted to do scrolling list on mobile device. It works good on desktop - but trouble begins as I try to convert code for mobile devices ( Android ). I must use mouseY - but in mobile there is no such thing to my knowledge. I must use event.stageY or event.localY. As I did it first fling or scroll goes normally ( or seems so ), but next goes absolutly wild.

 

Script is based on ThrowProps example so I put it below, and also I put both files ( one is for desktop version and one for mobile ). I wonder can anyone tell me what am I doing wrong ( beside killing blitMask onComplete every time :) )

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.text.*;
import flash.display.*;
import flash.events.Event;

import flash.display.Sprite;
import flash.display.Stage;
import flash.events.TouchEvent;

Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT;

TweenPlugin.activate([ThrowPropsPlugin]);

var clickFlag:Boolean = false;
var bounds: Rectangle = new Rectangle(5, 5, 510, 780);
var mc: Sprite = new Sprite();
addChild(mc);
setupTextField(mc, bounds);
var blitMask: BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false);

var t1: uint, t2: uint, y1: Number, y2: Number, yOverlap: Number, yOffset: Number;

blitMask.addEventListener(TouchEvent.TOUCH_BEGIN, mouseDownHandler);

function mouseDownHandler(event: TouchEvent): void {
    TweenLite.killTweensOf(mc);
    y1 = y2 = mc.y;
    yOffset = event.stageY - mc.y;
    yOverlap = Math.max(0, mc.height - bounds.height);
    t1 = t2 = getTimer();
    mc.stage.addEventListener(TouchEvent.TOUCH_MOVE, mouseMoveHandler);
    mc.stage.addEventListener(TouchEvent.TOUCH_END, mouseUpHandler);
}

function mouseMoveHandler(event: TouchEvent): void {
    var y: Number = event.stageY - yOffset;
    //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
    if (y > bounds.top) {
        mc.y = (y + bounds.top) * 0.5;
    } else if (y < bounds.top - yOverlap) {
        mc.y = (y + bounds.top - yOverlap) * 0.5;
    } else {
        mc.y = y;
    }
    blitMask.update();
    var t: uint = getTimer();
    //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
    if (t - t2 > 50) {
        y2 = y1;
        t2 = t1;
        y1 = mc.y;
        t1 = t;
    }
    event.updateAfterEvent();
    clickFlag = false;
}

function mouseUpHandler(event: TouchEvent): void {
    mc.stage.removeEventListener(TouchEvent.TOUCH_END, mouseUpHandler);
    mc.stage.removeEventListener(TouchEvent.TOUCH_MOVE, mouseMoveHandler);
    var time: Number = (getTimer() - t2) / 1000;
    var yVelocity: Number = (mc.y - y2) / time;
    ThrowPropsPlugin.to(mc, {
        throwProps: {
            y: {
                velocity: yVelocity,
                max: bounds.top,
                min: bounds.top - yOverlap,
                resistance: 300
            }
        },
        onUpdate: blitMask.update,
        ease: Strong.easeOut,
        onComplete:allowClick
    }, 5, 0.3, 0.1);
}

function allowClick():void
{
    blitMask.disableBitmapMode();
    trace("waf");
    clickFlag = true;
}

function setupTextField(container: Sprite, bounds: Rectangle, padding: Number = 20): void {
        
    for ( var i = 0 ; i < 30 ; i++ )
    {
        var box:boxElement = new boxElement();
        box.y = i * ( box.height + 3 );
        box.alpha = i / 20;
        box.addEventListener( TouchEvent.TOUCH_TAP, boxClicked );
        container.addChild(box);
    }
    
    
    //container.graphics.beginFill(0x22FF44, 1);
    //container.graphics.drawRect(0, 0, box.width + padding, box.bottom + padding);
    //container.graphics.endFill();
    container.x = bounds.x;
    container.y = bounds.y;

};

function boxClicked ( e:TouchEvent ): void
{
    if ( clickFlag ) e.currentTarget.alpha = 0;
}

scrollList_boxes_desktopAndMobile.zip

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

I don't do any mobile flash development so I'm not sure what to advise.

However it was my understanding that AIR was smart enough to handle the basic mouse events, in fact I've found a few articles that recommend only using touch events for gestures like swiping or multitouch (pinch) as they are more memory intensive:

http://stackoverflow.com/questions/8825212/touch-events-vs-mouse-click-events-using-actionscript-3

 

We have had lots of folks use BlitMask and ThrowProps on mobile devices and this is the first I've heard of a need to convert the events.

 

I found this old post that suggests that some android devices report the wrong mouseX / Y which could certainly cause problems with the code you are using.

 

http://blog.yoz.sk/2010/10/quick-tip-stage-mousex-on-androi/

 

Again, this isn't my area of expertise. I would suggest though stepping back from the ThrowProps / BlitMask example and creating something more basic that perhaps only updates a textfield with your mouseX/Y coordinates as you tap or click, or drag on the stage. In other words make sure Flash is giving you the right coordinates for you "pointer" events.

Link to comment
Share on other sites

Thanks a bunch !

I was not aware that AIR handles basic mouse events ( stupid me :) ). I deployed the desktop version on my Android phone and it works like a charm.

 

Now I only must handle the problem that someone on this forum also had. That is, how to make one of thie list items clickable so that AIR doesn't recognize this tiny movement when device is touched as move but as a click.

 

Something tells me that You sugested checking for velocity of scrolled list and depeanging of the velocity is high enough event would be tapping or clicking.

Can You post any advice how to implement this or maybe a better solution ?

 

Meanwhile I'll go through this links You posted.

Thanks for a great product. Your immediate responces on peoples problems make it event better if this could be possible.


------------------------    EDIT: Problem SOLVED !!! :)   --------------------------

 

I attach .fla file for anyone that would like to use the ThrowProps to make scrolling list of items for iPhones/Android/PC. It contains boxes ( Class ) that are clickable and will do as a list items. I was able to do pretty good mechanizm protecting from not wanted clicks during scroling for my liking.

 

Use it at Your leasure - free for all project commercial or non.

throwprops_noBlitmask_boxes.zip

  • Like 1
Link to comment
Share on other sites

Hi Wafel,

 

Thanks for the kind words. It was really nice of you to post the working demo. I'm sure it will come in handy.

 

Best,

 

Carl

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×