Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
«Советский маразм 2 - Партвзносы»
tn_gallery_3450_219_9152.jpg

© master AlPu
06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

 
Добавить ответ в эту темуОткрыть тему
> Аналоговые часики, часы со стрелками
V
Des
сообщение 6.12.2008 - 14:56
Сообщение #1


тритониус
****

Звезда писателя I степениЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 728
Регистрация: 9.12.2007
Из: Москва \ Питер
Пользователь №: 6553
дышу под водой
Галерея Блог


Симпатии:  68  


Результатом прохождения этого урока станут "аналоговые" - со стрелками - часики.
Исходники к уроку: lesson_watch_01.rar

Создаем новый документ AS2. Задаем частоту кадров 25, версия флэш-плеера - 8, размер - 400 x 400 px.
Первый (пока единственный) слой на таймлайне переименовываем в "as" - здесь мы будем писать скрипты. И создаем новые слои под наши будущие объекты: (снизу вверх) back (для фона), plate (циферблат), hour (часовая стрелка), min (минутная), sec (секундная), glass (стекло).
Закрываем "замочком" все слои, кроме back. Проще всего это сделать, "закрыв" все "замочком" сверху, после чего открыть нужный слой. В дальнейшем я это описывать не буду - предполагается, что Вы сами будете открывать и закрывать нужные слои так, чтобы работать с нужными объектами и не сдвигать случайно остальные.
Рисуем на слое back прямоугольник со скругленными углами. Для этого выбираем инструмент "Прямоугольник" ( [R] ), в его свойствах выставляем радиус скругления 15 px, выбираем любой цвет заливки (все равно "перекрашивать" еще) и отсутствие контура в настройках цветов, и рисуем прямоугольник от левого верхнего угла сцены до правого нижнего. Выбираем инструмент "стрелка" ( [V] ), им выбираем прямоугольник. В его свойствах указываем (при "отжатом замочке") ширину (Ш) и высоту (В) по 400.0, координаты верхнего левого угла - (X) =0, (Y) =0.
"Раскрасим" фон повеселее: вызываем палитру "цвет" ( [Shift] + [F9] ), выбираем Тип: "Линейный". Выбираем инструмент "преобразование градиента" ( [F] ), поворачиваем градиент на 90° CCW. В палитре "цвет" выбираем цвета растяжки и настраиваем ее. Ну, напр., так, как в файле clock01a.fla из исходников к уроку.
Фон есть, рисуем циферблат.
На слое plate рисуем круг. Для этого выбираем инструмент "Овал" ( [O] ), выбираем любой цвет заливки и любой (но другой) цвет контура. Ставим толщину контура - 1.5, тип - сплошной. При нажатых [Alt] и [Shift] рисуем круг, на десяток-другой пикселов меньше по диаметру, чем высота\ширина сцены. При нажатом [Shift] это будет именно круг, а не овал, а при нажатом [Alt] рисование идет из центра, а не из левого верхнего угла - что в данном случае удобнее.
Инструментом "стрелка" ( [V] ) выбираем круг вместе с контуром - можно двумя "щелчками" на круге и на контуре, можно - drag&drop-ом прямоугольника выбора. Нажимаем [F8], выбираем "Графика", вводим имя нового символа - напр., plate_gr, нажимаем [Enter].
Вызываем палитру "выравнивание" - [Ctrl]+[K]. Если опция "...в пределах рабочей области" не включена - включите ее. Выравниваем по горизонтали ( [Ctrl] + [Alt] + [2] ) и по вертикали ( [Ctrl] + [Alt] + [5] ).
Должно получиться что-то вроде clock01b.fla
Двойным кликом переходим к редактированию символа plate_gr. "Перекрашиваем" заливку и контур градиентами - циферблат наших часиков станет более симпатичным.
Переходим на слой glass, рисуем круг - на этот раз без контура. Мы могли бы перекопировать круг из символа "plate_gr" (перейти к редактированию символа plate_gr; выбрать круг с заливкой инструментом "стрелка" ( [V] ); скопировать в буфер обмена ( [Ctrl] + [C] ); перейти к редактированию сцены; перейти на слой glass; "вклеить" содержимое буфера обмена ( [Ctrl] + [V] ); выровнять вклеенный круг по циферблату), но, если включена привязка к объектам, то нарисовать круг, совпадающий с кругом циферблата, заново - даже проще.
В палитре цвет (если Вы закрыли ее - вызываем ( [Shift] + [F9] )) выбираем тип заливки - Радиальный. Настраиваем: цвет в центре заливки - белый с прозрачностью (Alpha) =50%, справа - белый с прозрачностью 0%. Обратите внимание: хотя сама граница градиента и не видна (полностью прозрачна), тем не менее, важно, чтобы цвет для нее был установлен в белый. Иначе другие цвета появятся между крайними точками градиента.
clock01c.fla
Я не буду здесь останавливаться на рисовании бликов, теней и градиентов - нам важно добраться до программной части, до реализации "часиков". Вы можете превратить круг на слое glass в символ и в этом символе нарисовать любые блики, отражения, тени, да хоть "гравировку по стеклу"...
Рисуем стрелки.
Стрелки мы будем рисовать во вновь созданном символе, поскольку здесь для нас важна будет точка привязки (pivot point) - точка, вокруг которой стрелка будет вращаться. Кроме того, стрелки - это уже не графика, это MovieClip, ведь управлять мы стрелками будем программно.
Переходим на слой hour. Нажимаем [Ctrl]+[F8], выбираем "Фрагмент ролика", называем его, напр., arrHour, [Enter]
Мы сразу попадаем в редактирование нового символа, но удобнее будет видеть "подложкой" саму сцену, поэтому мы перейдем к редактированию сцены и поместим на нее новый (пустой пока) MovieClip из библиотеки. Если библиотека не открыта, вызовите ее ( [Ctrl] + [L] ). "Перетащите" символ-MovieClip "arrHour" на сцену на слой hour. [Ctrl] + [Alt] + [2] и [Ctrl] + [Alt] + [5] установит наш пустой клип в центр сцены. Двойной щелчок на "кружке с крестиком" - и можно рисовать часовую стрелку. Я нарисовал просто восьмипиксельную линию с градиентной заливкой. Осталось не забыть назвать экземпляр MovieClip-а: в соответствующем поле в свойствах вписываем "arrHour_mc".
clock01d.fla
Аналогично (с пустого MovieClip-а) создаем \ рисуем минутную и секундную стрелки на соответствующих слоях. Не забываем дать имена экземплярам.
clock01e.fla

Вот теперь все готово к программированию часиков...

Закрываем все слои, переходим на слой as. Открываем редактор скриптов - [F9].
Пишем:
CODE
// переменная-идентификатор интервала.
var tID:Number;
/*
функция, которая ставит стрелки часов в соответствии с текущим временем
тип возвращаемого значения "Void" означает, что функция не возвращает никакого значения, а только выполняет какие-то действия
*/
function changeTime():Void {
/*
объявляем переменные, "видимые" только "внутри" функции
при ее выполнении.
*/
var s:Number; // секунды
var m:Number; // минуты
var h:Number; // часы
/*
объявляем и тут же инициируем текущим временем
переменную date типа Date
*/
var date:Date = new Date();
// получаем время в секундах, часах, минутах
s = date.getSeconds();
m = date.getMinutes();
h = date.getHours();

// вычисляем углы поворота стрелок и сразу поворачиваем соответствующие MovieClip-ы
arrSec_mc._rotation = s * 6;
arrMin_mc._rotation = m * 6;
/*
для значения часов
нужно небольшое преобразование:
объект Date хранит часы в 24-часовом формате,
а нам нужен 12-часовой. Проверяем, если
больше 12 - вычитаем 12...
*/
if (h>12) { h-=12; }
arrHour_mc._rotation = h * 30 + 0.5 * m;
}
// ...и вызываем функцию изменения показаний часов каждую 0.1 секунды...
tID = setInterval(changeTime,100);

// все!
stop();


[F12].


Идут часики? - а куда ж им деваться... если же все же нет - проверяйте себя по clock01f.fla Я только добавил еще маленький кружочек-"кнопку" в центр glass - стрелки без центральной "пуговки" выглядят уж совсем неестественно, да фильтры-тени на эту "кнопочку" и на стрелки.




Теперь Вы умеете работать с объектами типа Date - и да не иссякнет Ваша фантазия в придумывании новогодних-рождественских часиков, календариков, напоминалок, будильничков и курантов! smile.gif

------------------------------------------------------------------------------------------------------------------------------------------------------------
Автором урока является Des.
Запрещается копирование и публикация урока на других сайтах без письменного согласия автора и размещения ссылок.


The tutorial is written by Des.
No part of this tutorial can be copied/pasted on any other website without the author's express written permission.


Сообщение отредактировал Des - 9.12.2008 - 09:47


--------------------
"Высшая мудрость - умение разговаривать с людьми" ((с) Ямамото Цунэтомо (Дзётё), "Хагакурэ")
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Krov
сообщение 7.04.2009 - 21:04
Сообщение #2






Группа: Туристы
Сообщений: 7
Регистрация: 5.04.2009
Пользователь №: 12564



Симпатии:  0  


Это типпа круто. Это там цифрами было. А тут рельно стрелки показывают. blink.gif
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Opium5800
сообщение 7.02.2010 - 16:08
Сообщение #3


Проезжий
*


Группа: Жители
Сообщений: 16
Регистрация: 6.02.2010
Пользователь №: 15348



Симпатии:  0  


clap.gif
шикарно! Недавно уселся за FLASH мне так порадовало! Вот теперь буду учиться. Спасибо за урок!
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
alexbash
сообщение 12.02.2010 - 22:04
Сообщение #4






Группа: Туристы
Сообщений: 4
Регистрация: 5.02.2010
Пользователь №: 15340



Симпатии:  0  


Спасибо за урок! clap.gif
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Asmatex
сообщение 16.02.2010 - 23:21
Сообщение #5






Группа: Туристы
Сообщений: 3
Регистрация: 27.01.2010
Пользователь №: 15251



Симпатии:  0  


Цитата(Des @ 6.12.2008 - 13:53) *
Результатом прохождения этого урока станут "аналоговые" - со стрелками - часики.

Создаем новый документ AS2. Задаем частоту кадров 25, версия флэш-плеера - 8, размер - 400 x 400 px.


А для AS3 подойдет?
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Des
сообщение 16.04.2010 - 00:42
Сообщение #6


тритониус
****

Звезда писателя I степениЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 728
Регистрация: 9.12.2007
Из: Москва \ Питер
Пользователь №: 6553
дышу под водой
Галерея Блог


Симпатии:  68  


Цитата(Asmatex @ 16.02.2010 - 23:18) *
А для AS3 подойдет?


Нет.
Но если Вы освоите AS2 - на AS3 перейти будет на порядок проще.
Начинать учиться программированию вообще сразу на AS3, на мой взгляд, сложновато. Но если опыт программирования на каком-либо другом объектно-ориентированном языке у Вас имеется - то, IMHO, можно и c AS3 начать.


--------------------
"Высшая мудрость - умение разговаривать с людьми" ((с) Ямамото Цунэтомо (Дзётё), "Хагакурэ")
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 17.10.2017 - 01:18