CreateJS - Targeting aspecific key frame

Question

I have an html5 basic presentation that was generated using Flash 6 and CreateJS. The presentation is basically a bunch of flash keyframes with stop(); commands. Now, here come my questions: 1. How do I target a specific frame on this presentation, using a link, located on a different page (something like the html anchor) ? 2. is there an easy way to add some cool frames transitions between those frames, using some kind of an open source library? I'm a designer, not a programmer, so I have only little knowledge in coding. Any help will be appreciate. Thanks

    <!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>

Andrew · Answer 1 · 2013-12-06T20:55:20.987

CreateJS supports the use of basic actionscript by way of providing direct translations in javascript. For example, if you add the following bit of code to your timeline, the CreateJS publisher is smart enough to add a javascript call to stop the timeline at that position.

/* js
this.stop();
*/

To have a link skip to a location in the main timeline, you would need to use gotoAndPlay, or gotoAndStop depending on whether you want playback to continue. When CreateJS publishes your .fla, it creates a javascript instance of the main timeline movieclip called exportRoot. You can use this instance to manipulate the timeline via javascript.

Question 1: Changing location from another page

Using your code as an example now, notice the index.html page links to your Flash exported page (which I am calling target.html) with different hash tag locations for the frames. Also notice I have added the jquery library to your exported page, and a couple lines after the createjs.Ticker.addEventListener("tick", stage); to gotoAndStop based on the current hash, and to listen to future hash changes to 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>

Question 2: Transitions

As far as page transitions go, I would suggest either creating them in the timeline, and calling gotoAndPlay(FRAME_OF_THE_TRANSITION) until you start to get more comfortable with the CreateJS library to take a more object oriented approach.

Hi Andrew, Thanks for your answer. The link that supposed to point to this keyframe, is located on a different page. So I need to somehow trigger the gotoAndStop() script from another html — user3074691, Dec 06 '13 at 15:19
I noticed that bit right after I posted. I've edited my answer to include that. — Andrew, Dec 06 '13 at 15:22
Thanks again. Ok, it is working now, but after the new page opened (on the right frame) It seems to be "stack" on that frame - my "next" button is no longer working. — user3074691, Dec 06 '13 at 19:25
Can you post some code so I know how you have things set up? Sounds like you are using an iframe and changing its location, but if this is the case, you will likely want to use a querystring instead of the hash tag to force the page to reload. That or listen to the hash tag change event which would be slightly more complicated. — Andrew, Dec 06 '13 at 20:00
I'm not using iFrame, just the basic html generated using createJS toolkit — user3074691, Dec 06 '13 at 20:13
@user3074691 - If this answer helped you consider upvoting and perhaps mark is as correct =) — Cyclonecode, Jan 19 '17 at 04:19

CreateJS - Targeting aspecific key frame

1 Answers1

Question 1: Changing location from another page

Question 2: Transitions