То, как вы подходите к проблеме, является в некоторой степени вашим ключом к выполнению хорошей солидной работы. Это пошаговое руководство познакомит вас с шестью наиболее часто используемыми методами создания кнопок и покажет, в каких ситуациях их лучше всего использовать.
Дилемма создания кнопки
Позвольте мне рассказать вам небольшую историю о том, как начался весь этот конфликт взаимодействия кнопок. Однажды Адам и Ева были в Эдемском саду.
АДАМ: Эй, Ева, ты сегодня выглядишь иначе, что не так?
ЕВА: Я очень хочу пить, и у нас больше нет пресной воды.
АДАМ: Оставайся здесь.
Адам подошел к ближайшему торговому автомату, увидел коробку с яблочным соком, запомнил ее номер, вставил монету и нажал кнопку ! Ничего не произошло. Была ошибка.
Видите ли, Адам начал событие, которое должно было вызвать действие. К счастью, будучи опытным программистом на ActionScript, он подключил свой USB-компилятор ActionScript к программному разъему USB ActionScript торгового автомата и начал отлаживать код.
На сцене у него была фигура, похожая на кнопку, и ничего больше. Кто-то забыл сделать код. Теперь он должен был найти наиболее подходящий метод для решения этой проблемы и кодировать его путь к коробке сока.
Метод старой школы
Когда вы впервые открываете Flash 5, вам предлагается просмотреть несколько учебных пособий, если хотите. Один из этих руководств научит вас, как сделать простое взаимодействие с кнопками, и по большей части вашего ActionScript 1 и начала 2 вы будете следовать по этому пути.
Это работает примерно так:
- Создайте символ кнопки.
- Внутри символа установите состояния, которые вы хотите, чтобы кнопка имела.
- Перейдите на график, где вы положили кнопку, щелкните, чтобы выбрать ее, откройте действия и напишите:
|
1
2
3
|
on(press){
trace(«hihi that tickles»);
}
|
Хотя это больше не является стандартной практикой, я знаю много дизайнеров, которые все еще используют этот метод. Это все еще весьма полезно, если вы находитесь в сжатые сроки, вы работаете над баннером, ограниченным Flash Player 5 или ниже (да, в настоящее время все еще существуют ограничения такого рода), и вам приходится полагаться на дизайнера для создания и анимации баннер. В конце концов, все, что вам нужно, это кнопка clickTag.
Примечание. ClickTag — это переменная, которую хост объявлений вставляет в объект swf через html. Он содержит URL, по которому должен перемещаться баннер. Проверьте Виктор Джексон Tut Tut для получения дополнительной информации.
Загрузите пример 1, чтобы увидеть этот метод в действии.
Если бы я мог просто сказать цель …
Позже в вашей жизни ActionScript, когда появился 2.0, появилась также возможность связывать функции с событиями внутри объектов MovieClip. Используя этот метод, вы можете создать свою собственную кнопку на основе фрагмента ролика, и лучше всего то, что весь ваш код может храниться в одном месте. Это очень полезно для меню, очень жаль, что оно было доступно только во Flash Player 6.
Вот как выглядит этот рабочий процесс.
- Создайте символ мувиклипа.
- Для состояний вы можете делать все, что захотите: вы можете добавлять ключевые кадры, вы можете создавать разные видеоклипы, вы можете преобразовывать их в цвете, это зависит от вас, поскольку вы будете иметь полный контроль над событиями.
- Дайте мувиклипу, вы создали имя экземпляра, я назвал мой «myMovieClip».
- Поместите мувиклип на сцену и в том же ключевом кадре (другой слой) добавьте следующие строки кода:
|
01
02
03
04
05
06
07
08
09
10
11
|
myMovieclip.onRollOver = function(){
trace(«hihi, that tickles»);
}
myMovieclip.onPress = function(){
trace(«hihi, that tickles too»);
}
myMovieclip.onRollOut = function(){
trace(«ouch, now that hurts!!»);
}
|
Если у вас есть ограничение на использование плеера до версии 8 или вы не привыкли к AS3, и вы создаете что-то с небольшим взаимодействием, это путь.
Загрузите пример 2, чтобы увидеть этот метод в действии.
Вы можете на самом деле делегировать
Для более сложных моделей, где структура включает в себя, например, вложенные мувиклипы, вы можете фактически делегировать функции и установить новую область действия для функции. Это может показаться странным, поэтому просто проверьте разницу ниже.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
//Regular code
myMovieclip.stop_bt.onPress = function(){
this._parent.myAnimation.stop();
};
myMovieclip.play_bt.onPress = function(){
this._parent.myAnimation.play();
};
//Delegate
import mx.utils.Delegate;
myMovieclip.onPlayClick = function() {
this.myAnimation.play();
};
myMovieclip.onStopClick = function() {
this.myAnimation.stop();
};
myMovieclip.play_bt.onPress = Delegate.create(myMovieclip, myMovieclip.onPlayClick);
myMovieclip.stop_bt.onPress = Delegate.create(myMovieclip, myMovieclip.onStopClick);
|
Как вы можете видеть, нет необходимости вызывать родителя, я могу просто переназначить объект. Это довольно простой пример, но вы можете увидеть, как это может пригодиться в более сложной ситуации.
Загрузите пример 3, чтобы увидеть этот метод в действии.
3.0
Это все очень красиво, но если у вас нет никаких ограничений относительно версии проигрывателя, вы должны игнорировать все вышеперечисленные шаги и сосредоточиться на ActionScript 3.0. Если вы не чувствуете себя комфортно с языком, это не оправдание, вы никогда не будете чувствовать себя комфортно с чем-либо, если не будете его использовать. После нескольких часов понимания синтаксиса и нескольких дней с таблицей AS2-AS3 рядом с вами, вы будете чувствовать себя как дома. Он не обязательно должен быть полностью основан на классах ООП, если вы привыкли программировать временную шкалу, вы можете продолжать делать это. Flash IDE создаст класс MainTimeline, как только вы экспортируете фильм.
Просто напишите это в первом кадре вашего FLA, подумайте, что у вас есть символ мувиклипа на этом ключевом кадре (хотя и в другом слое, просто чтобы помочь организации) с экземпляром myMovieClip.
|
1
2
3
4
5
|
myMovieClip.addEventListener(MouseEvent.CLICK,onClickHandler)
function onClickHandler(e){
trace(«I said that tickles!! NOW STOP!»);
}
|
Есть несколько недостатков использования этого метода:
- Рассеянный код , например, когда у нас на сцене слишком много символов и мы теряем отслеживание того, где находится код для определенного объекта
- Повторное использование кода — нет-нет. Единственный способ повторного использования чего-либо — копирование-вставка, и это немного неубедительно, не так ли?
Но я должен признать, я использую этот метод слишком часто. Главным образом для удобства, но я сожалею об этом большую часть времени. Мой совет — программировать на временной шкале только с помощью баннерной рекламы и небольших простых мини / микро сайтов. Даже в этих случаях вы можете импортировать класс слайдера, класс слайд-шоу, класс анимации, класс снегопада и т. Д., Которые вы создадите специально для этого проекта.
Загрузите пример 4, чтобы увидеть этот метод в действии.
Полностью структурированное объектно-ориентированное программирование
Давайте сделаем то же самое с подходом полного ООП. Допустим, дизайнер создал файл Flash и оставил графику на сцене, вот что нужно сделать.
В Flash IDE преобразуйте изображение в символ и присвойте ему имя экземпляра. В новый файл AS с именем Main.as напишите следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.MouseEvent;
public class Main extends Sprite{
private var myMovieClip:MovieClip;
public function Main():void{
myMovieClip.addEventListener(MouseEvent.CLICK,onClickHandler);
}
private function onClickHandler(e:MouseEvent):void{
trace(«that’s the spot…»);
}
}
}
|
Вероятно, метод, который вызывает кошмары у новичков в мире AS3 и ООП, и, вероятно, лучший метод для легких и очень сложных проектов Flash.
Посмотрите на это как на временное программирование с несколькими дополнительными символами, которые помогут вам создать надежный, многократно используемый код. Вы всегда будете знать, где это, облегчая чтение и понимание своей работы.
Загрузите пример 5, чтобы увидеть этот метод в действии.
Примечание. Если дизайн кнопки достаточно прост, мы могли бы встроить его в класс, не нуждаясь в Flash IDE и его необычных инструментах дизайна. В большинстве случаев это просто не практично.
Затем «Бог» создал компонент кнопки
Возвращаясь к основному сюжету, Адам случайно удалил фигуру, созданную кем-то в качестве кнопки, и, поскольку он не знал, как использовать инструмент прямоугольника, чтобы нарисовать новую кнопку, он выбрал маршрут компонента. Вот как он это сделал.
- Он добавил компонент Button в библиотеку.
- Он сохранил свой код как MyButton.as в том же каталоге, что и его FLA-файл.
- Он установил класс документа в FLA-файле на MyButton.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
package
{
import fl.controls.Button;
import flash.display.Sprite;
import flash.events.MouseEvent;
public class MyButton extends Sprite
{
private var b1:Button;
public function MyButton () {
setupButtons();
}
private function setupButtons():void {
b1 = new Button();
b1.width = 160;
b1.move(10,10);
b1.label = «Apple Juice»;
b1.addEventListener(MouseEvent.CLICK, buttonClick);
addChild(b1);
}
private function buttonClick(e:MouseEvent) {
var button:Button = e.target as Button;
trace(button.label + » tickles»);
}
}
}
|
Когда это использовать? Если вы планируете создать пользовательский интерфейс для многофункционального интернет-приложения, и вместо использования Flex вы хотите попробовать Flash, то это способ сделать это. (Мой совет — использовать Flash Builder), или если вам нужен простой пользовательский интерфейс для любой формы, которую вы создаете, которая не требует больших дизайнерских работ. Конечно, вы можете настроить компонент кнопки, но это занимает слишком много времени по сравнению с созданием кнопки с нуля.
Загрузите пример 6, чтобы увидеть этот метод в действии.
Вывод
В конечном итоге решение остается за вами. Я перечислил методы, которые я узнал и использовал на протяжении всей моей карьеры в области разработки Flash, и здесь приведены мнения, которые я осознал, работая над различными проектами.
Если вы чувствуете себя комфортно с вашим методом создания кнопок и чувствуете, что он вам подходит, то это нормально, если он работает, но в конечном итоге вы поймете, почему структурированный ActionScript с ООП — это лучшая практика. Не потому, что это странно, а потому, что на самом деле легче писать, читать и, следовательно, понимать.
Спасибо за чтение, надеюсь, вам понравилось, и хорошего 2010 года!
Примечание: Адаму удалось достать коробку с яблочным соком, которую он дал Еве. Остальная часть сказки, вы, наверное, знаете ..