• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Pass Variables from URL to Timeline in Animate HTML5 Canvas

Community Beginner ,
Sep 16, 2019 Sep 16, 2019

Copy link to clipboard

Copied

Hello all.

 

I have created a HTML5 Canvas movie and looking for a way to have the user taken to a specific frame on the main timeline from a href click.

 

I recall doing this with flash and actionscript quite a few years back. It was just doing by passing parameters in a string.


What is the best way to acomplish this in HTML5 Canvas? 

 

Here is the live file.. I'm looking to be able to have a user click a html button to get to a frame number(or label) on the main timeline.

 

https://www.xblu.com/roadmap/mubex-roadmap.html

 

Any help would be much appreciated.

 

Thanks!

Charlie

TOPICS
ActionScript , Code , How to , Timeline

Views

938

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Sep 16, 2019 Sep 16, 2019

Hi.

 

Use the exportRoot global reference to access anything in the main timeline from anywhere in the same document.

 

Like this:

 

<body onload="init();" style="margin:0px;">
    <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:550px; height:400px">
        <canvas id="canvas" width="550" height="400" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
        <div id="dom_overlay_container" style="pointer-eve
...

Votes

Translate

Translate
Community Expert ,
Sep 16, 2019 Sep 16, 2019

Copy link to clipboard

Copied

Hi.

 

Use the exportRoot global reference to access anything in the main timeline from anywhere in the same document.

 

Like this:

 

<body onload="init();" style="margin:0px;">
    <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:550px; height:400px">
        <canvas id="canvas" width="550" height="400" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
        <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:550px; height:400px; position: absolute; left: 0px; top: 0px; display: block;">
        </div>
    </div>
    <button type="button" id="button0">Go to frame 0</button>
    <button type="button" id="button1">Go to frame 1</button>

    <script>
        document.querySelector("#button0").addEventListener("click"e => exportRoot.gotoAndStop(0));
        document.querySelector("#button1").addEventListener("click"e => exportRoot.gotoAndStop(1));
    </script>
</body>

 

Please notice that I'm using a bit of ES6 syntax. So you're gonna have to convert to ES5 if you want to support older browsers.

 

I hope this helps.

 

Regards,

JC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 16, 2019 Sep 16, 2019

Copy link to clipboard

Copied

Hey JC,
You rock!
Let me give this a shot.
Thanks!
Charlie

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 17, 2019 Sep 17, 2019

Copy link to clipboard

Copied

LATEST

Hi JC,
Thanks again for your solution.

Working like a charm.

Have a great day!

Charlie

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines