Flex Examples » BitmapImage (Spark) http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Displaying an FXG file in a Spark BitmapImage control in Flex 4 http://blog.flexexamples.com/2010/10/10/displaying-an-fxg-file-in-a-spark-bitmapimage-control-in-flex-4/ http://blog.flexexamples.com/2010/10/10/displaying-an-fxg-file-in-a-spark-bitmapimage-control-in-flex-4/#comments Sun, 10 Oct 2010 19:26:28 +0000 Peter deHaan http://blog.flexexamples.com/?p=3357 The following example shows how you can display an FXG file in a Spark BitmapImage control in Flex 4 by setting the source property using data binding or MXML.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/10/10/displaying-an-fxg-file-in-a-spark-bitmapimage-control-in-flex-4/ --> <s:Application name="Spark_BitmapImage_source_FXG_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:VerticalLayout horizontalAlign="center" verticalAlign="middle" /> </s:layout>   <fx:Script> <![CDATA[ import assets.*; ]]> </fx:Script>   [...]]]> The following example shows how you can display an FXG file in a Spark BitmapImage control in Flex 4 by setting the source property using data binding or MXML.

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/10/10/displaying-an-fxg-file-in-a-spark-bitmapimage-control-in-flex-4/ -->
<s:Application name="Spark_BitmapImage_source_FXG_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:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import assets.*;
        ]]>
    </fx:Script>
 
    <s:BitmapImage id="bmpImg" source="{Chevron}" />
 
</s:Application>

And the FXG file, assets/Chevron.fxg, is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<!-- http://blog.flexexamples.com/2010/10/10/displaying-an-fxg-file-in-a-spark-bitmapimage-control-in-flex-4/ -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008"
        xmlns:d="http://ns.adobe.com/fxg/2008/dt"
        xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
        version="2.0">
    <Path y="1" data="M 2 0 L 7 7 L 2 14 L 0 14 L 5 7 L 0 0 L 2 0 Z">
        <fill>
            <SolidColor color="#000000" alpha="0.6"/>
        </fill>
    </Path>
    <Path data="M 2 0 L 7 7 L 2 14 L 0 14 L 5 7 L 0 0 L 2 0 Z">
        <fill>
            <SolidColor color="#FF0000"/>
        </fill>
    </Path>
</Graphic>

View source is enabled in the following example.

Or you can set the BitmapImage control’s source property using MXML, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/10/displaying-an-fxg-file-in-a-spark-bitmapimage-control-in-flex-4/ -->
<s:Application name="Spark_BitmapImage_source_FXG_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"
        xmlns:assets="assets.*">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <s:BitmapImage id="bmpImg">
        <s:source>
            <assets:Chevron />
        </s:source>
    </s:BitmapImage>
 
</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.

 
]]> http://blog.flexexamples.com/2010/10/10/displaying-an-fxg-file-in-a-spark-bitmapimage-control-in-flex-4/feed/ 0 Using a bitmap image skin in a Spark Button control in Flex 4 http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/#comments Thu, 25 Mar 2010 00:41:41 +0000 Peter deHaan http://blog.flexexamples.com/?p=2636 The following example shows how you can use a series state-aware of bitmap images in a Spark Button control in Flex 4 by creating a custom skin and setting the BitmapImage source property to different images in the various button states.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ --> <s:Application name="Spark_Button_skinClass_BitmapImage_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">   <fx:Style> [...]]]> The following example shows how you can use a series state-aware of bitmap images in a Spark Button control in Flex 4 by creating a custom skin and setting the BitmapImage source property to different images in the various button states.

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/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_skinClass_BitmapImage_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Button#closeBtn {
            skinClass: ClassReference("skins.ImageButtonSkin");
        }
    </fx:Style>
 
    <s:Button id="closeBtn"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom Spark Button skin class, skins/ImageButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ -->
<s:SparkSkin name="ImageButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <s:BitmapImage source="@Embed('assets/images/close_button_up.png')"
            source.over="@Embed('assets/images/close_button_over.png')"
            source.down="@Embed('assets/images/close_button_down.png')"
            left="0" right="0" top="0" bottom="0" />
 
    <!-- layer 8: text -->
    <s:Label id="labelDisplay"
            textAlign="center"
            verticalAlign="middle"
            maxDisplayedLines="1"
            horizontalCenter="0" verticalCenter="1"
            left="10" right="10" top="2" bottom="2" />
 
</s:SparkSkin>

Icons copyright of famfamfam.com.

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/feed/ 16 Setting the corner radius on a Spark BitmapImage control in Flex 4 http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/ http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/#comments Mon, 08 Feb 2010 07:46:14 +0000 Peter deHaan http://blog.flexexamples.com/?p=2448 The following example shows how you can set the corner radius on a Spark BitmapImage control in Flex 4 by creating a mask with a corner radius (in this case a Spark BorderContainer container with the cornerRadius style set).

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/ --> <s:Application name="Spark_BitmapImage_cornerRadius_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:controlBarContent> <mx:Form> <mx:FormItem label="cornerRadius:"> [...]]]> The following example shows how you can set the corner radius on a Spark BitmapImage control in Flex 4 by creating a mask with a corner radius (in this case a Spark BorderContainer container with the cornerRadius style set).

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/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/ -->
<s:Application name="Spark_BitmapImage_cornerRadius_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="cornerRadius:">
                <s:HSlider id="sl"
                        minimum="0"
                        maximum="{bmpImg.height/2}" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:BitmapImage id="bmpImg"
            source="@Embed('assets/image1.jpg')"
            horizontalCenter="0" verticalCenter="0">
        <s:mask>
            <s:BorderContainer id="bmpMask"
                    cornerRadius="{sl.value}"
                    width="{bmpImg.width}" height="{bmpImg.height}" />
        </s:mask>
    </s:BitmapImage>
 
</s:Application>

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/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/ -->
<s:Application name="Spark_BitmapImage_cornerRadius_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.core.FlexGlobals;
            import mx.events.ResizeEvent;
 
            import spark.components.BorderContainer;
            import spark.components.HSlider;
            import spark.primitives.BitmapImage;
 
            [Embed("assets/image1.jpg")]
            protected const IMG:Class;
 
            protected var sl:HSlider;
            protected var bmpImg:BitmapImage;
            protected var bmpMask:BorderContainer;
 
            protected function init():void {
                var image:Object = new IMG();
 
                sl = new HSlider();
                sl.maximum = image.height / 2;
                sl.addEventListener(Event.CHANGE, sl_changeHandler);
 
                var frmItm:FormItem = new FormItem();
                frmItm.label = "cornerRadius:";
                frmItm.addElement(sl);
 
                var frm:Form = new Form();
                frm.addElement(frmItm);
 
                Application(FlexGlobals.topLevelApplication).controlBarContent = [frm];
 
                bmpMask = new BorderContainer();
                bmpMask.setStyle("cornerRadius", sl.value);
                bmpMask.width = image.width;
                bmpMask.height = image.height;
 
                bmpImg = new BitmapImage();
                bmpImg.source = image;
                bmpImg.mask = bmpMask;
                bmpImg.horizontalCenter = 0;
                bmpImg.verticalCenter = 0;
                addElement(bmpImg);
            }
 
            protected function sl_changeHandler(evt:Event):void {
                bmpMask.setStyle("cornerRadius", sl.value);
            }
        ]]>
    </fx:Script>
 
</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.

 
]]> http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/feed/ 4 Creating a simple image gallery using the Spark PopUpAnchor control in Flex 4 http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/#comments Sun, 07 Feb 2010 16:05:03 +0000 Peter deHaan http://blog.flexexamples.com/?p=2413 The following example shows how you can create a simple image gallery using the Spark PopUpAnchor control in Flex 4 using the PopUpAnchor, BitmapImage, and MX Image controls.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ --> <s:Application name="Spark_PopUpAnchor_gallery_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:HGroup horizontalCenter="0" top="20"> <!-- 1 --> <s:Group mouseDown="fullImg1.displayPopUp = true;"> <!-- embedded thumbnail [...]]]> The following example shows how you can create a simple image gallery using the Spark PopUpAnchor control in Flex 4 using the PopUpAnchor, BitmapImage, and MX Image controls.

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/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_gallery_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:HGroup horizontalCenter="0" top="20">
        <!-- 1 -->
        <s:Group mouseDown="fullImg1.displayPopUp = true;">
            <!-- embedded thumbnail image -->
            <s:BitmapImage id="thumbImg1"
                    source="@Embed('assets/fx_appicon-tn.gif')" />
            <s:PopUpAnchor id="fullImg1"
                    popUpHeightMatchesAnchorHeight="false"
                    width="100%" height="100%">
                <s:popUp>
                    <!-- dynamically loaded full image -->
                    <mx:Image source="assets/fx_appicon.jpg"
                            width="300" height="300"
                            mouseUp="fullImg1.displayPopUp = false;" />
                </s:popUp>
            </s:PopUpAnchor>
        </s:Group>
 
        <!-- 2 -->
        <s:Group mouseDown="fullImg2.displayPopUp = true;">
            <s:BitmapImage id="thumbImg2"
                    source="@Embed('assets/ai_appicon-tn.gif')" />
            <s:PopUpAnchor id="fullImg2"
                    popUpHeightMatchesAnchorHeight="false"
                    width="100%" height="100%">
                <s:popUp>
                    <mx:Image source="assets/ai_appicon.jpg"
                            width="300" height="300"
                            mouseUp="fullImg2.displayPopUp = false;" />
                </s:popUp>
            </s:PopUpAnchor>
        </s:Group>
 
        <!-- 3 -->
        <s:Group mouseDown="fullImg3.displayPopUp = true;">
            <s:BitmapImage id="thumbImg3"
                           source="@Embed('assets/fl_player_appicon-tn.gif')" />
            <s:PopUpAnchor id="fullImg3"
                           popUpHeightMatchesAnchorHeight="false"
                           width="100%" height="100%">
                <s:popUp>
                    <mx:Image source="assets/fl_player_appicon.jpg"
                              width="300" height="300"
                              mouseUp="fullImg3.displayPopUp = false;" />
                </s:popUp>
            </s:PopUpAnchor>
        </s:Group>
    </s:HGroup>
 
</s:Application>

View source is enabled in the following example.

Or you could convert the PopUpAnchor code into a custom component, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_gallery_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"
        xmlns:comps="comps.*">
 
    <s:HGroup horizontalCenter="0" top="20">
        <!-- 1 -->
        <comps:PopUpThumb id="thumb1"
                thumbnailImgClass="@Embed('assets/fx_appicon-tn.gif')"
                fullImgSrc="assets/fx_appicon.jpg" />
 
        <!-- 2 -->
        <comps:PopUpThumb id="thumb2"
                thumbnailImgClass="@Embed('assets/ai_appicon-tn.gif')"
                fullImgSrc="assets/ai_appicon.jpg" />
 
        <!-- 3 -->
        <comps:PopUpThumb id="thumb3"
                thumbnailImgClass="@Embed('assets/fl_player_appicon-tn.gif')"
                fullImgSrc="assets/fl_player_appicon.jpg" />
    </s:HGroup>
 
</s:Application>

And the custom PopUpThumb component, comps/PopUpThumb.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ -->
<s:Group name="PopUpThumb"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        mouseDown="fullImg.displayPopUp = true;">
 
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var thumbnailImgClass:Class;
 
            [Bindable]
            public var fullImgSrc:String;
        ]]>
    </fx:Script>
 
    <!-- embedded thumbnail image -->
    <s:BitmapImage id="thumbImg"
                   source="{thumbnailImgClass}" />
    <s:PopUpAnchor id="fullImg"
                   popUpHeightMatchesAnchorHeight="false"
                   width="100%" height="100%">
        <s:popUp>
            <!-- dynamically loaded full image -->
            <mx:Image source="{fullImgSrc}"
                      width="300" height="300"
                      mouseUp="fullImg.displayPopUp = false;" />
        </s:popUp>
    </s:PopUpAnchor>
 
</s:Group>

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.

 
]]> http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/feed/ 0 Setting the Y-axis transform position on a Spark BitmapImage control in Flex 4 http://blog.flexexamples.com/2009/11/20/setting-the-y-axis-transform-position-on-a-spark-bitmapimage-control-in-flex-4/ http://blog.flexexamples.com/2009/11/20/setting-the-y-axis-transform-position-on-a-spark-bitmapimage-control-in-flex-4/#comments Sat, 21 Nov 2009 03:13:49 +0000 Peter deHaan http://blog.flexexamples.com/?p=2225 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.

<?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" [...]]]> 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 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/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.

 
]]> http://blog.flexexamples.com/2009/11/20/setting-the-y-axis-transform-position-on-a-spark-bitmapimage-control-in-flex-4/feed/ 3 Displaying images in a Spark List control using a custom item renderer in Flex 4 http://blog.flexexamples.com/2009/09/29/displaying-images-in-a-spark-list-control-using-a-custom-item-renderer-in-flex-4/ http://blog.flexexamples.com/2009/09/29/displaying-images-in-a-spark-list-control-using-a-custom-item-renderer-in-flex-4/#comments Wed, 30 Sep 2009 03:52:20 +0000 Peter deHaan http://blog.flexexamples.com/?p=1938 The following example shows how you can create a simple, custom item renderer to display thumbnails in a Spark List control in Flex 4 by setting the itemRenderer property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/29/displaying-images-in-a-spark-list-control-using-a-custom-item-renderer-in-flex-4/ --> <s:Application name="Spark_List_itemRenderer_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">   <s:List id="lst" itemRenderer="skins.CustomItemRenderer" width="{lst.height}" horizontalCenter="0" verticalCenter="0" useVirtualLayout="false"> <s:layout> <s:VerticalLayout [...]]]> The following example shows how you can create a simple, custom item renderer to display thumbnails in a Spark List control in Flex 4 by setting the itemRenderer property.

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/2009/09/29/displaying-images-in-a-spark-list-control-using-a-custom-item-renderer-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:List id="lst"
            itemRenderer="skins.CustomItemRenderer"
            width="{lst.height}"
            horizontalCenter="0" verticalCenter="0"
            useVirtualLayout="false">
        <s:layout>
            <s:VerticalLayout gap="0" requestedRowCount="3" horizontalAlign="justify" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object name="Adobe Illustrator" src="@Embed('assets/ai_appicon-tn.gif')" />
                <fx:Object name="Adobe AIR" src="@Embed('assets/air_appicon-tn.gif')" />
                <fx:Object name="ColdFusion" src="@Embed('assets/cf_appicon-tn.gif')" />
                <fx:Object name="Dreamweaver" src="@Embed('assets/dw_appicon-tn.gif')" />
                <fx:Object name="Flash CS4" src="@Embed('assets/fl_appicon-tn.gif')" />
                <fx:Object name="Fireworks" src="@Embed('assets/fw_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom item renderer, skins/CustomItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/29/displaying-images-in-a-spark-list-control-using-a-custom-item-renderer-in-flex-4/ -->
<s:ItemRenderer name="CustomItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        focusEnabled="false">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret" />
        <s:State name="hoveredAndShowsCaret" />
        <s:State name="selectedAndShowsCaret" />
    </s:states>
 
    <s:BitmapImage source="{data.src}" />
 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor color="black"
                    alpha="0"
                    alpha.hovered="0.4"
                    alpha.selected="0.4"
                    alpha.selectedAndShowsCaret="0.4" />
        </s:fill>
    </s:Rect>
 
    <s:Label color="white"
            maxDisplayedLines="1"
            backgroundAlpha="0.3"
            backgroundColor="black"
            width="100%"
            bottom="0"
            paddingLeft="5" paddingRight="5"
            paddingTop="5" paddingBottom="5"
            includeIn="hovered,hoveredAndShowsCaret,selected,selectedAndShowsCaret">
        <s:text>{data.name}</s:text>
    </s:Label>
 
</s:ItemRenderer>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2009/09/29/displaying-images-in-a-spark-list-control-using-a-custom-item-renderer-in-flex-4/feed/ 8 Displaying images in a Spark List control in Flex 4 http://blog.flexexamples.com/2009/09/18/displaying-images-in-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2009/09/18/displaying-images-in-a-spark-list-control-in-flex-4/#comments Sat, 19 Sep 2009 01:00:57 +0000 Peter deHaan http://blog.flexexamples.com/?p=1890 The following example shows how you can display images automatically in a Spark List control in Flex 4 by setting the itemRenderer property to the DefaultComplexItemRenderer class.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/18/displaying-images-in-a-spark-list-control-in-flex-4/ --> <s:Application name="Spark_List_itemRenderer_DefaultComplexItemRenderer_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:List id="list" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" horizontalCenter="0" verticalCenter="0"> <s:layout> <s:HorizontalLayout requestedColumnCount="3" gap="0" /> [...]]]> The following example shows how you can display images automatically in a Spark List control in Flex 4 by setting the itemRenderer property to the DefaultComplexItemRenderer class.

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/2009/09/18/displaying-images-in-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_DefaultComplexItemRenderer_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:List id="list"
            itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout requestedColumnCount="3" gap="0" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('ai_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('cf_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fx_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

You can also declare the itemRenderer property using MXML, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/18/displaying-images-in-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_DefaultComplexItemRenderer_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"
        xmlns:skins="spark.skins.spark.*">
 
    <s:List id="list"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout requestedColumnCount="3" gap="0" />
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <skins:DefaultComplexItemRenderer />
            </fx:Component>
        </s:itemRenderer>
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('ai_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('cf_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fx_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

Or you can set the layout and itemRenderer properties in a custom skin file, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/18/displaying-images-in-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_DefaultComplexItemRenderer_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:List id="list"
            skinClass="skins.CustomListSkin"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('ai_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('cf_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('fx_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom skin class, skins/CustomListSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/18/displaying-images-in-a-spark-list-control-in-flex-4/ -->
<s:SparkSkin name="CustomListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="112" minHeight="112"
        alpha.disabled="0.5"
        blendMode="normal">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.List")]
    </fx:Metadata>
 
    <fx:Script>
        <![CDATA[
            /* Define the skin elements that should not be colorized.
               For list, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["scroller", "background"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
 
            override public function get contentItems():Array {
                return contentFill
            };
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    scroller.minViewportInset = 1;
                } else {
                    border.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    scroller.minViewportInset = 0;
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="{getStyle('borderColor')}"
                                alpha="{getStyle('borderAlpha')}"
                                weight="1"/>
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Defines the background appearance of the list-based component. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
        <s:fill>
            <!--- Defines the color of the background. The default color is 0xFFFFFF. -->
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
 
    <!--- The Scroller component to add scroll bars to the list. -->
    <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" focusEnabled="false">
        <!--- The container for the data items. -->
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">
            <s:layout>
                <s:HorizontalLayout requestedColumnCount="3" gap="0" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
 
</s:SparkSkin>

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.

 
]]> http://blog.flexexamples.com/2009/09/18/displaying-images-in-a-spark-list-control-in-flex-4/feed/ 2 Setting the depth on a Spark BitmapImage control in Flex 4 http://blog.flexexamples.com/2009/06/18/setting-the-depth-on-a-spark-bitmapimage-control-in-flex-4/ http://blog.flexexamples.com/2009/06/18/setting-the-depth-on-a-spark-bitmapimage-control-in-flex-4/#comments Fri, 19 Jun 2009 06:59:20 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/18/setting-the-depth-on-a-spark-bitmapimage-control-in-flex-4/ The following example shows how you can reorder a stack of Spark Bitmap controls in Flex 4 by setting the depth property (formerly the layer property).

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/18/setting-the-depth-on-a-spark-bitmapimage-control-in-flex-4/ --> <s:Application name="Spark_BitmapImage_depth_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">   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark";   s|Slider { liveDragging: true; } </fx:Style>   <mx:Form styleName="plain"> <mx:FormItem> <s:HSlider [...]]]> The following example shows how you can reorder a stack of Spark Bitmap controls in Flex 4 by setting the depth property (formerly the layer property).

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/2009/06/18/setting-the-depth-on-a-spark-bitmapimage-control-in-flex-4/ -->
<s:Application name="Spark_BitmapImage_depth_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Slider {
            liveDragging: true;
        }
    </fx:Style>
 
    <mx:Form styleName="plain">
        <mx:FormItem>
            <s:HSlider id="slider1" minimum="0" maximum="6" />
            <s:HSlider id="slider2" minimum="0" maximum="6" />
            <s:HSlider id="slider3" minimum="0" maximum="6" />
            <s:HSlider id="slider4" minimum="0" maximum="6" />
            <s:HSlider id="slider5" minimum="0" maximum="6" />
            <s:HSlider id="slider6" minimum="0" maximum="6" />
        </mx:FormItem>
    </mx:Form>
 
    <s:Group horizontalCenter="0" verticalCenter="0">
        <s:BitmapImage id="bitmapImg1"
                source="@Embed('assets/cf_appicon-tn.gif')"
                depth="{slider1.value}"
                x="0" y="0" />
        <s:BitmapImage id="bitmapImg2"
                source="@Embed('assets/fl_appicon-tn.gif')"
                depth="{slider2.value}"
                x="10" y="10" />
        <s:BitmapImage id="bitmapImg3"
                source="@Embed('assets/fl_player_appicon-tn.gif')"
                depth="{slider3.value}"
                x="20" y="20" />
        <s:BitmapImage id="bitmapImg4"
                source="@Embed('assets/fw_appicon-tn.gif')"
                depth="{slider4.value}"
                x="30" y="30" />
        <s:BitmapImage id="bitmapImg5"
                source="@Embed('assets/fx_appicon-tn.gif')"
                depth="{slider5.value}"
                x="40" y="40" />
        <s:BitmapImage id="bitmapImg6"
                source="@Embed('assets/lr_appicon-tn.gif')"
                depth="{slider6.value}"
                x="50" y="50" />
    </s:Group>
 
</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.

 
]]> http://blog.flexexamples.com/2009/06/18/setting-the-depth-on-a-spark-bitmapimage-control-in-flex-4/feed/ 1 Displaying images in a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2009/04/14/displaying-images-in-a-spark-dropdownlist-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/14/displaying-images-in-a-spark-dropdownlist-control-in-flex-gumbo/#comments Wed, 15 Apr 2009 02:52:16 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/14/displaying-images-in-a-spark-dropdownlist-control-in-flex-gumbo/ The following example shows how you can display images in a Spark DropDownList control in Flex 4 by creating a custom skin and setting the itemRenderer property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/14/displaying-images-in-a-spark-dropdownlist-control-in-flex-gumbo/ --> <s:Application name="Spark_DropDownList_itemRenderer_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:DropDownList id="dropDownList" labelField="label" requireSelection="true" skinClass="skins.CustomDropDownListSkin" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" horizontalCenter="0" top="20"> <s:dataProvider> <s:ArrayList> [...]]]> The following example shows how you can display images in a Spark DropDownList control in Flex 4 by creating a custom skin and setting the itemRenderer property.

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/2009/04/14/displaying-images-in-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_itemRenderer_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:DropDownList id="dropDownList"
            labelField="label"
            requireSelection="true"
            skinClass="skins.CustomDropDownListSkin"
            itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
            horizontalCenter="0"
            top="20">
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/cf_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

The custom skin, skins/CustomDropDownListSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/14/displaying-images-in-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Skin name="CustomDropDownListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5"> 
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.DropDownList")]
    ]]>
    </fx:Metadata> 
 
    <!--- The PopUpAnchor control that opens the drop-down list. -->
    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
            left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
            popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
 
        <!--- The drop down area of the skin. This includes borders, background colors, scrollers, and filters. -->
        <s:Group id="dropDown" maxHeight="134" minHeight="22" >
 
            <!-- drop shadow -->
            <s:RectangularDropShadow blurX="20" blurY="20" alpha="1.0" distance="5" 
                 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
 
            <!-- border -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x686868" weight="1"/>
                </s:stroke>
            </s:Rect>
 
            <!-- fill -->
            <!--- Defines the appearance of drop-down list's background fill. -->
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <!--- The color of the drop down's background fill. The default color is 0xFFFFFF. -->
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>
 
            <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1">
                <!--- The container for the data items in the drop-down list. -->
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                    </s:layout>
                </s:DataGroup>
            </s:Scroller>
        </s:Group>
    </s:PopUpAnchor>
 
    <!--- The anchor button used by the DropDownList. The default skin is DropDownListButtonSkin. -->
    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
            skinClass="spark.skins.spark.DropDownListButtonSkin" />  
 
    <s:BitmapImage source="{hostComponent.selectedItem.source}"
        left="10" right="30" top="10" bottom="10" />
 
</s:Skin>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2009/04/14/displaying-images-in-a-spark-dropdownlist-control-in-flex-gumbo/feed/ 11 Rotating an image along its x-axis, y-axis, and z-axis in Flex 4 and Flash Player 10 http://blog.flexexamples.com/2008/08/02/rotating-an-image-along-its-x-axis-y-axis-and-z-axis-in-flex-and-flash-player-10/ http://blog.flexexamples.com/2008/08/02/rotating-an-image-along-its-x-axis-y-axis-and-z-axis-in-flex-and-flash-player-10/#comments Sat, 02 Aug 2008 17:59:09 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/02/rotating-an-image-along-its-x-axis-y-axis-and-z-axis-in-flex-and-flash-player-10/ The following example shows how you can rotate a Flex Image control along its x-axis, y-axis, and z-axis using the new rotationX, rotationY, and rotationZ properties in Flash Player 10 and Flex 4.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/02/rotating-an-image-along-its-x-axis-y-axis-and-z-axis-in-flex-and-flash-player-10/ --> <s:Application name="Spark_BitmapImage_rotationX_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:controlBarContent> <mx:Form styleName="plain" backgroundAlpha="0.0"> <mx:FormItem label="rotationX:" direction="horizontal"> <s:HSlider id="rXSlider" minimum="-360" [...]]]> The following example shows how you can rotate a Flex Image control along its x-axis, y-axis, and z-axis using the new rotationX, rotationY, and rotationZ properties in Flash Player 10 and Flex 4.

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/08/02/rotating-an-image-along-its-x-axis-y-axis-and-z-axis-in-flex-and-flash-player-10/ -->
<s:Application name="Spark_BitmapImage_rotationX_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:controlBarContent>
        <mx:Form styleName="plain" backgroundAlpha="0.0">
            <mx:FormItem label="rotationX:" direction="horizontal">
                <s:HSlider id="rXSlider"
                        minimum="-360" maximum="360"
                        value="0"
                        snapInterval="2"
                        width="180"
                        change="img.rotationX = rXSlider.value;" />
                <s:Label text="{rXSlider.value}" width="30" />
            </mx:FormItem>
            <mx:FormItem label="rotationY:" direction="horizontal">
                <s:HSlider id="rYSlider"
                        minimum="-360" maximum="360"
                        value="0"
                        snapInterval="2"
                        width="180"
                        change="img.rotationY = rYSlider.value;" />
                <s:Label text="{rYSlider.value}" width="30" />
            </mx:FormItem>
            <mx:FormItem label="rotationZ:" direction="horizontal">
                <s:HSlider id="rZSlider"
                        minimum="-360" maximum="360"
                        value="0"
                        snapInterval="2"
                        width="180"
                        change="img.rotationZ = rZSlider.value;" />
                <s:Label text="{rZSlider.value}" width="30" />
            </mx:FormItem>
        </mx:Form>
        <s:Button label="Reset" click="reset();" height="100%" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            private function reset():void {
                rXSlider.value = 0;
                rYSlider.value = 0;
                rZSlider.value = 0;
                img.rotationX = 0;
                img.rotationY = 0;
                img.rotationZ = 0;
            }
        ]]>
    </fx:Script>
 
    <s:BitmapImage id="img"
            source="@Embed('assets/Fx.jpg')"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2008/08/02/rotating-an-image-along-its-x-axis-y-axis-and-z-axis-in-flex-and-flash-player-10/feed/ 10