ActionScript 2.0: резиновый баннер

Это всего лишь один из способов создания резинового баннера во Flash. Реализован на старом-добром ActionScript 2.0, чтобы не было проблем с теми пользователями, которые годами не обновляют Flash Player на своём компьютере.

Итак, преступим.

Для начала, создадим новый проект под ActionScript 2.0. Я задал для проекта размеры 400 X 60 (это реальный размер нашего баннера). На главной временной шкале этого нового проекта поместим пустой MovieClip по имени container_mc. Внутри мувика container_mc на самом нижнем уровне создадим мувиклип bg_mc. Размеры bg_mc: 1600 X 1200 (это максимальный размер нашего баннера). bg_mc - это, как можно догадаться по его имени, общий фон для нашего будущего резинового баннера. Выше мувика bg_mc мы создадим мувиклип banner_mc. banner_mc - это сам баннер и его размеры должны совпадать с размерами проекта (400 X 60). Для большей наглядности я залил banner_mc серым цветом и поместил надпись "Резиновый баннер", а bg_mc залил чёрно-красным градиентом. Но для своих проектов вы, естественно, должны подбирать более подходящие сочетания :-)

Заготовка готова. Переходим к написанию кода.

Код ActionScript 2.0:

var maxWidth:Number = 1600; var maxHeight:Number = 1200; var bannerWidth:Number = 400; var bannerHeight:Number = 60; Stage.scaleMode = "noScale"; Stage.align = "LT"; function updateFunc() { container_mc.banner_mc._x = (Stage.width - bannerWidth) / 2; container_mc.banner_mc._y = (Stage.height - bannerHeight) / 2; container_mc.bg_mc._x = (Stage.width - maxWidth) / 2; container_mc.bg_mc._y = (Stage.height - maxHeight) / 2; } var myListener:Object = new Object(); myListener.onResize = function() { updateFunc(); }; Stage.addListener(myListener); updateFunc(); container_mc.useHandCursor; container_mc.onPress = function() { getURL("http://edapskov.ru", "_blank"); };

Получилось следующее: Смотрим.

Остался ещё один момент: нам надо изменить код вставки SWF-ролика таким образом, чтобы можно было использовать резиновый баннер. Для этого мы укажем width = 100%.

Код HTML:

<object type="application/x-shockwave-flash" data="rubber_banner.swf" height="100" width="100%"><param name="movie" value="rubber_banner.swf"></object>

Давайте проверим результат:

Демонстрация

А теперь попробуйте изменить размеры окна браузера. Заметили? Вместе с размерами окна браузера изменяется и наш баннер (по крайней мере, это происходит во всех браузерах, которые мне сейчас доступны). Баннер, фактически, стал резиновым. Что и требовалось сделать.

И на этом у меня всё. Спасибо за внимание.

Исходники к уроку можно скачать по этой ссылке (под Adobe Flash CS6).

Автор: admin

Дата добавления: 2015-01-09

Просмотров: 3938

Рейтинг поста: +3-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-02-16
Max, плохо понял вашу мысль. Событие работает - изменение размеров окна приводит к изменениям в флешке. Но вот суть этих изменений для меня осталась непонятной.
Комментатор
Комментарий добавил(а): Max
Дата добавления: 2015-02-16
Что-то подобное попробовал сделать на as3
_код_
var normalWidth:Number;
var normalHeight:Number;

this.stage.scaleMode = "noScale";
this.stage.align = "TL";

this.normalWidth = this.stage.stageWidth;
this.normalHeight = this.stage.stageHeight;

mc2.xRatio = mc2.x / this.stage.stageWidth;
mc2.yRatio = mc2.y / this.stage.stageHeight;

this.stage.addEventListener(Event.RESIZE, resizeHandler);

resizeHandler();

function resizeHandler(e:Event = null):void {

mc1.scaleX = this.stage.stageWidth / this.normalWidth;
mc1.scaleY = this.stage.stageHeight / this.normalHeight;

mc2.x = this.stage.stageWidth * mc2.xRatio;
mc2.y = this.stage.stageHeight * mc2.yRatio;
}
_код_
Ну и там внутри два квадратика вылезают на сцену. Окошко по габаритам изменяю и вроде как мувики становятся толще-тоньше, но когда кнопку отпускаю - возвращаются к своим начальным размерам. Не знаю, должно так быть или нет.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика