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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".
<?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 comments… read them below or add one }
thats great.
i whant to know more regarding fles.
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.
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)