Download - Praktik Pengembangan Konten HTML5 untuk E-Learning (Extended)

PRAKTIK PENGEMBANGAN KONTEN HTML5 UNTUK E-LEARNING (EXTENDED)

PRAKTIK PENGEMBANGAN KONTEN HTML5 UNTUK E-LEARNING (EXTENDED)MUHAMMAD [email protected]

mailto:[email protected]

MENGESET FPS UNTUK TICKER CANVAS

EXTENDED-1

MENGESET FPS UNTUK TICKER CANVAS (INDEX.HTML)

function init(){stage = new createjs.Stage("kanvas1");

antrianLoad = new createjs.LoadQueue(false);antrianLoad.installPlugin(createjs.Sound);antrianLoad.addEventListener("complete",

handleComplete);antrianLoad.loadManifest([{id:"suara1",

src:"computermagic.mp3"}]);

scorm.init();

createjs.Ticker.setFPS(30);}

MENAMBAHKAN OBJEK BITMAP KE CANVASEXTENDED-2

SALIN FOLDER TOKOH YANG BERISI GAMBAR YANG AKAN DIGUNAKAN

MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML)

<!doctype html><html lang="en"><head>

<meta charset="UTF-8"><title>Materi 2</title><link rel=“stylesheet" href="style.css"><script

src="easeljs-0.7.0.min.js"></script><script

src="preloadjs-0.4.0.min.js"></script></head>


<body onload=“init()”><table align="center" id="frameContent">

<tr height="120" class="headerTable"><th colspan="3">Materi 2</th>

</tr><tr height="400" class="bodyTable">

<td colspan="3"><canvas id="kanvas1" width="800" height="400"></canvas>

</td></tr><tr height="80" class="footerTable">

<td width="80%"><a href="index.html"><img src="images/home.png" alt="" style="padding-left: 10px;"></a></td>

<td width="10%"><a href="index.html"><img src="images/prev.png" alt=""></a></td>

<td width="10%"><a href="index2.html"><img src="images/next.png" alt=""></a></td>

</tr></table>

</body>

MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML)<script src="easeljs-0.7.0.min.js"></script><script src="preloadjs-0.4.0.min.js"></script><script>

var stage;var antrianLoad;

function init(){stage = new createjs.Stage("kanvas1");

antrianLoad = new createjs.LoadQueue(false);antrianLoad.installPlugin(createjs.Sound);antrianLoad.addEventListener("complete", handleComplete);antrianLoad.loadManifest([{id:"gbrTubuh",

src:"tokoh/tubuh.png"}, {id:"gbrTanganKanan", src:"tokoh/tangan_kanan.png"}, {id:"gbrTanganTongkat", src:"tokoh/tangan_tongkat.png"}]);


</script>



function handleComplete(event){createjs.Ticker.addEventListener("tick", onTick);

var tubuhTokoh = new createjs.Bitmap(antrianLoad.getResult(“gbrTubuh"));

tubuhTokoh.x=50;tubuhTokoh.y=50;

stage.addChild(tubuhTokoh);}


stage.addChild(tubuhTokoh);}

function onTick(event){stage.update();

}</script>


createjs.Ticker.addEventListener("tick", onTick);

var tubuhTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTubuh"));var tanganKananTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganKanan"));



var tubuhTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTubuh"));var tanganKananTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganKanan"));

tubuhTokoh.x=50;tubuhTokoh.y=50;tanganKananTokoh.x=160;tanganKananTokoh.y=240;

stage.addChild(tubuhTokoh);


tubuhTokoh.x=50;tubuhTokoh.y=50;tanganKananTokoh.x=160;tanganKananTokoh.y=240;

stage.addChild(tanganKananTokoh);stage.addChild(tubuhTokoh);

}

MENGANIMASIKAN BITMAP DI CANVAS

EXTENDED-3

MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)

<script src="easeljs-0.7.0.min.js"></script><script src="preloadjs-0.4.0.min.js"></script><script src="tweenjs-0.5.0.min.js"></script>


tubuhTokoh.x=50;tubuhTokoh.y=50;tanganKananTokoh.x=160;tanganKananTokoh.y=240;tanganKananTokoh.regX=0;tanganKananTokoh.regY=0;



tanganKananTokoh.regX=0;tanganKananTokoh.regY=0;

createjs.Tween.get(tanganKananTokoh, { loop: true }) .to({rotation: -30 }, 1000,

createjs.Ease.linear).to({rotation: 0 }, 1000,

createjs.Ease.linear);


SILAKAN DITES.HASILNYA ADALAH TANGAN KANAN DARI TOKOH YANG BERGERAK-GERAK.


createjs.Ticker.addEventListener("tick", onTick);

var tubuhTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTubuh"));var tanganKananTokoh = new createjs.Bitmap(antrianLoad.getResult(“gbrTanganKanan"));var tanganTongkatTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganTogkat"));



tubuhTokoh.x=50;tubuhTokoh.y=50;tanganKananTokoh.x=160;tanganKananTokoh.y=240;tanganKananTokoh.regX=0;tanganKananTokoh.regY=0;tanganTongkatTokoh.x=145;tanganTongkatTokoh.y=250;tanganTongkatTokoh.regX=-10;tanganTongkatTokoh.regY=100;tanganTongkatTokoh.visible=false;


createjs.Tween.get(tanganKananTokoh, { loop: false }) .to({rotation: -30 }, 500, createjs.Ease.linear).to({rotation: 0 }, 500, createjs.Ease.linear).to({visible:false},0);

createjs.Tween.get(tanganTongkatTokoh, { loop: false })

.wait(1000)

.to({visible:true}, 0)

.to({rotation: -20 }, 500, createjs.Ease.linear)

.to({rotation: 0 }, 500, createjs.Ease.linear);

stage.addChild(tanganKananTokoh);stage.addChild(tanganTongkatTokoh);stage.addChild(tubuhTokoh);

SILAKAN DITES.HASILNYA ADALAH TANGAN KANAN DARI TOKOH YANG BERGERAK-GERAK.

SALIN BERKAS BASKETBALL.PNG


antrianLoad.loadManifest([{id:"gbrTubuh", src:"tokoh/tubuh.png"}, {id:"gbrTanganKanan", src:"tokoh/tangan_kanan.png"}, {id:"gbrTanganTongkat", src:"tokoh/tangan_tongkat.png"}, {id:”gbrBola", src:"basketball.png"}]);


var tanganTongkatTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganTongkat"));var bola = new createjs.Bitmap(antrianLoad.getResult("gbrBola"));


tanganTongkatTokoh.regX=-10;tanganTongkatTokoh.regY=100;tanganTongkatTokoh.visible=false;bola.x=500;bola.y=50;bola.scaleX=0.1;bola.scaleY=0.1;bola.regX=bola.image.width/2;bola.regY=bola.image.height/2;


createjs.Tween.get(tanganTongkatTokoh, { loop: false }).wait(1000).to({visible:true}, 0).to({rotation: -20 }, 500,

createjs.Ease.linear).to({rotation: 0 }, 500,

createjs.Ease.linear);createjs.Tween.get(bola, {loop: false})

.wait(2500)

.to({y:300, rotation:-360}, 3000, createjs.Ease.bounceOut);


stage.addChild(tanganKananTokoh);stage.addChild(tanganTongkatTokoh);stage.addChild(tubuhTokoh);stage.addChild(bola);

SILAKAN DITES.HASILNYA ADALAH TERDAPAT BOLA YANG AKAN JATUH MEMANTUL.

MENAMBAHKAN DAN MENSINKRONISASI EFEK SUARA MENGGUNAKAN TIMELINE

EXTENDED-4

SALIN BERKAS PANTUL.MP3


antrianLoad.loadManifest([{id:"gbrTubuh", src:"tokoh/tubuh.png"}, {id:"gbrTanganKanan", src:"tokoh/tangan_kanan.png"}, {id:"gbrTanganTongkat", src:"tokoh/tangan_tongkat.png"}, {id:"gbrBola", src:"basketball.png"}, {id:"suaraPantul", src:"pantul.mp3"}]);


}

function onCompleteTweenTanganTongkat(){createjs.Sound.play("suaraPantul");

}

function onTick(event){stage.update();

}

SELESAI. TERIMAKASIH.RÈNGSÈ. HATUR NUHUN.

SAMPAI BERJUMPA DI KESEMPATAN BERIKUTNYA.