36. [howto] Render3d Part1. Создаем “3d крутилку” с помощью Adobe Flash

howto – Серия статей, в которых мы будем разбирать как делать эффекты во флеше и другие интересные полезности. Посмотреть все уроки серии: http://flashpress.ru/blog/category/howto/
Серия статей на тему создания “3d крутилки”:
  1. Render3d Part1. Создаем “3d крутилку” с помощью Adobe Flash
  2. Render3d Part2. Создаем “3d крутилку” с FlashBuilder+XML (скоро)
  3. Render3d Part3. “3d крутилка”, light edition (скоро)
  4. Render3d Part4. “3d крутилка” – размытие кадров (скоро)

Вместо предисловия, просто посмотрите на эту флешку, если вам понравился эффект, читайте далее как можно его реализовать. Кликните на флешку и перетащите объект.

Здесь должна быть флешка. Установите Flash Player


Здесь мы видим 3d-рендер персонажа из игры Машинариум. Кто не играл советую попробовать :)

Создать такой эффект можно различными способами. В этой статье мы разберем следующие из них:

  1. Adobe Flash Professional + набор картинок
  2. Adobe Flash Professional + flv видео

Они очень похожи в реализации, разница только в методе загрузки контента(анимации), поэтому мы максимально подробно разберем первый способ. Для создания эффекта мы будем использовать 3d-рендер состоящий из набора картинок, скачать рендер можно здесь.

Adobe Flash Professional + набор картинок

Откройте новый документ ActionScript3.0 в Adobe Flash Professional. Создайте новый MovieClip и задайте ему имя animation. Откройте MovieClip animation, кликнув по нему два раз на панели Library. Выберите пункт File->Import->Import to Stage (Ctrl+R). В появившемся окне выберите первую картинку из набора картинок анимации, и нажмите ОК. Вы увидите окно предлагающее загрузить sequence, т.е. он предлагает загрузить все остальные картинки из набора. Нажимаем Yes:
render3d-alertSequence

Если вы все сделали правильно, у вас на Timeline у клипа animation должны появиться все кадры из вашей анимации, вот как это выглядит у меня:
render3d-Images-MovieClip

Если вас не устраивает то в каком месте разместились картинки, или вы хотите повернуть сразу все кадры анимации, прочтите эту статью.

Разместите мувиклип на Stage, задайте имя myAnim и приступим к написанию основного кода. Написание кода для выше указанного эффекта разделим на 3 части. В первом напишем код для бесконечного вращения. Далее допишем кусок для повтора объекта мышкой. И в третьей сделаем ускорение при “толкании” мыши и постепенное возвращение к исходной скорости.

Создаем новый слой на Stage. На первом кадре созданного слоя пишем следующий код:

Обратите внимание что для отображения кадра методу gotoAndStop необходимо целое число, поэтому мы значение position округляем. Важно что бы округление было с помощью метода Math.round, т.к. он округляет до ближайшего целого. Если вы напишите var frame:int = int(position); произойдет округление до наименьшего целого, и в результате в некоторых случаях анимация у вас может дергаться.

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

Для эффекта “толкания” мышкой в обработчике события отпускная мыши мы будем определять скорость для толчка, и изменим значение скорости вращения.

Вот и все. Скачать FLA файлы с примерами можно здесь.

Adobe Flash Professional + flv видео

Если у вас нет набора картинок, но есть видео файл в формате flv, вы можете импортировать ваше видео в мувиклип animation так что бы все кадры лежали на таймлайне MovieClip-а. Ну а дальше пишем код точно такой же как и в предыдущем примере. Как импортировать видео в мувиклип в редакторе Adobe Flash – читайте в одной из следующих статей серии [ide]

В следующей статье серии мы создадим 3d-крутилку используя загруженный XML файл с настройками. Следите за новостями :)

Да прeбудет с вами Flash.
Serious Sam

Эту статью прочитали 3149 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress: