Question

我有一个使用Flash 6和CreateJS生成的html5基本演示文稿。演示文稿基本上是一堆带有stop（）的flash关键帧;命令。现在，我的问题来了： 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>

Answer 1

CreateJS支持通过在javascript中提供直接翻译来使用基本动作脚本。例如，如果您将以下位代码添加到时间轴，则CreateJS发布者足够聪明，可以添加javascript调用以停止该位置的时间线。

/* js
this.stop();
*/

要让链接跳到主时间轴中的某个位置，您需要使用gotoAndPlay或gotoAndStop，具体取决于您是否要继续播放。当CreateJS发布您的.fla时，它会创建一个名为 exportRoot 的主时间轴movieclip的javascript实例。您可以使用此实例通过javascript操作时间轴。

问题1：从其他页面更改位置

现在使用您的代码作为示例，请注意指向您的Flash导出页面（我称之为target.html）的index.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库以采用更面向对象的方法。

CreateJS - 定位特定的关键帧

1 个答案:

问题1：从其他页面更改位置

问题2：过渡