<?xml version="1.0" encoding="utf-8"?>
<s:Module 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:layouts="ardisia.layouts.*"
xmlns:carouselList="ardisia.components.carouselList.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:reflectionContainer="ardisia.components.reflectionContainer.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import spark.components.DataRenderer;
import spark.effects.easing.Bounce;
import spark.effects.easing.Elastic;
import spark.effects.easing.Linear;
import spark.effects.easing.Power;
import spark.effects.easing.Sine;
public function creationComplete():void
{
demoAppWrapper.topLevelCompassContainer.centerRegionInstance.addEventListener(MouseEvent.ROLL_OVER, function(event:MouseEvent):void
{
demoAppWrapper.topLevelCompassContainer.centerRegionInstance.setFocus()
});
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="CarouselList Description"
description="List optimized for use with the CarouselLayout class. Supports virtualization, an integrated scrollbar, and mouse and keyboard navigation."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormHeading label="Animation Properties:"/>
<s:FormItem label="Duration:">
<s:HSlider id="durationSelect"
width="100"
minimum="0" maximum="5000" value="350"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="0 to skip"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Easer:">
<s:DropDownList id="animationEaserSelect"
width="100"
labelField="name"
selectedIndex="2">
<s:ArrayCollection>
<fx:Object name="Sine" easer="{new Sine()}"/>
<fx:Object name="Linear" easer="{new Linear()}"/>
<fx:Object name="Power" easer="{new Power(0.1, 4)}"/>
<fx:Object name="Bounce" easer="{new Bounce()}"/>
<fx:Object name="Elastic" easer="{new Elastic()}"/>
</s:ArrayCollection>
</s:DropDownList>
</s:FormItem>
<s:FormHeading label="Radii:"/>
<s:FormItem label="Radius X:">
<s:HSlider id="radiusXSelect"
width="100"
snapInterval="1" minimum="100" maximum="2000" value="1000"
change="{carouselLayoutB.radiusX=carouselLayout.radiusX=radiusXSelect.value}"/>
</s:FormItem>
<s:FormItem label="Radius Y:">
<s:HSlider id="radiusYSelect"
width="100"
snapInterval="1" minimum="0" maximum="1000" value="0"
change="{carouselLayoutB.radiusY=carouselLayout.radiusY=radiusYSelect.value}"/>
</s:FormItem>
<s:FormItem label="Radius Z:">
<s:HSlider id="radiusZSelect"
width="100"
snapInterval="1" minimum="100" maximum="2000" value="1000"
change="{carouselLayoutB.radiusZ=carouselLayout.radiusZ=radiusZSelect.value}"/>
</s:FormItem>
<s:FormHeading label="Layout Properties:"/>
<s:FormItem label="Arc Length:">
<s:HSlider id="arcLengthSelect"
minimum="45" maximum="360" value="360" snapInterval="1"/>
</s:FormItem>
<s:FormHeading label="Alpha Properties:"/>
<s:FormItem label="Alpha From:">
<s:HSlider id="alphaFromSelect"
width="100"
snapInterval="0"
minimum="0" maximum="1" value="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The alpha value for the lowest z value (closest to user)."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Alpha To:">
<s:HSlider id="alphaToSelect"
width="100"
snapInterval="0"
minimum="0" maximum="1" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The alpha value for the highest z value element (farthest from the user)."/>
</s:helpContent>
</s:FormItem>
<s:FormHeading label="Center Offsets:"/>
<s:FormItem label="Offset X:">
<s:HSlider id="offsetXSelect"
width="100"
snapInterval="1"
minimum="-100" maximum="100" value="0"/>
</s:FormItem>
<s:FormItem label="Offset Y:">
<s:HSlider id="offsetYSelect"
width="100"
snapInterval="1"
minimum="-100" maximum="100" value="-20"/>
</s:FormItem>
<s:FormHeading label="Rotation:"/>
<s:FormItem label="Explicit Y:">
<s:CheckBox id="explicitYselect"
selected="false"
change="carouselLayout.rotationY=explicitYselect.selected ? rotationYSelect.value : NaN;carouselLayoutB.rotationY=explicitYselect.selected ? rotationYSelect.value : NaN" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="By default, the y rotation will be calculated so each element is curved to create a circle. Can be set explicitly."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{explicitYselect.selected}"
label="Rotation Y:">
<s:HSlider id="rotationYSelect"
width="100"
snapInterval="1"
minimum="-90" maximum="90" value="0"
change="carouselLayout.rotationY=rotationYSelect.value"/>
</s:FormItem>
<s:FormItem label="Rotation X:">
<s:HSlider id="rotationXSelect"
width="100"
snapInterval="1"
minimum="-90" maximum="90" value="0" />
</s:FormItem>
<s:FormItem label="Rotation Z:">
<s:HSlider id="rotationZSelect"
width="100"
snapInterval="1"
minimum="-90" maximum="90" value="0" />
</s:FormItem>
<s:FormHeading label="Perspective Projections:"/>
<s:FormItem label="Projection X:">
<s:HSlider id="projectionXSelect"
width="100"
snapInterval="1"
minimum="-200" maximum="200" value="0"/>
</s:FormItem>
<s:FormItem label="Projection Y:">
<s:HSlider id="projectionYSelect"
width="100"
snapInterval="1"
minimum="-200" maximum="200" value="-100"/>
</s:FormItem>
<s:FormItem label="Field of View:">
<s:HSlider id="fovSelect"
width="100"
snapInterval="1"
minimum="1" maximum="179" value="70"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Image Example</data:tabLabel>
<data:exampleDescription>List that displays images with captions of the first year of Laika's life. Note: the CarouselList accepts keyboard (up, down, left, right, home, end) and mouseWheel navigation as long as it has keyboard focus. Click the list to focus it. This example only has 13 images, but due to virtualization support, this list could display thousands of images.</data:exampleDescription>
<data:primaryContent>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:stroke>
<s:SolidColorStroke color="#5F5F5F"
caps="square"
joints="miter"
weight="1"/>
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0"
ratio="0"/>
<s:GradientEntry color="#262935"
ratio="1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<carouselList:CarouselList id="carouselPart"
top="50" right="50" bottom="50" left="50"
duration="{durationSelect.value}"
easer="{animationEaserSelect.selectedItem.easer}"
selectedIndex="0"
useVirtualLayout="false"
focusEnabled="true">
<carouselList:dataProvider>
<s:ArrayCollection>
<s:DataItem header="Laika at 7 Weeks" description="Up to no good." icon="@Embed(source='images/listImages/1.jpg')"/>
<s:DataItem header="Laika at 8 Weeks" description="She likes water." icon="@Embed(source='images/listImages/2.jpg')"/>
<s:DataItem header="Laika at 9 Weeks" description="She makes it hard to say no." icon="@Embed(source='images/listImages/3.jpg')"/>
<s:DataItem header="Laika at 10 Weeks" description="First canoe trip." icon="@Embed(source='images/listImages/4.jpg')"/>
<s:DataItem header="Laika at 11 Weeks" description="Naughty dog." icon="@Embed(source='images/listImages/5.jpg')"/>
<s:DataItem header="Laika at 12 Weeks" description="Common scene." icon="@Embed(source='images/listImages/6.jpg')"/>
<s:DataItem header="Laika at 13 Weeks" description="Discovers her hatred of thunder." icon="@Embed(source='images/listImages/7.jpg')"/>
<s:DataItem header="Laika at 14 Weeks" description="Out of breathe." icon="@Embed(source='images/listImages/8.jpg')"/>
<s:DataItem header="Laika at 15 Weeks" description="Bath time." icon="@Embed(source='images/listImages/9.jpg')"/>
<s:DataItem header="Laika at 4 Months" description="Valentines day." icon="@Embed(source='images/listImages/10.jpg')"/>
<s:DataItem header="Laika at 5 Months" description=""I live for this sh**"" icon="@Embed(source='images/listImages/11.jpg')"/>
<s:DataItem header="Laika at 6 Months" description="Rocking out." icon="@Embed(source='images/listImages/12.jpg')"/>
<s:DataItem header="Laika at 1 Year" description="End of a good day." icon="@Embed(source='images/listImages/13.jpg')"/>
</s:ArrayCollection>
</carouselList:dataProvider>
<carouselList:layout>
<layouts:CarouselLayout id="carouselLayout"
radiusX="1000"
radiusY="0"
radiusZ="1000"
arcLength="{arcLengthSelect.value}"
centerOffsetX="{offsetXSelect.value}"
centerOffsetY="{offsetYSelect.value}"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.value}"
rotationX="{rotationXSelect.value}"
rotationY="NaN"
rotationZ="{rotationZSelect.value}"
perspectiveProjectionCenterOffsetX="{projectionXSelect.value}"
perspectiveProjectionCenterOffsetY="{projectionYSelect.value}"
fieldOfView="{fovSelect.value}"/>
</carouselList:layout>
<carouselList:itemRenderer>
<fx:Component>
<s:DataRenderer horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:VerticalLayout horizontalAlign="justify"
gap="20"/>
</s:layout>
<reflectionContainer:ReflectionContainer alphaFrom="0.5" alphaTo="0" alphaToRatio="0.75">
<s:Image source="{data.icon}"/>
</reflectionContainer:ReflectionContainer>
<s:Group>
<s:RichText horizontalCenter="0"
textAlign="center">
<s:span id="headerText" color="#FFFFFF" fontWeight="bold" text="{data.header}" fontSize="14"/>
<s:br/>
<s:span id="descriptionText" color="#CCCCCC" fontWeight="bold" text="{data.description}"/>
<s:filters>
<s:DropShadowFilter angle="90"
blurX="0" blurY="2"
alpha="1"
distance="1"/>
</s:filters>
</s:RichText>
</s:Group>
</s:DataRenderer>
</fx:Component>
</carouselList:itemRenderer>
</carouselList:CarouselList>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Diary Example</data:tabLabel>
<data:exampleDescription>Elements do not need to be images, as demonstrated by this example. Click the textareas to update Laika's diary on her first year of life. Note: the CarouselList accepts keyboard (up, down, left, right, home, end) and mouseWheel navigation as long as it is focused. Click the list to focus it.</data:exampleDescription>
<data:primaryContent>
<carouselList:CarouselList id="carouselPartB"
top="50" right="50" bottom="50" left="50"
duration="{durationSelect.value}"
easer="{animationEaserSelect.selectedItem.easer}"
selectedIndex="0"
useVirtualLayout="false"
focusEnabled="true">
<carouselList:dataProvider>
<s:ArrayCollection>
<s:DataItem header="Diary Entry #1" description="Enter text here."/>
<s:DataItem header="Diary Entry #2" description="Enter text here."/>
<s:DataItem header="Diary Entry #3" description="Enter text here."/>
<s:DataItem header="Diary Entry #4" description="Enter text here."/>
<s:DataItem header="Diary Entry #5" description="Enter text here."/>
<s:DataItem header="Diary Entry #6" description="Enter text here."/>
<s:DataItem header="Diary Entry #7" description="Enter text here."/>
<s:DataItem header="Diary Entry #8" description="Enter text here."/>
<s:DataItem header="Diary Entry #9" description="Enter text here."/>
<s:DataItem header="Diary Entry #10" description="Enter text here."/>
<s:DataItem header="Diary Entry #11" description="Enter text here."/>
<s:DataItem header="Diary Entry #12" description="Enter text here."/>
<s:DataItem header="Diary Entry #13" description="Enter text here."/>
<s:DataItem header="Diary Entry #14" description="Enter text here."/>
<s:DataItem header="Diary Entry #15" description="Enter text here."/>
</s:ArrayCollection>
</carouselList:dataProvider>
<carouselList:layout>
<layouts:CarouselLayout id="carouselLayoutB"
radiusX="1000"
radiusY="0"
radiusZ="1000"
arcLength="{arcLengthSelect.value}"
centerOffsetX="{offsetXSelect.value}"
centerOffsetY="{offsetYSelect.value}"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.value}"
rotationX="{rotationXSelect.value}"
rotationY="NaN"
rotationZ="{rotationZSelect.value}"
perspectiveProjectionCenterOffsetX="{projectionXSelect.value}"
perspectiveProjectionCenterOffsetY="{projectionYSelect.value}"
fieldOfView="{fovSelect.value}"/>
</carouselList:layout>
<carouselList:itemRenderer>
<fx:Component>
<s:DataRenderer horizontalCenter="0" verticalCenter="0">
<s:Panel width="400"
title="{data.header}">
<s:TextArea top="20" right="20" bottom="20" left="20"
text="{data.description}"/>
</s:Panel>
</s:DataRenderer>
</fx:Component>
</carouselList:itemRenderer>
</carouselList:CarouselList>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>