Анимация частей картинки с помощью маски.Урок для 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(морфинг).

Метки: уроки flash уроки флеш уроки adobe flash cs6
Понравилось: 10 пользователям

<a href="https://www.liveinternet.ru/users/novprospekt/post356480934/">РђРЅРёРјР°С†РёСЏ С‡Р°СЃС‚РµР№ РєР°СЂС‚РёРЅРєРё СЃ РїРѕРјРѕС‰СЊСЋ РјР°СЃРєРё.РЈСЂРѕРє РґР»СЏ Adobe Flash.</a><br/>

Р’ РєРѕРјРјРµРЅС‚Р°СЂРёСЏС… Рє РїРѕСЃС‚Сѓ РСЃРїРѕР»СЊР·РѕРІР°РЅРёРµ Р°РЅРёРјРёСЂРѕРІР°РЅРЅРѕР№ РјР°СЃРєРё РІ Adobe Flash.РЈСЂРѕРє
РјРЅРµ Р·Р°РґР°Р»Рё РІРѕРїСЂРѕСЃС‹.. 
"Рђ РєР°Рє РІС‹РґРµР»РёС‚СЊ РѕС‚РґРµР»СЊРЅСѓСЋ С‡Р°СЃС‚СЊ РєР°СЂС‚РёРЅРєРё, С‡С‚РѕР±С‹ РµРµ Р°РЅРёРјРёСЂРѕРІР°С‚СЊ ?"

" РљР°Рє РІС‹СЂРµР·Р°С‚СЊ. Р§С‚Рѕ Р±С‹ РЅРµ РєРѕР»С‹С…Р°Р»Р°СЃСЊ С„РёРіСѓСЂРєР° С‡РµР»РѕРІРµРєР° РєР°Рє Сѓ РўРµР±СЏ СЃ РґРµРІСѓС€РєРѕР№.."

РљР°Рє РІРёРґРёС‚Рµ,РЅР° СЌС‚РѕР№ РєР°СЂС‚РёРЅРєРµ Р°РЅРёРјРёСЂРѕРІР°РЅР° РІРѕРґР° Рё РїР°СЂРµРѕ(РїР»Р°С‚РѕРє) РЅР° РґРµРІСѓС€РєРµ.

Р’  СѓСЂРѕРєРµ  РїРѕСЃС‚Р°СЂР°СЋСЃСЊ СЂР°СЃСЃРєР°Р·Р°С‚СЊ Рё РїРѕРєР°Р·Р°С‚СЊ РєР°Рє Р°РЅРёРјРёСЂРѕРІР°С‚СЊ С‡Р°СЃС‚Рё РєР°СЂС‚РёРЅРєРё.

РЈСЂРѕРє  СЏ СЂР°Р·РґРµР»РёР»Р° РЅР° 3 С‡Р°СЃС‚Рё.
1.РџРѕРґРіРѕС‚РѕРІРєР°.
2.РђРЅРёРјР°С†РёСЏ РІРѕРґС‹
3.РђРЅРёРјР°С†РёСЏ РїР°СЂРµРѕ(РїР»Р°С‚РєР°).

РџРѕРґРіРѕС‚РѕРІРєР°
Р”Р»СЏ Р°РЅРёРјР°С†РёРё РЅР°Рј РїРѕС‚СЂРµР±СѓСЋС‚СЃСЏ:
Р”РІРµ Р°РЅРёРјРёСЂРѕРІР°РЅРЅС‹Рµ РјР°СЃРєРё.
РџРѕС‡РµРјСѓ РґРІРµ... <a href="https://www.liveinternet.ru/users/novprospekt/post356480934/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Нина_Гуревич обратиться по имени Понедельник, 16 Марта 2015 г. 08:57 (ссылка)

СПАСИБО, огромное

Ответить С цитатой В цитатник

Аноним обратиться по имени Воскресенье, 31 Мая 2015 г. 23:07 (ссылка)

Какая вы умница: я просто восхищена.

Ответить С цитатой В цитатник | Не показывать комментарий

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Цитатник

-Метки

-Рубрики

-Поиск по дневнику

-Подписка по e-mail

-Статистика

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