Как сделать так, чтобы флеш ролик масштабировался пропорционально ширине div? - PullRequest
Новая
       22

Как сделать так, чтобы флеш ролик масштабировался пропорционально ширине div?

2 голосов
/ 20 июня 2009

Я собрал пример страницы с описанием моей проблемы

Мой веб-сайт будет иметь основную оболочку, для которой установлены свойства max-width для совместимых браузеров. Максимально растянется до 940 пикселей. При уменьшении я бы хотел, чтобы SWF пропорционально масштабировался. Как изображение с примененным процентом ширины. Флэш-ролик имеет размеры 940 × 360 пикселей.

Кажется, я не могу определить правильные атрибуты, которые нужно добавить в тег embed, чтобы заставить его это сделать.

В настоящее время я использую jquery flash embed, но я открыт для других вариантов, хотя это мой идеал.

В примере я установил черный фон вспышки.

При изменении размера окна браузера флэш-ролик не масштабируется пропорционально div, а только фотография, оставляя пустой холст (черный), а высота div остается неизменной. Я не могу добавить значение высоты в CSS.

alt text

Как мне сделать эту шкалу правильно? Добавление параметра noscale только обрезает изображение. Высота SWF также не масштабируется.

Весь мой код можно посмотреть в источнике связанных примеров .

Ответы [ 3 ]

4 голосов
/ 20 июня 2009

Надеемся, что эта статья охватит все, что вам нужно: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/. Это также чистый CSS!

3 голосов
/ 20 июня 2009

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

Я создал решение, используя jquery. Это очень просто.

Сначала я вставляю флэш-ролик с максимально возможной высотой, для людей с отключенным css. Он по-прежнему будет масштабироваться с шириной, но покажет фон холста, как в связанных примерах. 

$(selector).flash({
    src: swf,
    width: '100%',
    height: '360',
});

//get ratio from native width and height
var nativeWidth = 940;
var nativeHeight = 360;
var ratio = nativeWidth/nativeHeight;

var containerWidth = $(selector).width();
var containerHeight = containerWidth/ratio;
$(selector+' embed').height(containerHeight);

//resize flash movie
$(window).resize(function() {
    containerWidth = $(selector).width();
    containerHeight = containerWidth/ratio;
    $(selector+' embed', selector+' object').height(containerHeight);
    $(selector).height(containerHeight);
});

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

3 голосов
/ 20 июня 2009

У меня было несколько идей: от вызова и actionScript-функции из javascript с использованием ExternalInterface до передачи FlashVars в swf, просто чтобы swf узнал размер div, до более простой идеи.

здесь идет.

Имеют 1 мувиклип в качестве фона и 1 мувиклип, содержащий голову.

Я думаю, что вашим лучшим выбором будет вариант «Это флэш-ролик сверху» из вашего примера. Ваш лучший будет настройка 

stage.scaleMode = StageScaleMode.NO_SCALE;

или 

stage.scaleMode = StageScaleMode.SHOW_ALL;

Идея заключается в пропорциональном масштабировании контента.

Затем вы добавляете прослушиватель событий для события изменения размера и масштабируете / перерисовываете фон. 

stage.addEventListener(Event.RESIZE, stageResizeHandler);

function stageResizeHandler(event:Event = null):void{
   //assuming your background is called "background"
   background.width = stage.stageWidth;
   background.height = stage.stageHeight;
   //if content needs recentering, assuming "content" is the name used
   content.x = (stage.stageWidth - content.width) * .5;
   content.y = (stage.stageHeight - content.height * .5;
}

Я установил значение по умолчанию для аргумента обработчика событий, чтобы вы могли вызывать эту функцию без отправка события

, например 

stageResizeHandler();

вместо 

stage.dispatchEvent(new Event(Event.RESIZE));

Возможно, вам придется вызывать эту функцию при инициализации, не уверен.

Также вам необходимо пропорционально изменить размер содержимого в зависимости от размера сцены. вот код, который я протестировал: 

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;


stage.addEventListener(Event.RESIZE, stageResizeHandler);

stageResizeHandler();

function stageResizeHandler(event:Event = null):void{
    //resize bg
    bg.width = stage.stageWidth;
    bg.height = stage.stageHeight;

    //scale proportionally
    if(content.width > stage.stageWidth || content.height > stage.stageHeight){
        var ratio:Number = getRatio(content);
        if(stage.stageWidth > stage.stageHeight){
            content.height = stage.stageHeight;
            content.width = content.height * ratio;
        }else 
        if(stage.stageWidth < stage.stageHeight){
            content.width = stage.stageWidth;
            content.height = content.width / ratio;
        }
    }else {
        content.scaleX = content.scaleY = 1;
    }

    //centre
    content.x = (stage.stageWidth - content.width) * .5;
    content.y = (stage.stageHeight - content.height) * .5;
}

function getRatio(target:MovieClip):Number{
    var ratio:Number; 
    target.width > target.height ? ratio = (target.width / target.height) : ratio = (target.height / target.width);
    return ratio;
}

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

...