2012 Март 5
НОВОСТИ
Главная » 2012 Март 5 » Урок Flash создание механических часиков11:38 Урок Flash создание механических часиков |
Урок Flash создание механических часиковСегодня мы будем делать часы для Вашего сайта. Или не для Вашего. Ну это можно и после решить. Внешний вид определяйте сами - я взял за основу вот эти часики, поэтому советую сначала все нарисовать часы по тому уроку. 1. Предварительная подготовка. 1) !ОЧЕНЬ ВАЖНО! Поверните стрелки именно так, как на картинке: т.е. Часовая должна стоять на 9, секундная на 12, а минутная на 3. 2) Необходимо сконвертировать часы из Corel'а во flash. Для этого: File > Export (Файл > Экспорт), ставим тип файла: swf Сохраняем. 3) Заходим во Flash. Импортируем туда (File > Import > Import to Stage или по-просту Ctrl+R) наши часики, которые теперь имеют расширение swf. 4) Страшно? Ничего. У нас же ручки есть, так что поправим. Правим все элементы, чтобы они выглядели точно так же, как и в Corel'е, исправляем все тени, все прозрачности. Немного стараний и получаем что-то типа этого: Тень сделал радиальным градиентом Который был перемещен на самый нижний слой (Shift+Ctrl+Down). 5) Нажмите Ctrl+A, выделив тем самы все объекты на экране. Затем F8, чтобы сделать из этого сумбура - MovieClip. 6) Двойной щелчок на MovieClip'е для редактирования содержимого. Распределите все объекты по слоям по уровню вложенности. Скажем, если это фон, то он должен быть ниже, чем блеск, но выше, чем тень. 7) Проверьте, не дублируются ли объекты на разных слоях. Для этого поочередно снимайте/возвращайте видимость слоев, просматривая каждый из них. 8) Нажмите на пустом месте рабочего поля. Снизу будут написаны циферки через символ x. Возможно, что-то вроде 550 x 400. Нажмите на них Измените размер фильма, примерно подогнав его к размеру часов. Так же необходимо изменить количество кадров в секунду. Советую поставить 120 вместо стандартных 12-и. 9) Вызовите панель Align или Выравнивание Window > Align или клавишами Ctrl+K. Выравниваем наши часы, относительно сцены (для этого должна быть нажата кнопка To Stage: в панели Align). 10) Двойной щелчок на часах для редактирования. 2. Начало работы. 1) Итак, у нас есть объект, разделенный на части, есть свободное время и много желания сделать-таки эти часы. Ну тогда, пожалуй, начнем со стрелок. В результате выполнения всех предыдущих пунктов стрелки должны были очутиться на разных слоях. Предлагаю сделать из них MovieClip'ы? Возражения есть? Ну, я так и думал... Обращаю Ваше внимание на то, что мы все больше приближаемся к разгадке того, зачем я попросил Вас передвинуть стрелки в строго определенное положение. Выберите стрелку...скажем секундную...нажмите F8 и СТОП! В появившемся окне есть (должна быть ) вот такая штука: Это точка регистрации. Если кому-то интересно, что это такое, то это, грубо говоря, точка, которая является центром клипа. 2) Поэтому положение точки регистрации для секундной стрелки: центр, низ. 3) Для минутной стрелки: центр, слева. 4) Для часовой стрелки: центр, справа. 5) Теперь нам нужно их как-нибудь обозвать. Зададим им имена для возможности последующей работы с ними через ActionScript: один щелчок на секунде - снизу появляются всякие Properties. Вписываем туда для секундной стрелки: sec. 6) Для минутной - min. 7) Для часовой - hr. 8) Есть еще объект - minuter. Как только изменяется значение минуты - происходит анимация. Сейчас мы его сделаем. 9) Берем градиентный фон И делаем из него MovieClip. 10) Двойной клик для редактирования - отмеряем кадров 10, ставим ключевой кадр, отмеряем еще 20, ставим еще один. 11) В центральном (т.е. в 9-м кадре) изменяем радиальный градиент через панель Color: нужно слегка осветлить центральный цвет. 12) Осветляем. В первом кадре открываем панель Actions и пишем туда CODE
stop();
13) Теперь нужно добавить движения. Нажмите на первый кадр. Снизу появляется панель Properties. Глазами находим надпись Tween, рядом с которой гордо написано none. 14)Меняем none на Shape. 15) То же самое сделайте в 9-м кадре. 16) Не забываем обозвать minuter minuter'ом. 3. Дайте две! 1) Возвращаемся к часам. Начинается, пожалуй, самое сложное - понять, что же я тут пишу Берем градиентный фон, который у нас теперь minuter, делаем копию, вставляя на то же место (Paste in Place). Короче тупо дублируем клип. 2) Разбиваем клип клавишами Ctrl+B. И тут же превращаем его в MovieClip посредством нажатия F8. Регистрационная точка - по центру. 3) Редактируем свеженький клип: меняем наш градиент на какой-нить однородный цвет, чертим где-угодно длинную вертикальную прямую (с зажатым Shift'ом). 4) Выделяем, Align'ом выравниваем линию по центру. 5) Нажимаем в пустое место, снимая выделение с линии. 6) Мы разделили окружность пополам. Теперь нажимаем на правую часть и превращаем ее в MovieClip, точка регистрации - слева центр. 7) Тоже самое делаем с левой частью. Только точку регистрации меняем на правый центр. 8) Раскидываем эти два объекта по разным слоям, линию удаляем. 9) Создаем дубликаты каждого из объектов (т.е. на каждом слое должно получиться по два одинаковых объекта, лежащих друг на друге. 10) Берем в руки инструмент Free Transform Tool (Q). Так, давайте сразу определимся: те два объекта, что получились сверху - это маска, а что снизу - прогресс. Итак жмем на маску трансформом. 11) Перемещаем центральную точку (точку вращения) к точке регистрации маски. Она должна "прилипнуть", если включена привязка (магнитик). 12) Все тем же Free Transform Tool'ом поворачиваем маску с зажатым Shift'ом в любую сторону, дабы получить ту самую окружность, которую мы разбивали. 13) Теперь у нас есть маска, которая поделена на две части: левую и правую. Левую обзываем (по типу пункта 2.5) maskLeft, правую соответственно, maskRight. 14) Дабы маски нам не мешали, скрываем их с глаз долой (как в пункте 1.7). 15) Производим те же самые действия с прогрессом. Левый - progressLeft, правый - progressRight. 16) Редактируем любой из них (это же дубликаты, так что при изменении одного - изменяются оба). А именно, определяем, как будет выглядеть секундное поле. Ну это уже на любителя. У меня там прозрачный радиальный градиент. 17) Уровень вверх (клип с масками и прогрессами). Снимаем выделение, кликаем в ключевой кадр, чтобы иметь возможность задать действия для этого клипа. 18) Открываем панель Actions и вписываем туда собственно скрипт: CODE
// Накладываем правую маску на левый объект. progressLeft.setMask(maskRight); // Левая маска, как и правый объект нам пока ни к чему, поэтому скроем их. maskLeft._visible = false; progressRight._visible = false; // Определяем исходное значение SecondsChange = _parent.date.getSeconds(); onEnterFrame = function () { // Когда сменится исходное значение - произойдет остановка поля. if (SecondsChange != _parent.date.getSeconds()) { maskRight._rotation = 0; maskLeft._rotation = 180; _parent.fadeOut(); delete onEnterFrame; } if (_parent.date.getMilliseconds() != 0 and var_empty == undefined) { // Вычесляем, какое соотношение миллисекунд к градусам Round360 = Math.ceil(_parent.date.getMilliseconds()/1000*360); if (Round360 <=180) { progressRight.setMask(maskLeft); progressLeft._visible = false; progressRight._visible = true; maskLeft._rotation = Round360; } else { // Если значение больше, чем маска - пора включать вторую. maskLeft._rotation = 180; progressLeft._visible = true; progressLeft.setMask(maskRight); maskRight._visible = true; maskRight._rotation = Round360; } } // Вот с нижней строчкой возникают трудности // Проблема заключается в том, что миилисекунды не отдаются, как 1,2...1000 // А только строго определенными числами. // Поймать значение, когда нужно остановить круг - достаточно тяжело. // Поэтому скрипт получился не совсем правильным. if (maskRight._rotation >= -5 and maskRight._rotation < 0) { // остановка вращения. var_empty = true; } }; 19) Еще уровень вверх (клип с часами). Выделяем клип с масками (и прогрессами). Назовем его clock_seconds. Секундное поле готово. 20) Создаем Dynamic text с помощью (Text Tool) (T) 21) Определитесь со шрифтом. И размером. У меня Tahoma 96. 22) Отрегулируйте уровень вложенности Dynamic text'а (переместите на отдельный слой), чтобы он оказался чуть выше minuter'а. 23) Цвет поля регулируется панелью Color. Делаем его черным, прозрачность - 16%. Прозрачность не будет накладываться, если не включить шрифт в фильм. Есть несколько способов. Самый простой - нажать на кнопку Embed... и выбрать включение числовых символов шрифта. 24) Теперь нужно задать переменную этому текстовому полю. Для этого нужно ввести в область Var переменную seconds (мы ее потом получим). 25) Вот уже почти все готово. Осталось только чуть-чуть приправить скриптом, который будет поворачивать нам секунды и делать прочие приятности Вот он: CODE
//************************************ //Copyright (C) 2007 ZooM aka twenty. //Name: advanced clock //************************************ i=0; // Функция, выставляющая время при запуске function refresh_clock() { date = new Date(); seconds = date.getSeconds(); minutes = date.getMinutes(); hours = date.getHours(); sec._rotation = seconds*6; min._rotation = minutes*6-90; // откуда -90? Это поправка на положение стрелок. hr._rotation = hours*30+90; // Задаем значение начала вращения секундного поля. clock_seconds._rotation = date.getSeconds()/60*360; } refresh_clock(); //***** Чтобы секунды при обновлении //***** Не обновляли значения часов и минут, //***** Нужно сделать для каждой стрелки свою функцию //***** Которая будет обновлять только эту стрелку. //%%%%%%%%%%НАЧАЛО%%%%%%%%%%%%% function refresh_clock_sec() { date = new Date(); seconds = date.getSeconds(); sec._rotation = seconds*6+1; // почему +1? Нам же мужно, что бы стрелка сначала была немного впереди!? } function refresh_clock_min() { date = new Date(); minutes = date.getMinutes(); min._rotation = minutes*6-90+2; } function refresh_clock_hr() { date = new Date(); hours = date.getHours(); hr._rotation = hours*30+90+3; } //%%%%%%%%%%%%КОНЕЦ%%%%%%%%%%%%%% onEnterFrame = function () { date = new Date(); if (seconds != date.getSeconds()) {// Если секунда изменилась refresh_clock_sec(); // Вызываем функуию ticTac, говорим ей, что вызывает ее сенкундая стрелка и передвигать нужно на 1. ticTac(sec, 1); } if (minutes != date.getMinutes()) { refresh_clock_min(); ticTac(min, 2); } if (hours != date.getHours()) { refresh_clock_hr(); ticTac(hr, 3); } }; // Функция создающая интервалы в зависимости от того, какая стрелка к ней обратилось. function ticTac (railName, tic) { if (railName == sec) { intervalTac_sec = setInterval(tac, 20, railName, tic); } if (railName == min) { intervalTac_min = setInterval(tac, 20, railName, tic); } if (railName == hr) { intervalTac_hr = setInterval(tac, 20, railName, tic); } } function tac (railName, tic) {// Функция, которая возвращает стрелки. railName._rotation -= tic;// Собственно возвращение railName стрелки на tic градусов. // Ниже идет обнуление интервалов, чтобы ими можно было воспользоваться еще раз. if (railName == sec) { clearInterval(intervalTac_sec); } if (railName == min) { clearInterval(intervalTac_min); minuter.play();// Анимация, по достижению минуты. } if (railName == hr) { clearInterval(intervalTac_hr); } } //Снижает прозрачность обратившегося объекта function fadeAlpha(mc_name) { mc_name2 = eval(mc_name); if (mc_name2._alpha>1) { mc_name2._alpha -= 5; } else { clearInterval(interval); } } function fadeOut() { if (var_check_01) { // Эти странные числа - ограничения // n по волженности // i по количеству объектов // После достижения определенной отметки // переменная обнуляется. if (n<0 or n == undefined) { n = 1; } else { n = -1; } if (i>=4) { i = 1; } else { i++; } // Дублируем MovieClip с секундным полем. duplicateMovieClip("clock_seconds", "clock_seconds"+i, clock_seconds.getDepth()+n); // Для удобности в присваивании атрибутов и значений превращаем "clock_seconds"+i в mc_new. mc_new = eval("clock_seconds"+i); mc_new._alpha = 100; // поворачиваем новый клип. mc_new._rotation = date.getSeconds()/60*360; // говорим ему о том, что положение объектов нужно изменить на исходное. mc_new.progressLeft._rotation = 0; mc_new.progressRight._rotation = -180; // гасим прозрачность у предыдущего клипа. interval = setInterval(fadeAlpha, 2, mc_last); // при следущем обращении к этой функции новый клип будет старым. mc_last = mc_new; } else { // Делаем доступным код выше. Именно так, потому что 1-й клип // отличается от дублируемых и должен быть обработан в отдельном порядке. var_check_01 = true; duplicateMovieClip("clock_seconds", "clock_seconds"+i, clock_seconds.getDepth()-1); mc_new = eval("clock_seconds"+i); mc_new._rotation = date.getSeconds()/60*360; mc_new._alpha = 100; mc_new.progressLeft._rotation = 0; mc_new.progressRight._rotation = -180; // Снижаем прозрачность у начального (у самого первого) поля. interval = setInterval(fadeAlpha, 1, "clock_seconds"); mc_last = mc_new; } } Теперь с чистой совестью можно сказать что все готово. |
|