Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 1.

Среда, 21 Мая 2014 г. 13:26 + в цитатник

Мы с вами уже знаем, что статический текст во флеш может быть маской и маскировать фон, который находится под ним.
Этот прием мы использовали для создания красивых надписей заполненных структурным или анимированным фоном.
Теперь рассмотрим, как можно сделать маской динамический текст.
Динамический текст используется, например, для создания информеров – цифровых часиков, календарей, таймеров и так далее.
Вот, например, здесь часики с приветствием являются маской для видеоролика (футажа).

Давайте научимся создавать маску динамическим текстом и создадим вот такой, очень интересный, информер (цифровые часики+цифровой календарик).

Будем использовать программу Sothink SWF Quicker. Для Adobe Flash все аналогично.
Для маскирования будем использовать небольшие видеоролики - футажи.
Футаж для этого урока я создала в программе particleIllusion 3.0 (прилагается к материалам урока).

В данном уроке и в исходных файлах флеш, которые прилагаются к уроку, используется шрифт Еurope Bold. Шрифт есть в материалах к уроку. Шрифт желательно заранее установить на компьютер.

Материалы к уроку скачать здесь.
Материалы к уроку "Маска динамическим текстом"

Для дальнейшей работы желательно создать на компьютере папку для рабочего проекта. Назовите ее, например, "Проект Маска динамическим текстом". В этой папке сохраните материалы к уроку, выбранные вами для работы футажи, а затем мы сохраним туда начатый флеш проект и, в самом конце урока, готовую флешку.
Хотя урок и не очень сложный, так как многие из вас уже умеют делать и цифровые часики, и календарики, но по количеству изложенного материала очень объемный и многоступенчатый. Поэтому, я решила разбить весь материал на три части - три подробных урока.
Урок первый. - Создание проекта и создание в рамках проекта простых цифровых часиков.

Урок второй. - В рамках созданного проекта добавляем к цифровым часикам календарик.

Урок третий. - Создаем маску динамическим текстом. Украшаем и дорабатываем созданные часики и календарик.

Открываем программу Sothink SWF Quicker, устанавливаем размеры рабочего поля и частоту кадров будущего флеш ролика

На основной сцене "Сцена 1", на Временной шкале, создаем, для начала, три слоя "Часики", "Календарь" и "Скрипт". Обязательно сделайте переименование слоев. Это очень упростит вашу дальнейшую работу. Чтобы переименовать слой достаточно выделить его, щелкнуть по нему дважды и в открывшемся диалоговом окне ввести имя для слоя.

Сохраните ваш проект. Файл - Сохранить как. В открывшемся проводнике укажите путь для сохранения (Созданная папка проекта) и название проекта "Маска динамическим текстом".
Ваш проект сохраниться в формате SQF - это формат проектов для программы Sothink SWF Quicker. Для Adobe Flash файлы проекта сохраняются в формате FLA.

Далее, в процессе работы, периодически нажимайте уже просто "Файл - Сохранить". Тогда ваш проект будет сохраняться, а вы всегда сможете вернуться к нему и поработать над ним снова.
Теперь создадим Новый символ - Видеоролик, в котором и разместим простые цифровые часики. Символу обязательно дайте осмысленное название, например "Часики"

После того как Новый символ "Часики" будет создан, он появиться в Библиотеке и откроется окно его редактирования.
В этом открывшемся окне мы и будем создавать простые цифровые часы.
К Слою 1, который у вас уже есть при открытии, надо выше добавить слой для скрипта. Это будет Слой 2.
На Слое 1, инструментом "Текст", разворачиваем текстовое поле и вводим текст для часиков, например - 00 : 00 : 00.

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

Обязательно
Тип текста - Динамический,

расположение - В одну строку,

в графе var (переменная) - time

Ваш выбор - это цвет шрифта, сам шрифт и его размер. По поводу шрифта могу сказать, что лучше всего выбирать для таких часиков, шрифты с постоянным размером букв по ширине. Я выбрала шрифт Еurope Bold. При применении таких шрифтов, когда изменяется время (меняются цифры), само текстовое поле не дергается.

Когда закончите с текстом для часиков, то перейдите на Слой 2, откройте вкладку "Действие" и вставьте следующий скрипт

code:


function clock()

{

    var _loc1 = new Date();

    sec = _loc1.getSeconds();

    min = _loc1.getMinutes();

    hour = _loc1.getHours();

    if (sec < 10)

    {

        sec = "0" + sec;

    } // end if

    if (min < 10)

    {

        min = "0" + min;

    } // end if

    if (hour < 10)

    {

        hour = "0" + hour;

    } // end if

    time = hour + ":" + min + ":" + sec;

} // End of the function

_root.onEnterFrame = clock;

mydate = new Date();

sec = mydate.getSeconds();

min = mydate.getMinutes();

hour = mydate.getHours();

if (sec < 10)

{

    sec = "0" + sec;

} // end if

if (min < 10)

{

    min = "0" + min;

} // end if

if (hour < 10)

{

    hour = "0" + hour;

} // end if

Все, цифровые часики созданы, и мы возвращаемся с вами на основную сцену "Сцена 1".

На основной сцене выделяем слой "Часики", а в панели инструментов выбираем инструмент "Выбор" (черная стрелка). Инструментом "Выбор" из Библиотеки на Рабочее поле перетаскиваем Видеоролик "Часики" и размещаем его в нижней части Рабочего поля.

На панели инструментов выбираем инструмент "Трансформация" и, с помощью перемещения маркеров, устанавливаем размер Видеоролика "Часики" таким, чтобы он полностью помещался на Рабочем поле.

Мы находимся на основной сцене "Сцена 1", на слое "Часики". Видеоролик "Часики" на Рабочем поле выделен. Также открыта вкладка "Свойства".
На вкладке "Свойства" в графе "Имя" вводим

mask1

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

Так как ранее мы уже сохранили наш флеш проект в папку проекта, то теперь осталось только сохранить последние изменения
Файл - Сохранить.
Если же на этом этапе вы захотите сохранить вашу работу, как флешку (экспортировать флеш ролик), то необходимо будет выбрать для этой флешки какое-то другое имя, отличное от имени проекта ( не "Маска динамическим текстом").
Итак, Файл проекта сохранен со всеми сделанными в нем изменениями и, теперь, если вы прервётесь и закроете программу, то открыть файл проекта снова можно будет командой меню
Файл - Открыть.
Следующим этапом нашего проекта будет создания цифрового календаря и размещение его на основной сцене "Сцена 1".
Делать это мы будем во второй части урока. Смотрим продолжение урока здесь.
Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 2.

Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash
Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 20 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.
Часть 21 - Делаем заготовку для флеш-календарика в Adobe Flash CS6..
Часть 22 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 1.
Часть 23 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 3.
Часть 24 - Создание 3D карусели ( пояснения к уроку от Веры BAT)
...
Часть 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/флеш-информеры,часики
Flash/уроки sothnik swf quicker

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

<a href="https://www.liveinternet.ru/users/novprospekt/post325217664/">РњР°СЃРєР° РґРёРЅР°РјРёС‡РµСЃРєРёРј С‚РµРєСЃС‚РѕРј. РЈСЂРѕРє РґР»СЏ С„Р»РµС€. Action Script 2. Р§Р°СЃС‚СЊ 1.  </a><br/>РњС‹ СЃ РІР°РјРё СѓР¶Рµ Р·РЅР°РµРј, С‡С‚Рѕ СЃС‚Р°С‚РёС‡РµСЃРєРёР№ С‚РµРєСЃС‚ РІРѕ С„Р»РµС€ РјРѕР¶РµС‚ Р±С‹С‚СЊ РјР°СЃРєРѕР№ Рё РјР°СЃРєРёСЂРѕРІР°С‚СЊ С„РѕРЅ, РєРѕС‚РѕСЂС‹Р№ РЅР°С…РѕРґРёС‚СЃСЏ РїРѕРґ РЅРёРј. 
РС‚РѕС‚ РїСЂРёРµРј РјС‹ РёСЃРїРѕР»СЊР·РѕРІР°Р»Рё РґР»СЏ СЃРѕР·РґР°РЅРёСЏ РєСЂР°СЃРёРІС‹С… РЅР°РґРїРёСЃРµР№ Р·Р°РїРѕР»РЅРµРЅРЅС‹С… СЃС‚СЂСѓРєС‚СѓСЂРЅС‹Рј РёР»Рё Р°РЅРёРјРёСЂРѕРІР°РЅРЅС‹Рј С„РѕРЅРѕРј.
РўРµРїРµСЂСЊ СЂР°СЃСЃРјРѕС‚СЂРёРј, РєР°Рє РјРѕР¶РЅРѕ СЃРґРµР»Р°С‚СЊ РјР°СЃРєРѕР№ РґРёРЅР°РјРёС‡РµСЃРєРёР№ С‚РµРєСЃС‚.
Р”РёРЅР°РјРёС‡РµСЃРєРёР№ С‚РµРєСЃС‚ РёСЃРїРѕР»СЊР·СѓРµС‚СЃСЏ, РЅР°РїСЂРёРјРµСЂ, РґР»СЏ СЃРѕР·РґР°РЅРёСЏ РёРЅС„РѕСЂРјРµСЂРѕРІ вЂ“ С†РёС„СЂРѕРІС‹С… С‡Р°СЃРёРєРѕРІ, РєР°Р»РµРЅРґР°СЂРµР№, С‚Р°Р№РјРµСЂРѕРІ Рё С‚Р°Рє РґР°Р»РµРµ. 
Р’РѕС‚, РЅР°РїСЂРёРјРµСЂ, Р·РґРµСЃСЊ С‡Р°СЃРёРєРё СЃ РїСЂРёРІРµС‚СЃС‚РІРёРµРј СЏРІР»СЏСЋС‚СЃСЏ РјР°СЃРєРѕР№ РґР»СЏ РІРёРґРµРѕСЂРѕР»РёРєР° (С„СѓС‚Р°Р¶Р°).

Р”Р°РІР°Р№С‚Рµ РЅР°СѓС‡РёРјСЃСЏ СЃРѕР·РґР°РІР°С‚СЊ РјР°СЃРєСѓ РґРёРЅР°РјРёС‡РµСЃРєРёРј С‚РµРєСЃС‚РѕРј Рё СЃРѕР·РґР°РґРёРј РІРѕС‚ С‚Р°РєРѕР№, РѕС‡РµРЅСЊ РёРЅС‚РµСЂРµСЃРЅС‹Р№, РёРЅС„РѕСЂ... <a href="https://www.liveinternet.ru/users/novprospekt/post325217664/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

Kantemirova_Irina обратиться по имени Среда, 21 Мая 2014 г. 14:42 (ссылка)

Мариша,понравились и часики цифровые и календарик,цитирую с благодарностью и приступаю к уроку.

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

Среда, 21 Мая 2014 г. 18:39ссылка

novprospekt

Ириш, рада тебя видеть. Пробуй. Материала много, но он не очень сложный. Думаю, у тебя все получиться, но если что, то пиши.

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

ВАТ обратиться по имени Среда, 21 Мая 2014 г. 15:27 (ссылка)

Мариночка, спасибо большое! Сейчас процитирую, а завтра начну делать.

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

Среда, 21 Мая 2014 г. 18:36ссылка

novprospekt

Верочка, очень рада видеть. Я завтра тоже займусь походом по гостям. Все твои работы новые видела. Но писать было некогда, так что завтра отпишусь.
Карусель получилась супер! Молодец. Запись была в топе, значит еще больше лирушников увидят твои интересные работы.

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

Среда, 21 Мая 2014 г. 19:20ссылка

ВАТ

Мариночка, а в каком топе? Я думала, что ко мне люди пришли благодаря Лене и Ларисе Гурьяновой. Меня ведь никто не знает здесь, а Леночку и Ларису все знают. Вот я и подумала, что их подписчики пришли ко мне посмотреть.

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

Среда, 21 Мая 2014 г. 20:16ссылка

novprospekt

Да, конечно, благодаря Лене и Ларисе пришли их читатели и запись про карусель оказалась популярной за 20 мая.
Вот ссылочка на Новостной листок от 20 мая.
http://www.liveinternet.ru/users/dailynews/post325085723/
Там в разделе флешки, игры, видео есть ссылка на "Мои работы" BAT.
Если хочешь, то добавь дневник "Новостной листок в друзья и будешь получать на почту каждый день сводку о самых популярных записях на Лиру.
Многие такую сводку читают и переходят по ссылкам к интересным записям.

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

Среда, 21 Мая 2014 г. 20:17ссылка

ВАТ

Спасибо, Мариночка за объяснение.

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

Четверг, 22 Мая 2014 г. 21:09ссылка

ВАТ

Марина, я делаю урок в adobe (в сотнике не умею, потом с ним разберусь). Скажи, пожалуйста, куда мне вставить в графе var (переменная) - time? А то у меня часики не идут и мне, кажется, что именно из-за этого.

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

Четверг, 22 Мая 2014 г. 21:21ссылка

novprospekt

Верочка, в "Свойствах" в самом низу есть графа "Переменная". А в материалах к урокам у меня есть и исходник FLA. Если вдруг какие то вопросы будут, а меня в сети не будет, то попробуй в исходнике посмотреть.
23-05-2014 0-15-40 (700x538, 196Kb)