<?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:animatedImage="ardisia.components.animatedImage.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:scroller="ardisia.components.scroller.*"
frameRate="60"
currentState="stockholm"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.BitmapAsset;
import spark.events.IndexChangeEvent;
import ardisia.components.animatedImage.AnimatedBitmap;
[Embed(="ardisia/components/progressDisplay/themes/assets/images/snakeSpriteSheet.png")]
protected var SnakeSpriteSheet:Class;
protected var abmd:AnimatedBitmap;
public function creationComplete():void
{
abmd = new AnimatedBitmap();
abmd.framesPerRow = 10;
abmd.framesLastRow = 9;
abmd.framesPerSecond = 50;
abmd.rows = 5;
abmd.spriteSheetBmd = BitmapAsset(new SnakeSpriteSheet()).bitmapData;
animatedImageWrapper.addChild(abmd);
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:IndexChangeEvent):void
{
UIComponent(demoAppWrapper.westVerticalGroup.getElementAt(1)).enabled = demoAppWrapper.tabBar.selectedItem.label == "Examples";
});
demoAppWrapper.viewstack.addEventListener(MouseEvent.ROLL_OVER, function(event:MouseEvent):void
{
demoAppWrapper.viewstack.setFocus();
});
}
protected function removedFromStageHandler(event:Event):void
{
exampleA1.stop();
exampleA2.stop();
exampleB.stop();
exampleC.stop();
exampleD.stop();
if (abmd)
abmd.stop();
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Object id="testBmd"
bmd="@Embed(source='images/spritesheets/semi-circles.png')" />
</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="AnimatedImage Description"
description="The AnimatedImage component animates a spritesheet at the requested frames per second ('FPS'). The FPS is not locked to the stage FPS. Embedded SWFs can be animated, but they are forced to run at the Flash Player's global FPS. This can result in animations being forced to run too fast or too slow without any way to modify the FPS. This class grants developers granular control over the FPS of each AnimatedImage instance, as well as the ability to jump to any frame in the animation, start, stop, etc. Spritesheets are used for the animations."
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="Example A.1:"/>
<s:FormItem label="Frames / second:">
<s:HSlider id="fpsA1Select"
width="100"
minimum="1" maximum="60" value="15"/>
</s:FormItem>
<s:FormItem label="Jump To Frame:">
<s:NumericStepper id="jumpA1Select"
width="100"
minimum="0" maximum="39" value="0"
change="exampleA1.jumpToFrame(jumpA1Select.value);"/>
</s:FormItem>
<s:FormItem >
<s:Group>
<s:HGroup>
<s:Button width="55"
label="Start"
click="exampleA1.play();"/>
<s:Button width="55"
label="Stop"
click="exampleA1.stop();"/>
</s:HGroup>
</s:Group>
</s:FormItem>
<s:FormHeading label="Example A.2:"/>
<s:FormItem label="Frames / second:">
<s:HSlider id="fpsA2Select"
width="100"
minimum="1" maximum="60" value="60"/>
</s:FormItem>
<s:FormItem label="Jump To Frame:">
<s:NumericStepper id="jumpA2Select"
width="100"
minimum="0" maximum="39" value="0"
change="exampleA2.jumpToFrame(jumpA2Select.value);"/>
</s:FormItem>
<s:FormItem >
<s:Group>
<s:HGroup>
<s:Button width="55"
label="Start"
click="exampleA2.play();"/>
<s:Button width="55"
label="Stop"
click="exampleA2.stop();"/>
</s:HGroup>
</s:Group>
</s:FormItem>
<s:FormHeading label="Example B:"/>
<s:FormItem label="Frames / second:">
<s:HSlider id="fpsBSelect"
width="100"
minimum="1" maximum="60" value="30"/>
</s:FormItem>
<s:FormItem label="Jump To Frame:">
<s:NumericStepper id="jumpBSelect"
width="100"
minimum="0" maximum="14" value="0"
change="exampleB.jumpToFrame(jumpBSelect.value);"/>
</s:FormItem>
<s:FormItem >
<s:Group>
<s:HGroup>
<s:Button width="55"
label="Start"
click="exampleB.play();"/>
<s:Button width="55"
label="Stop"
click="exampleB.stop();"/>
</s:HGroup>
</s:Group>
</s:FormItem>
<s:FormHeading label="Example C:"/>
<s:FormItem label="Frames / second:">
<s:HSlider id="fpsCSelect"
width="100"
minimum="1" maximum="60" value="8"/>
</s:FormItem>
<s:FormItem label="Jump To Frame:">
<s:NumericStepper id="jumpCSelect"
width="100"
minimum="0" maximum="7" value="0"
change="exampleC.jumpToFrame(jumpCSelect.value);"/>
</s:FormItem>
<s:FormItem >
<s:Group>
<s:HGroup>
<s:Button width="55"
label="Start"
click="exampleC.play();"/>
<s:Button width="55"
label="Stop"
click="exampleC.stop();"/>
</s:HGroup>
</s:Group>
</s:FormItem>
<s:FormHeading label="Example D:"/>
<s:FormItem label="Frames / second:">
<s:HSlider id="fpsDSelect"
width="100"
minimum="1" maximum="60" value="3"/>
</s:FormItem>
<s:FormItem label="Jump To Frame:">
<s:NumericStepper id="jumpDSelect"
width="100"
minimum="0" maximum="59" value="0"
change="exampleD.jumpToFrame(jumpDSelect.value);"/>
</s:FormItem>
<s:FormItem >
<s:Group>
<s:HGroup>
<s:Button width="55"
label="Start"
click="exampleD.play();"/>
<s:Button width="55"
label="Stop"
click="exampleD.stop();"/>
</s:HGroup>
</s:Group>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Examples</data:tabLabel>
<data:exampleDescription>The animation properties for each AnimatedImage instance below can be controlled via the API in the West panel.</data:exampleDescription>
<data:toolbarContent>
</data:toolbarContent>
<data:primaryContent>
<s:HGroup horizontalCenter="0" verticalCenter="0"
gap="40" verticalAlign="contentJustify">
<s:VGroup gap="20" horizontalAlign="justify">
<s:Label text="Example A.1:"
textAlign="center"
fontWeight="bold"/>
<s:Group height="100%">
<animatedImage:AnimatedImage id="exampleA1"
verticalCenter="0"
framesPerRow="12"
framesLastRow="4"
rows="4"
framesPerSecond="{fpsA1Select.value}"
source="@Embed(source='images/spritesheets/semi-circles.png')"/>
</s:Group>
</s:VGroup>
<s:VGroup gap="20" horizontalAlign="justify">
<s:Label text="Example A.2:"
textAlign="center"
fontWeight="bold"/>
<s:Group height="100%">
<animatedImage:AnimatedImage id="exampleA2"
verticalCenter="0"
framesPerRow="12"
framesLastRow="4"
rows="4"
framesPerSecond="{fpsA2Select.value}"
source="@Embed(source='images/spritesheets/semi-circles.png')"/>
</s:Group>
</s:VGroup>
<s:VGroup gap="20" horizontalAlign="justify">
<s:Label text="Example B:"
textAlign="center"
fontWeight="bold"/>
<s:Group height="100%">
<animatedImage:AnimatedImage id="exampleB"
verticalCenter="0"
framesPerRow="5"
framesLastRow="5"
rows="1"
framesPerSecond="{fpsBSelect.value}"
source="@Embed(source='images/spritesheets/gears.png')"/>
</s:Group>
</s:VGroup>
<s:VGroup gap="20" horizontalAlign="justify">
<s:Label text="Example C:"
textAlign="center"
fontWeight="bold"/>
<s:Group height="100%">
<animatedImage:AnimatedImage id="exampleC"
verticalCenter="0"
framesPerRow="8"
framesLastRow="8"
rows="1"
framesPerSecond="{fpsCSelect.value}"
source="@Embed(source='images/spritesheets/waiting.png')"/>
</s:Group>
</s:VGroup>
<s:VGroup gap="20" horizontalAlign="justify">
<s:Label text="Example D:"
textAlign="center"
fontWeight="bold"/>
<s:Group height="100%">
<animatedImage:AnimatedImage id="exampleD"
width="100" height="100"
verticalCenter="0"
framesPerRow="10"
framesLastRow="10"
rows="6"
framesPerSecond="{fpsDSelect.value}"
source="@Embed(source='images/spritesheets/spritesheet.png')"/>
</s:Group>
</s:VGroup>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Non-Flex Example</data:tabLabel>
<data:exampleDescription>Flash only version (AnimatedBitmap). Useful when the Flex Framework isn't available.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Frames / second:">
<s:HSlider id="fpsFlashSelect"
width="100"
minimum="1" maximum="60" value="50"
change="abmd.framesPerSecond=fpsFlashSelect.value"/>
</s:FormItem>
<s:FormItem label="Jump To Frame:">
<s:NumericStepper id="jumpFlashSelect"
width="100"
minimum="0" maximum="39" value="0"
change="abmd.jumpToFrame(jumpFlashSelect.value);"/>
</s:FormItem>
<s:FormItem >
<s:Group>
<s:HGroup>
<s:Button width="56"
label="Start"
click="abmd.play();"/>
<s:Button width="56"
label="Stop"
click="abmd.stop();"/>
</s:HGroup>
</s:Group>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:VGroup horizontalCenter="0" verticalCenter="0"
gap="20">
<s:Label text="Flash Only (No Flex Dependencies):"
textAlign="center"
fontWeight="bold"/>
<mx:UIComponent id="animatedImageWrapper"
height="100%"/>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>SpriteSheets</data:tabLabel>
<data:exampleDescription>Displayed below are the spritesheets used by the AnimatedImage examples in the previous tab. Many popular graphical editing software clients support spritesheet creation.</data:exampleDescription>
<data:primaryContent>
<scroller:Scroller top="1" right="1" bottom="1" left="1"
focusEnabled="true"
minViewportInset="1">
<s:Group>
<s:Image top="10" left="10"
source="@Embed(source='images/spritesheets/example-spritesheet.jpg')"/>
</s:Group>
</scroller:Scroller>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>