tile base background

[Beo]

hi, the below codes display a tile list with each tile is a square tile

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/09/setting-the-row-height-of-a-tile-in-a-tilelist-control-in-flex/ -->
<mx:WindowedApplication name="TileBG"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>

<mx:TileList id="tileList"
dataProvider="{arrColl}"
columnCount="5"
columnWidth="100"
rowCount="2"
rowHeight="100"
alternatingItemColors="[#FFFFFF,#EEEEEE]" />

</mx:WindowedApplication>

if i want to customize tile element has diamond-shape (in the picture) or any other shape, could any one help me some idea? thanks :)

(the index 0,1,2,3... just to demonstrate the order)
http://img5.imageshack.us/img5/5025/tilesad9.jpg (http://img5.imageshack.us/my.php?image=tilesad9.jpg)

[nakedkafka]

It's an interesting challange.
My guess is that you might not be able to create such a system with the existing TileList (or any of the List based classes) cause they will not allow for overlapping of elements. I would try and attack the problem with a custom Canvas-based component, and handle the positioning of the elments independently.