Код AS3:
package
{
import flash.display.*;
import flash.events.*;
import flash.geom.*;
//Импорт TweenMax и plugin для blur filter
import com.greensock.TweenMax;
public class GalleryClass extends MovieClip
{
var scrollMC:Hand;
var myContent:Content;
var myMask:Maska;
var scrolling:Boolean = false;
//Создадим прямоугольник, который будет действовать как ограничитель для scrollMC.
//Это способ, при помощи которого scrollMC можно перетаскивать только вдоль линии.
var bounds:Rectangle = new Rectangle(scrollMC.x, scrollMC.y, 700, 0);
//Мы хотим знать, какая была предыдущая x-координата для контента (для анимации)
var oldX:Number = myContent.x;
//Запомним длину контента и маски.
var CONTENT_WIDTH:Number = 4000;
var MASK_WIDTH:Number = 408;
public function GalleryClass() : void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
public function init(event:Event = null) : void
{
scrollMC = new Hand();
addChild(scrollMC);
scrollMC.x = 35;
scrollMC.y = 54;
myMask = new Maska();
addChild(myMask);
myMask.x = 20;
myMask.y = 90;
//Располагаем контент в левом верхнем углу маски
myContent = new Content();
addChild(myContent);
myContent.x = myMask.x;
myContent.y = myMask.y;
//Установим маску для нашего контента
myContent.mask = myMask;
//Мы хотим знать, когда пользователь скроллирует
var scrolling:Boolean = false;
//Слушаем, когда пользователь нажимает мышь на scrollMC
scrollMC.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
//Слушаем когда пользователь вращает колесико мыши
stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
//Слушаем, когда пользователь отпускает кнопку мыши
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
//Добавим ENTER_FRAME чтобы анимировать скроллирование
addEventListener(Event.ENTER_FRAME, enterHandler);
}
//Эта функция вызывается, когда пользователь перетаскивает scrollMC
private function startScroll (event:Event):void
{
//Установим scrolling равным true
scrolling = true;
//Начинаем перетаскивать scrollMC
scrollMC.startDrag(false,bounds);
}
//Эта функция вызывается, когда пользователь заканчивает перетаскивание scrollMC
private function stopScroll(event:Event):void
{
//Установим scrolling равным false
scrolling = false;
//Остановим перетаскивание
scrollMC.stopDrag();
}
//Эта функция выполняется в каждом фрейме
private function enterHandler(event:Event):void
{
//Проверяем, происходит ли скроллирование
if (scrolling == true)
{
//Вычисляем расстояние scrollMC от левого края
var distance:Number = Math.round(scrollMC.x - bounds.x);
//Вычисляем процентное содержание расстояния по отношению к длине линии.
//Итак, когда scrollMC слева, percentage равно 0 ,
// а когда справа - percentage равно 1.
var percentage:Number = distance / MASK_WIDTH;
//Сохраним старую x - координату
oldX = myContent.x;
//Вычисляем новую x -координату (targetX) для контента.
//Мы вычитаем длину маски из длины контента.
//Таким образом, контент должен двигаться влево, когда мы прокручиваем вправо.
//Удалите вычитание, чтобы убедиться лично!
var targetX:Number = -((CONTENT_WIDTH - MASK_WIDTH) * percentage) + myMask.x;
//Мы хотим анимировать скроллирование только если старый х отличается от нового х.
//В нашем мувике мы анимируем прокрутку, если разница больше чем 5 пикселов.
if (Math.abs(oldX - targetX) > 5)
{
//Твин контента на новую позицию.
//Вызываем функцию tweenFinished() когда твин завершится.
TweenMax.to(myContent, 2, {x: targetX, blurFilter:{blurX:0, blurY:0}, onComplete: tweenFinished});
}
}
}
//Эта функция вызывается, когда твин завершается
private function tweenFinished():void
{
//твин для возврата контента к нормальному состоянию (= удалим blur)
TweenMax.to(myContent, 0.3, {blurFilter:{blurX:0, blurY:0}});
}
function mouseWheelHandler(event:MouseEvent):void
{
if ((event.delta < 0 && scrollMC.x > bounds.x) ||
(event.delta > 0 && scrollMC.x < bounds.x + bounds.width))
{
scrolling = true;
scrollMC.x = scrollMC.x + (event.delta * 9);
}
}
}
}