I was looking into how one might implement zooming in on an item in a Tilelist or zooming out to view more of the items in a Tilelist and stumbled upon a “poor man’s solution”. Implementing true zooming with gradual easing in/out would be much more involved and take you into the depths of Listbase (and probably into private methods, etc).
This is based on code from one of my previous blog posts:

TileList with popup that deletes from dataProvider

Here is the sample and code that demonstrates the approach one might take:

This movie requires Flash Player 9

Download a zipfile containing the source to this sample.

Browse the source of this example.

Or continue into the blog entry to see the source:

Here is the app code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
    layout="horizontal">

<mx:Script>
<![CDATA[
    import mx.effects.effectClasses.AnimatePropertyInstance;
    import mx.managers.PopUpManager;
    import mx.managers.PopUpManagerChildList;
    import mx.events.ListEvent;
    import mx.events.SliderEvent;
    import mx.controls.sliderClasses.Slider;
    import mx.collections.ArrayCollection;
    import mx.effects.easing.Cubic;
   
   
    [Bindable]
    private var catalog:ArrayCollection;
   
    private var assets:Array = ["assets/putty.jpg", "assets/cantena.jpg", "assets/orb.jpg", "assets/globe.jpg", "assets/usbfan.jpg", "assets/hotsauce.jpg"];
        
    private function initCatalog():void
    {
        catalog = new ArrayCollection();
        for (var i:int=0;i<assets.length;i++){
            var vo:MyVO=new MyVO(assets[i],assets[i]);
            catalog.addItem(vo);
        }
    }
   
   
    public function createPopup(event:ListEvent):void
    {
        var foo:String="bar";
        var renderer:MyRenderer = event.itemRenderer as MyRenderer;
        var pop:MyPopup = MyPopup(PopUpManager.createPopUp(this,MyPopup,false,PopUpManagerChildList.POPUP));
        pop.vo=(event.target as TileList).selectedItem as MyVO;
        pop.myparentDP=(event.target as TileList).dataProvider as ArrayCollection;

        tilePopUps();
       
    }
   
    private function tilePopUps():void{
        for (var i:int=0;i<systemManager.popUpChildren.numChildren;i++){
            var o:* = systemManager.popUpChildren.getChildAt(i);
            PopUpManager.centerPopUp(o)
            if(i!=0){
                o.x+=10*i;
                o.y+=10*i; 
            }
        }
    }
    //http://www.actionscript.org/forums/showthread.php3?t=116021
    private function sliderChange(target:TileList, event:SliderEvent):void {
        var currentSlider:Slider=Slider(event.currentTarget);
        target.columnCount = Math.floor(target.width/currentSlider.value);
        target.rowCount= Math.floor(target.height/currentSlider.value);
        target.columnWidth = currentSlider.value;
        target.rowHeight = currentSlider.value;
    }
]]>
</mx:Script>
<mx:VBox>
    <mx:Button label="grow" click="gr.play()" />            
   
    <mx:VSlider
        id="dim"
        value="25"
        tickInterval="5"
        snapInterval="5"
        labels="['0', '200']"
        height="146"
        minimum="25"
        maximum="200"
        change="sliderChange(tileList,event)"/>
       
    <mx:Button label="shrink" click="shr.play()"/>

</mx:VBox>
<mx:TileList id="tileList"
    dataProvider="{catalog}"
    itemRenderer="MyRenderer"
    themeColor="haloSilver"
    rowHeight="25"
    columnWidth="25"
    verticalScrollPolicy="on"
    itemClick="createPopup(event);"
    creationComplete="initCatalog();tileList.selectedIndex=0;"
    height="200"
    width="200"
    itemsChangeEffect="{myTileListEffect}"
    />

 <mx:DefaultTileListEffect id="myTileListEffect"
            fadeOutDuration="500"
            fadeInDuration="500"
            moveDuration="1500" />
           
<mx:AnimateProperty id="shr" target="{dim}" property="value" fromValue="200" toValue="25" duration="2500" easingFunction="Cubic.easeOut"/>
   
<mx:Parallel id="gr">
    <mx:AnimateProperty target="{dim}" property="value" fromValue="25" toValue="200" duration="2500" easingFunction="Cubic.easeIn"/>
    <mx:AnimateProperty target="{tileList}" startDelay="1000" property="verticalScrollPosition" fromValue="0" toValue="{tileList.selectedIndex}" duration="1500" />
</mx:Parallel>            
           
</mx:Application>
 

Here is the popup:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        horizontalAlign="center"
        verticalAlign="middle">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.managers.PopUpManager;
           
            public var myparentDP:ArrayCollection;
            [Bindable]
            public var vo:MyVO;
           
            private function removeItem():void{
                var i:int = myparentDP.getItemIndex(vo);
                if (i!=-1){
                    myparentDP.removeItemAt(i);
                }   
                PopUpManager.removePopUp(this);
            }
           
           
        ]]>
    </mx:Script>

    <mx:Image source="{vo.asset}" />
    <mx:Label text="{vo.title}" />
    <mx:HBox>
        <mx:Button label="close" click="PopUpManager.removePopUp(this)"/>
        <mx:Button label="remove item" click="removeItem()"/>
    </mx:HBox>
</mx:TitleWindow>
 

Here is the custom renderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalAlign="center"
    verticalAlign="middle"
    source="{data.asset}"
    toolTip="{data.title}"
>

</mx:Image>
 

Here is the value object:

package
{
    [Bindable]
    public class MyVO
    {
       
        private var _asset:String;
        private var _title:String;
       
        public function MyVO(title:String, asset:String)
        {
            this.title=title;
            this.asset=asset;
        }
       
        public function set title(title:String):void{
            _title=title;
        }
       
        public function get title():String{
            return _title; 
        }
       
        public function set asset(asset:String):void{
            _asset=asset;
        }
       
        public function get asset():String{
            return _asset; 
        }

    }
}
 

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis



4 Comments »