Использование анимированной маски в Adobe Flash.Урок

Воскресенье, 26 Октября 2014 г. 06:22 + в цитатник

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

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

Рассмотрим как сделать вот такой эффект.

Спасибо Наташе -DiZa-74 за фотографию

Как сделать подобный эффект в программе SWFQuicker можно посмотреть Здесь

Работать будем в программе Adobe Flash CS6.

1.Файл-Создать-ActionScript3.0
Размеры сцены выставляем по размеру картинки,
которую будем использовать.Назовем"Анимация картинки"

2.Подготовим необходимый материал.
Нам потребуется :
картинка,которУю будем анимировать
и
анимированная маска,которОй будем анимировать.

Что такое анимированная маска и как ее сделать , рассматривать не будем.
Подробности можно узнать в этом Уроке.

Мы будем использовать готовую.
3.Исходник маски скачаем из вложения к посту.
Скачали, распакуем .
Следующим шагом нам нужно ее загрузить в программу.

4.Через Файл-Отрыть-указываем путь к файлу.
У вас он находится там,куда вы его сохранили.

Открылся .fla файл "анимированная маска".
Так это выглядит на рабочей сцене

Сtrl+Enter-смотрим что это такое..

Это и есть та самая анимированная маска,
которую мы будем использовать для анимации картинки..

Перенесем ее в библиотеку основного документа.

Заходим в библиотеку документа "маска анимированная".
Делаем как показано на скрине.

5.Открываем документ "Анимация картинки".Идем в Библиотеку.

В Библиотеке мы видим скопированные файлы маски.
Маска состоит из графического символа и фрагмента ролика(мувиклипа).

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

Подготовительная работа закончена..
****
Приступаем к анимации.

Создадим символ и назовем его "анимация маской".

7.Создадаим здесь 3 слоя.

На первом слое у нас будет картинка со значениями координат x=0;y=0;

На втором слое расположим эту же картику cо значениями х=0; y=-1;
Перетаскиваем на соответствующие слои картинки.
В Свойствах проставляем нужные значения

3-ий слой для маски.

Маску(фрагмент ролика) так же перетаскиваем на слой
и устанавливаем так,чтобы она закрывала картинку
чуть ниже картинки и полностью перекрывала по краям.

Основная часть маски должна находиться над картинкой.

Если размер маски меньше картинки,
увеличиваем при помощи инструмента Преобразование.

8.Встаем на слой "маска"Кликаем првой кнопкой мыши.
Жмем -Маска

Так теперь выглядят слои и область редактрования символа

9.Переключаемся на рабочую сцену

Перетаскиваем из библиотеки символ"анимация маской"

10.Выравниваем в пределах рабочей области

Смотрим ,что получилось..CTRL+Enter

Вот и все.Анимация готова!

Маской можно анимировать картинки в формате PNG.

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

Серия сообщений "Мои уроки":

Часть 1 - Цветочный шлейф за курсором
Часть 2 - Делаем снегопад в SWFQuicker..)
...
Часть 12 - Делаем в Adobe Flash 3D Эффект переворота(3D вертелка).
Часть 13 - Как создать и наложить маску определенной формы на видео в Adobe Flash.Урок.
Часть 14 - Использование анимированной маски в Adobe Flash.Урок
Часть 15 - Текст за курсором в Adobe Flash(AS3).Урок.
Часть 16 - Урок.Эффект "Ripple" (волна)в Adobe Flash(AS3).

Серия сообщений " FLASH-мастерская/уроки":
Часть 1 - ДЕЛАЕМ КРАСИВЫЕ АНИМАЦИИ - урок №1 знакомство с сайтом
Часть 2 - Урок - как сделать во флеш слайд-шоу
...
Часть 5 - Коды для флешек. Прямо здесь и сейчас.
Часть 6 - Как сохранить флеш?!..
Часть 7 - Использование анимированной маски в Adobe Flash.Урок
Часть 8 - Создание интерактивной флеш открытки Урок 2
Часть 9 - Adobe Flash Professional CS6 12.0.0.481 [MULTi / Русский] + Подробная установка
...
Часть 11 - Флэш анимация своими руками
Часть 12 - Как вставить флеш-часики на картинку
Часть 13 - Флеш-материал - цветы, облака, зелень...

Серия сообщений "Adobe Flash":
Часть 1 - Урок.Как создать и наложить маску определенной формы на видео в Adobe Flash.
Часть 2 - Использование анимированной маски в Adobe Flash.Урок
Часть 3 - Adobe Flash Professional CS6 12.0.0.481 [MULTi / Русский] + Подробная установка
Часть 4 - Реалистичный эффект падающего снега в Adobe Flash(AS3).
...
Часть 12 - Уроки Flash. Падающий снег. Классы AS3.
Часть 13 - Уроки Flash. Аналоговые Flash часы.
Часть 14 - GООGlE убивает FlASH!!! Неприятная новость для всех Лирушников... и пользователей интернета