Flash and Flex applications, examples and sources: 

TweenMax, псевдо 3D. Делаем карусель из картинок
(мини фотоальбом). Трафик!
================================================================================
Bjorn on 01 August, 2008
 
Сделаем мини фотоальбом в виде карусели, с
центральной картинкой посередине. Она у нас
будет текущей и естественно самой большой.
Далее от нее в пространство будут уходить
остальные картинки, пропорционально
уменьшенные. Располагать их будем по две и
их количество будет нечетное, поскольку
центральная картинка одна (это уже разные
варианты задачи).
Создадим Flex ActionScript Project, главный файл
назовем index, он у нас будет расширением Sprite.
Поскольку для движения будем использовать
TweenMax. Как установить TweenMax? Cначала
необходимо скачать этот пакет классов и
установить (скопировать) в папке нашего
приложения - 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