그림을 자세히 보시려면 그림을 클릭하세요.문서에 첨부된 이미지는 축소하여 올렸습니다. 그림을 자세히 보시려면 그림 파일을 클릭하세요. 큰 화면으로 보실 수 있습니다. ^^

TileList 컴포넌트를 mx 스크립트를 이용하여 ArrayCollection 데이터를 프로그램 시작초기에 생성하고 이후 타이머를 이용하여 20m 초 마다 랜덤함수를 이용하여 이미지를 재 설정한다.

소스 및 폼

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

   <mx:Script>
   <![CDATA[

   import mx.controls.Image;
   import mx.collections.ArrayCollection;

   private const TIMER_INTERVAL:int = 20; // m sec 단위

   [Bindable] private var tiledata : ArrayCollection;

    private var tmTimer       :  Timer;

   [Bindable] [Embed(source='image/black.png')] private var imgBlack:Class;
   [Bindable] [Embed(source='image/red.png')]   private var imgRed:Class;
   [Bindable] [Embed(source='image/blue.png')]  private var imgBlue:Class;
   [Bindable] [Embed(source='image/green.png')] private var imgGreen:Class;
   [Bindable] [Embed(source='image/white.png')] private var imgWhite:Class;

   private function init():void {

      tiledata = new ArrayCollection();

      tiledata.addItem({image:imgBlack});
      tiledata.addItem({image:imgRed}  );
      tiledata.addItem({image:imgBlue} );
      tiledata.addItem({image:imgGreen});
      tiledata.addItem({image:imgWhite});
      tiledata.addItem({image:imgBlack});
      tiledata.addItem({image:imgRed}  );
      tiledata.addItem({image:imgBlue} );
      tiledata.addItem({image:imgGreen});

      tlList.dataProvider=tiledata;

        tmTimer = new Timer( TIMER_INTERVAL );
        tmTimer.addEventListener(TimerEvent.TIMER, updateTimer);

        tmTimer.start();
    }

    private function updateTimer(evt:TimerEvent):void {
      var randomIndex       : int;
      var randomImage       : int;
      var obj:Object;

      randomIndex = Math.round(Math.random() * (tiledata.length-1) );
      randomImage = Math.round(Math.random() * 4 );

      switch(randomImage)
      {
      case 0 : obj = {image:imgBlack};    break;
      case 1 : obj = {image:imgRed};      break;
      case 2 : obj = {image:imgBlue};  break;
      case 3 : obj = {image:imgGreen};    break;
      case 4 : obj = {image:imgWhite};    break;
      }

      tiledata.setItemAt( obj , randomIndex );
    }

   ]]>
   </mx:Script>

   <mx:TileList id="tlList"
               x="81" y="43" width="192" height="{192+2}"
               maxColumns="3"
               columnWidth="64" rowHeight="64"
               paddingBottom="0" paddingLeft="0"
               paddingRight="0" paddingTop="0"
               >
      <mx:itemRenderer>
         <mx:Component>
            <mx:Image source="{data.image}" />
         </mx:Component>
      </mx:itemRenderer>

   </mx:TileList>

</mx:Application>

예제 실행