Без темы
<<  Художественно-конструктивный анализ модели Ценовое зонирование территорий: возможности и проблемы Елена Ермолаева  >>
Цветовые эффекты на базе автоматической анимации движения
Цветовые эффекты на базе автоматической анимации движения
Содержание:
Содержание:
Изменение яркости, оттенка и прозрачности
Изменение яркости, оттенка и прозрачности
Нарисуем прямоугольник на некотором фоне (отличном от белого) и
Нарисуем прямоугольник на некотором фоне (отличном от белого) и
Далее щелкнем на экземпляре символа в последнем кадре, в результате
Далее щелкнем на экземпляре символа в последнем кадре, в результате
Увеличим параметр Brightness до 100%, в результате чего получим фильм
Увеличим параметр Brightness до 100%, в результате чего получим фильм
Наиболее часто используемым является параметр, Alpha, который
Наиболее часто используемым является параметр, Alpha, который
При выборе пункта Advanced в меню Color появляется кнопка Settings,
При выборе пункта Advanced в меню Color появляется кнопка Settings,
Текстовые эффекты на базе изменения прозрачности
Текстовые эффекты на базе изменения прозрачности
Введем исходный текст — в нашем примере слово «Привет»
Введем исходный текст — в нашем примере слово «Привет»
Перейдем в слой с первой буквой и создадим анимацию Motion Tween на 10
Перейдем в слой с первой буквой и создадим анимацию Motion Tween на 10
Далее выделим экземпляр символа в 10-м кадре и в панели Properties
Далее выделим экземпляр символа в 10-м кадре и в панели Properties
Далее переместим первый фрейм в слое «р» в 10-й кадр (для этого
Далее переместим первый фрейм в слое «р» в 10-й кадр (для этого
Аналогично поступим со всеми буквами
Аналогично поступим со всеми буквами
Теперь вернемся к слою Layer 1 и в первом кадре поместим слово
Теперь вернемся к слою Layer 1 и в первом кадре поместим слово
Освещение от свечи
Освещение от свечи
Добавим сверху еще один слой и назовем его Flame (пламя)
Добавим сверху еще один слой и назовем его Flame (пламя)
Затем переведем растровое изображение в слое Flame в векторное
Затем переведем растровое изображение в слое Flame в векторное
После того как растровое изображение будет переведено в векторное, при
После того как растровое изображение будет переведено в векторное, при
Для того чтобы передать эффект колебания пламени свечи, определим
Для того чтобы передать эффект колебания пламени свечи, определим
Цветовые эффекты на базе автоматической анимации движения
Цветовые эффекты на базе автоматической анимации движения
Затем в 40-м кадре добавим еще один ключевой кадр и вновь деформируем
Затем в 40-м кадре добавим еще один ключевой кадр и вновь деформируем
Нарисуем эллипс вокруг пламени
Нарисуем эллипс вокруг пламени
Выберем радиальную заливку и вызовем меню Color Mixer по командеWindow
Выберем радиальную заливку и вызовем меню Color Mixer по командеWindow
Далее уберем линию обводки эллипса
Далее уберем линию обводки эллипса
Для того чтобы убрать этот дефект, необходимо откорректировать
Для того чтобы убрать этот дефект, необходимо откорректировать
Далее применим анимацию Motion Tween к ореолу
Далее применим анимацию Motion Tween к ореолу
Теперь неестественно выглядит то, что освещенность рук не меняется при
Теперь неестественно выглядит то, что освещенность рук не меняется при
Применим к первому кадру слоя Нands анимацию Motion Tween и установим
Применим к первому кадру слоя Нands анимацию Motion Tween и установим
Слайд-шоу с эффектом изменения прозрачности
Слайд-шоу с эффектом изменения прозрачности
Цветовые эффекты на базе автоматической анимации движения
Цветовые эффекты на базе автоматической анимации движения
Управляя прозрачностью объектов, можно также отобразить внутреннее
Управляя прозрачностью объектов, можно также отобразить внутреннее
Корпус телефона растворяется, и становится видна установленная в нем
Корпус телефона растворяется, и становится видна установленная в нем
Замена одного символа на другой
Замена одного символа на другой
Цветовые эффекты на базе автоматической анимации движения
Цветовые эффекты на базе автоматической анимации движения
А также создадим еще один мувиклип — rect-blend, в котором будет
А также создадим еще один мувиклип — rect-blend, в котором будет
В результате в библиотеке появятся два мувиклипа и два графических
В результате в библиотеке появятся два мувиклипа и два графических
Теперь заменим свойства экземпляра мувиклипа elips-rot на свойства
Теперь заменим свойства экземпляра мувиклипа elips-rot на свойства
В панели Properties нажмем на кнопку Swap, в результате появится
В панели Properties нажмем на кнопку Swap, в результате появится
Выберем в панели символ rect-blend и нажмем кнопку ОК
Выберем в панели символ rect-blend и нажмем кнопку ОК
Теперь рассмотрим вариант изменения свойств самого мувиклипа elips-rot
Теперь рассмотрим вариант изменения свойств самого мувиклипа elips-rot
В данной панели можно изменить свойства мувиклипа путем смены
В данной панели можно изменить свойства мувиклипа путем смены
Он примет форму прямоугольника, но будет по-прежнему выполнять
Он примет форму прямоугольника, но будет по-прежнему выполнять

Презентация на тему: «Цветовые эффекты на базе автоматической анимации движения». Автор: XP GAME 2010. Файл: «Цветовые эффекты на базе автоматической анимации движения.pptx». Размер zip-архива: 818 КБ.

Цветовые эффекты на базе автоматической анимации движения

содержание презентации «Цветовые эффекты на базе автоматической анимации движения.pptx»
СлайдТекст
1 Цветовые эффекты на базе автоматической анимации движения

Цветовые эффекты на базе автоматической анимации движения

Урок 6

2 Содержание:

Содержание:

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

3 Изменение яркости, оттенка и прозрачности

Изменение яркости, оттенка и прозрачности

В предыдущих уроках мы рассмотрели примеры автоматической анимации движения — Motion Tween, в которых моделировалась анимация перемещения и изменения формы. Следует отметить, что слово «Motion» (движение) в названии данной функции отражает только часть ее возможностей, поскольку Motion Tween позволяет не только задавать анимацию движения и деформации, но и, например, осуществлять покадровое изменение цвета, яркости, прозрачности и других эффектов

4 Нарисуем прямоугольник на некотором фоне (отличном от белого) и

Нарисуем прямоугольник на некотором фоне (отличном от белого) и

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

5 Далее щелкнем на экземпляре символа в последнем кадре, в результате

Далее щелкнем на экземпляре символа в последнем кадре, в результате

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

6 Увеличим параметр Brightness до 100%, в результате чего получим фильм

Увеличим параметр Brightness до 100%, в результате чего получим фильм

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

7 Наиболее часто используемым является параметр, Alpha, который

Наиболее часто используемым является параметр, Alpha, который

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

8 При выборе пункта Advanced в меню Color появляется кнопка Settings,

При выборе пункта Advanced в меню Color появляется кнопка Settings,

ри выборе пункта 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 до + 255. При этом если значение цветовой составляющей становится отрицательным, то оно приравнивается к нулю. На рисунке параметры х1, x2, x3 определены равными –1 (или 100%), а y1, y2, y3 — 255. Таким образом, задан эффект создания негатива цветного изображения.

9 Текстовые эффекты на базе изменения прозрачности

Текстовые эффекты на базе изменения прозрачности

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

10 Введем исходный текст — в нашем примере слово «Привет»

Введем исходный текст — в нашем примере слово «Привет»

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

11 Перейдем в слой с первой буквой и создадим анимацию Motion Tween на 10

Перейдем в слой с первой буквой и создадим анимацию Motion Tween на 10

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

12 Далее выделим экземпляр символа в 10-м кадре и в панели Properties

Далее выделим экземпляр символа в 10-м кадре и в панели Properties

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

13 Далее переместим первый фрейм в слое «р» в 10-й кадр (для этого

Далее переместим первый фрейм в слое «р» в 10-й кадр (для этого

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

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

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

15 Теперь вернемся к слою Layer 1 и в первом кадре поместим слово

Теперь вернемся к слою Layer 1 и в первом кадре поместим слово

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

16 Освещение от свечи

Освещение от свечи

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

17 Добавим сверху еще один слой и назовем его Flame (пламя)

Добавим сверху еще один слой и назовем его Flame (пламя)

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

18 Затем переведем растровое изображение в слое Flame в векторное

Затем переведем растровое изображение в слое Flame в векторное

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

19 После того как растровое изображение будет переведено в векторное, при

После того как растровое изображение будет переведено в векторное, при

помощи ластика уберем все лишнее и оставим только векторный рисунок пламени

20 Для того чтобы передать эффект колебания пламени свечи, определим

Для того чтобы передать эффект колебания пламени свечи, определим

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

21 Цветовые эффекты на базе автоматической анимации движения
22 Затем в 40-м кадре добавим еще один ключевой кадр и вновь деформируем

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

пламя

23 Нарисуем эллипс вокруг пламени

Нарисуем эллипс вокруг пламени

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

24 Выберем радиальную заливку и вызовем меню Color Mixer по командеWindow

Выберем радиальную заливку и вызовем меню Color Mixer по командеWindow

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

25 Далее уберем линию обводки эллипса

Далее уберем линию обводки эллипса

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

26 Для того чтобы убрать этот дефект, необходимо откорректировать

Для того чтобы убрать этот дефект, необходимо откорректировать

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

27 Далее применим анимацию Motion Tween к ореолу

Далее применим анимацию Motion Tween к ореолу

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

28 Теперь неестественно выглядит то, что освещенность рук не меняется при

Теперь неестественно выглядит то, что освещенность рук не меняется при

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

29 Применим к первому кадру слоя Нands анимацию Motion Tween и установим

Применим к первому кадру слоя Нands анимацию Motion Tween и установим

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

30 Слайд-шоу с эффектом изменения прозрачности

Слайд-шоу с эффектом изменения прозрачности

Эффект изменения прозрачности объектов используется достаточно часто. В частности, таким образом можно создать эффект смены кадров в слайд-шоу. Данный эффект достигается путем покадрового увеличения прозрачности одного изображения с параллельным увеличением непрозрачности другого. В качестве примера приведен фрагмент слайд-шоу из рисунков. Каждое изображение появляется с нулевой непрозрачностью, которая возрастает до 100% за пять кадров, далее в течение десяти кадров демонстрируется изображение, а затем на протяжении пяти кадров прозрачность вновь падает до нуля. В то время как одно изображение растворяется за пять кадров, следующее проступает за то же количество кадров.

31 Цветовые эффекты на базе автоматической анимации движения
32 Управляя прозрачностью объектов, можно также отобразить внутреннее

Управляя прозрачностью объектов, можно также отобразить внутреннее

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

33 Корпус телефона растворяется, и становится видна установленная в нем

Корпус телефона растворяется, и становится видна установленная в нем

плата

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

34 Замена одного символа на другой

Замена одного символа на другой

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

35 Цветовые эффекты на базе автоматической анимации движения
36 А также создадим еще один мувиклип — rect-blend, в котором будет

А также создадим еще один мувиклип — rect-blend, в котором будет

перемещаться (сверху вниз) и менять цвет прямоугольник

37 В результате в библиотеке появятся два мувиклипа и два графических

В результате в библиотеке появятся два мувиклипа и два графических

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

38 Теперь заменим свойства экземпляра мувиклипа elips-rot на свойства

Теперь заменим свойства экземпляра мувиклипа elips-rot на свойства

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

39 В панели Properties нажмем на кнопку Swap, в результате появится

В панели Properties нажмем на кнопку Swap, в результате появится

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

40 Выберем в панели символ rect-blend и нажмем кнопку ОК

Выберем в панели символ rect-blend и нажмем кнопку ОК

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

41 Теперь рассмотрим вариант изменения свойств самого мувиклипа elips-rot

Теперь рассмотрим вариант изменения свойств самого мувиклипа elips-rot

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

42 В данной панели можно изменить свойства мувиклипа путем смены

В данной панели можно изменить свойства мувиклипа путем смены

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

43 Он примет форму прямоугольника, но будет по-прежнему выполнять

Он примет форму прямоугольника, но будет по-прежнему выполнять

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

«Цветовые эффекты на базе автоматической анимации движения»
http://900igr.net/prezentacija/informatika/tsvetovye-effekty-na-baze-avtomaticheskoj-animatsii-dvizhenija-90416.html
cсылка на страницу

Без темы

778 презентаций
Урок

Информатика

130 тем
Слайды
900igr.net > Презентации по информатике > Без темы > Цветовые эффекты на базе автоматической анимации движения