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

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

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

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

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

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

На этом слое "Винт" нарисовать небольшую окружность инструментом "Овал"(Oval)
Настройка параметров для инструмента: выбрать инструмент Значки инструментов программы Sothnik SWF Quicker

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

"Овал". Нажать кнопку в дополнительных параметрах "Рисовать как форму" (Draw as Shape). На вкладке "Свойства" (Properties) установить - заливка контура отсутствует, заливка для формы черный цвет.

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

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

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

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

Чтобы наша пуговка-винтик не была такой плоской применим к ней фильтр "Фаска" (Bevel). Но фильтры можно применять только к мувиклипам и кнопкам. Поэтому нашу форму кнопочку-винтик сначала преобразуем в ролик (MovieClip). Перед этим нашу форму необходимо выделить, щелкнув по ней инструментом

"Выбор" (Selection) и затем переключившись на инструмент Значки инструментов программы Sothnik SWF Quicker

"Трансформация" (Transform) щелкнуть еще раз. Выделенный элемент необходимо конвертировать в мувиклип. На панели "Свойства" есть для этого активная ссылка- переход "Преобразовать в символ…"(Convert to symbol). Щелкаем по этой ссылке и в открывшемся диалоговом окне для преобразования указываем необходимые нам параметры.

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

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

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

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

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

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

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

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

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

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

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

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

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

Таким же образом добавляем тень к миутной и секундной стрелкам
Для добавлнения фильтра "Тень"(Drop Shadow) к мувиклипу минутной стрелки (min) выделяем соответственно слой "Мин" отключаем видимость слоев "Час" и "Сек". Инструментом

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

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

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

Для добавлнения фильтра "Тень"(Drop Shadow) к мувиклипу cекундной стрелки (sec) выделяем соответственно слой "Сек", отключаем видимость слоев "Час" и "Мин". Инструментом

"Выбор" (Selection) выделяем изображение секундной стрелки на рабочем поле и переходим во вкладку "Фильтр" (Filter). Выбрав фильтр "Тень" (Drop Shadow) задаем необходимые настройки.

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

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

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

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

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

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

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

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

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

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

"Выбор" (Selection) обведите изображение секундной стрелки вокруг.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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