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

navigateToURL and URLRequest Functions

Community Beginner ,
Mar 16, 2017 Mar 16, 2017

Copy link to clipboard

Copied

Hi,

I am trying to use the navigateToURL function on an animated header that I have created which contains hyperlinked images to anchor points further down the page with the intention of the page "smooth scrolling" to these anchors on click. Everything is working as expected when clicking on the hyperlinked images except that the anchor point being scrolled to is incorrect. Upon checking the Console log for any errors I found the following error:

Uncaught ReferenceError: URLRequest is not defined

I have searched for reasons as to why I am receiving this error and have found that I need to import a package to use this function, is that correct? If so, how would I go about doing that in Animate CC?

For reference purposes, I am using the following code to handle the click element of my animation:

this.movieclipName.addEventListener("click", anchorFunctionName);

function anchorFunctionName() {

  var targetURL:URLRequest = new URLRequest("http://domain.com#anchor");

  window.navigateToURL(targetURL, "_self");

}

Any help would be greatly appreciated.

Kind regards,

Peter

Views

961

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
LEGEND ,
Mar 16, 2017 Mar 16, 2017

Copy link to clipboard

Copied

It looks like you're trying to combine JavaScript and ActionScript. That will never work. If it's a Canvas document, stick to JavaScript.

How to scroll HTML page to given anchor using jQuery or Javascript? - Stack Overflow

html - anchor jumping by using javascript - Stack Overflow

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 ,
Mar 16, 2017 Mar 16, 2017

Copy link to clipboard

Copied

Hi ClayUUID,

Yes it is a canvas document.

Thank you for providing the links for reference. I have taken a look but I can't see how I would attach the Javascript examples to the movieclips on my animation?

Kind regards,

Peter

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
LEGEND ,
Mar 16, 2017 Mar 16, 2017

Copy link to clipboard

Copied

If you're able to mark the elements to be scrolled to with div IDs instead of or in addition to anchor tags, something like this might work for you:

this.btn1.addEventListener("click", btn1Clicked);

this.btn2.addEventListener("click", btn2Clicked);

this.btn3.addEventListener("click", btn3Clicked);

function btn1Clicked() {

    scrollToId("typhoons");

}

function btn2Clicked() {

    scrollToId("earthquakes");

}

function btn3Clicked() {

    scrollToId("smog");

}

function scrollToId(id) {

    var duration = 1000; // milliseconds

    var ease = createjs.Ease.cubicOut;

    var vscroll = document.getElementById(id).getBoundingClientRect().top;

    // for standards-compliant browsers

    createjs.Tween.get(document.documentElement).to({scrollTop:vscroll}, duration, ease);

    // for recalcitrant browsers

    createjs.Tween.get(document.body).to({scrollTop:vscroll}, duration, ease);

}

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 ,
Mar 17, 2017 Mar 17, 2017

Copy link to clipboard

Copied

Hi ClayUUID,

That is perfect! Just what I needed!

How would I include an offset to not have the top of the scrolled div hidden under a fixed header? Also, once a first button is clicked and the div is scrolled to if I then select another button it doesn't scroll to the second div correctly, is there a way to rectify that so it does?

Kind regards,

Peter

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
LEGEND ,
Mar 17, 2017 Mar 17, 2017

Copy link to clipboard

Copied

If you want a fixed offset, just add it to vscroll.

I have no idea why subsequent scrolls wouldn't be working. It just extracts the div's vertical position and then goes there.

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 ,
Mar 27, 2017 Mar 27, 2017

Copy link to clipboard

Copied

LATEST

Hi ClayUUID,

Would you be able to take a look at my animation and help me to diagnose why this is happening please?

I have uploaded the animation to the link below:

Lye Cross Farm

Thank you in advance for any help you can provide.

Kind regards,

Peter

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
LEGEND ,
Mar 16, 2017 Mar 16, 2017

Copy link to clipboard

Copied

If you are just using AS3 the import line for navigateToURL would be:

import flash.net.navigateToURL;

I don't remember needing to add that. The URLRequest may be needed, and that would be:

import flash.net.URLRequest;

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 ,
Mar 16, 2017 Mar 16, 2017

Copy link to clipboard

Copied

Hi Colin,

Thank you for your response. Do the import lines just get added into the Actions panel within Animate or is there a special place that they need to be added?

Kind regards,

Peter

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
LEGEND ,
Mar 16, 2017 Mar 16, 2017

Copy link to clipboard

Copied

If you were doing AS3, yes, they would be the first lines in the Actions for the frame that is going to use URLRequest.

But, you're not using AS3, so you'll need to figure out the example Clay gave you.

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