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


Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 1. 01-05-2015 18:01 к комментариям - к полной версии - понравилось!

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

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

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


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


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

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

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

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

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

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



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


[341x241]

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

[700x]

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

[376x487]

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

[630x440]

[375x191]

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

[700x]

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

[787x412]

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

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

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

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

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

[700x]

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".

[713x495]

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

[700x]

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

[700x]

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

mask1

[700x]

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

[700x]

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



Серия сообщений "Маска в 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.


вверх^ к полной версии понравилось! в evernote
Комментарии (10):
silence14 01-05-2015-19:26 удалить
До Adobe Flash пока руки не доходят. Устала.
Grif-studio 01-05-2015-19:28 удалить
Ответ на комментарий silence14 # Понимаю, программ уйма.
silence14 01-05-2015-19:33 удалить
Grif-studio,Программ уйма. Здоровья мало.
Grif-studio 01-05-2015-20:38 удалить
Ответ на комментарий silence14 # silence14, Очень жаль, желаю крепкого здоровья.
Спасибо вам! Будем пробовать!
Grif-studio 13-07-2015-18:04 удалить
Ответ на комментарий Татьяна1236 # Полезный урок, удачи!
nadmirchik 06-12-2015-17:07 удалить
Спасибо огромное ! Забираю все три урока!!!! Всего самого-самого доброго!!!!
nadmirchik 06-12-2015-17:12 удалить
Очень обидно, но скачать не удается, антивирус блокирует. А что делать не подскажите????
Grif-studio 07-12-2015-19:04 удалить
Ответ на комментарий nadmirchik #
Grif-studio 07-12-2015-19:08 удалить
Ответ на комментарий nadmirchik # Попробуйте отключить антивирус на время скачивания.


Комментарии (10): вверх^

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

Дневник Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 1. | Grif-studio - grif-studio | Лента друзей Grif-studio / Полная версия Добавить в друзья Страницы: раньше»