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:
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:
<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:
<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:
<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:
{
[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;
}
}
}
Tweet
4 Comments »

January 21st, 2009 at 1:32 am
i don’t know, maybe…you make a good case
January 21st, 2009 at 4:37 am
We’ve had pretty much the same challenge at faculte.com. After a couple of hacks and bugs of the TileList component, we’ve managed to make it work smoothly.
We did used a custom item renderer that has a label, checkbox, star icon in some scenario and that complicates things because nothing works as expected in Flex without a bit of hacking. But hey, that’s what makes the experience challenging right?
March 12th, 2009 at 8:56 pm
Trying to make a zoom in a Tile List. It work except it froze when you click…
Maybe you can help me, I want to do a youtube video browser…
http://www.quebec101.org/testyoutube/YoutubeFeedDisplay.html
June 7th, 2009 at 9:37 pm
Did you ever get a version that zooms smoothly?