Бесконечная Галерея / Меню

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Информация
Автор/переводчик: 
Fly
Описание: 

Подготавливаем изображения

Скачиваем, к примеру, 6 изображений, которые будем использовать в этом уроке.

Я подготовил 6 таких картинок:

     

Создаём Flash документ

Создаём новый Flash (ActionScript 3) документ размером 500 на 200 пикселей. Делаем чёрный фон.

Импортируем через меню File -> Import -> Import to Stage изображения, которые вы подготовили для этого урока.

Теперь ваши картинки должны быть на сцене.

Позиционирование изображений

Располагаем наши изображения вертикально на сцене. Интервалы между картинками должны быть одинаковы. Вы можете использовать кнопки выравнивания:

Преобразуем изображения в Movie Clip.

Преобразование самую левую картинку в мувиклип. Назовите ваш мувиклип “My Image 1″ и установите точку регистрации на левый край.

Повторите этот шаг для других изображений. Назовите другие мувиклипы “My Image 2″, “My Image 3″ и так далее...

Ваша библиотека должна выглядеть так:

Добавляем ActionScript 3

Два раза кликаете по мувиклипу “My Image 1″, после чего попадаете внутрь мувиклипа. Далее создаёте новый слой и обзываете его “actions”.

На слое “actions” жмёте F9 и в окне вставляете следующий код:

//Импортируем библиотеку TweenMax
import com.greensock.*;
 
//Устанавливаем начальное состояние для данного мувиклипа
TweenMax.to(this, 0.5, {alpha: 0.4});
 
//Добавляем слушатель событий к событиям mouse 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”. Зажимая CTRL на клавиатуре кликните по нашему мувиклипу и перетащите так, что бы дубликат оказался позади оригинала. Оба мувиклипа должны быть выровнены по горизонтали.

Последний мувиклип.

Выберите оба экземпляра “Gallery Images” на сцене и преобразуйте их в мувиклип с именем “Infinite Gallery” и поставьте точку регистрации слева.

Новому мувиклипу в панели Properties дайте instance name “infiniteGallery”.

Добавляем финальный ActionScript 3 код.

Создаём новый слой, обзываем его “actions” и по кнопке на клавиатуре F9 вставляем следующий код:

//Импортируем библиотеку TweenMax
import com.greensock.*;
 
//Сохраняем центер по горизонтали
var centerX:Number = stage.stageWidth / 2;
 
//Сохраняем ширину всей галереи
var galleryWidth:Number = infiniteGallery.width;
 
//Скорость перемещения (высчитывается из позиции курсора мыши в функции moveGallery() )
var speed:Number = 0;
 
//Add an ENTER_FRAME listener for the animation
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;
	}
 
}

Этот код создаёт бесконечность нашей галереи, вы можете сами проверить поместив курсор мыши справа или слева.

Комментарии всегда приветствуются!

Впервые!

Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень

С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!

Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0

Внимание!

Вы можете изучить все секреты flash анимации всего за 3 недели! Перейти из разряда новичка в разряд опытного пользователя даже без посещения дорогих курсов и чтения толстенных талмудов.

110 видео уроков,

в превосходном качестве помогут пройти, Вам, терни flash анимации самым быстрым и легким путём! +ActionScript 3.0

Подробнее