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

Рейтинг поста: 4

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

Социальные закладки:

Комментарии:

Комментарий добавил(а): 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;
}
_код_
Ну и там внутри два квадратика вылезают на сцену. Окошко по габаритам изменяю и вроде как мувики становятся толще-тоньше, но когда кнопку отпускаю - возвращаются к своим начальным размерам. Не знаю, должно так быть или нет.

Добавить комментарий: