Swfobject et MooTools: Hauteur du film dynamique

Question

Salutations.

Je développe une page d'accueil animée pour un site hybride Flash-HTML, et pour les standards, ma solution s'avère difficile. Je ne suis pas un pro Javascript, donc toute aide est appréciée!

Voici la course vers le bas:

Pour les utilisateurs Flash, page HTML charge une hauteur variable film Flash AS3 qui débutera à 556 pixels de haut, et après avoir terminé sa séquence d'animation, tween via Actionscript + JavaScript à 250 pixels de haut. Pour lancer cette séquence de film - (en bas à gauche) - Je tente de définir la hauteur initiale du film Flash via MooTools, donc si les utilisateurs n'ont pas Flash ou Javascript activé, ils verront la zone d'image de plus courte hauteur avec un contenu d'image alternatif et du contenu HTML a révélé (en bas à droite).

Element.setStyle définit la hauteur juste bien jusqu'à ce que swfObject s'exécute, à quel point le film s'effondre puisque je ne spécifie pas de hauteur via CSS. Si les utilisateurs ne disposent pas de Flash, la hauteur d'une image statique est définie par défaut.

Donc voici ma question: Est-ce que quelqu'un sait comment passer dynamiquement une variable de hauteur à swfobject quand il est mis en largeur/hauteur @ 100%? Est-ce que je me tue sans raison en essayant de travailler avec deux hauteurs de page?

Séquence d'images:
gauche - Flash movie initial avec la navigation HTML ci-dessous
droit - film redimensionnée à la fin de la séquence avec HTML nav & contenu ci-dessous, regarde la même chose que personne ne version de Flash (image statique)

alt text 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> 

Answer 1

Je pense que le fait de poster quelque chose ici m'aide à réfléchir au problème - après quoi la réponse est devenue plus claire. Donc, voici ma solution pour ceux qui trébuchent à travers cela plus tard. Pour animer la hauteur du film Flash à son état initial et plus élevé tout en conservant une hauteur plus courte pour les utilisateurs non Flash (voir images ci-dessus), j'utilise JavaScript de la même manière que la hauteur du film une fois la séquence terminée. Le résultat ressemble à une publicité push-down sur un site Web de journal.

En AS3, après préchargement est fait, je dis Javascript interpoler la hauteur du conteneur de film flash (simplifié, évidemment - il n'y a pas de code de préchargement):

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

} 

En JavaScript (via 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> 

Je vais probablement prendre un peu plus loin et vérifier flash avant de cacher le contenu home-page, de sorte qu'il ne se produira pas si l'utilisateur a Javascript mais pas flash. Encore une fois, tout cela est pour les normes.

Answer 2

Avez-vous essayé SWFForceSize? C'est un addon SWFObject et ça pourrait vous aider. Même si vous ne l'utilisez pas, vous pouvez jeter un coup d'œil au code source pour voir comment ils font les choses.

Answer 3

La solution la plus simple consiste à intégrer votre fichier SWF dans un wrapper DIV. Définissez le SWF sur 100% width/height du wrapper DIV, puis utilisez JS pour redimensionner le wrapper DIV, pas l'objet < lui-même > lui-même. Moins buggy de cette façon.

Depuis SWFObject 2 remplace la DIV cible avec l'objet, vous aurez besoin d'un div supplémentaire dans votre balisage:

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

devient

<div id="wrapper"> 
    <object id="flashcontent" width="100%" height="100%" (etc.) ></object> 
</div> 

Answer 4

Btw vous n'avez pas besoin objet SWF lorsque en utilisant Mootools car il a un appel appelé Swiff qui fait tout ce que fait SWFObject et puis certains! : D