<?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:captcha="ardisia.components.captcha.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import components.captcha.CaptchaButtonSkin;
public function creationComplete():void
{
}
protected function removedFromStageHandler(event:Event):void
{
captchaAudio.abort();
}
]]>
</fx:Script>
<fx:Declarations>
<captcha:CaptchaAudio id="captchaAudio"
assetURLFunction="{function(char:String):String
{
return 'sound/captcha/english/' + char.toUpperCase() + '.mp3';
}
}"
loadStart="eventLabel.text+='"' + event.type + '" event dispatched \n'"
loadEnd="eventLabel.text+='"' + event.type + '" event dispatched \n'"
loadError="eventLabel.text+='"' + event.type + '" event dispatched \n'"
speechStart="eventLabel.text+='"' + event.type + '" event dispatched \n'"
speechEnd="eventLabel.text+='"' + event.type + '" event dispatched \n'"/>
</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="CAPTCHA Description"
eastRegionTitle="Event Log"
description="A visual and audio CAPTCHA used to test if the application user is human. The package includes two components: (1) a visual CAPTCHA that displays the token visually and (2) an audio CAPTCHA that reads out the token. The audio CAPTCHA can use any sound files to read out the CAPTCHA token, but a set of female midwestern USA accent voice files are bundled with the component."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:eastContent>
<s:RichText id="eventLabel"
top="10" right="10" bottom="10" left="10"/>
</containers:eastContent>
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Token:">
<s:TextInput id="tokenSelect"
width="100"
restrict="A-Za-z0-9"
text="{captcha.token}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The CAPTCHA token."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"/>
<s:FormHeading label="Random Token:"/>
<s:FormItem label="Random Length:">
<s:NumericStepper id="lenStepper"
width="100"
minimum="1" maximum="100" value="6" snapInterval="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Select the number of characters for a random token."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Use Random:">
<s:Button label="Randomize"
click="captcha.text=captcha.getRandomString();"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Click to set a randomized token string."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
<!--- expanding container #2 -->
<data:ExpandingContainerData>
<data:label>Visual CAPTCHA Styling</data:label>
<data:content>
<s:FormItem label="Tracking Right:">
<s:HSlider id="trackingRightStepper"
width="100"
minimum="-10" maximum="10" value="3" snapInterval="1"/>
</s:FormItem>
<s:FormItem label="Tracking Left:">
<s:HSlider id="trackingLeftStepper"
width="100"
minimum="-10" maximum="10" value="3" snapInterval="1"/>
</s:FormItem>
<s:FormItem label="Color:">
<colorPicker:ColorPicker id="colorPicker"
selectedColor="0" />
</s:FormItem>
<s:FormItem label="Noise:">
<s:CheckBox id="noiseSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to display a perlin noise profile behind the token."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Polyline:">
<s:CheckBox id="polyLineSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to display a poly line over the token."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Drop Shadow:">
<colorPicker:ColorPicker id="colorPickerDS"
selectedColor="0xFFFFFF" change="captcha.dropShadowFilterPart.color=colorPickerDS.selectedColor" />
</s:FormItem>
<separators:HSeparator width="100%"
paddingBottom="6" paddingTop="6"/>
<s:FormHeading label="Displacement Filter"/>
<s:FormItem label="ScaleX:">
<s:HSlider id="scaleXStepper"
width="100"
minimum="0" maximum="30" snapInterval="1" value="7"
change="captcha.displacementFilterPart.scaleX=scaleXStepper.value"/>
</s:FormItem>
<s:FormItem label="ScaleY:">
<s:HSlider id="scaleYStepper"
width="100"
minimum="0" maximum="30" snapInterval="1"
value="20" change="captcha.displacementFilterPart.scaleY=scaleYStepper.value"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>CAPTCHA Example (visual and audio)</data:tabLabel>
<data:exampleDescription>The implementation below demonstrates both the audio and the visual CAPTCHA components.</data:exampleDescription>
<data:primaryContent>
<s:Panel horizontalCenter="0" verticalCenter="0"
focusEnabled="true" tabEnabled="true"
title="CAPTCHA (are you a human?)"
defaultButton="{submitButton}">
<s:VGroup top="20" right="20" bottom="20" left="20"
gap="20">
<s:HGroup>
<captcha:CaptchaVisual id="captcha"
top="0" right="0" bottom="0" left="0"
token="{tokenSelect.text}"
trackingLeft="{trackingLeftStepper.value}"
trackingRight="{trackingRightStepper.value}"
color="{colorPicker.selectedColor}"
randomTokenLength="{lenStepper.value}"
drawPolyLine="{polyLineSelect.selected}"
drawNoise="{noiseSelect.selected}"
change="eventLabel.text+='"' + event.type + '" event dispatched \n'"/>
<s:VGroup>
<s:HGroup verticalAlign="middle">
<s:Button icon="@Embed(source='icons/arrow-rotate.png')"
toolTip="Try a different CAPTCHA"
skinClass="components.captcha.CaptchaButtonSkin"
click="captcha.text=captcha.getRandomString();"/>
<s:Label text="Try Another" />
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Button icon="@Embed(source='icons/audio.png')"
toolTip="Play an audio version of the CAPTCHA"
skinClass="components.captcha.CaptchaButtonSkin"
click="captchaAudio.charsToSpeech(captcha.text)"/>
<s:Label text="Play Audio" />
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Button icon="@Embed(source='icons/captcha-information.png')"
toolTip="Enter the string to the left in the input box below to continue"
skinClass="components.captcha.CaptchaButtonSkin"/>
<s:Label text="Information" />
</s:HGroup>
</s:VGroup>
</s:HGroup>
<s:HGroup verticalAlign="baseline">
<s:TextInput id="sf"/>
<s:Button id="submitButton"
label="Submit"
click="if(sf.text.toLowerCase()==captcha.text.toLowerCase()){notificationLabel.text='Success! You are human.';}else{notificationLabel.text='Incorrect. You may not be human.';}"/>
<s:Label id="notificationLabel" />
</s:HGroup>
</s:VGroup>
</s:Panel>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>