I want to make the boneeaters website basically an animated comic that takes up the full size of the reader’s browser. I want it to be a simple interface, clear what is showing and what the reader can do, and be super clean. And I want it to just work in any modern browser with no plug-ins, downloads, etc.
I quickly setup a Node server to run the site and some really small stuff that I generally always need (jQuery, a Google font, some flex-based styles). The next hurdle was the actual comic player. I previously decided to learn Adobe’s Animate – which is the spiritual continuation of Adobe Flash (which I really, really liked back in the day). So I first decided to make some simple panels and then publish and see if I could work it into my site.
Once I did that, which was pretty easy going (it really was just like doing this work in Adobe Flash), I then needed to add some site interface stuff like a top header, a bottom footer, and then to have the comic automatically resize to all available space in-between those. I did have to put custom code into Animate’s javascript to reserve the space I needed for the header and footer, and also to keep the comic content positioned between my content (not on-top-of-it as it does by default). And all of that was pretty simple and effective.
My first tech take on the comic player:
I am pretty happy with this first take. Resizing it works perfectly, it keeps my aspect ratio and takes all available space in a clean way. My header and footer stay visible in all (reasonable) sizes. The code runs in all important browsers with no plug-ins, downloads, or other tomfoolery – which is a dramatic improvement over Flash.
How about that? In just a few days I have a better end result than my prior project doing animated comics. I still have some hurdles to push my content into a database and serve it that way (instead of static files) and that looks like it may take some code work on my end to transpose Adobe’s output properly. And I will need to create play/pause, panel strategies, speech bubble strategies, and much more… but, hey, out of the gate I’m pumped up!
Next steps (to help me organize)
Design landing page – a looping animated page in Animate (all content should be in Animate).
- Welcome to Boneeaters
- Get started – watch the intro
- Login to resume your story
- notices: “T” content rating; “Truly Free”; has sound on all other pages
- About Boneeaters
- Project status (“in development, early stages”)