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

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

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

Часть 1

Flash урок #1: Добавление N объектов из библиотеки на сцену и размещаем их случайным образом.

В этом видео уроке вы узнаете, как в цикле присоединяться (конэктиться) к элементу в библиотеке, доставать его и помещать любое количество на сцену случайным образом (координаты всех элементов генерируются случайным образом).

Deposit: 1_3d_carusel.rar 5.61 MB | Ifolder: 1_3d_carusel.rar

Flash урок #2: Добавление N объектов из библиотеки на сцену и размещаем их по окружности

Это больше теоретический, нежели практический урок. Если в прошлом видео мы добавляли элементы из библиотеки случайным образом, то сейчас мы должны сформировать их координаты таким образом, чтобы они разместились аккуратно по окружности. В нем я на картинках объясню простую теорию, пользуясь которой, мы равномерно добавим элементы по окружности. Будем говорить о таких вещах, как косинус, синус, радиус, градус, угол. Гуманитарии не пугайтесь  - все наглядно и доходчиво :)

Deposit: 2_3d_carusel.rar 6.51 MB | Ifolder: 2_3d_carusel.rar

Flash урок #3: Добавление N объектов из библиотеки на сцену и размещаем их по эллипсу

Легкий урок. Разбивая радиус окружности на проекции, мы разместим элементы на сцене по эллипсу.

Deposit: 3_3d_carusel.rar 2.76 MB | Ifolder: 3_3d_carusel.rar

Flash урок #4: Анимируем нашу карусель по часовой стреле.

В данном видео уроке рассматривается вопрос программной анимации большого количества элементов (анимация при помощи actionscript). Динамическим образом мы подцепим слушатели событий к каждому элементу. Данный слушатель событий будет запускать функцию, которая и будет вращать всю нашу карусель по часовой стрелке.

Deposit: 4_3d_carusel.rar 8.62 MB | Ifolder: 4_3d_carusel.rar

Flash урок #5: Изменяем масштаб элементов в зависимости от их координаты.

Наша карусель все еще выглядит плоской, когда по задумке она должна быть 3D. В этом видео мы исправим этот недостаток, добавив несколько строчек в нашу анимирующую функцию. Теперь она будет не только двигать элементы, но и изменять их масштаб в зависимости от координаты. Этим мы добьемся немного 3D.

Deposit: 5_3d_carusel.rar 6.88 MB | Ifolder: 5_3d_carusel.rar

Flash урок #6: Сортируем наши элементы по масштабу.

На прошлом шаге у нас возникла маленькая ошибка с глубиной. В этом видео мы исправим эту ошибку. Мы сделаем так, чтобы наша анимирующая функция сортировала наши элементы на сцене в зависимости от их масштаба (Большие элементы находиться впереди, меньшие позади). Этим мы добьемся полноценного эффекта 3D. Также вы научитесь трюку – сохранять ссылку на главную линию времени, что бы иметь возможность сослаться на нее в любой, даже не очень удобный момент.

Deposit: 6_3d_carusel.rar 9.01 MB | Ifolder: 6_3d_carusel.rar

Flash урок #7: Анимируем нашу карусель в обе стороны.

Сейчас наша 3D карусель равномерно вращается в одну сторону, хотя по задумке скорость и направление карусели должно меняться от положения мыши на сцене. В этом уроке этим и займемся -- добавим немного интерактивности.

Deposit: 7_3d_carusel.rar 8.02 MB | Ifolder: 7_3d_carusel.rar

На этом шаге мы полностью завершаем макет 3D карусели можно перейти к следующей части.

Часть 2

Пред просмотром данной серии уроков рекомендуется посмотреть видеo журнал по теме flash+xml. Т.к. там это было объяснено максимально подробно, здесь же некоторые моменты пропущены.

Flash урок #8: Загрузка управляющего файла данных XML.

Создаем и загружаем во flash файл данных XML. Данный файл мы будем использовать для загрузки картинок и, показывания описаний и для управления переходами, если пользователь кликнул по одной из картинок.

Deposit: 8_3d_carusel.rar 9.45 MB | Ifolder: 8_3d_carusel.rar

Flash урок #9: Выводим управляющие параметры узлов XML.

В этом видео уроке мы учимся использовать XML. В цикле мы выведем все ссылки на картинки, которые хотим загрузить во flash.

Deposit: 9_3d_carusel.rar 8.77 MB | Ifolder: 9_3d_carusel.rar

Flash урок #10: Загружаем и размещаем на сцене внешние картинки.

В этом видео, используя файл данных XML, мы загружаем внешние картинки во flash и помещаем их на сцене в случайном порядке (координаты генерируются случайным образом).
После этого мы копируем куски готового кода, из прошлой части, когда мы создали работающий макет 3D карусели.

Deposit: 10_3d_carusel.rar 5.68 MB | Ifolder: 10_3d_carusel.rar

Flash урок #11:Делаем так, чтобы все работало.

Мы продолжаем копировать код из первой части, добиваясь того чтобы все работало. В результате мы получаем полноценную 3D карусель из внешних картинок-баннеров. Единственное чего не хватает на этом шаге – это того, чтобы человек по клику переходил по нужной ссылке.

Deposit: 11_3d_carusel.rar 15.65 MB | Ifolder: 11_3d_carusel.rar 15.65 MB

Flash урок #12: Добавляем возможность кликать по картинкам и переходить на нужный адрес.

Заключительный урок по 3D карусели. Делаем так чтобы по клику мыши можно было переходить по конкретной ссылке.

Deposit: 12_3d_carusel_bonus.rar 24.92 MB | Ifolder: 12_3d_carusel_bonus.rar

Исходники CS4: 3d_galery_step_by_step.rar [576,22 Kb] (cкачиваний: 1433)

Хочется отметить , что вы можете во flash загружать не только картинки (*.jpg) но и анимированные flash файлы (*.swf).

Загружаемые картинки не обязательно должны быть внешними, их можно импортировать внутрь флешки. В папке с исходниками вы найдете такой пример, труда разобраться после уроков - в нем не составит.

Добавить новость можно в вашем меню, там есть ссылка добавить новость.