如何更换flex 3中的图像?

时间:2010-11-26 05:41:25

标签: flex flex3

在我的flex应用程序中,我维护了5张图像。当用户点击“下一步”按钮时,它应显示一个图像,表示“image1”。如果再次单击该按钮,则image1应替换为image2,依此类推。我基本上遵循'image.visible'方法。但图像并排显示。我认为这不是正确的程序。还有其他选择提前致谢


这是我的代码。我将所有图像和按钮保存在mx:panel中。即使我使用了不起作用的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>

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

将图像的x和y位置指定为相同,并以它们的可见性进行游戏。它肯定会起作用。

答案 2 :(得分:0)

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>