- •Лабораторная работа №5 «Интро-ролик»
- •1. Основные принципы создания интро-роликов
- •2. Создание концепции. Сценарий
- •3. Создание каркаса
- •4. Векторная карта из растрового рисунка
- •5. Пещера-трансформер
- •6. Тавр
- •7. Работа с текстом
- •8. Отладка анимации
- •9. Работаем над ссылками
- •10. Кнопки-картинки
- •11. Skip Intro
- •12. Кнопка для проигрывания заставки еще раз
- •13. Кнопка для перехода к концу клипа
3. Создание каркаса
Работу мы построим следующим образом. Вначале разберемся с анимацией основного клипа, затем подумаем над наполнением ролика интерактивностью.
Компактность клипа — одно из главных условий, предъявляемых к Flash-роликам. Существует довольно эффективный прием оптимизации клипа — "Экономия", позволяющий существенно уменьшить объем клипа в килобайтах.
Он основан на том, что изначально клип делается в 1,5—2 раза меньше, чем требуется, а потом попросту растягивается. Так как в основе Flash-анимации лежит векторная графика, то такое "растяжение" происходит без потери качества. Следует соблюдать осторожность при увеличении растровых импортированных изображений. Но и тут нет ничего страшного, поскольку если оптимизировать рисунки с помощью, например, средств Adobe Photoshop, то удастся добиться золотой середины между качеством изображения и занимаемым им объемом в байтах (или в килобайтах).
Настраиваем параметры клипа: в Document Properties (Свойства документа) задаем песочный фон — #eocfa7.
Задаем ширину и высоту клипа, для чего вводим значения 40 0 и 300 пикселов соответственно. Потом мы растянем клип, увеличив его "площадь" в два раза и сделав ее равной 800x600 пикселов. Но это позже.
Cоздадим свой movie-символ m_clip для основного действия интро-ролика.
4. Векторная карта из растрового рисунка
Начнем с фоновой анимации. Создайте прямоугольник, размерами равными сцене, т.е. 300 на 400 пикселов. С помощью него мы прорисуем в конечном итоге вход в жилище диких тавров — пещеру. Дело происходит в Крыму, и мы обязательно подчеркнем сей факт — одной из ступеней трансформации сделаем карту Крыма.
Создайте узнаваемый рисунок Крымского полуострова (рис.1 (1)):
1. Для этого необходимо иметь в запасе хотя бы небольшую растровую фотографию. Таковая у нас имеется — файл crimea.jpg. Импортируйте рисунок на сцену, а затем преобразуйте в векторный объект, используя параметры, приведенные на рис. 2 .
Рис.1. . Крымский полуостров
Рис.2. Параметры трассировки в диалоговом окне Trace Bitmap
2. Так как карта контрастна можно выделить одним щелчком мыши черный фон карты и одним нажатием клавиши <Delete> удалить его, как показано на рис. 1 (2).
3. Пестрая карта нам тоже ни к чему. Выделяем остаток и выбираем для ее заливки с помощью инструмента Paint Bucket (Ведро краски) любой цвет. В итоге карта становится похожей на рис.1 (3).
Теперь этот векторный объект можно немного сгладить, используя параметры Smooth, растянуть и расположить на третьем ключевом кадре "прямоугольниковой" последовательности.
Так же изящно выделяем карту и без сожаления нажимаем <Delete> — в прямоугольнике образовалась дыра, по форме точно соответствующая очертаниям Крымского полуострова, как на рис. 3 (1).
5. Пещера-трансформер
Сейчас можно продолжить последовательность из ключевых кадров, изменяя фигуру в соответствии с рис. 3 и создавая анимацию формы Shape Tween, как на рис.6 (слой фон).
Рис. 3. Пещерные трансформации
Используя комбинацию клавиш <Ctrl>+<Shift>+<H>, вставьте четыре контрольные точки-подсказки Hint (Контрольная точка), размещая их по краям прямоугольника. Это оградит фигуру от чрезмерных трансформаций и оставит внешний ее контур без изменения.
Проследите за тем, чтобы на протяжении всей анимации фильма края прямоугольника не трансформировались, для этого активно пользуйтесь контрольными точками (рис. 4). А чтобы можно было отслеживать характер изменения формы, используйте параметры Onion Skin (Восковка), об этом речь пойдет далее.
Рис. 4. Так должны располагаться Hint на всех состояниях пещеры