последовательность по нескольким изображениям - PullRequest
Новая
       55

последовательность по нескольким изображениям

0 голосов
/ 22 марта 2010

Я использую flex и у меня есть несколько изображений, которые мне нужно пролистать. Я могу добавить текст под каждым изображением. То, что я пытаюсь сделать, - это автоматически пролистывать эти изображения так, чтобы между каждым изображением и следующим на короткое время появлялся эффект исчезновения черного - наверняка вы уже видели подобные вещи раньше.

Мои вопросы:

  • должны ли эти изображения рассматриваться как состояния компонента или как? Я собирался пойти по этому пути, но исправления приветствуются
  • как получить эффект затухания черного между изображениями и следующим. Любые подсказки, пожалуйста

Обновление: нашел пример этого. В этом примере больше элементов, но идея та же: изображение исчезает, а другое изображение загружается.

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

1 Ответ

0 голосов
/ 22 марта 2010

Вы можете попробовать использовать 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 компоненте
  • Исчезать первый, исчезать в во-вторых, и загрузить следующее картинка в первом изображении и т. д.

Таким образом, вы получаете только один Контейнер (вместо одного на изображение плюс ViewStack) и 2 Изображения.
Также вам будет легче очистить их из памяти, если вам нужно.

...