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


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

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




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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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




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


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


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

Серия сообщений "Уроки 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».
...
Часть 44 - Делаем флеш календарик в Adobe Flash (AS3).
Часть 45 - Текстовый скроллинг средствами флеш.
Часть 46 - Делаем флеш открытку с эффектом курсора «Mouse trailer». Урок для Adobe Flash CS6.

Серия сообщений "Программмы для создания флеш":

Часть 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.