Question

我正在使用flex并且有一些我需要排序的图像。我可以在每张图片下添加一些文字。我正在尝试做的是自动对这些图像进行排序，以便在每个图像和下一个图像之间短暂出现黑色褪色效果 - 确保您之前已经看到过这种情况。

我的问题是：

这些图像应该被视为组件的状态还是什么？我打算这样做，但欢迎更正
如何在图像和下一个图像之间获得黑色褪色效果。请提供任何线索

更新：找到了一个例子。这个例子有更多的元素，但想法是相同的，图像淡出，另一个图像加载。

http://www.lifeblue.com/flash/lb_banner.swf

Answer 1

您可以尝试使用ViewStack和Timer来迭代其子级。只需在它们上添加淡入/淡出效果，您就可以获得所需的内容这样的事情：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="black" creationComplete="creationCompleteHandler">

    <mx:Script>
        <![CDATA[
            private var timer:Timer;

            private function creationCompleteHandler():void
            {
                timer = new Timer( 2000 );
                timer.addEventListener( TimerEvent.TIMER, timerHandler );
                timer.start();
            }

            private function timerHandler( e:TimerEvent ):void
            {
                if( vs.selectedIndex == vs.getChildren().length - 1 )
                    vs.selectedIndex = 0;
                else
                    vs.selectedIndex++;
            }
        ]]>
    </mx:Script>

    <mx:Fade id="fadeIn"  alphaFrom="0" alphaTo="1" duration="500" effectEnd="timer.start();"/>
    <mx:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="500" effectEnd="timer.stop();"/>

    <mx:ViewStack id="vs">
        <mx:Canvas showEffect="fadeIn" hideEffect="fadeOut">
            <mx:Image source="picture1.jpg"/>
        </mx:Canvas>
        <mx:Canvas showEffect="fadeIn" hideEffect="fadeOut">
            <mx:Image source="picture2.jpg"/>
        </mx:Canvas>
        <mx:Canvas showEffect="fadeIn" hideEffect="fadeOut">
            <mx:Image source="picture3.jpg"/>
        </mx:Canvas>
    </mx:ViewStack>

</mx:Application>

请注意，此代码不是最优化的代码。最好的方法是创建一个黑色背景和2 Image个组件的自定义组件。

设置两者的alpha属性他们到0
在第一张图片中加载图片，然后发挥你的淡出效果
开始加载以下图片在第二个Image组件
淡出第一个，淡出第二，加载以下内容图片中的第一张图片等

这样你只有一个Container（而不是每张图片加一个ViewStack）和2个图像如果需要，还可以更容易地从内存中清除它们。

通过几个图像排序

1 个答案: