флеш фото
Infinite Gallery / Menu
В этом новом и интересном Flash и ActionScript 3 уроке я научу вас, как создать бесконечную галерею. Все это будет работать в совершенстве и для меню и т.д. Давайте начнем прямо сейчас!
Замечу: для выполнения этого урока вам необходим TweenMax
После загрузки поместите папку gs туда, где лежит ваш файл fla
Это важно!
Получаем картинки
Загрузите 6 картинок (100×100) , которые вы хотите использовать в этом уроке.
Создание документа Flash
Содайте новый Flash (ActionScript 3) документ размера 500×200. Сделайте фон черным.
Импорт картинок во Flash
В меню выберите File -> Import -> Import to Stage. Выберите картинки, которые вы решили использовать в этом уроке.
Сейчас картинки должны быть на сцене.
Позиционирование картинок
Расположите картинки вертикально по центре сцены. Расположите их равномерно с промежутками по горизонтали (оставьте некоторое расстояние между картинками). Вы можете использовать кнопки выравнивания, которые помогут вам в этом.
Конвертирование картинок в мувиклипы
Конвертируйте самую левую картинку в мувиклип. Назовите его “My Image 1″ и установите точку регистрации на левой стороне.
Повторите этот шаг с оставшимися картинками. Называйте их “My Image 2″, “My Image 3″ и т.д…
Ваша библиотека должна вылядет сейчас таким образом.
Добавим ActionScript 3
Дважды кликните по мувиклипу “My Image 1″. Сейчас вы должны находиться “внутри” мувиклипа. Создайте новый слой, назовите его “actions”.
В слое actions напишите следующий код.
//Импорт TweenMax
import gs.*;
//Установим начальное состояние для этого мувиклипа
TweenMax.to(this, 0.5, {alpha: 0.4});
//Добавим слушатели для событий мыши over и out
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
//Эта функция вызывается, когда мышь находится над этим мувиклипом
function mouseOverHandler(e:Event):void {
//твин по альфа
TweenMax.to(this, 0.5, {alpha: 1});
}
//Эта функция вызывается, когда мышь уходит с этиго мувиклипа
function mouseOutHandler(e:Event):void {
//твин по альфа
TweenMax.to(this, 0.5, {alpha: 0.4});
}
Повторите этот шаг для оставшихся картинок! Мы просто добавляем некоторую функциональность, когда пользователь наводит мышь на картинку…
Больше мувиклипов...
Теперь, когда мы имеем все отдельные картинки, мы можем начать создание бесконечной галереи . На основной временной шкале выделите все 6 картинок-мувиков. Конвертируйте их в один мувиклип, назовите его “Gallery Images”.
и еще больше мувиклипов …
Чтобы создать иллюзию бесконечного цикла картинок, нам нужен другой экземпляр мувиклипа “Gallery Images” на сцене . Поэтому вытащите другой мувиклип “Gallery Images” на сцену и расположите его позади первого экземпляра так, чтобы они были выровнены по горизонтали.
Последний мувиклип
Выделите оба экземпляра мувиков “Gallery Images” , которые находятся на сцене. Конвертируйте их в один мувиклип, назовите его “Infinite Gallery” и установите точку регистрации на левой стороне.
Дайте мувиклипу инстанс имя “infiniteGallery”.
Добавим ActionScript 3
На основной timeline создайте новый слой, назовите его “actions”. Напишите следующий код.
//ИмпортTweenMax
import gs.*;
//Запоминаем центр по горизонтали
var centerX:Number = stage.stageWidth / 2;
//Запоминаем ширину всей галереи
var galleryWidth:Number = infiniteGallery.width;
//Скорость движения (вычисляется по позиции мыши в функции moveGallery())
var speed:Number = 0;
//Добавляем слушатель ENTER_FRAMEдля анимации
addEventListener(Event.ENTER_FRAME, moveGallery);
function moveGallery(e:Event):void {
//Вычисляем новую скорость
speed = -(0.05 * (mouseX - centerX));
//Изменяем x - координату
infiniteGallery.x+=speed;
//Проверяем, если мы слишком далеко справа (нет более картинок по левому краю)
if (infiniteGallery.x>0) {
//Изменяем координаты галереи
infiniteGallery.x= (-galleryWidth/2);
}
//Проверяем, если мы слишком далеко слева (нет более картинок по правому краю)
if (infiniteGallery.x<(-galleryWidth/2)) {
//Изменяем координаты галереи
infiniteGallery.x=0;
}
}
Этот код отвечает за иллюзию бесконечного цикла. Мы просто проверяем, когда мы находимся слишком далеко от левой или правой границы, и заново располагаем соответственно мувиклип “infiniteGallery”.
Перевод kedicik
Источник