BlitMask / FlexBlitMask List Content Loading Issue

[Adam]

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()}"/>

[GreenSock]

As you know, I'm pretty unfamiliar with Flex and all its quirks (I know there are many), but it kinda sounds like maybe the content isn't there when you're doing the update(), thus it's rendering plain white. That's a guess on my part. I suspect it's a Flex quirk - I've run into those many times where it delays rendering/painting for a while (up to 50-100ms), so there's nothing that FlexBlitMask can do about that since it's an issue with Flex. But again, that's a total guess. I wish I had a better answer for you. 

[Adam]

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?

[GreenSock]

Yeah, I'm not sure there's a great solution in terms of combining those. It seems like you may have to pick your poison. 

[Adam]

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/

[GreenSock]

No, I don't think Flash removes items from memory that have negative x/y values. Sorry. That could actually have a lot of negative consequences if it did that  

[Adam]

I was afraid that might be the case well back to the drawing board for now...