Adobe Flash CC / Animate – How to code a Javascript url link on a HTML5 Animated Banner Tutorial

Mobile friendly interactive content such as animated banners are programmed using javascript and html5.

This tutorial demonstrates one of the ways to create and code a javascript button link on a mobile friendly animated banner using Adobe Animate / Flash CC .

For this tutorial you should already know how to create animations with Adobe Flash / Animate and are familiar with the drawing tools, time line, creating movie clips etc.

1. Create a new Adobe Animate/Flash CC file by selecting file – new and under ‘Type:’ select ‘HTML5 canvas‘.

2. Create all of your banner animation inside a movie clip situated on frame number 1 of the main timeline (Important: Do not animate on the main timeline) . Make sure the movie clip covers the entire stage area as we shall be making this move clip clickable. Also, open the properties panel and name the movie clip ‘animation’.

3. Create another layer on the main timeline (make sure it is above the movieclip layer) open the actions panel – this is where we shall insert our javascript to make the entire movieclip clickable.

4. Insert this javascript code into the actions panel (edit the url address as required):

stage.canvas.style.cursor = “pointer”;
this.animation.addEventListener(“click”, ClickToURL);

function ClickToURL() {
window.open(“http://www.kaydownes.com”, “_blank”);
}

5. File – Publish and You’re done!

Code Breakdown / Explanation

stage.canvas.style.cursor = “pointer”;

This changes the mouse arrow to a hand pointer when the mouse is over the stage area.

this.animation.addEventListener(“click”, ClickToURL);

Remember when we added ‘animation’ to the properties panel for the movie clip? This is so we can reference the movie clip in this line of code. Basically we are adding an event listener for a mouse click to the movie clip, when it is clicked it will run the code inside the ClickToURL function.

function ClickToURL() {
window.open(“http://www.kaydownes.com”, “_blank”);
}

These few lines of code makes the browser link to a new page (in this case www.kaydownes.com) the “_blank” part makes the page open inside a new window (to make it open inside the same window change “_blank” to “_self”)