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


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


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


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


Будем использовать программу 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.

вверх^ к полной версии понравилось! в evernote
Комментарии (49): «первая «назад
MissKcu 26-05-2014-11:46 удалить
с благодарностью утащу все три урока
novprospekt 26-05-2014-17:38 удалить
Ответ на комментарий lyusitseki # Пожалуйста и всего хорошего.
novprospekt 26-05-2014-17:41 удалить
Ответ на комментарий Sobirayu_vinograd # Программа Sothink SWF Quicker очень легкая по весу и та, на которую даю ссылку я, портабельная и установки не требует. Установить можно на любой, даже не очень мощный комп или ноутбук.
novprospekt 26-05-2014-17:41 удалить
Ответ на комментарий Shamanka9 # Пожалуйста. Удачи в творчестве.
novprospekt 26-05-2014-17:42 удалить
Ответ на комментарий Flash_Magic # Пожалуйста Наташенька.
novprospekt 26-05-2014-17:42 удалить
Ответ на комментарий Дюанка # Пожалуйста и всего самого хорошего.
novprospekt 26-05-2014-17:43 удалить
Ответ на комментарий Любовь_Терехова # Любаш, пожалуйста. Пользуйся в удовольствие и успехов в творчестве.
novprospekt 26-05-2014-17:43 удалить
Ответ на комментарий rottam # Пожалуйста и всего самого хорошего.
novprospekt 26-05-2014-17:44 удалить
Ответ на комментарий koreckolga # Пожалуйста Оленька. Думаю, потихоньку освоишь. Если что, то обращайся с вопросами.
novprospekt 26-05-2014-17:46 удалить
Ответ на комментарий Irina-snez # Пожалуйста Ириш. Если что, то в материалах к уроку есть файл FLA. Можешь все детально рассмотреть в Adobe Flash.
novprospekt 26-05-2014-17:48 удалить
Ответ на комментарий MissKcu # Давай Ксюш тащи в норку. Появиться время, глянь. Там не очень все сложно, только действий всяких много.
MissKcu 26-05-2014-17:49 удалить
Ответ на комментарий novprospekt #
Огромное тебе спасибо Марина-учительница моя безценная!!!
Добрый вечер Марина! Я не могу скачать материалы к уроку(видимо блокирует антивирусник).Можно использовать анимированный фон?Если да,то как?
novprospekt 17-11-2014-17:08 удалить
Ответ на комментарий Лара__Лариса # Да, конечно, анимированный фон можно использовать точно также как футаж. Надо будет создать Новый символ, в который помещается фон и затем из Библиотеки перетаскивать его на Рабочее поле в нужное место.

У меня тоже антивирус блокирует все бесплатные файлообменники. Это сейчас такая борьба с пиратством. Я вношу нужные мне заблокированные сайты (конечно если я им доверяю) в белый список антивируса.
Можете тоже внести
http://rusfolder.com/
в белый список.
Файлообменник надёжный и я давно им пользуюсь.
Спасибо Марина,я попробую.
nadmirchik 06-12-2015-17:15 удалить
Спасибо большое за урок!!!! Одно обидно - скачать материал не получается - все сбрасывапется хот плачь!
Mono-Liza 08-11-2016-15:09 удалить
Мариночка, так случилось, что этот урок я еще не делала. Беру с благодарностью, надеюсь, что получится.


Комментарии (49): «первая «назад вверх^

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

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