Ada lumayan banyak (sedikit!) teknik men-save movie clip di Flash menjadi image. Salah satu yang terbaik adalah dari flash-db untuk Flash 8. Teknik dengan AS3 juga ada, dan lebih baik serta lebih cepat, jika Anda rajin melakukan riset. Tulisan singkat ini bertujuan membantu para pemula yang ingin membuat game mewarnai yang hasilnya bisa di-save menjadi .jpg, plus dengan skor.
Pada contoh swf di bawah ini, game dimainkan dengan memilih warna yang sesuai dengan contoh. Hanya boleh sekali mewarnai objek, namun tombol "reset" memungkinkan memulai ulang game ini. Setiap warna mendapatkan poin, warna yang benar 10 poin, salah 5 poin.
Button "Save" hanya muncul jika poin sudah lebih dari 15. Klik button "save preview" untuk melihat hasil yang siap diprint di browser. Lalu save melalui menu browser: File/Save as, dan namakan dengan mengganti ekstensi tojpg.php menjadi "namafile.jpg". WARNING: Harap bersabar sewaktu convert ke image karena butuh waktu cukup lama untuk php membuat image berdasarkan data record Flash.
DOWNLOAD SOURCE
Pada intinya, file Flash yang bisa didownload di atas mempunyai tiga bagian kode: mouse dan tombol untuk skoring dan interaksi; kode mewarnai, dan kode print yang mengirim data ke file "tojpg.php".
Asetnya: objek gambar berwarna dan outline; kursor berbentuk kuas; panel warna, tombol save dan reset, serta dynamic text untuk skor.
Kode di layer "asmouse"
//deklarasi variabel awal
Mouse.hide();
tombol._visible=false;
warnaBaru= 0xFFFFFF;
score=0;
mc.skor.text=score;
fMata=false;//agar tahu itemnya diklik
fBadan=false;
fTanduk=false;
//ubah mouse menjadi kuas
kuas.onEnterFrame=function() {
kuas._x = _root._xmouse;
kuas._y = _root._ymouse;
updateAfterEvent();
}
//tombol save preview muncul saat skor tertentu
_root.tombol.onEnterFrame=function() {
if (score >=15) {
tombol._visible=true;
}
}
//mouse kembali normal ketika rollover di button
tombol.onRollOver = res.onRollOver = function() {
Mouse.show();
kuas._visible=0;
};
//sebaliknya
tombol.onRollOut = res.onRollOut = function() {
Mouse.hide();
kuas._visible=1;
};
//panel warna membesar saat rollover dan kembali mengecil ketika rollout
w1.onRollOver=w2.onRollOver=w3.onRollOver=w4.onRollOver=w5.onRollOver=w6.onRollOver=w7.onRollOver = function() {
this.gotoAndStop(2);
};
w1.onRollOut=w2.onRollOut=w3.onRollOut=w4.onRollOut=w5.onRollOut=w6.onRollOut=w7.onRollOut = function() {
this.gotoAndStop(1);
};
Kode di atas berisi deklarasi variabel awal dan interaksi panel warna, serta mengubah mouse menjadi kuas.
Kode di layer "ascolor"
//kode mengambil warna
_root.w1.onRelease=function() {
_root.warnaBaru = 0xFFFFFF;
}
_root.w2.onRelease=function() {
_root.warnaBaru = 0xCC66FF;
_root.fTanduk=true;
}
_root.w3.onRelease=function() {
_root.warnaBaru = 0xFFFF00;
}
_root.w4.onRelease=function() {
_root.warnaBaru = 0x00FF00;
_root.fBadan=true;
}
_root.w5.onRelease=function() {
_root.warnaBaru = 0xFF0000;
}
_root.w6.onRelease=function() {
_root.warnaBaru = 0x0000FF;
}
_root.w7.onRelease=function() {
_root.warnaBaru = 0x000000;
_root.fMata=true;
}
//fungsi memberi warna dan menambah skor. Bagian objek dikasih nama instance g1, g2, g3
_root.mc.g1.onRelease=function() {
warnaku = new Color(this);
warnaku.setRGB(_root.warnaBaru);
delete warnaku;
this.enabled=false;
if (_root.fMata) {
_root.score +=10;
_root.mc.skor.text=score;
}
else {
_root.score +=5;
_root.mc.skor.text=score;
}
}
_root.mc.g2.onRelease=function() {
warnaku = new Color(this);
warnaku.setRGB(_root.warnaBaru);
delete warnaku;
this.enabled=false;
if (_root.fTanduk) {
_root.score +=10;
_root.mc.skor.text=score;
}
else {
_root.score +=5;
_root.mc.skor.text=score;
}
}
_root.mc.g3.onRelease=function() {
warnaku = new Color(this);
warnaku.setRGB(_root.warnaBaru);
delete warnaku;
this.enabled=false;
if (_root.fBadan) {
_root.score +=10;
_root.mc.skor.text=score;
}
else {
_root.score +=5;
_root.mc.skor.text=score;
}
}
//fungsi reset
res.onRelease = function() {
_root.score =0;
_root.mc.skor.text=score;
_root.fMata=false;
_root.fBadan=false;
_root.fTanduk=false;
_root.tombol._visible=false;
for(i=1;i<=3;i++){
warnaku = new Color(_root.mc["g"+i]);
warnaku.setRGB(0xFFFFFF);
delete warnaku;
_root.mc["g"+i].enabled=true;
}
}
Catatan: untuk kode yang lebih singkat, Anda bisa memakai array untuk warna. Lalu gunakan for...loops untuk fungsi mewarnai berdasarkan nama button berurutan. Seperti:
for (i = 0; i <= 3; i++)
{
this["btn" + i].id = i;
this["btn" + i].onRelease = function ()
{
warnaBaru= warnaku[this.id];
...
Tapi, kode mewarnai di atas sudah cukup baik dan lebih mudah dimengerti.
Actionscript di atas untuk mengubah warna berdasarkan klik di panel warna. Logika bekerjanya: warna di klik untuk memberi warna baru, Flash mencatat apa warnanya dan variabel khusus untuk disesuaikan dengan bagian yang diwarnai (fMata, fTanduk, fBadan) . Ketika bagian objek diklik maka warnanya berubah mengikuti warna baru, sekaligus menon-aktifkan tombolnya agar skor tidak dimasukkan dobel. Saat mengklik bagian yang diwarnai, Flash akan memeriksa apakah ada variabel khusus. Jika ada (fMata, fTanduk, fBadan), berarti warnanya tepat dan skor akan ditambahkan 10, jika tidak ada variabel itu, hanya ditambahkan 5. Panel warna (w1 ... w7) dibuat dari satu moviclip yang kemudian diberi "tint" sesuai warna yang diinginkan.
Kode di layer "asprint". Actionscript dari flash-db.com (aslinya ada kemampuan capture video)
import flash.display.BitmapData;
tombol.onPress = function() {
output();
};
function output() {
snap = new BitmapData(mc._width, mc._height);
snap.draw(mc);
var pixels:Array = new Array();
var w:Number = snap.width;
var h:Number = snap.height;
//var z:Number = 0
for (var a = 0; a<=w; a++) {
for (var b = 0; b<=h; b++) {
var tmp = snap.getPixel(a, b).toString(16);
pixels.push(tmp);
}
}
var output:LoadVars = new LoadVars();
output.img = pixels.toString();
output.height = h;
output.width = w;
output.send("tojpg.php", "output", "POST");
}
stop();
Kode untuk "tojpg.php"
<?php
$data = explode(",", $_POST['img']);
$width = $_POST['width'];
$height = $_POST['height'];
$image=imagecreatetruecolor( $width,$height );
$background = imagecolorallocate( $image ,0 , 0 , 0 );
//Copy pixels
$i = 0;
for($x=0; $x<=$width; $x++){
for($y=0; $y<=$height; $y++){
$int = hexdec($data[$i++]);
$color = ImageColorAllocate ($image, 0xFF & ($int >> 0x10), 0xFF & ($int >> 0x8), 0xFF & $int);
imagesetpixel ( $image , $x , $y , $color );
}
}
//Output image and clean
header( "Content-type: image/jpeg" );
ImageJPEG( $image );
imagedestroy( $image );
?>
Kode bertujuan untuk merekam pixel di Flash dan mengirimkannya ke file PHP untuk diproses sehingga menghasilkan gambar. Prosesnya cukup lama karena yang direkam adalah pixel demi pixel. Jika movie clipnya berukuran 500x400 maka ada 200.000 pixel yang berarti 800 kb! (200.000 x 4 bytes). Jadi, hindari membuat gambar yang besar atau cari kode AS3 untuk capturing.
TAMBAHAN:
Jika ingin mencetak gambar yang sudah diwarnai dan tidak ingin memakai PHP untuk menghasilkan jpg, Anda bisa memakai "printJob".
Buang kode di layer "asprint", ganti dengan ini.
tombol.onRelease = function() {
var pj = new PrintJob();
var success = pj.start();
if(success) {
pj.addPage (_root.mc, {xMin : 0, xMax: 400, yMin: 0, yMax: 600},{printAsBitmap:false});
pj.send();
}
delete pj;
}
DOWNLOAD SOURCE
