Тянем, потянем…

Опубликовано 30 1 2010 Начлаб

Итак, сегодняшняя запись касается одной очень иногда нужной вещи, такой как "растяжимость" флеш-баннера? или как говорят создание резинового флеш-ролика И учитывая специфику баннеров, нам совсем не надо, чтобы какие-то объекты вытягивались по ширине, они же тогда исказятся, а если вы тем более использовали растр, то тогда вообще получится неизвестно что.

Я предлагаю иную концепцию, а именно закрепит нужные объекты на сцене, чтобы при растяжении ролика они оставались на своих местах. В качестве примера, мы объекты разложим по углам, то есть в коде будет функция определиния угловых точек, к которым прикрепятся объекты.

Итак, создаем ролик, а в нем на сцену выставляем 4 Клипа (Movie Clip). Клипам, конечно же, дадим имена. Пусть это будут topleft, topright и bottleft, bottright. (Соответственно, в переводе верх-лево, верх-право и низ-лево, низ-право). точку регистрации следует задать в соответствующих углах.

В кадре слоя выше пишем код. Итак:

fscommand("allowscale", "false");

Этим мы разрешаем объектам перемещаться при растяжении ролика. Если сделать "true", то все объекты будут пропорционально уменьшаться/увеличиваться при изменении размеров, не смещаясь, когда мы растягиваем ролик только в одном направлении.

Дадим понять, что есть ширина/высота:

Stage.originalWidth = Stage.Width;
Stage.originalHeight = Stage.Height;

Укажем так, чтобы объекты не уменьшались/увеличивались, зафиксируем их размер:

Stage.scaleMode="noScale";

И распихаем Клипы по углам:

Stage.getLeft = function() {
return -1*(this.width-this.originalWidth)/2;
};
Stage.getTop = function() {
return -1*(this.height-this.originalHeight)/2;
};
Stage.getRight = function() {
return this.originalWidth+(this.width-this.originalWidth)/2;
};
Stage.getBottom = function() {
return this.originalHeight+(this.height-this.originalHeight)/2;
};

А раз функции создали, делаем и то, что будет ими пользоваться:

Stage.addListener(topleft);
Stage.addListener(topright);
Stage.addListener(bottleft);
Stage.addListener(bottright);

topleft.onResize = function() {
this._x = Stage.getLeft();
this._y = Stage.getTop();
};

topright.onResize = function() {
this._x = Stage.getRight();
this._y = Stage.getTop();
};

bottleft.onResize = function() {
this._x = Stage.getLeft();
this._y = Stage.getBottom();
};

bottright.onResize = function() {
this._x = Stage.getRight();
this._y = Stage.getBottom();
};
topleft.onResize();
topright.onResize();
bottleft.onResize();
bottright.onResize();

Итак, один и тот же ролик будет выглядеть так в разных размерах. Примеры, конечно, совсем небрежные, но суть ясна - один и тот же ролик, но в коде вставки прописаны разные размеры:

Да, и кстати, можно это

this._x = Stage.getRight();
this._y = Stage.getBottom();

использовать для того, чтобы четко прописать распорложение для какого-либо объекта. Указываем просто числами координаты, например:

this._x = 10
this._y = 20

И при растяжении объект на этих координатах и будет оставаться.

Как обычно, весь код целиком:

fscommand("allowscale", "false");

Stage.originalWidth = Stage.Width;
Stage.originalHeight = Stage.Height;

Stage.scaleMode="noScale";

Stage.getLeft = function() {
return -1*(this.width-this.originalWidth)/2;
};
Stage.getTop = function() {
return -1*(this.height-this.originalHeight)/2;
};
Stage.getRight = function() {
return this.originalWidth+(this.width-this.originalWidth)/2;
};
Stage.getBottom = function() {
return this.originalHeight+(this.height-this.originalHeight)/2;
};

Stage.addListener(topleft);
Stage.addListener(topright);
Stage.addListener(bottleft);
Stage.addListener(bottright);

topleft.onResize = function() {
this._x = Stage.getLeft();
this._y = Stage.getTop();
};

topright.onResize = function() {
this._x = Stage.getRight();
this._y = Stage.getTop();
};

bottleft.onResize = function() {
this._x = Stage.getLeft();
this._y = Stage.getBottom();
};

bottright.onResize = function() {
this._x = Stage.getRight();
this._y = Stage.getBottom();
};
topleft.onResize();
topright.onResize();
bottleft.onResize();
bottright.onResize();
google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

2 комментариев to “Тянем, потянем…”

  1. murejib says:

    Однако в условиях банера здесь много избыточного кода.
    Достаточно один раз подписать один объект на событие onResize, и в нем задавать координаты каждого объекта.

  2. Начлаб says:

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

Оставить коммент