Setting the Y-axis transform position on a Spark BitmapImage control in Flex 4

The following example shows how you can set the Y-axis transform position on a Spark BitmapImage control in Flex 4 by seting the rotationY, transformX, and transformY properties.

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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/2009/11/20/setting-the-y-axis-transform-position-on-a-spark-bitmapimage-control-in-flex-4/ -->
<s:Application name="Spark_BitmapImage_transformY_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:controlBarContent>
        <mx:Form styleName="plain" backgroundAlpha="0.0">
            <mx:FormItem label="rotationY:">
                <s:HSlider id="sl1" minimum="0" maximum="360" />
            </mx:FormItem>
            <mx:FormItem label="transformY:">
                <s:HSlider id="sl2" minimum="0" maximum="{img.height}" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:SkinnableContainer horizontalCenter="0" verticalCenter="0">
        <s:Line x="{sl2.value}" yFrom="0" yTo="{img.height+20}">
            <s:stroke>
                <s:SolidColorStroke />
            </s:stroke>
        </s:Line>
        <s:BitmapImage id="img"
                source="@Embed('assets/fl_appicon-tn.gif')"
                rotationY="{sl1.value}"
                transformX="{sl2.value}" transformY="{sl2.value}"
                horizontalCenter="0" verticalCenter="0" />
    </s:SkinnableContainer>
 
</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.

3 thoughts on “Setting the Y-axis transform position on a Spark BitmapImage control in Flex 4

  1. Thanks. Great Blog.

    Two Things. One small, one bigger.

    One small.
    Although not incorrect, I think you meant to write…

    The difference is in establishing the maximum distance as the widht, not the height. Also, the variable transformX does nothing.

    One Bigger (rather small in implementation, I believe, but would make a huge difference)
    It would be a huge time saver for us, your readership, if you uploaded the .swf, that way we wouldn’t have to compile it ourselves. It was especially time consuming in this code because of the image file…
    Thanks a bunch.

    1. I think I know why the source code I pasted doesn’t appear in the comment, but I think it’s evident where it should go.

      still… s:HSlider id=”sl2″ minimum=”0″ maximum=”{img.height}”

      (I don’t think it’s important, maybe it’s just my way of trying to be nice)

Comments are closed.