12 Replies Latest reply on Nov 17, 2009 4:12 PM by ngarg

    Zooming  and Scrolling issue

    ngarg Level 1

      Background:

       

      So I created spark Scroller this way:

       

       

      <s:Scroller id="continuousViewScroller"

      height="100%"

      width="100%"

      horizontalScrollPolicy="auto"

      verticalScrollPolicy="auto"

      visible.ContinuousView="true"

      visible="false">

       

      <s:Group id="continuousView"

      width="100%"

      height="100%" clipAndEnableScrolling="true">

       

       

      <s:layout>

      <s:VerticalLayout horizontalAlign="center"

        gap="10"

        paddingTop="10"

        paddingBottom="10"/>

      </s:layout>

      </s:Group>

      </s:Scroller>

       

       

       

      I add multiple <s:Group> objects to the "continousView" object. Each object is approximately of size 1500 X 1900 and I have around 700 of them. Each of this group object, I paint an image, whenever this group object comes within the viewport.

       

       

      var vLayout:VerticalLayout=continuousView.layout as VerticalLayout;

      vLayout.fractionOfElementInView(_index);

       

       

      I am facing a couple of problems:

       

      a) When I zoom in (Set all the object.scaleX=zoomValue, scaleY=zoomValue) and zoom out on the child objects. The scroller moves up and down. So the current page out of the  view. How can I prevent the scroll thumb to move, when I am adjusting the zoom?

       

      b) Secondly, this approach of loading 700 placeholders (s:Group object) is very slow. How can make it more fast and efficient?

        • 1. Re: Zooming  and Scrolling issue
          jdesko Level 2

          Hello ngarg;

          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.

           

          John

          • 2. Re: Zooming  and Scrolling issue
            ngarg Level 1

            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.

            • 3. Re: Zooming  and Scrolling issue
              David_F57 Level 5

              Hi,

               

              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

              {

              scroller.setStyle('verticalScrollPolicy',scrollPol);

              scroller.setStyle('horizontalScrollPolicy',scrollPol);

              }

               

              David.

              • 4. Re: Zooming  and Scrolling issue
                jdesko Level 2

                Take a look at this example to see if it helps.  You can right click on the app. to view the source.

                 

                http://www.adobe.com/devnet/flex/samples/fig_pagedlist/

                 

                John

                • 5. Re: Zooming  and Scrolling issue
                  ngarg Level 1

                  Thanks David.

                   

                  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

                  {

                  setScrollers("off");

                  page.zoomPlayer.zoomHeightFrom=from;

                  page.zoomPlayer.zoomHeightTo=to;

                  page.zoomPlayer.zoomWidthFrom=from;

                  page.zoomPlayer.zoomWidthTo=to;

                   

                  page.zoomPlayer.addEventListener(EffectEvent.EFFECT_END, onEffectEnd);

                  page.zoomPlayer.play();

                  }

                   

                  private function onEffectEnd(event:EffectEvent):void

                  {

                  setScrollers("auto");

                  var zoomEffect:Zoom=event.target as Zoom;

                  var page:Page=zoomEffect.target as Page;

                  zoomEffect.removeEventListener(EffectEvent.EFFECT_END, onEffectEnd);

                  }

                   

                  Here is how I do it.

                  • 6. Re: Zooming  and Scrolling issue
                    David_F57 Level 5

                    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.

                     

                    David.

                    • 7. Re: Zooming  and Scrolling issue
                      jdesko Level 2

                      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.

                       

                      John

                      • 8. Re: Zooming  and Scrolling issue
                        Shongrunden Adobe Employee

                        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.

                        • 9. Re: Zooming  and Scrolling issue
                          ngarg Level 1

                          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.

                          • 10. Re: Zooming  and Scrolling issue
                            ngarg Level 1

                            Using custom item renderer with virtual layout seems to be a nice approach. I am going try this.

                            • 11. Re: Zooming  and Scrolling issue
                              Shongrunden Adobe Employee

                              There is a sample on how to zoom in on items using scaleX/scaleY on postLayoutTransformOffsets that you might find useful here:

                              http://flexponential.com/2009/06/24/zoom-in-on-items-in-a-list-with-a-tilelayout/

                              • 12. Re: Zooming  and Scrolling issue
                                ngarg Level 1

                                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
                                            {
                                                drawImage();

                                 

                                                addButtons();

                                 

                                                addLayers();
                                               
                                            }

                                 

                                 

                                            private function drawImage():void
                                            {
                                                pageCanvas.graphics.beginBitmapFill(_bitmapData, null, false, true);
                                                pageCanvas.graphics.drawRect(0, 0, _bitmapData.width, _bitmapData.height);
                                                pageCanvas.graphics.endFill();
                                            }