| What is XML? |
| Like HTML, eXtensible Markup Language
(XML) is a markup language for documents containing structured information.
Structured information contains both content (words, pictures, etc.)
and some indication of what role that content plays. The XML specification
defines a standard way to add markup to documents. XML was created
so that structured documents could be used over the web, and it is
easy for the purpose of creating the Flipbook.
|
| Now that you know a little of
what XML is all about, lets examine the OPF XML codes in more details.
The OPF codes are divided into 3 main sections, namely the <meta-data>,
<manifest> and the <spine> sections:
|
| <metadata> </metadata> |
|
Meta-information is simply information
about information. Information on the web often involves many pieces
of associated, descriptive information that aren't always explicitly
represented. The most common and easiest to understand attribute used
by the <meta> element is the "name" attribute. The
"name" attribute specifies the type of information while
the "content" attribute is set to the content of the meta-information
itself. In the example, the codes <meta name="centerfold"
content="no"/> simply defines meta-information about
the flipbook not being in centerfold mode when it opens for you to
view the pages. There are many other attributes such as "page_background",
"openbook", etc that you can defined under the <metadata>
section. The attributes would be discussed in more details in Section
3.1.3.
|
| <manifest> </manifest> |
|
The section of code enclosed by the
tags <manifest> and </manifest> defines the list of documents
(web page, pictures, text etc) that would be used in your Flipbook.
These documents would essentially become the pages of your Flipbook.
Though we would logically arrange the list of documents in a chronological
order, the exact sequence of documents is not important as this would
subsequently be defined in the spine!
|
| <spine> </spine> |
| As mentioned above, the sequence in
which the documents (or pages) appear in your Flipbook is defined
within these tags, and yes, the sequence is indeed important here. |
| Catch a breath for you are going into
the real stuff now and if you are a little confused over some of the
technical terms used so far, look up our glossary
to get a better understanding before moving on. |
| OPF Attributes |
| In our "samplebook.opf"
example, the attributes used are namely "centerfold" and
"index". An attribute is an element parameter that modifies
or refines the meaning of the element, and consists of a name and
a value. For a more detailed list of attributes, please click
here.
The attributes are divided into two types, namely Book Attributes
and Page Attributes. |
| Coding Time |
| Now that you have seen the list of
attributes, it's time to code the OPF file. Lets do this with a new
example. We assume you already have all the 6 images that you want
to include in your Flipbook saved somewhere in your PC, say c:/myphoto/family.jpg,
c:/myphoto/dad.jpg, c:/myphoto/mom.jpg, c:/myphoto/sis.jpg, c:/myphoto/bro.jpg
and c:/myphoto/me.jpg. We also assume you would have downloaded the
OPF code for samplebook.opf in Section 3.1.1. Launch any text editor
(notepad, wordpad, etc) and open the file "samplebook.opf".
Remember to set the file type to "All files or All Documents"
so that you can open an OPF file. Lets bring it in here again.
|
| |
<?xml version = "1.0"
encoding = "UTF-8"?>
<package unique-identifier = "unspecified">
<metadata>
<x-metadata>
<meta name="centerfold" content="no"/>
</x-metadata>
</metadata>
<manifest>
<item id = "item1" href = "" media-type = "application/x-flp"/>
<item id = "item2" href = "http://www.FlipViewer.com/devzone/samples/samplebook/chapter1_pg1.htm"
media-type = "text/html"/>
<item id = "item3" href = "http://www.FlipViewer.com/devzone/samples/samplebook/chapter1_pg2.htm"
media-type = "text/html"/>
<item id = "item4" href = "http://www.FlipViewer.com/devzone/samples/samplebook/chapter1_pg3.htm"
media-type = "text/html"/>
<item id = "item5" href = "http://www.FlipViewer.com/devzone/samples/samplebook/chapter1_pg4.htm"
media-type = "text/html"/>
<item id = "item6" href = "http://www.FlipViewer.com/devzone/samples/samplebook/cvBack.flp"
media-type = "application/x-flp"/>
</manifest>
<spine>
<itemref idref = "item1" page_background="texture:http://www.FlipViewer.com/devzone/samples/samplebook /images/muskafront.jpg
index = "no"/>
<itemref idref = "item2"/>
<itemref idref = "item3"/>
<itemref idref = "item4"/>
<itemref idref = "item5"/>
<itemref idref = "item6" index = "no"/>
</spine>
</package>
|
|
| |
| For those not very familiar with XML,
it is safest to leave the first two codes alone. It is also best to
leave the package unique identifier as "unspecified" as
an identifier will be generated automatically when the OPF is registered
in our Fliplibrary database. So we now have: |
| |
<?xml version="1.0"
encoding="UTF-8"?>
<package unique identifier="unspecified">
|
|
| |
| Next lets tackle the <metadata> </metadata>.
Do a quick brainstorm session in your mind and decide what book attributes
you would like your flipbook to have. Make sure you have your list
of OPF attributes handy. Brainstorming done and you would like to
have no centerfold, closed book when book is launched, and a blue
page background. Good, then your next few codes will look as follows: |
| |
<?xml version="1.0"
encoding="UTF-8"?>
<package unique identifier="unspecified">
<metadata>
<x-metadata>
<meta name ="centerfold" content="no"/>
<meta name ="open_book" content="no"/>
<meta name ="page_background" content="color: 16711680"/>
</x-metadata>
</metadata>
|
|
| |
Attribute setting is purely optional,
as usually your flipbook would look decent enough without the need
for special attributes. Note that the list of attributes would be
progressively extended, so do check back from time to time to see
if there is something new you can use. If you feel that certain attributes
not included here are important, please send it for our consideration
at support@FlipViewer®.com.
|
| |
| Attributes are divided into two categories:
i) Book attributes – which provide the
default settings for all pages in the book
ii) Page attributes – which control the
setting for a specific page of the book. With book attributes, you
can for instance, specify whether all pages should be displayed
in centerfold mode, and the dimensions of the page inset. Book attributes
are specified in tags within the metadata section, as shown below:
|
| |
<metadata>
<x-metadata>
<meta name ="centerfold" content="no"/>
<meta name ="page_inset" content="top: 0.03 bottom
:0.05 inner: 0.06 outer: 0.04/>
</x-metadata>
</metadata>
|
|
| |
| With page attributes, you could, for
instance, specify whether a particular page should be displayed on
the left or right page position in the book, or whether it should
be displayed as a centerfold. Page attributes are specified as part
of the tag within the spine section, as shown below. Note that attributes
are case-sensitive, so “Centerfold” is not a valid attribute
name. |
| |
<spine>
<itemref idref="item1" index="no"/>
<itemref idref="item2" centerfold="yes"/>
<itemref idref="item3" pageside="right"/>
......
</spine>
|
|
| |
| At this juncture, lets look at how
we derive our color setting to be 16711680. As explained in the attributes
table, the number has been converted from a hexadecimal (base 16)
number, which was in turn derived from a combination of 3 colors,
namely blue, green and red. Please note it is not the usual red, green
and blue. Each color can take on a value of 0 to 255. If you are not
familiar with this, try launching Paint - Colors menu - edit colors
- define custom colors >> - and experiment with the color combinations
for blue, green and red by keying in any value between 0 to 255. Lets
assume you arrive at blue: 255, green: 0 and red: 0, which converts
to blue: FF, green: 00 and red: 00 (in hexadecimal). Using the calculator,
FF0000 is converted into the integer 16711680! |
| |
| Another thing to note is to watch
out for are those tags. Always ensure that there is an open and corresponding
close tag for each line of code. |
| |
| We move now to the <manifest>
</manifest> section. This section defines the list of documents
(web page, pictures, text etc) that would be used in your Flipbook.
Following the samplebook.opf example, we define our item ids respectively
to reference the 6 images that you have. Note that if your href points
to an image file, the media-type should be specified as "application/x-flp",
and "text/html" if the href points to a html page. It should
appear as follows: |
| |
<?xml version="1.0"
encoding="UTF-8"?>
<package unique identifier="unspecified">
<metadata>
<x-metadata>
<meta name ="centerfold" content="no"/>
<meta name ="open_book" content="no"/>
<meta name ="page_background" content="color: 16711680"/>
</x-metadata>
</metadata>
<manifest>
<item id="item1" href="c:/myphoto/family.jpg"
media-type="application/x-flp"/>
<item id="item2" href="c:/myphoto/dad.jpg"
media-type="application/x-flp"/>
<item id="item3" href="c:/myphoto/mom.jpg"
media-type="application/x-flp"/>
<item id="item4" href="c:/myphoto/sis.jpg"
media-type="application/x-flp"/>
<item id="item5" href="c:/myphoto/bro.jpg"
media-type="application/x-flp"/>
<item id="item6" href="c:/myphoto/me.jpg" media-type="application/x-flp"/>
</manifest>
|
|
| |
| In our example, all the pages consist
of images. What if you want to include a page filled with text and
images and maybe even hyperlinks? You would then have to create a
web page (eg family.htm) containing the text, images and links and
include it in the <manifest> </manifest> as follows: |
| |
<?xml version="1.0"
encoding="UTF-8"?>
<package unique identifier="unspecified">
<metadata>
<x-metadata>
<meta name ="centerfold" content="no"/>
<meta name ="open_book" content="no"/>
<meta name ="page_background" content="color: 16711680"/>
</x-metadata>
</metadata>
<manifest>
<item id="item1" href="c:/myphoto/family.jpg"
media-type="application/x-flp"/>
<item id="item2" href="c:/myphoto/dad.jpg"
media-type="application/x-flp"/>
<item id="item3" href="c:/myphoto/mom.jpg"
media-type="application/x-flp"/>
<item id="item4" href="c:/myphoto/sis.jpg"
media-type="application/x-flp"/>
<item id="item5" href="c:/myphoto/bro.jpg"
media-type="application/x-flp"/>
<item id="item6" href="c:/myphoto/me.jpg" media-type="application/x-flp"/>
<item id="item7" href="c:/myphoto/family.htm"
media-type="text/html"/>
</manifest>
|
|
| |
| Another item that you may want to add in the Flipbook
is the cover. You may want to create a default cover and use it for
all your Flipbooks or create a new one each time. With the <manifest>
</manifest> done, it's time to finish it up with the <spine>
</spine>. Remember that the order of sequence in the spine is
important. Thus your final OPF file should look like this: |
| |
<?xml version="1.0"
encoding="UTF-8"?>
<package unique identifier="unspecified">
<metadata>
<x-metadata>
<meta name ="centerfold" content="no"/>
<meta name ="open_book" content="no"/>
<meta name ="page_background" content="color: 16711680"/>
</x-metadata>
</metadata>
<manifest>
<item id="item1" href="c:/myphoto/family.jpg"
media-type="application/x-flp"/>
<item id="item2" href="c:/myphoto/dad.jpg"
media-type="application/x-flp"/>
<item id="item3" href="c:/myphoto/mom.jpg"
media-type="application/x-flp"/>
<item id="item4" href="c:/myphoto/sis.jpg"
media-type="application/x-flp"/>
<item id="item5" href="c:/myphoto/bro.jpg"
media-type="application/x-flp"/>
<item id="item6" href="c:/myphoto/me.jpg" media-type="application/x-flp"/>
<item id="item7" href="c:/myphoto/family.htm"
media-type="text/html"/>
</manifest>
<spine>
<itemref idref="item1" index="no"/>
<itemref idref="item2"/>
<itemref idref="item3"/>
<itemref idref="item4"/>
<itemref idref="item5"/>
<itemref idref="item6"/>
<itemref idref="item7"/>
</spine>
</package>
|
|
| |
| If you want the page defined by "item1"
to appear more than once, you can add in an additional line of code
<itemref idref="item1"/> within the section <spine>
and </spine>. The resulting lines of code will look like the
following:
|
| |
<spine>
<itemref idref="item1" index="no"/>
<itemref idref="item2"/>
<itemref idref="item3"/>
<itemref idref="item4"/>
<itemref idref="item5"/>
<itemref idref="item6"/>
<itemref idref="item7"/>
<itemref idref="item1"/>
</spine>
|
|
| |
| And there you are, your very first
Flipbook created in a few minutes! Of course with this OPF file, you
can only view your Flipbook in your own PC. Thus if you want to host
it in your web site or e-mail it to your friends, then you need to
change the respective hrefs to reflect the URLs where your OPF file,
web page and images are hosted. So the OPF file should finally look
like this: |
| |
<?xml version="1.0"
encoding="UTF-8"?>
<package unique identifier="unspecified">
<metadata>
<x-metadata>
<meta name ="centerfold" content="no"/>
<meta name ="open_book" content="no"/>
<meta name ="page_background" content="color: 16711680"/>
</x-metadata>
</metadata>
<manifest>
<item id="item1" href="http://www.yoursite.com/family.jpg"
media-type="application/x-flp"/>
<item id="item2" href="http://www.yoursite.com/dad.jpg"
media-type="application/x-flp"/>
<item id="item3" href="http://www.yoursite.com/mom.jpg"
media-type="application/x-flp"/>
<item id="item4" href="http://www.yoursite.com/sis.jpg"
media-type="application/x-flp"/>
<item id="item5" href="http://www.yoursite.com/bro.jpg"
media-type="application/x-flp"/>
<item id="item6" href="http://www.yoursite.com/me.jpg"
media-type="application/x-flp"/>
<item id="item7" href="http://www.yoursite.com/family.htm"
media-type="text/html"/>
</manifest>
<spine>
<itemref idref="item1" index="no"/>
<itemref idref="item2"/>
<itemref idref="item3"/>
<itemref idref="item4"/>
<itemref idref="item5"/>
<itemref idref="item6"/>
<itemref idref="item7"/>
</spine>
</package>
|
|
| |
| Now remember to save your OPF file as a text file. Test your new Flipbook. |
| |
| Uploading the OPF File |
| |
| Once you have completed your OPF file, you would
be able to host it in your webpage. Simply do a FTP of your OPF file
to your host with all your relevant web pages and images. You may
use any FTP programs available to upload it to your server. For example,
in Internet Explorer, you can consider using the in-built FTP function
for this purpose. You can also create icons for visitors to open your
Flipbooks in addition to browsing the normal HTML pages. Since visitors
to your website may not have FlipViewer® installed, you may also
want to provide a link for them to download FlipViewer® from your
server. For that we will provide you updated versions of the FlipViewer®
executable file so that your visitors can download FlipViewer®
and view your Flipbooks. |
| |
| Associating OPF files |
| |
| You can also e-mail your OPF file to your friends
by simply attaching the OPF file just like any other document. Remember
to include a link to http://www.FlipViewer®.com in your e-mail to remind
your friends to download FlipViewer® first so that they can view
your Flipbook. With FlipViewer® downloaded to their PCs, they
can just double-click the OPF attachment in the e-mail to launch the
Flipbook. Once an OPF file is clicked and returned from the Web Server,
the user will be prompted to open or save the file. When the user
opens an OPF file for the first time he/she can select the "open"
option. After which, all OPF extension files will be opened automatically
in FlipViewer®. |
| |
| Including a FlipViewer® Auto-Install to your FlipBook |
| |
| To setup a FlipViewer® Auto-Install FlipBook,
just add the following codes in brown to your FlipBook link: |
| |
| http://www.FlipViewer.com/fven/?opf{your
FlipBook URL}&ver=Gen |
| |
You can click on the link below to launch the sample FlipBook.
http://www.FlipViewer.com/fvenp/?opf=http://www.FlipViewer.com/home.opf&ver=Gen
For more information on adding a FlipViewer®
Auto-Install to your FlipBook, click
here.
|
| |
| Conclusion |
| |
| Congratulations. You have completed
your Flipbook and can create and publish many more for the enjoyment
of your website visitors. Remember to look through the other pages
in our DevZone section
|
| |
| >> Back to Content
|
