如何从 Flash 导出的 HTML 和 JS 中删除背景图像或颜色
How can I remove a background image or color from Flash-exported HTML and JS
我用Adobe 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 上,这里是 link:
根据 FLA 的背景颜色,背景作为内联样式添加到 canvas。您可以只删除该属性。
<canvas id="canvas" width="1340" height="605" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas" width="1340" height="605"></canvas>
请注意,如果您 re-publish/export 内容,它将覆盖您的 html,因此您可能需要在发布设置中将其关闭。
我找到了一个解决方法,可以让您使用透明背景导出 canvas。您可以将这一小段代码添加到实际 Flash 文件中的第一帧:
document.getElementById("canvas").style.backgroundColor = "rgba(255,255,255,0)";
这样做的目的是在您的用户加载作品时将 canvas 元素作为目标,然后将 canvas 作品的背景从舞台颜色更改为完全透明白色的。这应该在所有支持 canvas 的浏览器中正常工作,而且每次导出时都不需要更改文件。
我用Adobe 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 上,这里是 link:
根据 FLA 的背景颜色,背景作为内联样式添加到 canvas。您可以只删除该属性。
<canvas id="canvas" width="1340" height="605" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas" width="1340" height="605"></canvas>
请注意,如果您 re-publish/export 内容,它将覆盖您的 html,因此您可能需要在发布设置中将其关闭。
我找到了一个解决方法,可以让您使用透明背景导出 canvas。您可以将这一小段代码添加到实际 Flash 文件中的第一帧:
document.getElementById("canvas").style.backgroundColor = "rgba(255,255,255,0)";
这样做的目的是在您的用户加载作品时将 canvas 元素作为目标,然后将 canvas 作品的背景从舞台颜色更改为完全透明白色的。这应该在所有支持 canvas 的浏览器中正常工作,而且每次导出时都不需要更改文件。