Блог

Главная - Вопросы по программированию - mx: изображение, используемое в качестве средства отображения элементов для s: List, мигает при каждой прокрутке списка (прокручивается jquery

mx: изображение, используемое в качестве средства отображения элементов для s: List, мигает при каждой прокрутке списка (прокручивается jquery

#flex4 #scrollable

#flex4 #прокручиваемый

Вопрос:

У меня есть что-то вроде этого:

 <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">

    <fx:Declarations>

        <s:ArrayCollection id="pics"> 
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p01.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m01.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g01.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p02.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m02.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g02.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p03.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m03.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g03.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p04.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m04.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g04.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p05.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m05.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g05.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p06.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m06.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g06.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p07.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m07.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g07.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p08.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m08.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g08.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p09.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m09.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g09.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p10.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m10.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g10.jpg"/>
        </s:ArrayCollection>

    </fx:Declarations>

    <fx:Script>
        <![CDATA[
        import spark.layouts.HorizontalLayout;

        private var thumbsByPage:uint = 3;
        private var actualPage:uint = 0;
        private var firstPage:uint = 0;
        private var lastPage:uint = 0;

        private function init():void {

            thumbs.scroller.setStyle("verticalScrollPolicy", "none");
            thumbs.scroller.setStyle("horizontalScrollPolicy", "none");

            thumbs.selectedIndex = 0;
            actualPage = 0;
            lastPage = Math.ceil(thumbs.dataProvider.length / thumbsByPage);

        }

        public function get hasNext():Boolean {

            return actualPage < lastPage;

        }

        public function get hasPrev():Boolean {

            return actualPage > firstPage;

        }

        private function next():void {

            if (hasNext) {

                actualPage  ;
                scrollIt();

            }

        }

        private function prev():void {

            if (hasPrev) {

                actualPage--;
                scrollIt();

            }

        }

        private function scrollIt():void {

            var layout:HorizontalLayout = thumbs.layout as HorizontalLayout;
            thumbs.dataGroup.horizontalScrollPosition = actualPage * (thumbs.width   layout.gap);

        }
        ]]>
    </fx:Script>

    <s:HGroup gap="10" verticalAlign="middle">

        <s:Button click="prev()">amp;<</s:Button>

        <s:List id="thumbs" width="160" height="38" contentBackgroundAlpha="0" borderVisible="false" dataProvider="{pics}">

            <s:layout>
                <s:HorizontalLayout gap="5"/>
            </s:layout>

            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer autoDrawBackground="false" useHandCursor="true" buttonMode="true">

                        <s:states>
                            <s:State name="normal" />
                            <s:State name="hovered" />
                            <s:State name="selected" />
                        </s:states>

                        <s:BorderContainer width="50" height="38" backgroundColor="0xffffff">
                            <mx:Image width="50" height="38" source="{data.p}" />
                        </s:BorderContainer>

                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>

        </s:List>

        <s:Button click="next()">amp;></s:Button>

    </s:HGroup>

</s:Application>

итак, каждый раз, когда список прокручивается, миниатюры мигают, и я думаю, это потому, что они загружают свои изображения каждый раз, когда список обновляется.

Что мне нужно, так это просто http://flowplayer.org/tools/scrollable/index.html …

Комментарии:

1. хорошо, я нашел это: flexer.info/2008/05/29/image-gallery-component-imagerail но все еще хочу знать, как избежать мигания.

Ответ №1:

Вы можете использовать наложенное изображение от Ely Greenfield (источники доступны из контекстного меню).

Комментарии:

1. о, это хороший образец! значит, чтобы решить эту проблему, я должен кэшировать изображения самостоятельно?

2. Компонент Ely уже кэширует изображения. Просто загрузите исходные тексты и используйте Superimage .

3. да, я только что это увидел, но как насчет небольшого объяснения того, как это работает для реализации в приведенном выше коде?

4. Просто замените свое mx:Image на Superimage . Я считаю, что оно должно нормально работать из коробки.

Ответ №2:

Хорошо … другое решение (благодаря http://www.tink.ws/blog/non-embedded-assets-spark-bitmapimage/):

 <?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">

    <fx:Declarations>

        <s:ArrayCollection id="pics"> 
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p01.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m01.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g01.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p02.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m02.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g02.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p03.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m03.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g03.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p04.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m04.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g04.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p05.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m05.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g05.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p06.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m06.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g06.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p07.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m07.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g07.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p08.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m08.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g08.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p09.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m09.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g09.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p10.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m10.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g10.jpg"/>
        </s:ArrayCollection>

    </fx:Declarations>

    <fx:Script>
        <![CDATA[
        import spark.layouts.HorizontalLayout;

        private var thumbsByPage:uint = 3;
        private var actualPage:uint = 0;
        private var firstPage:uint = 0;
        private var lastPage:uint = 0;

        private function init():void {

            thumbs.scroller.setStyle("verticalScrollPolicy", "none");
            thumbs.scroller.setStyle("horizontalScrollPolicy", "none");

            thumbs.selectedIndex = 0;
            actualPage = 0;
            lastPage = Math.ceil(thumbs.dataProvider.length / thumbsByPage);

        }

        public function get hasNext():Boolean {

            return actualPage < lastPage;

        }

        public function get hasPrev():Boolean {

            return actualPage > firstPage;

        }

        private function next():void {

            if (hasNext) {

                actualPage  ;
                scrollIt();

            }

        }

        private function prev():void {

            if (hasPrev) {

                actualPage--;
                scrollIt();

            }

        }

        private function scrollIt():void {

            var layout:HorizontalLayout = thumbs.layout as HorizontalLayout;
            thumbs.dataGroup.horizontalScrollPosition = actualPage * (thumbs.width   layout.gap);

        }
        ]]>
    </fx:Script>

    <s:HGroup gap="10" verticalAlign="middle">

        <s:Button click="prev()">amp;<</s:Button>

        <s:List id="thumbs" width="160" height="38" contentBackgroundAlpha="0" borderVisible="false" dataProvider="{pics}">

            <s:layout>
                <s:HorizontalLayout gap="5"/>
            </s:layout>

            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer autoDrawBackground="false" useHandCursor="true" buttonMode="true" creationComplete="loader.load(data.p);">

                        <s:states>
                            <s:State name="normal" />
                            <s:State name="hovered" />
                            <s:State name="selected" />
                        </s:states>

                        <s:BorderContainer width="50" height="38" backgroundColor="0xffffff">
                            <mx:SWFLoader id="loader" complete="thumb.source=loader.content" includeInLayout="false" visible="false"/>
                            <s:BitmapImage id="thumb" width="50" height="38"/>
                        </s:BorderContainer>

                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>

        </s:List>

        <s:Button click="next()">amp;></s:Button>

    </s:HGroup>

</s:Application>

Обновить:

Вот он, мой компонент: Imagen…

 <?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer backgroundColor="0xffffff"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[

        import mx.events.*;
        import flash.events.*;
        import flash.display.*;

        private var _url:String;
        private var cache:Object;

        public function set url(v:String):void {

            _url = v;
            load();

        }

        public function get url():String {

            return _url;

        }

        private function load():void {

            try {

                if (cache[_url] != null) {

                    foto.source = cache[_url] as BitmapData;

                } else {

                    loader.load(_url);

                }

            } catch (error:Error) { };

        }

        private function init(event:FlexEvent):void {

            cache = new Object();
            load();

        }

        private function completeHandler(event:Event):void {

            cache[_url] = (loader.content as Bitmap).bitmapData;
            foto.source = loader.content;

        }

        private function ioErrorHandler(event:IOErrorEvent):void {}

        private function httpStatusHandler(event:HTTPStatusEvent):void {}
        ]]>
    </fx:Script>

    <mx:SWFLoader id="loader" includeInLayout="false" visible="false" creationComplete="init(event)" complete="completeHandler(event)" ioError="ioErrorHandler(event)" httpStatus="httpStatusHandler(event)" />
    <s:BitmapImage id="foto" width="100%" height="100%"/>

</s:BorderContainer>

возможно, это могло бы кому-то помочь… может быть, когда-нибудь я достигну 1000 очков репутации с этим… возможно, я закончу этот гибкий проект… не знаю…