Saturday 8 January 2011

Your Own Page Flip Book



I am working on the school yearbook at BISS. We had a cut to the budget this year and I have had to do a lot of cutting and cramming to squeeze everything in. I decided to make a digital edition where we could make up for the missing content. There are a lot of options out there if you are willing to host it on someone else's site such as Issu.  At our school, we use Issu to host the student-generated school newspaper.  But I wanted more control.  There are online services that will host your yearbook for you such as iYearbook.  They charge $10 per user but encourage you to use it as a fund-raiser, possibly to generate funds for a hard copy of your yearbook.  When you login, it looks a lot like something that you could create yourself using Elgg or something similar.  The images are laid out using what appears to be CoolIris which, again, is something you can do yourself.  And I was looking for something that felt more like a book.

Then I found Megazine3, an open source, flash-driven, page-flip engine.  It is a simple download and if you have any experience with html, it is pretty easy to set up.  If you already have your pages as .pdf files, they have a script you can run that immediately converts your .pdf pages into the page flip book.  It can make a version for your website and another version for CD--pretty handy if you want to include the CD with your yearbook, which is what I am going to do.  You can embed sounds and videos into your pages too.  they have lots of documentation available to show you how to get started.  I was just fooling around with my CV and some letters of reference while I was on the plane to Bangkok for the job fair.  You can see my example here.  I still have to embed the videos and make the cover stiff like a real book but you can at least see what i was able to do in about 10 minutes.  Here is an example of what the code looks like from their quickstart guide:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE book SYSTEM "http://megazine.mightypirates.de/megazine2.dtd">
<book>
<chapter>
<page>
<img src="src/cover_outside.jpg"/>
</page>
<page>
<img src="src/cover_inside_and_inprint.jpg"/>
</page>
<page>
<img src="src/content.jpg"/>
</page>
<page>
<img src="src/some_picture.jpg"/>
</page>
<page>
<img src="src/cover_back_blank.jpg"/>
</page>
<page>
<img src="src/cover_back_outside.jpg"/>
</page>
</chapter>
</book>


No comments:

Post a Comment

What is an Ambigram?

 Watch this to find out: