0

ご挨拶。

Flash-HTML ハイブリッド Web サイト用のアニメーション ホームページを開発していますが、標準のために、私のソリューションは難しいことがわかっています。私はJavascriptのプロではないので、助けていただければ幸いです!

ここにランダウンがあります：

Flash ユーザーの場合、HTML ページは556 ピクセルの高さで始まる可変高 AS3 Flash ムービーを読み込み、アニメーション シーケンスの終了後、Actionscript + JavaScript を介して高さ 250 ピクセルにトゥイーンします。

このムービー シーケンスを開始するために -- (左下) -- MooTools を介して Flash ムービーの初期の高さを設定しようとしています。そのため、ユーザーが Flash または Javascript を有効にしていない場合、高さの低い画像領域が表示されます。代替画像コンテンツと HTML コンテンツが表示されます(右下)。

Element.setStyleCSS で高さを指定していないため、swfObject が実行される時点でムービーが崩壊します。ユーザーが Flash を持っていない場合、デフォルトで静止画像の高さに設定されます。

ここに私の質問があります: 幅/高さ @ 100% に設定されているときに、高さ変数を swfobject に動的に渡す方法を知っている人はいますか? 2 つのページの高さで作業しようとして、理由もなく自殺していませんか?

画像シーケンス:
左 - HTML ナビゲーションが下にある最初の Flash ムービー
右 - HTML ナビゲーションとコンテンツが下にあるシーケンスの最後にサイズ変更されたムービー。Flash なしのバージョン (静止画像) と同じように見えます。

代替テキスト http://client.deicreative.com/op/images/twopages.jpg

                                           ^^ should land here for users w/o Flash

<script type="text/javascript">
  <!--
  window.addEvent('domready', function() {
     $('flashContent').setStyle('height', 556); // sets height for initial movie
     $('homeContent').setStyle('display', 'none'); // hides homepage text + photos below
     doSwfObject(); // attempting to start swfObject after setStyle is done
  });
  function resizePage(h) { // to be called from AS3
   var tweenObj = new Fx.Tween('flashContent');
   tweenObj.start('height', h);
  }
  function doSwfObject(){
   var flashvars = {};
   var params = { scale: "noScale" };
      var attributes = { id: "flashContent", name: "flashContent" };
   swfobject.embedSWF("swf/homeMovie.swf", "flashContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
   alert(document.getElementById('flashContent').style.height); 
   // alerts & shows correct height, but page collapses after hitting 'ok'
  }
  //-->
</script>
4

4 に答える 4

2

最も簡単な解決策は、SWF をラッパー DIV に埋め込むことです。SWF をラッパー DIV の幅/高さ 100% に設定し、JS を使用して <object> 自体ではなく、ラッパー DIV のサイズを変更します。その方法でバグが少なくなります。

SWFObject 2 はターゲット DIV をオブジェクトに置き換えるため、マークアップに追加の div が必要になります。

<div id="wrapper">
   <div id="flashcontent"></div>
</div>

になる

<div id="wrapper">
   <object id="flashcontent" width="100%" height="100%" (etc.) ></object>
</div>
于 2009-11-14T08:23:05.550 に答える
1

ここに何かを投稿するという行為は、問題を考えるのに役立つと思います-投稿した後、答えがより明確になりました. 後でこれに出くわした人のための私の解決策は次のとおりです。

Flash ムービーの高さをアニメーション化し、Flash を使用しないユーザー向けに短い高さを維持しながら (上の画像を参照)、シーケンスの完了後にムービーの高さをトゥイーンするのと同じ方法で JavaScript を使用します。結果は、新聞の Web サイトのプッシュダウン広告に似ています。

AS3 では、プリロードが完了した後、Javascript にフラッシュ ムービー コンテナーの高さをトゥイーンするように指示します (簡略化して、明らかにプリロード コードはありません)。

package {
   import flash.display.MovieClip;
   import flash.display.StageAlign;
   import flash.display.StageScaleMode;
   import flash.external.ExternalInterface;

    public class HomeMovie extends MovieClip {

       private var stageHeight:uint;

       public function HomeMovie(){

           this.stage.scaleMode = StageScaleMode.NO_SCALE;
           this.stage.align = StageAlign.TOP_LEFT;

           stageHeight = 556;
           // Tell javascript the stage needs resizing.
           if (ExternalInterface.available) {
           ExternalInterface.call("resizePage", stageHeight);
           }
        }
    }

}

JavaScript の場合 (MooTools 経由):

<script type="text/javascript">
<!--
window.addEvent('domready', function() { // hide content on home-page below movie
   $('homeContent').setStyle('display', 'none');
});
function resizePage(h) {
    var tweenObj = new Fx.Tween('flashContent', {
        property:'height',
        duration:500,
        transition:Fx.Transitions.Quad.easeOut
    });
    tweenObj.start(h);
}
//-->
</script>

おそらくさらに一歩進んで、ホームページのコンテンツを非表示にする前に Flash をチェックして、ユーザーが Javascript を持っていても Flash を持っていない場合に発生しないようにします。繰り返しますが、これはすべて標準のためです。

于 2009-11-13T18:58:34.060 に答える
0

SWFForceSize を試しましたか? これは SWFObject アドオンであり、役立つ可能性があります。使用しない場合でも、ソース コードを見て、どのように機能するかを確認できます。

于 2009-11-13T04:03:15.283 に答える
0

ところで、Mootools を使用する場合は SWF オブジェクトは必要ありません。これは、SWFObject が行うすべてのことを行う Swiff と呼ばれる呼び出しがあるためです。:D

于 2009-12-03T09:37:15.267 に答える