moi-zag-dom.ru
Меню стала праздничного

Male
21.05.2015, 13:22


задача: научиться создавать флэш ролики, занимающие всё окно броузера.

Рецепт рассказывает о том, как организовать изменение расположения и размеров клипов в зависимости от размеров окна флэш плеера (или плагина). Keep it simple. :)

назад к списку уроков и рецептов


1. что и зачем

2. как организовать резиновый флэш ролик
    2.1  общий механизм
    2.2  приём, облегчающий жизнь

3. результат / исходник


1. Что и зачем

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

Кроме дизайнерских нужд, резиновость может понадобиться еще в одном случае — если вы не знаете заранее, какой может оказаться видимая область ролика в странице, или предполагаете, что может понадобиться изменить размер ролика на странице, не прибегая к дополнительной помощи флэш-разработчика.

в начало

2. Как организовать резиновый флэш ролик

Главное — сделать так, чтобы набор действий по позиционированию объектов выполнялся при каждом изменении габаритов окна.

Общий механизм. За информацию о размерах и настройках сцены ролика отвечает встроенный класс Stage. Этот класс обладает несколькими статическими свойствами, которые нам понадобятся:

  • Stage.width — ширина окна ролика в хтмл странице или в флэш плеере.
  • Stage.height — высота окна ролика в хтмл странице или в флэш плеере.
  • Stage.scaleMode — режим масштабирования сцены. Возможные значения этого свойства и подробное описание их действия есть в статье хэлпа. Скажу только, что нам понадобится режим Stage.scaleMode = "noScale", при котором флэш не будет пытаться масштабировать содержимое ролика под габариты окна.
  • Stage.align — выравнивание cодержимого ролика в окне плеера или броузера. Свойство указывает выравнивание по вертикали и горизонтали. В примерах к этому материалу я буду использовать выравнивание по верхнему левому углу окна, от есть Stage.align = "TL"(T — top, L — left). Мне кажется, это удобнее всего. Но, в принципе, вы можете использовать любой другой удобный вам вид выравнивания, это не существенно.
Класс Stage передает сообщения о событии "onResize" при изменении размеров окна плеера или броузера.

Подробнее о механизме передачи событий и о том, что это вообще такое, можно почитать на сайте Роста в статье "Модель событий Flash MX".

Сейчас нам важно понимать только одно: при изменении габаритов окна автоматически сработает метод onResize во всех специально подготовленных к этому объектах. Чтобы подготовить какой-то объект к реагированию на изменения габаритов окна, нужно выполнить два действия:

  • Создать в объекте метод onResize
  • Связать этот объект с классом Stage
Внимание! Механизм события onResize будет работать только при включенном режиме Stage.scaleMode = "noScale".

Первое можно сделать так:

// создадим объект объект_реагирующий = {}; // создадим метод onResize объект_реагирующий.onResize = function () { / какие-то действия по масштабированию или позиционированию клипов на сцене в соответствии с текущими значениями Stage.width и Stage.height / } Теперь необходимо сообщить классу Stage, что наш объект_реагирующий должен получать извещения об изменениях габаритов окна. Это делается так: Stage.addListener(объект_реагирующий); Переводя эту строку скрипта буквально: "добавить объект_реагирующий в ряды слушателей класса Stage". Стоит отметить, что "слушатель" — это, в данном случае, термин. Слушателями принято называть объекты, которые подписаны на получение извещений о каких-то событиях.

Итак, рецепт подготовки объекта к реагированию на изменения габаритов окна:

Stage.scaleMode = "noScale"; // создадим объект объект_реагирующий = {}; // создадим метод onResize объект_реагирующий.onResize = function () { / какие-то действия по масштабированию или позиционированию клипов на сцене в соответствии с текущими значениями Stage.width и Stage.height / } // наладим связь между классом Stage и нашим объектом Stage.addListener(объект_реагирующий); В принципе, не обязательно создавать новый объект для помещения в него метода onResize. Вы так же можете использовать для это любой из существующих объектов любого типа, например _root: Stage.scaleMode = "noScale"; _root.onResize = function () { // какие-то действия } Stage.addListener(_root); Это удобнее и логичнее, если действий всего одно — два.

Пример:

// код в кадре главной линейки кадров (_root) // настройки сцены Stage.scaleMode = "noScale"; Stage.align = "TL"; / создадим текстовое поле, которое будет содержать подпись и располагаться в правом нижнем углу видимой области ролика / this.createTextField("TF", 0, 0, 0, 0, 0); TF.autoSize = true; TF.text = "подпись в правом нижнем углу"; // метод onResize создается прямо в _root onResize = function () { / при каждом изменении габаритов окна ставим текстовое поле на свое место / this.TF._x = Stage.width-this.TF.textWidth; this.TF._y = Stage.height-this.TF.textHeight; }; Stage.addListener(this);
Результат 1: [посмотреть].

Попробуйте изменить размер окна броузера и убедитесь, что подпись всегда остается в правом нижнем углу окна флэша.

Приём, облегчающий жизнь. Часто при разработке ролика с изменяющимися габаритами требуется позиционировать много объектов в зависимости от размеров окна. Причем довольно часто требуется пропорциональное изменение габаритов/позиции клипов. Это можно сделать так, как было показано в примере 1, а можно придумать что-нибудь более интересное. :)

Например, создадим на сцене следующие объекты:


Теперь заставим все эти объекты позиционироваться пропорционально размерам окна, считая "нормальным" размером 400х300 (пока что зададим только изменение позиции). // настройки сцены Stage.scaleMode = "noScale"; Stage.align = "TL"; // создадим объект для реагирования на изменение габаритов окна var resize_obj = {}; // запомнили нормальную ширину resize_obj.normal_width = 400; // запомнили нормальную высоту resize_obj.normal_height = 300; // самое главное: список объектов, которые будем перемещать resize_obj.position = [square, // квадрат circle, // круг triangle, // треугольник TF0, TF1, TF2, TF3 // текст. поля ]; // собственно, реакция на изменения габаритов окна resize_obj.onResize = function() { var clip; for (var i in this.position) { // перебираем все клипы в списке clip = this.position[i]; // восстанавливаем пропорции для каждого клипа clip._x = Stage.widthclip._xRatio; clip._y = Stage.heightclip._yRatio; } }; // связь между классом Stage и объектом resize_obj Stage.addListener(resize_obj); / запоминаем пропорции (отношение координат к нормальной ширине/высоте) / var clip; for (var i in resize_obj.position) { // перебираем все клипы в списке clip = resize_obj.position[i]; // пропорция по горизонтали clip._xRatio = clip._x/resize_obj.normal_width; // пропорция по вертикали clip._yRatio = clip._y/resize_obj.normal_height; }
Результат 2: [посмотреть].

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

Теперь добавим изменение размеров. Пусть клип с кругом всегда будет отмасштабирован пропорционально габаритам окна, квадрат пусть будет растянут только по горизонтали а треугольник вытянут только по вертикали. Чтобы добавить изменение размеров, нужно запомнить пропорции высоты и ширины так же, как мы запоминали пропорции для координат. Добавленные части отмечены жирным шрифтом.

// настройки сцены Stage.scaleMode = "noScale"; Stage.align = "TL"; // создадим объект для реагирования на изменение габаритов окна var resize_obj = {}; // запомнили нормальную ширину resize_obj.normal_width = 400; // запомнили нормальную высоту resize_obj.normal_height = 300; // самое главное: список объектов, которые будем перемещать resize_obj.position = [square, // квадрат circle, // круг triangle, // треугольник TF0, TF1, TF2, TF3 // текст. поля ]; // собственно, реакция на изменения габаритов окна resize_obj.onResize = function() { var clip; for (var i in this.position) { // перебираем все клипы в списке clip = this.position[i]; // восстанавливаем пропорции координат для каждого клипа clip._x = Stage.widthclip._xRatio; clip._y = Stage.heightclip._yRatio; // если для клипа определена пропорция по ширине if (clip._widthRatio != undefined) { clip._width = Stage.widthclip._widthRatio; } // если для клипа определена пропорция по высоте if (clip._heightRatio != undefined) { clip._height = Stage.heightclip._heightRatio; } } }; // связь между классом Stage и объектом resize_obj Stage.addListener(resize_obj); / запоминаем пропорции координат (отношение координат к нормальной ширине/высоте) / var clip; for (var i in resize_obj.position) { // перебираем все клипы в списке clip = resize_obj.position[i]; // пропорция координаты по горизонтали clip._xRatio = clip._x/resize_obj.normal_width; // пропорция координаты по вертикали clip._yRatio = clip._y/resize_obj.normal_height; } / запоминаем пропорции высоты и ширины (отношение габарита к нормальной ширине/высоте) / circle._widthRatio = circle._width/resize_obj.normal_width; circle._heightRatio = circle._height/resize_obj.normal_height; square._widthRatio = square._width/resize_obj.normal_width; triangle._heightRatio = triangle._width/resize_obj.normal_height;
Результат 3: [посмотреть].

Попробуйте изменять размеры окна броузера и посмотрите, как перемещаются и масштабируются объекты. Обратите внимание, что буквы в текстовом поле справа не деформируются при изменении свойства _width поля. Вместо этого текстовое поле перестраивает свои строки в соответствии с заданной шириной.

Последний штрих к нашей чудо-функции onResize: добавим несколько строк для отображения текущего размера сцены флэша.

_root.TF1.text = "текущие габариты ролика: "; _root.TF1.text += Stage.width+"x"; _root.TF1.text += Stage.height; Теперь мы всегда будем знать, каков текущий размер сцены флэша в пикселях.

Результат 4: [посмотреть] [исходник]

в начало
назад к списку уроков и рецептов


Источник: http://noregret.org/tutor/elastic/


Просмотров: 2018 Комментариев: 23

Похожие публикации
Имя:*
E-Mail:
Комментарий:
Введите код: *
Как солить гуся в домашних условиях
Copyright © 2014, moi-zag-dom.ru. Все права защищены.