Создание 3D карусели во flash (CS4, AS3+XML)

Создание 3D карусели во flash (CS4, AS3+XML)

Это мой первый урок и я хотел показать что-то особенное. В этом уроке вам понадобиться Adobe Flash CS4 и пара классов для создания анимации. Всё это вынайдете в архиве.

Итак начнем.

Создаем документ флэш(AS3) и устанавливаем размер сцены на 700x500. В настройке класса пишем 'Carousel'.
Вместо фона рисуем прямоугольник по размерам сцены(700x500) и делаем из него мувик, называем как хотим, но Instance Name должен быть 'cover'. Блокируем этот слой.

Добавляем новый слой и рисуем на нём прямоугольник без фона размером с вашу картинку (у меня это 500x375) и делаем из него мувик. Ставим галочку напротив Export for actionscript и называем класс imCon. Нажимаем OK, если появилось ещё окно, то снова нажимаем OK.

Теперь создаём документ ActionScript'а и пишем наш класс.

package {
 //Импортируем нужные классы
 import flash.display.Loader;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.net.URLLoader;
 import flash.net.URLRequest;
 import com.theflashblog.fp10.*;
 import gs.*;
 import gs.easing.*;
 //Создаём наш класс
 public class Carousel extends Sprite
 {
 	private var container:Sprite; //Здесь будут храниться наши картинки
 	private var loader:URLLoader; //Этот URLLoader загрузит наш XML
 	private var anglePer:Number;
 	public function Carousel() //Это функция конструктор и она запуститься самой первой
 	{
 		createContainer(); //Вызываем функцию, которая создаст наш контейнер для картинок
 		loadXml(); //Загружаем наш XML
 	}
 	private function loadXml():void //Это функция загрузки XML
 	{
 		loader=new URLLoader(new URLRequest('images.xml')); //Загружаем наш XML
 		loader.addEventListener(Event.COMPLETE, createCarousel); //Регистрируем событие когда закончиться загрузка, чтобы создать карусель
 	}
 	private function createCarousel(e:Event):void //Это функция создания карусели
 	{
 		var xml:XML=new XML(e.target.data); //создаем xml
 		var list:XMLList=xml.image; //создаём XMLList, чтобы было удобно брать настройки
 		anglePer = (Math.PI*2)/list.length();
  		for(var i:int=0;i<list.length();i++) //создаём цикл в котором разместим наши элементы по кругу
 		{
 			var imc:imCon=new imCon(); //берем наш контейнер из библиотеки
 			imc.buttonMode=true; //делаем так, чтобы он был похож на кнопку
 			imc.addEventListener(MouseEvent.CLICK, onclickiiiii); //регистрируем событие, чтобы знать когда мышкой кликнут по этой картинке
 			var l:Loader=new Loader(); //создаём новый Loader, чтобы загрузить нашу картику
 			l.x=-250; //центрируем нашу картинку
 			l.y=-187.5;
 			l.load(new URLRequest(list[i].@src)); //загружаем картинку, используя наш XMLList
 			imc.addChild(l); //добавляем в наш контейнер Loader, чтобы иметь возможность увидеть его на сцене
 			imc.scaleX=imc.scaleY=0.5; //немного уменьшаем наш контейнер, чтобы видеть все картинки
 			imc.angle=(i*anglePer) - Math.PI/2; //узнаём угол, на который нужно повернуть главный контейнер, чтобы увидеть нашу картинку посередине
 			imc.x=Math.cos(imc.angle)*450; //располагаем наш контейнер изображения на нужной координате x
 			imc.z=Math.sin(imc.angle)*450; ////располагаем наш контейнер изображения на нужной координате z
 			imc.rotationY=36*-i; //поворачиваем наш контейнер изображения в зависимости от расстояния по z
 			container.addChild(imc); //добавляем контейнер изображения в главный контейнер
 		}
 		this.addEventListener(Event.ENTER_FRAME, loop); //регистрируем событие, которое быдет отправляться каждый кадр
 	}
 	private function onclickiiiii(e:MouseEvent):void //Эта функция будет поворачивать главный контейнер и увеличивать его, чтобы увидеть нашу картинку посередине
 	{
 		TweenLite.to(container, 0.8,{rotationY:(e.currentTarget.angle+Math.PI/2)/Math.PI*180,z:100}); //создаём анимацию поворота
 	}
 	private function createContainer():void //Эта функция создаст главный контейнер
 	{
 		container=new Sprite();
 		container.x=350; //центрируем наш контейнер
 		container.y=250;
 		container.z=400;
 		addChild(container); //добавляем наш контейнер на сцену
 		cover.addEventListener(MouseEvent.CLICK, stageClick); //регистрируем событие, чтобы знать когда мышкой кликнут по сцене для уменьшения карусели
 	}
 	private function stageClick(e:MouseEvent):void //Эта функция уменьшит главный контейнер
 	{
 		TweenLite.to(container, 0.8,{z:400}); //создаём анимацию уменьшения
 	}
 	private function loop(e:Event):void //Эта функция отсортирует наши картинки по оси z
 	{
 		SimpleZSorter.sortClips(container); //сортируем наши картинки по оси z
 	}
 }
}

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

<?xml version="1.0" encoding="UTF-8"?>
<images>
 <image src="img/01.jpg"/>
 <image src="img/02.jpg"/>
 <image src="img/03.jpg"/>
 <image src="img/04.jpg"/>
 <image src="img/05.jpg"/>
 <image src="img/06.jpg"/>
 <image src="img/07.jpg"/>
 <image src="img/08.jpg"/>
 <image src="img/09.jpg"/>
 <image src="img/10.jpg"/>
</images>

Чтобы всё работало вам нужно создать папку img там где находится fla файл и поместить туда 10 картинок с названиями как в xml (01, 02, 03...09,10) и расширением .jpg

После этого нажимаем CTRL+ENTER и любуемся нашей галереей

Исходник: 

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

Комментарии

Аватар пользователя switcher

чел, ты бы хоть где-нибудь акцентировал, что используется TweenLite. Такие вещи далеко не очевидны для начинающих флэшеров.
А в общем и целом - урок хороший -))

<i>Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете</i><br /><b>Стив Макконнел. &quot;Совершенный код&quot;</b>

Аватар пользователя funbiscuit

switcher,
В самом начале я написал, что будут использоваться дополнительные классы и их можно взять из архива

Аватар пользователя Aloran

А почему автор не указан?

Аватар пользователя switcher

В самом начале я написал, что будут использоваться дополнительные классы и их можно взять из архива

но вы же их не сами написали, а взяли из готовой библиотеки. Во избежание кучи лишних вопросов - лучше такое указывать. Тогда читатель не будет копаться в TweenLite класах, с целью осмыслить весь ВАШ код.

<i>Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете</i><br /><b>Стив Макконнел. &quot;Совершенный код&quot;</b>

Аватар пользователя Niter43

dieGo,
реклама!!!!!!!!!!!!!!!!!!!!!!!! (воцклицательный знак)

Аватар пользователя SOTO

Опять нихрена не понятно

read

Аватар пользователя dmi5720

ОГГГГГГГГГГГГГГГГГГРОМНОЕ СПАСИБО ЗА ВСЕ FLASH ДВИЖЕНИЯ,ВАН НАДО ДЕТЯМ В ШКОЛЕ МОЗГ НА МЕСТО ВПРАВЛЯТЬ,А ВЫ ТУТ С НАМИ ВОЗИТЕСЬ

victory