Comic Fury Webcomic Hosting - Help! Using html5 for Webcomic

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > Help! Using html5 for Webcomic
Pages: [1]

"Help! Using html5 for Webcomic", 20th Nov 2018, 8:14 PM #1
megamaster

User avatar
Posts: 239
Registration date: 23rd Jul 2010
So I have 2 questions for the awesome leaders, programmers, and html experts of this community. I have a comic in which I've been using flash files to make my pages come to life but I've realized that mobile browsers do not supports this.However, I have come across HTML5 which seems to be a solution for having animations and sounds be played within a comic. Therefore, my questions are:

1) Is it possible to convert our html to html5 for our webcomics?

2) If so, are there resources out there to learn how to do this?

I want to keep the same formatting, but just change comic pages to html5 code snippets.
_______________________
20th Nov 2018, 8:42 PM #2
Product Placement
paid to be there and look good
User avatar
Posts: 440
Registration date: 15th May 2011
Location: Iceland
Basically, the thing that HTML5 uses instead of Flash, is called Canvas.

Your flash animations need to be converted into something that can be run on Canvas. Now, I don't know what you're using to make your flash videos, but most animation tools that support flash have added ways to convert projects to be Canvas compatible.

They kinda have to, since support of Flash is being dropped.
20th Nov 2018, 9:56 PM #3
megamaster

User avatar
Posts: 239
Registration date: 23rd Jul 2010
@Product Placement Awesome, thanks for the heads up!

To be able to make use of html 5 features do I just need to change the website type at the beginning of the html code?
like this? creating html5
_______________________
23rd Nov 2018, 7:13 PM #4
Robotwin.com

User avatar
Posts: 2967
Registration date: 22nd Sep 2010
Location: USA, Milky Way
Doctype is the standard way to tell the browser what it's getting from you, but I suspect that most browsers will correctly interpret your tags and JavaScript even if you mix up the doctype. it won't hurt to test it and see for yourself.

You might be interested in Shumway (a JavaScript shim to run SWF) and a petition to open source Flash.

https://github.com/open-source-flash/open-source-flash


Adobe Animate is their commercial replacement for Flash with HTML5 export ability.
25th Nov 2018, 3:21 AM #5
Xenocartographer
has a sweet tooth
User avatar
Posts: 3650
Registration date: 13th Oct 2010
Location: Champlain College, Burlington, VT
Oh wow, this is really cool, I may have to sub I mean

So Robotwin gave one answer to your question, but here's another angle: the visuals you've got here could be done with CSS3's @keyframes rule, which tends to be more performant (your mobile viewers will thank you) and better supported (ditto). I'm actually working on a CSS3-based animation program for my own purposes, which I can toss your way when it's done.

No matter how you render your visuals, the audio's going to be a problem: HTML5 has a tag for it, but CF doesn't allow uploads of audio files. Unless we can convince Kyo to change that (I don't think he wants to), you'll have to either host your audio elsewhere and hotlink it, or... use Flash for it, which kind of defeats the purpose of not using Flash.

Merged Doublepost:

Here's an animated heart with sound constructed purely in CSS (the only Javascript is for the button to trigger the animation).
_______________________
image
25th Nov 2018, 3:31 AM #6
Morgenstern
Fun-sized
User avatar
Posts: 422
Registration date: 17th Jun 2010
I think iframing HTML5 things is how a lot of game sites handle it. I know for Kongregate, I used to have to upload to dropbox or awardspace, then provide a link for them to iframe from.

No idea how well / if iframes could be snuck onto a comicfury page, though. I'm pretty sure, say, an author's note section doesn't support that kind of html, but it could possibly be done by editing the code behind each page you need to have iframes for. Just throwin it out there.
_______________________
image
25th Nov 2018, 3:36 AM #7
Xenocartographer
has a sweet tooth
User avatar
Posts: 3650
Registration date: 13th Oct 2010
Location: Champlain College, Burlington, VT
There's really no need for an iframe here. They're typically used on sites like Kongregate to sandbox your code (otherwise, nothing stops someone uploading a game that also makes AJAX calls to perform actions as the currently logged-in account).

This is, incidentally, one of the reasons CF serves comics under their own domain - not only does http://foobar.cfw.me look more professional than http://comicfury.com/foobar, the former causes the same-origin policy to come into effect, preventing any Javascript on a comic page from accessing ComicFury with the credentials of the person viewing the comic.

If that's all a blah blah technical mess, the tl;dr is that iframes in this context are a security measure that you don't need to worry about.
_______________________
image
27th Nov 2018, 8:23 PM #8
megamaster

User avatar
Posts: 239
Registration date: 23rd Jul 2010
Thanks for the suggestions everyone! I've got some ideas how I want to do it now. The last thing to figure out would be the audio.
It would be great if I could just host it on Comicfury, but if I host it somewhere else would it still be possible to embed the audio on my site?
_______________________
27th Nov 2018, 10:11 PM #9
Xenocartographer
has a sweet tooth
User avatar
Posts: 3650
Registration date: 13th Oct 2010
Location: Champlain College, Burlington, VT
Sure, the <audio> tag isn't subject to the same-origin policy. As long as you've got it uploaded as a standard audio format, you can embed it.
_______________________
image
27th Nov 2018, 10:14 PM #10
Kyo
🐊
User avatar
Posts: 18560
Registration date: 6th Jul 2008
Location: Germany
if it's small enough a file, you could also do a data URI
_______________________
hello
Forum > Layouts, HTML, CSS & Javascript > Help! Using html5 for Webcomic
Pages: [1]