I am attempting to sking a panel and I created a simple graphic in AI and copied the Rect, Path, and Group information from the FXG and pasted it into a panel skin. It shows up fine, but the problem is that a white background shows up behind my drawing and looks weird. I want the title area to be transparents and only show the graphics I created. Any ideas on how to do that?
Here is what I have:
<!-- layer 0: title bar fill --> <!--- @private --> <s:Group y="-0.728027"> <s:Rect y="20.7876" width="400" height="19.9404" > <s:fill> <s:SolidColor color="#39b54a"/> </s:fill> </s:Rect> <s:Path winding="nonZero" data="M22.7651 0.847168L29.2446 13.9751 43.7314 16.0801 33.2485 26.2983 35.7231 40.728 22.7651 33.9155 9.80713 40.728 12.2817 26.2983 1.79883 16.0801 16.2861 13.9751 22.7651 0.847168Z" > <s:fill> <s:SolidColor color="#fff200"/> </s:fill> <s:stroke> <s:SolidColorStroke caps="none" weight="0.75" joints="miter" miterLimit="4"/> </s:stroke> </s:Path> </s:Group>
Its just a yellow star at the left end and a green bar (half the height of the star). Ugly, but just wanted to prove a concept. Problem I have is the a white background shows up behind the star and green background (which is half the height of the tite bar.
I found if you remove the color from the component background and then just readd them in the places that need it (content area, etc.) it does (in theory) work. However the outline of the component encompasses the title bar so the outline is over the top. Play with the idea of using the skinnable component instead.
Skinnable has promise for my idea