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

Понедельник, 28 Января 2013 г. 20:41 + в цитатник

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

Делать урок будем в программе Sothink SWF Quicker (русская портативная версия)
Скачать можно здесь
SothinkSWFQuicker 5.3.511

Сам готовый флеш файл анимированной маски есть в материалах к уроку и прилагается для скачивания.
Материалы к уроку "Эффект колышущейся картинки с помощью маски."
Почему же маска называется анимированной, и как она делается, будет рассказано в процессе этого урока. При желании каждый потом сможет сам такую маску сделать.
Маска в программе Sothink SWF Quicker, как в прочем, и во многих других флеш программах – это графический объект, который маскирует изображение, которое находится под маской и связано с ней. Будет видна только та часть вашей картинки, которая закрыта полем маски. Все остальное видно не будет.
Приступим к уроку.
Открываем программу и создаем новый документ
600 X 600 пикс.

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

В Библиотеку программы импортируем изображение. Можете, если хотите, взять для начала мое изображение в формате PNG и поработать с ним для практики.

(Файл - Импортировать в библиотеку)

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

Создаем новый символ – видеоролик (мувиклип)
Вставка –Новый символ (Ctri+F8)

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

В открывшемся диалоговом окне «Новый символ», выбираем тип Символа «Видеоролик» Даем название нашему видеоролику «Клип с маской» и нажимаем «ОК»

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

В открывшемся окне редактирования нового символа «Клип с маской» на Временной шкале создаем три слоя
3.Слой «Маска» (самый верхний)
2.Слой «Скрытый»(под слоем Маской)
1.Слой «Картинка»(нижний)

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

Как вы, наверное догадались, внутри этого видеоролика на этих трех слоях мы и будем создавать наш эффект колебания.
Для этого нам необходимо определенным образом расположить на слоях "Скрытый" и "Картинка наше изображение, одно и то же на каждом слое, но с небольшим сдвигом по оси Y, а слой "Скрытый" еще и обработать маской. Чтобы готовая анимированная маска была доступна нам для работы, необходимо будет также поместить прилагаемый к уроку готовый видеоролик «Анимированная маска» в Библиотеку нашего проекта и затем разместить его на слое "Маска".
Давайте сначала для каждого слоя с изображениям создадим новые графические символы, в которые поместим поочередно нашу картинку и сразу же в этих символах зададим необходимый сдвиг.
Делаем картинку1 - символ для первого слоя
Вставка –Новый символ (Ctri+F8)
Тип Символа – Графика

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

После того как нажмете «ОК» откроется окно редактирования графического символа «Картинка1». На Временной шкале один
слой. Инструментом «Выбор» (черная стрелочка на панели "Инструменты") из палитры "Библиотека" перетаскиваем изображение на рабочее поле.

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

После того как переместили картинку из палитры "Библиотека" на рабочее поле, кликаем по ней, чтобы выделить и идем в палитру "Трансформация", где выставляем значения как на скрине.

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

Если вы используете свою картинку, следовательно размеры ширины и высоты для вашей картинки будут отличаться от значений приведенных на скрине. Значения же координат X и Y должны быть такими же, т.е.=0
Теперь делаем картинку - символ 2 таким же способом.
Вставка – Новый символ (Ctri+F8)
Тип Символа – Графика

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

В открывшемся окне редактирования символа «Картинка2», опять перетаскиваем на рабочее поле наше изображение (т.е. то же самое изображение что и для символа «Картинка1»), но в палитре трансформация у нас изменится параметр для координаты Y.
Y теперь будет равен -1
Y = -1

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

Картинки мы подготовили, два графических символа у нас появились в Библиотеке и теперь займемся самой анимированной маской. Файл "Анимированная маска" прилагается к материалам урока. Его необходимо вставить в Библиотеку нашего проекта.
Для этого заходим в меню Файл – Новый – Новое окно

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

У вас откроется новое окно программы Sothink SWF Quiker с чистым рабочим полем. Идем в меню этого окна
Файл-Импорт
и указываем путь к файлу SWF «Анимированная маска» на вашем компьютере. Открываем маску и видим, что у нас на рабочем столе появилась сама маска, а в библиотеке два символа – видеоролик (мувик) «Анимированная маска» и графический символ этой же маски.
Маска представляет собой длинную волнистую решетку, верхняя часть которой находится за пределами рабочей области.

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

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

Щелкните в библиотеке два раза по видеоролику «Анимированная маска» ( по синенькому символу). Откроется окно редактирования этого символа. Мы увидим, что на Временной шкале между ключевыми кадрами первым и трехсотым созданы промежуточные кадры движения (твининг), а на панели «Трансформация» можно увидеть, что изменения в движении происходит по вертикали, на что указывает изменение координат маски по оси Y. Так если в первом ключевом кадре (можно посмотреть, кликнув инструментом Выбор по маске и выделив ее, а затем кликнуть по первому кадру) координата Y= - 250, то в кадре 300 координата Y = 450. При этом координата X в обеих точках равна одному и тому же числу - -82,2. Таким образом, и происходит движение маски сверху вниз.

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

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

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

Таким образом, маска создается из отдельно нарисованной в программе волнистой линии (например, рисуем инструментом "Кисть"), которая нужное количество раз копируется. Копии размещаются одна под другой на равном расстоянии и затем объединяются в блок. Созданный блок размещается внутри графического символа, копируется, копия размещается на новом слое точно под первым блоком и блоки плотно стыкуются.
Теперь, при желании, вы сможете сами создать такую анимированную маску. Пока же воспользуемся готовой.
Нам необходимо в Библиотеке нового открытого окна скопировать символ видеоролик «Анимированная маска».
Для этого кликаем по символу «Анимированная маска» и в контекстном меню выбираем пункт «Копировать».

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

После этого переходим в первое окно, там, где наша картинка и там где мы с вами создаем наш проект – Эффект колышущейся картинки. В Библиотеку нашего проекта вставляем только что скопированный в другом окне видеоролик «Анимированная маска». Щелкаете в палитре Библиотека на пустом месте и в контекстном меню выбираете пункт «Вставить».

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

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

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

В следующем шаге урока нам надо перейти в окно редактирования символа «Клип с маской», где у нас, как вы помните, специально созданы слои для графических символов картинки и собственно "Анимированной маски". Для этого в Библиотеке проекта дважды кликаем по символу (по синенькому значку) "Клип с маской" и попадаем в окно его редактирования.
У нас там три ранее созданных слоя Сверху вниз – Маска, Скрытый слой и Картинка. Сейчас мы на каждый слой перетащим соответствующие ему символы.
Выделяем самый нижний слой «Картинка» и перетаскиваем из Библиотеки инструментом «Выбор» на этот слой в рабочее поле графический символ «Картинка 1». Инструментом «Выбор» щелкаем по картинке, для того чтобы она выделилась. В палитре «Трансформация» выставляем следующие значения.

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

Выделяем слой «Скрытый» и на него перетаскиваем графический символ «Картинка 2». Инструментом Выбор щелкаем по картинке, для того чтобы она выделилась. В палитре Трансформация выставляем следующие значения

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

Т. е, точно такие же, как и для первой картинки.
Как вы помните, сдвиг мы задали в самих графических символах картинок и поэтому картинки все же не будут точно находится одна над другой, а будут немного сдвинуты вниз друг относительно друга.
Заключительное действие – Выделяем слой «Маска» и перетаскиваем на него видеоролик «Анимированная маска», который мы скопировали в другом окне и вставили в нашу Библиотеку.
Щелкаем по изображению маски – решетки на рабочем поле, чтобы маска выделилась. Теперь важно правильно расположить маску на рабочем поле относительно картинок, которые находится под нею. Здесь координаты по оси X и Y могут различаться с моими, если вы используете свою картинку. Важен сам принцип размещения. Маска должна быть приблизительно симметрично расположена на картинках по оси X. По оси Y маска должна быть чуть - чуть ниже картинки, а основная ее часть должна находится над картинкой. По оси X маска обязательно должна полностью перекрывать картинку. Если маска меньше картинки, то в палитре инструментов щелкните инструмент «Трансформация», потом щелкните по маске, чтобы на ней появились маркеры трансформации. Потяните за маркеры и установите нужные размеры. Располагайте маску, ориентируясь на мой скрин.

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

Мои параметры палитры "Трансформация" (если вы взяли мою картинку для урока, то можете ввести эти параметры).

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

Теперь осталось замаскировать картинку и "Клип с маской" будет готов.
Щелкаем по слою "Маска" и в контекстном меню выбираем пункт «Маска»

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

Выделяем слой «Скрытый», щелкаем по нему и в контекстном меню выбираем пункт «Маскировать»

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

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

Все, наш клип «Клип с маской» готов. Можно перейти на основную сцену и перетащить сделанный нами клип «Клип с маской» на рабочее поле основной сцены проекта, в нужное нам место.
Щелкая вот по этим вкладкам над Временной шкалой можно перемещаться с одной открытой вкладки на другую. Сейчас нам надо попасть на основную сцену нашего проекта, поэтому надо щелкнуть по вкладке "Сцена".

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

На основную сцену на первый слой из Библиотеки перетаскиваем видеоролик «Клип с маской» и создаем второй слой для того, чтобы подписать работу.

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

Если вы будете добавлять еще какие-то элементы – эффекты или надписи на свою работу, то для каждого элемента создавайте отдельный слой. В материалах к уроку есть флеш файл с дополнительным эффектом, который я добавила к готовой флешке для превью. Дополнительный эффект добавляется также как и анимированная маска. Т.е. импортируется в новое окно программы. Основной(родительский клип) копируется и переносится в Библиотеку основного проекта. Затем для эффекта создается новый слой (выше или ниже картинки - это уже в зависимости от сюжета задуманной флешки) и он перетаскивается из Библиотеки проекта на основную сцену.
Если все готово, то можно протестировать ролик и если все устраивает – сохранить.
Файл –Экспорт – Экспорт фильма. Указать название вашей созданной флешки и путь для сохранения на вашем компьютере.

Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash
Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 11 - Делаем музыкальную флеш открытку в программе Sothink SWF Quicker.
Часть 12 - Гуси-лебеди. Урок с анимацией крыльев. Sothink SWF Quicker.
Часть 13 - Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker.
Часть 14 - Использование масок в программе Sothink SWF Quicker
Часть 15 - Урок «Маска текстом в программе Sothink SWF Quicker».
...
Часть 48 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.
Часть 49 - Использование панели «Редактор движения» в Adobe Flash CS6.
Часть 50 - Анимация формы во Flash(морфинг).

Серия сообщений "Программмы для создания флеш":
Часть 1 - Часики для страничек дневника.
Часть 2 - Часики для дневника "Арбузные"
Часть 3 - Программа для флеш роликов Flash Gallery Factory Deluxe
Часть 4 - Adobe Flash CS6 Portable.
Часть 5 - Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker.
Часть 6 - Работа с шаблонами в Adobe Flash. Обратный отсчет даты.
Часть 7 - Aleo SWF GIF Converter 1.6(engl+rus).
Часть 8 - Флеш меню «Облако тегов».
Часть 9 - SWiSH Max4[Ru+En] с русификатором

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

Рубрики:

Flash/уроки sothnik swf quicker

Уроки по программе Sothnik SWF Quicker

Метки: уроки flash sothink swf quicker sothink swfquicker программы flash

Процитировано 202 раз
Понравилось: 68 пользователям

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] 2 3 [Новые]

RADYGA55 обратиться по имени Понедельник, 28 Января 2013 г. 20:52 (ссылка)

Добрый вечер солнышко!
Спасибо.
прекрасного вечера тебе!

Ответить С цитатой В цитатник

Понедельник, 28 Января 2013 г. 21:09ссылка

novprospekt

Спасибо, Танюша. Чувствую все полуночники в сборе.

Ответить С цитатой В цитатник Обратиться по имени

Нина_Гуревич обратиться по имени Понедельник, 28 Января 2013 г. 21:05 (ссылка)

СПАСИБО

Ответить С цитатой В цитатник

Понедельник, 28 Января 2013 г. 21:13ссылка

novprospekt

Пожалуйста Ниночка. Эффект приятный для глаза. Так что осваивай потихоньку. Клипарта то море всякого. Так что приложить есть куда.

Ответить С цитатой В цитатник Обратиться по имени

Ларисик обратиться по имени Понедельник, 28 Января 2013 г. 21:18 (ссылка)

Какая красота.......Как много вы знаете.......Благодарю!

Ответить С цитатой В цитатник

Понедельник, 28 Января 2013 г. 21:31ссылка

novprospekt

Пожалуйста. Изучайте потихоньку. Эффект очень красивый. Его обязательно надо научится делать. Будут какие то вопросы -Обращайтесь. Я помогу.

Ответить С цитатой В цитатник Обратиться по имени

Flash_Magic обратиться по имени Понедельник, 28 Января 2013 г. 21:19 (ссылка)

Мариночка, какая ты УМНИЧКА!!!!
Вот как Китайцы делают свои анимированные цветы.
теперь и мы будем учиться, благодаря твоему уроку!
Спасибо тебе огромное за урок и твой труд