Jump to content
Search Community

Adam

Members
  • Posts

    5
  • Joined

  • Last visited

Adam's Achievements

0

Reputation

  1. I was afraid that might be the case well back to the drawing board for now...
  2. Hey Jack, Back again to bother you once more with another quick question if you don't mind? Can you tell me if flash (or flex for that matter) removes items which have a negative x or y value from memory? The reason I ask is that I have updated the test app I described in one of my last posts so that the UI component (a flex canvas component called tileListCanvas) shows only part of it's total height - 1000 pixels of maybe up to 50,000 pixels in total. My blitmask uses this canvas as it's target. As the blitmask scrolls vertically and eventually reaches the bottom of the visible portion of the canvas, I then call a method that increases the height of the canvas by another 1000 pixels thus allowing the blitmask to again scroll further down the content of the canvas. As this happens the y position of the canvas moves further and further offscreen and I was hoping that this meant the offscreen portion would no longer tie up any of the memory which had been used to render the original portion to begin with? I'm sure this sounds a little complicated but I am essentially trying to recreate what is happening in this post by Andrew Trice on infinite scrolling: http://www.tricedesigns.com/2011/10/26/infinitely-scrolling-lists-in-flex-applications/
  3. Thanks for getting back to me so quickly Jack. Yep I think you're right the blitmask is loading and displaying what is available it's just that the Flex tilelist component isn't allowing the blitmask to see any more images images than the first 20 (5 x 4) which are rendered once it's added to the stage. I forgot to mention that Flex's tilelist renderers only whats visible onscreen and then as you scroll it removes the previous items from memory and loads more. This is all fine but in order to make the Blitmask work in the way I want we'll need to somehow get all the images in the tilelist sent to the Blitmask to combat my existing behaviour. I thought about this some more and I think the best course of action maybe to scroll the tile list component dynamically and then once this is done tell the Blitmask to then update with the newly rendered content? The only problem I can see with this approach is that it may result in a choppy scrolling behaviour but it might be the best place to start?
  4. Hi, Firstly I need to say I really love the BlitMask and FlexBlitMask components and have used them in the past to build swipe scrolling into some of my apps and it has usually worked a treat, particularly for smooth scrolling of small images and text. Unfortunately I have a problem however with a Flex project which contains a tilelist component within a canvas. Basically I am trying to use FlexBlitMask to sit on top of my tilelist and allow me to smoothly scroll to a new part within that list once a button is pressed. I know you are not the biggest fan of Flex but I'm really stuck in a bind with this so I have to try and get this to work as best I can and thought maybe someone could check if I am doing something wrong? My tilelist contains about 10,000 pictures laid out in grid format 5 x 4 loaded from an SQLite database. The problem I seem to be having is that the BlitMask component does not seem to be updating as I scroll down my list, it instead just loads white space below the first 5 x 4 grid of pictures. I have tried to implement the update(null, true) function spoken about in many other posts but unfortunately it does not fix the problem. I recently discovered that it appears no new data is being loaded into the BlitMask because when I set the BlitMask's wrap variable to true it loads the same images over and over in rotation. I don't know if this is going beyond the limits of the FlexBlitMask but I have read on the Adobe forums that several others have successfully used it with list components to give even better performing scroll behaviour so I thought this would meet my needs pretty well. I have included a small snippet of how I set up my BlitMask and how the scroll function for when the button is pressed. Any advice you can give me would be hugely appreciated. private function initBlitMask():void { bm = new FlexBlitMask(tileList, tileList.x, tileList.y, tileList.width, tileList.height, true, true, 0x000000, false); bitmapModeLabel.text = "bitmapMode = " + bm.bitmapMode.valueOf().toString(); } private function handleScrollDownButtonClick():void { TweenLite.to(bm, 2, {scrollY:5, ease:Back.easeOut}); bm.update(null, true); } <mx:Canvas x="0" y="70" width="1004" height="896" backgroundColor="#01EAF9" id="tileListCanvas" verticalScrollPolicy="on" horizontalScrollPolicy="off" scroll="setIsScrollingValue(event)"> <mx:TileList id="tileList" x="35.5" y="-10" width="933" height="100%" columnWidth="180" rowHeight="250" dataProvider="{allTracksTrackDataArayCollection}" itemRenderer="Thumbnail" liveScrolling="true" itemClick="handleItemSelect()" useRollOver="false" borderStyle="none" themeColor="#9543D2" maxRows="2" verticalScrollPosition="20" alpha="1.0" cornerRadius="13" borderThickness="4" borderColor="#000000" verticalScrollPolicy="off" verticalScrollBarStyleName="vScrollBarThumbnails" alternatingItemColors="[#000000, #000000]" selectionColor="#000000" backgroundColor="#000000"></mx:TileList> </mx:Canvas> <mx:Button x="1032" y="464" label="Up" click="{handleScrollUpButtonClick()}"/>
  5. 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>
×
×
  • Create New...