3D flash карусель от начала до конца серия уроков

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Информация
Название: 
3D flash карусель от начала до конца серия уроков
Автор: 
Виталий Кузьменко

Мы рады представить вашему вниманию новую серию по созданию модного, трех мерного, 100 % притягивающего взгляд баннера – 3D flash карусели.
Серия состоит из 12 простых видео уроков. Шаг за шагом на экране вашего монитора я покажу, как создать то, что вы видели выше.

Некоторые из особенностей карусели:

  • Скорость и направления вращения зависит от положения мыши на сцене
  • Подгружает картинки из вне используя файл данных XML
  • Трех мерность реализована за счет изменения масштаба по оси Y и сортировки элементов по Z на основе данного масштаба.

Часть 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 карусели. Делаем так чтобы по клику мыши можно было переходить по конкретной ссылке.

С недавнего времени данный урок стал дополнением к платному курсу, в бесплатном доступе его убрали http://disk.easyflash.org

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