s:Button hitArea

$mival · 18.02.2011, 01:41

Привет.
Так сложились звёзды, что пришлось заюзать спарк компоненты.
Нужен hitArea дабы кнопка не срабатывала при наведении на встроенные в PNG фильтры (предыдущая тема об этом)

не нашёл ни одного рабочего примера в нэте, у меня этот хитареа не работает
проект вложен

вообще я бы хотел вынести потом хит кнопку в CSS

Код AS3:

public class FAButton extends Button
{
	[Embed(source='img/bt_hit.png')]
	public var areaBitmap:Class;
 
	public function FAButton()
	{
		super();
		buttonMode=true;
		hitArea = getArea();
 
	}
 
	private function getArea():Sprite
	{
		var sp:Sprite = new Sprite();
		var bt:Bitmap = new areaBitmap();
		sp.addChild(bt);
		sp.mouseEnabled = false;
		sp.mouseChildren = false;
 
		return sp;
	}
}

alatar · 18.02.2011, 02:30

В скине сделайте rect, установите ему top/bottom/left/right= "-сколько там вам надо" и сделайте ему заливку вашей картинкой. И не надо насиловать сам компонент, в вашем случае необходимости в этом нет.

$mival · 18.02.2011, 03:35

а смысл Rect заливки? мне не нужно обрезать тень мне нужно чтоб она не реагировала на мышку.
грубо говоря центр кнопки активен, края - нет.

и еще бы желательно чтоб эти края не учитывались при просчете Layout, что-то наподобие includeLayout=false только для этой крайней области.

// предыдущий вариант закоменчен

Код AS3:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>
 
	<fx:Metadata>
		[HostComponent("spark.components.Button")]
	</fx:Metadata>
	<s:BorderContainer width="121" height="43" backgroundAlpha="0" borderVisible="false" includeIn="up, disabled">
		<s:Rect left="-7" top="-6" right="-7" bottom="-10" >
			<s:fill>
				<s:BitmapFill source="{hostComponent.getStyle('upSkin')}"/>
			</s:fill>
		</s:Rect>
	</s:BorderContainer>
	<s:BorderContainer width="121" height="43" backgroundAlpha="0" borderVisible="false" includeIn="over">
		<s:Rect left="-7" top="-6" right="-7" bottom="-10" >
			<s:fill>
				<s:BitmapFill source="{hostComponent.getStyle('overSkin')}"/>
			</s:fill>
		</s:Rect>
	</s:BorderContainer>
	<s:BorderContainer width="121" height="43" backgroundAlpha="0" borderVisible="false" includeIn="down">
		<s:Rect left="-7" top="-6" right="-7" bottom="-10" >
			<s:fill>
				<s:BitmapFill source="{hostComponent.getStyle('downSkin')}" />
			</s:fill>
		</s:Rect>
	</s:BorderContainer>
	<!--
	<s:BitmapImage source="{hostComponent.getStyle('upSkin')}" includeIn="up, disabled" />
	<s:BitmapImage source="{hostComponent.getStyle('overSkin')}" includeIn="over" />
	<s:BitmapImage source="{hostComponent.getStyle('downSkin')}" includeIn="down" />
	-->
	<s:Label id="labelDisplay" textAlign="center" verticalAlign="middle" maxDisplayedLines="1"
		horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2" />
</s:SparkSkin>

alatar · 18.02.2011, 04:08

Вместо вот этого всего, просто напишите:

Код AS3:

<s:Rect left="-7" top="-6" right="-7" bottom="-10" >
	<s:fill>
		<s:BitmapFill source.up="{hostComponent.getStyle('upSkin')}"
				source.up="{hostComponent.getStyle('overSkin')
				source.up="{hostComponent.getStyle('downSkin')/>
	</s:fill>
</s:Rect>

$mival · 18.02.2011, 13:19

я кстати так и делал по началу, source.over, source.down тупо не работают, видно только состояние UP.
но даже по ап видно что ничего в принципе не изменилось, меняется размер кнопки, что недопустимо для нас (бьётся однопиксельная обводка), а на свечение вокруг кнопки все равно реагирует

Код AS3:

<s:Rect left="-7" top="-6" right="-7" bottom="-10" >
	<s:fill>
		<s:BitmapFill source.up="{hostComponent.getStyle('upSkin')}"
				  source.over="{hostComponent.getStyle('overSkin')"
				  source.down="{hostComponent.getStyle('downSkin')"/>
	</s:fill>
</s:Rect>

alatar · 18.02.2011, 14:43

Тогда так:

Код AS3:

<s:Group left="-7" top="-6" right="-7" bottom="-10" mouseChildern="false" mouseEnabled="false" includeIn="up, disabled">
	<s:Rect left="0" top="0" right="0" bottom="0" >
		<s:fill>
			<s:BitmapFill source="{hostComponent.getStyle('upSkin')}"/>
		</s:fill>
	</s:Rect>
</s:Group>
...

Цитата:

бьётся однопиксельная обводка

Обводка тоже в скине делается. Как сделаете так и будет.

$mival · 18.02.2011, 18:24

теперь мигает быстро при наведении
в общем это все к чему? от перестановки слагаемых результат не меняется
это как было тупо искажение картинки так и осталось, края кнопки всё равно доступны

alatar · 18.02.2011, 19:54

Да, обойтись только изменением скина не получится. Скин кнопки не реагирует на мышь. Надо переписать защищенный метод mouseEventHandler и проверять координаты мыши, в зависимости от результат вызывать super.mouseEventHandler(event);

$mival · 18.02.2011, 22:58

так почему все же не работает hitArea?

alatar · 19.02.2011, 16:03

Почему не работает? Работает.

Код AS3:

package alatar.components
{
	import flash.display.Sprite;
 
	import mx.core.IVisualElement;
 
	import spark.components.Button;
 
	public class HitAreaButton extends Button
	{
		[SkinPart(required="true")]
		public var buttonHitArea:IVisualElement;
 
 
		public function HitAreaButton()
		{
			super();
		}
 
		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);
 
			if (instance == buttonHitArea)
			{
				Sprite(buttonHitArea).mouseEnabled = false;
				hitArea = Sprite(buttonHitArea);
			}
		}
 
		override protected function partRemoved(partName:String, instance:Object):void
		{
			super.partRemoved(partName, instance);
 
			if (instance == buttonHitArea)
			{
				hitArea = null;
			}
		}
	}
}

Код AS3:

<?xml version="1.0" encoding="utf-8"?>
 
<s:SparkSkin 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">
 
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
 
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <s:Group top="-10" bottom="-10" left="-10" right="-10">
		<s:Rect top="0" bottom="0" left="0" right="0">
			<s:fill>
				<s:SolidColor color="0xFF0000"/>
			</s:fill>
		</s:Rect>
	</s:Group>
 
    <s:Group id="buttonHitArea" top="0" bottom="0" left="0" right="0">
		<s:Rect top="0" bottom="0" left="0" right="0">
			<s:fill>
				<s:SolidColor color="0x00FF00" color.over="0x0000FF" color.down="0xFFFF00"/>
			</s:fill>
		</s:Rect>
	</s:Group>
 
    <!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>
 
</s:SparkSkin>