arranging image in a sequence

Pagination logic in short for viewing the images in a sequence 

 ————————————————————————————–

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”initApp()”>
<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
 public var imageArray:Array;
 public var length:Number;
  public function initApp():void
  {
       imageArray=new Array(); 
       imageArray.push("DSC01770.JPG");
       imageArray.push("DSC01771.JPG");
       imageArray.push("DSC01772.JPG");
       imageArray.push("DSC01773.JPG");
       imageArray.push("DSC01774.JPG");
       imageArray.push("DSC01775.JPG");
       imageArray.push("DSC01776.JPG");
       img.source=imageArray[0];
       length=imageArray.length;
  }
  public function showImage(event:MouseEvent):void
  { 
   if(event.currentTarget.id==”next”)
   {
    for(var i:int=0;i<imageArray.length-1;i++)
    {
     if(img.source.toString()!= imageArray[length-1])
     {
      if(img.source.toString()==imageArray[i])
      {
       img.source=imageArray[i+1];
       break;
      }
     }
     else
     {
      Alert.show(“You viewing the last image”);
      break;
     }
    
    }   
   }
   else
   {
    for(var i:int=0;i<imageArray.length;i++)
    {
     if(img.source.toString()!= imageArray[0])
     {
      if(img.source.toString()==imageArray[i])
      {
       img.source=imageArray[i-1];
       break;
      }
     }
     else
     {
      Alert.show(“You viewing the first image”);
      break;
     }
    }
   }
  }
 ]]>
</mx:Script>

  <mx:Image id=”img”  x=”43″ y=”35″ width=”238″ height=”227″>
   
  </mx:Image>
  <mx:Button id=”prev”  x=”371″ y=”35″ label=”Previous” click=”showImage(event)” />
   
  <mx:Button id=”next”  x=”384″ y=”91″ label=”Next” click=”showImage(event)” />

</mx:Application>

Progress Bar

Progress Bar being loaded as the image being loaded

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400″ height=”300″>
<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
  public function initApp():void
  {
   img.addEventListener(ProgressEvent.PROGRESS,loadingData);
      img.load("DSC01779.JPG");
  }
  public function loadingData(event:ProgressEvent)
  {
   pb.setProgress(event.bytesLoaded,event.bytesTotal);

  }
 ]]>
</mx:Script>
 <mx:ProgressBar id=”pb” source=”img” mode=”manual” x=”100″ y=”10″>
  
 </mx:ProgressBar>
 <mx:Image id=”img”  x=”120″ y=”120″ />
 <mx:Button click=”initApp()”  y=”80″ x=”160″/>
  <mx:Button click=”pb.setProgress(0,100)”  y=”160″ x=”191″/>
</mx:Canvas>

Skinning a ToolTip progamatically in flex

The class allow you to create a skin for the tooltip which can be further used as border skin of tooltip .

 /* ToolTipSkin.mxml*/

package 
{
 import mx.skins.ProgrammaticSkin;
 import mx.controls.Alert;

    public class ToolTipSkin extends ProgrammaticSkin {
     
        public static var _widthToApply:Number;
       
        public function ToolTipSkin() {}

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight)
            if(_widthToApply<60)
            _widthToApply=60;
            graphics.clear();
            graphics.lineStyle(0, 0, 0);
            graphics.beginFill(0xf4f400,1);
            graphics.moveTo(0,10)
            graphics.lineTo(0,25);
            graphics.lineTo(_widthToApply,25);
            graphics.lineTo(_widthToApply,10);
            graphics.lineTo(20,10);
            graphics.lineTo(10,2);
            graphics.lineTo(10,10);
            graphics.lineTo(0,10);
            graphics.endFill();  
        }

    }
}

ToolTipSkin can be used in the application style sheet as a class reference

 borderSkin: ClassReference(“ToolTipSkin”);

SWC File

A SWC file is an archive file for Flex components and other assets. SWC files contain a SWF file and a catalog.xml file. The SWF file inside the SWC file implements the compiled component or group of components and includes embedded resources as symbols. Flex applications extract the SWF file from a SWC file, and use the SWF file’s contents when the application refers to resources in that SWC file. The catalog.xml file lists of the contents of the component package and its individual components.

You compile SWC files by using the component compilers. These include the compc command-line compiler and the Flex Builder Library Project compiler. SWC files can be component libraries, RSLs, theme files, and resource bundles.

To include a SWC file in your application at compile time, it must be located in the library path.

SWF Files

The SWF graphic file format is a version of the Macromedia Flash Player vector-based graphics format introduced in 1997. The SWF file format is ideal for presenting vector-based interactive and animated graphics with sound for the Web. Vector images are ideal for graphics with solid areas of color and distinct object definitions. Because a SWF file is vector-based, its graphics are scalable and play back smoothly on any screen size and across multiple platforms. A vector animation usually has a smaller file size than a bitmap animation.