divムービーを作成するにはどうすればいいですか？

Question

私は一緒に入れましたexample page detailing my problem

私のウェブサイトは、互換性のあるブラウザのためのmax-widthプロパティに設定されているメインラッパーを持っています。最大940pxまで伸びます。スケールダウンすると、swfはそれに比例してスケールされます。幅のパーセントが適用されたイメージのようです。フラッシュムービーのサイズは940×360ピクセルです。

これを行うために埋め込みタグに追加する正しい属性がわからないようです。

私は現在、jqueryのフラッシュ埋め込みを使用していますが、これは私の理想ですが、他のオプションにも開いています。

この例では、フラッシュの背景を黒に設定しています。

ブラウザウィンドウのサイズを変更すると、divムービーは同じままの状態で、ブランクキャンバス（黒色）を残して、写真だけがdivに比例して縮尺されません。 CSSに高さの値を追加することはできません。私が正しく、このスケールを作るにはどうすればよい

？ノースケールのパラメータを追加すると、画像が切り抜かれます。 swfの高さもスケールされません。

すべてのコードはlinked examples sourceでご覧になれます。

Answer 1

私にすべてのアクションスクリプトコードを与えてくれた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); 
}); 

そしてほとんどのブラウザウィンドウのサイズが変更されるムービーのサイズを変更し、元のアスペクト比で割った新しい幅と高さを計算します。このコードはたくさんクリーンアップすることができましたが、誰かが長時間の迷惑にならないように助けてくれることを願っています。

Answer 2

私はExternalInterfaceを使用してjavascriptから呼び出す関数とactionscript関数にいくつかのアイデアがありましたが、swfにFlashVarsを渡すだけでdivのサイズを知ることができました。

こちらです。

1つのMovieClipを背景として、1つのMoveClipにそのヘッドが含まれています。

あなたのベスト・ベットは、この例の「これはトップのフラッシュ・ムービーです」というオプションでしょう。 あなたの最高のアイデアは比例スケールコンテンツを持つことである

stage.scaleMode = StageScaleMode.NO_SCALE; 

または

stage.scaleMode = StageScaleMode.SHOW_ALL; 

を設定します。

次に、resizeイベントのイベントリスナーを追加し、背景を拡大縮小/再描画します。あなたはイベントなど

を派遣 withouthその関数を呼び出すことができますので、私は、イベントハンドラの引数のデフォルト値を設定した

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

あなたは必ず、あなたが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です。