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

Суббота, 21 Апреля 2018 г. 09:37 + в цитатник

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

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

Пост отредактирован 19.04.2018(восстановлены скрины)

В комментариях к посту Использование анимированной маски в 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 жмем Правой кнопкой мыши.
Выбираем Маска.

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

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

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

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

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

Серия сообщений "=ADOBE FLASH CS6+ALEO":
Часть 1 - Как я делала урок "Самопишущийся текст"(мои пояснения)
Часть 2 - М е Ч т А ю
...
Часть 8 - У моря
Часть 9 - ***
Часть 10 - Анимация частей картинки с помощью маски.Урок для Adobe Flash
Часть 11 - ЦВЕТОЧЕК АЛЕНЬКИЙ
Часть 12 - Мелодия души( Работа выполнена по уроку -JZAYKA)
...
Часть 22 - Кнопка-плеер в Adobe Flash.
Часть 23 - море,солнце ,воздух и вода
Часть 24 - Уроки Flash CS6

Серия сообщений "*уроки jzayka ":
Часть 1 - Анимация частей картинки с помощью маски.Урок для Adobe Flash
Часть 2 - Урок.Эффект "Ripple" (волна)в Adobe Flash(AS3).
Часть 3 - Сирена
Часть 4 - Кнопка-плеер в Adobe Flash.