автор: Nox Noctis
задача: научиться создавать флэш ролики, занимающие всё окно броузера.
Рецепт рассказывает о том, как организовать изменение расположения и размеров клипов в зависимости от размеров окна флэш плеера (или плагина). Keep it simple. :)
1. что и зачем
2. как организовать резиновый флэш ролик
2.1 общий механизм
2.2 приём, облегчающий жизнь
3. результат / исходник
1. Что и зачем
Давно уже никого не удивишь "резиновым" хтмл сайтом — сайтом, содержимое которого изменяется для заполнения всего окна броузера. Несмотря на то, что сделать то же самое с флэшем довольно просто, резиновые флэш сайты встречаются не так часто.
Кроме дизайнерских нужд, резиновость может понадобиться еще в одном случае — если вы не знаете заранее, какой может оказаться видимая область ролика в странице, или предполагаете, что может понадобиться изменить размер ролика на странице, не прибегая к дополнительной помощи флэш-разработчика.
в начало
2. Как организовать резиновый флэш ролик
Главное — сделать так, чтобы набор действий по позиционированию объектов выполнялся при каждом изменении габаритов окна.
Общий механизм. За информацию о размерах и настройках сцены ролика отвечает встроенный класс Stage. Этот класс обладает несколькими статическими свойствами, которые нам понадобятся:
- Stage.width — ширина окна ролика в хтмл странице или в флэш плеере.
- Stage.height — высота окна ролика в хтмл странице или в флэш плеере.
- Stage.scaleMode — режим масштабирования сцены. Возможные значения этого свойства и подробное описание их действия есть в статье хэлпа к Flash 8. Скажу только, что нам понадобится режим Stage.scaleMode = "noScale", при котором флэш не будет пытаться масштабировать содержимое ролика под габариты окна.
- Stage.align — выравнивание cодержимого ролика в окне плеера или броузера. Свойство указывает выравнивание по вертикали и горизонтали. В примерах к этому материалу я буду использовать выравнивание по верхнему левому углу окна, от есть Stage.align = "TL"(T — top, L — left). Мне кажется, это удобнее всего. Но, в принципе, вы можете использовать любой другой удобный вам вид выравнивания, это не существенно.
Класс Stage передает сообщения о событии "onResize" при изменении размеров окна плеера или броузера.
Подробнее о механизме передачи событий и о том, что это вообще такое, можно почитать на сайте Роста в статье
"Модель событий Flash MX".
Сейчас нам важно понимать только одно: при изменении габаритов окна автоматически сработает метод onResize во всех специально подготовленных к этому объектах. Чтобы подготовить какой-то объект к реагированию на изменения габаритов окна, нужно выполнить два действия:
- Создать в объекте метод onResize
- Связать этот объект с классом Stage
Внимание! Механизм события onResize будет работать только при включенном режиме Stage.scaleMode = "noScale".
Первое можно сделать так:
1
2
3
4
5
6
7
8
9
10
// создадим объект
объект_реагирующий = {};
// создадим метод onResize
объект_реагирующий.onResize = function () {
/* какие-то действия по масштабированию или
позиционированию клипов на сцене в соответствии
с текущими значениями Stage.width и Stage.height */
}
Теперь необходимо сообщить классу Stage, что наш объект_реагирующий должен получать извещения об изменениях габаритов окна. Это делается так:
1
2
Stage.addListener(объект_реагирующий);
Переводя эту строку скрипта буквально: "добавить объект_реагирующий в ряды слушателей класса Stage". Стоит отметить, что "слушатель" — это, в данном случае, термин. Слушателями принято называть объекты, которые подписаны на получение извещений о каких-то событиях.
Итак, рецепт подготовки объекта к реагированию на изменения габаритов окна:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Stage.scaleMode = "noScale";
// создадим объект
объект_реагирующий = {};
// создадим метод onResize
объект_реагирующий.onResize = function () {
/* какие-то действия по масштабированию или
позиционированию клипов на сцене в соответствии
с текущими значениями Stage.width и Stage.height */
}
// наладим связь между классом Stage и нашим объектом
Stage.addListener(объект_реагирующий);
В принципе, не обязательно создавать новый объект для помещения в него метода onResize. Вы так же можете использовать для это любой из существующих объектов любого типа, например _root:
1
2
3
4
5
6
7
Stage.scaleMode = "noScale";
_root.onResize = function () {
// какие-то действия
}
Stage.addListener(_root);
Это удобнее и логичнее, если действий всего одно — два.
Пример:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// код в кадре главной линейки кадров (_root)
// настройки сцены
Stage.scaleMode = "noScale";
Stage.align = "TL";
/* создадим текстовое поле, которое будет содержать подпись и располагаться
в правом нижнем углу видимой области ролика */
this.createTextField("TF", 0, 0, 0, 0, 0);
TF.autoSize = true;
TF.text = "подпись в правом нижнем углу";
// метод onResize создается прямо в _root
onResize = function ()
{
/* при каждом изменении габаритов окна
ставим текстовое поле на свое место */
this.TF._x = Stage.width-this.TF.textWidth;
this.TF._y = Stage.height-this.TF.textHeight;
};
Stage.addListener(this);
[
посмотреть].
Попробуйте изменить размер окна броузера и убедитесь, что подпись всегда остается в правом нижнем углу окна флэша.
Приём, облегчающий жизнь. Часто при разработке ролика с изменяющимися габаритами требуется позиционировать много объектов в зависимости от размеров окна. Причем довольно часто требуется пропорциональное изменение габаритов/позиции клипов. Это можно сделать так, как было показано в примере 1, а можно придумать что-нибудь более интересное. :)
Например, создадим на сцене следующие объекты:
Теперь заставим все эти объекты позиционироваться пропорционально размерам окна, считая "нормальным" размером 400х300 (пока что зададим только изменение позиции).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// настройки сцены
Stage.scaleMode = "noScale";
Stage.align = "TL";
// создадим объект для реагирования на изменение габаритов окна
var resize_obj = {};
// запомнили нормальную ширину
resize_obj.normal_width = 400;
// запомнили нормальную высоту
resize_obj.normal_height = 300;
// самое главное: список объектов, которые будем перемещать
resize_obj.position = [square, // квадрат
circle, // круг
triangle, // треугольник
TF0, TF1,
TF2, TF3 // текст. поля
];
// собственно, реакция на изменения габаритов окна
resize_obj.onResize = function()
{
var clip;
for (var i in this.position) {
// перебираем все клипы в списке
clip = this.position[i];
// восстанавливаем пропорции для каждого клипа
clip._x = Stage.width*clip._xRatio;
clip._y = Stage.height*clip._yRatio;
}
};
// связь между классом Stage и объектом resize_obj
Stage.addListener(resize_obj);
/* запоминаем пропорции (отношение координат к нормальной ширине/высоте) */
var clip;
for (var i in resize_obj.position) {
// перебираем все клипы в списке
clip = resize_obj.position[i];
// пропорция по горизонтали
clip._xRatio = clip._x/resize_obj.normal_width;
// пропорция по вертикали
clip._yRatio = clip._y/resize_obj.normal_height;
}
Результат 2: [посмотреть].
Попробуйте растягивать и сжимать окно броузера, и посмотрите, как перемещаются при этом объекты. Мы запомнили соотношение координат каждого из объектов с нормальными размерами сцены. При изменении габаритов окна достаточно умножить соответствующие габариты на сохраненные значения пропорций, чтобы получить искомые значения координат.
Теперь добавим изменение размеров. Пусть клип с кругом всегда будет отмасштабирован пропорционально габаритам окна, квадрат пусть будет растянут только по горизонтали а треугольник вытянут только по вертикали. Чтобы добавить изменение размеров, нужно запомнить пропорции высоты и ширины так же, как мы запоминали пропорции для координат. Добавленные части отмечены жирным шрифтом.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// настройки сцены
Stage.scaleMode = "noScale";
Stage.align = "TL";
// создадим объект для реагирования на изменение габаритов окна
var resize_obj = {};
// запомнили нормальную ширину
resize_obj.normal_width = 400;
// запомнили нормальную высоту
resize_obj.normal_height = 300;
// самое главное: список объектов, которые будем перемещать
resize_obj.position = [square, // квадрат
circle, // круг
triangle, // треугольник
TF0, TF1,
TF2, TF3 // текст. поля
];
// собственно, реакция на изменения габаритов окна
resize_obj.onResize = function()
{
var clip;
for (var i in this.position) {
// перебираем все клипы в списке
clip = this.position[i];
// восстанавливаем пропорции координат для каждого клипа
clip._x = Stage.width*clip._xRatio;
clip._y = Stage.height*clip._yRatio;
// если для клипа определена пропорция по ширине
if (clip._widthRatio != undefined) {
clip._width = Stage.width*clip._widthRatio;
}
// если для клипа определена пропорция по высоте
if (clip._heightRatio != undefined) {
clip._height = Stage.height*clip._heightRatio;
}
}
};
// связь между классом Stage и объектом resize_obj
Stage.addListener(resize_obj);
/* запоминаем пропорции координат (отношение координат к нормальной ширине/высоте) */
var clip;
for (var i in resize_obj.position) {
// перебираем все клипы в списке
clip = resize_obj.position[i];
// пропорция координаты по горизонтали
clip._xRatio = clip._x/resize_obj.normal_width;
// пропорция координаты по вертикали
clip._yRatio = clip._y/resize_obj.normal_height;
}
/* запоминаем пропорции высоты и ширины (отношение габарита к нормальной ширине/высоте) */
circle._widthRatio = circle._width/resize_obj.normal_width;
circle._heightRatio = circle._height/resize_obj.normal_height;
square._widthRatio = square._width/resize_obj.normal_width;
triangle._heightRatio = triangle._width/resize_obj.normal_height;
[
посмотреть].
Попробуйте изменять размеры окна броузера и посмотрите, как перемещаются и масштабируются объекты. Обратите внимание, что буквы в текстовом поле справа не деформируются при изменении свойства _width поля. Вместо этого текстовое поле перестраивает свои строки в соответствии с заданной шириной.
Последний штрих к нашей чудо-функции onResize: добавим несколько строк для отображения текущего размера сцены флэша.
1
2
3
4
_root.TF1.text = "текущие габариты ролика: ";
_root.TF1.text += Stage.width+"x";
_root.TF1.text += Stage.height;
Теперь мы всегда будем знать, каков текущий размер сцены флэша в пикселях.
Результат 4: [посмотреть] [исходник]
в начало
