Создание 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" ??>

И сохраняем под названием 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

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

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