Flash Document Viewer dengan Flexpaper

Flexpaper adalah sebuah open source document viewer yang memungkinkan kita untuk menampilkan dokumen pada website tanpa membutuhkan plugin untuk membaca PDF. Flexpaper menyediakan Flex library dan stand alone flash viewer. Kali ini saya akan menunjukkan bagaimanca cara untuk mengubah dokumen pdf menjadi swf dan menampilkannya pada website dengan bantuan Flexpaper.

Install Swftools

Sebelum dapat ditampilkan di flexpaper, dokumen harus di ubah terlebih dahulu ke dalam format swf. Disini saya menggunakan Swftools, swftools adalah sebuah aplikasi yang dapat mengubah dokumen, gambar, atau video kedalam format swf. Swftools dapat berjalan di 3 platform, yaitu Linux, Mac OS dan Windows. Swftools dapat di unduh pada halaman download swftools.

Linux

Untuk pengguna linux, anda harus menginstall library freetype dan jpeglib.

Ubuntu

#apt-get install swftools

Fedora

#yum -y install freetype libjpeg

Masuk ke direktori di mana file swftools di simpan.

#tar -xvzf swftools-0.x.x.tar
#cd swftools-0-x.x.tar
#./configure
#make && make install

Mac OS

Install Mac Ports lalu jalankan perintah berikut

#sudo ports
#install swftools

Untuk pengguna windows, tinggal install aplikasi swftools yang sudah di download.

Convert Document

Swftools sudah terpasang sekarang tinggal mengubah dokument ke dalam format swf. Jalankan perintah berikut di dalam terminal

pdf2swf /direktori/file/pdf/berada.pdf -o /direktori/file/swf/akan/disimpan.swf -f -T 9 -t -G 

Parameters:

• -o : Letak dimana file swf yang dihasilkan akan disimpan.
• -f : Meyimpan seluruh fonts yang dipakai pada dokumen yang akan di ubah kedalam swf.
• -T 9 : File swf hanya dapat dibuka pada Flash versi 9 ke atas.
• -t : Memasukkan perintah stop() pada setiap halaman.
• -G : Kompres dokumen.

Using Flexpaper

Download Flexpaper stand-alone flash version, ekstrak file flexpaper. Struktur direktori flexpaper seperti ini.

Kita hanya tinggal mengganti file paper.swf menjadi file dokumen yang di inginkan. Atau anda juga dapat melakukan modifikasi pada file html. Saya akan memisahkan css dan javascript pada file yang terpisah agar file html lebih mudah dibaca.

HTML

<div id="wrapper">
    <h1 align="center">Flexpaper - Open Source Web Based Document Viewer</h1>
    <div id="box">
    <div id="flashContent"> 
        <p> 
            To view this page ensure that Adobe Flash Player version 
            9.0.124 or greater is installed. 
        </p> 
        <script type="text/javascript"> 
            var pageHost = ((document.location.protocol == "https:") ? "https://" :    "http://"); 
            document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
        </script> 
    </div>
    </div>
</div>

CSS

Saya hanya menambahkan sedikit css hanya untuk membuat container berada di tengah

#wrapper {
    margin:0 auto;
    width:800px
}

#box {
    padding:10px;
    background:#4d4d4d;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Javascript

Saya hanya akan ukuran panjang dan lebar viewer agar sesuai dengan container, dan menambahkan parameter wmode agar tidak terjadi overlap jika ada menu dropdown di atas container viewer.

.....
var flashvars = { 
      SwfFile : escape("jquery-cheatsheet.swf"),//ganti dengan nama file yang akan ditampilkan
      Scale : 0.6, //parameter untuk flexpaper
      ZoomTransition : "easeOut",
      ZoomTime : 0.5,
      ZoomInterval : 0.1,
      FitPageOnLoad : false,
      FitWidthOnLoad : true,
      PrintEnabled : true,
      FullScreenAsMaxWindow : true,
      ProgressiveLoading : true,
      localeChain: "en_US"
      };
 var params = {
    
    }
params.quality = "high";
params.wmode = "opaque"; //parameter wmode untuk mencegah overlap
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "FlexPaperViewer";
attributes.name = "FlexPaperViewer";
swfobject.embedSWF( //parameter untuk swfobject
    "FlexPaperViewer.swf", //nama viewer flexpaper
    "flashContent", 
    "780", "700", //panjang dan lebar viewer
    swfVersionStr, xiSwfUrlStr, 
    flashvars, params, attributes);
swfobject.createCSS("#flashContent", //css id yang akan di inject oleh flexpaper
                    "display:block;text-align:left;");

Untuk lebih jelas tentang parameter yang ada pada flexpaper dan swfobject dapat dilihat di flexpaper wiki dan swfobject wiki.

Pengaturan flexpaper sudah selesai, mudah bukan. Jika Flexpaper dijalankan lewat direktori lokal, anda harus menambahkan direktori tersebut sebagai direktori yang dapat dipercaya oleh adobe flash. Anda dapat melakukannya lewat adobe setting manager.

Resource Link

• Flexpaper Wiki
• Swfobject Wiki
• Pdf2swf Wiki