Custom ImagePresenter Component

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

About these ads