如何使 Flash 电影按比例缩放到 div 宽度？

Question

我已经整理了一个example page detailing my problem

我的网站将有一个主包装器，该包装器设置为兼容浏览器的最大宽度属性。它将最大延伸到 940 像素。当按比例缩小时，我希望 swf 与它成比例地缩放。就像应用了宽度百分比的图像。 Flash 影片的尺寸为 940 × 360 像素。

我似乎无法找出正确的属性来添加到 embed 标记以使其执行此操作。

我目前正在使用 jquery flash embed，但我对其他选项持开放态度，尽管这是我的理想选择。

在示例中，我将闪光灯背景设置为黑色。

当调整浏览器窗口的大小时，flash 影片不会按比例缩放到 div，只有照片会，留下空白画布（黑色），而 div 高度保持不变。我无法在 CSS 中添加高度值。

如何正确制作这个比例？添加 noscale 参数只会裁剪图像。 swf 的高度也不会按比例缩放。

我所有的代码都可以在linked examples source查看。

Answer 1

这篇文章有望涵盖您需要的内容：http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/。它也是纯 CSS！

Answer 2

我有几个想法，从使用 ExternalInterface 从 javascript 调用和 actionscript 函数，到将 FlashVars 传递给 swf 以让 swf 知道 div 的大小，再到更简单的想法。

来了。

有 1 个 MovieClip 作为背景，1 个 MoveClip 包含头部。

我认为您最好的选择是您示例中的“这是顶部的 Flash 电影”选项。 你最好的将是设置

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;
}

不幸的是，我注意到某些尺寸有一些闪烁。我猜测缩放比例和比率的变化经常取决于您调整大小的方式。

Answer 3

感谢 George Profenza 给我所有的动作脚本代码。闪烁太多，我对动作脚本不够熟悉，不知道如何修复它。不过，将这么多东西放在一起的大道具。

我使用 jquery 创建了一个解决方案。很简单。

首先，我为禁用 css 的人嵌入了具有最大可能高度的 Flash 电影。它仍会随宽度缩放，但会像链接示例中一样显示画布背景。

$(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);
});

然后在调整浏览器窗口大小时调整电影的大小，并根据新宽度除以原始纵横比计算高度。这段代码可以清理很多，但我希望它可以帮助其他人避免数小时的烦恼。