This is one of the big projects I was working on the last 4 months using Hype 3 Beta. We launched the English version last week (a Spanish version is coming soon). This tutorial explains, for students and the public, basic financial information. It's funded by CitiBank's CitiFoundation, and created in collaboration with Dallas County Community College District.
Some features include:
6 sections, 145 screens, and 1000+ SVG graphics
3 responsive menus that stick to the bottom, right, and lower right of the browser window
Yes, @dgoss2 - Tony - it’s completely in Hype. The text in the Text Box at the bottom of the screens is external and is read in as you advance to each “page.” Likewise, the audio files are external and triggered as you advance to new pages. There’s a good bit of JavaScript mixed in with native Hype features so that each section is fairly modular.
As for process, It was drawn out over the 4 months it took to build it, but essentially I built Section 1 first and programmed all the features into it, then duplicated it and used it as a template to build sections 2 - 6. Similarly, we will release the Spanish version in a week or two, and it only took about 20% of the effort of the English version because of the modularity of Hype and the JavaScript.
I’d share the Hype source files but they are partially owned by the client. If you have any specific questions, though, I’m more than happy to give more details.
Thanks for the information, John. I would like to do something similar with Hype. I have been using Articulate Storyline, but the problem is that it is difficult to integrate the elearning so that it feels as if it is part of the site. I have a limited knowledge of Javascript, so I am not sure where to start. Are there some resources you could recommend?
Well, there are about as many places to learn JavaScript as there are opinions among developers! My recommendation is to actually lean Hype in detail through the tutorials posted on this forum, and use Hype as much as you can. The good people at Team Tumult have done a great job of trying to allow us developers to use Hype’s native features for a great deal of our needs, but then to supplement it with JavaScript when needed. My project happened to need a fair amount of JS.
The only site I can think of off the top of my head for learning JS is one that some purists look down on - http://www.w3schools.com - it’s not perfect, but I use it sometimes as a quick reference. And http://stackoverflow.com is not a learning site, but it’s a great place to go when you have those “how do I do X” kind of questions.
If you want to contact me offline with specific questions, shoot me an email at the address shown in my profile. All the best! … John
Great job John. It works like a charm and it’s encouraging others as me who like to use Hype for big projects, lets root for a site manager and shared libraries in future versions!
For the Spanish version, I duplicated the English sections and replaced on-screen English text with Spanish. Because I had used JavaScript to load the audio files and text box text, all that was needed for those elements to be in Spanish was to change a variable called languageID. The Spanish audio was longer so I had to adjust the animation timelines accordingly.
If you are thinking about a multi-language Hype project, you might check out the English version then go back to the Home page and jump to the Spanish version to see the corresponding elements.
Also, thanks for all the kind words and encouragement!
Thanks, Dave. I wish there had been more detailed content to do more animations with - concepts like “dreams, values, student loans, savings plans” - these aren’t as easy to illustrate and animate as say a tutorial on how a car engine works! But it was still an interesting project.
John; do you have any feel yet for how a complete Hype site like yours is picked up by Google and other SEO? Since its not aimed at the general public, does it really matter to you.
My preference is to go Hype only, but I have 4 sites where SEO is important.
First, I’m not an SEO expert so others may have better info about this. But I will say that for this project, we didn’t worry too much about SEO. The course was promoted to it’s intended audience through other means (emails, web links, print pieces, etc.).
That being said, it IS possible to build Hype sites and leverage SEO. You might do that through HTML SEO techniques in the HTML file that houses the Hype div. And… Hype has some ways to include text within it in the exported HTML file.
There are several forum posts about how to leverage SEO in Hype. Also, @Daniel may have better info than I can provide.
Right, thats what I was thinking also. It’s aimed to school systems, not something that someone is going to casually sit down and search for. They are already well established. It’s potentially a huge project, and have to be honest, I’ve got the jitters, as in “Do I want that kind of commitment, betting the whole farm, so to speak.” Will find out soon what they really want, if all they really need is something to provide a sense of organization on the front end, could be good.
And for my other sites that need SEO, I have not yet taken the time to go through the resources that Google has. Not that I like them, I think they know way too much about all of us, but…
My recommendation is to actually lean Hype in detail through the tutorials posted on this forum, and use Hype as much as you can. The good people at Team Tumult have done a great job of trying to allow us developers to use Hype’s native features for a great deal of our needs, but then to supplement it with JavaScript when needed. My project happened to need a fair amount of JS.