navigateToURL and URLRequest Functions

[MushroomInternet]

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

[ClayUUID]

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

[MushroomInternet]

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

[ClayUUID]

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);

}

[MushroomInternet]

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

[ClayUUID]

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.

[MushroomInternet]

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

[Colin Holgate]

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;

[MushroomInternet]

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

[Colin Holgate]

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.