Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker. Часть 2.

Воскресенье, 21 Сентября 2014 г. 17:39 + в цитатник

Цитата сообщения novprospekt

Прочитать целиком В свой цитатник или сообщество!

Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker. Часть 2.

В уроке
"Эффект колышущейся картинки с помощью маски"
для программы Sothink SWF Quicker мы с вами делали эффект колыщущейся картинки с помощью анимированной маски. Многим этот эффект очень понравился.
Теперь у меня скопилось много вопросов о том, как сделать, чтобы колебалось не всё изображение, а только отдельные его участки.
Давайте попробуем это сделать.
Я взяла вот такую картинку и хочу сделать, чтобы колыхалась вода в вазочке и средний из тюльпанов.
0_928a5_ee372be9_L (311x500, 115Kb)

Сам готовый флеш файл анимированной маски есть в материалах к уроку и прилагается для скачивания.
Материалы к уроку "Эффект колышущейся картинки с помощью маски."
Если у вас этой анимированной маски нет, то скачайте материалы к уроку и откройте флешку "Анимированная маска колебаний" в отдельном окне программы Sothink SWF Quicker.
Файл -Новый -Новое окно и затем Файл - Импорт , указав путь к флешке "Анимированная маска колебаний"

У вас в Библиотеке программы появиться мувиклип с маской и его графическое изображение.

21-09-2014 12-45-27 (497x412, 157Kb)

Продолжим нашу работу и снова откроем новое окно программы Sothink SWF Quicker. В этом окне и будет происходить вся наша дальнейшая работа.
Файл -Новый -Новое окно
В Библиотеку этого нового окна скопируйте мувиклип 19 с анимированной маской колебаний. Для этого выделите мувиклип 19 в ранее открытом окне, правой кнопкой мыши вызавите контекстное меню и выбирите пункт "Копировать".

21-09-2014 13-48-26 (509x439, 166Kb)

Затем перейдите в Библиотеку вновь открытого окна программы и щелкнув во вкладке "Библиотека" выберите пункт "Вставить"

21-09-2014 13-52-43 (491x538, 180Kb)

Теперь в это же вновь открытое окно импортируем картинку с которой будем работать.

Файл -Импорт

Картинка, как и анимированная маска после этого появиться в Библиотеке.
21-09-2014 13-59-59 (700x430, 149Kb)

Размеры рабочего поля установите такими, чтобы картинка могла полность разместиться в рабочем пространстве. В мом случае размеры картинки 311x500 пикс. и поэтому размеры Рабочего поля в панели свойства я выставляю следующие
21-09-2014 14-06-36 (403x239, 45Kb)

На Временной шкале у нас есть слой с картинкой. Переименуем его и назовем "Картинка 1".
21-09-2014 14-28-49 (700x511, 229Kb)

Дополнительно создадим ещё два слоя и разместим их - один выше слоя
"Картинка 1", а другой под слой "Картинка 1".
21-09-2014 14-30-40 (700x489, 230Kb)

Вновь созданные слои также переименуем и назовём верхний слой (слой 3) - "Анимированная маска", а нижний слой (слой 2) - "Картинка 2"
21-09-2014 14-40-38 (564x471, 208Kb)

Для того, чтобы вам легче было работать с изображением и оно всё помещалось на Рабочем поле можно перейти на вкладку меню Вид и вызвать

Вид -Масштабирование -Показать всё

Теперь давайте разместим нашу картинку и анимированную маску по созданным на Временной шкале слоям, как мы это делали в первом уроке.

Выделите слой "Картинка 1", На Рабочем поле щелкните по картинке и выделите её. Щелкните по выделению правой кнопкой мыши и выберте пункт "Копировать".
21-09-2014 15-13-04 (700x700, 309Kb)

Перейдите и выделите слой "Картинка 2", щелкните вне Рабочего поля и выберите пункт "Вставить на месте"
21-09-2014 15-15-46 (650x650, 348Kb)

При этом у вас на Рабочем поле появиться выделение с картинкой, вставленной на слое "Картинка 2". Не снимая выделения с этой картинки и со слоя "Картинка 2", с клавиатуры нажмите 1-2 раза клавишу "Стрелка вниз". При одном нажатии колебание картинки будет мягким, незначительным, при двукратном нажатии колебание картинки будет большей силы.
21-09-2014 15-19-49 (700x480, 268Kb)

Таким образом, мы расположили нашу картинку на слоях "Картинка 1" и
"Картинка 2". Причём на слоё "Картинка 2" наша картинка смещена чуть-чуть вниз.
Настало время заняться анимированной маской. Её мы перетащим прямо из Библиотеки на Рабочее поле на слой "Анимированная маска".
Выделите слой "Анимированная маска" и инструментом "Выбор" (черная стрелка в панели инструментов) перетащите на этот слой на Рабочее поле мувиклип 19 из Библиотеки.
21-09-2014 15-45-43 (700x510, 239Kb)

После этого на Рабочем поле появиться анимированная маска. Необходимо проследить, чтобы она покрывала всю картинку полностью и немного уходила вниз и в стороны за Рабочее пространство.
21-09-2014 15-50-58 (628x700, 511Kb)

Поочередно выделяя слои "Анимированная маска" и "Картинка 1", назначим слой "Анимированная маска" - Маской, а слою "Картинка 1" присвоим - Маскировать. Теперь эти слои на Временной шкале будут выглядеть следующим образом
21-09-2014 16-13-30 (700x445, 337Kb)

Если мы сейчас нажмем кнопку предварительного просмотра для флешки, то увидим, что колышется у нас вся картинка. То есть, получим результат аналогичный с уроком первым. Нам же надо, чтобы колебалась только водичка в вазочке и один из тюльпанчиков.
А для этого надо сделать следующее
Отключаем глазок видимости слоя "Анимированная маска" и выделяем слой "Картинка 1". Стоя на слое "Картинка 1", на Рабочем поле инструментом Выбор выделяем нашу картинку и идем на вкладку меню "Модификация"
Модификация - Преобразовать в символ
21-09-2014 16-36-13 (700x590, 334Kb)

В открывшемся диалоговом окне преобразования выставляем следующие параметры и даём имя символу - "Выделение"
21-09-2014 16-41-21 (307x262, 85Kb)

После того как в диалоговом окне нажмёте "ОК", в Библиотеки появиться новый мувиклип "Выделение". По нему надо дважды щелкнуть, для того чтобы попасть в поле редактирования этого мувиклипа
21-09-2014 16-49-49 (700x455, 292Kb)

В поле редактирования мувиклипа "Выделение" имеется один слой, на котором расположена картинка с которой мы работаем. Выделите этот слой и выше него создайте новый слой "Выделение". На этом верхнем слое мы и будем выделять те участки картинки, которые будут колыхаться.
21-09-2014 17-01-12 (700x466, 224Kb)

Находясь на выделенном слое "Выделение" выбираем инструмент "Карандаш" и для него включаем режим "Рисовать как графику". Начинаем обводить "Карандашом" воду в вазочке, не задевая края самой вазочки. Не бойтесь, что выделение будет неровным. Колебания скроют эти неровности. Главное нарисовать неотрывно линию обводки и тогда у вас получиться векторная графическая фигура для маски (выделение). Обязательно проверьте, что нарисованный вами графический символ находится а слое "Выделение", а картинка находится на слое "Слой 1"
21-09-2014 17-49-35 (700x575, 346Kb)

Назначим слой "Выделение" маской, а слою "Слой 1" присвоим - маскировать. Включим предварительный просмотр и увидим, что сама картинка неподвижна, а водичка в вазочке колышется.
21-09-2014 17-59-45 (700x460, 233Kb)

Мы ещё также хотели, чтобы колыхался один из тюльпанчиков. Но для этого нам потребуется снова нарисовать графический символ для тюльпана на отдельном слое. И вот здесь будьте очень внимательны.
Можно делать сколько угодно выделений, но каждое следующее должно находится на отдельном слое и этот слой должен быть выше предыдущего слоя с выделением.
Таким образом, чтобы создать графическую маску для цветка нам надо выделить слой "Выделение", нажать на плюсик под Временной шкалой и выше слоя "Выделение" появится новый слой, который мы назовём "Выделение 1"
21-09-2014 18-27-33 (575x345, 174Kb)

Поскольку на слое "Выделение 1" будет находится графическая маска, а сам слой будет назначен маской, то соответственно под ним должен находится слой с тем, что мы будем маскировать. А маскировать мы будем все ту же нашу картинку, которая находится на слое "Слой 1". Следовательно надо выделить слой с картинкой и скопировать его, а затем вставить его под слой "Выделение 1".
Встаём на слой "Слой 1", выделяем его. Правой кнопкой мыши вызываем контекстное меню и выбираем пункт "Копировать слой"
21-09-2014 18-35-00 (613x509, 232Kb)

Затем перейдите на слой "Выделение". Выделите его и правой кнопкой мыши вызовите контекстное меню. Выберите нижний пункт "Вставить слой".
Будьте внимательны вставляя скопированный слой с картинкой. В контекстном меню надо выбрать именно пункт в нижней части меню , тогда у вас вставится копия слоя. Если же нажать первый пункт меню, то вставится просто пустой слой.
21-09-2014 18-40-52 (700x577, 332Kb)

Когда всё это будет сделано, то надо выделить слой "Выделение 1" выбрать инструмент "Карандаш", включить для него режим "Рисовать как графику". В панели Свойств указать цвет заливки и отсутствие обводки. Не отрывая инструмент "Карандаш", нарисовать графический символ для маскирования цветка.
Назначить слой "Выделение 1" маской, а слою "Слой 1 копия" назначить - маскирование. Включить предварительный просмотр.
21-09-2014 19-09-16 (700x625, 352Kb)

Теперь должны колыхаться водичка в вазочке и средний тюльпанчик. Таким образом мы получили нужный нам результат.

Сохраняем полученную флешку.
Файл -Экспорт - Экспорт фильма.

Серия сообщений "Маска в Sothink SWF Quicker":
Уроки флеш в программе Sothink SWF Quicker

Часть 1 - Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker.
Часть 2 - Использование масок в программе Sothink SWF Quicker
...
Часть 5 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 2.
Часть 6 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 3.
Часть 7 - Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker. Часть 2.

Серия сообщений "Sothink SWF Quicker":
Часть 1 - Дизайн кнопки. Урок для Sothink SWF Quicker
Часть 2 - Использование масок в программе Sothink SWF Quicker
...
Часть 20 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 3.
Часть 21 - Кнопки во флеш. Озвучивание. Для Sothink SWF Quicker и Adobe Flash (AS2). Урок2.
Часть 22 - Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker. Часть 2.
Часть 23 - Флеш приветствие для дневника, изменяющееся в зависимости от времени суток.
Часть 24 - Флеш фильтр для программной анимации «Flamme» . Action Script 2.
...
Часть 28 - Кнопка повтора мувика - дополнение.
Часть 29 - Рисуем кнопку в Adobe Flash.
Часть 30 - Урок:увеличение текста по наведению курсора.