Дополнение к уроку Снежок «funkSnow».

Суббота, 29 Ноября 2014 г. 05:29 + в цитатник

Урок Снежок "funkSnow" находится здесь.
А сейчас мы научимся добавлять разные элементы ,например,такие как текст, рамочки, часики, информеры, плееры, к вашей работе.

Сначала сделаем рамочку к открытке
Рамочку можно подготовить в фотошоп или нарисовать в самой программе.

Откройте файл FLA с вашим проектом "funkSnow"
Файл - Открыть

На Временной школе у вас один слой "Слой 1"

27-11-2014 16-53-02 (649x466, 135Kb)

Переименуем его в слой "main"

27-11-2014 16-57-06 (613x438, 128Kb)

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

Выше слоя "main" создайте слой "маска снега".

27-11-2014 17-48-11 (542x429, 123Kb)

На слое "маска снега" инструментом "Прямоугольник" нарисуйте прямоугольник любого размера с любой заливкой, но без обводки.

27-11-2014 17-56-46 (700x511, 175Kb)

Щелкните по нарисованному прямоугольнику инструментом "Стрелка", чтобы выделить его. Теперь, не снимая выделения, в панели "Свойства" установите размеры нарисованного прямоугольника такими же как фоновая картинка.
То есть, например, в моём случае это 700 x 470 пикселей.

27-11-2014 18-02-36 (700x515, 316Kb)

Не снимая выделения, нарисованный прямоугольник необходимо выровнять горизонтально и вертикально по центру Рабочего поля.
Нарисованный прямоугольник должен полностью перекрывать всё Рабочее поле.
27-11-2014 18-06-42 (700x573, 297Kb)

Слой "маска снега" сделайте маской для слоя "main". Напоминаю, что маской может быть только векторная фигура.

27-11-2014 18-10-57 (699x638, 280Kb)

Определитесь какого размера вы хотели бы сделать рамочку. Например, по 20 пикселей с каждой стороны по ширине и высоте.
На эту величину нам надо уменьшить размер маски в ширину и в высоту
Для этого снимаем замочек со слоя "маска снега", выделяем прямоугольник на этом слое и в панели "Свойства" указываем новые размеры для маски.

То есть по моим размерам фонового слоя это будет:
ширина - 700 пикс. - 20 пикс. - 20 пикс. = 660 пикс.
высота - 470 пикс. - 20 пикс. - 20 пикс. = 430 пикс.

27-11-2014 20-12-14 (700x564, 266Kb)

Заново выравниваем уменьшенную маску по центру Рабочего поля.

27-11-2014 20-16-10 (700x599, 311Kb)

Можете протестировать флешку

и увидите, что снег идёт только на участке где есть маска, а по краям фон без фоновой картинки. Вот на участок где фон чистый и можно накладывать рамку.
Для этого ниже слоя "main" создаём новый слой "рамка".
Слои "main" и "маска снега" закройте на замочек.
На слое "рамка" инструментом "Прямоугольник" нарисуйте прямоугольник любого размера с заливкой цвета или градиента какой вы хотите видеть вашу рамочку.
Щелкните по нарисованному прямоугольнику инструментом "Стрелка", чтобы выделить его. Теперь, не снимая выделения, в панели "Свойства" установите размеры нарисованного прямоугольника такими же как фоновая картинка.
То есть, например, в моём случае это 700 x 470 пикселей.
Затем также, не снимая выделения, выровняйте прямоугольник горизонтально и вертикально по центру Рабочего поля.

28-11-2014 12-02-41 (700x557, 394Kb)

Снимите замочек со слоя "маска снега" и выделите находящийся на нём прямоугольник - маску. Щелкните по выделенному прямоугольнику правой кнопкой мыши и вызовите контекстное меню. В контекстном меню выберите пункт "Копировать".

28-11-2014 12-19-04 (650x635, 376Kb)

Далее снова закройте слой "маска снега" на замочек и вернитесь на слой "рамка"
Щелкните мышкой вне Рабочего поля и вызовите контекстное меню. В контекстном меню выберите пункт "Вставить на место".

28-11-2014 12-22-17 (660x624, 373Kb)

Поверх прямоугольника,который перекрывает слой "рамочка", появился прямоугольник меньшего размера, который соответствует вырезу для рамочки. Снимите выделение с меньшего прямоугольника, щелкнув мышкой по Рабочему полю. Теперь снова щелкните по этому меньшему прямоугольнику мышкой, чтобы выделить его, и вызвав контекстное меню выберите пункт "Вырезать".

28-11-2014 12-26-23 (653x630, 364Kb)

После выполнения этой операции на слое "рамка" у вас будет рамочка с вырезом.
Выделите эту рамочку щелкнув по ней мышкой. Затем преобразуйте рамочку в Фрагмент ролика.

28-11-2014 12-38-21 (700x643, 260Kb)

Выделите Фрагмент ролика "рамочка" и примените к нему фильтр "Фаска" со следующими параметрами

28-11-2014 12-43-17 (354x275, 62Kb)

Рамочка готова и можно протестировать флешку

Если же вы хотите поместить на эту флешку готовую рамочку, то импортируйте эту рамочку в Библиотеку. Отмечу то, что размеры рамочки, естественно, должны соответствовать размерам фоновой картинки. То есть в моём случае это 700 x 470 пикселей.

Файл - Импорт - Импортировать в библиотеку

28-11-2014 16-27-24 (609x494, 259Kb)

Инструментом "Стрелка" перетащите импортированную рамочку на Рабочее поле на слой "рамочка".

28-11-2014 16-31-43 (700x479, 240Kb)

Выровняйте перемещенную из Библиотеки рамочку по центру Рабочего поля.
28-11-2014 16-34-11 (700x576, 320Kb)

Теперь необходимо внести изменения в размеры маски.
Выделите слой "маска снега". снимите с него замочек и выделите находящийся на нём прямоугольник. В панели "Свойства" измените размер этого прямоугольника так, чтобы он соответствовал размеру выреза вашей рамки.
В моём случае ширина рамочки 50 пикселей с каждой стороны. Следовательно размеры маски (соответственно размеры выреза рамки)
ширина: 700 пикс. - 50 пикс. - 50 пикс. = 600 пикс.
высота: 470 пикс. - 50 пикс. - 50 пикс. = 370 пикс.
Закройте слой "маска снега" на замочек
28-11-2014 16-49-04 (700x529, 309Kb)

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

Можно также украсить рамку маленькими анимашками. Например, поместить сверху на рамочку вот такую анимашку

Для этого импортируйте анимашку в Библиотеку

Файл - Импорт - Импортировать в библиотеку

Создайте выше слоя "рамка" новый слой - "анимашка"

Найдите в Библиотеке символ - Фрагмент ролика в котором эта анимашка находится и перетащите инструментом "Стрелка" этот Фрагмент ролика на Рабочее поле на слой "анимашка" в нужные места.

Обращаю ваше внимание, что любой текст или Фрагменты ролика будут видны только если находятся на Рабочем поле вне зоны, где размещена маска. То есть, например, на рамочке. Также нельзя создавать никакие слои выше слоя "маска снега".

28-11-2014 17-10-48 (700x503, 266Kb)

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

Следующим шагом попробуем разместить какой - нибудь Фрагмент ролика, например часики. календарик или информер внутри маски.

Для этого импортируйте фоновую картинку, которая у вас находится в папке "lib" в Библиотеку программы.

Файл - Импорт - Импортировать в библиотеку

Далее создайте ниже слоя "рамка" слой "фон" и перетащите на него из Библиотеки фоновую картинку.
Для удобства в работе со слоем фон и фоновой картинкой отключите видимость всех остальных слоёв.
Выровняйте фоновую картинку по центру Рабочего поля.

28-11-2014 17-32-24 (700x531, 404Kb)

Включите видимость слоёв, которые отключали.

В новом Фрагменте ролика создайте мувиклип, который вы хотите разместить внутри маски.

В моём случае это будет информер "До Нового Года"

Вставка - Новый символ

Создаём в этом символе информер

28-11-2014 17-39-52 (564x440, 273Kb)

После того как создан необходимый Фрагмент ролика нужно определить ему место внутри маски для снега.
Для этого ниже слоя "main" создаём новый слой и называем его "рабочий". Этот слой мы потом удалим. У меня этот слой получился ниже слоя "main" и выше слоя "анимашка".

29-11-2014 5-08-56 (586x358, 153Kb)

На слое "рабочий" инструментом "Прямоугольник" рисуем любую фигуру произвольного размера и с любой заливкой без обводки.
Инструментом "Свободное преобразование" придаём фигуре нужные размеры, исходя из того, чтобы в эту фигуру вместился созданный ранее Фрагмент ролика. В моём случае это информер.
После того как размеры фигуры установлены, помещаем её в нужное место внутри зоны маски для снега.
Обращаю внимание, что всё это мы делаем на слое "рабочий". Другие слои при этом для удобства можно закрыть на замочек.
Итак, я для размещения своего информера в зоне маски для снега нарисовала вытянутый овал и сдвинула его вправо.

29-11-2014 5-21-52 (700x567, 388Kb)

Инструментом "Стрелка" щелкаем по нарисованному овалу, чтобы выделить его и вызвав контекстное меню выбираем пункт "Вырезать".

29-11-2014 5-38-14 (700x587, 429Kb)

Видимость слоя "Рабочий" отключаем и переходим на слой "маска снега". Снимаем замочек со слоя "маска снега".
Щелкаем мышкой вне Рабочего поля и вызвав контекстное меню выбираем пункт "Вставить на место".

29-11-2014 5-31-50 (700x615, 344Kb)

Снимаем выделение с вставленного овала, щелкнув мышкой по прямоугольнику маски для снега.

29-11-2014 5-50-18 (691x656, 411Kb)

Затем снова щелкаем инструментом "Стрелка" по вставленному овалу, чтобы выделить его и, вызвав контекстное меню, выбираем пункт "Вырезать".

29-11-2014 5-53-48 (700x600, 346Kb)

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

29-11-2014 5-47-57 (700x616, 331Kb)

Создаем ниже слоя "main" слой "информер" и перетаскиваем на него на Рабочий стол из Библиотеки Фрагмент ролика "информер". Размещаем этот Фрагмент ролика в вырез, который образовался в маске для снега.

29-11-2014 6-30-57 (700x556, 325Kb)

Теперь можно протестировать флешку и если всё сделали правильно, то поверх летящего снежка вы увидите информер "До Нового Года..."
Можно экспортировать флешку и публиковать её.

Файл - Экспорт - Экспортировать ролик

29-11-2014 6-36-33 (648x551, 338Kb)

Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash
Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 38 - Флеш эффект движения картинок. Флеш галерея «Photo Stack Gallery».
Часть 39 - Снежок «funkSnow». Урок для Adobe Flash CS6.
Часть 40 - Дополнение к уроку Снежок «funkSnow».
Часть 41 - Программное вращение 3-d во флеш. Action Script 3.
Часть 42 - Загружаем музыку в Adobe Flash c помощью библиотеки классов.
...
Часть 48 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.
Часть 49 - Использование панели «Редактор движения» в Adobe Flash CS6.
Часть 50 - Анимация формы во Flash(морфинг).

Серия сообщений "Флешки Новогодние":
Часть 1 - Флешинформер "До Нового Года осталось..."
Часть 2 - Создаем флешки в программе Aleo Flash Intro Banner Maker.Часть первая.
...
Часть 19 - Флеш эффект движения картинок. Флеш галерея «Photo Stack Gallery».
Часть 20 - Снежок «funkSnow». Урок для Adobe Flash CS6.
Часть 21 - Дополнение к уроку Снежок «funkSnow».
Часть 22 - Программное вращение 3-d во флеш. Action Script 3.
Часть 23 - Флеш Радио «Новогоднее».
...
Часть 25 - Флеш поздравления с Новым Годом.
Часть 26 - Флеш открытка «2015».
Часть 27 - С Новым Годом!

Рубрики:

Flash/флеш-информеры,часики

Метки: уроки флеш уроки adobe flash cs6 снегопад на as3

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

<a href="https://www.liveinternet.ru/users/novprospekt/post344945299/">Р”РѕРїРѕР»РЅРµРЅРёРµ Рє СѓСЂРѕРєСѓ  РЎРЅРµР¶РѕРє В«funkSnowВ».</a><br/>

РЈСЂРѕРє РЎРЅРµР¶РѕРє "funkSnow" РЅР°С…РѕРґРёС‚СЃСЏ Р·РґРµСЃСЊ.
Рђ СЃРµР№С‡Р°СЃ РјС‹ РЅР°СѓС‡РёРјСЃСЏ РґРѕР±Р°РІР»СЏС‚СЊ СЂР°Р·РЅС‹Рµ СЌР»РµРјРµРЅС‚С‹ ,РЅР°РїСЂРёРјРµСЂ,С‚Р°РєРёРµ РєР°Рє С‚РµРєСЃС‚, СЂР°РјРѕС‡РєРё, С‡Р°СЃРёРєРё, РёРЅС„РѕСЂРјРµСЂС‹, РїР»РµРµСЂС‹, Рє РІР°С€РµР№ СЂР°Р±РѕС‚Рµ.

РЎРЅР°С‡Р°Р»Р° СЃРґРµР»Р°РµРј СЂР°РјРѕС‡РєСѓ Рє РѕС‚РєСЂС‹С‚РєРµ
Р Р°РјРѕС‡РєСѓ РјРѕР¶РЅРѕ РїРѕРґРіРѕС‚РѕРІРёС‚СЊ РІ С„РѕС‚РѕС€РѕРї РёР»Рё РЅР°СЂРёСЃРѕРІР°С‚СЊ РІ СЃР°РјРѕР№ РїСЂРѕРіСЂР°РјРјРµ.

РћС‚РєСЂРѕР№С‚Рµ С„Р°Р№Р» FLA СЃ РІР°С€РёРј РїСЂРѕРµРєС‚РѕРј "funkSnow" 
Р¤Р°Р№Р» - РћС‚РєСЂС‹С‚СЊ

РќР° Р’СЂРµРјРµРЅРЅРѕР№ С€РєРѕР»Рµ Сѓ РІР°СЃ РѕРґРёРЅ СЃР»РѕР№ "РЎР»РѕР№ 1"

РџРµСЂРµРёРјРµРЅСѓРµРј РµРіРѕ РІ СЃР»РѕР№ "main"

Р’Р°Рј РјРѕР¶РµС‚ РїРѕРєР°Р·Р°С‚СЊСЃСЏ, С‡С‚Рѕ СЌС‚РѕС‚ СЃР»РѕР№ РїСѓСЃС‚. РќРѕ РЅР° СЃР°РјРѕРј Р¶Рµ  РґРµР»Рµ РѕРЅ РїРѕРґРєР»СЋС‡С‘РЅ Рє РєР»Р°СЃСЃСѓ Main Рё РІСЃСЏ РіСЂР°С„РёС‡РµСЃРєР°СЏ РёРЅС„РѕСЂРјР°С†РёСЏ, Р° С‚Р°РєР¶Рµ  РїСЂРѕРіСЂР°РјРјРЅР°СЏ Р°РЅРёРјР°С†РёСЏ РїРѕСЃС‚СѓРїР°РµС‚ ... <a href="https://www.liveinternet.ru/users/novprospekt/post344945299/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

таила обратиться по имени Суббота, 29 Ноября 2014 г. 05:52 (ссылка)

Чудесная работа! Красотень! Спасибо Мариночка!

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

Лариса_Гурьянова обратиться по имени Суббота, 29 Ноября 2014 г. 07:25 (ссылка)

Спасибо, Мариша!!!!

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

здесь_нет_никого обратиться по имени Суббота, 29 Ноября 2014 г. 07:32 (ссылка)

Мариночка,спасибо тебе огромное за урок,не могла дождаться,очень благодарна!
Часто бывает,что поверх начинаешь что-то ставить и флешка совсем не работает,а вот этот вариант можно в других случаях применять,или только индивидуально к данной работе?
Цитирую с уважением и благодарностью.

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

Semenova_Irina обратиться по имени Суббота, 29 Ноября 2014 г. 07:36 (ссылка)

Спасибо,Мариночка!!! Все это очень нужно!!!!!!!!!!

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