image placed in the skin mxml displayed darkened

[sidneykelvin]

I created a skin mxml in Viewer for Flex and placed an image in the title bar. the image was found darkened.
Reference please found attached a clip of the display I get.

What have I done wrong?

Thanks in advance.

In the skin.mxml
........
                <!-- layer 3: text -->
                <!--- @copy spark.components.Panel#titleDisplay -->
    <s:HGroup>
     <s:BitmapImage id="panelIcon" source="@Embed(source='../../assets/images/cedd/logo.jpg')"
                                                                  left="5" width="40"/>
     <s:Label id="titleDisplay" maxDisplayedLines="1"
        left="9" right="36" top="1" bottom="0" minHeight="30"
        verticalAlign="middle" fontWeight="bold" />
    </s:HGroup>
.........

[RobertScheitlin__GISP · Accepted solution]

Sidney,

   Your panelIcon has to added to the colorize exclusions array:

/* Define the skin elements that should not be colorized.          For panel, border and title background are skinned, but the content area, background, border, and title text are not. */         static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup", "border", "panelIcon"];                      /* exclusions before Flex 4.5 for backwards-compatibility purposes */         static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup", "panelIcon"];

[sidneykelvin]

It works !
Thank you very much
😉

[RobertScheitlin__GISP]

Sidney,

  Don't forget the most important step, marking the post as answered (step 1 in the attached graphic).

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow these steps as shown in the below graphic: