<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:components="components.*"
width="500" height="400" viewSourceURL="srcview/index.html">
<fx:Declarations>
<s:GlowFilter id="glow" color="0xffaa00" blurX="20" blurY="20"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.EffectEvent;
import spark.effects.Animate;
import spark.effects.animation.MotionPath;
import spark.effects.animation.SimpleMotionPath;
import spark.filters.DropShadowFilter;
import spark.filters.ShaderFilter;
[Embed("images/GoldenGate.jpg")]
[Bindable]private var GoldenGate:Class;
[Embed("images/Harbor.jpg")]
[Bindable]private var Harbor:Class;
[Embed("images/SanFrancisco.jpg")]
[Bindable]private var SanFrancisco:Class;
[Embed("images/SouthGoldenGate.jpg")]
[Bindable]private var SouthGoldenGate:Class;
[Embed("images/GoldenGateSunset.jpg")]
[Bindable]private var GoldenGateSunset:Class;
[Embed("shaders/Grayscaler.pbj",
mimeType="application/octet-stream")]
private static var GrayscalerShaderClass:Class;
private var currentThumbnailIndex:int = -1;
private function addFilters():void
{
for (var i:int = 0; i < thumbnails.numElements; ++i)
{
var img:Image = Image(thumbnails.getElementAt(i));
var shadow:DropShadowFilter =
new spark.filters.DropShadowFilter();
shadow.blurX = 6;
shadow.blurY = 6;
shadow.quality = 2;
shadow.color = 0x808080;
shadow.distance = 5;
shadow.angle = 45 + ((thumbnails.numElements - i) *
90 / (thumbnails.numElements));
var newShader:Shader = new Shader(new GrayscalerShaderClass());
var grayFilter:ShaderFilter = new ShaderFilter(newShader);
img.filters = [grayFilter, shadow];
}
}
private function changePicture(event:MouseEvent):void
{
var image:Image = Image(event.currentTarget);
picture.source = image.source;
if (currentThumbnailIndex >= 0)
{
var oldSelectedThumbnail:Image =
Image(thumbnails.getElementAt(currentThumbnailIndex));
var glowIndex:int = oldSelectedThumbnail.filters.indexOf(glow);
var oldFilters:Array = oldSelectedThumbnail.filters;
oldFilters.splice(glowIndex, 1);
oldSelectedThumbnail.filters = oldFilters;
}
var filters:Array = image.filters;
filters.splice(1, 0, glow);
image.filters = filters;
currentThumbnailIndex = thumbnails.getElementIndex(image);
}
private var currentAnims:Dictionary = new Dictionary();
private function effectEnd(event:EffectEvent):void
{
delete currentAnims[event.effectInstance.target];
}
private function runColorizingAnim(image:Image,
endVal:Number):void
{
var target:ShaderFilter = ShaderFilter(image.filters[0]);
var runningAnim:Animate = currentAnims[target];
if (runningAnim != null)
{
runningAnim.stop();
delete currentAnims[target];
}
var anim:Animate = new Animate(target);
anim.duration = 250;
anim.motionPaths = new <MotionPath>[
new SimpleMotionPath("colorization", null, endVal)];
anim.play();
anim.addEventListener(EffectEvent.EFFECT_END, effectEnd);
currentAnims[target] = anim;
}
private function mouseOverHandler(event:MouseEvent):void
{
runColorizingAnim(Image(event.currentTarget), 1);
}
private function mouseOutHandler(event:MouseEvent):void
{
runColorizingAnim(Image(event.currentTarget), 0);
}
]]>
</fx:Script>
<s:Rect width="100%" height="100%">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x404040"/>
<s:GradientEntry color="0xf0f0f0"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<components:ReflexionContainer
id="picture" source="{Harbor}"
imageWidth="400" imageHeight="200"
x="50" y="50"/>
<s:TileGroup id="thumbnails" bottom="10" horizontalCenter="0"
requestedRowCount="1" horizontalGap="15"
columnWidth="75" rowHeight="50"
creationComplete="addFilters()">
<mx:Image source="{GoldenGate}" click="changePicture(event)"
mouseOver="mouseOverHandler(event)"
mouseOut="mouseOutHandler(event)"/>
<mx:Image source="{Harbor}" click="changePicture(event)"
mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
<mx:Image source="{SouthGoldenGate}" click="changePicture(event)"
mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
<mx:Image source="{SanFrancisco}" click="changePicture(event)"
mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
<mx:Image source="{GoldenGateSunset}" click="changePicture(event)"
mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
</s:TileGroup>
</s:Application>