Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на Flash

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "3D и виртуальная реальность. Все о Macromedia Flash MX." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Виктор2010

Статистика

10.936 подписчиков
-7 за неделю
←   Все выпуски   →

Flash для начинающих


Компания ИнфоСтарз


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


Если у Вас есть сайт...

Бесплатный сервис на сайт
Вы можете абсолютно бесплатно разместить форму для загрузки файлов на бесплатный сервер на своем сайте.

Готовые ленты новостей
Вы можете разместить у себя на сайте информеры с последними новостями на самые разные темы.

Партнерская программа Wizards World
Размести ссылку на своем сайте и получай проценты от платежей привлеченных пользователей.


Урок - Стеклянная кнопка.

У вас когда-нибудь возникала необходимость нарисовать стеклянные кнопки? Где вы их рисовали? В Photoshop? Но рисунки, выполненные во Flash, выгодно отличаются от растровых по весу. К тому же их намного проще редактировать их (например, поменять цвет), ведь не возникает необходимости возвращаться к другим программам и вновь экспортировать кнопку во Flash. Прежде чем начать урок скачайте исходник  здесь. Итак, начнем.

1. Откройте новый документ. С помощью инструмента Rectangle tool ® нарисуйте прямоугольник размером с будущую кнопку. Не отпуская кнопку мыши нажмите на клавишу курсора «вниз». Таким образом вы получите закругленные края. Держите клавишу курсора «вниз» пока углы не превратятся в полукруги, т.е. до максимальной округлости прямоугольника.

2. Удалите контур – двойно щелчок по контуру для выделение и нажмите клавишу Delete.

3. Увеличьте масштаб перед тем как выполнять следующие шаги – для лучшего выполнения рисунка.

4. Выделите прямоугольник и выберите в меню Modify > Convert to Symbol (аналогично нажатию клавиши F8). Выберите символ Button, назовите его aqua button и нажмите OK.

5. Щелкните два раза по только что созданному символу для того, чтобы продолжить его редактирование.

6. Переименуйте первый слой (помните! Вы находитесь на временной шкале символа aqua button!) в background

7. Выделите прямоугольник с округлыми углами.

8. Откройте панель Color Mixer , если она еще не была открыта (Window > Color Mixer). Выберите следующий цвет - #1A2953

9. Заблокируйте слой background и создайте новый слой. Назовите его gradient.

10. Щелкните правой кнопкой в первом кадре слоя background, и в появившемся меню выберите Copy Frames. Теперь щелкните правой кнопкой в первом кадре слоя gradient, и в появившемся меню выберите Paste Frames.

11. Продолжаем работу в слое gradient. Выделите рисунок, который находится на сцене и залейте его градиентной заливкой. Для этого перейдите в панель Color Mixer, выберите тип заливки Linear. Двойной щелчок по левому маленькому прямоугольнику заливки и выберите цвет #1A2953, теперь двойной щелчок по второму прямоугольничку и выберите #95D5DF (т.е. градиент должен быть от очень темного к светлому)

12. Возьмите инструмент Gradient Transform Tool (F) на панели инструментов. Переверните градиент на 90 градусов по часовой стрелке удерживая клавишу SHIFT. Для этого подведите курсор к круглому маркеру, когда появятся груговые стрелки начинайте тянуть.

13. Отредактириуйте размер градинта по размеру вашей кнопки. Для этого щелкните по маркеру со стрелочкой и тяните удерживая кнопку мыши нажатой. См. картинку ниже:

14. Возьмите инструмент Free Transform Tool (Q). На панели инструментов в разделе Options щелкните по кнопке Scale.

15. Щелкните по закругленному градиентному прямоугольнику и удерживая ALT немного уменьшите его. Для этого потяните один из прямоугольных угловых маркеров. Совсем немного (!!!) относительного оригинального размера.

16. Отключите опцию Scale. Щелкните по среднему боковому маркеру (любому) и удерживая ALT растяните немного нашу форму.

17. Создайте новый слой и назовите его shine

18. Выделите градиентный рисунок в слое gradient и копируйте его (CTRL+C). Заблокируйте этот слой, перейдите в слой shine и вставьте рисунок (CTRL+V).
Выберите сплошную заливку для только что вставленного рисунка, чтобы вы лучше его видели.

19. С помощью инструмента Transform Tool (Q) уменьшите будущий блик. Высота блика должна быть в половину меньше общей высоты кнопки.

20. Выберите инструмент Selction Tool (V). Выделите правую часть блика и перенесите ее вправо (удерживая клавишу SHIFT)

21. Выделите часть блика, того, что остался слева.

22. Растяните ее с помощью инструмента Free Transform Tool (Q) по всей кнопке.

Отлично! Наш блик на месте. Теперь я объясню почему мы меняли размер нашего блика таким сложным способом. Дело в том, что если бы мы просто растянули его с помощью инструмента Free Transform, то изменилась бы округленность наших углов. А нам этого не нужно.
Это не значит, что всегда следует прибегать к такому способу трансформации. Рисуя во флеше экспериментируйте и вы поймете как реагируют рисунки на изменения, сделанные с помощью Free Transform. Предложенный способ не лучший, просто для данного урока он наиболее удобный.

23. Давайте теперь сделаем блик похожим на блик. Выделите блик. Перейдите в панель
color mixer. Выберите тип заливки Linear.
Повторите шаг 11 данного урока только установите цвет #FFFFFF для обоих маркеров. Для правого маркера установите Alpha равное 1-2%. Переместите маркеры немного ближе к середине, чтобы переход цвета не был таким плавным.

24. С помощью инструмента Gradient Transform Tool (F) переверните градиент на 90% по часовой стрелке и измените его высоту как рассказано в шагах 12-13 данного урока.

Снимите выделение с кнопки, щелкнув мышкой где-нибудь на сцене. У вас должно получиться следующий результат.

Вот и все! Отличная стеклянная кнопка!



Вам понравилась рассылка?
(голосование возможно только из письма рассылки)
  • понравилась
    		•
  • не понравилась
    		•
  • средне
    		•


    В избранное