резиновая флэшка-сайт и не только

[mtbio]

Всем привет! Я тут после фатального освоения флэш-каталиста пришел к радостному выводу, что лучше родного простого флэша нет ничего. На меня нахлынули вдохновения и стали щекотать музы. Решил я замутить сайт, а какой же сайт если он не резиновый. Вот мыкался я по Google в поисках каких нить тайных знаний, но все, что нарыл не удобоперивариваемо и не работает. И решил создать тут тему.

Я создал флшку, в нее впихнул картиночку, заделал там кнопочки. Сразу оговорюсь, это будет прототип реального сайтика. Могут поменяться шрифты, картинка но не более. Вобщем, задача такова сейчас, надо сделать сайт резиночку (флэш-резинка).

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

[mtbio]

вот сижу и думаю а может это все не на AS2, на AS3 замутить. Ваше мнение?

[rainbowrussia]

Stage.scaleMode = 'noScale'; // отключаем масштабирование содержимого
Stage.align = 'LT'; // устанавливаем "ноль" слева вверху
var w = Stage.width; // текущая ширина сцены
var h = Stage.height; // текущая высота сцены


Далее листнер на onResize, вычисление положения мувиков относительно текущей ширины и высоты.

[mtbio]

Так вроде разобрался ))))) Масштаб, константа выравнивания, присваиваем w и h значения текущей ширины - все супер. Теперь картинка в левом верхнем углу висит. А вот далее "листнер на onResize" - темный лесс )))))))))

[rainbowrussia]

var resizer:Object = new Object();
resizer.onResize = function () {
var sw = Stage.width;
var sh = Stage.height;
// позиционирование клипов
// функция вызывается каждый раз, когда меняются размеры сцены
}

resizer.onResize();
Stage.addListener(resizer);

[mtbio]

Я что то делаю не так походу ....
Картинка застряла в верхнем левом углу

[rainbowrussia]

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

[mtbio]

Понял. Посмотрел вложение. Куда дальше двигаться? Я ориентируюсь на вот такой результатhttp://fieroanimals.com/, без параллакс эффекта, просто картинка растягивается

[rainbowrussia]

без параллакс эффекта, просто картинка растягивается

Вам как надо, просто растягивается до размеров плеера либо с сохранением пропорций, но тогда слева и справа или сверху и снизу будут полосы при несовпадении пропорций окна браузера и размеров картинки? Либо можно сделать сохранение рпопорций, но "лишнее" будет отрезаться.

[mtbio]

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

Еще как пример могу привести http://valeriya.net/, - это не флэш, но как реализован замут с картинкой по моему очень хорошо.

[rainbowrussia]

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

Посмотрите вложение.

upd. Еще добавьте

mcImg.forceSmoothing = true;

где-нибудь.

[mtbio]

Просто супер!!! Спасибо за потраченное на меня время, я ваш должник.
У меня огромная просьба, если вас не затруднит расписать таким образом "var w = Stage.width; // текущая ширина сцены" скрипт. Понимаю, что это за геморрой, поэтому если "нет" то без претензий. объясню, я хотел бы понять, что за чем и почему, что бы в дальнейшем этим пользоваться. Спокойно менять и понимать, что за чем.

Еще раз спасибо!

[rainbowrussia]

Stage.scaleMode = 'noScale'; // отключаем масштабирование содержимого
Stage.align = 'TL'; // устанавливаем "ноль" слева вверху

// запоминаем исходную ширину и высоту картинки
var imgw = mcImg._width;
var imgh = mcImg._height;

// устанавливаем принудительное сглаживание картинки
mcImg.forceSmoothing = true;

// создаем объект с единственным методом - onResize
var resizer:Object = new Object();

resizer.onResize = function () {
var sw = Stage.width; // ширина сцены
var sh = Stage.height; // высота сцены

// позиционирование клипов
// тут идет математики, напрямую к флешу местами не относящаяся
if (sw/sh > imgw / imgh) { // если картинку надо будет обрезать по высоте
mcImg._x = 0; // левый край позиционируем на ноль по горизонтали
mcImg._width = sw; // ширину картинки вытсавляем по ширине сцены
mcImg._height = Math.round(sw * imgh / imgw); // выставляем высоту картинки, пропорционально ее изначальным размерам (чтобы не было искажения)
mcImg._y = Math.round((sh - mcImg._height)/2); // сдвигаем ее вверх на половину выступающей за пределы сцены части
} else {
// аналогичный алгоритм, если размер сцены таков, что у картинки надо обрезать левый и правй край
mcImg._y = 0;
mcImg._height = sh;
mcImg._width = Math.round(sh * imgw / imgh);
mcImg._x = Math.round((sw - mcImg._width)/2);
}
// mcImg._x = sx; - эти две строчки лишние, забыл их убрать
// mcImg._y = sy;
// позиционируем текстовые элементы
// в принципе их можно и не трогать, если они всегда слева вверху находятся
// и их положение не зависит от размера сцены
mcTxt1._x = mcTxt2._x = mcTxt3._x = 10;
mcTxt1._y = 20;
mcTxt2._y = mcTxt1._y + 50;
mcTxt3._y = mcTxt2._y + 50;
}

// вызываем один раз наш метод, чтобы выстроить элементы в соответствии с текущими размерами сцены
// очень может быть что onResize полюбому сам должен вызваться, но лишним не будет
resizer.onResize();

// добавляем к сцене "слушателя" событий в виде нашего объекта
Stage.addListener(resizer);