Question

我已经整理了example page detailing my problem

我的网站将有一个主包装器，设置为兼容浏览器的max-width属性。它最大伸展到940px。按比例缩小时，我希望swf与它成比例。就像应用宽度百分比的图像一样。 flash动画的尺寸为940×360像素。

我似乎无法弄清楚要添加到embed标记的正确属性以使其执行此操作。

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

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

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

alt text

如何正确制作此比例？添加noscale param仅裁剪图像。瑞士法郎的高度也不会缩放。

我可以在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;

我们的想法是按比例缩放内容。

然后，您将为resize事件添加事件侦听器并缩放/重绘背景。

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

我为事件处理程序参数设置了一个默认值，因此你可以在没有时调用该函数派遣活动

e.g。

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创建了一个解决方案。这很简单。

首先，我为具有最大可能高度的flash电影嵌入了禁用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);
});

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

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

3 个答案: