SlideShow Component in AIR

Sample Slideshow component in AIR. It uses local shared objects...

FileSystemList Component with a custom item renderer...

Download the AIR file...

Find the Source code below.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    showGripper="false" showInAutomationHierarchy="false" showStatusBar="false" showTitleBar="false"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    borderThickness="0" keyDown="onKey(event)" focusEnabled="true" tabEnabled="true"
    creationComplete="init()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #000000]" xmlns:jirox="net.jirox.*">
<mx:Script>
<![CDATA[
import mx.effects.Fade;
import mx.controls.Alert;

[Bindable]private var dir:File;
private var so:SharedObject;

//Intialization

private function init():void{

    this.setFocus();
    this.nativeWindow.x = 0;
    this.nativeWindow.y = 0;
    this.nativeWindow.width  = Capabilities.screenResolutionX;
    this.nativeWindow.height = Capabilities.screenResolutionY;
    //Shared Object GET
    so = SharedObject.getLocal("PictureViewerAIR");
    if( so.data.mydirectory ){
        //Folder path Information
        var select:File = new File(so.data.mydirectory);
        fst.directory = select;
    }else{
        //No Selection Dialog, Set the Directory
        setDir();
    }
}

private function closeHandler():void{
    //so.flush();
}

//Directory Settings
private function setDir():void{
    dir = File.documentsDirectory;
    dir.browseForDirectory("Please Specify the Images Folder");
    dir.addEventListener(Event.SELECT , onSelect );
}

//Directory Selection Event.
private function onSelect(e:Event):void{
    this.nativeWindow.alwaysInFront = true;

    var select:File     = e.target as File;
    so.data.mydirectory = select.nativePath;
    fst.directory       = select;
    fst.selectedIndex   = 0;   
}

//Slide Show Timer
private var timer:Timer = new Timer( 20000 );
private function startSlideShow():void{
    timer.addEventListener(TimerEvent.TIMER , myTick );
    timer.start();
    myTick(new TimerEvent("TIMER"));
}

private function myTick(e:TimerEvent):void{

    if( fst.selectedIndex >= fst.dataProvider.length - 1 ){
        fst.selectedIndex = 0;
    }else{
        fst.selectedIndex = fst.selectedIndex + 1;       
    }
    myImage.source = fst.selectedPath;
    myShow.play();
}
private function onClick(event:Event):void{
    //if (!selectedFile || selectedFile.isDirectory)
     var select:File = fst.selectedItem as File;
     if( select.isDirectory ){
     }else{
         myImage.source = fst.selectedPath;
         var f:Fade = new Fade();
         f.alphaFrom = 0;
         f.alphaTo   = 1;
         f.play([myImage]);
     }
}
private function onKey(e:KeyboardEvent):void{
    if( e.charCode == 119 &&  e.ctrlKey ){
        this.nativeWindow.close();   
    }
}
private function myFilter(item:Object ):Boolean{
    return !item.isDirectory;
}
]]>
</mx:Script>
<mx:Style>
global{
}
VScrollBar {
   cornerRadius: 15;
   highlightAlphas: 0.79, 0.2;
   fillColors: #195eb9, #adf8ff, #195eb9, #adf8ff;
   fillAlphas: 1, 1, 1, 1;
   borderColor: #999999;
   trackColors: #c0c0c0, #FFFFFF;
}
HScrollBar {
    cornerRadius: 15;
   highlightAlphas: 0.79, 0.2;
   fillColors: #195eb9, #adf8ff, #195eb9, #adf8ff;
   fillAlphas: 1, 1, 1, 1;
   borderColor: #999999;
   trackColors: #c0c0c0, #FFFFFF;
}
Alert {
    titleStyleName: "alertTitle";
    messageStyleName: "alertMessage";
    buttonStyleName: "alertButton";
    dropShadowEnabled: true;
    shadowDistance: 0;
    shadowColor:#000000;
    shadowDirection: right;
    cornerRadius: 10;
    embedFonts: true;
    borderColor: #333333;
    backgroundAlpha: 0.55;
}
.alertTitle {
    letterSpacing: 0;
    fontSize: 14;
    color: #ffffff;
}
.alertMessage {
    letterSpacing: 0;
    fontSize: 14;
    fontWeight: normal;
    color: black;
    backgroundColor:#ffffff;
}
.alertButton {
    backgroundColor:#333333;
    letterSpacing: 0;
    fontSize: 12;
    cornerRadius: 10;
    fontWeight: normal;
    textRollOverColor: white;
    color: red;
}
</mx:Style>

<mx:Sequence id="myShow" target="{myImage}" duration="20000">
    <mx:Fade alphaFrom="0" alphaTo="1" duration="1000"/>
    <mx:Fade startDelay="18000" alphaFrom="1" alphaTo="0" duration="1000"/>
</mx:Sequence>

<mx:Image id="myImage" x="0" y="0" width="110%" height="110%" verticalAlign="middle" horizontalAlign="center"/>

<mx:LinkButton x="1094" y="0" label="Close" color="0x666666" click="this.nativeWindow.close()" top="0" right="0"/>
<mx:LinkButton x="10" y="0" label="Select Folder" click="setDir()" color="0x666666"/>
<mx:LinkButton x="99" y="0" label="SlideShow" color="0x666666" click="startSlideShow()"/>

<mx:FileSystemList  x="0" y="33" id="fst" width="200" height="100%" filterFunction="myFilter"
    extensions="{['.jpg','.jpeg','.png','.gif']}" itemClick="onClick(event)" backgroundAlpha="0.5" borderColor="0x666666" backgroundColor="0x000000">
    <mx:itemRenderer>
    <mx:Component>
        <mx:HBox horizontalScrollPolicy="off">
            <mx:Image source="{data.nativePath}"  width="30" height="30"/>
            <mx:Label text="{data.name}" width="180" height="30" color="0xcccccc"/>
        </mx:HBox>
    </mx:Component>
    </mx:itemRenderer>
</mx:FileSystemList>

</mx:WindowedApplication>