GoToWebPage not working?

[audjinks]

Hi there

First time using Animate with HTML5 functionality. I created a button, gave it an instance name and then used code snippets to create the code. The button looks like it is responding (hover and down) but it doesn't go to the web page???

this.LearnMore1.addEventListener("click", fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage() {

window.open("https://en.wikipedia.org/wiki/History_of_Australia", "_blank");

}

Is it possible to upload the file here so someone can look at it for me?

Cheers

Audrey

[kdmemory]

Hi Audrey

It is possible to upload your file to a cloud storage like CC, Google Drive, Dropbox, WeTransfer and share the link here.

Klaus

[audjinks]

Awesome, here is the link to my file. Any help would be greatly appreciated https://www.dropbox.com/s/ucjp5ajokgxyb2k/CulturalDay_Animate_v2.fla?dl=0

Dropbox - CulturalDay_Animate_v2.fla - Simplify your life

[kdmemory · Accepted solution]

Hi Audrey

I had a look and a little bit a go with your file. There is a small number of problems here:

1. Assigning the EventHandler to the button

this.LearnMore1.addEventListener("click", fl_ClickToGoToWebPage_3);
function fl_ClickToGoToWebPage_3() {
    window.open("http://www.adobe.com", "_blank");
}

LearnMore1 is actually nested in a movieclip with no instance name. But this code is on the main timeline and here this means this timeline. On this timeline there is no object with the name LearnMore1 , hence the EventHandler is not properly assigned. If you would instance-name the anonymous movieclip (with 1606 Earliest recorded contact) let's say mc1606, then you should code:

this.mc1606.LearnMenu1.addEventListener("click", fl_ClickToGoToWebPage_3);

That would be correct but is still not working because

2. The use of the Ui component Button is problematic

Instead of using the button component it makes more sense to create your own button within Animate. Like you did with the [ Read → ] button. This touches a huge subject matter. The essential part is that components aren't part of the Canvas element (that what one creates in Animate and publishes as HTML5 Canvas). Their lie practically outside in the HTML structure in a special <div> called dom-overlay_container. To illustrate this a bit here is the given HTML structure (shortened for clarity - I hope):

<div id="animation_container" style="...">
    <canvas id="canvas" width="1470" height="827" style="..."></canvas>
    <div id="dom_overlay_container" style="...">
        <button type="button" style="..." id="LearnMore1" class="ui-button" value="">Learn more</button>
    </div>
</div>

The button LearnMore1 is not part of your stage (Animate) or the <canvas> element for that matter. Hence it is not easily referenced from the position of your stage or timeline within the Animate Canvas universe. If you would use a regular button like [ Read → ] then this would be part of the canvas stage and can be referenced with this.readBtn.add... for example.

There is another reason why the use of components isn't a good idea. All components involve the jQuery library. Mostly for nothing worthwile in most cases. And the jQuery version supplied by Adobe Animate is pretty dated (v.2.2.4) what besides unnessecary file-size increase causes only problems like warnings as:

Use of Mutation Events is deprecated. Use MutationObserver instead.

Advice: Don't touch the Animate HTML5 components before you clearly know what they are for and how they work.

3. Repeated assignment of EventListeners

When I fiddled with your file and removed the first two problems and GoToWebPage as you named it worked, i found that my browser attempted to open multiple windows with the same link. I'm using Firefox Developer Edition and got warnings all over that the browser prevented the opening of windows and then a repetition number counted upwards with no end. That is because on your main timeline, where the code sits, are 40 frames. And in your Publish Settings  > Loop Timeline is checked. This leads to the situation that your button get's multiple EventHandlers everytime the playhead reaches the frame with the code. This again leads to multiple attempts to open the particular URL. There's some good advice on this by JoãoCésar in this thread: Re: Clicking on a button opens multiple new tabs instead of only one

Hope this helps

Klaus

[audjinks]

Thank you so much for comprehensive response. Working on it now.

You are a star!