Known Participant

Question

navigateToURL and URLRequest Functions

Forum|Forum|8 years ago
March 16, 2017
2 replies
1365 views

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

This topic has been closed for replies.

Colin Holgate

Inspiring

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;

MushroomInternetAuthor

Known Participant

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

Inspiring

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.

C

ClayUUID

Legend

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

MushroomInternetAuthor

Known Participant

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

MushroomInternetAuthor

Known Participant

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

}

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded