Вращение куба

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

Как известно, во флэше нет поддержки 3D. По-этому приходиться обходиться только имитацией.

И так, сейчас будем делать вращающийся куб, такой, как на флэшке верху. Я им доволен не на все 100%, но тем не менее это куб :)

Сделать это очень можно с помощью Distort и Shape Tween.
Приступим.

Надо создать еще один слой и можно еще добавить на сцену линии с помощью линейки ( называемые Guides ).
Это не обязательно, но можно так просто пометить две грани куба, что бы он не "уезжал с места". У меня координаты линий равны (50;200).

Для начала нарисуем на сцене квадрат (не важно на каком слое. Давайте на верхнем ) :

Создаем еще один ключевой кадр. На скриншоте ниже можно заметить, что Guides стало больше.
Я еще добавил 2 штуки по оси х на 50 и на 250.

У меня он на 35 кадре. На нем же выбираем нарисованый квадрат, щелкаем на него ПКМ и выбираем Distort.

Перетаскиваем квадратики, выделенные на скриншоте в нужные стороны. Сначала вверхи вниз, а потом вниз.

После того, как перетащили эти квадратики вверх и вниз должна получиться вот такая фигура:

Прежде чем перетаскивать в сторону, лучше всего увеличить масштаб до 800%. Нам надо, что бы фигура получилась как можно тоньше:

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

Теперь просто добавьте анимацию Shape Tween. ( Выберите первый ключевой кадр, ПКМ - Create Shape Tween. )

Вот, одна сторона есть.

Для второй стороный надо немного больше действий.

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

Да,и можно изменить цвет следующей стороны :)
На втором слое делаем 35 кадр ключевой.
Теперь выбираем квадрат на втором слое и с помощью Distort сделаем фигуру как на рисунке

Как видно фигура такая же, какую мы сделали и с первым нашим квадратом, только в другую сторону.
Надо следить за тем, чтобы квадрат на двух слоях "незалазили" друг на друга.

На первом кадре нижнего слоя надо сделать из квадрата вот такую фигуру с помощю инструмента Free Transform Tool.

И теперь просто создаем анимацию формы.

70 кадр делаем ключевым. Не забыли что мы копировали с первого кадра квадрат ? Ну вот, теперь его вставляем в это же место. (Не забудте поменять цвет) и просто создаем анимацию формы.

На этом, я буду заканчивать новость. Дальнейший процесс точно такой же. Можно даже просто копировать уже готовые кадры и вставлять их дальше ( меняя цвет сторон куба ) . Потом можно переконвертировать это все в символ и добавить фильтры, как я сделал во флэшке в самом верху.Удачи ;)

Исходник: 

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

Комментарии

Аватар пользователя RoManF

как-то не очень похоже на куб, больше на пирамиду.

Аватар пользователя NecroS

Как известно, во флэше нет поддержки 3D. По-этому приходиться обходиться только имитацией.

вообще-то поддержка 3D уже есть и причем без сторонних библиотек =))))

Аватар пользователя Fly

Поддержка и была, но она очень слабая и с малыми возможностями, сторонние библиотеки эти возможности расширяют во много раз.

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя xsnakes

И правда пирамида :) Нужно было ещё сделать, чтобы левый край увеличивался тогда, когда правый уменьшается.

Аватар пользователя Riskalina

В какой версии программы это работает?

Аватар пользователя Fly

Цитата: Riskalina

В какой версии программы это работает?

CS4

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя TeT

Где вы тут пирамиду видите ? Если смотреть на вращающийся куб только с одной стороны, то он выглядит именно так. Если сделать что бы один край увеличивался, другой уменьшался, то надо добавлять верхнюю или нижнию поверхность еще. До этого пока что не дошел )

Keyboard not found. Press any key to continue

Аватар пользователя NecroS

Это не куб и не пирамида, а больше похоже не перелистывание страниц =)))

Аватар пользователя ProcXel.A

Мда... Это совсем не похоже на вращение куба. Уж поверьте мне. :) Я уже 5 лет вращаю кубы в 3dsmax... ))))))))

True Love

Аватар пользователя Дэнииэль

да не куб, это какайта нереальная фигура, но это тоже можно неплохо применить)

Аватар пользователя xzk

Недоработано как-то получается.  В итоговой флешке у вас, зелёная грань резко меняет цвет в серый, чего нет в флешке в шапке.И не понятно вокруг какой оси вращение.

Аватар пользователя TeT

Это пример. Готовая флэшка сверху )

Keyboard not found. Press any key to continue