<Application>
<!--
Base URL of images.
-->
<Global name="imagesBaseURL" value="{'{{MEDIA_URL}}applications/cover-flow/'}" />
<!--
The index of the currently focused images in the list.
-->
<Global name="currImageIndex" value="4" />
<!--
Draw the background of the application using a rounded rectangle.
-->
<Shape>
<GradientFill rotation="90" width="{root.applicationWidth}" height="{root.applicationHeight}" colors="{[0x111111, 0x111111, 0x555555]}" alphas="{[1, 1, 1]}" ratios="{[0, 170, 255]}">
<RoundedRectangle width="{root.applicationWidth}" height="{root.applicationHeight}" ellipseWidth="25" ellipseHeight="25" />
</GradientFill>
</Shape>
<!--
Create some filters for the mouse states.
-->
<GlowFilter id="outFilter" blurX="1" blurY="1" alpha="1" color="0xffffff" />
<GlowFilter id="overFilter" blurX="1" blurY="1" alpha="1" color="0xbeff41" />
<!--
Create a 3D scene containing the images.
-->
<Scene3D id="scene">
<DisplayObject3D id="images">
<DisplayObject3D x="-400">
<Sprite3D x="-120" rotationY="-90" z="200" doubleSided="false" transparent="false">
<BitmapFile url="{globals.imagesBaseURL + 'image-0.jpg'}" />
</Sprite3D>
</DisplayObject3D>
<DisplayObject3D x="-300">
<Sprite3D x="-120" rotationY="-90" z="200" doubleSided="false" transparent="false">
<BitmapFile url="{globals.imagesBaseURL + 'image-1.jpg'}" />
</Sprite3D>
</DisplayObject3D>
<DisplayObject3D x="-200">
<Sprite3D x="-120" rotationY="-90" z="200" doubleSided="false" transparent="false">
<BitmapFile url="{globals.imagesBaseURL + 'image-2.jpg'}" />
</Sprite3D>
</DisplayObject3D>
<DisplayObject3D x="-100">
<Sprite3D x="-120" rotationY="-90" z="200" doubleSided="false" transparent="false">
<BitmapFile url="{globals.imagesBaseURL + 'image-3.jpg'}" />
</Sprite3D>
</DisplayObject3D>
<DisplayObject3D rotationY="{this.x / root.applicationWidth * 180}">
<Sprite3D doubleSided="false" transparent="false">
<BitmapFile url="{globals.imagesBaseURL + 'image-4.jpg'}" />
</Sprite3D>
</DisplayObject3D>
<DisplayObject3D x="100">
<Sprite3D x="120" rotationY="90" z="200" doubleSided="false" transparent="false">
<BitmapFile url="{globals.imagesBaseURL + 'image-5.jpg'}" />
</Sprite3D>
</DisplayObject3D>
<DisplayObject3D x="200">
<Sprite3D x="120" rotationY="90" z="200" doubleSided="false" transparent="false">
<BitmapFile url="{globals.imagesBaseURL + 'image-6.jpg'}" />
</Sprite3D>
</DisplayObject3D>
<DisplayObject3D x="300">
<Sprite3D x="120" rotationY="90" z="200" doubleSided="false" transparent="false">
<BitmapFile url="{globals.imagesBaseURL + 'image-7.jpg'}" />
</Sprite3D>
</DisplayObject3D>
<DisplayObject3D x="400">
<Sprite3D x="120" rotationY="90" z="200" doubleSided="false" transparent="false">
<BitmapFile url="{globals.imagesBaseURL + 'image-8.jpg'}" />
</Sprite3D>
</DisplayObject3D>
</DisplayObject3D>
</Scene3D>
<Camera3D id="camera" z="{-this.perfectDistance'}" />
<Viewport3D viewportWidth="{root.applicationWidth}" viewportHeight="{root.applicationHeight}" scene="{root.getElementById('scene')}" camera="{root.getElementById('camera')'}" />
<!--
Draw the slider.
-->
<Sprite x="3" y="{root.applicationHeight - 28}">
<Sprite>
<Shape>
<GradientFill rotation="90" width="{root.applicationWidth - 6}" height="25" colors="{[0x000000, 0x333333]}" alphas="{[.5, .5]}" ratios="{[0, 255]}">
<RoundedRectangle width="{root.applicationWidth - 6}" height="25" ellipseWidth="20" ellipseHeight="20" />
</GradientFill>
</Shape>
</Sprite>
<Sprite x="{root.applicationWidth / 2 - 100}">
<Shape filters="{parent.parent.hovered || parent.parent.pressed ? [root.getElementById('overFilter')] : [root.getElementById('outFilter')]}">
<GradientFill rotation="90" width="200" height="25" colors="{[0x777777, 0xCCCCCC, 0x777777, 0x444444, 0x777777]}" alphas="{[.3, .3, .3, .3, .3]}" ratios="{[0, 63, 127, 128, 255]}">
<RoundedRectangle width="200" height="25" ellipseWidth="20" ellipseHeight="20" />
</GradientFill>
</Shape>
<!--
Move the images when dragging.
-->
<EventListener target="{parent.parent}" type="drag">
<![CDATA[
images = root.getElementById("images");
absolutePos = Math.max(0, Math.min(root.applicationWidth - 206, root.globalX - 100));
relativePos = 1 - absolutePos / (root.applicationWidth - 206);
imageIndex = images.numChildren - Math.round(relativePos * (images.numChildren - 1)) - 1;
parent.getElementById("focusImage").run(imageIndex);
images.x = (relativePos - .5) * 800;
parent.x = absolutePos;
]]>
</EventListener>
<!--
Focuses the correct image using recursion.
-->
<Script id="focusImage">
<![CDATA[
imageIndex = args[0];
images = root.getElementById("images");
imageIndex != globals.currImageIndex
? parent.getElementById("updateCurrent").run(imageIndex)
&& (imageIndex > 0
? parent.getElementById("updateLeftRec").run(imageIndex - 1)
: null)
&& (imageIndex < images.numChildren - 1
? parent.getElementById("updateRightRec").run(imageIndex + 1)
: null)
: null
;
]]>
</Script>
<Script id="updateCurrent">
<![CDATA[
imageIndex = args[0];
images = root.getElementById("images");
image = images.getChildAt(imageIndex);
image.getChildAt(0).startTween("rotationY", 0, .3);
image.getChildAt(0).startTween("x", 0, .3);
image.getChildAt(0).startTween("z", 0, .3);
globals.currImageIndex = imageIndex;
]]>
</Script>
<Script id="updateLeftRec">
<![CDATA[
imageIndex = args[0];
images = root.getElementById("images");
image = images.getChildAt(imageIndex);
image.getChildAt(0).startTween("rotationY", -90, .3);
image.getChildAt(0).startTween("x", -120, .3);
image.getChildAt(0).startTween("z", 200, .3);
imageIndex > 0
? this.run(imageIndex - 1)
: null
;
]]>
</Script>
<Script id="updateRightRec">
<![CDATA[
imageIndex = args[0];
images = root.getElementById("images");
image = images.getChildAt(imageIndex);
image.getChildAt(0).startTween("rotationY", 90, .3);
image.getChildAt(0).startTween("x", 120, .3);
image.getChildAt(0).startTween("z", 200, .3);
imageIndex < images.numChildren - 1
? this.run(imageIndex + 1)
: null
;
]]>
</Script>
</Sprite>
</Sprite>
</Application>© 2008 by — Valid XHTML