Урок как сделать аналоговые часики в программе Sothink SWFQuicker. Часть первая. Создание часового механизма.
В этом уроке мы создадим действующий часовой механизм со стрелками и циферблатом, иначе говоря, аналоговые флешчасики. Управлять часовым механизмом мы будем программно с помощью скрипта на языке ActionScript 2 . Я получала много комментариев с просьбой рассказать подробно, как сделать самим часики со стрелками, и постаралась написать подробный урок.
При написании этого урока использовалась версия программы Sothink SWF Quicker 5.2.509
на английском языке
и русифицированная портативная версия SothinkSWFQuicker 5.3.511
Также, по возможности, я старалась писать название инструментов и команд на двух языках и делать скриншоты как для английской, так и для русской версии. Но, если у вас возникнут какие - то вопросы по переводу или располажению панелей-вкладок, обращайтесь, и я сделаю дополнительные скрины.
Материала, на первый взгляд, очень много. Возможно, не сразу все будет понятно. Но, если вы будете очень внимательны и терпеливы, то, уверена, сможете такие часики сделать.
Открывайте программу, внимательно читайте урок, пытайтесь все прочитанное воспроизвести практически и задавайте вопросы.
И так, приступим.
Открываем программу и создаем новый документ


Устанавливаем размеры рабочего поля (сцены) 500 x 500 и частоту кадров 25
Ширина (width) =500
Высота (height) =500
Частота кадров (Frame rate) = 25
Цвет рабочего поля (сцены) выбираете по своему усмотрению. В готовом ролике этот цвет не отображается. В данном случае фон сцены установлен - белый.
Размеры сцены и частоту кадров устанавливаем на панеле "Свойства" (Propertiees)






Кроме этого, вверху окна программы на вкладке "Ролик" (Movie) у нас открыта "Временная шкала" (Timeline). На этой шкале у нас есть первый слой, с которым мы и начнем работать. Переименуйте этот слой в "Циферблат". Для переименования слоя щелкните по нему правой кнопкой мыши и в контекстном меню выбирите пункт "Переименовать" (Rename), а в открывшемся редакционном окне введите нужное название.


Для создания наших первых часиков мы будем использовать нарисованные в программе простейшие формы. Для циферблата - круг (или, если хотите, квадрат) и для стрелок – прямоугольник со скругленными углами. Сейчас нам не столько важен дизайн, сколько важно понять сам принцип создания работающего часового механизма.
В этом уроке мы будем создать классические часики с циферблатом и тремя стрелками (часовой, минутной и секундной).
Поэтому, первым делом, нарисуем круг или квадрат для циферблата.
Я рисую круг. Для этого, как в прочем и для рисования всех других объектов, необходимо выбрать:
1. инструмент рисования,
2. цвет заливки для формы,
3. цвет заливки контура формы.
Нажмите соответствующую кнопку на панели инструментов. В моем случае - это (овал). При выборе любого инструмента рисования на панели инструментов, внизу под значками инструментов, появляются дополнительные настройки, а также настройки на панели - вкладке "Свойства" (Propertiees)


Настроим инструмент "Овал"(Oval) для рисования нашего циферблата.
В панеле инструментов выбираем дополнительный параметр "Рисовать как форму" (Draw as Shape), нажав на соответствующий значок.
Переходим во вкладку "Свойства"(Propertiees) и задаем параметры для заливки формы "Овал". Выбираете цвет заливки для циферблата и указываете отсутствие заливки для контура.


Переходим на рабочее поле и зажав клавишу "Shift", рисуем круг произвольных размеров.
Переходим в панель "Трансформация" (Transform) и выставляем размеры для циферблата (ширина и высота), а также выравниваем наш круг относительно центра, указав для этого значение координат X и Y.
Ширина (width) = 400
Высота (height) = 400
Теперь о выравнивание. В данном случае мы выравниваем наш циферблат относительно рабочего поля (сцены). Поскольку размеры сцены 500 x 500, то координаты центра будут находится X= 250, Y = 250. На самом деле. выравнивать циферблат относительно центра сцены совсем необязательно. Например, в коллажах с часиками, которые вы будете создавать в дальнейшем, циферблат может находиться и в правом верхнем углу, и в низу рабочего поля. Тогда, соответственно, поменяются координаты X и Y для циферблата. Но, вот стрелки для часиков всегда необходимо выравнивать относительно циферблата. Следовательно, те координаты X и Y, которые вы зададите для циферблата необходимо будет указывать и для стрелок, а, если еще точнее, для мувиклипов (Movie Clip или роликов), в которые вы преобразуете нарисованные (или импортированные) стрелки.
В данном уроке мы выравниваем и циферблат, и стрелки относительно центра рабочего поля. Так нам будет пока легче.
И так, координаты для выравнивания циферблата в нашем случае будут "X= 250" "Y=250". Эти значения координат и размеры циферблата, как уже говорилось, мы заносим в соответствующие поля панели - вкладки "Трансформация" (Transform).
Так выглядит наша панель "Трансформация" (Transform) после внесения в нее размеров и координат выравнивания.


Идем вверх на "Временную шкалу" (панель "Ролик" или "Movie").
Создаем поверх слоя "Циферблат" еще три слоя. Называем их соответственно "Час", "Мин" и "Сек". Как вы уже догадались, на этих слоях мы будем размещать наши стрелки.
Рисуем, модифицирум и размещаем часовую стрелку. Для этого
1. Выделяем слой "Час"
2. Идем в панель инструментов и выбираем группу инструментов "Прямоугольник"(Rectangle), а из открывающегося списка выбираем "Прямоугольник со скругленными углами" (Round Rectangle). Настраиваем параметры рисования прямоугольника и его заливки.
В дополнительных настройках для инструмента "Прямоугольник со скругленными углами" (Round Rectangle) выбираем вкладку - "Рисовать как форму"(Draw as Shape), угол скругления указываем = 15
Во вкладке "Свойства" (Properties) указываем отсутствие заливки для контура и цвет прямоугольника - серый или темно-серый.




После того как рисовательные настройки для часовой стрелки выполнены, приступим непосредственно к ее рисованию. Слой "Час" все также должен быть выделен, инструмент "Прямоугольник со скругленными углами" (Round Rectangle) выбран и настроен, как указано выше. Выберите участок сцены, который не занят формой циферблата и поднесите мышку к этому участку. Теперь на рабочем поле, на слое "Час" потяните мышку чуть - чуть вправо и вниз. О размерах прямоугольника пока можно не заботиться. Мы их укажем позднее в панели-вкладке "Трансформация"(Transform). Ориентируйтесь приблизительно, исходя из того, что часовая стрелка, в классическом варианте часов, самая широкая и самая короткая.


Теперь нам необходимо модифицировать нашу нарисованную стрелку или превратить ее в мувиклип или ролик. Для чего это нужно. А для того, что наша стрелка - это подвижный объект. Она должна вращаться, двигаться и поэтому естественно ее преобразовать в ролик или, как обычно принято писать в уроках по флеш, в MovieClip (мувиклип). Причем стрелка наша должна вращаться вокруг точки центра циферблата. И, поэтому, при модификации стрелки в мувиклип необходимо указать центр привязки точки вращения или, как тоже принято в терминалогии флеш, необходимо указать точку регистрации мувиклипа.
И так, проследите чтобы слой «Час» все также был выделен (активен).
Нарисованная стрелка тоже дожна быть выделена. Для этого инструментом "Выбор" (Selection) щелкните по нарисованной часовой стрелке и затем в палитре инструментов переключитесь на инструмент "Трансформация" (Transform) и снова щелкните по нарисованной стрелке. Вокруг стрелки образовались маркеры – точки трансформации. Теперь наша стрелка выделена и готова для модификации в мувиклип. Нажмите на клавиатуре клавишу F8 или из вкладки меню "Модификация" (Modify) вызовите команду – "Преобразовать в символ" (Convert to Symbol).




После того как будет выбрана команда "Преобразовать в символ" (Convert to Symbol) появится окно регистрации мувиклипа и в нем указываем следующие параметры для регистрации: вид сивола, имя символа и точку регистрации. Вид символа указываем Видиоролик (Movie Clip), имя символа – has, точку регистрации отмечаем внизу среднюю




Что мы сделали. Мы создали образец символа часовой стрелки и дали ему точку привязки для движения (в нашем случае – вращения). Теперь наша стрелка это объект класса Movie Clip. После того как вы нажмете "ОК" для регистрации мувиклипа, во вкладке "Свойства" (Propertiees) появится возможность задать имя для созданного ролика. Это имя впоследствии будет фигурировать в скрипте для создания часового механизма. Т е в скрипте будет указано к чему следует обращаться при отображении времени в категории час. Имя для нашей стрелки берем такое же как и у зарегистрированного образца символа – has, поскольку в данном случае у нас образец и сам мувиклип это один и тот же объект. Задать имя для зарегистрированного мувиклипа очень важно. Так как если этого не сделать, то после применения скрипта, программа не поймет к какому объекту ей надо обращаться.




Теперь можно отрегулировать размеры часовой стрелки и выровнить ее положение относительно центра циферблата. (т.е. практически это будет помещение часовой стрелки на циферблат). Как выбрать размеры для стрелок. Давайте будем исходить из того, что радиус нашего циферблата есть половина ширины или высоты круга. Ширина круга у нас 400 пикс. Следовательно радиус будет равен 200 пикс. Самая тонкая и длинная у нас будет секундная стрелка. Но и она не должна быть более 200 пикс. Немного шире и чуть короче секундной, будет минутная стрелка и самая широкая и короткая это часовая стрелка. Вот исходя из этого установим размеры для секундной стрелки ширину 3 пикс и высоту 200 пикс, для минутной стрелки ширину 8 пикс и высоту 170 пикс.
Для часовой стрелки мы установим следующие размеры- ширину 15 пикс. , высоту 125 пикс.
С размерами стрелок разобрались. Вернемся к выравниванию часовой стрелки, т. е. помещения ее непосредственно на циферблат. Если помните, то координаты центра циферблата мы установили в центре рабочего поля - X =250, Y= 250. Эти значения будут одинаковыми для всех стрелок, так как стрелки часов вращаются вокруг единого центра.
Теперь мы сможем внести значения параметров для мувиклипа часовой стрелки "has" на панель "Трансформация" (Transform). Следите только за тем, чтобы все это время был активным слой «Час» и выделен сам мувиклип "has".


Как вы можете теперь увидеть, часовая стрелка у нас находится на циферблате и один ее конец находится в центре циферблата. Важно, чтобы стрелка находилась в положении "12" часов, т.е. вертикально. Если все проделали правильно и у вас все получилось, то с рисованием, размещением и регистрацией двух других стрелок затруднений возникнуть не должно. Необходимо выделять каждый из слоев для стрелок и рисовать на нем соответствующую названию слоя стрелку.
А мы продолжаем и создаем минутную стрелку. Выделяем слой "Мин", и снова выбираем в качестве инструмента рисования "Прямоугольник со скругленными углами" (Round Rectangle). Настраиваем инструмент по принципу, как для часовой стрелки. Цвет заливки для минутной стрелки выбираем светло – серый, цвет заливки контура отсутствует и приблизительные размеры, как указано выше - ширина=8 пикс., высота= 170 пикс.


Нажмите клавишу F8, или из вкладки меню "Модификация" (Modify) – "Преобразовать в символ" (Convert to Symbol).
Регистрируем мувиклип с именем min. Точка регистрации как и для предыдущего мувиклипа.




Даем название мувиклипу для минутной стрелки во вкладке панели "Свойства" (Propertiees) - min




В палитру "Трансформация" (Transform) вносим размеры нашей минутной стрелки и координаты выравнивания относительно центра циферблата.




Переходим к созданию секундной стрелки. Выделяем слой "Сек". Для рисования выбираем все тот же "Прямоугольник со скругленными углами". В дополнительных настройках для инструмента выбираем вкладку – «Рисовать как форму», радиус скругления = 5, цвет заливки контура отсутствует, цвет заливки формы красный.


На свободном пространстве рабочего поля рисуем секундную стрелку и выделяем ее. Если вы нарисовали тонкую линию и она плохо выделяется инструментом "Выбор" (Selection), то просто обведите ее инструментом "Выбор" (Selection), как бы создавая вокруг прямоугольное выделение.


Стрелка выделится. На это укажет покрывшая ее сеточка. Затем переключитесь на инструмент "Трансформация" (Transform), чтобы создать маркеры трансформации вокруг секундной стрелки. Модифицируем секундную стрелку в мувиклип с именем sec




Даем название нашему мувиклипу для секундной стрелки sec.




Размещаем мувиклип sec на циферблате и выравниваем относительно центра циферблата.





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


Для слоев "Циферблат", "Час", "Мин", "Сек" создаем по второму кадру. Для этого щелкаем курсором правой кнопки мыши во вторую клеточку на каждом слое и нажимаем клавишу F5. Вот как будет выглядеть временная шкала


Внизу под рабочим полем (сценой) находим вкладку "Действие" (Action). Открываем эту вкладку. На временной шкале во вкладке "Ролик"(Movie) у нас активным является слой "Скрипт". Щелкаем и выделяем первый кадр этого слоя.


В открытом блокноте вкладки "Действие"(Action) вставляем скопированный ниже код-скрипт и нажимаем зеленую галочку применить.

code:


time = new Date();

seconds = time.getSeconds();

minutes = time.getMinutes();

hours = time.getHours();

hours = hours + minutes / 60;

seconds = seconds * 6;

minutes = minutes * 6;

hours = hours * 30;

sec._rotation = seconds;

min._rotation = minutes;

has._rotation = hours;

_root.onMouseDown = function(){

   trace("It is a novprospekt script  http://novprospekt.ru/rubric/2187066/");

};

Если все сделано правильно и код скопирован без ошибок, то программа выдаст сообщение об отсутствие ошибки.




Запускаем тестирование ролика Ctrl+Enter и смотрим как работает наш часовой механизм
Если чудо свершилось, наблюдаем своих рук и компьютерной мыши творение.




Продолжение урокаЧасть 2. Здесь


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

Серия сообщений "Flash":

Уроки по разным флеш программам, мои работы, часики - информеры

Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Ура, я научилась делать часики.
...
Часть 21 - Пасхальный таймер обратного отсчета и часики.
Часть 22 - Flash Intro Banner Maker V3.8 русифицированная
Часть 23 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 1 Создание часового механизма.
Часть 24 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 2. Дизайн для часиков.

Серия сообщений "Уроки Flash":

уроки в разных флешпрограммах, авторские уроки flash

Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 7 - Флешчасики для коллажей в Aleo Flash Intro Banner Maker
Часть 8 - Flash Intro Banner Maker V3.8 русифицированная
Часть 9 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 1 Создание часового механизма.
Часть 10 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 2. Дизайн для часиков.

Серия сообщений "Часовая мастерская":

Как сделать часики, рисование циферблатов и часовых стрелок, сборники клипарта на часовую тему

Часть 1 - Как правильно записать код флешки или видео в рамочку для кодов.
Часть 2 - Создаем таймер обратного отсчета в программе Sothink SWFQuicker
Часть 3 - Украшаем простые цифровые часики. Разнообразие дизайна.
Часть 4 - Флешчасики для коллажей в Aleo Flash Intro Banner Maker
Часть 5 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 1 Создание часового механизма.
Часть 6 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 2. Дизайн для часиков.