Как создавать свои Flash-игры, подобные Angry Birds и World of Goo?
Box2D - это библиотека, которая моделирует физическое поведение твердых тел в двумерном пространстве. Программисты могут использовать ее в своих играх, чтобы сделать...
Мы рады представить вашему вниманию новую серию по созданию модного, трех мерного, 100 % притягивающего взгляд баннера – 3D flash карусели.
Серия состоит из 12 простых видео уроков. Шаг за шагом на экране вашего монитора я покажу, как создать то, что вы видели выше.
Некоторые из особенностей карусели:
Часть 1
Flash урок #1: Добавление N объектов из библиотеки на сцену и размещаем их случайным образом.
В этом видео уроке вы узнаете, как в цикле присоединяться (конэктиться) к элементу в библиотеке, доставать его и помещать любое количество на сцену случайным образом (координаты всех элементов генерируются случайным образом).
Flash урок #2: Добавление N объектов из библиотеки на сцену и размещаем их по окружности
Это больше теоретический, нежели практический урок. Если в прошлом видео мы добавляли элементы из библиотеки случайным образом, то сейчас мы должны сформировать их координаты таким образом, чтобы они разместились аккуратно по окружности. В нем я на картинках объясню простую теорию, пользуясь которой, мы равномерно добавим элементы по окружности. Будем говорить о таких вещах, как косинус, синус, радиус, градус, угол. Гуманитарии не пугайтесь - все наглядно и доходчиво :)
Flash урок #3: Добавление N объектов из библиотеки на сцену и размещаем их по эллипсу
Легкий урок. Разбивая радиус окружности на проекции, мы разместим элементы на сцене по эллипсу.
Flash урок #4: Анимируем нашу карусель по часовой стреле.
В данном видео уроке рассматривается вопрос программной анимации большого количества элементов (анимация при помощи actionscript). Динамическим образом мы подцепим слушатели событий к каждому элементу. Данный слушатель событий будет запускать функцию, которая и будет вращать всю нашу карусель по часовой стрелке.
Flash урок #5: Изменяем масштаб элементов в зависимости от их координаты.
Наша карусель все еще выглядит плоской, когда по задумке она должна быть 3D. В этом видео мы исправим этот недостаток, добавив несколько строчек в нашу анимирующую функцию. Теперь она будет не только двигать элементы, но и изменять их масштаб в зависимости от координаты. Этим мы добьемся немного 3D.
Flash урок #6: Сортируем наши элементы по масштабу.
На прошлом шаге у нас возникла маленькая ошибка с глубиной. В этом видео мы исправим эту ошибку. Мы сделаем так, чтобы наша анимирующая функция сортировала наши элементы на сцене в зависимости от их масштаба (Большие элементы находиться впереди, меньшие позади). Этим мы добьемся полноценного эффекта 3D. Также вы научитесь трюку – сохранять ссылку на главную линию времени, что бы иметь возможность сослаться на нее в любой, даже не очень удобный момент.
Flash урок #7: Анимируем нашу карусель в обе стороны.
Сейчас наша 3D карусель равномерно вращается в одну сторону, хотя по задумке скорость и направление карусели должно меняться от положения мыши на сцене. В этом уроке этим и займемся -- добавим немного интерактивности.
На этом шаге мы полностью завершаем макет 3D карусели можно перейти к следующей части.
Часть 2
Пред просмотром данной серии уроков рекомендуется посмотреть видеo журнал по теме flash+xml. Т.к. там это было объяснено максимально подробно, здесь же некоторые моменты пропущены.
Flash урок #8: Загрузка управляющего файла данных XML.
Создаем и загружаем во flash файл данных XML. Данный файл мы будем использовать для загрузки картинок и, показывания описаний и для управления переходами, если пользователь кликнул по одной из картинок.
Flash урок #9: Выводим управляющие параметры узлов XML.
В этом видео уроке мы учимся использовать XML. В цикле мы выведем все ссылки на картинки, которые хотим загрузить во flash.
Flash урок #10: Загружаем и размещаем на сцене внешние картинки.
В этом видео, используя файл данных XML, мы загружаем внешние картинки во flash и помещаем их на сцене в случайном порядке (координаты генерируются случайным образом).
После этого мы копируем куски готового кода, из прошлой части, когда мы создали работающий макет 3D карусели.
Flash урок #11:Делаем так, чтобы все работало.
Мы продолжаем копировать код из первой части, добиваясь того чтобы все работало. В результате мы получаем полноценную 3D карусель из внешних картинок-баннеров. Единственное чего не хватает на этом шаге – это того, чтобы человек по клику переходил по нужной ссылке.
Flash урок #12: Добавляем возможность кликать по картинкам и переходить на нужный адрес.
Заключительный урок по 3D карусели. Делаем так чтобы по клику мыши можно было переходить по конкретной ссылке.
С недавнего времени данный урок стал дополнением к платному курсу, в бесплатном доступе его убрали