Рисуем на мониторе
(Корел Дро, Фотошоп и Макромедия Флэш)
НЕСКОЛЬКО УРОКОВ ПО ФЛЭШУ
к списку уроков
УРОК ПЯТНАДЦАТЫЙ
БАННЕРНОЕ БЕЗУМИЕ
БАННЕР В СТИЛЕ «ПАРОВОЗИКА»
Не особо трудозатратный баннер. Вместо циркулярной пилы можно использовать логотип фирмы.
Рис. 1
«ВЗВРЫВАЮЩИЙСЯ» БАННЕР
Рис. 2
«БЕГУЩАЯ НАДПИСЬ»
Рис. 3
Вместо того, чтобы делать фонарики, изготовим решетку.
Рис. 4
На этот баннер меня вдохновил фильм Ангар-48 (или 49, не помню).
Рис. 5
БАННЕР В ДУХЕ СТАРОГО КОМПЬЮТЕРА
Давным-давно были такие компьютеры, которые показывали только текст (как калькуляторы). Монитор делился на прямоугольные участки (знакоместа), в каждом знакоместе мог отображаться один символ. Чаще всего пользователи выбирали черный цвет фона и зеленый цвет символов.
Рис. 6
1. Заготовку как обычно сделаем в Кореле. В габаритный прямоугольник с соотношением сторон 468 х 60 поместим текстовый объект, в которм текст набран шрифтом Monocondenced_C. Знак подчеркивания будем использовать как мигающий курсор.
Рис. 7
2. Сэкспортируем заготовку в *.eps. В иллюстраторе *.eps сохраним как *.ai. *.ai поместим в *.fla.
3. Frame rate = 2 fps.
4. Все импортированное группируем, растягиваем (сжимаем) до размера 468 х 60 точек и центрируем по экрану.
5. Переносим габаритный прямоугольник на слой вниз.
6. Текстовый объект разбиваем до мазков кисти.
7. Из верхнего знака подчеркивания делаем символ типа Movie clip с частотой мигания 1 / кадр и переносим этот клип на один слой вверх.
8. Выделяем все буквы и делаем их совершенно прозрачными. Постепенно возвращаем им непрозрачность, как показано на рис. 10. До 72 кадра «оператор ПК» набирает текст, а с 86 кадра уничтожает его.
Рис. 8
Рис. 9
Рис. 10
9. Соответственно перемещаем клип курсора. При этом используем нижний знак подчеркивания для выравнивания по нему клипа курсора.
БАННЕР В СТИЛЕ ЗАБОРА ВОКРУГ СТРОЙКИ
Здесь некие невидимые рабочие будут подносить фрагменты баннера, прибивать их к забору, потом разбирать и менять на новые. Этот баннер ожидается быть довольно затратным по времени.
Рис. 11
Здесь нужно остановиться и пристально рассмотреть логическую операцию пересечения в Кореле (всё это справедливо и для Иллюстратора, и для Флэша).
В пространстве встречаются и частично совпадают друг с другом два объекта: желтый прямоугольник и красный текст (рис. 12). При пересечении важен порядок выделения объектов. Первый объект называется исходным (Source object, сёрс абджект), последний — целевым (Target object, таргет абджект). В данном случае 1 и 2. После пересечения остаётся их общая часть (рис. 13).
Рис. 12
Рис. 13
Мы можем указать сохранить исходный объект (рис. 14 и 15),
Рис. 14
Рис. 15
целевой объект (рис. 16 и 17),
Рис. 16
Рис. 17
или оба (рис. 18 и 19).
Рис. 18
Рис. 19
Порядок действий в Кореле:
1. Из 20 прямоугольников собираем баннер с соотношением сторон 468 х 60.
2. Группируем.
3. Размножаем до трёх штук.
4. Создаем три надписи и центрируем их по трем сгруппированным баннерам.
5. Разгруппировываем незаполненные баннеры.
6. С текстом и с каждым прямоугольником совершаем операцию пересечения с сохранением как исходного объекта, так и целевого.
7. Уничтожаем тексты.
8. Группируем попарно каждый прямоугольник и фрагмент текста на нем.
Рис. 20
9. Группируем каждый баннер.
10. Все три баннера экспортируем в *.eps.
В Иллюстаторе:
1. Сохраняем *.eps как *.ai.
Во Флэше:
1. Нам потребуется создать 3 основных сцены и три вставки между ними.
2. Во вставке будет присутствовать только габаритный прямоугольник баннера.
3. В каждой основной сцене объекты будут разведены по слоям следующим образом:
Первый слой — габаритный прямоугольник.
Второй слой — слой, откуда будем брать прямоугольники с фрагментами текста.
Над ним двадцать слоев, в каждый из которых поместим по одному прямоугольнику с фрагментом текста (рис. 21).
4. Fps=30.
5. Продолжительность вставочной серии составляет 25 кадров.
6. С первого кадра по пятидесятый прямоугольники собираются, а со 125 по 175 разлетаются.
Рис. 21
7. Кривая ускорения разлета каждого прямоугольника выглядит так:
