<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="*"
layout="absolute" currentState="0"
creationComplete="onCreationComplete()" viewSourceURL="srcview/index.html">
<mx:Style>
@font-face {
src: local();
fontFamily: arial;
}
Application {
fontFamily :arial;
}
DateChooser {
fontFamily :arial;
headerStyleName : DateChooserHeader;
}
DateChooserHeader {
fontFamily :arial;
}
</mx:Style>
<mx:states>
<mx:State name="0">
<mx:SetProperty target="{c1}" name="visible" value="true"/>
<mx:SetProperty target="{c2}" name="visible" value="false"/>
<mx:SetProperty target="{c3}" name="visible" value="false"/>
<mx:SetProperty target="{c4}" name="visible" value="false"/>
</mx:State>
<mx:State name="1">
<mx:SetProperty target="{c1}" name="visible" value="false"/>
<mx:SetProperty target="{c2}" name="visible" value="true"/>
<mx:SetProperty target="{c3}" name="visible" value="false"/>
<mx:SetProperty target="{c4}" name="visible" value="false"/>
</mx:State>
<mx:State name="2">
<mx:SetProperty target="{c1}" name="visible" value="false"/>
<mx:SetProperty target="{c2}" name="visible" value="false"/>
<mx:SetProperty target="{c3}" name="visible" value="true"/>
<mx:SetProperty target="{c4}" name="visible" value="false"/>
</mx:State>
<mx:State name="3">
<mx:SetProperty target="{c1}" name="visible" value="false"/>
<mx:SetProperty target="{c2}" name="visible" value="false"/>
<mx:SetProperty target="{c3}" name="visible" value="false"/>
<mx:SetProperty target="{c4}" name="visible" value="true"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Fade targets="{[c1,c2,c3,c4]}" duration="300" alphaFrom="1" alphaTo=".5" >
<mx:effectEnd>
<![CDATA[
setAlphas();
]]>
</mx:effectEnd>
</mx:Fade>
</mx:Transition>
</mx:transitions>
<mx:Script>
<![CDATA[
import mx.events.EffectEvent;
import mx.effects.Effect;
import mx.effects.Fade;
import mx.effects.AnimateProperty;
import mx.effects.easing.Exponential;
import mx.events.ListEvent;
import mx.events.ItemClickEvent;
import mx.core.UIComponent;
import mx.collections.ArrayCollection;
[Bindable]
private var dataProvider : ArrayCollection;
private var timer : Timer;
private function onCreationComplete() : void
{
var pf : PerlinForce = new PerlinForce( UIComponent( perlinContainer ) );
perlinContainer.rawChildren.addChild( pf );
populateTileThumbnails();
timer = new Timer(500);
timer.addEventListener( TimerEvent.TIMER, onTimerEvent );
timer.start();
}
private function onTimerEvent( event : TimerEvent ) : void
{
Application.application.dispatchEvent( new Event("updateImage") );
}
private function setAlphas() : void
{
var duration : Number = 400;
var c1_target : Number = (currentState == '' || currentState == '0' ) ? 1 : 0;
var c2_target : Number = (currentState == '' || currentState == '1' ) ? 1 : 0;
var c3_target : Number = (currentState == '' || currentState == '2' ) ? 1 : 0;
var c4_target : Number = (currentState == '' || currentState == '3' ) ? 1 : 0;
var f1 : Fade = new Fade();
f1.alphaFrom = c1.alpha;
f1.alphaTo = c1_target;
f1.target = c1;
f1.duration = duration;
var f2 : Fade = new Fade();
f2.alphaFrom = c2.alpha;
f2.alphaTo = c2_target;
f2.target = c2;
f2.duration = duration;
var f3 : Fade = new Fade();
f3.alphaFrom = c3.alpha;
f3.alphaTo = c3_target;
f3.target = c3;
f3.duration = duration;
var f4 : Fade = new Fade();
f4.alphaFrom = c4.alpha;
f4.alphaTo = c4_target;
f4.target = c4;
f4.duration = duration;
f1.play();
f2.play();
f3.play();
f4.play();
c1.enabled = (currentState == '' || currentState == '0' ) ? true : false;
c2.enabled = (currentState == '' || currentState == '1' ) ? true : false;
c3.enabled = (currentState == '' || currentState == '2' ) ? true : false;
c4.enabled = (currentState == '' || currentState == '3' ) ? true : false;
switch( currentState )
{
case "0": contentContainer.setChildIndex( c1, contentContainer.numChildren-1 ); break;
case "1": contentContainer.setChildIndex( c2, contentContainer.numChildren-1 ); break;
case "2": contentContainer.setChildIndex( c3, contentContainer.numChildren-1 ); break;
case "3": contentContainer.setChildIndex( c4, contentContainer.numChildren-1 ); break;
}
}
private function populateTileThumbnails() : void
{
dataProvider = new ArrayCollection();
var o:Object = new Object();
o.source = c1;
dataProvider.addItem( o );
o = new Object();
o.source = c2;
dataProvider.addItem( o );
o = new Object();
o.source = c3;
dataProvider.addItem( o );
o = new Object();
o.source = c4;
dataProvider.addItem( o );
}
private function onChange( event : Event ) : void
{
this.currentState = (tl.selectedIndex >= 0) ? tl.selectedIndex.toString() : "";
}
]]>
</mx:Script>
<mx:TileList
id="tl"
itemRenderer="ItemRenderer"
height="151"
dataProvider="{dataProvider}"
top="10" left="10" right="10"
backgroundAlpha="0"
change="onChange(event)"/>
<mx:Canvas top="170" left="10" right="10" bottom="10" id="contentContainer">
<mx:Panel title="Red Panel" layout="absolute" id="c1" width="100%" height="100%" backgroundColor="#FF0000" >
<mx:Text top="0" left="0" right="0" text="This panel contains a text area. You can modify the text, and watch as the thumbnails are updated." />
<mx:TextArea top="20" bottom="10" left="10" right="10" id="textarea1" text="This is the textarea component." />
</mx:Panel>
<mx:Panel title="Green Panel" layout="absolute" id="c2" width="100%" height="100%" backgroundColor="#00FF00" >
<mx:DateChooser top="10" bottom="10" left="10" right="10"/>
</mx:Panel>
<mx:Panel title="Blue Panel" layout="absolute" id="c3" width="100%" height="100%" backgroundColor="#0000AA" >
<mx:Text top="0" left="0" right="0" text="This panel contains a drawing canvas. You can modify the image, and watch as the thumbnails are updated." color="#FFFFFF" />
<local:DrawingComponent top="20" bottom="10" left="10" right="10" />
</mx:Panel>
<mx:Panel title="Purple Panel" layout="absolute" id="c4" width="100%" height="100%" backgroundColor="#FF00FF" >
<mx:Text top="0" left="0" right="0" text="This panel contains fireflys. Watch as the thumbnails are updated." />
<mx:Box top="20" bottom="10" left="10" right="10" id="perlinContainer" horizontalCenter="0" verticalCenter="0" backgroundColor="#000000" />
</mx:Panel>
</mx:Canvas>
</mx:Application>