Создаем аналоговые часики в программе Sothink SWFQuicker.

Среда, 25 Июля 2012 г. 00:49 + в цитатник

Цитата сообщения novprospekt

Прочитать целиком В свой цитатник или сообщество!

Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 1 Создание часового механизма.

Урок как сделать аналоговые часики в программе Sothink SWFQuicker. Часть первая. Создание часового механизма.
В этом уроке мы создадим действующий часовой механизм со стрелками и циферблатом, иначе говоря, аналоговые флешчасики. Управлять часовым механизмом мы будем программно с помощью скрипта на языке ActionScript 2 . Я получала много комментариев с просьбой рассказать подробно, как сделать самим часики со стрелками, и постаралась написать подробный урок.

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

Создаем аналоговые часы в Sothnik SWF Quicker 2

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

Создаем аналоговые часы в Sothnik SWF Quicker 1

Создаем аналоговые часы в Sothnik SWF Quicker 4

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

Создаем аналоговые часы в Sothnik SWF Quicker 3

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

Значки инструментов программы Sothnik SWF Quicker

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

Создаем аналоговые часы в Sothnik SWF Quicker 5

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

Создаем аналоговые часики в Sothnik SWF Quicker

Переходим на рабочее поле и зажав клавишу "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. Идем в панель инструментов и выбираем группу инструментов Значки инструментов программы Sothnik SWF Quicker

"Прямоугольник"(Rectangle), а из открывающегося списка выбираем "Прямоугольник со скругленными углами" (Round Rectangle). Настраиваем параметры рисования прямоугольника и его заливки.
В дополнительных настройках для инструмента "Прямоугольник со скругленными углами" (Round Rectangle) выбираем вкладку - "Рисовать как форму"(Draw as Shape), угол скругления указываем = 15
Во вкладке "Свойства" (Properties) указываем отсутствие заливки для контура и цвет прямоугольника - серый или темно-серый.

Создаем аналоговые часы в Sothnik SWF Quicker 6

Создаем аналоговые часы в Sothnik SWF Quicker 7

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

Создаем аналоговые часы в Sothnik SWF Quicker 8

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

щелкните по нарисованной часовой стрелке и затем в палитре инструментов переключитесь на инструмент "Трансформация" (Transform) Значки инструментов программы Sothnik SWF Quicker

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

Создаем аналоговые часы в Sothnik SWF Quicker 10

Создаем аналоговые часы в Sothnik SWF Quicker 9

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

Создаем аналоговые часы в Sothnik SWF Quicker 12

Создаем аналоговые часы в Sothnik SWF Quicker 11

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

Создаем аналоговые часы в Sothnik SWF Quicker 13

Создаем аналоговые часы в Sothnik SWF Quicker 14

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

Создаем аналоговые часы в Sothnik SWF Quicker 15

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

Создаем аналоговые часы в Sothnik SWF Quicker 16

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

Создаем аналоговые часы в Sothnik SWF Quicker 18

Создаем аналоговые часы в Sothnik SWF Quicker 17

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

Создаем аналоговые часы в Sothnik SWF Quicker 20

Создаем аналоговые часы в Sothnik SWF Quicker 19

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

Создаем аналоговые часы в Sothnik SWF Quicker 21

Создаем аналоговые часы в Sothnik SWF Quicker 22

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

Создаем аналоговые часы в Sothnik SWF Quicker 23

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

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

Создаем аналоговые часы в Sothnik SWF Quicker 25

Создаем аналоговые часы в Sothnik SWF Quicker 24

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

Создаем аналоговые часы в Sothnik SWF Quicker 26

Создаем аналоговые часы в Sothnik SWF Quicker 27

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

Создаем аналоговые часы в Sothnik SWF Quicker 28

Создаем аналоговые часы в Sothnik SWF Quicker 29

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

Создаем аналоговые часы в Sothnik SWF Quicker 30

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

Создаем аналоговые часы в Sothnik SWF Quicker 33

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

Создаем аналоговые часы в Sothnik SWF Quicker 32

В открытом блокноте вкладки "Действие"(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/");

};

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

Создаем аналоговые часы в Sothnik SWF Quicker 35

Создаем аналоговые часы в Sothnik SWF Quicker 34

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

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

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

Рубрики:

уроки
программы

Метки: программы уроки
Понравилось: 2 пользователям

<a href="https://www.liveinternet.ru/users/natali002/post229115801/"> РЎРѕР·РґР°РµРј Р°РЅР°Р»РѕРіРѕРІС‹Рµ С‡Р°СЃРёРєРё РІ РїСЂРѕРіСЂР°РјРјРµ Sothink SWFQuicker. </a><br/>РЎРѕР·РґР°РµРј Р°РЅР°Р»РѕРіРѕРІС‹Рµ С‡Р°СЃРёРєРё РІ РїСЂРѕРіСЂР°РјРјРµ Sothink SWFQuicker. Р§Р°СЃС‚СЊ 1 РЎРѕР·РґР°РЅРёРµ С‡Р°СЃРѕРІРѕРіРѕ РјРµС…Р°РЅРёР·РјР°.

РЈСЂРѕРє РєР°Рє СЃРґРµР»Р°С‚СЊ Р°РЅР°Р»РѕРіРѕРІС‹Рµ С‡Р°СЃРёРєРё РІ  РїСЂРѕРіСЂР°РјРјРµ Sothink SWFQuicker. Р§Р°СЃС‚СЊ РїРµСЂРІР°СЏ. РЎРѕР·РґР°РЅРёРµ С‡Р°СЃРѕРІРѕРіРѕ РјРµС…Р°РЅРёР·РјР°. 
Р’ СЌС‚РѕРј СѓСЂРѕРєРµ РјС‹ СЃРѕР·РґР°РґРёРј РґРµР№СЃС‚РІСѓСЋС‰РёР№ С‡Р°СЃРѕРІРѕР№ РјРµС…Р°РЅРёР·Рј СЃРѕ СЃС‚СЂРµР»РєР°РјРё Рё С†РёС„РµСЂР±Р»Р°С‚РѕРј, РёРЅР°С‡Рµ РіРѕРІРѕСЂСЏ, Р°РЅР°Р»РѕРіРѕРІС‹Рµ С„Р»РµС€С‡Р°СЃРёРєРё. РЈРїСЂР°РІР»СЏС‚СЊ С‡Р°СЃРѕРІС‹Рј РјРµС…Р°РЅРёР·РјРѕРј РјС‹ Р±СѓРґРµРј РїСЂРѕРіСЂР°РјРјРЅРѕ СЃ РїРѕРјРѕС‰СЊСЋ  СЃРєСЂРёРїС‚Р° РЅР° СЏР·С‹РєРµ ActionScript 2 . РЇ РїРѕР»СѓС‡Р°Р»Р° РјРЅРѕРіРѕ РєРѕРјРјРµРЅС‚Р°СЂРёРµРІ СЃ РїСЂРѕСЃСЊР±РѕР№ СЂР°СЃСЃРєР°Р·Р°С‚СЊ РїРѕРґСЂРѕР±РЅРѕ, РєР°Рє СЃРґРµР»Р°С‚СЊ СЃР°РјРёРј С‡Р°СЃРёРєРё СЃРѕ СЃС‚СЂРµР»РєР°РјРё, Рё РїРѕСЃС‚Р°СЂР°Р»Р°СЃСЊ РЅР°РїРёСЃР°С‚СЊ РїРѕРґСЂРѕР±РЅС‹Р№ СѓСЂРѕРє.

РџСЂРё РЅР°РїРёСЃР°РЅРёРё СЌС‚РѕРіРѕ СѓСЂРѕРєР° ... <a href="https://www.liveinternet.ru/users/natali002/post229115801/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

ЛЁГКАЯ_ВОЛНА обратиться по имени Четверг, 25 Октября 2012 г. 14:39 (ссылка)

Ответить С цитатой В цитатник

Четверг, 25 Октября 2012 г. 14:40ссылка

Natali002

Ответить С цитатой В цитатник Обратиться по имени

--_Ole4ka_-- обратиться по имени Среда, 11 Июня 2014 г. 19:10 (ссылка)

Наташенька,Огромное Вам СПАСИБО!Вы проделали такую тяжёлую работу,но урок настолько подробный получился,что даже я (бестолковаяяяя) смогла сделать свои первые часики.Желаю Вам удачи,всего самого-самого),уютного вечера и отличных выходных).

Ответить С цитатой В цитатник

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Метки

-Рубрики

-Цитатник

-Приложения

-Ссылки

-Видео

-Музыка

-Всегда под рукой

-

-Фотоальбом

-Поиск по дневнику

-Подписка по e-mail

-Друзья

-Постоянные читатели

-Сообщества

-Статистика

Создаем аналоговые часики в программе Sothink SWFQuicker.