b) Secondly, this approach of loading 700 placeholders (s:Group object) is very slow. How can make it more fast and efficient?
How are you loading the 700 placeholders (thru XML, SQL, etc)? Why don't you page the information? So instead of loading all 700 at once only load for example 20.
I am creating 700 instances of s:Object and adding them as elements to the Scroller group object.
If I create 20 objects at a time. How would I handle the scrolling? I mean if someone scrolls all the way down, how would I know which page is the current page.
If you zoom in then zoom out to continue scrolling you could switch the scrollbars on and off depending in the zoom state, so you pass either "off" when scaled and "on" when not scaled.
private function setScrollers(scrollPol:String): void
This did solve the problem. However, zoom in and zoom outs look jittery. Is there a way to make it smoother?
private function doZoomEffect(page:Page, from:Number, to:Number):void
private function onEffectEnd(event:EffectEvent):void
var zoomEffect:Zoom=event.target as Zoom;
var page:Page=zoomEffect.target as Page;
Here is how I do it.
Becuase of the amount of data you are handling, without paging, I think you may have those sort of issues, another thing you could try is rather the scaling use the z axis to change the object depth(bring it closer). just a thought.
Also you could try setting virtuallayout to true or false to see if that makes a difference.
For paging you can take the scrollbar value or pagesize and use this to retrieve your data. You didn't say how your retrieving data; but for example with PHP/SQL using SELECT LIMIT startindex, numberofitems use the value of your scrollbar to jump to that startindex.
You might want to think about performing the scaleX/scaleY on the postLayoutTransformOffsets property of the element which will scale the element without the layout reacting to the change in size.
It sounds like you are loading in 700 elements and only a couple are in view at any given time. Have you thought about trying to use a spark List or DataGroup with virtual layout turned on? Take a look at the sample app in this post: http://flexponential.com/2009/07/10/performance-implications-of-the-list-itemrenderer-vs-i temrendererfunction-properties/
There are 10,000 items in the List there, but because of virtual layout only the renderers of items in view get created so it can perform really well even with many items.
Well I have two pieces of information that I require to render each page object. Actual page image and some metadata associated with it. I load them using the URLLoader classes. Metadata is in XML format. I cahce the image binary and the metadata. Whenever, a page comes into view, I simple use the Loader object to create a BitmapData object, which then I draw it on a Group object. I guess I can use a Sprite too...
I am not using any database of PHP to fetch the data.
When a page moves out of the view, I use the bitmapData.dispose to remove the object from memory.
This way i managed to load a small set of items say around 16 to 20.
However, my current scheme is not working for a large dataset say 700 items. Where each image is around 1500 X 1900.
Using custom item renderer with virtual layout seems to be a nice approach. I am going try this.
There is a sample on how to zoom in on items using scaleX/scaleY on postLayoutTransformOffsets that you might find useful here:
ItemRenderer with virtual layout works pretty well. My performance has improved significantly now. I can easily scroll pages in and out of view.
Here is a trouble. I need to add few elements to each page. Like buttons and all. Sometimes, the ItemRenderer is not refreshed as soon as it comes into view. How can I force it load everything I want?
Steps when the data property is set into the ItemRenderer:
a) A bitmap image binary is converted to bitmap data. (I am caching all the bitmap binaries. But only convert to full blown BitmapData, when item renderer code is executed
b) Add few controls to the renderer.
c) Once the bitmap data is created. refreshPage method is called. Should I implement this inside overriden updateDisplayList method?
private function refreshPage():void
private function drawImage():void
pageCanvas.graphics.beginBitmapFill(_bitmapData, null, false, true);
pageCanvas.graphics.drawRect(0, 0, _bitmapData.width, _bitmapData.height);