| Useful tips |
|
If you are reading these tips, you must either have completed your first Flipbook or just anxious to make
your first Flipbook look even better. As you create more and more Flipbooks, you would become more experienced
and would be able to create better Flipbooks. Meanwhile, here's some tips to start you off, if you have not already
known.
|
| |
| The look of the "Table of Contents" |
| |
|
For whatever, or almost anything that you are compiling into your Flipbook, be it family photographs, book,
magazine, your own webpage etc, it would be good to have a table of contents at the beginning of the
Flipbook. The table of contents would show to your readers what to expect in the Flipbook, especially if there
are lots of contents in there. Let us show you some examples of the Table of Contents.
|
| |
| The Typical Table of Contents |
| |
|
Flip any book you have at home and the table of contents would look typically like this:
|
| |
 |
| |
|
If you like this basic format, use it. How? Simple. Not only would your table of contents look similar to
those typically found in books, it has an added advantage that your table of contents can help the reader
FLIP to the page that he wants, something that is difficult or impossible to do with a real book. Here's how.
|
| |
|
You need to create a HTML page for your table of contents. Just create a table with as many rows and columns
that you would require and type in all the relevant content information. Next create links for all
your sub-contents to the relevant pages in your Flipbook. FlipViewer® automatically checks the links
in the table of contents and if the URL has already been used in the Flipbook, it will automatically flip
to the page that you want, else it would advance to the last page of the book and display whatever your
URL points to. Let us show you what we mean by using the above table of contents.
|
| |
|
The page containing "What is FlipViewer®" will certainly not be in the first page of your Flipbook
since you already have your table of contents. Lets say it is found at page 2 and the information
resides in www.FlipViewer.com/what_is_FlipViewer®.htm. So in your table of contents, create a link for "
What is FlipViewer®?" and point it to ww.FlipViewer.com/what_is_FlipViewer.htm. Your final table
of contents should look like this. Do the same for the rest of the sub-contents. Remember to test your links.
|
| |
|
If your Flipbook consists mainly of pictures, then one interesting way to display your table of contents would be
to have thumbnails of the pictures. Just like the typical table of contents, instead of having text with links to
the relevant pages in your Flipbook, simply create thumbnails in your HTML page and link them to the relevant
pictures in the Flipbook. You may use our FlipViewer® picture files shown below without our permission on
your website.If you have many pictures and one page of your Flipbook cannot contain all your thumbnails, then
use two pages or use the centerfold mode for your table of contents. Here's an example.
|
| |
 |
| |
| Combination of Text and Thumbnails |
| |
|
If your Flipbook is not too massive (not so much content), you may want to try a combination of text and thumbnails for your table of contents.
Just combine the steps in 2.1 and 2.2 and it may look like this. You can also do this in many other ways, and that we leave it to your imagination.
|
| |
 |
| |
| Update Your OPF File |
| |
|
Once your table of contents is completed, remember to include it in your OPF file under the <manifest> <manifest>
and <spine> <spine> sections. As your table of contents is likely to be a HTML page, remember to change your media type
to "text/html". Assuming you saved your table of content as contents.htm, that portion of the OPF codes should look
something like this.
|
| |
<manifest>
....
<item id = "item01" href = "http://www.yoursite.com/contents.htm"
media-type = "text/html"/>
....
</manifest>
<spine>
....
<itemref idref = "item01" centerfold = "yes"/>
....
</spine>
|
|
| |
| Window Resolution |
| |
|
FlipViewer® pages can be in one of three formats: a) FLP b) jpg or c)HTML.
Both FLP pages and pages containing jpg pictures will automatically scale to fit the size of your window, regardless of your screen
resolution. This is a feature unique to FlipViewer®. To see an example of a book containing FLP page, click
here.
Pages containing HTML will not scale automatically to fit the window size (as is the case in normal browsers). It will look nicer if
HTML pages are authored to fit a certain minimun window resolution.
For non-scaling HTML pages, the following apply:
Some Internet users have monitor screens configured at 800x600 resolution. But others may have theirs configured at 1024x768 or
even higher resolutions. As such, your Flipbook may look "different" when viewed under different screen resolutions, to the extent that
it may look lop-sided like what you see in the flipbook below. This Flipbook was designed under 800x600 resolution but viewed under
1024x768 resolution, there seemed to be lots of space below the Flipbook that is wasted. The reverse, ie designed under 1024x768
resolution and viewed under 800x600 resolution may result in a worse Flipbook because some or all the pages may be truncated on the sides
and bottoms.
|
| |
 |
 |
Designed under 800x600
but viewed under 1024x768 |
Designed under 1024x768
but viewed under 800x600 |
|
| |
|
Thus when you are creating HTML pages for your Flipbooks, you must know what screen resolution most of your readers would configure their
monitors. To be on the safe side, design them under 800x600 as most people have that resolution configured. But to prevent "lopsidedness",
you should position your contents of your page right in the center of your page so that it would look centralised regardless of the resolution
of your readers' monitors.
|
| |
| Scroll Bars |
| |
|
Those of you who have starting creating HTML pages for your Flipbook may encounter the problem of scrollbars appearing in every of your HTML
pages when the Flipbook is viewed. This problem can easily be solved by adding the codes scroll="no" within the <body>
</body> section in the HTML codes.
|
| |
<body bgcolor = "#FFFFFF" scroll = "no">
....
</body>
|
|
| |
| Bookmarking |
| |
|
If you have run through the menu bar in FlipViewer®, you might have noticed that there is a feature for bookmarking your Flipbook pages. When
this feature is used when the Flipbook is opened, the bookmarkings are not saved the next time the same Flipbook is opened again. This
little problem can be alleviated by adding in the attribute bookmark = "yes" at the relevant lines of codes in the <spine>
</spine> section of the OPF.
|
| |
<spine>
<itemref
idref="item1" centerfold = "no" bookmark = "yes"
index="no"/>
<itemref idref="item2"
bookmark = "yes"/>
<itemref idref="item3"/>
<itemref idref="item4"/>
<itemref idref="item5"/>
<itemref idref="item6" bookmark = "yes"/>
<itemref idref="item7"/>
<itemref idref="item8"/>
<itemref idref="item9"/>
<itemref idref="item10"/>
<itemref idref="item11" bookmark = "yes"/>
<itemref idref="item12"/>
<itemref idref="item13"/>
</spine>
|
|
| |
|
With the above codes, item1, which could be your table of contents page, item2, which could be Chapter 1, item6 could be Chapter 2 and
item11 your Chapter 3 and so on, the respective pages would be bookmarked automatically in the Flipbook.
|
| |
| Background music |
| |
|
You probably know that this feature exists and there is even an attribute for that. So you can include a piece of your favorite music or song
to be played each time your Flipbook is opened. You can simply insert this attribute under the definition of book attributes,
ie under the <metadata> </metadata> section.
|
| |
<metadata>
<x-metadata>
<meta name ="centerfold" content="no"/>
<meta name ="open_book" content="no"/>
<meta name ="page_background" content="color: 16711680"/>
<meta name ="background_music" content="yes www.yoursite.com/abc.mp3"/>
</x-metadata>
</metadata>
|
|
| |
| FlipBook Covers |
| |
|
Once you have "touched-up" your FlipBook with the above ideas, your masterpiece would be complete with the creation of some nice
covers (front and back). As with the table of contents, there are many ways to design your covers. We will elaborate a few here.
|
| |
| Using A Picture |
| |
| Combination of Picture and Text |
| |
|
As with the the table of contents, you can create a HTML page consisting of a picture and some descriptive
text for your cover. Once you have designed your cover, just define it as the first item in the <manifest> </manifest> and
more importantly in the <spine> </spine> sections. Pretty straight forward too.
|
| |
| Using the FLP format |
| |
|
With this FLP format, you would be able to create a cover that includes both Sections 7.1 and 7.2 above, and at the same time,
your cover will be one that scales all the way to the edges. Compare the following covers and you will understand what we mean.
|
| |
 |
| |
|
The third cover is done using the FLP format. So what is this FLP format? This is best explained by showing you how it is done.
Lets assume the picture in the cover is saved in www.yoursite.com/cover.jpg. You have to create a FLP file with the following codes
and save it in www.yoursite.com/cover.flp.
|
| |
<!-- Version 1.0 -->
<html>
<head>
<style type = "text/css">
<!--
#idBody {position: absolute; top: 0; left: 0; width: 418; height:
482; background-image: url<cover.jpg>}
-->
</style>
</head>
<body>
<div
id = "idBody">
</div>
</body>
</html>
|
|
| |
|
Once this is done, include the following line of code in your <manifest> </manifest>
section. Remember that your item01 is pointing to cover.flp which points to cover.jpg. Also note that the media type is "application/x-flp".
|
| |
|
<item id = "item01"
href = "http://www.yoursite.com/cover.flp" media-type =
"application/x-flp"/>
|
|
| |
| Try it, and you would have a nice cover. You can do the same for the back cover or use any other method that you like. |
| |
| >> Back to Content
|
