FlexBlitMask scrolling

[Adam]

Hi,

 

I am hugely impressed with the great classes in the GreenSock library but I am having a bit of trouble? I have been working with the FlexBlitMask component in Flex 3 in the hope that I can use it to add swipe to scroll gestures to a very large prject that we are relcutant to move to Flex 4 just so we can have the swipe to scroll feature that's built in, so the GreenSock classes appear to be exactly what we need. Unfortunately I am struggling to get things working correctly. Based on the small example in the docs(http://www.greensock.com/as/docs/tween/com/greensock/FlexBlitMask.html) I added an additional list component to my flex code and populated it with about 40 items from an array so that I could attempt to implement the swipe to scroll on it but there appears to be some very strange things happening - for some reason when I run the app the list does not appear in the application when i set the target of my flexblitmask to the list? Also I am unsure if I need to implement a sprite on my list as at the moment I can't seem to get the contents of the list to scroll whenever I do manage to see it?

 

If anyone out there could give me any help I would greatly appreciate it.

 

Here is my code:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" frameRate="60" layout="absolute" xmlns:greensock="com.greensock.*" creationComplete="tween()" width="800" height="800">
        <mx:Script>
            <![CDATA[
                import com.greensock.TweenLite;
                import com.greensock.easing.Strong;
                import com.greensock.plugins.ThrowPropsPlugin;
                import com.greensock.plugins.TweenPlugin;
                
                TweenPlugin.activate([ThrowPropsPlugin]);
                
                private var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number;
                
                private function init():void
                {
                    myList.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownSwipeHandler);
                }
                
                private function tween():void
                {
                    myText.y = 50;
                    TweenLite.to(myText, 6, {y:-100});
                }
                
                private function mouseDownSwipeHandler(event:MouseEvent):void
                {
                    TweenLite.killTweensOf(myList);
                    y1 = y2 = myList.y;
                    yOffset = this.mouseY - myList.y;
                    yOverlap = Math.max(0, myList.height - bounds.height);
                    t1 = t2 = getTimer();
                    myList.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveSwipeHandler);
                    myList.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpSwipeHandler);
                }
                
                private function mouseMoveSwipeHandler(event:MouseEvent):void
                {
                    var y:Number = this.mouseY - yOffset;
                    //if myList's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
                    if (y > bounds.top) {
                        myList.y = (y + bounds.top) * 0.5;
                    } else if (y < bounds.top - yOverlap) {
                        myList.y = (y + bounds.top - yOverlap) * 0.5;
                    } else {
                        myList.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 = myList.y;
                        t1 = t;
                    }
                    event.updateAfterEvent();
                }
                
                private function mouseUpSwipeHandler(event:MouseEvent):void
                {
                    myList.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpSwipeHandler);
                    myList.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveSwipeHandler);
                    var time:Number = (getTimer() - t2) / 1000;
                    var yVelocity:Number = (myList.y - y2) / time;
                    ThrowPropsPlugin.to(myList, {throwProps:{
                        y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300}
                    }, onUpdate:blitMask.update, ease:Strong.easeOut
                    }, 10, 0.3, 1);
                }
            ]]>
        </mx:Script>
    
    <mx:Array id="myArray">
        <mx:Object label="Item 1" data="7" />
        <mx:Object label="Item 2" data="3" />
        <mx:Object label="Item 3" data="1" />
        <mx:Object label="Item 4" data="8" />
        <mx:Object label="Item 5" data="5" />
        <mx:Object label="Item 6" data="8" />
        <mx:Object label="Item 7" data="9" />
        <mx:Object label="Item 8" data="2" />
        <mx:Object label="Item 9" data="7" />
        <mx:Object label="Item 10" data="7" />
        <mx:Object label="Item 11" data="7" />
        <mx:Object label="Item 12" data="3" />
        <mx:Object label="Item 13" data="1" />
        <mx:Object label="Item 14" data="8" />
        <mx:Object label="Item 15" data="5" />
        <mx:Object label="Item 16" data="8" />
        <mx:Object label="Item 17" data="9" />
        <mx:Object label="Item 18" data="2" />
        <mx:Object label="Item 19" data="7" />
        <mx:Object label="Item 20" data="3" />
        <mx:Object label="Item 21" data="7" />
        <mx:Object label="Item 22" data="3" />
        <mx:Object label="Item 23" data="1" />
        <mx:Object label="Item 24" data="8" />
        <mx:Object label="Item 25" data="5" />
        <mx:Object label="Item 26" data="8" />
        <mx:Object label="Item 27" data="9" />
        <mx:Object label="Item 28" data="2" />
        <mx:Object label="Item 29" data="7" />
        <mx:Object label="Item 30" data="7" />
        <mx:Object label="Item 31" data="7" />
        <mx:Object label="Item 32" data="3" />
        <mx:Object label="Item 33" data="1" />
        <mx:Object label="Item 34" data="8" />
        <mx:Object label="Item 35" data="5" />
        <mx:Object label="Item 36" data="8" />
        <mx:Object label="Item 37" data="9" />
        <mx:Object label="Item 38" data="2" />
        <mx:Object label="Item 39" data="7" />
        <mx:Object label="Item 40" data="3" />
    </mx:Array>
    
        <greensock:FlexBlitMask id="blitMask" target="{myList}" wrap="false" x="20" y="50" width="300" height="200" smoothing="true" autoUpdate="true" />
        <mx:Label text="FlexBlitMask Example" fontSize="24" />
        <mx:Text id="myText" x="20" y="50" width="135" height="500" text="FlexBlitMask can be great for high-performance scrolling. Performance is of paramount importance in mobile apps. There is, of course, a trade-off in memory because an extra bitmap version of the target needs to be captured/maintained, but overall performance while scrolling can be significantly improved. It doesn't make sense to use FlexBlitMask if you're tweening the scale or rotation of the target, though - it is primarily for scrolling (tweening the x and/or y properties)." />
        <mx:Button id="tweenButton" label="Tween" x="44" y="592" click="tween()" />
        <mx:List width="342" color="blue" x="408" y="51" dataProvider="{myArray}" id="myList" height="231"/>
</mx:WindowedApplication>

[GreenSock]

I'm really sorry, but this isn't something we can tackle for you because Flex has quite a few quirks/bugs itself and frankly we don't have much experience with it. FlexBlitMask was created as a courtesy to work around a few of the known limitations/requirements of the Flex framework - it's just BlitMask with a few things tweaked for Flex, as we understood was necessary. We have limited resources and can't afford all the time it'd take to offer free consulting services on this type of thing (although I do love challenges). I really wish I had an easy answer for you, but we're super hard at work on crafting the animation toolset further, particularly in the HTML5/JS space.