<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="100%" height="100%"
creationComplete="init();" backgroundColor="0x000000" xmlns:local="*">
<mx:Style>
HScrollBar {
highlightAlphas: 0.44, 0;
fillAlphas: 1, 1, 0.7, 0.61;
fillColors: #000000, #cccccc, #666666, #666666;
trackColors: #000000, #333333;
themeColor: #666666;
borderColor: #000000;
}
ProgressBar {
barColor: #009900;
trackColors: #ffffff, #ffffff;
color: #ffffff;
paddingRight: 3;
textIndent: 0;
letterSpacing: 0;
trackHeight: 12;
verticalGap: 3;
}
.imageRollOver {
borderColor: #CCCCCC;
borderThickness: 2;
borderStyle: solid;
}
.imageIdle {
borderColor: #000000;
borderThickness: 2;
borderStyle: solid;
}
Panel {
borderColor: #999999;
borderAlpha: 0.4;
borderThicknessLeft: 10;
borderThicknessTop: 0;
borderThicknessBottom: 11;
borderThicknessRight: 10;
roundedBottomCorners: true;
cornerRadius: 11;
headerHeight: 19;
backgroundColor: #cccccc;
dropShadowEnabled: false;
shadowDistance: 5;
shadowDirection: right;
dropShadowColor: #ffffff;
titleStyleName: ;
paddingRight: 10;
paddignLeft: 10;
}
.mypanelTitle {
color: #ffffff;
textAlign: center;
fontFamily: Arial;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.effects.SetPropertyAction;
import mx.effects.Fade;
import mx.collections.ArrayCollection;
import mx.containers.Canvas;
import mx.controls.Alert;
import mx.controls.Image;
import mx.rpc.events.ResultEvent;
import mx.containers.Panel;
private var siteurl:String = "http://www.kevinkaz.com/images/";
private var albumurl:String = "";
private var xmlfile:String = "index.xml";
private var slideshowTimer:Timer;
private var images:ArrayCollection;
private var currentimage:int;
[Bindable]
private var isPlaying:Boolean = false;
public static const SLIDESHOW_TRANSITION_TIME:int = 1000;
public static const SLIDESHOW_DELAY:int = 4000;
private function init():void
{
setAlbum( album.selectedItem );
slideshowTimer = new Timer( SLIDESHOW_DELAY );
slideshowTimer.addEventListener( TimerEvent.TIMER, onTimerChange );
}
private function setAlbum( album:Object ):void
{
photos.removeAllChildren();
photosource.url = siteurl + album.data + "/" + xmlfile;
albumurl = siteurl + album.data + "/";
photosource.send();
}
private function parsePhotos( event:ResultEvent ):void
{
images = new ArrayCollection();
var xml:XML = XML( event.result );
for each ( var node:XML in xml.images.image )
{
images.addItem( node );
var c:Canvas = new Canvas();
var i:Image = new Image();
i.source = albumurl + node.itemThumbnailImage;
i.data = node;
i.addEventListener( MouseEvent.CLICK, setImage );
i.buttonMode = true;
i.useHandCursor = true;
c.addEventListener( MouseEvent.MOUSE_OVER, imageMouseOver );
c.addEventListener( MouseEvent.MOUSE_OUT, imageMouseOut );
c.styleName = "imageIdle";
c.alpha = 0.6;
c.addChild( i );
photos.addChild( c );
}
mainphoto.loadImage( albumurl + xml.images.image[ 0 ].itemLargeImage );
}
private function imageMouseOver( event:MouseEvent ):void
{
Canvas( event.currentTarget ).styleName = "imageRollOver";
Canvas( event.currentTarget ).alpha = 1.0;
}
private function imageMouseOut( event:MouseEvent ):void
{
Canvas( event.currentTarget ).styleName = "imageIdle";
Canvas( event.currentTarget ).alpha = 0.6;
}
private function setImage( event:MouseEvent ):void
{
if( isPlaying )
{
stopSlideshow();
}
currentimage = event.currentTarget.data.itemNumber;
mainphoto.loadImage( albumurl + event.currentTarget.data.itemLargeImage );
}
private function checkStatus( event:Event ):void
{
if( locked.selected )
this.currentState = '';
else
this.currentState = 'clean';
}
private function setState( state:String):void
{
if ( ! locked.selected )
this.currentState = state;
}
private function onPanelMouseDown( event:MouseEvent ):void
{
var p:Panel = Panel( event.currentTarget );
p.addEventListener( MouseEvent.MOUSE_UP, onPanelMouseUp );
p.startDrag();
}
private function onPanelMouseUp( event:MouseEvent ):void
{
var p:Panel = Panel( event.currentTarget );
p.removeEventListener( MouseEvent.MOUSE_UP, onPanelMouseUp );
p.stopDrag();
}
private function startSlideshow():void
{
slideshowTimer.start();
isPlaying = true;
}
private function stopSlideshow():void
{
currentimage = 0;
slideshowTimer.stop();
isPlaying = false;
}
private function onTimerChange( event:TimerEvent ):void
{
if ( currentimage < images.length - 1)
currentimage++;
else
currentimage = 0;
var x:XML = XML( images.getItemAt( currentimage ) );
imageTransition( albumurl + x.itemLargeImage );
}
private function imageTransition( imagelocation:String ):void
{
var s:Sequence = new Sequence();
s.target = mainphoto.photo;
var fadeout:Fade = new Fade();
fadeout.alphaFrom = 1.0;
fadeout.alphaTo = 0.0;
fadeout.duration = SLIDESHOW_TRANSITION_TIME;
s.addChild( fadeout );
var sp:SetPropertyAction = new SetPropertyAction();
sp.name = "source";
sp.value = imagelocation;
s.addChild( sp );
var fadein:Fade = new Fade();
fadein.alphaFrom = 0.0;
fadein.alphaTo = 1.0;
fadein.duration = SLIDESHOW_TRANSITION_TIME;
s.addChild( fadein );
s.play();
}
private function delayChange( event:Event ):void
{
slideshowTimer.delay = HSlider( event.currentTarget ).value * 1000;
}
]]>
</mx:Script>
<mx:states>
<mx:State name="clean">
<mx:SetProperty target="{photos}" name="height" value="0" />
<mx:SetProperty target="{rollovertext}" name="text" value="Roll Over Me to Show Thumbnails" />
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[photos, rollovertext]}">
<mx:Resize />
<mx:SetPropertyAction />
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:HTTPService id="photosource"
resultFormat="xml"
result="parsePhotos( event );"/>
<mx:VBox width="100%" height="100%">
<mx:HBox
toolTip="Roll over me to view thumbnails"
width="100%"
backgroundColor="0x000000"
mouseOver="setState( '' )" horizontalAlign="center">
<mx:Label color="0xFFFFFF" fontSize="10" id="rollovertext" fontFamily="Arial"/>
</mx:HBox>
<mx:HBox id="photos" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="20"
width="{this.width}"
horizontalScrollPolicy="auto"
verticalScrollPolicy="off">
</mx:HBox>
<mx:HBox width="100%">
<mx:VBox height="100%">
<mx:Panel id="imagecontrols" title="Image Controls" width="230">
<mx:VBox width="100%" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
<mx:HBox verticalAlign="middle">
<mx:Label text="Album:" />
<mx:ComboBox id="album" selectedIndex="0" change="setAlbum( album.selectedItem );">
<mx:Array>
<mx:Object label="Clean Cars" data="cleancars" />
<mx:Object label="Saabaru" data="saabaru" />
<mx:Object label="Buffalo Snow" data="buffalosnow" />
</mx:Array>
</mx:ComboBox>
</mx:HBox>
<mx:CheckBox id="locked" label="Lock the Thumbnail Bar" selected="true" change="checkStatus( event );"/>
</mx:VBox>
</mx:Panel>
<mx:Panel id="slideshowcontrols" title="Slideshow Controls" width="230">
<mx:VBox width="100%" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
<mx:Button label="Start Slideshow" click="startSlideshow();" enabled="{!isPlaying}" />
<mx:Button label="Stop Slideshow" click="stopSlideshow();" enabled="{isPlaying}"/>
<mx:Label text="Slideshow Delay: {slideshowdelay.value} secs" />
<mx:HSlider id="slideshowdelay"
tickInterval="1"
snapInterval="1"
minimum="2"
maximum="10" value="4" width="100%"
change="delayChange( event );"/>
</mx:VBox>
</mx:Panel>
</mx:VBox>
<mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<local:ImageLoader id="mainphoto" mouseOver="setState('clean');" />
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:Application>