Swfobject и MooTools: динамическая высота фильма - PullRequest
Новая
       21

Swfobject и MooTools: динамическая высота фильма

0 голосов
/ 13 ноября 2009

Привет.

Я занимаюсь разработкой анимированной домашней страницы для гибридного веб-сайта Flash-HTML, и ради стандартов мое решение оказывается трудным. Я не Javascript Pro, поэтому любая помощь приветствуется!

Вот сокращение:

Для пользователей Flash: HTML-страница загружает Flash-ролик AS3 с переменной высотой, который начинается с 556 пикселей , а после завершения анимационной последовательности анимацию движения через ActionScript + JavaScript до 250 пикселей. .

Чтобы запустить эту последовательность фильмов - (внизу слева) - Я пытаюсь установить начальную высоту фильма Flash с помощью MooTools, поэтому, если у пользователей не включены Flash или Javascript, они увидят область изображения более короткой высоты с альтернативным содержимым изображения и содержимым HTML, показанным (внизу справа) .

Element.setStyle отлично устанавливает высоту до тех пор, пока не запустится swfObject, после чего фильм сворачивается, так как я не определяю высоту с помощью CSS. Если у пользователей нет Flash, по умолчанию используется высота статического изображения.

Итак, вот мой вопрос: кто-нибудь знает, как динамически передавать переменную высоты в swfobject, когда она установлена ​​на width / height @ 100%? Я убиваюсь без причины, пытаясь работать с двумя страницами высоты?

Последовательность изображений:
Слева - Начальный Flash-ролик с HTML-навигацией ниже
Справа - Фильм с измененным размером в конце последовательности с 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 ]

2 голосов
/ 14 ноября 2009

Самое простое решение - встроить ваш SWF в оболочку DIV. Установите SWF на 100% ширину / высоту оболочки DIV, а затем используйте JS, чтобы изменить размер оболочки 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>
1 голос
/ 13 ноября 2009

Я думаю, что публикация чего-то здесь помогает мне продумать проблему - после этого ответ стал более ясным. Так что вот мое решение для тех, кто сталкивается с этим позже.

Чтобы анимировать высоту фильма Flash до его начального, более высокого состояния при сохранении меньшей высоты для пользователей, не относящихся к Flash (см. Изображения выше), я использую JavaScript точно так же, как и для анимации высоты фильма после завершения последовательности. Результат напоминает объявление на веб-сайте газеты.

В 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. Опять же, это все ради стандартов.

0 голосов
/ 03 декабря 2009

Кстати, вам не нужен объект SWF при использовании Mootools, поскольку у него есть вызов Swiff, который делает все, что делает SWFObject, а затем некоторые! : D

0 голосов
/ 13 ноября 2009

Вы пробовали SWFForceSize ? Это аддон SWFObject, и он может вам помочь. Даже если вы не используете его, вы можете взглянуть на исходный код, чтобы увидеть, как они работают.

...