Резиновое позиционирование

[serdeles]

UPDATE: http://www.flasher.ru/forum/showpost.php?p=908202&postcount=6 (исходники в формате Flash CS3).


Есть проблема: не могу выровнять объекты circle (1 — 5) по верхней границе объекта square. В размере по-умолчанию всё позиционируется как надо. Однако, когда размер окна изменяется, объекты съезжают выше или ниже square.

Так же не могу понять, каким образом выдержать расстояние между объектами circle и rec одинаковым. Оно тоже съезжает, если изменить размер окна.

Большая просьба подсказать, в какую сторону копать.
Исходник и код прикладываю.

Всем известный код:


/*
(c) by Nox Noctis for noregret.org and flash-mx.ru
feel@noregret.org

sample 3 for tutorial:
http://noregret.org/tutor/elastic/
*/

// настройки сцены
Stage.scaleMode = "noScale";
Stage.align = "TL";

// создадим объект для реагирования на изменение габаритов окна
var resize_obj = {};

// запомнили нормальную ширину
resize_obj.normal_width = 900;

// запомнили нормальную высоту
resize_obj.normal_height = 675;

// самое главное: список объектов, которые будем перемещать
resize_obj.position = [square,
circle,
circle2,
circle3,
circle4,
circle5,
rec1,
rec2,
rec3,
rec4,
rec5,
];

// собственно, реакция на изменения габаритов окна
resize_obj.onResize = function()
{
_root.TF1.text = "текущие габариты ролика: ";
_root.TF1.text += Stage.width+"x";
_root.TF1.text += Stage.height;

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;
}

/* запоминаем пропорции высоты и ширины
(отношение габарита к нормальной ширине/высоте) */
square._Ratio = square.noScale;
circle._Ratio = circle.noScale;
circle2._Ratio = circle2.noScale;
circle3._Ratio = circle3.noScale;
circle4._Ratio = circle4.noScale;
circle5._Ratio = circle5.noScale;
rec1._Ratio = rec1.noScale;
rec2._Ratio = rec2.noScale;
rec3._Ratio = rec3.noScale;
rec4._Ratio = rec4.noScale;
rec5._Ratio = rec5.noScale;


resize_obj.onResize();

[in4core]

Да взять все да переписать самому заново. Это несложно. Кстати реализация сдесь не очень. Например это :

square._Ratio = square.noScale;
circle._Ratio = circle.noScale;
circle2._Ratio = circle2.noScale;
circle3._Ratio = circle3.noScale;
circle4._Ratio = circle4.noScale;
circle5._Ratio = circle5.noScale;
rec1._Ratio = rec1.noScale;
rec2._Ratio = rec2.noScale;
rec3._Ratio = rec3.noScale;
rec4._Ratio = rec4.noScale;
rec5._Ratio = rec5.noScale;
Хотя помоему не правильно вкорне, но да ладно, если вдруг правильно то равно следующему :
for(var i in resize_obj.position) {
resize_obj.position[i]._Ratio = resize_obj.position[i].noScale;
}

[serdeles]

Да, синтаксис в моём коде отсойный, согласен.

Однако, вопрос был немного о другом — о том, как позиционировать объекты относительно друг друга.

[serdeles]

Попробуем задать вопрос по-другому.

Наткнулся на более-менее подходящий пример по позиционированию: http://www.flasher.ru/forum/showthread.php?t=117359&highlight=%EF%EE%E7%E8%F6%E8%EE%ED%E8%F0%EE%E2%E0%ED%E8%E5. В предпоследнем каменте — работающий пример.

Но поскольку с программированием у меня туго, все равно требуется помощь опытных флешеров.

Я хотел бы скрестить мой код с кодом примера.

Конкретнее:

var len = array.length;
for (var i = 0; i<len; i++) {
var tf = _root["tf"+i];
onResize = function () {

n1._x += Stage.width+"x";
n1._y = Stage.height-footer._height;

n2._x += Stage.width+"x";
n2._y = Stage.height-footer._height;

n3._x += Stage.width+"x";
n3._y = Stage.height-footer._height;

footer._x = (Stage.width-footer._width)/2;
footer._y = Stage.height-footer._height;

};
}

//
Stage.scaleMode = "noScale";
Stage.align = "TL";

Stage.addListener(this);
onResize = function () {
n1._x += Stage.width+"x";
n1._y = Stage.height-footer._height;

n2._x += Stage.width+"x";
n2._y = Stage.height-footer._height;

n3._x += Stage.width+"x";
n3._y = Stage.height-footer._height;

footer._x = (Stage.width-footer._width)/2;
footer._y = Stage.height-footer._height;

};


footer — зелёная полоса, которая позиционируется по низу-центру. n1 — один из трёх элементов. Он привязан к высоте footer и находится там, не смотря на изменение размеров экрана.

Однако, теперь возникает проблема с резиновостью по горизонтали. Мне надо привязать к footer все три элемента, причём, таким образом, чтобы они располагались на равном друг от друга расстоянии по горизонтали. Другими словами, нужно, чтобы при изменении размера экрана, расстояние между элементами (n1, n2 и n3) «гуляло», примерно как это происходит в примере, приаттаченном к топику (index.fla.zip).

Поможете?

[lexa2000lexa]

вам могут помочь но при одном условии что вы выложите исходник как минимум в CS3.

[serdeles]

Опс. На этот раз выкладываю оба исходника в CS3. Надеюсь, поможет.

[lexa2000lexa]

если ширина элементов одинаковая то можно вот так Stage.scaleMode = "noScale";
Stage.align = "TL";
Stage.addListener(this);
onResize = muResize
function muResize() {
var _w:Number = (Stage.width - n1._width*3)/4
for(var i:Number=1;i<4;i++){
var n:MovieClip = this["n"+i];
n._y = footer._y;
n._x = _w*i+(i-1)*n._width;
}
footer._x = (Stage.width - footer._width) / 2;
footer._y = Stage.height - footer._height;
};

[serdeles]

Спасибо всем за ответы. Посидев и попотев над кодом, решил задачу сам. Наверно, не самый изящный скрипт, но работает, отвечая поставленной задаче: привязать объекты к верхней части определенного мувика, и выровнять вертикальный отступ между третьей группой объктов. При этом обеспечив резину. Код и исходник прикладываю — возможно, пригодится кому-нибудь в будущем, ибо мои поиски по форуму, связанные с позиционированием объектов на резине, зашли в тупик.


Stage.scaleMode = "noScale";
Stage.align = "TL";

var resize_obj = {};
resize_obj.normal_width = 900;

resize_obj.normal_height = 675;

resize_obj.position = [square,
circle,
circle2,
circle3,
circle4,
circle5,
rec1,
rec2,
rec3,
rec4,
rec5,
bot,
logo
];


resize_obj.onResize = function()
{

var clip;
for (var i in this.position) {

clip = this.position[i];
clip._x = Stage.width*clip._xRatio;
square._x = (Stage.width-square._width)/2;


clip._y = Stage.height*clip._yRatio;
square._y = Stage.height-square._height;

circle._y = Stage.height-square._height;
circle2._y = Stage.height-square._height;
circle3._y = Stage.height-square._height;
circle4._y = Stage.height-square._height;
circle5._y = Stage.height-square._height;

rec1._y = Stage.height-circle._height/0.75;
rec2._y = Stage.height-circle._height/0.75;
rec3._y = Stage.height-circle._height/0.75;
rec4._y = Stage.height-circle._height/0.75;
rec5._y = Stage.height-circle._height/0.75;

if (clip._widthRatio != undefined) {
clip._width = Stage.width*clip._widthRatio;
}
if (clip._heightRatio != undefined) {
clip._height = Stage.height*clip._heightRatio;
}
}
};

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;

square._y = Stage.height-square._height;
}