Converting Edge Animate SVG Compositions to Hype


(Jansen Gunderson) #1

I discovered Hype after I learned that Adobe Edge Animate was being discontinued. I am wondering if it is possible to easily convert my interactive map SVG compositions to hype. I’m a JavaScript beginner, but have managed to get to this point with the help of some very generous forum members.

Here is an example of my project: http://inlightmedia.com/africa/index.html

JSON is used to define the mouseover tooltips and change the opacity of the states. Here’s a zip of my project files if anyone happens to be interested: Africa.zip


(Hans-Gerd Claßen) #2

hi,
your json and svg is pretty much forward. it’ll be rebuilt within hype quite … easy.
tip: instead of storing action-data the way you did - store the whole data to be showed for the country within the json too …


(Jansen Gunderson) #3

Thanks Hans-Gerd. That is good advice.

Are there Hype functions for accessing SVG?


(Hans-Gerd Claßen) #4

no sir :smile:
power of hype is to have fast setup, power of its abilities and full support for html, css, js … almost everything…

let’s say: optimize your data … and your there … pretty fast :wink:

10minutes of work (may be five):smile:

sample.hype.zip (122.9 KB)


(Jansen Gunderson) #5

Awesome! I’d really like to view your sample, but Hype says that the document you are trying to open was created with a newer version of Hype and cannot be displayed. I just downloaded the most recent Pro version 3.0.3. Is there a 3.5 beta available?

EDIT: I was able to open the file by changing the version number in the .plist.

Thanks Hans-Gerd!


(Jansen Gunderson) #6

I have my Hype project nearly working how I’d like, but I’m struggling with accessing and displaying tooltips, changing the cursor, and adding links for each region.

I’m sure there is a much more elegant solution to how I’ve coded the mouseovers/outs as well, but I’m having trouble figuring how how to access the data that was in the JSON. Any ideas?

sample.hype.zip

Africa Map


(Hans-Gerd Claßen) #7

i switched the json to js to have direct access … have a look at your file and my sample. working with a json will only work when executed from a server. so if your json won’t be dynamically updated from a database js will be easier handling…

you can access any of your data by

region[itsIndex].itsProperty

The setup of your document makes me feel like your not familiar with hype … also js, html, css

well, as a first step the videos and the documentation will be a good starting point!


(Alex Enkerli) #8

Nice! Really nice!

Last Summer, played around with almost the same project: creating an interactive map of Africa where you could get more info on mouseover and get an animation on click. Looked at different approaches, including with SVG animations, tweaking existing JavaScript and CSS to work with the SVG, and building animations in Hype. It was something of a learning project and I was thinking about pursuing it again during the break.

Jansen: would you be interested in discussing this off-forum? I’d like to know more about the non-Hype parts of your work.

As for the on-topic part, I’d say (like others) that Adobe’s decisions regarding Edge and Flash can indeed have positive impacts on Tumult. Glad Hype 3.5 came out and will look into it soon. But SVG support in Hype (4.0?) would probably do a lot to help push Web standards. For instance, I could imagine “Shepazu“ (Doug Shepers) trying things in Hype if SVG were up to par.
His Web annotation proposal is a great example of something which could be eased by Hype.


(Jansen Gunderson) #9

Thanks Alex!

If you take a look at the sample Hans-Gerd created, you can see that Hype actually has pretty good support for working with SVG documents. You’re able to access the SVG IDs directly from Hype (with some minimal JavaScript) without any additional SVG libraries like you had to use with Edge Animate.

Feel free to PM me if you’d like to discuss further.


(Alex Enkerli) #10

Even better!
Had yet to get into the code and misunderstood the “no sir” in Hans-Gerd’s second reply.
What’s funny is that I was looking into access SVG IDs through Hype at pretty much the same time a thread on just this topic was started. Wonder why I didn’t notice it.

I’m new to most of these things but I’m getting quite excited with the potential for work with learners in diverse fields. For instance, I’ve taught African studies on several occasions, which is why I thought about working with a map of Africa. But the same approach would work so well with so many things having to do with maps or with SVG files in general.

In other words, Tumult might do well to tell educators about how easy it is to work with SVG files from within Hype. Support for iBooks Author widgets is also a neat thing. And if Tumult were to add SCORM support…

Main point is, alternatives to Adobe software are really welcome!