I’d like to dedicate this post to the two people that searched for this on my blog [...]]]> The following example shows how you can create a blinking text effect on a Spark RichText control in Flex 4 using a simple property animation with the Animate and SimpleMotionPath classes to tween the alpha property.

I’d like to dedicate this post to the two people that searched for this on my blog (who may be the only people to want to bring back the old HTML blinking text effect).

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_blink_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Declarations>
        <s:Animate id="fader"
                duration="500"
                repeatBehavior="reverse"
                repeatCount="0"
                target="{lbl}">
            <s:SimpleMotionPath property="alpha"
                    valueFrom="1.0" valueTo="0.0" />
        </s:Animate>
    </fx:Declarations>
 
    <s:Label id="lbl"
            text="BLINKING TEXT, I HATE YOU!"
            color="red"
            fontSize="32"
            creationComplete="fader.play();" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 

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 [...]]]> 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″.

View MXML

<?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:

View MXML

<?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:

View MXML

<?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.

 

The following example [...]]]> In a previous example, “3D Rotating objects in Flex 4 using the Spark Rotate3D effect and Flash Player 10″, we saw how you could rotate objects in 3D space from 0 to 360 degrees along the X, Y, and Z axis using the Spark Rotate3D effect in the Flex 4 SDK.

The following example shows how you can rotate an image relative to its current rotation by setting the yBy property on the Spark Rotate3D instance.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/25/incrementally-3d-rotating-objects-in-flex-using-the-fxrotate3d-in-flex/ -->
<s:Application name="Spark_Rotate3D_yBy_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import spark.effects.Animate;
 
            private function playEffect(target:Animate, angle:Number):void {
                if (!target.isPlaying) {
                    rotY += angle;
                    target.play();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Number id="rotY">0</fx:Number>
        <s:Rotate3D id="fxRotate3DNeg" target="{image}" angleYTo="{rotY}" autoCenterTransform="true" />
        <s:Rotate3D id="fxRotate3DPos" target="{image}" angleYTo="{rotY}" autoCenterTransform="true" />
    </fx:Declarations>
 
    <s:VGroup id="vGroup" left="10" top="10">
        <s:Button id="fxButtonNeg"
                label="Rotate3D (angleYTo - 30)"
                autoRepeat="true"
                repeatDelay="500"
                repeatInterval="100"
                buttonDown="playEffect(fxRotate3DNeg, -30);" />
        <s:Button id="fxButtonPos"
                label="Rotate3D (angleYTo + 30)"
                autoRepeat="true"
                repeatDelay="500"
                repeatInterval="100"
                buttonDown="playEffect(fxRotate3DNeg, 30);" />
    </s:VGroup>
 
    <s:BitmapImage id="image"
            source="@Embed('assets/fx_appicon-tn.gif')"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.