TileLayout spark Item Renderer and Zoom in and zoom out

Question

I implemented a spark ItemRenderer, which serves a DataGroup with TileLayout:
    <s:Border id="scrollView"
              styleName="scrollView"
              width="100%"
              height="100%">
        <s:filters>
            <s:DropShadowFilter inner="true"
                                alpha=".35"/>
        </s:filters>
        <s:Scroller id="continuousViewScroller"
                    height="100%"
                    width="100%">
            <s:DataGroup id="continuousView"
                         height="100%"
                         width="100%"
                         itemRenderer="PageRenderer"
                         dataProvider="{pages}">
                <s:layout>
                         <s:TileLayout columnAlign.OneUpView="justifyUsingWidth"
                         columnAlign.TwoUpView="left"
                         verticalGap="10"
                         horizontalGap.TwoUpView="10"
                         horizontalAlign="center"
                         verticalAlign="top"
                         useVirtualLayout="true"
                         clipAndEnableScrolling="false"
                         requestedColumnCount.OneUpView="1"
                         requestedColumnCount.TwoUpView="2"/>
                    <!--
                    <s:VerticalLayout horizontalAlign="center"
                                      useVirtualLayout="true"
                                      clipAndEnableScrolling="false"
                                      variableRowHeight="true"
                                      paddingTop="5"
                                      paddingBottom="5"
                                      requestedRowCount="2"/>
                    -->
                </s:layout>
            </s:DataGroup>
        </s:Scroller>
    </s:Border>
I execute a zoom effect everytime some one pushes zoom in or zoom out buttons. The trouble is that zoom in and zoom out works fine. However, the gap between two item renderers increase, when I zoom out.
Is there a way that the gap remains fixed?

Answer 1

Zoom in means, within the PageRenderer, I use a Scale effect, which zooms in and out based on an event. The following code is for doing zoom in and zoom out for the PageRenderer. It works fine. However, the vertical/horizontal gaps increases once have a zoomed in and then try to zoom out incrementally. I want to keep the gap between elements same all the time.
If I run this same code, with VerticalLayout, It works great. However, this does not work with TileLayout.
The following link:
http://opensource.adobe.com/wiki/display/flexsdk/Spark+TileLayout
says:
"Note that justify only grows the columnWidth/rowHeight, so to handle cases where the size of the columns/rows has to shrink, the default column width/row height should set explicitly to zero."
Does anyone has any idea how to implement this?
Source Code for zoom in and zoom out:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/halo"
                creationComplete="init()">
    <fx:Declarations>
        <s:Scale target="{this}" id="zoomPlayer"  duration="150" />
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.events.EffectEvent;
            private var _zoom:Number=1.0;
            [Bindable]
            public function set zoom(value:Number):void
                _zoom=value;
            public function get zoom():Number
                return _zoom;
            private function init():void
                var proj:TestProject=FlexGlobals.topLevelApplication as   TestProject;
                proj.systemManager.addEventListener(ZoomEvent.ZoomChange, updateZoom);
            private function updateZoom(event:ZoomEvent):void
                if(zoom != event.zoom){   
                    if(zoomPlayer.isPlaying){
                        zoomPlayer.stop();
                    zoomPlayer.addEventListener(EffectEvent.EFFECT_END, zoomEnd);
                    zoomPlayer.scaleXFrom=zoom;
                    zoomPlayer.scaleXTo=event.zoom;
                    zoomPlayer.scaleYFrom=zoom;
                    zoomPlayer.scaleYTo=event.zoom;
                    zoomPlayer.play();
                    zoom=event.zoom;
            private function zoomEnd(event:EffectEvent):void{
                zoomPlayer.removeEventListener(EffectEvent.EFFECT_END,zoomEnd);