Урок 6

Содержание: Изменение яркости, оттенка и прозрачности Текстовые эффекты на базе изменения прозрачности Освещение от свечи Слайд-шоу с эффектом изменения прозрачности Замена одного символа на другой

И ЗМЕНЕНИЕ ЯРКОСТИ, ОТТЕНКА И ПРОЗРАЧНОСТИ В предыдущих уроках мы рассмотрели примеры автоматической анимации движения Motion Tween, в которых моделировалась анимация перемещения и изменения формы. Следует отметить, что слово «Motion» (движение) в названии данной функции отражает только часть ее возможностей, поскольку Motion Tween позволяет не только задавать анимацию движения и деформации, но и, например, осуществлять покадровое изменение цвета, яркости, прозрачности и других эффектов

Нарисуем прямоугольник на некотором фоне (отличном от белого) и определим анимацию Motion Tween, при которой прямоугольник будет переходить сам в себя на протяжении 20 кадров.

Далее щелкнем на экземпляре символа в последнем кадре, в результате чего в панели Properties появится меню выбора цвета Color, в котором выберем настраиваемый параметр Brightness (яркость)

Увеличим параметр Brightness до 100%, в результате чего получим фильм. Соответственно если принять яркость в последнем кадре на уровне – 100%, то получим переход цвета от исходного к черному. Следующий параметр, находящийся в том же меню это Tint (оттенок). Он позволяет определить цвет, в который будет окрашиваться экземпляр символа. Панель, показанная на рисунке, позволяет выбрать цвет из палитры, определить численные значения цветовых составляющих RGB, а также оттенок цвета от прозрачного (1%) до насыщенного (100%).

Наиболее часто используемым является параметр, Alpha, который определяет прозрачность экземпляров, вернее непрозрачность, поскольку полная прозрачность задается при Alpha = 0. Для определения сложных цветовых эффектов для растровых изображений наиболее удобен режим Advanced. Рассмотрим пример, в котором будет меняться цветовая схема растровой картинки, показанной на рис.

При выборе пункта Advanced в меню Color появляется кнопка Settings, при нажатии на которую вызывается панель Advanced Effect. Данная панель позволяет регулировать по отдельности значения каждой из цветовых составляющих RGB и прозрачности Alpha. Вычисление цвета в каждом из каналов R, G, B производится по формуле: Red = (x1 * R) + y1, Green = (x2 *G) + y2, Blue = (x3 * B) + y3, где х1, x2, x3 изменяется от –1 до +1 (задается в процентах от –100 до +100%), y1, y2, y3 параметры, которые могут изменять свое значение от –255 до При этом если значение цветовой составляющей становится отрицательным, то оно приравнивается к нулю. На рисунке параметры х1, x2, x3 определены равными –1 (или 100%), а y1, y2, y Таким образом, задан эффект создания негатива цветного изображения.

Т ЕКСТОВЫЕ ЭФФЕКТЫ НА БАЗЕ ИЗМЕНЕНИЯ ПРОЗРАЧНОСТИ Рассмотренные возможности изменения цвета и прозрачности экземпляров позволяют создавать различные текстовые эффекты. В качестве примера рассмотрим, как создать эффект растворения букв.

Введем исходный текст в нашем примере слово «Привет». Для того чтобы эффект был нагляднее, выберем режим Bold. Далее разобьем текст по команде Modify => Break Apart и применим команду Modify => Time Line => Distribute to Layers, после чего каждая буква слова будет помещена в отдельный слой, при этом каждый слой будет назван соответствующей буквой

Перейдем в слой с первой буквой и создадим анимацию Motion Tween на 10 кадров. В последнем кадре увеличим масштаб буквы до 300% для этого вызовем панель Transform по команде Window => Design Panels => Transform и введем нужное значение масштаба в процентах.

Далее выделим экземпляр символа в 10-м кадре и в панели Properties увеличим прозрачность экземпляра символа. При установке параметра Alpha на уровне 0% буква станет прозрачной.

Далее переместим первый фрейм в слое «р» в 10-й кадр (для этого необходимо щелкнуть по нему мышью и потом в режиме drag&drop перетащить в нужное место) и повторим ту же процедуру, что и с буквой «П».

Аналогично поступим со всеми буквами.

Теперь вернемся к слою Layer 1 и в первом кадре поместим слово «Привет» так, чтобы оно совпало с буквами на других слоях. Далее в 60-м кадре слоя Layer 1 введем ключевой кадр, после чего все кадры автоматически заполнятся тем же текстом. Если анимация покажется вам слишком медленной, можно поменять скорость смены кадров. Для этого нужно дважды щелкнуть мышью на текущем значении скорости смены кадров 12 fps, после чего появится панель Document Properties, на которой следует задать более высокую скорость смены кадров.

О СВЕЩЕНИЕ ОТ СВЕЧИ Импортируем фотографию с изображением горящей свечи и назовем слой, в который мы поместили данное растровое изображение, Нands.

Добавим сверху еще один слой и назовем его Flame (пламя). Скопируем в первый кадр этого слоя изображение из слоя Нands. Для этого необходимо нажать клавишу Alt и переместить кадр в первом кадре слоя Flame появится то же изображение

Затем переведем растровое изображение в слое Flame в векторное. Для этого выделим изображение, выполним команду Modify => Bitmap =>Trace Bitmap и выберем параметры трассировки

После того как растровое изображение будет переведено в векторное, при помощи ластика уберем все лишнее и оставим только векторный рисунок пламени

Для того чтобы передать эффект колебания пламени свечи, определим анимацию, при которой пламя будет деформироваться. Чтобы ориентироваться по фоновой картинке, добавим растровое изображение фоном на все кадры. Для этого в слое Нands в 40-м кадре вставим ключевой фрейм в результате растровая картинка скопируется на все кадры со 2-го по 40- й. Далее определим в слое Flame анимацию Motion Tween на 15 кадров и в последнем кадре увеличим пламя и поднимем его вверх. Для того чтобы не оторвать основание пламени от фитиля, удобно выставить режим контурной кальки и отследить, чтобы нижний край пламени оставался на месте.

Затем в 40-м кадре добавим еще один ключевой кадр и вновь деформиру ем пламя

В результате получим анимацию. Недостатком данной анимации является то, что пламя меняется, а ореол вокруг него нет. Поэтому добавим анимацию ореола. Нарисуем эллипс вокруг пламени

Выберем радиальную заливку и вызовем меню Color Mixer по командеWindow => Design Panels => Color Mixer. Щелкнем мышью по левому маркеру и выберем для него желтый цвет и непрозрачный режим (Alpha = 100%). Затем щелкнем по правому маркеру и выберем для него белый цвет и полную прозрачность (Alpha = 0%). Зальем контур и создадим, таким образом, фигуру с градиентом цвета и прозрачности.

Далее уберем линию обводки эллипса. Как видно из рисунка, у ореола получились жесткие края, что недопус- тимо.

Для того чтобы убрать этот дефект, необходимо откорректировать градиентную заливку. Для этого выберем инструмент Fill Transform и щелкнем мышью по радиальной заливке, в результате появится эллипс с четырьмя маркерами (один внутри и три на линии). Из трех маркеров, лежащих на линии, средний служит для изменения диаметра, правый для изменения окружности в эллипс, а левый позволяет поворачивать эллипс. Необходимо взяться мышью за средний маркер (из трех лежащих на кривой) и уменьшить радиус эллипса, в результате жесткие края исчезнут. С помощью других маркеров придадим светящемуся ореолу нужное положение на плоскости

Далее применим анимацию Motion Tween к ореолу. Он должен увеличиваться в момент увеличения пламени, одновременно с увеличением размера пламени должна меняться яркость свечения ореола. На рисунке показано, что яркость ореола увеличена до + 66%.

Теперь неестественно выглядит то, что освещенность рук не меняется при изменении яркости горения свечи. Исправим и этот недостаток. Изменим статичный фон на анимированный. Удалим в слое Нands все кадры, кроме первого. Для этого следует нажать клавишу Shift, щелкнуть мышью по второму кадру, а затем по последнему в результате эти кадры станут выделенными и окрасятся в черный цвет. Далее необходимо щелкнуть правой кнопкой мыши по черному полю и выбрать в появившемся меню пункт Remove Frames.

Применим к первому кадру слоя Нands анимацию Motion Tween и установим яркость кадра в первом и последнем кадрах –24%, а в 15-м +16%. Если что-то осталось непонятным, вы можете открыть исходный файл 2. Конечно, в данном ролике (зацикленном по кругу) горящая свеча выглядит не очень естественно в силу строгой периодичности деформации пламени. Однако следует понимать, что в данном примере мы лишь рассмотрели принцип, а если добавить различные колебания пламени, то можно добиться большей правдоподобности.

С ЛАЙД - ШОУ С ЭФФЕКТОМ ИЗМЕНЕНИЯ ПРОЗРАЧНОСТИ Эффект изменения прозрачности объектов используется достаточно часто. В частности, таким образом можно создать эффект смены кадров в слайд-шоу. Данный эффект достигается путем покадрового увеличения прозрачности одного изображения с параллельным увеличением непрозрачности другого. В качестве примера приведен фрагмент слайд-шоу из рисунков. Каждое изображение появляется с нулевой непрозрачностью, которая возрастает до 100% за пять кадров, далее в течение десяти кадров демонстрируется изображение, а затем на протяжении пяти кадров прозрачность вновь падает до нуля. В то время как одно изображение растворяется за пять кадров, следующее проступает за то же количество кадров.

Управляя прозрачностью объектов, можно также отобразить внутреннее строение устройств. В качестве примера можно привести баннер, в котором показана проступающая под корпусом телефона микросхема. Эффект построен на изменении прозрачности: параллельно идет увеличение прозрачности корпуса, уменьшение прозрачности внутренней микросхемы и постепенный ее поворот, в итоге в поле зрения попадает расположенный на микросхеме процессор, на котором обозначен логотип компании.

Прозрачность корпуса растет, прозрачность микросхемы падает Корпус телефона растворяется, и становится видна установленная в нем плата

З АМЕНА ОДНОГО СИМВОЛА НА ДРУГОЙ В прошлом уроке мы рассказали о том, как создавать и дублировать анимированные графические символы и мувиклипы, но о замене одного экземпляра символа другим речь не шла. Рассмотрим эту возможность применительно к символам, в которых используется анимация движения и изменения цвета. Программа Flash позволяет назначить экземпляру символа свойства другого символа. Для того чтобы понять, как это происходит, рассмотрим следующий пример. Создадим фильм, в котором будут задействованы два символа. Для этого построим символ-мувиклип elips-rot, в котором будет перемещаться (слева направо) и вращаться эллипс.

А также создадим еще один мувиклип rect-blend, в котором будет перемещаться (сверху вниз) и менять цвет прямоугольник

В результате в библиотеке появятся два мувиклипа и два графических символа, на базе которых они построены. Поместим экземпляры обоих клипов на сцену, в результате чего получим фильм.

Теперь заменим свойства экземпляра мувиклипа elips-rot на свойства мувиклипа rect-blend. Обратите внимание, речь идет об изменении свойств именно экземпляра, а не самого мувиклипа! Для этого выделим экземпляр на сцене и вызовем панель Properties по команде Window => Properties (если она скрыта в текущий момент).

В панели Properties нажмем на кнопку Swap, в результате появится панель Swap Symbol, которая позволяет назначить экземпляру символа elips-rot свойства другого символа.

Выберем в панели символ rect-blend и нажмем кнопку ОК. В результате в фильме появятся два прямоугольника. Обратите внимание, что при этом сам символ elips-rot не изменился. Если заглянете в библиотеку, то убедитесь, что это по-прежнему эллипс, который вращается и перемещается вправо. А вот его экземпляр на сцене приобрел свойства мувиклипа rect-blend.

Теперь рассмотрим вариант изменения свойств самого мувиклипа elips-rot. Дважды щелкните на экземпляре символа elips-rot, после чего произойдет переход в режим редактирования символа. После нажатия кнопки Swap появится панель Swap Symbol.

В данной панели можно изменить свойства мувиклипа путем смены графического символа, на котором он базируется. Заменим выделенный символ Tween 1 (эллипс) на Tween 2 (прямоугольник) в результате изменится сам мувиклип-символ, в чем можно убедиться, вызвав окно библиотеки.

Он примет форму прямоугольника, но будет по-прежнему выполнять движение с поворотом. Автоматически изменится и экземпляр символа, созданный на его основе. На сцене опять-таки два прямоугольника, но анимация их различна.