Ada yang pernah lihat image slideshow yang 3D, kalo belum pernah lihat saya kasih lihat deh :D. The Piecemaker kalo bahasa indonesia...
The Piecemaker kalo bahasa indonesianya “si pembuat potongan” (Translate sendiri :D).
The Piecemaker adalah gallery gambar Flash 3D rotator. The Piecemaker adalah Open Source, sehingga anda bebas untuk mendownloadnya atau menggunakannya .
Galeri Piecemaker diciptakan oleh Björn dari Modularweb. Selain freebie, Anda juga akan menemukan dokumentasi ekstensif dan penjelasan fitur 3D asli Flash CS4.
Ekstrak file tersebut maka anda akan mendapatkan beberapa folder dan file seperti berikut:
1. Caurina (Folder)
2. Com (Folder)
3. Documentation (Folder)
4. Images (Folder)
5. Index.html
6. Piecemaker.fla
7. Piecemaker.swf
8. PiecemakerCSS.css
9. PiecemakerNoShadow.fla
10. PiecemakerNoShadow.swf
11. PiecemakerXML.fxml
Untuk mengubah setting image yang akan di tampilkan anda dapat mengubah file piecemakerXML.xml.
Berikut adalah penjelasannya:
<Settings>
<imageWidth>700</imageWidth>
<imageHeight>350</imageHeight>
<segments>7</segments>
<tweenTime>1.2</tweenTime>
<tweenDelay>0.1</tweenDelay>
<tweenType>easeInOutBack</tweenType>
<zDistance>0</zDistance>
<expand>20</expand>
<innerColor>0x111111</innerColor>
<textBackground>0x0064C8</textBackground>
<shadowDarkness>100</shadowDarkness>
<textDistance>25</textDistance>
<autoplay>12</autoplay>
</Settings>
1. imageWidth - lebar gambar yang akan dimuat
2. imageHeight - tinggi gambar yang akan dimuat
3. segmen - jumlah segmen, di mana gambar akan diiris
4. tweenTime - jumlah detik untuk setiap elemen yang akan berbalik
5. tweenDelay - jumlah detik dari satu elemen mulai beralih ke elemen berikutnya dimulai
6. tweenType - jenis transisi dari kelas Tweener Caurina's. Temukan semua jenis transisi dan informasi lebih tentang Tweener dalam dokumentasi.
7. zDistance - untuk memperpanjang perpindahan sumbu z kubus ketika sedang berputar. Nilai negatif membawa kubus lebih dekat ke kamera, nilai-nilai positif membawa lebih jauh. Sebuah rentang yang baik kira-kira antara -200 dan 700.
8. expand - untuk yang memperpanjang kubus menjauh dari satu sama lain saat berputar
9. innerColor - warna sisi unsur-unsur nilai hex (misalnya 0x000000 untuk hitam)
10. textBackground - warna latar belakang teks deskripsi nilai hex (misalnya 0xFF0000 untuk merah)
11. shadowDarkness - untuk yang memperpanjang sisi gelap, ketika elemen berputar dan bergerak menuju sisi latar belakang.
12. textDistance - jarak teks info ke perbatasan latar belakang
13. autoplay - Jumlah detik untuk gambar berikutnya, ketika autoplay aktif. Set 0, jika Anda tidak ingin autoplay.
Untuk menambah atau merubah gambar anda dapat merubah script berikut:
<Image Filename="image1.jpg">
<Text>
<headline>Description Text</headline>
<break></break>
<paragraph>Here you can add a description text for every single image.</paragraph>
<break></break>
<inline>
This is HTML text loaded from the external XML file and formatted with an external CSS file. So it's pretty
simple to set this text. You can also easily add
</inline>
<a href="http://www.modularweb.net/piecemaker" target="_blank">hyperlinks</a>
<paragraph>. This one leads you to the official Piecemaker website, by the way.</paragraph>
</Text>
</Image>
Untuk merubah gambar slidenya anda dapat merubah pada script <Image Filename=”image1.jpg”>, ganti nama image1.jpg dengan nama gambar anda dan jangan lupa copy file gambar tersebut ke folder images.
Ok Selamat Mencoba!
Ok Selamat Mencoba!
wow, keren! langsung ke tkp buat demo...
BalasHapusBerkat ini juga Saya jadi rada-rada tahu tentang cara membuat web berbasis Flash. Ada juga yang sudah dibikin plugin buat wordpress, jadi setingannya lebih mudah, bisa disetting lewat dasbor atau apalah begitu. Dan plugin tersebut kini jadi berbayar. weleeehhh..
BalasHapus