Calling external Javascript from within a Hype animation

Using JavaScript with Hype
1

Hi everybody!

I’m building a banner animation which requires me to handle two different interactions/clicks. Each click triggers a different Javascript function nested in the -body- of my index.html.
Integrating the right clicktag-code is not the problem – I got that working very fast.

Spending the better half of the day browsing the Forum and testing different scripts, I am at the point where I am pretty frustrated, since my HTML and Javascript skills are next to nothing, and I have a hunch that I do not have a clue where to place the codesnippets properly (e. g. innerHTML, -head-, etc.).
Long story short: I am in dire need of professional help, guys, because I’m pretty new to HTML5, Javascript and Hype. I’m one of those “former Flash professionals”… =) I guess that’s why I enjoy animating with Hype so much.

Screenshot of my Hype document, showing what kind of functionality I need:

… and this is the Javascript code in my index.html, which wants to be called:

What I am not able to achieve on my own:
Getting the code within my Hype document together to trigger any of the JS-functions in the -body- of the index.html.

Here’s a ZIP of my Hype document, plus the HTML5 export with my index.html file:
CallingExternalJS.zip (145.3 KB)

I hope I prepared the files good enough for you to give me a hint on what to do next, and where to place the missing code to build this simple functionality into my banner. Any help is welcome.

Thank you for your help!
With a smile from Germany :smiley:
Alex

1 Like
2

Hmm,

Not sure what all the innerHTML is for in the buttons. ( I will just ignore it :smiley: )

This is very simple.

select each button.
Go to the Element inspector.
Add an On Mouse click action which runs a (new) Javascript function.

In the function for the red button add:

onCloseAd ();

In the function for the blue button add:

  onClickAd ();

Then do your export. and paste the Hype DIV into your index file as you did before.

4 Likes
3

Oh wow! Thank you very much for your quick answer! It works like a charm!

Well, the innerHTML was a leftover of one of my futile attempts. You did well to ignore it. :wink:

I am thrilled and embarrassed at the same time. The former, because the solution is stunningly simple. The latter, because I was pretty close as I can see now.
Hype is amazing! =) And the community around here too, obviously!

Here’s my working testfile to call (one or more) external Javascript functions from within a Hype animation (Hype file and HTML5 export included):
CallingExternalJavascriptFunctions.zip (106.5 KB)

Enjoy and share!

3 Likes