2 Replies Latest reply on May 30, 2009 12:24 PM by firdosh

    Keeping Animation States on Item renderers when scrolling TileList

    firdosh Level 1

      Hey all,

                  so I have a simple custom item renderer (CustomRenderer.as) which has a FlexShape that gets tweened by TweenLite depending on the percent value in the data value object (CustomRendererData.as). So in the example below I have 8 items

       

      ------------------------------------------------------------------------------------------ ----------------------------

      |    DATA ITEM 1     |    DATA ITEM 2     |      DATA ITEM 3     |     DATA ITEM 4     |

      ------------------------------------------------------------------------------------------ ----------------------------

       

      ------------------------------------------------------------------------------------------ ----------------------------

      |    DATA ITEM 5     |    DATA ITEM 6     |      DATA ITEM 7     |     DATA ITEM 8    |

      ------------------------------------------------------------------------------------------ ----------------------------

       

       

      The issue I run into is when i scroll (vertically) the FlexShape starts to Tween from the previous data values.

       

       

      For example DATA ITEM 1 is has tweened upto 80% and DATA ITEM 2 has tweened up to 20% . DATAITEM 2 appears to be at 80% first and then Tweens to 20% . You can try the sample below. Once you clicck on the Load Data button the animations will begin. When you use the scroll bar you can see the animation states being swapped to the previous data renderer items and then resuming their orignal values

      package
      {
           [Bindable]
           public class CustomRendererData
           {          
                public var percent:int=0;
                
                public var title:String;
                
                public var color:uint;
                
                public var time:int;
                
                public var isUploading:Boolean = false;          
                
                public function CustomRendererData(){}
           }
      }
      
      package
      {
           import flash.geom.ColorTransform;
      
           import gs.TweenLite;
      
           import mx.controls.Label;
           import mx.controls.listClasses.IListItemRenderer;
           import mx.core.FlexShape;
           import mx.core.IDataRenderer;
           import mx.core.UIComponent;
      
           public class CustomRenderer extends UIComponent implements IListItemRenderer, IDataRenderer
           {
                protected var _progressBar:FlexShape;
                protected var _data:CustomRendererData;
      
                protected var _percentValue:int;
                protected var _percentChanged:Boolean;
                protected var _progressBarTween:TweenLite;
      
                protected var _title:Label;
                protected var _titleValue:String;
                protected var _titleChanged:Boolean;
      
                protected var _colorValue:uint;
                protected var _colorChanged:Boolean;
      
                protected var _uploadingChanged:Boolean;          
                protected var _isUploading:Boolean;          
      
                public function CustomRenderer()
                {
                     super();
                }
      
                override protected function createChildren():void
                {
                     super.createChildren();
                     if (!_progressBar)
                     {
                          _progressBar=new FlexShape();                    
                          _progressBar.x=_progressBar.y=4;
                          __drawProgressBar();
                          addChild(_progressBar);
                     }
      
                     if (!_title)
                     {
                          _title=new Label();
                          _title.setActualSize(100,22);                    
                          _title.x=4;
                          _title.y=120;     
                          _title.text ="data";
                          _title.setStyle("color" , 0xffffff);               
                          addChild(_title);
                     }
      
                     this.graphics.beginFill(0x333333, 1);
                     this.graphics.drawRect(0, 0, 124, 148);
                     this.graphics.endFill();
      
                     _percentChanged = false;
                     _titleChanged = false;
                     _uploadingChanged = false; 
                     _isUploading = false;
                     _colorChanged = false;
                     _percentValue = 0;
                }
      
                private function __drawProgressBar():void
                {
                     _progressBar.graphics.beginFill(0xffffff, 1);
                     _progressBar.graphics.drawRect(0, 0, 1, 87);
                     _progressBar.graphics.endFill();
                //_progressBar.width=0;
                }
      
                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                {
                     super.updateDisplayList(unscaledWidth, unscaledHeight);
                }
      
                override protected function commitProperties():void
                {
                     super.commitProperties();
      
                     if (_data)
                     {
                          //if(_uploadingChanged)
                          //{
                               //_uploadingChanged = false;
      
                               if(_isUploading)
                               {                              
                                    if(_percentChanged)
                                    {
                                         _percentChanged = false;
                                         if(_progressBarTween)
                                         {                         
                                              TweenLite.removeTween(_progressBarTween);                                        
                                         }     
      
                                         const newWidth:int = Math.round((_data.percent * 116) / 100);
                                         //_progressBar.width = newWidth;
                                         _progressBarTween=TweenLite.to(_progressBar, _data.time, {width:newWidth});                                   
                                    }
                               }
                               else
                               {
      
      
                               }
                          //}
                          if(_titleChanged)
                          {
                               _titleChanged = false;
                               _title.text = _titleValue;
                          }
      
                          if(_colorChanged)
                          {
                               _colorChanged = false;
                               var colorTransform:ColorTransform;
                               colorTransform=_progressBar.transform.colorTransform;
                               colorTransform.color = _data.color;
                               _progressBar.transform.colorTransform=colorTransform;     
                          }
      
                     }                    
                }
      
      
                public function set data(obj:Object):void
                {
                     _data=obj as CustomRendererData;
      
                     if(_data)
                     {
                          if(_data.percent != _percentValue)
                          {
                               _percentValue = _data.percent;                         
                               _percentChanged = true;
                          }
      
                          if(_titleValue != _data.title)
                          {
                               _titleValue = _data.title;                         
                               _titleChanged = true;
                          }
      
                          if(_colorValue != _data.color)
                          {
                               _colorValue = _data.color;                         
                               _colorChanged = true;
                          }
      
                          if(_isUploading != _data.isUploading)
                          {
                               _isUploading = _data.isUploading;                         
                               _uploadingChanged = true;
                          }
                     }
      
                     invalidateProperties();
                     invalidateDisplayList();
                }
      
                public function get data():Object
                {
                     return _data;
                }
      
                override protected function measure():void
                {
                     super.measure();
      
                     measuredWidth=124;
                     measuredHeight=148;
                     measuredMinWidth=124;
                     measuredMinHeight=148;
                }          
           }
      }
      
      
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                          layout="vertical"
                          xmlns:local="*" applicationComplete="init();" height="375">
           <mx:Script>
                <![CDATA[
                     import mx.collections.ArrayCollection;
                     
                     public var data1:CustomRendererData = new CustomRendererData();
                     public var data2:CustomRendererData = new CustomRendererData();
                     public var data3:CustomRendererData = new CustomRendererData();
                     public var data4:CustomRendererData = new CustomRendererData();               
                     public var data5:CustomRendererData = new CustomRendererData();               
                     public var data6:CustomRendererData = new CustomRendererData();               
                     public var data7:CustomRendererData = new CustomRendererData();               
                     public var data8:CustomRendererData = new CustomRendererData();               
                     
                     [Bindable]
                     public var coll:ArrayCollection=new ArrayCollection([data1, data2, data3, data4, data5, data6, data7, data8]);
                     
                     private var _changePercentTimer:Timer;
                     
                     private function init():void
                     {
                          data1.title ="data1";
                          data1.color = 0xff0000;
                          data1.time = 8;
                          data1.isUploading = true;
                          
                          data2.title ="data2";
                          data2.color = 0x00ff00;
                          data2.time = 11;
                          data2.isUploading = true;
                          
                          data3.title ="data3";
                          data3.color = 0x0000ff;
                          data3.time = 9;
                          data3.isUploading = true;
                          
                          data4.title ="data4";
                          data4.color = 0x00ffff;
                          data4.time = 13;
                          data4.isUploading = true;
                          
                          data5.title ="data5";
                          data5.color = 0xffff00;
                          data5.time = 12;
                          data5.isUploading = true;
                          
                          data6.title ="data6";
                          data6.color = 0xff00ff;
                          data6.time = 18;
                          data6.isUploading = true;
                          
                          data7.title ="data7";
                          data7.color = 0xfff0ff;
                          data7.time = 15;
                          data7.isUploading = true;
                          
                          data8.title ="data8";
                          data8.color = 0xaff9ff;
                          data8.time = 15;
                          data8.isUploading = true;
                          
                          _changePercentTimer = new Timer(1000,5);
                          _changePercentTimer.addEventListener(TimerEvent.TIMER , onChangePercentHandler , false ,0  , true);
                     }
                     
                     public function onChangePercentHandler(event:TimerEvent):void
                     {
                          data1.percent+=3;
                          data3.percent+=10;
                          data2.percent+=20;
                          data4.percent+=11;
                          
                          data5.percent+=5;
                          data6.percent+=13;
                          data7.percent+=18;
                          data8.percent+=8;
                          
                          trace (data1.percent , data2.percent ,data3.percent , data4.percent);
                     }
                     public function itemClick():void
                     {
                          _changePercentTimer.start();
                     }
                ]]>
           </mx:Script>
           <mx:TileList id="list"
                                itemRenderer="CustomRenderer"
                                width="640"
                                height="150"                          
                                useRollOver="false"
                                dataProvider="{coll}"
                                columnWidth="150"
                                itemClick="itemClick();"
                                dropEnabled="true"
                                dragEnabled="true"
                                dragMoveEnabled="true"
                                paddingLeft="10">
      
           </mx:TileList>
           <mx:Button label="LoadData" click="itemClick();"/>
      </mx:Application>