Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
 

   Интернет технологии -> Flash -> Создаем полосу прокрутки в Flash МХ


Создаем полосу прокрутки в 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


 

 
Интересное в сети
 
10 новых программ
CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full


Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
 
Это интересно
 

Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.