MXML позиционирование групп

[djyamato]

Здравствуйте
Есть у меня FXG графика для элементов управления плеером
Подскажите, пожалуйста как мне расположить группы и кнопку в одной из них так чтобы не возникало неправильного расположения


Круглая кнопка должна быть посередине (по вертикали) серой полоски.
К тому же, эта серая полоска должна "лежать на красной линии"



Вот мой код

<!--  DISPLAY -->
	<s:Group id="displayGroup" width="100%" height="100%">
		<s:layout>
			<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
		</s:layout>
 
		<fxg:playBtnBIG verticalCenter="0" horizontalCenter="0" includeIn="pause_stop"/>
	</s:Group>
 
	<!-- CONTROLS -->
	<s:Group id="controls" width.pause_stop="100%" width.play="100%"
			 height.pause_stop="100%" height.play="100%">
		<s:layout>
			<s:VerticalLayout gap="0" verticalAlign="bottom"/>
		</s:layout>
 
		<!-- PLAYHEAD CONTROL полоска и круглая кнопка-->
		<s:Group id="playheadControls" width="100%">
			<com:PlayHead width="100%"/>
			<com:PlayHeadButton/>
		</s:Group>
 
		<!-- line -->
		<s:Group width="100%">
			<fxg:controlsUpLine_1px_test width="100%"/>
		</s:Group>
 
		<!-- PlayerControls -->
		<s:Group width="100%">
			<fxg:controlsBackground width="100%"/>
			<fxg:controlsInnerUpGreyLine_1px width="100%"/>
		</s:Group>	
	</s:Group>

Компонент PlayHead

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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:fxg="assets.fxg.*"
		 width="100%" 
		 height="100%"
		 xmlns:com="com.*">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:Group width="100%">
		<fxg:PlayHeadBack id="playHeadBackFXG" width="100%"/> <!-- FXG графика -->
		<fxg:PlayHeadProgress id="playHeadProgressFXG" width="60%" buttonMode="true"/> <!-- FXG графика полоски промотки ролика-->
	</s:Group>
</s:Group>

Кнопка PlayHeadButton

<?xml version="1.0" encoding="utf-8"?>
<s:Button 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:skins="skins.*"
		  xmlns:fxg="assets.fxg.*"
		  currentState="up" 
		  buttonMode="true">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
	</s:states>
</s:Button>

Скин кнопки

<?xml version="1.0" encoding="utf-8"?>
<s:Skin 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:fxg="assets.fxg.*">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("com.PlayHeadButton")]
	</fx:Metadata>
 
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="down" />
		<s:State name="over" />
		<s:State name="up" />
	</s:states>
 
	<!-- SkinParts
	name=iconDisplay, type=spark.primitives.BitmapImage, required=false
	name=labelDisplay, type=spark.core.IDisplayText, required=false
	-->
	<fx:Script>
		<![CDATA[
			override protected function createChildren():void
			{
				super.createChildren();
			}
 
		]]>
	</fx:Script>
 
	<fxg:PlayHeadBtnUp includeIn="up" width="100%" height="100%"/>
	<fxg:PlayHeadBtnOver includeIn="over,down" width="100%" height="100%"/>
</s:Skin>

Возможно, мне стоит перенести круглую кнопку в PlayHead компонент ?

[alatar]

Возьмите стандартный HSlider (если нужно дополнить, наследуйтесь от него) и скинируйте.

[djyamato]

и правда, что-то я заморочился