<?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:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:sliderField="ardisia.components.sliderField.*"
xmlns:pane="ardisia.components.pane.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.BitmapAsset;
import mx.core.FlexGlobals;
import spark.events.IndexChangeEvent;
import ardisia.bitmapAdjustments.BitmapAdjustments;
import ardisia.bitmapAdjustments.PixelateTypes;
import ardisia.bitmapAdjustments.dataTypes.ThresholdData;
import ardisia.components.pane.Pane;
protected var adaBmd:BitmapData;
protected var sunBmd:BitmapData;
protected var laikaToyAutoLevelledBitmap:BitmapData
protected var laikaToyBitmap:BitmapData
protected var timer:Timer = new Timer(300, 1);
public function creationComplete():void
{
adaBmd = BitmapAsset(new adaLovelaceBitmapAsset.bmd()).bitmapData;
sunBmd = BitmapAsset(new sunBitmapAsset.bmd()).bitmapData;
laikaToyAutoLevelledBitmap = BitmapAsset(new laikaToyAutoLevelledBitmapAsset.bmd()).bitmapData;
laikaToyBitmap = BitmapAsset(new laikaToyBitmapAsset.bmd()).bitmapData;
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstackHandler);
viewstackHandler();
}
public function updateAdjustment():void
{
switch (demoAppWrapper.tabBar.selectedItem.label)
{
case "Color Thresholds":
switch (colorThesholdsSelect.selectedIndex)
{
case 0:
img.source = adaBmd.clone();
break;
case 1:
img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
new ThresholdData(0x00324D, 0.26),
new ThresholdData(0xD61A21, 0.52),
new ThresholdData(0x70959E, 0.68),
new ThresholdData(0xFBE3A7, 1)
]), false);
break;
case 2:
img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
new ThresholdData(0x00324D, 0),
new ThresholdData(0xD61A21, 0.52),
new ThresholdData(0x70959E, 0.68),
new ThresholdData(0xFBE3A7, 1)
]), true);
break;
case 3:
img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
new ThresholdData(0x0005FF, 0.0),
new ThresholdData(0x00F8FF, 0.4),
new ThresholdData(0x00FF0B, 0.6),
new ThresholdData(0xFFF800, 0.8),
new ThresholdData(0xFF0600, 1)
]), true);
break;
case 4:
img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
new ThresholdData(0x000000, 0.5),
new ThresholdData(0xFFFFFF, 1)
]), false);
break;
case 5:
img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
new ThresholdData(0x0A00B2, 0.0),
new ThresholdData(0xFF0000, 0.5),
new ThresholdData(0xFFFC00, 1)
]), true);
break;
case 6:
img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
new ThresholdData(hope1B.selectedColor, useGradientsSelect.selected ? 0 : hope1A.value),
new ThresholdData(hope2B.selectedColor, hope2A.value),
new ThresholdData(hope3B.selectedColor, hope3A.value),
new ThresholdData(hope4B.selectedColor, 1)
]), useGradientsSelect.selected);
break;
}
break;
case "Pixelation":
switch (pixelateSelect.selectedIndex)
{
case 0:
img2.source = sunBmd.clone();
break;
case 1:
img2.source = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1, PixelateTypes.RECTANGLE, 10, 0, 0, 0);
break;
case 2:
loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
timer.start();
break;
case 3:
img2.source = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1, PixelateTypes.RECTANGLE, 5, 1, 0, 0);
break;
case 4:
var source:BitmapData = sunBmd.clone();
var bmd:BitmapData = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1, PixelateTypes.RECTANGLE, 15, -7, 0.5, NaN);
source.copyPixels(bmd, new Rectangle(0, 0, bmd.width, bmd.height), new Point(0, 0));
img2.source = source;
break;
case 5:
loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
timer.start();
break;
case 6:
img2.source = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1, PixelateTypes.CIRCLE, 15, -8, 1, NaN);
break;
case 7:
loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
timer.start();
break;
}
break;
case "Oil Painting":
if (!applyOilSelect.selected)
{
img3.source = laikaToyAutoLevelledBitmap.clone();
}
else
{
loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
timer.start();
}
break;
case "Kuwahara":
if (!applyKuwaharaSelect.selected)
{
img4.source = adaBmd.clone();
}
else
{
loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
timer.start();
}
break;
case "Vignette":
img5.source = BitmapAdjustments.vignette(sunBmd.clone(), vignetteSizeSelect.value);
break;
case "Posterize":
img6.source = BitmapAdjustments.posterize(sunBmd.clone(), posterizeSelect.value);
break;
case "Solarize":
img7.source = solarizeSelect.selected ? BitmapAdjustments.solarize(sunBmd.clone()) : sunBmd.clone();
break;
case "Auto Levels":
img8.source = autoLevelsSelect.selected ? BitmapAdjustments.autoLevels(laikaToyBitmap.clone()) : laikaToyBitmap.clone();
break;
}
}
protected function removedFromStageHandler(event:Event):void
{
if (img && img.bitmapData)
img.bitmapData.dispose();
if (img2 && img2.bitmapData)
img2.bitmapData.dispose();
if (img3 && img3.bitmapData)
img3.bitmapData.dispose();
if (img4 && img4.bitmapData)
img4.bitmapData.dispose();
if (img5 && img5.bitmapData)
img5.bitmapData.dispose();
if (img6 && img6.bitmapData)
img6.bitmapData.dispose();
if (img7 && img7.bitmapData)
img7.bitmapData.dispose();
if (img8 && img8.bitmapData)
img8.bitmapData.dispose();
}
protected function viewstackHandler(event:IndexChangeEvent = null):void
{
colorThesholdsSelect.selectedIndex = pixelateSelect.selectedIndex = 0;
applyOilSelect.selected = applyKuwaharaSelect.selected = false;
updateAdjustment();
}
protected function timerHandler(event:TimerEvent):void
{
timer.removeEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
switch (demoAppWrapper.tabBar.selectedItem.label)
{
case "Pixelation":
switch (pixelateSelect.selectedIndex)
{
case 2:
var source:BitmapData = sunBmd.clone();
var bmd:BitmapData = BitmapAdjustments.pixelate(source, 0, -1, PixelateTypes.CIRCLE, 5, -3, 0.5, NaN);
source.copyPixels(bmd, new Rectangle(0, 0, bmd.width, bmd.height), new Point(0, 0));
img2.source = source;
break;
case 5:
img2.source = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1, PixelateTypes.RECTANGLE, 10, -9, 1, NaN);
break;
case 7:
spacingPixelateSelect.value = Math.max(-sizePixelateSelect.value + 1, spacingPixelateSelect.value);
if (!useBackgroundSelect.selected)
{
source = sunBmd.clone();
bmd = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1,
pixelateTypeSelect.selectedItem,
sizePixelateSelect.value,
spacingPixelateSelect.value,
noisePixelateSelect.value);
source.copyPixels(bmd, new Rectangle(0, 0, bmd.width, bmd.height), new Point(0, 0));
}
else
{
source = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1,
pixelateTypeSelect.selectedItem,
sizePixelateSelect.value,
spacingPixelateSelect.value,
noisePixelateSelect.value,
pixelateColorSelect.selectedColor);
}
img2.source = source;
break;
}
break;
case "Oil Painting":
img3.source = BitmapAdjustments.oilPainting(laikaToyAutoLevelledBitmap.clone(), oilLevelsSelect.value, oilSizeSelect.value);
break;
case "Kuwahara":
img4.source = BitmapAdjustments.kuwahara(adaBmd.clone(), kuwaharaSizeSelect.value);
break;
}
loadingPane.closeFloatedPane();
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Object id="adaLovelaceBitmapAsset" bmd="@Embed(source='images/ada-lovelace.jpg')" />
<fx:Object id="sunBitmapAsset" bmd="@Embed(source='images/sun.jpg')" />
<fx:Object id="laikaToyAutoLevelledBitmapAsset" bmd="@Embed(source='images/laika-puppy-toy-auto-levelled.jpg')" />
<fx:Object id="laikaToyBitmapAsset" bmd="@Embed(source='images/laika-puppy-toy.jpg')" />
<pane:Pane id="loadingPane"
width="300" height="120"
title="Bitmap Adjustment">
<s:Label text="Thinking..."
horizontalCenter="0" verticalCenter="0"/>
</pane:Pane>
</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="Bitmap Adjustments Description"
description="Useful functions to alter bitmap data. Unlike filters that are applied via a DisplayObject's 'filters' property, these functions do not dynamically alter bitmap data. Instead developers must use these functions to manually change bitmap data. See the separate filters demo to see the custom dynamic filters included with the Ardisia Component Library."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Color Thresholds</data:tabLabel>
<data:exampleDescription>Change the colors of bitmap data along color intensity thresholds. Developers can add any number of color thresholds and colors can be transformed by solid color or a calculated gradient color. Image is of Ada Lovelace, the first computer programmer in history.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:DropDownList id="colorThesholdsSelect"
width="130"
requireSelection="true"
selectedIndex="0"
change="updateAdjustment()">
<s:ArrayCollection>
<fx:String>No Adjustment</fx:String>
<fx:String>Hope</fx:String>
<fx:String>Hope (Gradient)</fx:String>
<fx:String>Heat</fx:String>
<fx:String>Brush Pen</fx:String>
<fx:String>Predator</fx:String>
<fx:String>Custom</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<separators:VSeparator height="100%"/>
<s:Form includeInLayout="{colorThesholdsSelect.selectedIndex==6}" visible="{colorThesholdsSelect.selectedIndex==6}">
<s:FormItem label="Color #1:">
<s:HGroup gap="2">
<s:HSlider id="hope1A"
enabled="{!useGradientsSelect.selected}"
snapInterval="0"
minimum="0" maximum="{hope2A.value}" value="0.26"
change="updateAdjustment()"/>
<colorPicker:ColorPicker id="hope1B"
selectedColor="#00324D"
change="updateAdjustment()"/>
</s:HGroup>
</s:FormItem>
<s:FormItem label="Color #2:">
<s:HGroup gap="2">
<s:HSlider id="hope2A"
snapInterval="0"
minimum="{hope1A.value}" maximum="{hope3A.value}" value="0.52"
change="updateAdjustment()"/>
<colorPicker:ColorPicker id="hope2B"
selectedColor="#D61A21"
change="updateAdjustment()"/>
</s:HGroup>
</s:FormItem>
<s:FormItem label="Color #3:">
<s:HGroup gap="2">
<s:HSlider id="hope3A"
snapInterval="0"
minimum="{hope2A.value}" maximum="1" value="0.68"
change="updateAdjustment()"/>
<colorPicker:ColorPicker id="hope3B"
selectedColor="#70959E"
change="updateAdjustment()"/>
</s:HGroup>
</s:FormItem>
<s:FormItem label="Color #4:">
<colorPicker:ColorPicker id="hope4B"
selectedColor="#FBE3A7"
change="updateAdjustment()"/>
</s:FormItem>
<s:FormItem label="Use Gradients:">
<s:CheckBox id="useGradientsSelect"
selected="false"
change="updateAdjustment()"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:Image id="img"
horizontalCenter="0" verticalCenter="0"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Pixelation</data:tabLabel>
<data:exampleDescription>Pixelize or pointillize bitmap data. See the custom option below for the possible configurations. Image is of sunflowers.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:DropDownList id="pixelateSelect"
width="130"
requireSelection="true"
selectedIndex="0"
change="updateAdjustment()">
<s:ArrayCollection>
<fx:String>No Adjustment</fx:String>
<fx:String>Pixelate</fx:String>
<fx:String>Dither</fx:String>
<fx:String>Grid</fx:String>
<fx:String>Blocky</fx:String>
<fx:String>Strokes</fx:String>
<fx:String>Artsy</fx:String>
<fx:String>Custom</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<separators:VSeparator height="100%"/>
<s:Form includeInLayout="{pixelateSelect.selectedIndex==7}" visible="{pixelateSelect.selectedIndex==7}">
<s:FormItem label="Type">
<s:DropDownList id="pixelateTypeSelect"
width="100"
requireSelection="true"
change="updateAdjustment()">
<s:ArrayCollection>
<fx:String>rectangle</fx:String>
<fx:String>circle</fx:String>
</s:ArrayCollection>
</s:DropDownList>
</s:FormItem>
<s:FormItem label="Size:">
<sliderField:SliderField id="sizePixelateSelect"
minimum="2" maximum="50" value="15"
change="updateAdjustment()"/>
</s:FormItem>
<s:FormItem label="Spacing:">
<sliderField:SliderField id="spacingPixelateSelect"
minimum="-10" maximum="10" value="5"
change="updateAdjustment()"/>
</s:FormItem>
<s:FormItem label="Noise:">
<sliderField:SliderField id="noisePixelateSelect"
minimum="0" maximum="1" value="0.5" snapInterval="0"
change="updateAdjustment()"/>
</s:FormItem>
<s:FormItem label="Use Background:">
<s:HGroup verticalAlign="middle"
gap="2">
<s:CheckBox id="useBackgroundSelect"
selected="true"
change="updateAdjustment()"/>
<colorPicker:ColorPicker id="pixelateColorSelect"
enabled="{useBackgroundSelect.selected}"
selectedColor="#FFFFFF"
change="updateAdjustment()"/>
</s:HGroup>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:Image id="img2"
horizontalCenter="0" verticalCenter="0"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>Oil Painting</data:tabLabel>
<data:exampleDescription>Oil painting effect.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Apply Oil Painting:">
<s:CheckBox id="applyOilSelect"
selected="false"
change="updateAdjustment()"/>
</s:FormItem>
<s:FormItem label="Levels:"
enabled="{applyOilSelect.selected}">
<sliderField:SliderField id="oilLevelsSelect"
snapInterval="1"
minimum="2" maximum="30" value="24"
change="updateAdjustment()"/>
</s:FormItem>
<s:FormItem label="Size:"
enabled="{applyOilSelect.selected}">
<sliderField:SliderField id="oilSizeSelect"
snapInterval="1"
minimum="2" maximum="9" value="7"
change="updateAdjustment()"/>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:Image id="img3"
horizontalCenter="0" verticalCenter="0"
source="@Embed(source='images/ada-lovelace.jpg')"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #4 -->
<data:PrimaryContentData>
<data:tabLabel>Kuwahara</data:tabLabel>
<data:exampleDescription>Kuwahara filter effect. See http://en.wikipedia.org/wiki/Kuwahara_filter for more information.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Apply Kuwahara:">
<s:CheckBox id="applyKuwaharaSelect"
selected="false"
change="updateAdjustment()"/>
</s:FormItem>
<s:FormItem label="Size:"
enabled="{applyKuwaharaSelect.selected}">
<sliderField:SliderField id="kuwaharaSizeSelect"
snapInterval="1"
minimum="2" maximum="8" value="4"
change="updateAdjustment()"/>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:Image id="img4"
horizontalCenter="0" verticalCenter="0"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #5 -->
<data:PrimaryContentData>
<data:tabLabel>Vignette</data:tabLabel>
<data:exampleDescription>Creates a vignette effect.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Size:">
<s:HSlider id="vignetteSizeSelect"
snapInterval="0"
minimum="0" maximum="1" value="0.8"
change="updateAdjustment()"/>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:Image id="img5"
horizontalCenter="0" verticalCenter="0"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #6 -->
<data:PrimaryContentData>
<data:tabLabel>Posterize</data:tabLabel>
<data:exampleDescription>Posterize effect. See http://en.wikipedia.org/wiki/Posterization.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Levels:">
<s:HSlider id="posterizeSelect"
snapInterval="1"
minimum="2" maximum="20" value="3"
change="updateAdjustment()"/>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:Image id="img6"
horizontalCenter="0" verticalCenter="0"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #7 -->
<data:PrimaryContentData>
<data:tabLabel>Solarize</data:tabLabel>
<data:exampleDescription>Solarize effect. See http://en.wikipedia.org/wiki/Solarisation.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Apply Solarization:">
<s:CheckBox id="solarizeSelect"
selected="false"
change="updateAdjustment()"/>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:Image id="img7"
horizontalCenter="0" verticalCenter="0"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #8 -->
<data:PrimaryContentData>
<data:tabLabel>Auto Levels</data:tabLabel>
<data:exampleDescription>Auto Levels. Stretch the range of the colors in the bitmap data to add color.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Apply Auto Levels Effect:">
<s:CheckBox id="autoLevelsSelect"
selected="false"
change="updateAdjustment()"/>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:Image id="img8"
horizontalCenter="0" verticalCenter="0"/>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>