75 уроков по Photoshop на русском языке

         

Создаем полосу прокрутки в Flash МХ

Автор: Вера Фляйшнер
verafleischer@usa.net

Введение

В этом уроке я расскажу, как создать полосу прокрутки в Flash МХ. Она похожа на ту, что идет в комплекте с Flash МХ, но я решила создать свой собственный вариант. Я увереннее чувствую себя, когда работаю со своими кодами, а не с чьими-то. Полоса, созданная мной, не может автоматически определить свою высоту. Но она более гибкая и имеет меньший файловый размер.

Итак, начнем.

Текстовое поле и полоса прокрутки

Создайте новый файл.

В корневом каталоге сцены 1 добавьте два слоя. Назовите верхний слой "functions" (функции), следующий - "actions" (действия). Чуть позже мы допишем код.

В нижнем слое создайте динамическое текстовое поле. Установите желаемый шрифт и цвет. Желательно, чтобы было видно сразу 5-6 строчек. В нашем примере отображается не больше 6 строк. Убедитесь, что в параметрах текста "multiline" (многострочный) выбрано, а "selectable" (возможность выделения) - нет. Дайте имя текстовому полю, например "w_field".

Кликните на "Character..." (текст) и выберите нужные установки символов.
В главном клипе выделите текстовое поле и преобразуйте его в символ (для этого нажмите F8).

Выберите клип, дайте символу имя "main_mc", элементу (instance) - имя "main".

Теперь зайдите в "main_mc" и переименуйте слой с текстовым полем в "text".
Теперь добавьте несколько слоев, снизу вверх: "labels" (ярлыки), "actions" (действия), "functions" (функции), "scroll thumb" (кнопка прокрутки), "scroll buttons" (кнопки "вверх" и "вниз") и "scroll track" (полоса прокрутки).

Когда мы будем добавлять графику, то будем помещать ее в соответствующие слои. Если вы хотите добавить еще какие-нибудь графические элементы, добавьте соответствующие слои.

Теперь добавьте два кадра в каждый слой клипа. Назовите первый кадр
"no_scroll", второй - "scroll_loop". Вставьте ключевой кадр на место второго в слоях "scroll thumb", "scroll buttons" и "scroll track".






Теперь займемся полосой прокрутки. Зайдите во второй кадр слоя "scroll track".
Нарисуйте прямоугольник нужной ширины и убедитесь, что его высота не превышает размер динамического текстового поля. Установите выравнивание вправо. Преобразуйте в символ клипа и назначьте имя "scroll_track".

Сейчас мы добавим немного кода. В слое "actions" в первом кадре вставьте

stop();

Во втором кадре ("scroll_loop") вставьте

play();

Мы еще вернемся к этому коду.

В последнем кадре вставьте

gotoAndPlay("scroll_loop");

Теперь вернитесь в корневой каталог и добавьте там код:

function showText(message) {
main.w_field.text = message;
if (main.w_field.maxscroll > main.w_field.scroll) {
main.gotoAndPlay("scroll_loop");
}
}

В слое "actions" добавьте:

my_text = "побольше текста, иначе не будет видно полосы прокрутки";
showText(my_text);
stop();

Мы делаем так, чтобы полоса прокрутки появлялась только тогда, когда в тексте больше строк, чем можно отобразить за один раз.

Кнопки "вверх" и "вниз"

Зайдите в главный клип.

Я использовала в качестве основы кнопку со стрелкой из набора готовых компонентов. Вы можете создать собственные кнопки. Единственное, что они должны быть такой же ширины, как полоса прокрутки. Поместите их на полосу прокрутки и выравняйте вверху и внизу. Элементам дайте имена "up_arrow" (стрелка "вверх") и "down_arrow" (стрелка вниз).

Теперь мы добавим функцию, которая будем прогонять текст в направлении, соответствующем нажатой кнопке:

function scrollIt() {
w_field.scroll += pressed;
}
function stopScroll() {
still_pressed = false;
pressed = false;
}
function callBack() {
if (pressed) {
still_pressed = true;
} else {
still_pressed = false;
}
clearInterval(checkIfPressed);
}
up_arrow.onPress = function() {
pressed = -1;
if (w_field.scroll > 1) {
scrollIt();
}
checkIfPressed = setInterval(callBack, 500);
}
down_arrow.onPress = function() {
pressed = 1;
if (w_field.scroll < w_field.maxscroll) {
scrollIt();
}
checkIfPressed = setInterval(callBack, 500);
}
up_arrow.onRelease = down_arrow.onRelease = up_arrow.onReleaseOutside = down_array.onReleaseOutside = stopScroll;





Экспортируйте клип и понажимайте кнопки - они работают.

Убедитесь, что текст движется, когда вы нажимаете кнопку. Для верности добавьте этот код ко второму кадру над play() action:

if (still_pressed) {
scrollIt();

Перейдем к следующему этапу.

Кнопка прокрутки

Нарисуйте прямоугольник или квадрат и преобразуйте его в кнопку. Кнопка должна быть такой же ширины, как и полоса прокрутки. Дайте кнопке имя "thumb_btn" и нажмите F8. В результате появится клип с кнопкой. Назначьте ему имя "scroll_thumb". Убедитесь, что он есть только во втором и третьем кадрах, так же как стрелки и полоса. Поместите его прямо под кнопкой "вверх" на полосе прокрутки - это его начальное положение.



Чтобы кнопку можно было перетаскивать и соответственно перемещать текст, мы добавим в кадр "functions" следующий код:

scroll_thumb.initiate = function() {
this.initiated = true;
this.min_y = this._y;
this.max_y = this.min_y + (scroll_track._height - up_arrow._height - this._height/2) + 1;
this.total_travel = Math.abs(this.max_y - this.min_y);
this.inc = Math.floor(this.total_travel/w_field.maxscroll);
}
scroll_thumb.drag = function() {
this.startDrag(false, this._x, this.min_y, this._x, this.max_y);
if (!this.org_y) {
this.org_y = this._y;
}
dragging = true;
this.onEnterFrame = whileDragging;
}
scroll_thumb.thumb_btn.onPress = function () {
scroll_thumb.drag();
}
scroll_thumb.thumb_btn.onRelease = function () {
dragging = false;
pressed = false;
still_pressed = false;
scroll_thumb.stopDrag();
scroll_thumb.onEnterFrame = null;
}
scroll_thumb.checkPos = function () {
if (this._y > this.max_y) {
this._y = this.max_y;
} else if (this._y < this.min_y) {
this._y = this.min_y;
}
}
function whileDragging() {
if (dragging) {
var moved = this._y - this.org_y;
if (Math.abs(moved) >= this.inc) {
if (moved > 0) {
pressed = 1;
} else {
pressed = -1;
}
this.org_y = this._y;
scrollIt();
if (Math.abs(this._y - this.max_y) < 1) {
w_field.scroll = w_field.maxscroll;
} else if (Math.abs(this._y - this.min_y) < 1) {
w_field.scroll = 1;
}
} else {
pressed = 0;
}
}
}



Мы дополним функцию прокрутки scrollIt следующим кодом, который нужно поместить прямо под строкой "w_field.scroll += pressed;":

if (!dragging) {
if (w_field.scroll <= 1) {
scroll_thumb._y = scroll_thumb.min_y;
} else if (w_field.scroll >= w_field.maxscroll){
scroll_thumb._y = scroll_thumb.max_y;
} else {
scroll_thumb._y += scroll_thumb.inc*pressed;
scroll_thumb.checkPos();
}
}

И, наконец, чтобы инициировать кнопку прокрутки и оптимизировать прокрутку, добавьте этот код во втором кадре над строкой "play() action":

if (!scroll_thumb.initiated) {
scroll_thumb.initiate();
}
if (Math.abs(scroll_thumb._y - scroll_thumb.max_y) < 1) {
w_field.scroll = w_field.maxscroll;
} else if (Math.abs(scroll_thumb._y - scroll_thumb.min_y) < 1) {
w_field.scroll = 1;
}

Я знаю, что вы уже устали от бесконечного кода. Но потерпите немного - конец уже близко. Осталось только сделать так, чтобы прокрутку можно было активировать, кликнув на полосе.

Доработка полосы прокрутки

Собственно, полоса прокрутки уже есть - "scroll_track". Осталось только добавить следующий код:

scroll_track.useHandCursor = false;
scroll_track.onPress = function () {
rec_y = _root._ymouse - this._parent._y;
if (rec_y > scroll_thumb._y) {
pressed = 5;
} else {
pressed = -5;
}
scrollIt();
checkIfPressed = setInterval(callBack, 500);
}
scroll_track.onRelease = scroll_track.onReleaseOutside = stopScroll;

Обратите внимание, что значение "5" в коде - на один меньше, чем максимальное число строк текста, отображаемой за один раз. Если в вашем текстовом поле помещается 20 строк, то подставьте в код значения 19 и -19.

Ниже я еще раз привожу использованные коды.

Я не буду повторять код полностью и включу некоторые комментарии для большей ясности.

Верхний уровень
Кадр 1, "functions".

//Отображается текст в поле. Определяется, нужен скроллинг или нет.
function showText(message) {
main.w_field.text = message;
if (main.w_field.maxscroll > main.w_field.scroll) {
main.gotoAndPlay("scroll_loop");
}
}



Кадр 1, "actions".

// Эту переменную можно изменять, как вам того нужно.
my_text = "поместите сюда нужный текст. Текста должно быть много - иначе полоса прокрутки не будет задействована";
showText(my_text);
stop();

Основной клип ("main")
Кадр 1, functions.

//прокручивает текст вверх или вниз.
function scrollIt() {
w_field.scroll += pressed;
// проверяет, чтобы кнопка всегда оставалась на полосе
if (!dragging) {
if (w_field.scroll <= 1) {
scroll_thumb._y = scroll_thumb.min_y;
} else if (w_field.scroll >= w_field.maxscroll){
scroll_thumb._y = scroll_thumb.max_y;
} else {
scroll_thumb._y += scroll_thumb.inc*pressed;
scroll_thumb.checkPos();
}
}
}
// вызывается при нажатии на стоп
function stopScroll() {
still_pressed = false;
pressed = false;
}
// проверяет нажата ли кнопку через полсекунды
function callBack() {
if (pressed) {
still_pressed = true;
} else {
still_pressed = false;
}
clearInterval(checkIfPressed);
}
// функции стрелок вверх и вниз
up_arrow.onPress = function() {
pressed = -1;
if (w_field.scroll > 1) {
scrollIt();
}
checkIfPressed = setInterval(callBack, 500);
}
down_arrow.onPress = function() {
pressed = 1;
if (w_field.scroll < w_field.maxscroll) {
scrollIt();
}
checkIfPressed = setInterval(callBack, 500);
}
up_arrow.onRelease = down_arrow.onRelease = up_arrow.onReleaseOutside = down_array.onReleaseOutside = stopScroll;
// инициализация кнопки прокрутки с помощью переменных
scroll_thumb.initiate = function() {
this.initiated = true;
this.min_y = this._y;
this.max_y = this.min_y + (scroll_track._height - up_arrow._height - this._height) + 1;
this.total_travel = Math.abs(this.max_y - this.min_y);
this.inc = Math.floor(this.total_travel/w_field.maxscroll);
}
// функция перетаскивания кнопки прокрутки
scroll_thumb.drag = function() {
this.startDrag(false, this._x, this.min_y, this._x, this.max_y);
if (!this.org_y) {
this.org_y = this._y;
}
dragging = true;
this.onEnterFrame = whileDragging;
}
// функция прокрутки с помощью кнопки:
scroll_thumb.thumb_btn.onPress = function () {
scroll_thumb.drag();
}
scroll_thumb.thumb_btn.onRelease = function () {
dragging = false;
pressed = false;
still_pressed = false;
scroll_thumb.stopDrag();
scroll_thumb.onEnterFrame = null;
}
// проверяет, чтобы кнопка не выходила за допустимые пределы
scroll_thumb.checkPos = function () {
if (this._y > this.max_y) {
this._y = this.max_y;
} else if (this._y < this.min_y) {
this._y = this.min_y;
}
}
// функция enterFrame для кнопки скроллинга
function whileDragging() {
if (dragging) {
var moved = this._y - this.org_y;
if (Math.abs(moved) >= this.inc) {
if (moved> 0) {
pressed = 1;
} else {
pressed = -1;
}
this.org_y = this._y;
scrollIt();
// проверяет соответствие положения текста и кнопки
if (Math.abs(this._y - this.max_y) < 1) {
w_field.scroll = w_field.maxscroll;
} else if (Math.abs(this._y - this.min_y) < 1) {
w_field.scroll = 1;
}
} else {
pressed = 0;
}
}
}
// параметры и функции полосы прокрутки
scroll_track.useHandCursor = false;
scroll_track.onPress = function () {
rec_y = _root._ymouse - this._parent._y;
if (rec_y > scroll_thumb._y) {
pressed = 5;
} else {
pressed = -5;
}
scrollIt();
checkIfPressed = setInterval(callBack, 500);
}
scroll_track.onRelease = scroll_track.onReleaseOutside = stopScroll;



Кадр 1, "actions":

stop();

Кадр 2, "actions":

if (!scroll_thumb.initiated) {
scroll_thumb.initiate();
}
// продолжает прокручивать текст, если кнопка нажата
if (still_pressed) {
scrollIt();
}
// оптимизирует работу кнопки прокрутки
if (Math.abs(scroll_thumb._y - scroll_thumb.max_y) < 1) {
w_field.scroll = w_field.maxscroll;
} else if (Math.abs(scroll_thumb._y - scroll_thumb.min_y) < 1) {
w_field.scroll = 1;
}
play();

Кадр 3, "actions":

gotoAndPlay("scroll_loop");

Вот и все.

Источник: flashkit

Использование материалов возможно только при ссылке на Graphics.ru
Статьи, переводы и изображения принадлежат их авторам.
c Graphics.ru 2001. Создание и поддержка ArtLogic.

Содержание раздела