• Авторизация


Анимация частей картинки с помощью маски.Урок для Adobe Flash. 16-03-2015 14:25 к комментариям - к полной версии - понравилось!

Это цитата сообщения jzayka Оригинальное сообщение

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





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

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



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

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

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

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

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

Работаем в программе 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.


вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Анимация частей картинки с помощью маски.Урок для Adobe Flash. | чёли - | Лента друзей чёли / Полная версия Добавить в друзья Страницы: раньше»