BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Custom ImagePresenter Component

Posted by Shardul Singh Bartwal on December 7, 2007

Custom ImagePresenter Component

This is the concept for the creating an Image Presentation component.As you have seen many Image Gallery playing different Images.This is for the same.You can use this small component for the same purpose and can give many features to this.Below is main logic for this and you can extend it up to any level.You can add any number of the images to the Array-Collection and it will show the images continuously.

Just copy and paste the code below,and put images in the folder structure as the path is used in the code below.

———————————————————————————————————————————

<?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.collections.ArrayCollection;
 
  [Bindable]
  private var selectedImageIndex:Number=0;
 
  [Embed(source=”/assets/productImg/h1.jpg”)]
  [Bindable]
  private var img1:Class;
 
  [Embed(source=”/assets/productImg/h2.jpg”)]
  [Bindable]
  private var img2:Class;
 
  [Embed(source=”/assets/productImg/h3.jpg”)]
  [Bindable]
  private var img3:Class;
   
    [Bindable]
  public var myDataArrayCollection:ArrayCollection = new ArrayCollection([
  {scene:”Image1″,source1:img1},
  {scene:”Image2″,source1:img2},
  {scene:”Image3″,source1:img3},
  ]);
 
  [Bindable]
  private var lengthOfDataSource:Number=myDataArrayCollection.length;
 
  private var timerId:Timer;
  
  private var countersceneIndex:Number=0;
 
    private function ReturnCountersceneIndex():Number
    {
     if(countersceneIndex<lengthOfDataSource-1)
     {
      for(countersceneIndex;countersceneIndex<lengthOfDataSource;countersceneIndex++)
      {
      countersceneIndex++;
      break;
      }
    return countersceneIndex;
     }
     else
     {
      countersceneIndex=0;
      return null;
     }
    }
     
  private function init():void
  {
   timerId = new Timer(1000);
              
   timerId.addEventListener(TimerEvent.TIMER , timerHandler);
  
   timerId.start();
  }
 
  private function timerHandler(event:TimerEvent):void
  { 
   imgscene.source=myDataArrayCollection.getItemAt(countersceneIndex).source1;
   
   imgscene.source=myDataArrayCollection.getItemAt (ReturnCountersceneIndex()).source1;
  }

 ]]>
</mx:Script>
<mx:HBox id=”imgGalary” width=”100%” height=”100%” paddingBottom=”25″ paddingTop=”25″ paddingLeft=”25″ paddingRight=”25″
 horizontalGap=”0″ horizontalAlign=”center” verticalAlign=”middle” backgroundColor=”#8c8c8c”>
 <mx:Box id=”boxImageHolder” width=”250″ height=”200″ borderColor=”#FF0000″ borderStyle=”solid” backgroundColor=”#000000″
   horizontalAlign=”center” verticalAlign=”middle”
   paddingBottom=”10″ paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″>
  <mx:Image id=”imgscene” source=”{myDataArrayCollection.getItemAt(selectedImageIndex).source1}” width=”200″ height=”150″/>
  <mx:Label id=”timeLabel” fontWeight=”bold” fontSize=”11″ width=”200″ textAlign=”center”/>
 </mx:Box>
</mx:HBox>
 
</mx:Application>
Enjoy Flexing…………………

Shardul Singh Bartwal

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: