The following example shows how you can create an animated transition between two colors using the Flex Gumbo FxAnimateColor class.
Full code after the jump.
To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/06/animating-colors-using-the-fxanimatecolor-effect-in-flex-gumbo/ -->
<FxApplication name="FxAnimateColor_test"
xmlns="http://ns.adobe.com/mxml/2009">
<Declarations>
<FxAnimateColor id="fxAnimateColor"
colorFrom="{color1.selectedColor}"
colorTo="{color2.selectedColor}"
target="{ellipse.fill}" />
</Declarations>
<Form>
<FormItem label="colorFrom:">
<ColorPicker id="color1"
selectedColor="red" />
</FormItem>
<FormItem label="colorTo:">
<ColorPicker id="color2"
selectedColor="blue" />
</FormItem>
<FormItem>
<Button id="btn"
label="Play"
click="fxAnimateColor.play();" />
</FormItem>
</Form>
<Ellipse id="ellipse"
width="300"
height="200"
horizontalCenter="0"
verticalCenter="0">
<fill>
<SolidColor />
</fill>
</Ellipse>
</FxApplication>
View source is enabled in the following example.
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/06/animating-colors-using-the-fxanimatecolor-effect-in-flex-gumbo/ -->
<FxApplication name="FxAnimateColor_test"
xmlns="http://ns.adobe.com/mxml/2009"
initialize="init();">
<Script>
<![CDATA[
import mx.containers.Form;
import mx.containers.FormItem;
import mx.controls.Button;
import mx.controls.ColorPicker;
import mx.effects.FxAnimateColor;
import mx.events.ColorPickerEvent;
import mx.graphics.Ellipse;
import mx.graphics.SolidColor;
private var btn:Button;
private var color1:ColorPicker;
private var color2:ColorPicker;
private var ellipse:Ellipse;
private var fxAnimateColor:FxAnimateColor;
private function init():void {
color1 = new ColorPicker();
color1.selectedColor = 0xFF0000; // red;
color1.addEventListener(ColorPickerEvent.CHANGE, color1_change);
color2 = new ColorPicker();
color2.selectedColor = 0x0000FF; // blue
color2.addEventListener(ColorPickerEvent.CHANGE, color2_change);
btn = new Button();
btn.label = "Play";
btn.addEventListener(MouseEvent.CLICK, btn_click);
var formItem1:FormItem = new FormItem();
formItem1.label = "colorFrom:";
formItem1.addChild(color1);
var formItem2:FormItem = new FormItem();
formItem2.label = "colorTo:";
formItem2.addChild(color2);
var formItem3:FormItem = new FormItem();
formItem2.addChild(btn);
var form:Form = new Form();
form.addChild(formItem1);
form.addChild(formItem2);
form.addChild(formItem3);
addItem(form);
ellipse = new Ellipse();
ellipse.fill = new SolidColor();
ellipse.width = 300;
ellipse.height = 200;
ellipse.horizontalCenter = 0;
ellipse.verticalCenter = 0;
addItem(ellipse);
fxAnimateColor = new FxAnimateColor();
fxAnimateColor.colorFrom = color1.selectedColor;
fxAnimateColor.colorTo = color2.selectedColor;
fxAnimateColor.target = ellipse.fill;
}
private function color1_change(evt:ColorPickerEvent):void {
fxAnimateColor.colorFrom = evt.color;
}
private function color2_change(evt:ColorPickerEvent):void {
fxAnimateColor.colorTo = evt.color;
}
private function btn_click(evt:MouseEvent):void {
fxAnimateColor.play();
}
]]>
</Script>
</FxApplication>
You can also just specify the colorTo property if you want to animate from the current color to a specific color:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/06/animating-colors-using-the-fxanimatecolor-effect-in-flex-gumbo/ -->
<FxApplication name="FxAnimateColor_test"
xmlns="http://ns.adobe.com/mxml/2009">
<Declarations>
<FxAnimateColor id="fxAnimateColor"
colorTo="{color2.selectedColor}"
target="{ellipse.fill}" />
</Declarations>
<Form>
<FormItem label="colorTo:">
<ColorPicker id="color2"
selectedColor="blue" />
</FormItem>
<FormItem>
<Button id="btn"
label="Play"
click="fxAnimateColor.play();" />
</FormItem>
</Form>
<Ellipse id="ellipse"
width="300"
height="200"
horizontalCenter="0"
verticalCenter="0">
<fill>
<SolidColor />
</fill>
</Ellipse>
</FxApplication>
View source is enabled in the following example.
This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.
