I’ll start with a disclaimer: I am a print-based graphic designer with a little HTML/CSS knowledge.
I maintain the website for my company, but I’ve been forced to use this awful GoDaddy Website Builder and one of their hideous themes. I’ve tried to talk my boss into letting me build a new page from scratch, not using the stupid Website Builder, to no avail, so this is what I’m working with. This is probably a factor in the issue I am experiencing.
I was asked to take a print document that I created and make it display in the browser with page-turning effects. That’s easy enough to do in InDesign - it exports as both .SWF and .HTML. files. I can open the HTML in any browser. The SWF will not open unless I open it in an Adobe program, which converts it to that particular file type.
I tried to upload and link both the HTML and the SWF to the website. The HTML displays a blank page, and the SWF just downloads the file. I think I need to somehow upload the SWF and use the HTML to display it? This is further complicated by the fact that the horrendous GoDaddy Website Builder does not have any sort of traditional FTP, so I’m not sure how to find the location and file path.
Go here: https://www.nortonceilings.com/products.html (have a laugh at the hideous site) and click the “View our Wood Ceiling and Wood Wall Inspiration Booklet” link. That is the HTML file, generated by InDesign and uploaded.
You want to not rely on flash. IMHO the best would be to have each booklet page be its own HTML page so that they can be viewed without JavaScript. But to take advantage of JavaScript when possible to greatly enhance the experience.
What you are looking for is not “turning” but variously called “book flip”, “flip book”, “page flip”, “flip page”.
AFAIK, most are intended to be used with images, but there are some that work with text content too.
The OP does have a PDF alternative, but yes, html would be preferable to Flash.
But I think since the OP knows how bad the site really is, I think the real problem is not in code, but how to convince the powers that be that this is not the right way to create a website in the 21st century.
Okay, so Flash is pretty much obsolete. Convincing my superiors to let me build a better site is a fight that I gave up on long ago. For now, I’ve just got the PDF up there and took down the Flash link.
How would I go about creating the flipbook effect with HTML?
The other option I’m looking into is the plethora of online services that convert PDFs to flipbooks.
How would I go about creating the flipbook effect with HTML?
If you try to Google this question, you’ll probably go down a bad path of scammy websites trying to sell you some terrible software/plugin. For all intents and purposes, you can’t do this in HTML. HTML is stupid. It doesn’t really know how to do anything on it’s own. Everything that actually does something on a page is JavaScript.
I’m not sure what you mean by “flipbook” (I didn’t go to the site and I don’t have Flash installed anyway), but one of these might help you:
I think if you Google html5 flipbook you’ll find several sites which will create all the images, HTML and JS to create a decent flip book online. As @mawburn says it’s the JS that does the clever stuff, so it’s a misnomer to call it an HTML flipbook. Nevertheless, that’s what they seem to be called.