Использование масок в программе Sothink SWF Quicker

Воскресенье, 26 Мая 2013 г. 03:50 + в цитатник

Использование масок в программе Sothink SWF Quicker. Часть первая. Введение, примеры и основы создания масок во флеш.

Маска в программе Sothink SWF Quicker, также как и в других графических и флеш программах, помогает маскировать отдельные участки изображения на слое, который помещен ниже слоя с маской. При этом, умение работать с маской в программе Sothink SWF помогает в создании оригинальных эффектов, как статических так и в анимации, а также в создании флешек различной формы (овальной, многоугольной, фигурной).

Например, мы имеем вот такую картинку с анимацией и хотим ее использовать для создания часиков с фоном овальной формы.
Вот оригинальная картинка
Море зовет

А вот флешка овальной формы, которую мы можем получить, применив к картинке маску овальной формы.

Или вот такая флешка - многоугольной формы

Различную форму картинкам придает специально созданная маска нужной геометрической формы. Сама эта геометрическая форма создается инструментами программы Sothink SWF Quicker и для ее создания
можно использовать инструменты рисования -кисть, карандаш, резинка или инструменты для создания геометрических фигур - овал, прямоугольник.
Это самая простая разновидность маскирования, когда на маскируемое изображение или даже целый видеоролик(мувиклип) накладывается статичная маска. Также разновидностью такой формы маскирования является - маскирование изображения или видеоролика(мувиклипа) текстом.

Более сложной разновидностью маски является анимированная маска, которая кроме придания флешке определенной формы еще и позволяет создавать определенные флеш эффекты.
Такой эффект анимационной маски мы уже рассматривали - это эффект колыхающегося изображения

Используется также прием анимации формы маски, наложение нескольких масок, как статичных так и
анимированных, анимация движения масок, наложение градиентных масок и так далее.

Вот некоторые эффекты, которые можно получить используя маски при создании флеш роликов.

1.
Пример с анимацией формы маски.

2. Анимация блика на тексте с помощью анимации движения маски

3.
Пример наложения нескольких масок(статичной и анимированной)

4.
Градиентная маска передвигаемая курсором

Все эти разновидности масок созданы в программе Sothink SWF Quicker и постепенно, шаг за шагом вы освоите эту нужную и очень занимательную технику.

Теперь немного теории о том, как создается маскируемое изображение или как создать в программе Sothink SWF Quicker маску.

Для создания маски необходимо не меньше двух слоев.
Верхний будет маской (трафаретом), а на нижнем должно быть размещено скрываемое (маскируемое) изображение.
Маской в программе Sothink SWF Quicker может являться графический символ (форма), созданный в этой программе ее инструментами рисования(инструменты карандаш, кисть, ластик)

или инструментами формы (инструменты овал, прямоугольник).
инструмент "Овал"

Давайте вместе попробуем создать флешку с маской.
Открываем программу Sothink SWF Quicker и на временной шкале создаем два слоя - верхний слой "Маска" и под ним слой "Изображение".
Для того чтобы переименовать слой надо щелкнуть по нему дважды и в открывшемся диалоговом окне вписать название.
1. Выделяем слой "Изображение" и импортируем на него картинку, которую хотим маскировать. Файл - Импорт. Подгоняем размеры картинки под размеры рабочего поля или наоборот.
Создание маски в Sothink SWF Quicker1

2. Выделяем слой "Маска" и инструментами рисования или формы создаем на слое "Маска" нужную нам форму маски.
Внимание! Если работаете инструментом "Карандаш", следите за тем, чтобы контур рисования был замкнут. Иначе фигура не нарисуется.
Режим рисования должен быть без обводки.
Модификаторы инструментов рисования или формы должны находится в режиме "Рисовать как форму" или "Рисовать как графику". (Модификаторы инструментов расположены ниже самих инструментов. Смотрите на скрине.)

3. У меня маска состоит из трех отдельных графических элементов - два листика, которые нарисованы инструментом "Карандаш" и веточка, нарисованная кисточкой. Для того, чтобы эти элементы стали маской, необходимо их сгруппировать. Для этого берем инструмент "Выбор"(черная стрелочка) и обводим эти элементы. Либо с зажатой клавишей Shift щелкаем по каждому элементу.

Создаем маску в Sothink SWF Quicker3

4.Все отдельные элементы маски выделены. Щелкаем в поле выделения правой кнопкой мыши и, в открывшемся контекстном меню, выбираем пункт "Группировать".
Естественно, если ваша нарисованная маска состоит из одного элемента, то группировать ничего не нужно.

Создаем маску в Sothink SWF Quicker4

5.Определяем слои для маскирования.
a). Выделяем слой "Маска". Щелкаем по нему правой кнопкой мыши и, в открывшемся контекстном меню, выбираем "Маска".

Создание маски в Sothink SWF Quicker

b). Выделяем слой "Изображение". Щелкаем по нему правой кнопкой мыши и, в открывшемся контекстном меню, выбираем "Маскировать".

Создание маски в Sothink SWF Quicker

6. Теперь наши слои на временной шкале расположены соответствующим образом. Следовательно создание маски завершено.

Создание маски в Sothink SWF Quicker

7. Включаем просмотр.

Создание маски в Sothink SWF Quicker

8. Можно создать выше слоя с маской дополнительные слои и на них разместить дополнительные флеш эффекты и тексты с эффектами.

Создание маски в Sothink SWF Quicker

Если вас заинтересовала эта тема, то можете потренироваться создавать маски различной формы. Буду рада вашим работам.

Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash
Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 12 - Гуси-лебеди. Урок с анимацией крыльев. Sothink SWF Quicker.
Часть 13 - Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker.
Часть 14 - Использование масок в программе Sothink SWF Quicker
Часть 15 - Урок «Маска текстом в программе Sothink SWF Quicker».
Часть 16 - Программная анимация в Adobe Flash.
...
Часть 48 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.
Часть 49 - Использование панели «Редактор движения» в Adobe Flash CS6.
Часть 50 - Анимация формы во Flash(морфинг).

Серия сообщений "Маска в Sothink SWF Quicker":
Уроки флеш в программе Sothink SWF Quicker
Часть 1 - Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker.
Часть 2 - Использование масок в программе Sothink SWF Quicker
Часть 3 - Урок «Маска текстом в программе Sothink SWF Quicker».
Часть 4 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 1.
Часть 5 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 2.
Часть 6 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 3.
Часть 7 - Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker. Часть 2.

Рубрики:

Flash/уроки sothnik swf quicker

Уроки по программе Sothnik SWF Quicker

Метки: маска во флеш уроки flash sothink swf quicker уроки sothink swf quicker

Процитировано 102 раз
Понравилось: 40 пользователям

<a href="https://www.liveinternet.ru/users/novprospekt/post277631248/">РСЃРїРѕР»СЊР·РѕРІР°РЅРёРµ РјР°СЃРѕРє  РІ РїСЂРѕРіСЂР°РјРјРµ Sothink SWF Quicker</a><br/>
РСЃРїРѕР»СЊР·РѕРІР°РЅРёРµ РјР°СЃРѕРє  РІ РїСЂРѕРіСЂР°РјРјРµ Sothink SWF Quicker. Р§Р°СЃС‚СЊ РїРµСЂРІР°СЏ. Р’РІРµРґРµРЅРёРµ, РїСЂРёРјРµСЂС‹ Рё РѕСЃРЅРѕРІС‹ СЃРѕР·РґР°РЅРёСЏ РјР°СЃРѕРє РІРѕ С„Р»РµС€.

[flash=600,200,//img1.liveinternet.ru/images/attach/c/8//4043/4043393_uroki_flesh1a.swf]

РњР°СЃРєР° РІ РїСЂРѕРіСЂР°РјРјРµ Sothink SWF Quicker, С‚Р°РєР¶Рµ РєР°Рє Рё РІ РґСЂСѓРіРёС… РіСЂР°С„РёС‡РµСЃРєРёС… Рё С„Р»РµС€ РїСЂРѕРіСЂР°РјРјР°С…, РїРѕРјРѕРіР°РµС‚ РјР°СЃРєРёСЂРѕРІР°С‚СЊ РѕС‚РґРµР»СЊРЅС‹Рµ СѓС‡Р°СЃС‚РєРё РёР·РѕР±СЂР°Р¶РµРЅРёСЏ РЅР° СЃР»РѕРµ, РєРѕС‚РѕСЂС‹Р№ РїРѕРјРµС‰РµРЅ РЅРёР¶Рµ СЃР»РѕСЏ СЃ РјР°СЃРєРѕР№. РџСЂРё СЌС‚РѕРј, СѓРјРµРЅРёРµ СЂР°Р±РѕС‚Р°С‚СЊ СЃ РјР°СЃРєРѕР№ РІ РїСЂРѕРіСЂР°РјРјРµ Sothink SWF РїРѕРјРѕРіР°РµС‚ РІ СЃРѕР·РґР°РЅРёРё РѕСЂРёРіРёРЅР°Р»СЊРЅС‹С… СЌС„С„РµРєС‚РѕРІ, РєР°Рє СЃС‚Р°С‚РёС‡РµСЃРєРёС… С‚Р°Рє Рё РІ Р°РЅРёРјР°С†РёРё, Р° С‚Р°РєР¶Рµ РІ СЃРѕР·РґР°РЅРёРё С„Р»РµС€РµРє СЂР°Р·Р»РёС‡РЅРѕР№ С„РѕСЂРјС‹ (РѕРІР°Р»СЊРЅРѕР№... <a href="https://www.liveinternet.ru/users/novprospekt/post277631248/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

Лариса_Гурьянова обратиться по имени Воскресенье, 26 Мая 2013 г. 04:58 (ссылка)

Мариша, как же здорово!!! Спасибо тебе огромное за такой нужный урок!!! Супер!!!

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

Понедельник, 27 Мая 2013 г. 08:01ссылка

novprospekt

Пожалуйста Ларисочка. Буду рада если пригодится. Если нужен будет какой-то совет, обращайся.

Ответить С цитатой В цитатник Обратиться по имени

Понедельник, 27 Мая 2013 г. 08:54ссылка

Лариса_Гурьянова

Спасибо, дорогая! Обязательно!

Ответить С цитатой В цитатник Обратиться по имени

Kapitoshka_N обратиться по имени Воскресенье, 26 Мая 2013 г. 08:05 (ссылка)

novprospekt, спасибо )

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

Понедельник, 27 Мая 2013 г. 08:01ссылка

novprospekt

Пожалуйста. Буду рада если пригодится.

Ответить С цитатой В цитатник Обратиться по имени

jzayka обратиться по имени Воскресенье, 26 Мая 2013 г. 09:25 (ссылка)

Спасибо,Мариночка,за урок..
Очень нравится маска во флеш.
Твою корзиночку анимировала и в адобе флеш.
Теперь там мне проще.Даже лучше ориентируюсь.
Обожаю флеш,но еще очень и очень много белых пятен..
Удачи ,Успехов,Везения и Хорошего настроения))))))

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

Понедельник, 27 Мая 2013 г. 10:31ссылка

novprospekt

В адобе флеш еще проще сделать красивую форму маски. В него напрямую можно импортировать графические файлы в формате иллюстратора AI. Скачивашь любой векторный клипарт с формами в формате AI, например как здесь http://allday2.com/index.php?newsid=630319 и делаешь с ними маски.

Ответить С цитатой В цитатник Обратиться по имени

Понедельник, 27 Мая 2013 г. 14:07ссылка

jzayka

Cпасибо за ссылочку и пример.
Вчера прошлась по твоим урокам.
Таймер отсчета обратгного времени.
По уроку используя AS2 могу сделать.
Меня же интересует как сделать в адобе,используя панельку фрагмента кодов.
Там есть ,но по-моему это немножко другое..
Используя эту панельку научилась управлять музыкой..
Мариночка,если у тебя не очень отнимет это время,подскажи пожалуйста)
Не к спеху,как сможешь...

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 28 Мая 2013 г. 01:08ссылка

novprospekt

Леночка, ты имеешь ввиду этот адобовский шаблон таймера. Как им пользоваться. Хороший шаблончик и нужный. Скрипт написан на AS3. Я завтра скрины сделаю. Там надо в самом скрипте даты нужные выставить и текстовые поля на рабочем поле заполнить. Еще в скрипте названия - секунды, минуты, часы поменять на русский язык. Шрифты надо внедрить обязательно. Можно вставить выше слои и дописать свой текст, а выше фонового слоя добавить слои для клипарта. Ну и размер рабочего поля если надо можно больше сделать.

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 28 Мая 2013 г. 10:29ссылка

jzayka

Мариночка,большое тебе спасибо)
Так опереативно ответила..Я крутила,вертела скрипт.
Там только указано,что надо поменять кол-во секунд.
Может я не тот шаблон смотрю.
Внедрение шрифтов тоже пока только пробую методом тыка.В инете нашла кое-что об этом,сижу читаю).
С нетерпением буду ждать скрины.
Еще раз большое тебе спасибо,что ты охотно делишься своими знаниями.Тем более,как я поняла,они достигнуты упорным трудом)
28-05-2013 8-57-27 (588x546, 108Kb)

Ответить С цитатой В цитатник Обратиться по имени

angy20091 обратиться по имени Воскресенье, 26 Мая 2013 г. 10:15 (ссылка)

Спасибо урок.
Я люблю свою флэш-анимации.
цитирую -
Y мeня Sothink SWF Easy - Вы знаете сайт для загрузки? Спасибо
от всего сердца!
0_8e6ac_d14c5672_XL (650x476, 325Kb)