如何讓Flash影片能夠比例縮放？

Question

我已經把一個example page detailing my problem

我的網站將不得不被設置爲兼容的瀏覽器一個最大寬度屬性主包裝。在最大值時它將延伸至940px。當縮小比例時，我希望swf按比例縮放。就像應用了寬度百分比的圖像一樣。 Flash動畫的尺寸爲940×360像素。

我似乎無法找出正確的屬性添加到嵌入標籤來讓它做到這一點。

我目前使用jquery flash嵌入，但我打開其他選項，雖然這是我的理想。

在這個例子中，我將閃光背景設置爲黑色。

當調整瀏覽器窗口的大小時，Flash影片不會按比例縮放到div，只有照片會留下空白畫布（黑色），而div高度保持不變。我無法在CSS中添加高度值。

我如何正確地做這個規模有多大？添加noscale參數只會裁剪圖像。 swf的高度也不會縮放。

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

Answer 1

感謝George Profenza給我所有的動作代碼。有太多的閃爍，我不熟悉actionscript知道如何解決它。儘管如此，大的道具。

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

然後幾乎調整電影作爲瀏覽器窗口被調整大小並從所述新的寬度由原始的寬高比分割計算高度。這段代碼可以清理很多，但我希望它能幫助別人避免幾個小時的煩惱。

Answer 2

我有幾個想法，從使用ExternalInterface的JavaScript的調用和動作函數，到傳遞給swf的FlashVar，讓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; 
} 

我已經設置了事件處理程序參數默認的，所以你可以調用該函數withouth的 分派事件

例如

stageResizeHandler(); 

代替

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

您可能需要調用該函數，當你initiallize，不知道。

您還需要根據舞臺的大小按比例調整內容的大小。 所以這裏的一些我測試代碼：

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

本文將有望涵蓋您需要的內容：http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/。它也是純粹的CSS！