个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
24
4
我有一个使用 Flash 6 和 CreateJS 生成的 html5 基本演示文稿。演示文稿基本上是一堆带有 stop() 的 Flash 关键帧；命令。现在，我的问题来了:1. 如何使用位于不同页面上的链接(类似于 html anchor )定位此演示文稿中的特定框架？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>
最佳答案
CreateJS 通过在 javascript 中提供直接翻译来支持基本 ActionScript 的使用。例如，如果您将以下代码添加到您的时间线，CreateJS 发布者会足够聪明地添加一个 javascript 调用以在该位置停止时间线。
/* js
this.stop();
*/
要让链接跳到主时间轴中的某个位置，您需要使用 gotoAndPlay 或 gotoAndStop，具体取决于您是否希望继续播放。当 CreateJS 发布您的 .fla 时，它会创建一个名为 exportRoot 的主时间轴动画片段的 javascript 实例。您可以使用此实例通过 javascript 操作时间线。
现在以您的代码为例，请注意 index.html 页面链接到您的 Flash 导出页面(我称之为 target.html)，其中框架的散列标记位置不同。另请注意，我已将 jquery 库添加到您导出的页面，并在 createjs.Ticker.addEventListener("tick", stage) 之后添加了几行； gotoAndStop 基于当前哈希值，并监听 future 对 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>
就页面转换而言，我建议要么在时间轴中创建它们，要么调用 gotoAndPlay(FRAME_OF_THE_TRANSITION) 直到您开始更加熟悉 CreateJS 库以采用更面向对象的方法。
关于html - CreateJS - 针对特定关键帧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20425729/
24
4
0
如何在 createjs 中显示自定义光标？我在 Canvas 上渲染了多个图像/位图。我希望每当我单击特定位图时光标更改为特定图像。也就是说，单击图片 1 时，光标将变为画笔图像，单击图片 2 时，
我在 CreateJS/TweenJS 中有多个 Tweens: createjs.Tween.get(elem1).to({..}); createjs.Tween.get(elem2).to({.
我在 creatJS 方面遇到问题，希望您能提供帮助。 var stage = new createjs.Stage(canvas); 我收到此错误: angular.js:13642 Refere
我的项目是从服务器加载的。我使用 preloadjs 加载图像，然后使用它创建位图。加载图像后，可以使用以下命令创建位图新的createjs.Bitmap(路径);如果使用 firfox，但在使用 C
我正在制作一个射击游戏，其中我需要通过将子弹绑定(bind)到“tick”事件来更新子弹的状态，但是当调用删除方法将它们从“tick”事件中删除时，它不会将其删除。创建新实例后，它会不断更新，而不是绑
我试图将这个 h1 插入到 canvas 中。但它没有显示。无论如何，将 w3school html 集成到 Canvas 中，而无需使用 easeljs 程序创建文本。我将其添加到 Canvas 内
如何在createjs中仅在对象的右侧和底部绘制阴影。物体上或顶部和左侧没有阴影。 阴影仅包含 4 个参数 1.阴影的颜色 2. x 3. 年 4.模糊效果 但它没有说明 4 个不同的方面。 var
在 CreateJs 中，Firefox 呈现的文本对象的顶部位置与其他浏览器略有不同，而形状对象没有显示这种差异。 例如， this.text = new cjs.Text("Click to St
希望有人能帮忙。 我在 CreateJS 中有一个游戏工作正常，添加了暂停按钮的功能，也工作正常，除了暂停按钮不可见，但我的所有其他对象都是:(如果我单击我知道暂停按钮所在的位置该功能有效，但我只是看
我正在尝试使用 createjs 版本 8 中的新继承模型。我想让 Tile 继承自 createjs.Shape这是最基本的代码。 //This is the Tile constructor fu
这个问题已经有答案了: easeljs not showing bitmap (1 个回答) 已关闭 6 年前。 我怀疑答案就在 PreloadJs 中但是，我已经在我的 code 中删除了对它的修改
我正在使用这个 fiddle 中的代码: https://codepen.io/rauluranga/pen/KwoBdE 我想使用此代码使我的oes.container 中的每个对象都具有随机移动。
我正在开发一个 createjs 游戏，其中图像保存在容器内。我想将图像补间到屏幕上的某个位置并将图像切换到另一个图像。几秒钟后，我想从 Canvas /屏幕中删除新图像。 目前，我正在将 (evt)
我尝试将自己的方法添加到 Tween 类中以暂停/恢复所有补间。这就是我所拥有的: createjs.Tween.pauseAllTweens = function() { for ( var
这是图形: http://snag.gy/aVFGA.jpg 大矩形是 Canvas 元素，小矩形是 Canvas 中的图像对象。我想找到离左边的实际距离是多少。 值是我在控制台中看到的值: regX
我不知道我的代码有什么问题。我对 javascript 很陌生。有时 createjs 会工作，有时则不会。这没有意义，因为我正在从其他人的教程中复制精确的代码。
所以， 我刚开始学习 CreateJS，我遇到了我的第一个问题:我无法让补间工作(我希望它应该工作)。 示例如下:http://www.hakoniemi.net/labs/createjs-test
我想更改父容器内 2 个子容器的坐标。最初，我循环遍历父容器的子容器并单独更改它们的 x,y...但随后更改父容器的 x,y 更有意义>... 问题是...我需要获取每个子项的单独更改坐标...但是更
我尝试通过 SoundJS 声音注册加载声音，并收到以下错误: createjs.js:15 Uncaught Error: Type not recognized. 我认为 soundjs 库在定位
所以我尝试使用 Createjs 对矩形大小进行动画处理。我发现有两种方法可以创建矩形。要么: var rectangle = new createjs.Rectangle(0,0,100,100);
我是一名优秀的程序员,十分优秀！