- •Тема 9: Использование Macromedia Flash при создании сайтов
- •Управление цветом черным и белым.
- •Растровая заливка.
- •Градиент.
- •Создание градиента.
- •Лекция . 9.3. Создание баннера
- •9.3.1. Основные принципы:
- •9.3.2. Учебная литература. Составление технического задания
- •Покадровая анимация. Будьте самоучками
- •Эффект пишущей машинки
- •Практическая работа . « Проработка анимации баннера»
- •Покадровая анимация
- •Прием "штора" для создания эффекта пишущей машинки
Покадровая анимация
Когда-то покадровая анимация была единственным способом создания мультфильмов. Только с помощью прорисовки вручную каждого кадра фильма можно было добиться последовательного движения персонажа. Во Flash создание движения уже можно автоматизировать, используя Shape Tween (Анимация формы) и Motion Tween (Анимация движения). Но покадровая анимация тоже иногда оказывается не просто полезна, но и незаменима особенно при создании мультфильмов и, как мы сейчас увидим, эффектов появления текста. Давайте проделаем следующее.
1. Создаем слой. Дважды щелкаем левой кнопкой мыши по стандартному названию слоя Layer 1 и вводим осмысленное название для слоя. В данном примере предлагается имя — текст.
2 Выбираем инструмент Text, нажимаем <F6> - "Создать ключевой кадр”
на первом кадре Timeline, подводим мышь к рабочему полю и набираем необходимое слово или словосочетание целиком. В рассматриваемом примере это словосочетание пишущая машинка.
3. Затем необходимо создать серию ключевых кадров для покадровой ани-м.щии. Для этого необходимо на том же слое Текст через один фрейм нажать <F6> столько раз, сколько символов в словосочетании. В итоге у вас Timeline приобретет следующий вид (рис. 9.7, слой Текст).
Примечание
Поясним смысл содеянного. Как следует из самого названия "покадровая анимация", каждый кадр фильма создается вручную, что вы благополучно и проделали. Для того чтобы немного продлить удовольствие просмотра появляющихся букв, мы создавали ключевые кадры через фрейм. Соответственно, если вы еще хотите удлинить процедуру вывода слова, нужно пропускать не один кадр, а больше. Если хотите укоротить — не пропускать ни одного.
4. Теперь необходимо добиться последовательного появления букв, как будто мы печатаем их. Для этого обратимся к первому ключевому кадруи оставим от слов "Пишущая машинка" только первую букву — П. Переходим на второй ключевой кадр, где от того же словосочетания оставляем первые две буквы — Пи. Думаю, вы догадались, что произойдет с третьим ключевым кадром. Совершенно верно, мы удаляем "хвост", оставляя первые три буквы — Пиш. Аналогичная процедура применяется последовательно для оставшихся кадров, и в итоге мы доходим до последнего кадра, где уже ничего удалять не надо.
5. Протестируйте полученный клип. Если вы ничего не напутали, то у вас должны последовательно появляться все буквы выбранного нами словосочетания.
А теперь давайте создадим мигающий курсор, который будет двигаться ПМ ред появлением буквы. Для этого необходимо воспользоваться символом типа Movie (Клип). Но давайте вернемся к практике.
1. Создаем новый слой, нажав на соответствующую пиктограмму на Timeline. Присваиваем ему осмысленное имя — ползунок.
Примечание
Хотя в нашем клипе используются всего два слоя, в которых запутаться будет по труднее, чем в трех соснах, но лучше не лениться и делать все на совесть, потому что аккуратность, впрочем, как и неаккуратность быстро входит в привычку.
2. Выбираем инструмент Line (Линия) и создаем короткий горизонтальный отрезок по типу того, который приведен на рис. 9.8. Настроить его поможет панель Properties, на которой вы выбираете цвет и толщину линии: 3.25
Теперь будьте особенно внимательны, т. к. мы переходим к созданию символа. Нажмите <F8> — "Конвертировать в символ" и выберите тип символа Movie.
Назовите символ Курсор, нажмите кнопку ОК и приготовьтесь его редактировать .
Для того чтобы воплотить эффект мигания, создайте анимацию типа Motion Tween следующим образом (рис. 9.8).
6 Па чевертом фрейме (второй ключеиой кадр) курсор меняет цвет с черного на серый , например c #000000 на #DDDDDD. Настройте цвет с помощью пункта Tint (оттенок) меню Color панели Properties
Мигающий курсор готов. Теперь его надо привнести в основной клип и заставить двигаться перед каждой появляющейся буквой.
Вернитесь на сцену клипа и создайте на слое ползунок, который уже содержит movie-символ Курсор, анимацию типа Motion Tween в соответствии с рис. 9.7 (слой ползунок).
На первом ключевом кадре символ курсора находится в левой части сцены, на том месте, где готовится появиться первая буква словосочетания "Пишущая машинка".
Ко второму ключевому кадру (36-й кадр) курсор перемещается туда, где возникнет последняя буква вышеупомянутого словосочетания.
При тестировании обратите внимание на то, чтобы курсор находился точно перед появляющейся буквой, не сильно опережая ее и ни в коем случае не запаздывая.
