Use Animate scene in existing website

Question

I have created an animation in Adobe Animate CC, which I want to use on an existing website.

My folder structure is:

- root/
  - src/
    - html.index
    - generated/
      - symbol/
        - symbol.js
        - images/
          - image.jpg

The content of the symbol/ folder is generated by publishing my Animate CC scene.

In html.index I load symbol.js, so that I can use the Animate CC scene, like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>main</title>

    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
    <script src="generated/symbol/symbol.js"></script>

I can then create the symbol scene using createjs:

stage = new createjs.Stage(canvas);
symbol = new lib.Symbol();
stage.addChild(symbol);

The Problem

This doesn't work since symbol.js links relatively to image.jpg. When I open html.index the browser looks for "images/image.jpg" instead of "src/generated/symbol/images/image.jpg".

How can I use a scene published from Animate CC on an existing website? Note that I can't change symbol.js since it is generated by Animate and changes whenever the graphics artists updates the scene and republishes.

score 0 · Answer 1 · answered Mar 18 '16 at 13:16

0

You just need to copy everything in src/generated/symbol into the root directory of your existing web site, and load your script as "symbol.js" instead of "generated/symbol/symbol.js". The src/generated/symbol directory structure is just a kind of scaffolding for your code while you are developing it. It's not intended to dictate to you what the final structure of your web site needs to be.

answered Mar 18 '16 at 13:16

MarkNFI

556
2
9

It would unfortunately be quite inconvenient if I couldn't launch the website from inside our IDE (WebStorm), but had to run a script before testing changes to the site. – uldall Mar 18 '16 at 14:30

score 0 · Answer 2 · answered May 27 '16 at 01:57

0

In the "Publish Seetings", untick the box "Overwrite HTML file on publish". Then go and edit the HTML file created by Animate CC with the correct file structure.

answered May 27 '16 at 01:57

Stephen Douglas Allen

103
10

Use Animate scene in existing website

2 Answers2