CreateJS — нацеливание на определенный ключевой кадр

У меня есть базовая презентация html5, созданная с использованием Flash 6 и CreateJS. Презентация представляет собой набор ключевых кадров flash с функцией 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>

html flash createjs
person user3074691    schedule 06.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

CreateJS поддерживает использование базового скрипта действий, предоставляя прямые переводы в javascript. Например, если вы добавите следующий фрагмент кода на свою временную шкалу, издатель CreateJS будет достаточно умен, чтобы добавить вызов javascript, чтобы остановить временную шкалу в этой позиции.

/* js
this.stop();
*/

Чтобы ссылка пропустила место на основной временной шкале, вам нужно будет использовать gotoAndPlay или gotoAndStop в зависимости от того, хотите ли вы продолжить воспроизведение. Когда CreateJS публикует ваш .fla, он создает javascript-экземпляр основного ролика временной шкалы с именем exportRoot. Вы можете использовать этот экземпляр для управления временной шкалой через 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, чтобы использовать более объектно-ориентированный подход.

person Andrew    schedule 06.12.2013
comment
Привет Андрей, Спасибо за ваш ответ. Ссылка, которая должна указывать на этот ключевой кадр, находится на другой странице. Поэтому мне нужно как-то запустить скрипт gotoAndStop() из другого html. - person user3074691; 06.12.2013
comment
Я заметил это сразу после того, как написал. Я отредактировал свой ответ, чтобы включить это. - person Andrew; 06.12.2013
comment
Спасибо еще раз. Хорошо, сейчас это работает, но после открытия новой страницы (в правом фрейме) кажется, что в этом фрейме стек - моя кнопка «Далее» больше не работает. - person user3074691; 06.12.2013
comment
Можете ли вы опубликовать код, чтобы я знал, как у вас все настроено? Похоже, вы используете iframe и меняете его местоположение, но в этом случае вы, вероятно, захотите использовать строку запроса вместо хэш-тега, чтобы принудительно перезагрузить страницу. Это или прослушать событие изменения хэш-тега, что было бы немного сложнее. - person Andrew; 07.12.2013
comment
Я не использую iFrame, только базовый html, сгенерированный с помощью инструментария createJS. - person user3074691; 07.12.2013
comment
@user3074691 user3074691 - Если этот ответ помог вам подумать о голосовании и, возможно, отметьте его как правильное =) - person Cyclonecode; 19.01.2017