DooDLeZ | Дата: Воскресенье, 28.03.2010, 20:20 | Сообщение # 1 |
WebMaster Сообщений: 485 [ ] | Урок рассчитан на совсем новичков. Причиной его создания послужило некое "устаревание" ряда имеющихся уроков по созданию кнопок+ описанный способ обеспечивает большую гибкость (и хотя это не самый лучший подход с точки зрения красоты и организованности кода, можно все это дело писаьт и в классах, но таким образом создана не одна тысяча страниц и игрушек и для про,стых задач (да и не только) он подходит на все 120%). Никакие красоты наводить не буду - главное объяснить принцип, а что там дальше каждый наваяет - его дизайн - его дело. Задача этого урока - функциональность и гибкость в оформлении. Итак, приступим. Создадим новый AS2-документ. В нем в любом месте нарисуем ту область, которая будет представлять из себя все пространство нашей кнопки. Самое простое и привычное - это прямоугольник. Рассчитывайте так, что это фон вашей будущей кнопки (в дальнейшем его можно сделать невидимым, но лучше что б он все же был). Далее выделим его Урок:кнопки из мувиклипов и сделаем из него мувиклип, нажав по нему правой кнопкой мыши и выбрав Урок:кнопки из мувиклипов И в появившемся окне ничего не меняем кроме названия символа (поле Name) , назовем его button. Теперь клацнем по нему быстро 2 раза левой кнопкой мыши, тем самым получим возможность его редактирования. Наша кнопка ведь не будет состоять только из фона, нужно туда поместить еще что-нибудь, например текст. Для большей гибкости в оформлении поместим его в отдельный слой. Для этого создадим его. Урок:кнопки из мувиклипов И в новом слое создадим текстовое поле и разместим в нем какой-нибудь текст. Если вы хотите использовать нестандартные шрифты - пока повремените, используйте шрифт, который наверняка есть у каждого пользователя по умолчанию, например Courier New Cyr, в дальнейшем мы его поменяем. Урок:кнопки из мувиклипов Ну вот, собственно кнопка у нас готова. Теперь нужно настроить ее реакцию на различные днйствия пользователя. Настраивать будем на наведение мыши на кнопку, на нажатие, ну и на уведение - это у нас уже есть. Начнем в том порядке, в котором оно обычно работает. Новый вид кнопок будем создавать в новом кадре нашего исходного мувиклипа. В нем при желании кнопку можно перерисовать полностью и от ее внешенго вида ничего не оставить, но мы поступим проще (есть другие уроки по дизайну кнопок): продублируем содержимое из 1-го кадра. Для этого выделим на таймлайне 1й кадр, в котором у нас текст и нажмем F6. Урок:кнопки из мувиклипов Что же произошло? Автоматически в слое с текстом был создан еще один кадр, куда было помещено все содержимое (т.е. текстовое поле с текстом) 1-го кадра этого слоя. Но помимо этого можно еще наблюдать и изменения в слое с нашим фоном. Визуально в нем произошло тоже самое, но значки при этом у каждого слоя разные. У слоя с текстом создана копия 1-го кадра, а у слоя с фоном, если можно так сказать, кадр остался один, но он по размеру (длительности) равен двум кадрам из слоя с текстом. Таким образом нам теперь нет необходимости создавать еще раз изображение фона. Настало время изменить внешиний вид нашей кнопки во 2м кадре. Долго мучаться над выбором изменений не будем - изменим цвет текста. Изменять можно все что угодно, в том числе и фон (ведь не обязательно делать его из одного (имеется в виду долгого) кадра!). Урок:кнопки из мувиклипов Ну и теперь настало время оформить внешний вид кнопки на тот случай, когда пользователь захочет все-таки по ней клацнуть (но помните, это произойдет только в том случае если кнопка ему понравится wink.gif biggrin.gif). Для этого выделим последний кадр слоя с нашим текстом и еще раз нажмем F6. Произошедшие изменения уже не так пугают smile.gif Изменяем вид кнопки в 3м кадре. Теперь самое время посмотреть на то, что же у нас получилось. Для этого достаточно нажать Ctrl+Enter. Но о ужас! Кнопка у нас сошла с ума и мигает, никаким образом не реагируя на действия мыши. И правильно, потому что это не кнопка, а мувиклип, и мы еще ничего не сделали для имитации его "кнопочного поведения". Этим и займемся. Для начала создадим внутри нашего мувика еще один слой, туда будем помещать код. Слой можно и не создавать, но код при этом должен находиться в самом верхнем слое, да и путаницы будет меньше. Урок:кнопки из мувиклипов Как видим при этом был создан один кадр, заполняющий целых 3. От кадра с фоном он отличается тем, что внутри него кружок не залит черным, а белый. Это означает, что в этом слое ничего нет. Нас такой кадр полностью устраивает потому что все, что мы в нем напишем будет действовать в каждом из кадров нашей кнопки. А напишем мы немного. Выделяем любой кадр слоя для кода, жмем F9 и пишем CODE stop();//это остановит проигрывание анимации в текущем кадре, при чем если для фона это будет всего один кадр, то для слоя с текстом анимация будет останавливаться в каждом кадре. Проверим результат еще раз нажав Ctrl+Enter. Теперь наша кнопка застыла в 1м кадре намертво, но она по врежнему не реагирует на действия мыши. Пора заняться этим. Переходим на нашу основную сцену, нажав на Scene1 (ведь до этого мы редактировали наш мувиклип). Убеждаемся что все на месте. Теперь создадим еще один слой, туда и будем помещать наш основной код. Правила его расположения такие же как и внутри мувиклипа. Этот код у нас основной, сюда будем писать и любой другой код если он должен быть в сцене. Код в мувиках не должен содержать более 2х строк кода (а на объектах его не должно быть совсем!) - это удобно, упращает навигацию по написанному и считается более правильным. Итак, приступаем... Выделяем 1й кадр нового слоя, жмем F9 для того что б мы туда могли что-то написать. Но что туда писать? Мы же не знаем как обратиться к нашей будущей кнопке. Для этого выделим ее и в поле InstanceName введем ей имя, пусть это будет "button". Урок:кнопки из мувиклипов Теперь наконец-то можно писать код. Комментарии внутри Code //действие запускается при наведении мыши на кнопку this.button.onRollOver = function() {//в данном случае this обозначает основную сцену, можно было написать и _root this.gotoAndStop(2);//в данном случае this уже означает то место, на которое была сослана функция, т.е. на мувиклип button (см. строчку выше) //команда gotoAndStop(номер кадра) перемещает нас в нужный кадр выбранного мувиклипа и останавливает }; //действие запускается при нажиме левой кнопки мыши this.button.onMouseDown = function() { this.gotoAndStop(3); }; //действие запускается при "отжиме" <img src="http://s19.ucoz.net/sm/23/smile.gif" border="0" align="absmiddle" alt="smile"> левой кнопки мыши this.button.onMouseUp = function() { this.gotoAndStop(1); //сюда к примеру можно поместить и любой другой код, например код перехода на другую страницу или другой кадр вашего сайта }; //события onMouseUp и onMouseDown можно заменить и на, к примеру, onPress, но тогда кнопка будет вести себя чуть-чуть иначе. Подробней посмотреть все возможные варианты событий и опробовать их на практике можно, если выбрать Help>Flash Help>Action Script 2.0 Language Reference>ActionScript language elements>Global Functions>onClipEventHandler
//действие запускается когда мышь не располагается над нашей уже кнопкой <img src="http://s19.ucoz.net/sm/23/smile.gif" border="0" align="absmiddle" alt="smile"> this.button.onRollOut = function() { this.gotoAndStop(1); }; Урок рассчитан на совсем новичков. Причиной его создания послужило некое "устаревание" ряда имеющихся уроков по созданию кнопок+ описанный способ обеспечивает большую гибкость (и хотя это не самый лучший подход с точки зрения красоты и организованности кода, можно все это дело писаьт и в классах, но таким образом создана не одна тысяча страниц и игрушек и для про,стых задач (да и не только) он подходит на все 120%). Никакие красоты наводить не буду - главное объяснить принцип, а что там дальше каждый наваяет - его дизайн - его дело. Задача этого урока - функциональность и гибкость в оформлении. Итак, приступим. Создадим новый AS2-документ. В нем в любом месте нарисуем ту область, которая будет представлять из себя все пространство нашей кнопки. Самое простое и привычное - это прямоугольник. Рассчитывайте так, что это фон вашей будущей кнопки (в дальнейшем его можно сделать невидимым, но лучше что б он все же был). Далее выделим его Урок:кнопки из мувиклипов и сделаем из него мувиклип, нажав по нему правой кнопкой мыши и выбрав Урок:кнопки из мувиклипов И в появившемся окне ничего не меняем кроме названия символа (поле Name) , назовем его button. Теперь клацнем по нему быстро 2 раза левой кнопкой мыши, тем самым получим возможность его редактирования. Наша кнопка ведь не будет состоять только из фона, нужно туда поместить еще что-нибудь, например текст. Для большей гибкости в оформлении поместим его в отдельный слой. Для этого создадим его. Урок:кнопки из мувиклипов И в новом слое создадим текстовое поле и разместим в нем какой-нибудь текст. Если вы хотите использовать нестандартные шрифты - пока повремените, используйте шрифт, который наверняка есть у каждого пользователя по умолчанию, например Courier New Cyr, в дальнейшем мы его поменяем. Урок:кнопки из мувиклипов Ну вот, собственно кнопка у нас готова. Теперь нужно настроить ее реакцию на различные днйствия пользователя. Настраивать будем на наведение мыши на кнопку, на нажатие, ну и на уведение - это у нас уже есть. Начнем в том порядке, в котором оно обычно работает. Новый вид кнопок будем создавать в новом кадре нашего исходного мувиклипа. В нем при желании кнопку можно перерисовать полностью и от ее внешенго вида ничего не оставить, но мы поступим проще (есть другие уроки по дизайну кнопок): продублируем содержимое из 1-го кадра. Для этого выделим на таймлайне 1й кадр, в котором у нас текст и нажмем F6. Урок:кнопки из мувиклипов Что же произошло? Автоматически в слое с текстом был создан еще один кадр, куда было помещено все содержимое (т.е. текстовое поле с текстом) 1-го кадра этого слоя. Но помимо этого можно еще наблюдать и изменения в слое с нашим фоном. Визуально в нем произошло тоже самое, но значки при этом у каждого слоя разные. У слоя с текстом создана копия 1-го кадра, а у слоя с фоном, если можно так сказать, кадр остался один, но он по размеру (длительности) равен двум кадрам из слоя с текстом. Таким образом нам теперь нет необходимости создавать еще раз изображение фона. Настало время изменить внешиний вид нашей кнопки во 2м кадре. Долго мучаться над выбором изменений не будем - изменим цвет текста. Изменять можно все что угодно, в том числе и фон (ведь не обязательно делать его из одного (имеется в виду долгого) кадра!). Урок:кнопки из мувиклипов Ну и теперь настало время оформить внешний вид кнопки на тот случай, когда пользователь захочет все-таки по ней клацнуть (но помните, это произойдет только в том случае если кнопка ему понравится wink.gif biggrin.gif). Для этого выделим последний кадр слоя с нашим текстом и еще раз нажмем F6. Произошедшие изменения уже не так пугают smile.gif Изменяем вид кнопки в 3м кадре. Теперь самое время посмотреть на то, что же у нас получилось. Для этого достаточно нажать Ctrl+Enter. Но о ужас! Кнопка у нас сошла с ума и мигает, никаким образом не реагируя на действия мыши. И правильно, потому что это не кнопка, а мувиклип, и мы еще ничего не сделали для имитации его "кнопочного поведения". Этим и займемся. Для начала создадим внутри нашего мувика еще один слой, туда будем помещать код. Слой можно и не создавать, но код при этом должен находиться в самом верхнем слое, да и путаницы будет меньше. Урок:кнопки из мувиклипов Как видим при этом был создан один кадр, заполняющий целых 3. От кадра с фоном он отличается тем, что внутри него кружок не залит черным, а белый. Это означает, что в этом слое ничего нет. Нас такой кадр полностью устраивает потому что все, что мы в нем напишем будет действовать в каждом из кадров нашей кнопки. А напишем мы немного. Выделяем любой кадр слоя для кода, жмем F9 и пишем CODE stop();//это остановит проигрывание анимации в текущем кадре, при чем если для фона это будет всего один кадр, то для слоя с текстом анимация будет останавливаться в каждом кадре. Проверим результат еще раз нажав Ctrl+Enter. Теперь наша кнопка застыла в 1м кадре намертво, но она по врежнему не реагирует на действия мыши. Пора заняться этим. Переходим на нашу основную сцену, нажав на Scene1 (ведь до этого мы редактировали наш мувиклип). Убеждаемся что все на месте. Теперь создадим еще один слой, туда и будем помещать наш основной код. Правила его расположения такие же как и внутри мувиклипа. Этот код у нас основной, сюда будем писать и любой другой код если он должен быть в сцене. Код в мувиках не должен содержать более 2х строк кода (а на объектах его не должно быть совсем!) - это удобно, упращает навигацию по написанному и считается более правильным. Итак, приступаем... Выделяем 1й кадр нового слоя, жмем F9 для того что б мы туда могли что-то написать. Но что туда писать? Мы же не знаем как обратиться к нашей будущей кнопке. Для этого выделим ее и в поле InstanceName введем ей имя, пусть это будет "button". Урок:кнопки из мувиклипов Теперь наконец-то можно писать код. Комментарии внутри CODE //действие запускается при наведении мыши на кнопку this.button.onRollOver = function() {//в данном случае this обозначает основную сцену, можно было написать и _root this.gotoAndStop(2);//в данном случае this уже означает то место, на которое была сослана функция, т.е. на мувиклип button (см. строчку выше) //команда gotoAndStop(номер кадра) перемещает нас в нужный кадр выбранного мувиклипа и останавливает }; //действие запускается при нажиме левой кнопки мыши this.button.onMouseDown = function() { this.gotoAndStop(3); }; //действие запускается при "отжиме" левой кнопки мыши this.button.onMouseUp = function() { this.gotoAndStop(1); //сюда к примеру можно поместить и любой другой код, например код перехода на другую страницу или другой кадр вашего сайта }; //события onMouseUp и onMouseDown можно заменить и на, к примеру, onPress, но тогда кнопка будет вести себя чуть-чуть иначе. Подробней посмотреть все возможные варианты событий и опробовать их на практике можно, если выбрать Help>Flash Help>Action Script 2.0 Language Reference>ActionScript language elements>Global Functions>onClipEventHandler //действие запускается когда мышь не располагается над нашей уже кнопкой this.button.onRollOut = function() { this.gotoAndStop(1); }; ============================================== Небольшая сноска. Возможные варианты событий: press Левая кнопка мыши была нажата, когда курсор находился над кнопкой. release Левая кнопка мыши была отпущена, когда курсор находился над кнопкой. releaseOutside Пока курсор находится над кнопкой, левая кнопка мыши прижата, затем курсор покидает пределы кнопки и кнопка мыши отпускается. Этому событию всегда предшествуют события press и dragOut. rollOut Курсор покидает "горячую зону" кнопки. rollOver Курсор входит в "горячую зону" кнопки. dragOut Когда курсор находится над кнопкой, левая кнопка мыши прижимается и курсор уводится за границу кнопки. dragOver Когда курсор находится над кнопкой, левая кнопка мыши прижимается и курсор уводится за границу кнопки, а затем обратно. ============================================== Настало время проверить работоспособность нашей кнопки. О чудо, все работает!!! А помните я говорил о создании фона, пусть даже прозрачного? Попробуйте теперь его удалить. Что же при этом получается? А получается то, что мышкой нужно навести четко отрисованный участок текста, т.е. мышь может находиться внутри буквы О и при этом не сработает. Это аналог кадра Hit в устаревших кнопках. Немного сложнее чем использовать объекты типа Button, но зато намного гибче. Ну вот собственно и все. Осталось только оформить на свой вкус.
| | | |