Стеклянные кнопки с эффектом нажатия во Flash

Литература

1. Л.А. Залогова. Компьютерная графика. Элективный курс: учебное пособие.- М.: Бином. Лаборатория знаний, 2005г.

2. Вовк Елена. Информатика: уроки по Flash.// М., "Кудиц-Пресс". 2008

3. С.И. Переверзев Анимация в Macromedia Flash MX. Практикум: //М., БИНОМ, 2005

4. Д.А. Гурский, И.В. Горбач Flash MX и Action Script: обучение на примерах.- Мн.:Новое знание, 2003

5. П. Лапин. Самоучитель Flash MX.- Питер, 2003 г.

6. Д. Макар, Б. Виниарчик Тайны создания игр в Macromedia Flash MX 2004. – NT Press, М, 2005 г.

7. Розенцвейг Г. Macromedia Flash MX. Создание игр с помощью Action Script.- М.: ДМК Пресс

8. Гурский Д.А., ActionScript 2.0. Программирование во Flash MX 2004 // СПб, 2004

9. Пеннер Р. Программирование во Flash MX. М., Символ-Плюс, 2005

10. В.А. Попов Macromedia Flash: Материалы к урокам. – М.:ООО «Чистые пруды», 2005 (Библиотечка «Первое сентября», серия «Информатика»)

11. В.А. Попов. Уроки по Macromedia Flash //газета Информатика, 2003-№24

12. В.А. Попов, А.И. Сенокосов. Учебные проекты на Macromedia Flash // газета Информатика, 2003-№№ 33,35,37,39,41,43,45,47,

13. С.И. Переверзев Macromedia Flash в школе. // журнал Информатика и образование, 2003 - №№5-7.

Материалы сайтов:

14. http://kpolyakov.narod.ru/school/flash.htm

15. www.flasher.ru

16. www.superflash.ru – содержит 21 урок для начинающих

17. www.somit.ru - содержит практикум для начинающих

18. http://s11baikal.narod.ru/1.htm - представляет 5 мультимедийных уроков

19. www.web-silver.ru/flash - на сайте выложены электронные учебники, доступные для бесплатного скачивания

20. www.flash.by и www.flashzone.ru – содержат готовые проекты + пошаговые инструкции к ним.

Слайд 1

Стеклянные кнопки с эффектом нажатия во Flash © Баженов А.С., учитель информатики, ГОУ Центр образования №1462, г. Москва, 2011 г.

Слайд 2

Вступление • Уважаемые слушатели мастер-класса! • Просмотрев большую часть интернет ресурсов, я заметил, что • большая часть создателей использует стандартные решения и шаблоны. • Большая часть навигации написана на скриптах, другая часть имеет • часто повторяющиеся решения. • Некоторые, применяют фотошоп, используют различное оформление. • Вот и я дорогие друзья задался целью сделать необычные кнопки. • Как придать кнопкам блеск и красоту? • Как применить к ним эффект стекла? • Как сделать, чтобы активная кнопка осталась активной? • На все эти вопросы я и постарался найти ответ.

Слайд 3

Шаг 1 Создайте новый файл Flash (ActionScript 3.0)

Слайд 4

Шаг 2 • • • • • • • На панели инструментов выберите прямоугольник, выберите синий цвет. Нарисуйте прямоугольник размером с будущую кнопку. Не отпуская кнопку мыши нажмите на клавишу курсора «вниз». Таким образом вы получите закругленные края. Держите клавишу курсора «вниз» пока углы не превратятся в полукруги, т.е. до максимальной округлости прямоугольника.

Слайд 5

Шаг 3 • Выделите кнопку и нажмите F8, • Установите имя about_btn, тип Фрагмент ролика, и нажмите Ok. • В панели Свойств установите ее имя about_btn.

Слайд 6

Шаг 4 • • • • • Переименуйте слой 1 в buttons Дважды кликните по кнопке about_btn, чтобы открыть ее. После слоя 1 создайте 5 новых слоев и назовите их: actions, labels, shine, text и gradient а слой 1 переименуйте в background

Слайд 7

Шаг 5 • • • • • • Выделите область кнопки инструментом выделение Нажмите Ctrl+C, перейдите на слой gradient нажмите Ctrl+Shift+V Установите параметры цвета левого маркера 0:255:255 правого маркера 0:0:255

Слайд 8

Шаг 6 • В панели инструментов выбрать свободное преобразование градиента (Q)Q)) Переверните градиент на 90 градусов против часовой стрелки удерживая клавишу SHIFT. Для этого подведите курсор к круглому маркеру, когда появятся круговые стрелки начинайте тянуть. Отредактириуйте размер градиента по размеру вашей кнопки. Для этого щелкните по маркеру со стрелочкой и тяните удерживая кнопку мыши нажатой.

Слайд 9

Шаг 7.1 • Щелкните по закругленному градиентному прямоугольнику и удерживая ALT немного уменьшите его. • Для этого потяните один из прямоугольных угловых маркеров. • Совсем немного (Q)!!!) относительного оригинального размера. • Нажмите Ctrl+C, перейдите на слой shine и нажмите Ctrl+Shift+V

Слайд 10

Шаг 7.2 • • • • • • • • Установите параметры цвета левого маркера 255:255:255 Альфа канал 1% правого маркера 255:255:255 Альфа канал 75% Перейдите на слой text добавьте инструментом текст текст синего цвета About

Слайд 11

Шаг 8 • В 20 кадре в слоях background, shine и actions нажмите F5 • В слоях text и gradient нажмите F6 в кадрах 2, 9, 10 и 20 • В слое labels в кадрах 2, 10, 11 нажмите F6 а в 20 кадре нажмите F5 • В 9 кадре в слое actions нажмите F6

Слайд 12

Шаг 9.1 • • • • • • Перейдите в 9 кадр слоя gradient Выделите градиент Установите параметры цвета левого маркера 0:255:255 правого маркера 255:0:255 Альфа канал 100%

Слайд 13

Шаг 9.2 • • • • • • • Перейдите в 10 кадр слоя gradient Выделите градиент Установите параметры цвета левого маркера 0:255:255 правого маркера 112:112:211 Альфа канал 100% Нажмите F6 в 11 кадре слоя gradient

Слайд 14

Шаг 10.1 • • • • • • • Перейдите в 9 кадр слоя text Установите параметры цвета 0:0:0 Перейдите в 10 кадр слоя text Установите параметры цвета 210:30:155 Нажмите F6 в 11 кадре слоя text

Слайд 15

Шаг 10.2 • Перейдите во 2 кадр слоя text. Нажмите правую кнопку мыши • Создайте классическую анимацию • Повторите эту операцию и для 11 кадра слоя text • Повторите операцию создания классической анимации для 2 и 11 кадра слоя gradient

Слайд 16

Шаг 11 • Перейдите в слой labels во 2 кадр. В панели свойств дайте имя кадру over • 10 кадру имя down и 11 кадру out

Слайд 17

Шаг 12.1 • Перейдите в слой actions в 1 кадр. • Нажмите F9. Добавьте следующий код stop (Q)); • Повторите действие для 9 кадра слоя actions

Слайд 18

Шаг 12.2 • Нажмите на белом поле левой кнопкой мыши справа или снизу кнопки 2 раза • Нажмите Ctrl+l для вызова билиотеки объектов • Выделите правой кнопкой мыши • about_btn выдерите дублировать • задайте новое имя объекта portofolio_btn • Повторите операцию создав contact_btn

Слайд 19

Шаг 13 • Перетащите зажатой левой кнопкой мыши из библиотеки новые кнопки • Дважды кликните по 2 кнопке about (Q)portfolio_btn), • чтобы открыть ее измените текст на Portfolio • (Q)1,2,9,10,1 и 20 кадр). Вернитесь из режима редактирования, нажав дважды на белом листе • Повторите операцию для 3 кнопки поменяв текст на Contact Перейдите на слой actions нажмите в 1 кадре слоя F9 и добавьте программируемый код

Слайд 20

Добавляем массив элементов установка свойств и событий stop(Q)); //Останавливает постоянное движение презентации stage.frameRate = 30; //---- добавляем кнопки к массиву -------var buttonsArray:Array = [about_btn,portfolio_btn,contact_btn]; //----цикл в массиве buttonsArray----//----установим некоторые свойства и добавим события кнопкам---function setButtons(Q)):void { for (Q)var i:int=0; i

Слайд 21

Программируем действия мыши //----выполняется, когда мышь наводится над кнопкой---function playOver(Q)event:MouseEvent):void { event.currentTarget.gotoAndPlay(Q)"over"); } //----выполняется, когда мышь уходит с кнопки---function playOut(Q)event:MouseEvent):void { event.currentTarget.gotoAndPlay(Q)"out"); } //----выполняется, когда мышь кликает кнопку----function doClick(Q)event:MouseEvent):void{ //----установим переменную currentBtn равную----//----идентификатору кнопки (Q)id) , которая была кликнута----var currentBtn:int = event.currentTarget.id; //----вызываем функцию setSelectedBtn setSelectedBtn(Q)currentBtn); }

Слайд 22

Проверяем работу кнопок (Q)начало) реакция на нажатие кнопок /*проверим, какая кнопка была кликнута, если id , переданная в функцию setSelectedBtn, идентична id кликнутой кнопки то полагаем, что кнопки находятся в положении нажатой down (Q)выделенная) и удаляем все события, добавленные к ней*/ function setSelectedBtn(Q)id:int):void{ for (Q)var i:int=0; i< buttonsArray.length; i++) { if (Q)id == i) { buttonsArray[i].gotoAndStop(Q)"down"); buttonsArray[i].buttonMode = false; buttonsArray[i].mouseEnabled = false; buttonsArray[i].removeEventListener(Q)MouseEvent.ROLL_OVER,playOver); buttonsArray[i].removeEventListener(Q)MouseEvent.ROLL_OUT,playOut); buttonsArray[i].removeEventListener(Q)MouseEvent.CLICK,doClick); }

Слайд 23

Проверяем работу кнопок (Q)продолжение) если не происходит нажатие else { if(Q)buttonsArray[i].currentLabel =="down"){ buttonsArray[i].gotoAndPlay(Q)"out"); } buttonsArray[i].buttonMode = true; buttonsArray[i].mouseEnabled = true; buttonsArray[i].addEventListener(Q)MouseEvent.ROLL_OVER,playOver); buttonsArray[i].addEventListener(Q)MouseEvent.ROLL_OUT,playOut); buttonsArray[i].addEventListener(Q)MouseEvent.CLICK,doClick); } } } //----вызываем функцию setButtons ---setButtons(Q));

Слайд 24

Программа перехода по страницам (Q)добавляется ниже основной) //Эта секция отвечает за привязку кнопок к переходу по страницам about_btn.addEventListener(MouseEvent.CLICK, onClickAbout); //слушает нажатие левой кнопки мыши portfolio_btn.addEventListener(MouseEvent.CLICK, onClickPortfolio); contact_btn.addEventListener(MouseEvent.CLICK, onClickContact); //Описание действий при нажатии кнопки мыши function onClickAbout(e:MouseEvent): void { gotoAndStop("about") //переходит на страницу about } function onClickPortfolio (e:MouseEvent): void { gotoAndStop("portfolio") //переходит на страницу portfolio } function onClickContact (e:MouseEvent): void { gotoAndStop("contact") //переходит на страницу contact }

Полный текст материала Стеклянные кнопки с эффектом нажатия во Flash смотрите в скачиваемом файле.
На странице приведен фрагмент.

Автор: Баженов Александр Сергеевич → asbazhenov

30.10.2011

6376

1411

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

Спасибо за Вашу оценку. Если хотите, чтобы Ваше имя
стало известно автору, войдите на сайт как пользователь
и нажмите Спасибо еще раз. Ваше имя появится на этой стрнице.

Вход | Регистрация

запомнить
Забыл пароль \| Регистрация