Как сделать резиновый баннер

Резиновый флеш баннер иначе еще называют просто «резиной». Основная его особенность для сайта заключается в том, что вне зависимости от размера браузера, баннер будет оставаться таким же, каким был задуман – красивым, четким и ярким. Необходимость в резиновых баннерах возникла из-за того, что приходится учитывать разнокалиберность компьютеров пользователей интернета, ведь у кого-то монитор квадратный, у кого-то широкоформатный, у одних он 14 дюймов, у других – 21 дюйм.

Инструкция

1. Прежде чем ответить на вопрос «Как сделать резиновый баннер?», стоит ответить на другой не менее важный вопрос: «А зачем его нужно делать?» Для кого-то это может показаться странным, но единства в этом вопросе у веб-дизайнеров, действительно, нет. Как нет, скажем, единого мнения у автомобилистов – хорошо ли ездить на всесезонной резине или можно обойтись летней, или пользоваться полным комплектом: летняя резина + зимняя… Если у баннера жесткие размеры, допустим 1000 на 100, то на экране с разрешением по ширине более 1000 точек, он будет отражаться некорректно, вплоть до того, что могут проявиться графические элементы, спрятанные разработчиком за края этого баннера. Если при размещении баннера не учтена возможность сделать его резиновым, привлекательность сайта для посетителей с широкоформатным монитором сразу падает. Ведь они заходят на сайт и видят, что слева начинается шапка и доходит только до середины экрана и т.п. Собственно, это самый яркий аргумент в пользу «резины» - она позволяет сделать так, чтобы каждый – именно каждый – пользователь видел на сайте именно то оформление, которое было задумано дизайнером.
2. О том как сделать резиновый баннер, нагляднее всего продемонстрировать на примере. Пусть это будет «резина» 100% на 70, которая расширяется от 1000 до 100%. Значит, минимальный размер баннера будет 1000 на 70. От этого размера и нужно отталкиваться. Сначала необходимо сделать самый обычный баннер. Единственное, что нужно учесть – выполнять его нужно в символике movie clip. Необходимо создать в библиотеке новый символ и в нем уже работать.
3. Баннер сделан. Допустим, в центре у него – мувик (видео изображение, отображающее суть какого-либо фильма или игры и т.д.) с надписью. Эта надпись всегда должна быть по центру. Нужно дать этому мувику имя, допустим – CenterText. На фоне надписи необходимо сделать другой мувик – с градиентной заливкой. Он и будет расширяться во всю ширину резинового баннера. Его можно назвать – Fon. Дальше следует назвать еще один мувик, прилепить его к правому края экрана. Пусть это будет RightText.
4. Следующим действием на главную сцену выносится ролик с баннером. Можно назвать его OurBanner. Получившиеся в ходе работы объекты и нужно будет двигать.
5. Зайдя на главной сцене в любой кадр, необходимо остановить ролик – написать Stop – и вынести на сцену пустой ролик для отлова событий. В него нужно вставить код:
   onClipEvent(enterFrame){
   Stage.scaleMode = "noScale";
   Stage.align = "TL";
   Stage.addListener(this);
   this.onResize = function () {
   if (Stage.width>1000) {
   this._parent.OurBanner.CenterText._x = Stage.width/2;
   this._parent.OurBanner.RightText._x = Stage.width - this._parent.OurBanner.RightText._width;
   this._parent.OurBanner.Fon._width = Stage.width;}
   }}
   Резиновый баннер готов.