В этом моем первом уроке по Flashtuts + я быстро объясню, как создать объектно-ориентированное выпадающее меню. Мы будем использовать ActionScript 3.0 и извлечем все необходимые данные из XML-файла.
Полученное меню можно использовать в любом флэш-файле без необходимости перекодирования.
Шаг 1 — Настройка пути к классам
Сначала мы настроим путь к классам. Если у вас его еще нет, это полезное место для размещения файлов ActionScript, которые вы используете в каждом проекте. Таким образом, вам не нужно копировать файлы ActionScript в папку документа fla при каждом создании нового веб-сайта или приложения.
Создайте папку для файлов ActionScripts в c :. Я создам папку c: / myActionScripts, но вы можете создать каталог где угодно и с любым именем.
Для flash CS3 перейдите в «Правка»> «Настройки». В меню категорий на панели настроек выберите «ActionScript». В правой части панели нажмите кнопку «Настройки ActionsScript 3.0 …».
Откроется другая панель (панель настроек Actionscript 3.0). Нажмите кнопку со знаком «плюс» (+) и введите «c: / myActionScripts», или где бы вы ни находились. Затем просто нажмите OK на всех открытых панелях, теперь у нас есть путь к классам.
Для flash CS4 перейдите в «Правка»> «Настройки». В меню категорий на панели настроек выберите «ActionScript». В правой части панели нажмите кнопку «Настройки ActionsScript 3.0 …».
Откроется панель «Дополнительные настройки Actionscript 3.0». В области «исходный путь» нажмите кнопку со знаком «плюс» (+) и введите c: / myActionScripts или любое другое местоположение каталога. Затем просто нажмите OK на всех открытых панелях, теперь у нас есть путь к классам.
Шаг 2 — Загрузка классов и создание папок
Перейдите по адресу http://blog.greensock.com/tweenliteas3/ и загрузите класс TweenLite ActionScript 3.0, предоставленный Джеком Дойлом. Этот класс намного лучше, чем класс Tween, встроенный в flash CS3 и flash CS4.
Когда загрузка закончится, просто распакуйте содержимое «gs» в файле .zip в c: / myActionScripts / gs, чтобы сделать класс TweenLite доступным для использования в любое время, без необходимости копировать папку gs в эквивалентную папку вашего проекта.
Также создайте папку c: / myActionScripts / dropdownmenu. Мы поместим файлы ActionScript из этого руководства здесь. Затем мы сможем использовать наш объект DropDownMenu, когда захотим, без необходимости копировать папку dropdownmenu для каждого проекта. Это преимущество использования classpath.
Шаг 3 — Создание XML-документов
Я буду использовать 5 файлов xml, один xml для основного раскрывающегося меню и другие для заполнения данных во втором раскрывающемся меню. Сохраните все xml-файлы в c: / dropdownexample / xml.
Сохраните первый XML-документ как «menu.xml» в папке «XML». Заполните его такими данными, как:
|
1
2
3
4
5
6
7
|
<?xml version=»1.0″ encoding=»utf-8″?>
<menu>
<item caption=»Company contacts» value=»xml/contactlist1.xml» />
<item caption=»Home contacts» value=»xml/contactlist2.xml» />
<item caption=»Friends» value=»xml/contactlist3.xml» />
<item caption=»School contacts» value=»xml/contactlist4.xml» />
</menu>
|
Сохраните второй XML-документ как «contactlist1.xml» в папке XML, данные следующим образом:
|
01
02
03
04
05
06
07
08
09
10
|
<?xml version=»1.0″ encoding=»utf-8″?>
<menu>
<item caption=»Director area» value=»director@company.com» />
<item caption=»Finance area» value=»finance@company.com» />
<item caption=»Designing area» value=»designing@company.com» />
<item caption=»Care area» value=»care@company.com» />
<item caption=»Print area» value=»print@company.com» />
<item caption=»Internet area» value=»internet@company.com» />
<item caption=»Knowlege area» value=»knowlege@company.com» />
</menu>
|
Сохраните третий XML-документ как «contactlist2.xml» в папке XML, данные следующим образом:
|
1
2
3
4
5
6
7
|
<?xml version=»1.0″ encoding=»utf-8″?>
<menu>
<item caption=»Mom» value=»mom@hotmail.com» />
<item caption=»Daddy» value=»daddy@gmail.com» />
<item caption=»Brother» value=»brother@live.com» />
<item caption=»Syster» value=»syster@email.com» />
</menu>
|
Сохраните другой XML-документ как «contactlist3.xml» в папке XML, данные следующим образом:
|
1
2
3
4
5
6
7
8
|
<?xml version=»1.0″ encoding=»utf-8″?>
<menu>
<item caption=»Tim» value=»tim@email.com» />
<item caption=»Sam» value=»sam@hotmail.com» />
<item caption=»David» value=»david@live.com» />
<item caption=»Julio» value=»julio@gmail.com» />
<item caption=»Lucas» value=»lucas@uol.com.br» />
</menu>
|
Наконец, создайте последний XML-документ как «contactlist4.xml», снова в папке xml со следующими данными:
|
1
2
3
4
5
6
7
8
|
<?xml version=»1.0″ encoding=»utf-8″?>
<menu>
<item caption=»Math teacher» value=»math@myschool.com» />
<item caption=»English teacher» value=»english@myschool.com» />
<item caption=»Geography teacher» value=»geography@myschool.com» />
<item caption=»History teacher» value=»hisroty@myschool.com» />
<item caption=»Fisic teacher» value=»fisic@myschool.com» />
</menu>
|
Шаг 4 — Кодирование объекта MenuItem
Теперь мы начнем кодировать объект MenuItem. Это необходимо для нашего выпадающего меню и будет создавать элементы в списке.
Начните создавать пакет, мы сохраним файл в c: / myActionScripts / dropdownmenu, чтобы пакет назывался dropdownmenu, затем мы импортируем классы, которые мы хотим использовать в этом объекте.
|
1
2
3
4
5
6
|
package dropdownmenu{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.events.*;
import gs.TweenLite;
|
Теперь создайте класс MenuItem. Поскольку мы расширяем класс Sprite, у нас будут все методы и свойства этого класса, но мы все равно добавим больше.
Обратите внимание, что мы сохраним этот файл ActionScript как «MenuItem.as» в папке выпадающего меню. Поэтому пакет имеет то же имя, что и папка, а класс — то же имя, что и файл .as.
|
1
|
public class MenuItem extends Sprite{
|
Объявите и установите переменные здесь, чтобы вы могли использовать их с любой функцией в классе. Мы установим их как частные, так что только этот класс имеет к ним доступ. Если вы объявите переменные внутри функции, только эта функция будет иметь доступ к переменной. В нашем случае мы хотим, чтобы весь класс имел доступ к переменным.
|
1
2
3
|
private var _value:String;
private var txt:TextField=new TextField();
private var txtFormat:TextFormat=new TextFormat();
|
Мы объявим следующую функцию как общедоступную, чтобы вы могли получить к ней доступ из любого места. Эта функция имеет то же имя, что и класс. Это функция конструктора и будет вызвана, когда мы создадим экземпляр этого объекта. Это будет первая функция, которая будет выполнена и будет выполняться каждый раз, когда вы создаете новый объект MenuItem. Функция конструктора всегда общедоступна.
Мы передадим значения заголовка, значения, ширины и высоты через конструктор:
|
1
|
public function MenuItem(caption:String,value:String,_width:int=200,_height:int=20):void{
|
Теперь мы установим этот класс на «buttonMode», чтобы он вел себя как кнопка, и курсор мыши будет отображаться каждый раз, когда вы наводите на него курсор мыши. Мы устанавливаем альфа на 0,8 (это будет состояние отсутствия мыши), мы объявили переменную _value раньше, вне функции, поэтому здесь мы делаем значение видимым для любой другой функции класса и уменьшаем _width, которые мы уменьшаем на 10 , поэтому пункт меню будет немного меньше.
|
1
2
3
4
|
this.buttonMode=true;
this.alpha=.8;
_value=value;
_width-=10
|
Нарисуйте черный прямоугольник для фона (это может быть любой цвет, просто измените 0x000000 на любой другой).
|
1
2
|
this.graphics.beginFill(0x000000);
this.graphics.drawRect(0,0,_width,_height);
|
Теперь мы установим объект формата текста. Он создан вне функции и будет доступен для любой функции в этом классе. Это будет заголовок нашего элемента (динамическое текстовое поле).
|
1
2
3
|
txtFormat.color=0xFFFFFF;
txtFormat.size=10;
txtFormat.font=»Verdana»;
|
Теперь мы установим формат текстового поля по умолчанию для объекта текстового формата. Мы отключим интерактивность мыши в текстовом поле, чтобы текст не был кликабельным (это работает с любым отображаемым объектом). Мы установим текст динамического текстового поля txt как переменную «caption», передаваемую через параметр конструктора. Тогда это вопрос установки позиции x и y текстового поля, его ширины и высоты. Затем мы добавляем текст в список отображения объекта MenuItem.
|
1
2
3
4
5
6
7
8
|
txt.defaultTextFormat=txtFormat;
txt.mouseEnabled=false;
txt.text=caption;
txt.x=5;
txt.y=2;
txt.width=_width-10;
txt.height=_height-4;
addChild(txt);
|
Теперь давайте добавим события. Когда мы добавим этот объект на сцену, будет вызвана функция AddedToStage. Когда мы наведем курсор мыши на объект, будет вызвана функция mouseOver. Когда мы уберем мышь из этого объекта, будет вызвана функция mouseOut. Мы также закрываем функцию конструктора с «}» в конце.
|
1
2
3
4
|
addEventListener(Event.ADDED_TO_STAGE,addedToStage);
addEventListener(MouseEvent.MOUSE_OVER,mouseOver);
addEventListener(MouseEvent.MOUSE_OUT,mouseOut);
}
|
Вставьте новую функцию здесь. Когда мышь находится над объектом, она плавно установит альфа на 1, поэтому этот объект будет отличаться от других (состояние наведения мыши).
|
1
2
3
|
private function mouseOver(e:MouseEvent):void{
new TweenLite(this,1,{alpha:1});
}
|
Когда мы вытащим мышь из объекта, альфа плавно вернется к 0,8 (состояние отсутствия мыши).
|
1
2
3
|
private function mouseOut(e:MouseEvent):void{
new TweenLite(this,1,{alpha:.8});
}
|
Когда этот объект добавляется на сцену, мы устанавливаем позицию объекта, получая его индекс в списке отображения и умножая его на его высоту. У нас есть последовательность индексов (0, 1, 2, 3), и мы будем размещать один объект над другим, а не над другим.
|
1
2
3
|
private function addedToStage(e:Event):void{
this.y=this.parent.getChildIndex(this)*this.height;
}
|
Функция «get» является свойством, она работает как переменная, но доступна только для чтения. Вы не можете установить эти значения вне этого класса, но вы можете прочитать их. Они возвращают значение переменных или текстовых полей, которые недоступны вне класса.
|
1
2
|
public function get caption():String{ return txt.text;
public function get value():String{ return _value;
|
Теперь закройте класс и пакет, который мы открыли в начале файла. Сохраните его как «MenuItem.as» в c: / myActionScripts / dropdownmenu, файл должен быть расположен в c: /myActionScripts/dropdownmenu/MenuItem.as
|
1
2
|
}
}
|
Шаг 5 — Создайте пользовательское событие
Теперь мы создадим пользовательское событие для этого класса. Когда мы изменим пункт меню, мы получим значение через это событие.
Запустите пакет, импортируйте Event и создайте класс, расширяющий класс Event. Теперь у нас есть новый класс Event, который мы будем называть «DropDownMenuEvent».
|
1
2
3
|
package dropdownmenu{
import flash.events.Event;
public class DropDownMenuEvent extends Event{
|
Статические переменные, функции или константы могут быть доступны без необходимости создания экземпляра объекта. Вам не нужно использовать новый оператор, вы можете просто получить к нему доступ с помощью: DropDownMenuEvent.CHANGE
Const являются константами. Как только вы установили значение const, его значение не может быть изменено. Вы можете использовать строчные буквы для именования констант, но по умолчанию почти все используют прописные для констант, и мы не будем делать ничего другого.
|
1
|
public static const CHANGE:String=»change»;
|
Создайте экземпляры этих объектов String прямо здесь, чтобы обеспечить доступ из любой точки этого класса.
|
1
2
|
private var _caption:String;
private var _value:String;
|
Теперь создайте функцию конструктора. Супер (тип) должен установить этот класс как суперкласс.
|
1
2
3
4
5
|
public function DropDownMenuEvent(type:String,caption:String,value:String):void{
super(type);
_caption=caption;
_value=value;
}
|
Теперь создайте функции-получатели класса, чтобы получить значения только для чтения. Я уже объяснил, как работает функция получения.
|
1
2
|
public function get caption():String{ return _caption;
public function get value():String{ return _value;
|
Закройте пакет и класс с помощью «}» и сохраните как c: /myActionScripts/dropdownmenu/DropDownMenuEvent.as
|
1
2
|
}
}
|
Шаг 6 — Создайте объект DropDownMenu
Я сохранил этот объект напоследок, потому что он более сложный. Кроме того, он не будет работать без 2 классов, созданных выше.
Эта часть уже хорошо объяснена; мы определим пакет, импортируем все классы, которые будем использовать, создадим класс, расширяющий Sprite, установим переменные вне функций для использования с любой другой функцией этого класса, затем запустим функцию конструктора. Здесь нет ничего нового.
Мне также не нужно повторять, что класс, конструктор и имя файла совпадают.
Функция конструктора имеет все предварительно определенные параметры, поэтому мы можем выбирать, передавать или нет параметры. Мы могли бы передать только первый параметр, или первый и второй, или первый, второй и третий. Мы также можем передать первый параметр как ноль, так что это будет то же значение, что и предопределенное значение в конструкторе.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
package dropdownmenu{
import flash.display.Sprite;
import flash.display.Shape;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.xml.*;
import flash.events.*;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.geom.Matrix;
import flash.display.SimpleButton;
import gs.TweenLite;
public class DropDownMenu extends Sprite{
private var container:Sprite=new Sprite();
private var req:URLRequest=new URLRequest();
private var loader:URLLoader=new URLLoader();
private var txt:TextField=new TextField();
private var txtFormat:TextFormat=new TextFormat();
private var button:SimpleButton=new SimpleButton();
private var _value:String;
public function DropDownMenu(url:String=null,_width:int=200,_height:int=30):void{
|
Контейнер является спрайтом, созданным выше вне любой функции для всего класса, имеющего доступ. Мы поместим все пункты меню внутри контейнера; установите для свойства y значение параметра _height. Контейнер будет невидим для начала (альфа = 0), поэтому его нельзя щелкнуть. Даже если бы он был виден, альфа по-прежнему равна 0, поэтому он пока не будет отображаться.
|
1
2
3
4
|
container.y=_height;
container.alpha=0;
container.visible=false;
addChild(container);
|
Создайте фон и добавьте к объекту. DrawObject — это функция, которая возвращает Shape, мы увидим это чуть позже.
|
1
2
|
var bg:Shape=drawObject(_width,_height);
addChild(bg);
|
Опять же, мы устанавливаем свойства объекта textFormat и устанавливаем свойство defaultTextFormat объекта txt как объект textFormat. Мы отключаем интерактивность с помощью мыши, устанавливаем текст по умолчанию, пока xml еще не загружен, и добавляем текстовый текст txt в этот список отображения объектов. Все эти действия были замечены ранее, поэтому им не нужно слишком много объяснений.
|
01
02
03
04
05
06
07
08
09
10
11
|
txtFormat.bold=true;
txtFormat.size=15;
txtFormat.font=»Verdana»;
txt.defaultTextFormat=txtFormat;
txt.x=5;
txt.y=3;
txt.width=_width-10;
txt.height=_height-6;
txt.mouseEnabled=false;
txt.text=»XML not loaded»;
addChild(txt);
|
Кнопка, созданная вне функции, доступна из любого места в этом классе. Мы устанавливаем новый Shape для hitTestState, затем добавляем событие. При нажатии он вызовет функцию «открыть». Затем мы добавляем кнопку в список отображения этого объекта.
|
1
2
3
|
button.hitTestState=drawObject(_width,_height);
button.addEventListener(MouseEvent.CLICK,open);
addChild(button);
|
Теперь добавьте слушателей событий. Один для загрузчика, когда загрузчик полностью завершил загрузку XML-документа. Это вызовет функцию loaderComplete или, если загрузчик не найдет документ XML, он вызовет функцию loaderIOError.
Этот класс при добавлении на сцену вызовет функцию AddedToStage. При удалении со сцены вызывается функция removeFromStage.
|
1
2
3
4
|
loader.addEventListener(Event.COMPLETE,loaderComplete);
loader.addEventListener(IOErrorEvent.IO_ERROR,loaderIOError);
addEventListener(Event.ADDED_TO_STAGE,addedToStage);
addEventListener(Event.REMOVED_FROM_STAGE,removedFromStage);
|
Здесь мы проверяем, было ли передано значение, отличное от null, в url param конструктора. Если это так, мы установим url (private var url: URLRequest = new URLRequest ()) и вызовем функцию load. Закройте функцию конструктора с помощью «}»
|
1
2
|
if(url) load(url);
}
|
Так как функция загрузки общедоступна, она позволяет вам загружать xml где угодно вне или внутри этого класса. Сначала эта функция удалит все пункты меню внутри контейнера. Если такой существует, он начнет загружать документ XML.
|
1
2
3
4
5
6
7
8
|
public function load(url:String):void{
txt.text=»Loading»;
_value=null;
var total:int=container.numChildren;
for(var i:int=0;i<total;i++){ container.removeChildAt(0);
req.url=url;
loader.load(req);
}
|
Эта функция будет вызываться при нажатии кнопки. Он проверит, равна ли альфа контейнера нулю. Если это так, он установит видимость контейнера в значение true, альфа в 0 и плавно установит альфа контейнера в 1. Если альфа контейнера уже больше 0, он вызовет функцию close.
|
1
2
3
4
5
6
7
8
|
private function open(e:MouseEvent):void{
if(container.alpha==0){
container.visible=true;
container.alpha=0;
new TweenLite(container,.5,{alpha:1});
}
else{ close();
}
|
Функция закрытия будет вызываться, когда вы щелкаете в любом месте, потому что мы добавим событие на сцену, когда мышь нажата. Эта функция проверяет, больше ли альфа контейнера, чем 0. Если это так, она плавно установит альфа контейнера на 0. По завершении она вызовет функцию hideContainer (), которая устанавливает видимость контейнера в false (невидимый и не щелкающий).
Мы добавим на сцену событие MouseEvent.MOUSE_DOWN, поэтому функция stageMouseDown.
|
1
2
3
4
5
6
|
private function close():void{
if(container.alpha>0) new TweenLite(container,.5,{alpha:0,onComplete:hideContainer});
}
private function hideContainer():void{ container.visible=false;
private function stageMouseDown(e:MouseEvent):void{ this.close();
private function stageMouseLeave(e:Event):void{ this.close();
|
loaderIOError будет вызван, если функция загрузки загрузчика не найдет документ XML и установит заголовок «XML not found».
AddToStage будет вызываться, когда этот объект добавляется в список отображения этапа. Он добавит событие, когда вы щелкаете в любом месте сцены, чтобы вызвать функцию stageMouseDow.
RemoveFromStage будет вызываться, когда этот объект удаляется со сцены. Он удаляет событие со сцены, поэтому щелчки по сцене больше не будут вызывать функцию stageMouseDown.
Когда мышь покинет сцену, мы также закроем выпадающее меню.
|
1
2
3
4
5
6
7
8
9
|
private function loaderIOError(e:IOErrorEvent):void{ txt.text=»XML not found»;
private function addedToStage(e:Event):void{
stage.addEventListener(MouseEvent.MOUSE_DOWN,stageMouseDown);
stage.addEventListener(Event.MOUSE_LEAVE,stageMouseLeave);
}
private function removedFromStage(e:Event):void{
stage.removeEventListener(MouseEvent.MOUSE_DOWN,stageMouseDown);
stage.removeEventListener(Event.MOUSE_LEAVE,stageMouseLeave);
}
|
Функция loaderComplete вызывается, когда xml полностью загружен, она будет работать так:
- Установите текст по умолчанию для объекта txt на «Выбрать», а значение на ноль, чтобы у нас не было значения, а заголовок по умолчанию — просто «Выбрать»
- Создать новый экземпляр XML
- Проверьте общее количество узлов, имеющих тег <item> в документе xml, и вставьте их в переменную «total».
- Циклические значения документа xml, получение их заголовка и свойств значения. Свойства в xml получают @property, а значение узла просто .node без @.
- Создайте новый объект MenuItem с экземпляром menuItem, передав заголовок и значение конструктору MenuItem.
- Добавьте событие в menuItem, при щелчке оно вызовет функцию menuItemClick.
- Добавьте только что созданный элемент меню в список отображения контейнера.
- Установите позицию x контейнера в центр объекта DropDownMenu, используя некоторые вычисления.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
private function loaderComplete(e:Event):void{
txt.text=»Select»;
_value=null;
var xml:XML=XML(e.target.data);
var total:int=xml.item.length();
var _w:int=this.width;
var _h:int=this.height;
for(var i=0;i<total;i++){
var caption:String=xml.item[i].@caption;
var swf:String=xml.item[i].@value;
var menuItem:MenuItem=new MenuItem(caption,swf,_w,_h);
menuItem.addEventListener(MouseEvent.CLICK,menuItemClick);
container.addChild(menuItem);
}
container.x=(this.width-container.width)*.5;
}
|
Функция menuItemClick будет вызываться при щелчке по любому объекту пункта меню, параметр currentTarget будет получать объект, по которому щелкнули.
Мы сравниваем фактическое значение DropDownMenu Object со значением выбранного элемента меню и сравниваем текущий текст текстового поля txt с заголовком пункта меню. Если есть какое-либо различие в значении, функция отправит новый DropDownMenuEvent, передав новый заголовок и новое значение.
|
1
2
3
4
5
6
7
|
private function menuItemClick(e:MouseEvent):void{
if(e.currentTarget.value!=_value && e.currentTarget.caption!=txt.text){
dispatchEvent(new DropDownMenuEvent(DropDownMenuEvent.CHANGE,e.currentTarget.caption,e.currentTarget.value));
_value=e.currentTarget.value;
txt.text=e.currentTarget.caption;
}
}
|
Это функция, которую мы использовали для создания фона и состояния нажатия кнопки. В функции конструктора эта функция возвращает новый объект Shape.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
private function drawObject(_width:int,_height:int):Shape{
var newShape=new Shape();
var colours=[0xA6A6A6,0x515151];
var alphas=[1,1];
var ratios=[0,255];
var radians:Number=90*(Math.PI/180);
var matrix:Matrix=new Matrix();
matrix.createGradientBox(_width,_height,radians);
newShape.graphics.beginGradientFill(GradientType.LINEAR,colours,alphas,ratios,matrix);
newShape.graphics.drawRoundRect(0,0,_width,_height,5,5);
return newShape;
}
|
Мы создаем 2 свойства только для чтения: одно для получения заголовка, а другое для получения значения этого объекта. Эти 2 свойства будут видны вне класса, но не могут быть изменены вне класса, только для чтения.
Используйте 2x «}», чтобы закрыть пакет и класс.
|
1
2
3
4
|
public function get caption():String{ return txt.text;
public function get value():String{ return _value;
}
}
|
Теперь сохраните этот файл как c: /myActionScripts/dropdownmenu/DropDownMenu.as. У нас есть 3 файла в c: / myActionScripts / dropdownmenu:
- DropDownMenu.as
- MenuItem.as
- DropDownMenuEvent.as
Теперь у нас есть пакет dropdownmenu с 3 классами.
Шаг 7 — .fla и класс документа
Во Flash перейдите в «Файл»> «Создать».
Выберите файл Flash (ActionScript 3.0) и нажмите кнопку «ОК».
Затем перейдите в Окно> Свойства. Откроется панель свойств
На панели свойств введите «Main» в текстовом поле «Class» (без «Surround») и сохраните файл .fla в файле c: /dropdownexample/dropdown.fla (помните, что у нас уже есть папка c: / dropdownexample с папкой xml внутри). ,
Шаг 8 — Кодирование основного класса документа
Создайте новый документ с файлом ActionScript («Файл»> «Создать»> «Файл ActionScript»).
Мы сохраним документ в той же папке, что и документ .fla, с именем Main.as. Этот класс принадлежит пакету TopLevel, поэтому его пакет — просто пакет …
Мы импортируем необходимые классы. Обратите внимание, что мы импортируем весь пакет dropdownmenu, поэтому три файла, созданные выше (DropDownMenu, DropDownMenuEvent и MenuItem), будут импортированы в класс Main.
|
1
|
package{ import flash.display.Sprite;
|
Внимание, мы создаем 2 выпадающих меню; первое раскрывающееся меню выберет новый XML-документ и заставит второе раскрывающееся меню загрузить выбранное значение.
Первый параметр, если не ноль, автоматически загрузит документ XML при создании этого объекта. Второй параметр — это ширина выпадающего меню. Мы не передали третий параметр; высота выпадающего меню, но мы устанавливаем значение по умолчанию 30, что, я думаю, является хорошей высотой.
Первое выпадающее меню автоматически загрузит XML-файл с именем menu.xml в папку XML, второе загрузит XML-файл только тогда, когда мы используем функцию загрузки.
|
1
|
private var d1:DropDownMenu=new DropDownMenu(«xml/menu.xml»,150);
|
Мы создаем конструктор. Поскольку этот класс является классом документа, функция будет вызываться, когда мы компилируем файл .swf и каждый раз, когда открываем также файл .swf. Мы добавляем два выпадающих меню, которые мы создали, устанавливаем положение x обоих, а затем устанавливаем для них одинаковое значение y. Добавьте слушатели событий в оба выпадающих меню, когда мы изменим значение, которое будем вызывать для слушателей.
|
1
|
public function Main():void{ addChild(d1);
|
Это слушатель выпадающего меню 1. Когда значение d1 изменяется, оно загружает свое значение в выпадающее меню d2.
|
1
|
private function d1Change(e:DropDownMenuEvent):void{ d2.load(e.value);
|
Это просто для проверки второго выпадающего меню, но вы можете получить значения выпадающего меню, получив instance.value, и получить заголовки выпадающего меню, получив instance.caption.
|
1
2
|
private function d2Change(e:DropDownMenuEvent):void{ trace(e.caption+» = «+e.value);
//or trace(d2.caption+» = «+e.value);
|
Закройте пакет и класс с помощью 2x «}»
|
1
2
|
}
}
|
Теперь у нас есть класс Main для тестирования нашей работы, просто сохраните в c: /dropdowexample/Main.as и скомпилируйте документ dropdown.fla. Проверьте его во флэш-памяти, чтобы трассировка работала.
Подпись и значения могут, конечно, быть любыми.
Вывод
Классы немного большие, но они правильно закодированы, не имеют ошибок, и вы можете использовать их в любое время, просто импортировав пакет dropdownmenu и создав объекты DropDownMenu. Классы и класс Document являются самой большой разницей между ActionScript 2.0 и 3.0. Любой, кто научится работать с файлами ActionScript и научится использовать путь к классам, найдет его намного лучше, чем использование временной шкалы для кодирования.
Вот и все пока!