TweenMax, псевдо 3D. Делаем карусель из картинок (мини фотоальбом). Трафик!

Делаем карусель из картинок на Flex 3 используя TweenMax. ActionScript Project mini photoalbum.

Сделаем мини фотоальбом в виде карусели, с центральной картинкой посередине. Она у нас будет текущей и естественно самой большой. Далее от нее в пространство будут уходить остальные картинки, пропорционально уменьшенные. Располагать их будем по две и их количество будет нечетное, поскольку центральная картинка одна (это уже разные варианты задачи).

Создадим Flex ActionScript Project, главный файл назовем index, он у нас будет расширением Sprite.
Поскольку для движения будем использовать TweenMax, сначала необходимо скачать этот пакет и установить в папке нашего приложения - see TweenMax.
Установим начальные параметры swf:

...[SWF(backgroundColor = 0xFFFFFF, frameRate='30', width='466', height='320')]...

цвет, количество кадров в секунду, ширину и высоту. Ширина рассчитывается как сумма ширины центральной картинки и всех уменьшенных, разделенных на некоторую константу, высота соответственно. Также создадим Sprite, который будет содержать все картинки, его размеры будут соответствовать размерам приложения.

...
            mainSprite.graphics.beginFill(0XFFFFFF);
            mainSprite.graphics.lineStyle(2)
            mainSprite.graphics.drawRect(0, 0, stageWidth, stageHeight);
            mainSprite.graphics.endFill();
            addChild(mainSprite);
...

Рассчитывая размеры приложения создадим объекты, в которых будут содержаться данные о загружаемых картинках и запишем их в массив.
...
                var imObject:Object = new Object();
                imObject.imWidth = iWidth;
                imObject.imHeight = iHeight;
                imObject.posX = 0;
                imObject.posY = 5;
                imObject.scaleX = scaleArray[i] //массив, содержащий уменьшение по X
                imObject.scaleY = scaleArray[i]//массив, содержащий уменьшение по Y
                imObject.url = imArray[i];
                imObject.displayImage = null;
                imObject.index = i;
                imCollection.push(imObject);
...

Далее инвертируем массив с объектами картинок и добавим их в главный спрайт - mainSprite. Для загрузки картинок будем использовать класс ImageLoader, его код можно найти в source.

На каждый добавляемый объект повесим событие на клик мышкой. Функция, обрабатывающая это событие будет определять в какую сторону поворачивать карусель и надо ли это делать (не надо если нажали на центральную картину). Будем крутить влево, при нечетном индексе нажатой картинки, и направо - четном.
Часть кода для вращения вправо:
...
            if(currentIndex != imCollection.length-1)
            {
                if(currentIndex%2 == 0)
                {
                    //крутим по часовой стрелке
                    //рассчитываем количество нужных прокрутов (на один больше, так как сначала будет запущена функция поворота, которая уменьшит индекс)
                    if(currentIndex < (imCollection.length-4) )
                        intervalCount = ((imCollection.length-1)/2) - (currentIndex/2);
                                   
                    if(currentIndex == 0)
                        intervalCount = ((imCollection.length-1)/2);
                                       
                    rightTurn();
                    if(intervalCount > 0 && goTurn == false)
                    {
                        goTurn = true;
                        intervalIndex = flash.utils.setInterval(rightTurn, 300)
                    }
                }
...

Функция для поворота вправо. Для перемещения объектов используем TweenMax, вообще тут можно много пофантазировать и получить интересные результаты разного движения картинок.
...
            //поворот направо
            var tempItemsIndexes:Array = new Array;
            var tempItems:Array = new Array;
            var originalArray:Array = new Array;
           
            for(var i:int=0;i
            {
                originalArray.push(imCollection[i]);
                if(i%2 == 0)
                {
                    if(i != (imCollection.length-1) )
                    {
                        tempItemsIndexes.push( i+2 );
                    }else
                    {
                        tempItemsIndexes.push( i-1 );
                    }
                }
               
                if(i%2 == 1)
                {
                    if( i != 1)
                    {
                        tempItemsIndexes.push( i-2 );
                    }else
                    {
                        tempItemsIndexes.push( i-1 );
                    }
                }
               
                tempItems.push(imCollection[tempItemsIndexes[i]]);
                //движение при помощи TweenMax
                gs.TweenMax.allTo([imCollection[i].displayImage], 1, {x:tempItems[i].posX, y:tempItems[i].posY, scaleX:scaleArray[tempItemsIndexes[i]], scaleY:scaleArray[tempItemsIndexes[i]]});
                //gs.TweenMax.allTo([imCollection[i].displayImage], 1, {x:tempItems[i].posX, y:tempItems[i].posY, scaleX:scaleArray[tempItemsIndexes[i]], scaleY:scaleArray[tempItemsIndexes[i]], bezier:[{x:150, y:170}]});

            }
           
            //удаляем все наши спрайты, чтобы потом выстроить их в нужном порядке
             for(i=0;i
            {
                mainSprite.removeChildAt(0);
            }
           
            originalArray.reverse();
            tempItemsIndexes.reverse();
            var newImagesArray:Array = new Array
            //определяем новый порядок спрайтов
            for(i=0;i
            {
                newImagesArray.push(originalArray[tempItemsIndexes[i]])
            }
           
            imCollection = newImagesArray;
            for(i=0;i
            {
                mainSprite.addChild(newImagesArray[i].displayImage);
                //координаты устанавливаем начальные, новым картинкам
                imCollection[i].posX = posXArray[i];
                imCollection[i].posY = posYArray[i];
            }   
           
            //уменьшаем счетчик вращений
            intervalCount--;
            if(intervalCount <= 0)
            {   //прекращаем крутить
                flash.utils.clearInterval(intervalIndex)
                goTurn = false;
            }
...

В итоге получим небольшой фотоальбом. 

Исходники - source, приложение - application