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

Четверг, 12 Апреля 2012 г. 07:40 + в цитатник

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

Sothink SWF Quicker 5.2.509

и русифицированная портативная версия Sothink SWF Quicker 5.3.511

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. Здесь

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

Серия сообщений "Уроки 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. Дизайн для часиков.
Часть 11 - Делаем музыкальную флеш открытку в программе Sothink SWF Quicker.
...
Часть 48 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.
Часть 49 - Использование панели «Редактор движения» в Adobe Flash CS6.
Часть 50 - Анимация формы во Flash(морфинг).

Серия сообщений "Часовая мастерская":
Как сделать часики, рисование циферблатов и часовых стрелок, сборники клипарта на часовую тему
Часть 1 - Как правильно записать код флешки или видео в рамочку для кодов.
Часть 2 - Создаем таймер обратного отсчета в программе Sothink SWFQuicker
Часть 3 - Украшаем простые цифровые часики. Разнообразие дизайна.
Часть 4 - Флешчасики для коллажей в Aleo Flash Intro Banner Maker
Часть 5 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 1 Создание часового механизма.
Часть 6 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 2. Дизайн для часиков.
Часть 7 - Шаблон - конструктор часиков для Sothink SWF Quicker.
...
Часть 13 - Флеш заготовки «Цифровые часикидля ваших работ».
Часть 14 - Мои копилочки с Я - ру. Для часиков.
Часть 15 - Флеш приветствие для дневника, изменяющееся в зависимости от времени суток.

Рубрики:

Flash/уроки sothnik swf quicker

Уроки по программе Sothnik SWF Quicker

Метки: Sothnik SWF Quicker уроки flash уроки Sothnik SWF Quicker flash мои уроки flash

Процитировано 207 раз
Понравилось: 57 пользователям

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

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

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

Franzuzhenka обратиться по имени Четверг, 12 Апреля 2012 г. 07:53 (ссылка)

Dobroe utrechko! Spasibo bolshoe sa urok!!!

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

Четверг, 12 Апреля 2012 г. 08:02ссылка

novprospekt

Спасибо. Наконец-то я его дописала.

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

Четверг, 12 Апреля 2012 г. 08:06ссылка

Franzuzhenka

Sdorowo!!! Ja tak ponimaü, sto i 2 chas budet!!!

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

Четверг, 12 Апреля 2012 г. 08:12ссылка

novprospekt

Да, я уже и вторую часть выложила.

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

TamSanna обратиться по имени Четверг, 12 Апреля 2012 г. 08:09 (ссылка)

Благодарю за труд!:heart:

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

Четверг, 12 Апреля 2012 г. 08:12ссылка

novprospekt

Спасибо большое.

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

makarych обратиться по имени Четверг, 12 Апреля 2012 г. 08:18 (ссылка)

очень круто спасибо!

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

Четверг, 12 Апреля 2012 г. 08:23ссылка

novprospekt

Спасибо.

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

Та_ещё_штучка_Я обратиться по имени Четверг, 12 Апреля 2012 г. 10:11 (ссылка)

Спасибо огромное за урок!!!
Очень и очень рада! )
................................
поделитесь, если не тайна..как пар над чашечкой делать?..я пока не догналась )

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