Creating clickable button links for a Video/HTML5

[stwoods]

Hoping you all can help me.

I've been tasked with creating a video with clickable links for my client's homepage. My question is at the bottom. here are my steps:

Create Video in Adobe Premiere

Convert the mp4 file to PNG in Media Encoder

Open Animate to HTML5

Import the PNG files to the stage

Create a new layer in Animate

Use the rectangle tool to create a button

right-click and choose Convert to Symbol

Set the symbol type to Button and name it (Button1)

Right Click button and choose Edit in Place

Up,  Over, Down, Hit displayed  Button confirmed on Hit

Select the Hit frame in the timeline, press F6 to add a keyframe

Create another rectangle on Hit frame

Return to Up frame

Using the text tool to add a name to the button

Click on button

Open the Actions panel. 

Place the following code:

 this.Button1.on('click', function() {
window.open('https://yourlink1.com', '_blank');
});

Replace the link with where I need it to go.

Click test movie

I've done it four times and only once did I get the link to show but it only showed for a second or two during the video. Nothing happened when I clicked the link. Other times the button was invisible.

Can anyone suggest what I am doing wrong or whether I am missing a step? I am new to Animate but was told this was the only way to create clickable links in a video (converted to png set).

Thanks in advance

[kglad]

does Button1 exist on-stage in all frames of your main timeline, or if not, is there a this.stop() on the frame that contains Button1.

[stwoods]

Thanks for responding so quickly. I'm new to Animate but trying to learn.
On the fly as it's apparently the only way to create clickable links.

Not sure I can answer your question. I had assumed the a global script
would extend it to all frames. Perhaps I'm wrong.

[kglad]

script location is one possible issue.  i started with the visual button location.