E-Magz menggunakan Flash dengan komponen Premium Page Flip – PART I


APA PREMIUM PAGE FLIP ??

Premium Page Flip merupakan sebuah komponen untuk Macromedia Flah MX, Flash MX 2004 dan Flah 8. Dengan menggunakan komponen ini memungkinkan kita untuk membuat catalog online maupun offline dengan efek Real Flipping. Selain itu memudahkan untuk membuat, memodifikasi dan mengintegrasikan catalog dengan Flash Project.

Kita dapat mengontrol komponen menggunakan ActionScript dan membuat aplikasi yang powerful. Selain itu komponen dapat dikonfigurasi melalui XML untuk meng-update halaman tanpa harus mengkompilasi ulang project.

Tidak perlu memiliki skill flash atau programming yang mahir untuk menggunakan komponen ini.

SYSTEM REQUIRMENTS

Sistem Operasi : Windows, Mac OS.

Komponen : Premium Page Flip.MXP (Download Disini)

Tools utama : Macromedia Flah MX atau Flash MX 2004.

Tools Pendukung :

  • Macromedia Extension Manager versi terbaru. (http://www.adobe.com/exchange/em_download/)
  • Notepad
  • Software pengolah gambar (CorelDraw,Adobe Photoshop,Adobe Illustrator, etc)
  • Minimal menggunakan Macromedia Flash Player 6 untuk memutar/menjalankan aplikasi.

INSTALASI KOMPONEN

Buka Macromedia Extension Manager :

Kemudian pilih File > Install Extension > pilih file Premium Page Flip.mxp

Setelah itu buka Macromedia Flash MX untuk meyakinkan bahwa komponen telah terinstall.

STEP BY STEP PEMBUATAN

Persiapan

Buatlah Folder baru untuk menyimpan project misalnya folder dengan nama Majalah. Didalam folder project tersebut buat Folder untuk menyimpan Halaman dan Suara, misalnya folder untuk menyimpan halam diberi nama Pages dan folder untuk menyimpan suara atau music diberi nama Sound. Setelah itu buat File XML dengan menggunakan notepad dan disimpan dengan nama config dengan extensi XML.


Kemudian copy script dibawah (download script) ini kedalam file config.xml ;

<FlippingBook>
<width>600</width> //Panjang Buku dalam pixel = 2x lebar halaman
<height>400</height> //Lebar Buku dalam pixel = panjang halaman

<scaleContent>true</scaleContent> //Scala gambar secara otomatis : true atau false
<firstPage>0</firstPage> //Default first page number = 0 -> cover

<alwaysOpened> false </alwaysOpened>
<autoFlip> 50 </autoFlip>
<flipOnClick> true </flipOnClick>

<staticShadowsDepth> 1 </staticShadowsDepth> //Depth Shadow ditengah buku
<dynamicShadowsDepth> 1 </dynamicShadowsDepth> //Depth Shadow saat flip page

<moveSpeed> 2 </moveSpeed> //Page moving speed during normal page flipping (dragging).
<closeSpeed> 3 </closeSpeed> //Automatic page moving speed on release of the mouse button.
<gotoSpeed> 3 </gotoSpeed>

<flipSound></flipSound> //suara saat flip -> <flipSound>folder/file.extensi<flipSound>
<pageBack> 0xFFFF66 </pageBack> //warna backpage menggunakan hexa

<loadOnDemand> true </loadOnDemand>

<cachePages> true </cachePages> //izinkan Cache : true atau false
<cacheSize> 10 </cacheSize> //Jumlah Cache -> Memory sementara/temporary

<preloaderType> Progress Bar </preloaderType> //Jenis Preload : Progress Bar dan Round
<userPreloaderId></userPreloaderId>

<pages> //Mengatur Banyaknya Halaman
<page>pages/cover.jpg</page> //<page>folder/file.extensi<page> -> Cover = halaman ke 0
<page>pages/1.jpg</page> //<page>folder/file.extensi<page> -> halaman 1
<page>pages/2.jpg</page> //<page>folder/file.extensi<page> -> halaman 2
<page>pages/3.jpg</page> //<page>folder/file.extensi<page> -> halaman 3
<page>pages/4.jpg</page> //<page>folder/file.extensi<page> -> halaman 4
<page>pages/backcover.jpg</page> //<page>folder/file.extensi<page> -> BackCover = halaman ke 4
</pages>
</FlippingBook>

File config.xml ini digunakan untuk mengatur halaman, memasukan gambar ke dalam halaman majalah, memasukan efek suara pada saat flip dan konfigurasi lainnya.

Untuk menambah halaman kita hanya menambahkan kode :

<page>nama folder/nama file</page>

diantara kode <pages> dan </pages> seperti kode-kode diatas.

Untuk menambahkan efek suara kita hanya memasukan alamat file suara tersebut disimpan, alamat tersebut dimasukan diantara kode <flipSound> dan </flipSound>. Misalnya file suara tersebut disimpan di folder Sound dengan nama Flip.mp3, jadi cara penulisannya :

<flipSound>Sound/Flip.mp3</flipSound>

Dan banyak konfigurasi yang dapat dilakukan yang terdapat pada komentar dalam script XML di atas.

Pembuatan Flip Page

Buka Macromedia Flash , kemudian drag component Premium Page Flip ke Workspace :

Kemudian atur properties -> external XML nya dengan nama config.xml :


Beri nama instance component dengan nama book seperti gambar di atas.

Setelah itu masukan gambar yang hendak menjadi isi dari majalah ke dalam folder Pages dan lakukan halaman seperti pengaturan yang telah dijelaskan diatas :

Selain menggunakan XML, pengaturan halaman juga dapat dilakukan pada component properties -> Book Pages :


Setelah semua selesai, Save (file -> save) project dengan nama catalogue di folder Majalah kemudian Publish (file -> publish) :


TARAAAA…. Jadi deh… kemudian tinggal jalankan file yang telah di publish dengan nama catalogue.swf


Untuk pembuatan komponen lain seperti tombol next, previous, cover, backcover, dan lain-lain, akan dibahas pada Part II. Terimakasih untuk menyempatkan membaca artikel ini. Semoga bermanfaat.

Artikel ini berlanjut ke Part II

Download :
Premium Page Flip Component
Panduan Konfigurasi



27 thoughts on “E-Magz menggunakan Flash dengan komponen Premium Page Flip – PART I

  1. Ada contoh file yg sudah jadi ngga bro? Setidaknya contoh .fla sederhananya gitu?
    Kalo boleh kirim ke emailq ya bro

  2. om,, kok ane coba gk bisa ya? jadinya putih smua
    ada pesan “FFlippingBookError: Incorrect XML source..”

    padahal udah sma persis ama yg diatas,, udah saya ulang beberapa kali juga😦
    mohon bantuannya,,

  3. bro gua mau buat animasi intro, pas gw insert scene baru kok gambar nya jadi agak burem gitu

    atau ada cara lain gak buat tambah animasi intro???

  4. Kebetulan lagi ada kerjaan suruh bikin kaya gini [sama persis]!😀 Glad to found them all in here! Lengkap, mudah dan ngga menggurui🙂 Lanjutkan Mas Eko postingannya. Ilmu Anda dan cara penyampaiannya berguna sekali!🙂

  5. terimakasih tutorialnya om..
    saya lagi ada tugas bikin majalah digital,,
    konsep saya bikin daftar isi, trus disana kita bisa gotopage gitu om
    kita bisa loncat ke halaman yang kita suka,
    itu caranya gimana ya? ?
    mohon bantuannya dong,, please…
    replay y om,,
    thankyou

  6. gan setiap ku preview publish sll inix yang eror “Error opening URL ‘file:///D|/majalah/Publish/config.xml'” kslhnx dmn tuh,, udh brpa kali ku rombak file config.xml, tp msih ttp g2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s