Search the Community

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>