Пытаясь получить прозрачный фон с Swiffy

Question

Я пытаюсь использовать Google Swiffy, чтобы конвертировать некоторые простые Flash в HTML5. Мне нужен результирующий вывод, чтобы иметь прозрачный фон. Я читал на других сайтах и здесь на SO, что удаление текста ("backgroundColor":-65536,) из HTML должно работать. Однако для меня это просто делает фон черным.

Возможно, конвертер Swiffy изменился, и это решение больше не работает. Есть ли у кого-нибудь другие альтернативы.

(Я использую Safari и Mobile Safari для тестирования)

Answer 1

Для самого простого использования сервиса Swiffy или *.swf.html, который они выводят (при условии, что вы используете jQuery где-то в вашем веб-приложении):

setTimeout(function() {
    $('#swiffycontainer *:first-child').css("background", "transparent");
}, 100);

Задержка состоит в том, чтобы подождать, пока Google не запишет их стиль в контейнерный div Это ужасное решение, потому что оно вызовет мерцание, если вы не управляете представлением div; Тем не менее, я полагаю, что большинство разработчиков управляют объектами swiffyobjects и создают свои собственные API для управления ими.

Answer 2

Ответ Google-

Если вам нужно сделать фон прозрачным, как это делается с помощью атрибута wmode="transparent", вы можете вставить следующий фрагмент кода в вывод Swiffy непосредственно перед вызовом stage.start ():

stage.setBackground (нуль);

Вы также можете заменить значение NULL любой допустимой строкой спецификации цвета CSS, чтобы переопределить цвет фона, определенный в преобразовании.

https://www.google.com/doubleclick/studio/swiffy/faq.html

работал на меня удачи

Answer 3

Вот еще один трюк CSS, который сработал для меня во время выполнения 5.2. я добавил class="swiffy-transparent" к #swiffycontainer div и применил этот CSS:

.swiffy-transparent svg g > g > rect {
    fill: transparent !important;
}

Answer 4

Это проще, чем вы думаете, только определите эту строку в вашем HTML-скрипте:

<script>

  var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
                               swiffyobject);

  stage.start();
  stage.setBackground(null); <!--and only have to add this line-->
</script>

Answer 5

Попробуйте установить background-color в transparent в вашем CSS с !important, Это сработало для меня.

#swiffycontainer div {
  background-color: transparent !important;
}

Answer 6

Извините, что отвечаю на мой собственный вопрос, но теперь я обнаружил, что метод удаления "backgroundColor: nnnn" в выводе Swiffy был нарушен Google в текущей версии среды выполнения Swiffy. Если вы также вернетесь к предыдущей версии среды выполнения, изменив:

SRC ="https://www.gstatic.com/swiffy/v5.2/runtime.js"

в

SRC ="https://www.gstatic.com/swiffy/v5.1/runtime.js"

вверху файла вы должны увидеть, что прозрачный фон работает правильно.

РЕДАКТИРОВАТЬ: Майкл Прескотт указал, что это решение не будет работать надежно из-за несоответствия между версией конвертера Swiffy и временем выполнения. Альтернативное решение, которое не зависит от присутствия экспортера 5.1, - это использовать другие решения, предложенные здесь. Попробуйте добавить следующую функцию в скрипт. Он опрашивает, чтобы увидеть, когда объект Swiffy установил свой предпочитаемый цвет фона, а затем он его заменяет.

(function() {
    var firstNode=document.getElementById('swiffycontainer').childNodes[1];
    //firstNode.style.visibility = "hidden";
    if (firstNode.style.background=="") {
        setTimeout(arguments.callee, 10);
    } else {
        firstNode.style.background = "none";
        //firstNode.style.visibility = "visible";
    }
})();

Это, кажется, не показывает сбой, когда Swiffy сначала устанавливает сплошной фон, а затем его заменяют. Однако для большей уверенности вы можете разрешить закомментированным строкам скрывать первый узел, пока не будет установлена ​​правильная прозрачность.

с уважением