Анимация частей картинки с помощью маски.Урок для Adobe Flash.

Понедельник, 16 Марта 2015 г. 04:31 + в цитатник

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

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

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

" Как вырезать. Что бы не колыхалась фигурка человека как у Тебя с девушкой.."

Как видите,на этой картинке анимирована вода и парео(платок) на девушке.

В уроке постараюсь рассказать и показать как анимировать части картинки.

Урок я разделила на 3 части.
1.Подготовка.
2.Анимация воды
3.Анимация парео(платка).

Подготовка
Для анимации нам потребуются:
Две анимированные маски.
Почему две? Вам станет понятно в ходе урока.

Картинка,с которой будем работать..
Все это находится во вложении к посту.

Вложение: 4165744_material_13_marta.rar

Работаем в программе Adobe 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)
скрин24

13.Стоим на слое Маска(над слоем вода).Идем в Библиотеку.
Из Библиотеки перетащим Маска1 на слой в рабочую область.

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

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

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

Посмотрим,что у нас получилось с анимацией воды..
Для этого переключаемся на основную рабочую сцену.
Из Библиотеки перетаскиваем символ Анимация.
Смотрим(Ctrl+Enter) что получилось

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

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

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

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

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

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

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

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

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

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

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

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

Часть 1 - Цветочный шлейф за курсором
Часть 2 - Слайд-шоу в Aleo Flash Intro Banner Maker встроенным эффектом..)
...
Часть 20 - Урок.Загружаем музыку в Adobe Flash c помощью библиотеки классов .
Часть 21 - Делаем флеш календарик в Adobe Flash (AS3).
Часть 22 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.

Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash
Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 46 - Делаем флеш открытку с эффектом курсора «Mouse trailer». Урок для Adobe Flash CS6.
Часть 47 - Рисуем кнопку в Adobe Flash.
Часть 48 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.
Часть 49 - Использование панели «Редактор движения» в Adobe Flash CS6.
Часть 50 - Анимация формы во Flash(морфинг).