CreateJS -靶向特定关键帧
我有一个使用Flash6和CreateJS生成的html5基本演示文稿。演示文稿基本上是一堆带有stop()；命令的闪存关键帧。现在，我的问题来了: 1.如何使用位于不同页面(类似于html锚)的链接来针对演示文稿中的特定框架? 2.使用某种开源库，在这些框架之间添加一些很酷的框架转换，有什么简单的方法吗？我是一个设计师，不是一个程序员，所以我只有很少的编码知识。任何帮助都将不胜感激。谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from main</title>
<script src="easeljs-0.6.0.min.js"></script>
<script src="tweenjs-0.4.0.min.js"></script>
<script src="movieclip-0.6.0.min.js"></script>
<script src="preloadjs-0.3.0.min.js"></script>
<script src="main.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/bg_b.jpg", id:"bg_b"},
];
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.main();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1024" height="768" style="background-color:#FFFFFF"></canvas>
</body>
</html>回答 1
Stack Overflow用户
发布于 2013-12-06 15:05:21
CreateJS通过提供javascript中的直接翻译来支持使用。例如，如果您向时间线添加了以下代码，CreateJS发布者就足够聪明地添加一个javascript调用以在该位置停止时间线。
/* js
this.stop();
*/要让链接跳过到主时间线中的某个位置，您需要使用gotoAndPlay或gotoAndStop，这取决于是否要继续播放。当CreateJS发布.fla时，它会创建一个名为exportRoot的主时间线的javascript实例。您可以使用此实例通过javascript操作时间线。
问题1:从另一页更改位置
现在以您的代码为例，请注意index.html页面链接到您的Flash导出页面(我称之为target.html)，其中包含了框架的不同哈希标记位置。还请注意，我已经将jquery库添加到导出的页面中，并在createjs.Ticker.addEventListener之后添加了几行(“tick”，stage)；基于当前的哈希添加到gotoAndStop，并侦听将来对gotoAndStop的哈希更改。
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a href="target.html#5">Goto frame 5</a>
<a href="target.html#10">Goto frame 10</a>
<a href="target.html#15">Goto frame 15</a>
<a href="target.html#20">Goto frame 20</a>
</body>
</html>target.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from main</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="easeljs-0.6.0.min.js"></script>
<script src="tweenjs-0.4.0.min.js"></script>
<script src="movieclip-0.6.0.min.js"></script>
<script src="preloadjs-0.3.0.min.js"></script>
<script src="main.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/bg_b.jpg", id:"bg_b"},
];
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.main();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
//When doc loads, check if there is a hash and gotoAndStop if there is
if(document.location.hash)
exportRoot.gotoAndStop(document.location.hash.replace('#', ''));
//Use jQUery to listen to the hash change event and gotoAndStop to new location when event fires
$(window).on('hashchange', function() {
exportRoot.gotoAndStop(document.location.hash.replace('#', ''));
});
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1024" height="768" style="background-color:#FFFFFF"></canvas>
</body>
</html>问题2:过渡
就页面转换而言，我建议要么在时间线中创建它们，要么调用gotoAndPlay(FRAME_OF_THE_TRANSITION)，直到您开始更满意地使用CreateJS库来采取更面向对象的方法。
https://stackoverflow.com/questions/20425729
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号