-Рубрики

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

Поиск сообщений в Jorjorych

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

 

 -Сообщества

Читатель сообществ (Всего в списке: 2) Мир_клипарта О_Самом_Интересном

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 11.07.2013
Записей: 1657
Комментариев: 21885
Написано: 29186


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

Среда, 21 Мая 2014 г. 14:07 + в цитатник
Цитата сообщения novprospekt

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

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


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


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

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

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

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

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

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



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


Маска динамическим текстом 1

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

Маска динамическим текстом 2

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

Маска динамическим текстом 5

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

Маска динамическим текстом 3

Маска динамическим текстом 4

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

Маска динамическим текстом 6

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

Маска динамическим текстом 7

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

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

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

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

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

Маска динамическим текстом 8

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

Маска динамическим текстом 9

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

Маска динамическим текстом 10

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

Маска динамическим текстом 11

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

mask1

Маска динамическим текстом 12

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

Маска динамическим текстом 13

Так как ранее мы уже сохранили наш флеш проект в папку проекта, то теперь осталось только сохранить последние изменения
Файл - Сохранить.
Если же на этом этапе вы захотите сохранить вашу работу, как флешку (экспортировать флеш ролик), то необходимо будет выбрать для этой флешки какое-то другое имя, отличное от имени проекта ( не "Маска динамическим текстом").
Итак, Файл проекта сохранен со всеми сделанными в нем изменениями и, теперь, если вы прервётесь и закроете программу, то открыть файл проекта снова можно будет командой меню
Файл - Открыть.
Следующим этапом нашего проекта будет создания цифрового календаря и размещение его на основной сцене "Сцена 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.
 

 


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

Серия сообщений "Sothink SWF Quicker":
Часть 1 - Дизайн кнопки. Урок для Sothink SWF Quicker
Часть 2 - Использование масок в программе Sothink SWF Quicker
...
Часть 16 - Шаблон - конструктор часиков для Sothink SWF Quicker
Часть 17 - Делаем заготовку для флеш-календарика в Adobe Flash CS6.
Часть 18 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 1.
Часть 19 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 2.
Часть 20 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 3.
...
Часть 28 - Кнопка повтора мувика - дополнение.
Часть 29 - Рисуем кнопку в Adobe Flash.
Часть 30 - Урок:увеличение текста по наведению курсора.

Рубрики:  Уроки/Уроки флеш
Метки:  
Понравилось: 2 пользователям

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку