Вывод части изображения в компоненте

[Astraport]

Чтобы не плодить кучу картинок, решил все значки поместить на один длинный PNG (15 х 150) и выводить часть этого изображения в зависимости от данных, т. е. просто перемещать PNG размещая нужный значок напротив зоны видимости (15 х 15). Не получается спрятать остальные значки, они тоже выводятся. Как их спрятать?

<?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" width="15" height="15">
<fx:Script>
<![CDATA[
[Bindable] public var newY:int = 0;

]]>
</fx:Script>
<s:Image x="0" y="{newY}" smooth="true" source="@Embed('assets/signs.png')"/>
</s:Group>

<components:Sign newY="{signY}" width="15" height="15"/>

[Genzo]

Не проще ли на pure as3 написать "вырезатель" нужной картики, bitmapData & bitmap ,

[Astraport]

Да есть ещё как минимум 5 способов это сделать. Но хотелось бы знать как это сделать на Flex.

[Genzo]

Просто это будет очень рессурсоемко ,
а в вашем случае, вам нужно двигать не s:Image , а его source

[Astraport]

Я вот сейчас сделал так:

protected function creationCompleteHandler(event:FlexEvent):void
{
img.mask = mask as DisplayObject;
}

]]>
</fx:Script>
<s:Image x="0" y="{newY}" smooth="true" source="@Embed('assets/signs-expert.png')" id="img"/>
<s:Image x="0" y="0" source="@Embed('assets/mask.png')" id="mask"/>

Где mask - это пустая png размерами 15 на 15. Вроде работает, но насколько это ресурсоемко?

[Genzo]

тогда уж проще было :
var shape:Shape = new Shape();
shape.graphics.drawRect(0,0,15,15);
img.mask = shape;

Ресурсоемко в плане того, что у вас создается > 3 DisplayObject'ов и т.п.

Можно сделать функцию у какого-нибудь менеджера которая будет возвращать вам нужный объект.



<s:Image smooth="true" source="tilemanage.getTile(1)" id="img"/>
private var tilemanage:TileManager;
protected function creationCompleteHandler(event:FlexEvent):void
{
tilemanage = new TileManager('assets/signs-expert.png');
}
//TileManager:


Пусть TileManager грузит основную png, из ее BitmapData создает сколько нужно маленький объектов и возвращает.

[Astraport]

С TileManager очень интересно. Спс.
А вот со спрайтами и шейпами я пробовал - вообще ничего не выводит. Видимо их нужно помещать на сцену, а в флексе это опять же не просто.

[Genzo]

а в флексе это опять же не просто.
Почему?
<mx:UIComponent id="place"/>
private function addToPlace(data:DisplayObject):void
{
place.addChild(data);
}

[alatar]

Да есть ещё как минимум 5 способов это сделать. Но хотелось бы знать как это сделать на Flex.
У вас какое-то странное понимание, что такое Flex.

[Astraport]

У вас какое-то странное понимание, что такое Flex
Возможно, но тогда это бы звучало немного длиннее:
"Но хотелось бы знать как это сделать с использованием MXML компонентов с минимальным участием as3."

[alatar]

Стандартными средствами Image можно сделать только для первого тайла. Или запихать таки в Group картинку и обрезать ее самой группой установив clipAndEnableScrolling (или на картинку scrollRect нацепить). Это если совсем без AS3. А так вариантов куча. Если упираться в Image (зачем вам, кстати, Image? BitmapImage за глаза хватит), можно, например, написать contentLoader который вернет нужную картинку. Можно залить картинкой с матрицей квадрат в graphics той Group, что вы уже создали (Group там тоже избыточен). И т.д.

[Astraport]

Ну вот и ответ который я ждал с самого начала:)

Кстати, а нельзя подробнее в каких случаях Image лучше использовать чем BitmapImage? Ну второй менее ресурсоемок, свойств у него меньше, но в каких типичных случаях он не может заменить Image?

[alatar]

1. Когда необходимо отображать прелоадер.
2. Когда нужна рамка для картинки.