Морфинг, Урок Flash

3
Дек
2009

morphing @ flash cs4 www.mykhailenko.com

Доброго времени суток, товарищи!

Сейчас я Вам расскажу, как можно быстро создать морфинг (плавный переход с одного объекта в другой) с помощью программного пакета Adobe Flash CS4.

Заодно, я открою "линейку" уроков по технологии Flash и ActionScript. Правда, сегодня для простого морфинга нам ActionScript не понадобится ;)

Вот, что-то типа такого должно получится:

View Demo

Ну что, летс гоу?

.1 Создаем новый документ.

.2 В первом кадре рисуем круг с помощью инструмента Oval Tool (O).

morphing @ flash cs4 www.mykhailenko.com (1)

В этом же слое на 30 кадре создаем ключевой кадр (F7) или правой кнопкой мыши на кадре и выбираем Insert Blank keyframe.

morphing @ flash cs4 www.mykhailenko.com (2)

Рисуем в этом кадре прямоугольник с помощью инструмента Rectangle Tool (R).

morphing @ flash cs4 www.mykhailenko.com (3)

Далее на 60 кадре снова создаем ключевой кадр и рисуем в нем овал.

morphing @ flash cs4 www.mykhailenko.com (4)

Такие же самые действия делаем на 90 и 120 кадре, в которых рисуем другие фигуры.

По желанию, Вы можете разукрасить Ваши фигуры разными цветами или градиентами, это уже по вкусу ;)

.3 Далее возвращаемся к 1-му кадру и копируем его, с помощью вызова контекстного меню и выбора Copy Frames.

morphing @ flash cs4 www.mykhailenko.com (5)

Переходим к 160 кадру и вставляем наш скопированный 1-й кадр (Paste Frames).

Теперь нам надо создать сам морфинг - анимацию преобразования разных фигур друг в друга.

.4 Кликаем правой кнопкой мыши на 1 кадре и вызываем контекстное меню, где выбираем Creat Shape Tween.

morphing @ flash cs4 www.mykhailenko.com (6)

Если Вы всё правильно сделали, то на Timeline должна появится стрелка на зеленом фоне, которая направлена в сторону следующего кадра.

morphing @ flash cs4 www.mykhailenko.com (7)

Это стрелка символизирует морфинг. В инспекторе свойств кадра (Ctrl + F3) должно появиться выпадающее меню Blend, в нем нужно выбрать способ превращения, я выбрал Angular (быстрая трансформация).

morphing @ flash cs4 www.mykhailenko.com (8)

.5 Повторяю предыдущий шаг для всех остальных ключевых кадров, кроме последнего.

.6 Всё! Морфинг готов! Жмем Ctrl + Enter и наслаждаемся результатом! ;)

morphing @ flash cs4 www.mykhailenko.com (9)

Скоро опубликую ещё парочку интересных уроков по Флэшу, так что stay in touch! ;) А ещё расскажу, как создать простенькую галерею! И, чтобы не пропустить интересный материал, подписывайтесь на RSS!

Download source

Хорошие и полезные статьи о Веб-дизайне и уроки Flash. Рекомендую!

Хотите узнать больше о маркетинге и монетизации блога? Тогда, Вы обязательно должны почитать этого блоггера! Он научит Вас зарабатывать в Интернете! ;)

+1+2+3+4+5 (проголосовало: 7, средняя оценка: 4.14 с 5)
Loading ... Loading ...

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (6) к “Морфинг, Урок Flash”

  1. snikus пишет:

    Спасибо за урок.
    Олег темноватый блог тяжело читать

  2. Oleg Mykhailenko пишет:

    snikus, Пожалуйста! ;)
    И большое спасибо за замечание по поводу мейн цвета в блоге. Возьму на заметку! ;) Я сам уже начал замечать, что черный цвет на фоне не канает.

  3. Ottava пишет:

    Спасибо!
    Хороший урок!
    Многое прояснилось… =)

  4. Elshan пишет:

    spasibo bolkshoe za urok