как заменить изображения в flex 3?

Question

В моем приложении Flex я поддерживаю 5 изображений. Когда пользователь нажимает кнопку «Далее», он должен отображать одно изображение с именем «изображение1». Если эта кнопка нажата снова, тогда image1 должен заменить на image2 и так далее. Я в основном следую методу image.visible. Но изображения отображаются рядом. Я думаю, что это не правильная процедура. Любая альтернатива? Заранее спасибо

---

вот мой код. Я сохранил все свои изображения и кнопки на панели mx :. Даже я использовал x и y позиции, которые не работают.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel 
title = 'Learn and Test your Knowledge'
height = '80%'
paddingBottom = '10' paddingTop = '10' 
paddingLeft = '10' paddingRight = '10' 
borderAlpha='0.20'    fontFamily="Verdana" fontSize="15" color="#F30C32"  backgroundImage="@Embed(source='../images/lad.jpg')" width="413" x="139">
<mx:Script>

    <![CDATA[
 public function nextEvent():void
      {
      // here i should write next button code
      }

    ]]>
</mx:Script>

<mx:Image source="../images/image1.jpg" visible="true" id="image1" />

<mx:Image source="../images/image3.jpg" visible="true" id="image2"/>
<mx:Image source="../images/image3.jpg" visible="true" id="image3"/>

<mx:Button id="next"  visible="false" click="nextEvent()">

</mx:Button>

Answer 1

Лучший способ - использовать только один компонент изображения, если вы когда-либо показываете только одно изображение. Вы можете создать массив или вектор со встроенными изображениями и ссылками для изменения свойства источника в компоненте изображения. Вот пример: (код ниже будет работать с любым макетом / контейнером)

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Image id="image" click="imageClick()" source="{new images[0]()}" />

    <mx:Script>
        <![CDATA[
            [Embed(source="assets/1.png")]
            private var image1:Class;

            [Embed(source="assets/2.png")]
            private var image2:Class;

            [Embed(source="assets/3.png")]
            private var image3:Class;

            private var images:Array = [image1, image2, image3];

            private var imageIndex:uint = 0;

            protected function imageClick():void
            {
                imageIndex++;
                if(imageIndex == images.length) imageIndex = 0;

                image.source = new images[imageIndex]();
            }

        ]]>
    </mx:Script>          
</mx:Canvas>

Answer 2

ViewStack - мой вариант, он очень хорошо подходит для этого случая.За раз он показывает только один компонент, для следующего действия он автоматически переопределит предыдущее содержимое своим новым компонентом.

<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

        <mx:Canvas id="one" click="myViewStack.selectedChild=two;">
            <mx:Image source="assets/1.png" />
        </mx:Canvas>

        <mx:Canvas id="two" click="myViewStack.selectedChild=three;">
            <mx:Image source="assets/2.png" />
        </mx:Canvas>

        <mx:Canvas id="three" click="myViewStack.selectedChild=four;">
            <mx:Image source="assets/3.png" />
        </mx:Canvas>

        <mx:Canvas id="four" click="myViewStack.selectedChild=five;">
            <mx:Image source="assets/4.png" />
        </mx:Canvas>

        <mx:Canvas id="five" click="myViewStack.selectedChild=one;">
            <mx:Image source="assets/5.png" />
        </mx:Canvas>

    </mx:ViewStack>

Answer 3

Укажите положение х и у изображений как одинаковое и поэкспериментируйте с их видимостью. Это точно сработает.