iOS 7 action bar look in flex mobile application - ios

Question

How to get iOS 7 action bar look in flex mobile application, I want my action bar to be completely flat and semi transparent too, I have seen few posts; those talks about making action bar flat by custom skin but no one talks about transparency.... any help or point to right direction would be greatly appreciated....

Answer 1

All you need to do is set the alpha property on your custom skin:
From Adobe's help documentation:
I added a transparent fill to the button's background/border <s:Rect>
<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning/GlobalVariableAccessorExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
public var myLabelString:String = "Hello World";
</fx:Script>
<s:Button skinClass="mySkins.GlobalVariableAccessorSkin"/>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning\mySkins\GlobalVariableAccessorSkin.mxml -->
<s:Skin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<fx:Script>
import mx.core.FlexGlobals;
[Bindable]
private var localString:String = FlexGlobals.topLevelApplication.myLabelString;
</fx:Script>
<!-- Specify one state for each SkinState metadata in the host component's class -->
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:Rect
left="0" right="0"
top="0" bottom="0"
width="69" height="20"
radiusX="2" radiusY="2">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1"/>
</s:stroke>
<!--
This section added to demonstrate
-->
<s:fill>
<s:SolidColor color="0x999999" alpha="0.5"/>
</s:fill>
<!-- ----------------------- -->
</s:Rect>
<s:Label id="labelDisplay"
text="{localString}"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:Skin>