Приветствую Вас Гость Регистрация дней | Ваш IP:18.191.239.123 | версия | Пятница, 26.04.2024, 01:01 | РУССКИЙ УКРАЇНСЬКА ENGLISH | RSS
 
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 и СТОП! В появившемся окне есть (должна быть wink.gif ) вот такая штука:

Адванс-Часы *

Это точка регистрации. Если кому-то интересно, что это такое, то это, грубо говоря, точка, которая является центром клипа.
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) Возвращаемся к часам. Начинается, пожалуй, самое сложное - понять, что же я тут пишу smile.gif
Берем градиентный фон, который у нас теперь 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) Вот уже почти все готово. Осталось только чуть-чуть приправить скриптом, который будет поворачивать нам секунды и делать прочие приятности smile.gif
Вот он:

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;
}
}



Теперь с чистой совестью можно сказать что все готово.
Просмотров: 1337 | Добавил: admin | Рейтинг: 0.0/0

РЕКЛАМА

      WMmail.ru - сервис почтовых рассылок

ЧАСЫ

КАЛЕНДАРЬ

      Декабрь 2012
      ПнВтСрЧтПтСбВс
           12
      3456789
      10111213141516
      17181920212223
      24252627282930
      31

ПРАЗДНИКИ

      Информер праздники сегодня

      Православные праздники

ОБЛАКО ТЕГОВ

АРХИВ ЗАПИСЕЙ

ДРУЗЬЯ САЙТА



 Create a free website Анализ веб сайтов тИЦ и PR сайта patron.at.ua Рейтинг@Mail.ru Счетчик тИЦ и PR Топ100- Софт Яндекс.Метрика
webgari.com Рейтинг сайтов Russian America Top. Рейтинг ресурсов Русской Америки. Цены на компьютеры. Объявления Украины и России. Счетчик тИЦ, PR и обратных ссылок ТИЦ и PR сайта patron.at.ua

СТАТИСТИКА


ПОСЕТИТЕЛИ САЙТА

      Онлайн всего: 1
      Гостей: 1
      Пользователей: 0

НАВИГАЦИЯ

Регистрация (всего за 10 секунд)

ОПРОСЫ

Вы зашли чтобы:

Проголосовало: 278
Другие опросы

Результаты опроса

ПОЛЕЗНЫЙ СОФТ

  • Avast! Internet Security v 7.0.1474 Final
    - популярный антивирус.
    Скачать >>>
    ESET Smart Security & NOD32 AntiVirus 5.2.15.1 Final (x86/x64|RUS)
    - антивирус разработан на основе передовой технологии ThreatSense®.
    Скачать >>>
    Kaspersky CRYSTAL
    - в сборнике представлены все редакции и языковые версии.
    Скачать >>>
    Panda Cloud Antivirus Free 1.5.2 Final
    - комплексная безопасность персонального компьютера.
    Скачать >>>
    ICQ 7.1.2096
    - программа для обмена мгновенными онлайн сообщениями.
    Скачать >>>
    QIP Infium RC3 build 9032 rus
    - программа, для общения в режиме онлайн.
    Скачать >>>
    Skype 6.21.64.104
    - бесплатные онлайн звонки между абонентами.
    Скачать >>>
    Google Chrome 21.0.1180.49 Beta
    - один из самых быстрых веб-браузера с открытым исходным кодом.
    Скачать >>>
    Mozilla Firefox 18.0 Beta 3 [Русский]
    - новая версии браузера Mozilla Firefox.
    Скачать >>>
    Opera 12.12 Build 1704 RC 2 (x86/x64)
    - один из самых быстрых браузеров.
    Скачать >>>
    Internet Download Manager 6.07 build 14 Final Retail
    - загрузка файлов из Интернета.
    Скачать >>>
    Free Music Downloader Studio 2.1.6 STABLE
    - для поиска и загрузки музыки в формате mp3.
    Скачать >>>
    BitTorrent v7.6.0 Build 26591 Final (RUS/ML)
    - программка для скачивания торент файлов с пиринговой сети.
    Скачать >>>
    HAl 6.1.7603.0 [Русский]
    - программа, для быстрого и удобного поиска и загрузки торрент-файлов в Интернетe.
    Скачать >>>
    Universal Share Downloader 1.3.6.9
    - автомат-скачивание с файло-обменников.
    Скачать >>>
    AIMP 3.00 Build 981 Final
    - качественный аудио центр.
    Скачать >>>
    GOM Player 2.1.47 Build 5133 Final Rus
    - мощный мультимедиа плеер.
    Скачать >>>
    BSPlayer PRO v.2.57 Build 1050 Final
    - один из лидеров среди плееров.
    Скачать >>>
    The KMPlayer 3.0.0.1439 rus
    - поддерживает широкий диапазон кодеков и форматов файлов.
    Скачать >>>
    Winamp Pro 5.6.01.3091 Final RUS
    - один из самых популярных медиа-плееров.
    Скачать >>>
    Windows 7 RTM RU/EN
    - Оригинальный русский образ от Microsoft [MSDN] (2009/RUS/x64/x86).
    Скачать >>>
    Windows Vista SP2 x86/x64
    - обновленная версия Vista SP2.
    Скачать >>>
    Windows XP Pro SP3 (2010) RUS
    - копия оригинального диска Windows XP Pro SP3 Russian.
    Скачать >>>
    Photoshop CS5 RU
    - популярный графический редактор.
    Скачать >>>
    Microsoft Office Professional Plus 2013
    - Самый полный набор офисных программ.
    Скачать >>>
    Adobe Flash Player 10.2.159.1 Final
    - плагин для браузеров, позволяющий проигрывать Flash-ролики.
    Скачать >>>
    K-Lite Codec Pack
    - обновление для популярного набора кодеков.
    Скачать >>>
    Nero Multimedia Suite 11.2.00400 Final
    - популярная рограмма для записи дисков.
    Скачать >>>
    WinRAR 5.20 Beta 1
    - популярный архиватор
    Скачать >>>
    Total Commander v 8.01 ExtremePack 2012.11 Final
    - мощный и стабильный файловый менеджер.
    Скачать >>>

НАША КНОПКА





 Пойдем наверх