Как создавать свои Flash-игры, подобные Angry Birds и World of Goo?
Box2D - это библиотека, которая моделирует физическое поведение твердых тел в двумерном пространстве. Программисты могут использовать ее в своих играх, чтобы сделать...
Это мой первый урок и я хотел показать что-то особенное. В этом уроке вам понадобиться 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 и любуемся нашей галереей
Комментарии
чел, ты бы хоть где-нибудь акцентировал, что используетсяTweenLite . Такие вещи далеко не очевидны для начинающих флэшеров.
А в общем и целом - урок хороший -))
<i>Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете</i><br /><b>Стив Макконнел. "Совершенный код"</b>
switcher,
В самом начале я написал, что будут использоваться дополнительные классы и их можно взять из архива
А почему автор не указан?
В самом начале я написал, что будут использоваться дополнительные классы и их можно взять из архива
но вы же их не сами написали, а взяли из готовой библиотеки. Во избежание кучи лишних вопросов - лучше такое указывать. Тогда читатель не будет копаться в TweenLite класах, с целью осмыслить весь ВАШ код.
<i>Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете</i><br /><b>Стив Макконнел. "Совершенный код"</b>
dieGo,
реклама!!!!!!!!!!!!!!!!!!!!!!!! (воцклицательный знак)
Опять нихрена не понятно
ОГГГГГГГГГГГГГГГГГГРОМНОЕ СПАСИБО ЗА ВСЕ FLASH ДВИЖЕНИЯ,ВАН НАДО ДЕТЯМ В ШКОЛЕ МОЗГ НА МЕСТО ВПРАВЛЯТЬ,А ВЫ ТУТ С НАМИ ВОЗИТЕСЬ