Создание 3D галереи (часть 1)

Создание 3D галереи
Информация
Автор/переводчик: 
funbiscuit

Всем привет! Сегодня я начну серию уроков о том, как создать свою 3D галерею на флеш. Этот урок будет лишь вводным и полноценного функционала в нем раскрыто не будет. Однако, к концу этой серии уроков вы сами сделаете полноценную галерею, которую даже можно немного настраивать под себя Smile

Итак, что же мы сделаем в этом уроке. Для начала мы будем загружать определенное количество картинок на сцену и добавим возможность увеличения каждой картинки.
Я думаю, что базовые знания о флеше у вас уже есть, поэтому элементарные действия пояснять не буду. Если вам нужно пояснение, займитесь более легкими уроками:) Либо спросите в коментариях то, что вам непонятно.
Ну что ж, приступим!

Создаем новый документ AS3 и рисуем на нем какой-нибудь прямоугольник. После этого задаем ему размеры нашего документа и центрируем. Цвет делайте какой хотите.

Суть в том, что на этом прямоугольнике мы будем отлавливать нажатия мыши для масштабирования галереи. Для этого так же необходимо ввести instance name. К тому же такой фон выглядит лучше чем просто белый. То, что вышло у меня:

Собственно на этом часть в Adobe Flash закончена (главное указать название используемого класса), после этого я перехожу в FlashDevelop для написания кода. Вы можете его писать где вам вздумается, хоть в обычном блокноте.

Заготовка нашего класса выглядит следующим образом:

package
{
	import com.greensock.easing.Expo;
	import com.greensock.TweenLite;
	import flash.display.Loader;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
 
	public class Gallery3D extends Sprite
	{
		private var container:MovieClip;	//здесь будут лежать все наши картинки
		private var loader:URLLoader;		//через эту штуковину загружается XML
		private var list:XMLList;			//XML конвертируется потом в XMLList для более удобного извлечения информации
		private var size:uint = 3;			//размер галереи, т.е. 3х3 картинки
		private var tw:uint = 100;			//размер превью картинки по ширине
		private var th:uint = 75;			//по высоте
		private var r0 = 200 * 298 / (375 - 298);	//особый параметр, превносит магию в нашу галерею
		private var wid:uint = stage.stageWidth;	//ширина сцены
		private var hei:uint = stage.stageHeight;	//высота сцены
 
		public function Gallery3D()
		{
			init();		//инициализация
			loadXML();	//грузим XML
		}
	}
 
}

Здесь я сразу импортирую все классы, что будут использоваться далее (на самом деле их, конечно же, автоматически импортирует FlashDevelop). Так же я сразу приведу все переменные что будут использоваться ниже. Как видим, в конструкторе класса мы вызываем функцию инициализации, а затем загружаем наш XML файл. Давайте его создадим.

<?xml version="1.0" encoding="utf-8" ?>
<data>
	<image full="img/01.jpg" thumb="thumbs/01.jpg" />
	<image full="img/02.jpg" thumb="thumbs/02.jpg" />
	<image full="img/03.jpg" thumb="thumbs/03.jpg" />
	<image full="img/04.jpg" thumb="thumbs/04.jpg" />
	<image full="img/05.jpg" thumb="thumbs/05.jpg" />
	<image full="img/06.jpg" thumb="thumbs/06.jpg" />
	<image full="img/07.jpg" thumb="thumbs/07.jpg" />
	<image full="img/08.jpg" thumb="thumbs/08.jpg" />
	<image full="img/09.jpg" thumb="thumbs/09.jpg" />
	<image full="img/10.jpg" thumb="thumbs/10.jpg" />
	<image full="img/11.jpg" thumb="thumbs/11.jpg" />
	<image full="img/12.jpg" thumb="thumbs/12.jpg" />
	<image full="img/13.jpg" thumb="thumbs/13.jpg" />
	<image full="img/14.jpg" thumb="thumbs/14.jpg" />
	<image full="img/15.jpg" thumb="thumbs/15.jpg" />
	<image full="img/16.jpg" thumb="thumbs/16.jpg" />
</data>

И сохраняем под названием images.xml в папку проекта. В данной галерее будет использоваться два типа изображений. Одно маленькое и одно большое. Это может быть существенно для медленного интернета, поэтому изначально загружаются уменьшенные копии изображений, а по клику мышкой будут грузится полные версии. Изображения можете брать свои, а можете взять из архива с исходником.

Теперь напишем функцию init

private function init():void
{
	//создаем наш контейнер и устанавливаем его по центру
	container = new MovieClip();
	container.x = wid / 2;
	container.y = hei / 2;
 
	//определяем размеры галереи по ширине и высоте
	var sizeX:uint = tw * size + tw / 10 * (size + 1);
	var sizeY:uint = th * size + th / 10 * (size + 1);
 
	//определяем как далеко должен находится контейнер, чтоб всё помещалось.
	container.z = Math.max(r0 * sizeX / wid - r0, r0 * sizeY / hei - r0, 0);
	container.z0 = container.z;	//запоминаем это расстояние в только что созданной переменной, хорошо что MovieClip это динамический класс
	addChild(container);	//добавляем его на сцену
	cover.addEventListener(MouseEvent.CLICK, zoomOut);	//задаем функцию для обработки клика мыши по нашему "ковру"
}

Думаю, из коментариев всё понятно, теперь загрузим XML

private function loadXML():void
{
	//говорим откуда грузить XML
	loader = new URLLoader(new URLRequest("images.xml"));
	//задаем функцию, которая будет запущена как только XML загрузится
	loader.addEventListener(Event.COMPLETE, createGallery);
}

Теперь напишем функцию, которая создаст галерею

private function createGallery(e:Event):void
{
	//получаем загруженный XML
	var xml:XML = new XML(e.target.data);
	list = new XMLList(xml.image); //и конвертируем его в XMLList
	for (var i:uint = 0; i < size; i++)	//в этом цикле мы создадим нашу галерею
	{
		for (var j:uint = 0; j < size; j++)
		{
			var t:MovieClip = new MovieClip(); //в этом мувике будет лежать загруженная картинка
			//рисуем серый фон чтоб показывать хоть что-то, пока картинка не загрузилась
			t.graphics.beginFill(0x999999);
			t.graphics.drawRect( -tw / 2, -th / 2, tw, th);
			t.graphics.endFill();
 
			//задаем позицию на сцене и добавляем мувик в контейнер
			t.x = (i - (size-1) / 2) * tw*1.1;
			t.y = (j - (size-1) / 2) * th*1.1;
			container.addChild(t);
			//создаем объект, который будет загружать картинку
			var l:Loader = new Loader();
			l.load(new URLRequest(list[i + 3 * j].@thumb));	//достаем адрес превью из XMLList
			//задаем позицию лоадера в мувике и добавляем его туда
			l.x = -tw / 2;
			l.y = -th / 2;
			t.addChild(l);
			t.addEventListener(MouseEvent.CLICK, zoomIn);//по нажатии мышки на любом мувике будем увеличивать галерею
			t.buttonMode = true;	//благодаряэтой опции курсор будет превразщаться в "руку", говоря что картика кликабельна
		}
	}
}

Осталось создать две функции, которые будут увеличивать и уменьшать наш контейнер.

private function zoomIn(e:MouseEvent):void
{
	//узнаем куда нужно передвинуть наш контейнер, чтобы картинка, по которой кликнули, оказалась в центре
	var nx:int = wid/2-e.target.parent.x;
	var ny:int = hei / 2 - e.target.parent.y;
	//узнаем куда надо сдвинуть контейнер по оси Z, чтобы картинка заняла почти всю сцену
	//здесь опять включаем немного магии:)
	var nz:int = Math.max(r0 * tw*1.2 / wid - r0, r0 * th*1.2 / hei - r0);
 
	//создаем твин для плавного изменения нужных параметров за одну секунду
	var ttt:TweenLite = new TweenLite(container, 1, { x:nx, y: ny, z:nz, ease:Expo.easeInOut} );
}
private function zoomOut(e:MouseEvent):void
{
	//почти то же самое, что в zoomIm, только другие параметры
	var ttt:TweenLite = new TweenLite(container, 1, { x:wid/2, y: hei/2, z:container.z0, ease:Expo.easeInOut} );
}

Теперь дело за малым. Сохраняем написанный класс, идем в Adobe Flash и жмем Ctrl+Enter. Убеждаемся, что всё работает.

Ну что ж, на этом первая часть в серии подошла к концу. Я надеюсь, что для кого-то это было полезным и познавательным, в любом случае, дальше - лучше Smile

Исходники можно скачать ниже. Продолжение будет скоро. Ведь пока что от 3D использовано очень мало, так что дальше мы будем увеличивать функционал. Равно как и отображать все картинки, указанные в XML. Разумеется я не претендую на лучшее исполнение того, что было сделано и будет сделано, так что если есть дельные советы - пожалуйста, от этого всем будет лучше Smile

Исходник: 

Впервые!

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

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

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

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

Похожие записи