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


Урок по созданию часов с использованием текста, полученного в результате применения эффектов. 09-05-2012 18:14 к комментариям - к полной версии - понравилось!

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

Урок по созданию часов с использованием текста, полученного в результате применения эффектов.

На сегодняшнем уроке мы научимся создавать часы из цифр, конвертированных в графический формат.

Для урока нам потребуются примерно вот такого вида 10 графических символов. О том как получить такие символы смотри урок по конвертированию текста в графический формат.

Помещенные в библиотеку они выглядят следующим образом:

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

Теперь можно приступать к созданию часов из этих символов. Давайте разобьем урок на два этапа. В первом мы будем работать в окне редактирования символов, а во втором перейднм в основеую сцену.

Итак по порядку:

1. Нажимаем клавиши Ctrl +F8 (создаём новый символ) или меню Insert - New Symbol. В открывшемся окне выбираем Movie Clip.

После этого в открывшемся окне редакктирования символа используем принцип создания покадровой анимации. Для этого создадим два слоя. В первом слое с помощью инструмента «Прямоугольник» создадим графический символ с размерами 32 х 45 пикселей черного цвета, и добвыим в этом слое еще 9 кадров.  А во второй слой будем вставлять поочередно в пустые ключевые кадры наши первые, скопированные из другого окна программы графические файлы. При проигрыше анимации (Меню File - Play) это будет выглядеть так:


На временной шкале в окне редактирования символа  это будет выгдядеть так:

Теперь давайте создадим еще один Movie Clip. (повторяем предыдущую операцию) Здесь нам тоже потребуется два слоя. В первом созжадим графический символ черного цвета с размерами примерно 9 х 20 пикселей, и добавим в первый слой еще 11 кадров.
Во втором слое сделаем ключевым 7 кадр и скопируем в него 1 ключевой кадр из первого слоя. Добавим на него с помощью инструмента овал два красных кружка с размерами примерно 3 х 3 пикселя. (см. увеличенный в 5 раз рисунок ниже)

И продлим слой еще на 5 кадров. Этот объект будет разделять три пары символов, которые мы создадим во втором этапе, когда перейднм в основную сцену.

Вот как выглядит временная шкала для этого символа:

2. Переходим в основную сцену.

Перемещаем из библиотеки на рабочий холст наш первый мувиклип 6 раз. Каждый раз в новый слой. И каждый раз присваиваем ему новое имя, например такие: symb1, symb2, symb3, symb4, symb5, symb6;


Вот как это выглядит на панели свойств:

Проделав эту операцию мы имеем на временной шкале 6 слоев. Теперь давайте добавим еще два слоя, и в каждый из них поместим наш второй Movie Clip. Каждый раз присваивая ему новое имя. Например dot1 и dot2. Помещаем их между тремя парами мувиклипов.


Вот как это выглядит на рабочем холсте: (рисунок для наглядности увеличен в два раза)

Красные стрелки на рисунке указывают на мувиклипы dot1 и dot2. Во всех восьми слоях добавляем по одному кадру. Временная шкала к этому времени должна выгдядеть вот так:

Добавляем еще один слой на временной шкале, и переименовывем его в Action Layer. В нем мы будем размещать код. В первом кадре он будет таким:

curDate = new Date();
hrs = curDate.getHours();
mns = curDate.getMinutes();
scs = curDate.getSeconds();
symb6.gotoAndStop(scs % 10 + 1);
symb5.gotoAndStop((scs - scs % 10) / 10 + 1);
symb4.gotoAndStop(mns % 10 + 1);
symb3.gotoAndStop((mns - mns % 10) / 10 + 1);
symb2.gotoAndStop(hrs % 10 + 1);symb1.gotoAndStop((hrs - hrs % 10) / 10 + 1);

Вставляем в этом слое второй ключевой кадр и пишем в нем такой код:

delete curDate;

Я намеренно не упомянул, какого цвета задается фон рабочего холста.

Для удобства первоначально задайте его хотя бы таким: #66666B.
А теперь, пришла пора поменять его на черный.
Если всё мы сделали правильно, то должно получиться примерно так.

 


вверх^ к полной версии понравилось! в evernote


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

Дневник Урок по созданию часов с использованием текста, полученного в результате применения эффектов. | Бог_в_Блог - Дневник Бог_в_Блог | Лента друзей Бог_в_Блог / Полная версия Добавить в друзья Страницы: раньше»