【问题标题】:How can I remove a background image or color from Flash-exported HTML and JS如何从 Flash 导出的 HTML 和 JS 中删除背景图像或颜色
【发布时间】:2016-01-03 02:53:10
【问题描述】:

我用 Adob​​e Flash CC 做了一些动画,然后用 HTML 和 JS 导出,但是我找不到去除背景的方法。

我看到了这个功能,但我不知道如何删除它。

这里是html:

<html>
<head>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.6.1.min.js"></script>
<script src="Anime_V3.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    images = images||{};
    ss = ss||{};

    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
loader.loadFile({src:"images/Anime_V3_atlas_.json", type:"spritesheet", id:"Anime_V3_atlas_"}, true);
    loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
    var queue = evt.target;
    ss["Anime_V3_atlas_"] = queue.getResult("Anime_V3_atlas_");
    exportRoot = new lib.Anime_V3();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
    <canvas id="canvas" width="1340" height="605" style="background-color:#FFFFFF"></canvas>
</body>
</html>

对此我很抱歉,但是 JS 太大了,无法放在这里,所以我把它放在 pastebin 上,这是链接:

http://pastebin.com/fvqpMChM

【问题讨论】:

    标签: javascript html flash animation


    【解决方案1】:

    我找到了一种解决方法,可以让您使用透明背景导出画布。您可以将这段代码添加到实际 Flash 文件中的第一帧:

    document.getElementById("canvas").style.backgroundColor = "rgba(255,255,255,0)";
    

    这样做的目的是在用户加载作品时以画布元素为目标,然后将画布作品的背景从您的舞台颜色更改为完全透明的白色。这应该在所有支持画布的浏览器中都能正常工作,而且每次导出时都不需要更改文件。

    【讨论】:

    • 谢谢,这对我有用。感谢您的时间和帮助:)
    • @JoeDimaggio 很高兴我能帮上忙。 :)
    【解决方案2】:

    根据您的 FLA 的背景颜色,背景作为内联样式添加到画布中。您可以删除该属性。

    <canvas id="canvas" width="1340" height="605" style="background-color:#FFFFFF"></canvas>
    
    <canvas id="canvas" width="1340" height="605"></canvas>
    

    请注意,如果您重新发布/导出内容,它将覆盖您的 html,因此您可能需要在发布设置中将其关闭。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-01-18
      • 2020-06-03
      • 1970-01-01
      • 1970-01-01
      • 2018-07-01
      • 1970-01-01
      • 2020-06-10
      • 1970-01-01
      相关资源
      最近更新 更多