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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавляем массив элементов установка свойств и событий stop(); //Останавливает постоянное движение презентации stage.frameRate = 30; //---- добавляем кнопки к массиву var buttonsArray:Array = [about_btn,portfolio_btn,contact_btn]; //----цикл в массиве buttonsArray----- //----установим некоторые свойства и добавим события кнопкам---- function setButtons():void { for (var i:int=0; i<buttonsArray.length; i++) { buttonsArray[i].id = i; buttonsArray[i].buttonMode = true; buttonsArray[i].mouseChildren = false; buttonsArray[i].mouseEnabled = true; buttonsArray[i].addEventListener(MouseEvent.ROLL_OVER,playOver); buttonsArray[i].addEventListener(MouseEvent.ROLL_OUT,playOut); buttonsArray[i].addEventListener(MouseEvent.CLICK,doClick); }

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

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

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

Программа перехода по страницам (добавляется ниже основной) //Эта секция отвечает за привязку кнопок к переходу по страницам 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 }