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

флэш, Часовая мастерская, программы для флэш

Если вы выполнили первую часть урока
Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 1 Создание часового механизма и создали свой собственый часовой механизм, то пора приступить к дизайну ваших часиков.
Для начала прикроем центральную точку, в которой сходятся концы стрелок, "пуговкой - винтиком".
Для этого, выше слоя "Сек" создаем новый слой. Сначала выделите слой "Сек", а затем нажмите на "Временной шкале" кнопку "Добавить слой" (Insert Layer). Созданный слой переименовать в "Винт" и добавить ему второй кадр. Щелкнуть курсором мыши во вторую клеточку слоя "Винт" и нажать на клавиатуре клавишу F5.

Создаем аналоговые часики Sothink SWFQuicker часть 2

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

Создаем аналоговые часики Sothink SWFQuicker часть 2

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

Создаем аналоговые часики Sothink SWFQuicker часть 2

Ширина (width) = 20 пикс, высота (height) = 20 пикс
Координата X = 250, координата Y = 250



Чтобы наша пуговка-винтик не была такой плоской применим к ней фильтр "Фаска" (Bevel). Но фильтры можно применять только к мувиклипам и кнопкам. Поэтому нашу форму кнопочку-винтик сначала преобразуем в ролик (MovieClip). Перед этим нашу форму необходимо выделить, щелкнув по ней инструментом Создаем аналоговые часики Sothink SWFQuicker часть 2 "Выбор" (Selection) и затем переключившись на инструмент Создаем аналоговые часики Sothink SWFQuicker часть 2 "Трансформация" (Transform) щелкнуть еще раз. Выделенный элемент необходимо конвертировать в мувиклип. На панели "Свойства" есть для этого активная ссылка- переход "Преобразовать в символ…"(Convert to symbol). Щелкаем по этой ссылке и в открывшемся диалоговом окне для преобразования указываем необходимые нам параметры.

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

Перейдите в панель "Библиотека" (Librari) и убедитесь, что у вас там появился новый мувиклип "Винт".
Вот теперь мы можем перейти на вкладку "Фильтр" (Filter). Эта вкладка находится там же где и вкладка "Свойства". Нажимаем на кнопочку "+" (Добавит фильтр или Add filter), которая в нашем случае активна, и выберите необходимый фильтр. В нашем случае - Фаска (Bevel) 

Создаем аналоговые часики Sothink SWFQuicker часть 2

 Выставляем значения параметров для фильтра Фаска (Bevel)

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

И теперь перейдем к стрелкам. Придадим им более естественный вид также с помощью фильтров.
Стрелки будут отбрасывать тень на циферблат. Стрелки у нас являются мувиклипами и поэтому никаких проблем с применением к ним фильтра "Тень" у нас не возникнет. Для того, чтобы применение фильтра к конкретному мувиклипу стало возможным его изображение на рабочем поле (сцене) необходимо выделить также как мы делали это с мувиклипом "Кнопка-винтик".
На панели инструментов выбираем инструмент Создаем аналоговые часики Sothink SWFQuicker часть 2  Выбор" (Selection), на "Временной шкале" делаем активным слой "Час" и щелкаем на сцене по изображению часовой стрелки. Если вам сложно выделить элемент "Часовая стрелка", то можете отключить глазки видимости на слоях "Мин" и "Сек". Тогда самая нижняя стрелка будет вам хорошо видна. Также потом можно будет поступить и при выделении других стрелок. Оставляем видимым только слой с той стрелкой, с которой работаем, а видимость слоев с другими двумя стрелками отключаем.

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

Таким же образом добавляем тень к миутной и секундной стрелкам. Для добавлнения фильтра "Тень"(Drop Shadow) к мувиклипу минутной стрелки (min) выделяем соответственно слой "Мин" отключаем видимость слоев "Час" и "Сек". Инструментом Создаем аналоговые часики Sothink SWFQuicker часть 2 "Выбор" (Selection) выделяем изображение минутной стрелки на рабочем поле. Далее переходим во вкладку "Фильтр"(Filter). Выбрав фильтр "Тень" (Drop Shadow), задаем необходимые настройки. Можете воспользоваться значениями указанными на моих скринах.

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

Для добавлнения фильтра "Тень"(Drop Shadow) к мувиклипу cекундной стрелки (sec) выделяем соответственно слой "Сек", отключаем видимость слоев "Час" и "Мин". Инструментом Создаем аналоговые часики Sothink SWFQuicker часть 2 "Выбор" (Selection) выделяем изображение секундной стрелки на рабочем поле и переходим во вкладку "Фильтр" (Filter). Выбрав фильтр "Тень" (Drop Shadow) задаем необходимые настройки.

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

 Мы добавили фильтры к элементам часиков и можем протестировать полученный ролик. Ctrl+Enter

Как видим наши часики приобрели более естественный вид.
Еще можно проделать такую вещь. Сейчас мы сместим вниз конец секундной стрелки относительно центральной точки выравнивания и тогда этот кончик будет выглядывать из под кнопки-винтика. Что для этого необходимо сделать.
Зайдите во кладку "Библиотека" (Library) и найти там мувиклип "sec", щелкните по нему два раза.

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

После этого вы переместитесь в режим редактирования мувиклипа "sec". Вот такой вид у вас должен быть в режиме редактирования

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

Как можно увидеть, синим крестиком помечен центр или точнее точка регистрации (точка привязки) стрелок. Конец секундной стрелки совпадает с центром.
Для того, чтобы продолжить редактирование, объект должен быть выделен. Для этого инструментом Создаем аналоговые часики Sothink SWFQuicker часть 2 "Выбор" (Selection) обведите изображение секундной стрелки вокруг.

Создаем аналоговые часики Sothink SWFQuicker часть 2 Выделенное изображение покроется сеткой. На клавиатуре нажмите стрелку вниз и сдвиньте на некоторое расстояние вниз конец секундной стрелки. Теперь конец секундной стрелки находится ниже центральной точки.

Создаем аналоговые часики Sothink SWFQuicker часть 2

Выходим из режима редактирования, нажав в верху над "Временной шкалой" надпись "Сцена 1" (Scene 1). Вот как выглядят теперь наши стрелки на циферблате.

Создаем аналоговые часики Sothink SWFQuicker часть 2

Кончик секундной стрелки выглядывает из под кнопки - винтика, но, проследите, чтобы по длинне секундная стрелка все равно оставалась самой длинной. Если это не так, то вернитесь в режим редактирования и, предварительно выделив редактируемое изображение, стрелкой с клавиатуры преподнимите его немного вверх.
Выйдите из режима редактирования и посмотрите - удовлетворяет ли вас результат.
Запустим режим тестирования ролика Ctrl+Enter.

Остается только поработать с циферблатом. Можете прямо на нашем импровизированном нарисовать какие-то отметки для ориентирования, а можно импортировать изображение циферблата, а затем подогнать размеры и координаты для центрирования.
Давайте импортируем готовое изображение циферблата. Я предлагаю вам попробывать одно из моих, но вы, конечно, можете взять и свое.

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

Сохраните изображения циферблата, которое вы будете импортировать, себе на компьютер.
Для импорта изображения создайте новый слой, выше слоя циферблат. Назовите его "Циферблат2". Создайте для этого слоя второй кадр,щелкнув вторую клеточку на временной шкале слоя и затем нажав на клавиатуре клавишу F5. Встаньте на первый кадр слоя и зайдите в меню Файл – Импорт( File-Import). Откройте изображение циферблата с вашего компьютера.

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

Создаем аналоговые часики Sothink SWFQuicker часть 2

Проследите чтобы слой "Циферблат 2" и импортированное изображение циферблата на рабочем поле (сцене) были выделены. В панели "Трансформация"(Transform) введите необходимые размеры для циферблата и координаты выравнивания. 

title="Создаем аналоговые часики Sothink SWFQuicker часть 2" alt="Создаем аналоговые часики Sothink SWFQuicker часть 2" />

Создаем аналоговые часики Sothink SWFQuicker часть 2

Протестируем наше творение Ctrl+Enter.

Вот, теперь наши часики имеют вполне законченный дизайн.


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

Создаем аналоговые часики Sothink SWFQuicker часть 2