How to add an HTML5 animation to a presentation

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Could someone walk me through how to add an HTML5 animation to a presentation please? 
Photo of rons original

rons original

  • 674 Points 500 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Tri-C Metro

Tri-C Metro

  • 1,642 Points 1k badge 2x thumb
copy and paste the HTML code into the HTML widget
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
rons original,

You'll need to use the HTML Widget to insert your HTML5 into your presentation.
Photo of rons original

rons original

  • 674 Points 500 badge 2x thumb
Thank you for the advice...and I apologize for my ignorance...I am incredibly new at this. 

But I created the animation using Tumult Hype 3, so where exactly would I get the code from?
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Hype creates html5 and javascript files.
  1. You will need to export the entire folder or package of these files. http://tumult.com/hype/documentation/exporting/ 
  2. Then take the entire folder and host it in rise storage or your own hosting service. 
  3. Once you have it there you will need copy the absolute link to the .html file and add it to the settings of the webpage widget found in our store.
You could also use the html widget as others have suggested but you would need to put the .html link into an iframe. Webpage widget would be more simple approach.
(Edited)
Photo of rons original

rons original

  • 674 Points 500 badge 2x thumb
What is the "absolute link"?
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
rons original,

No problem at all, that's why I'm here!

Unfortunately I'm not familiar with that piece of software. You would need to contact their customer support for more information regarding generating code.
Photo of rons original

rons original

  • 674 Points 500 badge 2x thumb
Gotcha. What if I upload the animation to my dropbox and have the URL, can I do it that way?
Photo of Dave

Dave

  • 886 Points 500 badge 2x thumb
You would need to export hype3 to a folder and copy the html from the exported .html file. Host the resources somewhere relative to the hype exported html file. Many variations on this approach can be found here;

http://tumult.com/hype/documentation/exporting/

Another method for embedding hype exports (that are hosted elsewhere), is to create another iframe in the RV HTML widget ;

http://hype.desk.com/customer/portal/articles/162491-embedding-your-hype-file-on-another-page-iframe...
Photo of Dwight

Dwight

  • 556 Points 500 badge 2x thumb
Hey mlm thanks for that. I will check them out. I noticed on the Hype they were able to bring static images to life through animations. I really like that. I am just starting out my digital signage business here on my island and I have a number of displays (eposters) that are in portrait. I plan to run short 10-15 second ads. I think the ability to animate those otherwise static images will work well in my case. Thanks again.
Photo of Dwight

Dwight

  • 556 Points 500 badge 2x thumb
Hey mlm I like it. Its beautiful and well organized. Did you design and create it?
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Yes I did, thank you!
Photo of Jerett Offutt

Jerett Offutt

  • 60 Points
Hey mlm, I've created an animation in Edge and have been trying to upload it to my Rise composition for a digital display. I've tried a few different things to no avail. Any tips you could lend would be more than appreciated.
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Are you uploading the entire folder of files that edge produces to Rise storage and linking to the main html file with thew web page widget? Do you mind sharing the link to your presentation?
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
rons original,

In that case you would need to use either the image or web page widget to display the animation, depending on the file type.
Photo of rons original

rons original

  • 674 Points 500 badge 2x thumb
So if this is the URL, which method would I use?

https://www.dropbox.com/s/6ofc68cfsp1pwf2/Animated%20Logo.html
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
rons original,

You will not be able to display that content from dropbox. The instructions that Dave gave above are what you will need to follow.
Photo of Dave

Dave

  • 886 Points 500 badge 2x thumb
I think you are going to need a folder that can be made "public". If your drop box account does not have a public folder, you may have to request that feature $et. I am not sure about the ins and outs of how files download/don't download or stream/don't stream on DropBox.

I host on Amazon S3 using a single bucket as a website for Hype output.

Once the resources and .html are publicly shared somewhere, I would go for the iframe method first.
Photo of rons original

rons original

  • 674 Points 500 badge 2x thumb
Ah, I did not see his response, sorry about that.

Trying to learn as I go here. I am the furtherest thing from knowledgable on HTML.

Blake or Dave, would you mind breaking it down in laymen's terms for me? To be honest, I got lost after "copy the html from the exported .html file" 
Photo of Dave

Dave

  • 886 Points 500 badge 2x thumb
Sure Ron,

As you are aware, Hype can export your presentation as HTML5, into a folder. This essentially builds your presentation as an HTML file accompanied by all of its dependencies in a name_of_your_presentation.hyperesources subfolder.

Both of these components need a place to live. A home if you will, that can be reached by the Display/Player's browser, as if it were an anonymous internet user. This means that if the display has to login, click something or acknowledge something (any user event) to complete the resource request,  that is "bad".

In your case, your DropBox account may or may not allow this. The current URL is not working.

Once the export files are uploaded and stored as publicly readable, like on a web server "somewhere", the rest of the effort is just a matter of adding it to your presentation.

Here is an example of what I typically do:

First, I create a presentation placeholder that is either the exact size of the display's screen, or the size of the exported Hype document. 

I then add a Web Page Widget to that placeholder.



The configuration of the widget is where you declare the Hype HTML location. This is the URL where the Hype HTML and all of its resources are located on the public internet. This example is on Amazon. Yours would be on the public folder on DropBox (if you have it) bit it could be on any public facing HTTP server anywhere.


All of my stuff is touch interactive, so I turn interactivity on. You may not need to do that.

I always turn off scrollbars and it sounds like you might as well.

Because my placeholder is the exact size of my presentation and the exact size of my Hype document, I dont need any horizontal or vertical scroll. So that is 0,0.


Save, save, save, and preview.
Photo of rons original

rons original

  • 674 Points 500 badge 2x thumb
Thank you so much Dave, this makes perfect sense!
Photo of rons original

rons original

  • 674 Points 500 badge 2x thumb
could this be done using Google Drive at all?
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Google drive is not recommended as a provider for content. We've had experiences in the past with users having access to their google drive throttled for hosting.
Photo of rons original

rons original

  • 674 Points 500 badge 2x thumb
Ok, I am still trying to figure this out...sorry guys.

I have a hosting account with BlueHost...is this something I could use to get the job done? I am so lost...

Thanks,
Samantha
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Thanks for the explanation, Dave!
Hello everyone. I am new in this topic as well, and would like to use Adobe Edge Animate as MLM recommend above. My question is, Do I have to do something to the generated files, I mean Do I have to check any options or change some code in order to export the animation and it can be used in my rise presentation? what I had known so far is that adobe Edge animations are so slow in rise vision, but the example that MLM show us is very fluid and nice. Maybe someone can explain it in detail. Thanks . (please be patient if any mistakes, English Is no my first language)
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
You shouldn't have to do anything special with the files after exporting.  I am using amazon s3 to host the files and using the webpage widget for reference. You may want to verify you are using images that are built for the web. Ive seen it be slow when trying to animate 200ppi or high res images. 
Ok, it seems easier than I though, so I am going to follow your recommendations. Verify the size of images and use the webpage widget. Thank you MLM for answering. By the way, I like your design so much. Good job.
Ok, it seems easier than I though, so I am going to follow your recommendations. Verify the size of images and use the webpage widget. Thank you MLM for answering. By the way, I like your design so much. Good job.
Photo of Tri-C Metro

Tri-C Metro

  • 1,642 Points 1k badge 2x thumb
MLM,have you tried to host the source files (images & html file) in Rise's storage? Doesn't seem to work.  I was able to reference the files using my Amazon S3 storage, but not Rise.
Photo of Tri-C Metro

Tri-C Metro

  • 1,642 Points 1k badge 2x thumb
Never mind.  Using Google Web Designer I was able to copy HTML code and replace image source with Rise storage URL.  Woks perfect.  A very simple and effective way to incorporate HTML5 animations/movement into signage.  Great thread.
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Tri-C,

Great! Always glad to hear good news from our users!