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

Авторизация

Дневник novprospekt Лента друзей - Дневник - Полная версия

Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker. Часть 2. 21-09-2014 16:27 к комментариям - к полной версии - понравилось!

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

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

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

[497x412]

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

[509x439]

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

[491x538]

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

Файл -Импорт

Картинка, как и анимированная маска после этого появиться в Библиотеке.

[700x430]

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

[403x239]

На Временной шкале у нас есть слой с картинкой. Переименуем его и назовем "Картинка 1".

[700x511]

Дополнительно создадим ещё два слоя и разместим их - один выше слоя
"Картинка 1", а другой под слой "Картинка 1".

[700x489]

Вновь созданные слои также переименуем и назовём верхний слой (слой 3) - "Анимированная маска", а нижний слой (слой 2) - "Картинка 2"

[564x471]

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

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

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

Выделите слой "Картинка 1", На Рабочем поле щелкните по картинке и выделите её. Щелкните по выделению правой кнопкой мыши и выберте пункт "Копировать".

[700x700]

Перейдите и выделите слой "Картинка 2", щелкните вне Рабочего поля и выберите пункт "Вставить на месте"

[650x650]

При этом у вас на Рабочем поле появиться выделение с картинкой, вставленной на слое "Картинка 2". Не снимая выделения с этой картинки и со слоя "Картинка 2", с клавиатуры компьютера нажмите 1-2 раза клавишу "Стрелка вниз". При одном нажатии колебание картинки будет мягким, незначительным, при двукратном нажатии колебание картинки будет большей силы.

[700x480]

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

[700x510]

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

[628x700]

Поочередно выделяя слои "Анимированная маска" и "Картинка 1", назначим слой "Анимированная маска" - Маской, а слою "Картинка 1" присвоим - Маскировать. Теперь эти слои на Временной шкале будут выглядеть следующим образом

[700x445]

Если мы сейчас нажмем кнопку предварительного просмотра для флешки, то увидим, что колышется у нас вся картинка. То есть, получим результат аналогичный с уроком первым. Нам же надо, чтобы колебалась только водичка в вазочке и один из тюльпанчиков.
А для этого надо сделать следующее
Отключаем глазок видимости слоя "Анимированная маска" и выделяем слой "Картинка 1". Стоя на слое "Картинка 1", на Рабочем поле инструментом Выбор выделяем нашу картинку и идем на вкладку меню "Модификация"
Модификация - Преобразовать в символ

[700x590]

В открывшемся диалоговом окне преобразования выставляем следующие параметры и даём имя символу - "Выделение"

[307x262]

После того как в диалоговом окне нажмёте "ОК", в Библиотеки появиться новый мувиклип "Выделение". По нему надо дважды щелкнуть, для того чтобы попасть в поле редактирования этого мувиклипа

[700x455]

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

[700x466]

Находясь на выделенном слое "Выделение" выбираем инструмент "Карандаш" и для него включаем режим "Рисовать как графику". Начинаем обводить "Карандашом" воду в вазочке, не задевая края самой вазочки. Не бойтесь, что выделение будет неровным. Колебания скроют эти неровности. Главное нарисовать неотрывно линию обводки и тогда у вас получиться векторная графическая фигура для маски (выделение). Обязательно проверьте, что нарисованный вами графический символ находится а слое "Выделение", а картинка находится на слое "Слой 1"

[700x575]

Назначим слой "Выделение" маской, а слою "Слой 1" присвоим - маскировать. Включим предварительный просмотр и увидим, что сама картинка неподвижна, а водичка в вазочке колышется.

[700x460]

Мы ещё также хотели, чтобы колыхался один из тюльпанчиков. Но для этого нам потребуется снова нарисовать графический символ для тюльпана на отдельном слое. И вот здесь будьте очень внимательны.
Можно делать сколько угодно выделений, но каждое следующее должно находится на отдельном слое и этот слой должен быть выше предыдущего слоя с выделением.
Таким образом, чтобы создать графическую маску для цветка нам надо выделить слой "Выделение", нажать на плюсик под Временной шкалой и выше слоя "Выделение" появится новый слой, который мы назовём "Выделение 1"

[575x345]

Поскольку на слое "Выделение 1" будет находится графическая маска, а сам слой будет назначен маской, то соответственно под ним должен находится слой с тем, что мы будем маскировать. А маскировать мы будем все ту же нашу картинку, которая находится на слое "Слой 1". Следовательно надо выделить слой с картинкой и скопировать его, а затем вставить его под слой "Выделение 1".
Встаём на слой "Слой 1", выделяем его. Правой кнопкой мыши вызываем контекстное меню и выбираем пункт "Копировать слой"

[613x509]

Затем перейдите на слой "Выделение". Выделите его и правой кнопкой мыши вызовите контекстное меню. Выберите нижний пункт "Вставить слой".
Будьте внимательны вставляя скопированный слой с картинкой. В контекстном меню надо выбрать именно пункт в нижней части меню , тогда у вас вставится копия слоя. Если же нажать первый пункт меню, то вставится просто пустой слой.

[700x577]

Когда всё это будет сделано, то надо выделить слой "Выделение 1" выбрать инструмент "Карандаш", включить для него режим "Рисовать как графику". В панели Свойств указать цвет заливки и отсутствие обводки. Не отрывая инструмент "Карандаш", нарисовать графический символ для маскирования цветка.
Назначить слой "Выделение 1" маской, а слою "Слой 1 копия" назначить - маскирование. Включить предварительный просмотр.

[700x625]

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

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

вверх^ к полной версии понравилось! в evernote

Комментарии (36): вперёд»

Лариса_Гурьянова 21-09-2014-17:10 удалить

УРа!!!!! Я так давно хотела именно этому научиться, Мариш! Спасибо дорогая!!!

Вы сейчас не можете прокомментировать это сообщение.