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

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

Графика и дизайн » Flash » Создаем полосу прокрутки в Flash МХ

Введение

В этом уроке я расскажу, как создать полосу прокрутки в 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");

Вот и все.




Вера Фляйшнер mailto:verafleischer@usa.net

Отзывы (через аккаунты в социальных сетях Вконтакте, Facebook или Google+):

Оставить отзыв с помощью аккаунта ВКонтакте:

Оставить отзыв с помощью аккаунта FaceBook:

Оставить отзыв с помощью аккаунта Google+: