Question

I have a flashlite3 application with navigation consisting of icons the user can browse left or right through infinitely.

The basic algorithm i’m using now works (and is adequate for this project) however, part of the solution depends on a duplicate of the array of icons. Depending on the number of items in the array, and/or the size of the element contents, this solution could become less efficient. I’m interested in a solution or algorithm(in any language) that could achieve the same thing while being scalable & efficient.

Heres a portion of relevant code in the setter function for mutating the ‘_selectedItem’ property, which:

1. Evaluates the current ‘_selectedItem’ and the new ‘_value’
2. Based on step 1 pop,unshifts right, or shift,pops left
3. Repeats step 2 until the icon matching the ‘_selectedItem’ is in the center of the array

This code runs using 3 arrays:

1. [static] Array of positions. There are 5 icons, 3 are visible at a time, so position 0 is off stage, position 1 is 1/3, position 2 is 1/2 ..
2. When instantiating the icons 2 arrays are created: _viewArray & _icons. The order of _viewArray mimics the order to be displayed and _icons is left alone and used for the loop condition checking

///Actionscript2///

    public function set selectedItem(value:Number)
    {
        var w=Stage.width;

        if(value > _icons.length-1)
        {
            value=0;
        }else if(value < 0)
        {
            value=_icons.length-1;
        }

        if(value > _selectedIndex)
        {
            while(_viewArray[Math.floor(_icons.length*.5)] != _icons[value])
            {
                var element;
                element=_viewArray.pop();
                _viewArray.unshift(element);
            }
        }else if(value < _selectedIndex)
        {
            while(_viewArray[Math.floor(_icons.length*.5)]!=_icons[value])
            {
                var element;
                element=_viewArray.shift();
                _viewArray.push(element);
            }           
        }




        for(var i:Number=0;i<_viewArray.length;i++)
        {
            if(i>=1 && i<= _icons.length-2)
            {
                _viewArray[i]._visible=true;
            }else
            {
                _viewArray[i]._visible=false;
            }
            Tweener.addTween(_viewArray[i],{_x:positions[i],_alpha:80,time:.5,transition:'elasticIn'})
        }


        Tweener.addTween(_icons[(_viewArray.length*.5)-1],{_alpha:100,time:.0,transition:'elasticIn'});
        Tweener.addTween(_selectedServiceIndicator,{_alpha:0,time:.3,transition:'elasticIn',onComplete:function() {Tweener.addTween(this,{_alpha:100,time:.2,transition:'elasticIn'});}});

        var eventObject:Object = {target:this, type:'SelectedItemChange'};
        eventObject.value=value;

        for(var key in _serviceData[value])
        eventObject[key]=_serviceData[value][key];

        dispatchEvent(eventObject);
        _selectedIndex=value;
    }

Answer 1

Why does each element of the _viewArray has to actually store the icon, rather than only the index into the _icons array? This way you only have the icons stored once, and _viewArray just stores their presentation order.