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

我已经制定了一个计划

我的网站将有一个主包装器，它被设置为兼容浏览器的最大宽度属性。它将延伸到940px在最大范围内。缩小时，我希望swf与它成比例缩放。类似于应用了宽度百分比的图像。flash电影的尺寸为940×360像素

我似乎无法找出正确的属性来添加到嵌入标记中，以使其实现这一点

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

在本例中，我已将flash背景设置为黑色

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

如何正确制作此刻度？添加noscale参数只会裁剪图像。swf的高度也不成比例

---

我的所有代码都可以在中查看。

我有几个想法，从使用外部接口调用javascript中的actionscript函数，到将FlashVar传递给swf，让swf知道div的大小，再到一个更简单的想法

来吧

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

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

stage.scaleMode = StageScaleMode.NO_SCALE;

或

这个想法是让内容按比例缩放

然后为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

而不是

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

stage.scaleMode=StageScaleMode.NO_SCALE；
stage.align=StageAlign.TOP\u左；
stage.addEventListener（Event.RESIZE，stageResizeHandler）；
stageResizeHandler（）；
函数stageResizeHandler（事件：event=null）：void{
//调整背景大小
bg.width=stage.stageWidth；
bg.height=stage.stageHeight；
//按比例缩放
if（content.width>stage.stageWidth | | content.height>stage.stageHeight）{
var比率：数字=获取比率（内容）；
如果（stage.stageWidth>stage.stageHeight）{
content.height=stage.stageHeight；
content.width=content.height*比值；
}否则
if（阶段宽度<阶段高度）{
content.width=stage.stageWidth；
content.height=content.width/比值；
}
}否则{
content.scaleX=content.scaleY=1；
}
//中心
content.x=（stage.stageWidth-content.width）*.5；
content.y=（stage.stageHeight-content.height）*.5；
}
函数getRatio（目标：MovieClip）：数量{
var比率：数字；
target.width>target.height？比率=（target.width/target.height）：比率=（target.height/target.width）；
回报率；
}

---

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

谢谢乔治·普洛芬扎给我所有的动作脚本代码。闪烁太多了，我对actionscript不够熟悉，不知道如何修复它。不过，把这么多东西放在一起的大道具

我使用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);
});

---

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

本文希望能涵盖您需要的内容：。它也是纯CSS

谢谢你的建议，不幸的是，我应该说明这只是一个示例图像。flash将是一个各种图像的照片幻灯片。我将把这个例子改成一些不那么简单的例子，以免误导。我真的很感激你能把这些都想清楚。这是解决问题的好办法。没问题。我意识到我错过了调整内容的部分，所以编辑了我的答案。谢谢你提醒我。希望这能帮上忙。哇，太酷了。我对AS不是很在行，所以我需要一段时间来处理这个问题。感谢您的这种方法，并写出了所有这些代码。这是一个非常有趣的想法。我会给你回电，告诉你进展如何。真的，再次谢谢你！很高兴我能帮忙！但我还没有弄清楚那件忽隐忽现的事，我现在没有时间。你可以得到我在这里使用的fla：那篇文章是纯金的。我已经搜索纯css解决方案很长一段时间了，这篇文章从来没有出现在搜索结果中。非常感谢。

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

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