В комментариях к посту Использование анимированной маски в Adobe Flash.Урок
мне задали вопросы..
"А как выделить отдельную часть картинки, чтобы ее анимировать ?"
" Как вырезать. Что бы не колыхалась фигурка человека как у Тебя с девушкой.."
Как видите,на этой картинке анимирована вода и парео(платок) на девушке.
В уроке постараюсь рассказать и показать как анимировать части картинки.
Урок я разделила на 3 части.
1.Подготовка.
2.Анимация воды
3.Анимация парео(платка).
Подготовка
Для анимации нам потребуются:
Две анимированнае маски.
Картинка,с которой будем работать..
Все это находится во вложении внизу поста.

Работаем в программе Adobe Flash CS.
1.Создадим на компьютере в любом месте папку для проекта.
Назовем как хотим.Пусть это будет Анимация маской.
Скопируем в нее материал из вложения.Распакуем.
2.Откроем программу.Создадим документ Actionscript AS3 или AS2.
Файл-Создать.
Я создам AS3,размеры по размеру картинки(800/450) и сохраню его под именем
У моря.
Файл-Сохранить как..
Сохраним в папку с проектом Анимация маской.
Нужный материал в папке проекта.

3.Теперь сделаем следующее:
Откроем ,как новые документы fla, маски из папки проекта.
И скопируем их в Библиотеку документа У моря.
Для этого:
3.1 Файл-Открыть..
Указываем путь к папке с проектом,куда мы сохранили материал из вложения.

3.2 Открываем файл маска анимированная-M.fla

В программе открылся документ маска анимированная-M.fla

3.3 Еще раз Файл-Открыть..
Указываем путь к папке с проектом.
Открываем файл маска маленькие ромбики.fla

В программе открылся документ маска маленькие ромбики.fla

/////////////////
4.Следующий шаг.
Пооочередно заходим в Библиотеки документов с масками.
Жмем правой кнопкой мыши по значку папки.
4.1 Выбираем-Копировать.
![]() | ![]() |
4.2 Переключаемся на основной документУ моря .

4.3 Идем в Библиотеку и вставляем скопированное в Библиотеку
Так должно быть в Библиотеке документа У моря после копирования.

Маски у нас в Библиотеке.
Открытые документы с масками можно закрыть.
Приступаем непосредственно к анимации.
Будем анимировать часть картинки с водой
5.Создадим новый символ.
Вставка-Создать символ
Назовем Анимация.

6.Импортируем из папки с проектом в рабочую область символа Анимация картинку.

7.Переименуем слой в Картинка.
И создадим еще 4 слоя.Назовем как на скрине
На слое Вода у нас будет расположена выделенная область воды.
На слое Парео ра сположим выделенное парео(платок)
На слоях Маска у нас будут маски для анимации частей картинки
,которые мы скопировали в Библиотеку.

8.Выделяем стрелкой картинку.Модификация-Разделить.

Картинка приняла такой вид

Будем выделять область с водой.
Для этого активируем инструмент Лассо.
И обведем область воды.
9.Для этого щелкнем мышкой вне картинки(картинка поменяла вид)

Подводим лассо и начинаем обводить,
!не отпуская мышку!(чтобы замкнуть линию выделения)



10.На выделенной области жмем Правой кнопкой мыши

11.Встаем на слой Вода(делаем его активным)
Слой с картинкой заблокируем-замочек
Жмем в любом месте картинки Правой кнопкой мыши

Должно быть так ..

12.Стоим на слое Вода(слой активный).
Идем в Свойства.
Параметры по х=0,00;y=220,35.
Если вы используете другую картинку,у вас будут другие значения.
Изменяем стрелками на клавиатуре вправо и вниз значения x и y.
2раза вправо и 2 раза вниз.
получаем(х=2,50;y=235,85)
![]() | ![]() |
13.Стоим на слое Маска(над слоем Вода).Идем в Библиотеку.
Из Библиотеки перетащим Маска1 на слой в рабочую область.

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

14.На слое маска жмем Правой кнопкой мыши
Выбираем Маска

Вот так теперь должно быть в слоях и рабочей области

Посмотрим,что у нас получилось с анимацией воды..
Для этого переключаемся на основную рабочую сцену.
Из Библиотеки перетаскиваем символ Анимация.
Смотрим(Ctrl+Enter) что получилось
Таким же образом будем анимировать парео(платок) на девушке
============
Очистим сцену.(Выделить -delete)
Вернемся в область редактировния символа Анимация..
Для этого в Библиотеке 2 раза щелкаем по значку символа Анимация.
============
В области редактировния символа Анимация
Встаем на слой картинка.Выделяем ее(картинку) стрелкой.
Активируем Лассо.И будем обводить парео.
Как мы это делали с водой.

Когда выделение парео готово,
жмем Правой кнопкой мыши.Копировать.

Слой с картинкой блокируем(замочек)
Встаем на слой Парео.Правой кнопкой мыши.
Вставить на место.

Встаем на верхний слой маска1.Идем в Библиотеку.
Из папки маска ромбиками претаскиваем символ маска

Изменим размеры инструментом Преобразование примерно как на скрине..
Вы можете не поворачивать или повернуть под другим углом..

Идем в Свойства.Слой Парео активный.
Изменим параметры по х и y

1 раз стрелочкой вправо и 1 раз вниз

На слое маска1 жмем Правой кнопкой мыши.
Выбираем Маска.

Переключаемся на Основную рабочую сцену.
Из Библиотеки перетаскиваем символ Анимация.
Выравниваем в пределах рабочей области инструментом Выравнивание.
Тестируем.
Если все устраивает,сохраняем работу.
Экспортируем ролик.

Ну вот..где-то так.
Если возникнут вопросы,пишите в комментариях.
Удачи!




Комментариев нет:
Отправить комментарий