Системные требования: Adobe Flash CS3 или CS4
Основная цель данного урока – объединить несколько файлов в один Flash проект.
Создание экземпляра компонента List и настройка его параметров
Компонент List позволяет создавать список объектов, из которых пользователь может выбрать один. У компонента List есть параметры, позволяющие добавить подписи и ассоциировать данные с элементами списка.
1. На временной шкале над слоем buttons добавьте новый слой и назовите его components.
2. Выберите кадр 50(с меткой home) на новом слое и добавьте ключевой кадр.
3. Откройте панель Components (Window->Components).
4. На панели Components откройте группу User Interface, выберите компонент List и перетащите его на сцену.
5. Выделите компонент List на сцене и назовите его loadList на панели Properties.
6. На панели Properties задайте следующие значения свойств List:
X = 30
Y = 150
W = 140
H = 160
7. Не снимая выделения с компонента List откройте панель Component Inspector.
8. Выделите параметр dataProvider(источник данных), а затем щелкните по значку лупы. После этого откроется окно позволяющее заполнить списо'e1авьте 3 элемента в список.
10. Введите следующие значения:
label: Instruments
data: instruments.swf
label: Gallery
data: gallery.swf
label: Paint
data: paint.swf
11. Нажмите кнопку OK, чтобы выйти из диалогового окна Values.
Добавление экземпляра компонента UILoader
1. Выберите кадр 50 на слое components и откройте панель Components.
2. Выберите компонент UILoader в группе User Interface и перетащите его на сцену.
3. Присвойте выбранному на сцене экземпляру UILoader имя loadWindow на панели Properties.
4. Также на панели Properties установите следующие значения для экземпляра UILoader: X = 200, Y = 135, W = 550, H = 400.
В данный экземпляр будет загружено несколько роликов с размером сцены 550 х 400.
Добавление слушателя события CHANGE в компонент List
1. На слое actions выберите кадр 50 (home) и в панели Actions напишите следующий код после имеющегося кода в этом кадре:
- Код: Выделить всё
loadList.addEventListener(Event.CHANGE, loadFile);
function loadFile(e:Event):void {
}
Данный код уже должен быть вам знаком по предыдущим урокам.
Загрузка файлов SWF в компонент UILoader
Вы можете с помощью ActionScript загрузить в компонент UILoader любой файл SWF, JPG, PNG или GIF, код будет выглядеть так:
- Код: Выделить всё
loadWindow.source = “abc.swf”;
В данном уроке нам надо написать функцию, которая будет определять, что необходимо загрузить, используя хранящиеся в списке данные.
1. В функции loadFile() добавьте следующий код между фигурными скобками:
- Код: Выделить всё
function loadFile(e:Event):void {
loadWindow.source = e.target.selectedItem.data;
}
e.target – это список;
selectedItem – элемент списка, который выбрал пользователь;
data – данные, которые были присвоены данному элементу списка.
2. Сохраните и протестируйте ролик. Нажмите на разные пункты в списке. Все пункты в списке должны работать кроме пункта Gallery.
Формирование файла с галереей
Сейчас мы перейдем к файлу с галереей и сначала более подробно его рассмотрим.
1. Откройте файл gallery.fla
2. Обратите внимание, что в файле есть экземпляр компонента UILoader. Название этого экземпляра – ldr.
3. Обратите внимание, что в слое text есть динамическое текстовое поле, которое называется info.
4. Также обратите внимание, что клип с миниатюрами называется thumbs_mc, а каждая миниатюра имеет название типа: thumbs_mc.btn1,
thumbs_mc.btn2 и т.д.
Добавление слушателей событий для миниатюр
1. Выделите первый кадр на слое Actions и добавьте в панель Actions следующий код:
- Код: Выделить всё
thumbs_mc.btn1.addEventListener(MouseEvent.CLICK, ldr1);
thumbs_mc.btn2.addEventListener(MouseEvent.CLICK, ldr2);
thumbs_mc.btn3.addEventListener(MouseEvent.CLICK, ldr3);
thumbs_mc.btn4.addEventListener(MouseEvent.CLICK, ldr4);
thumbs_mc.btn5.addEventListener(MouseEvent.CLICK, ldr5);
thumbs_mc.btn6.addEventListener(MouseEvent.CLICK, ldr6);
thumbs_mc.btn7.addEventListener(MouseEvent.CLICK, ldr7);
2. Далее напишите следующий код.
- Код: Выделить всё
function ldr1(e:Event) {
ldr.source = "../images/image1.jpg";
}
При щелчке на кнопку в компонент UILoader таким образом будет подгружено изображение image1.jpg.
3. Добавьте в функцию ещё одну строку, чтобы она выглядела так:
- Код: Выделить всё
function ldr1(e:Event) {
ldr.source = "../images/image1.jpg";
textLoad("../text/picture1.txt", 0xAAFFAA);
}
Строка, которую вы только что написали будет добавлять в текстовое поле текст из внешнего файла.
4. Теперь создадим аналогичный код для оставшихся шести кнопок:
- Код: Выделить всё
function ldr2(e:Event) {
ldr.source = "../images/image2.jpg";
textLoad("../text/picture2.txt", 0xCCCCEE);
}
function ldr3(e:Event) {
ldr.source = "../images/image3.jpg";
textLoad("../text/picture3.txt", 0xCCEECC);
}
function ldr4(e:Event) {
ldr.source = "../images/image4.jpg";
textLoad("../text/picture4.txt", 0xFFCCCC);
}
function ldr5(e:Event) {
ldr.source = "../images/image5.jpg";
textLoad("../text/picture5.txt", 0x99BBFF);
}
function ldr6(e:Event) {
ldr.source = "../images/image6.jpg";
textLoad("../text/picture6.txt", 0xBBFFCC);
}
function ldr7(e:Event) {
ldr.source = "../images/image7.jpg";
textLoad("../text/picture7.txt", 0xCDEFED);
}
Загрузка текста из внешнего файла
При загрузки изображений мы использовали компонент UILoader, который сам загружал изображения. Поэтому для текста нам прийдется написать код ActionScript для подгрузки текста.
1. На панели Actions создайте под существующим кодом новый экземпляр URLoader:
var loader:URLLoader = new URLLoader();
Далее создадим функцию textLoad() для загрузки внешних файлов с текстом.
2. Добавьте следующий код:
- Код: Выделить всё
function textLoad(file:String, color:uint) {
loader.load(new URLRequest(file));
info.backgroundColor = color;
}
Определение с помощью события COMPLETE окончания загрузки текстового файла
Сейчас мы реализуем создадим слушатель события COMPLETE, чтобы определить, когда данные будут успешно загружены.
1. Под существующим кодом добавьте следующий код:
- Код: Выделить всё
loader.addEventListener(Event.COMPLETE, displayText);
function displayText(e:Event) {
info.text = (loader.data); }
Когда объект loader завершит загрузку одного из текстовых файлов, он отобразит этот текст в экземпляре текстового поля.
2. Добавьте выделенные строки в функцию:
- Код: Выделить всё
loader.addEventListener(Event.COMPLETE, displayText);
function displayText(e:Event) {
info.text = (loader.data);
[b]info.background = true;
info.border = true;
info.borderColor = 0x333333[/b];
}
Добавление полосы прокрутки в текстовое поле
1. Выберите на сцене текстовое поле.
2. В меню Text(Текст) выберите Scrollable(Прокручиваемый).
3. Откройте панель Components и выберите компонент UIScrollbar из списка компонентов User Interface.
4. Перетащите компонент на сцену, чтобы он располагался справа от верхнего левого угла текстового поля.
5. Откройте Component Inspector при выделенном компоненте и выберите параметр scrollTargetName, присвойте ему значение info.
6. Сохраните и протестируйте ролик. При щелчке на кнопке миниатюра будет загружаться в UILoader, а в поле info будет появляться текст.
7. Протестируйте ролик lesson05_start.fla. Теперь при щелчке на кнопке Gallery будет подгружаться файл с галереей.
Самостоятельные задания:
1. Создайте ролик Flash и добавьте его в список для загрузки.
2. Добавьте свои файлы в галерею.
3. Поэкспериментируйте сдругими компонентами из списка.
