Praktik Pengembangan Konten HTML5 untuk E-Learning (Extended)
of 38
/38
-
Author
muhammad-yusuf -
Category
Technology
-
view
617 -
download
0
Embed Size (px)
description
Praktik lebih lanjut mengenai pengembangan konten E-Learning yang menggunakan HTML5 sebagai dasar pengembangannya. Library yang digunakan adalah CreateJS.
Transcript of 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]
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>
MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML)
<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"}]);
createjs.Ticker.setFPS(30);}
</script>
MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML)
createjs.Ticker.setFPS(30);}
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);}
MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML)
stage.addChild(tubuhTokoh);}
function onTick(event){stage.update();
}</script>
MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML)
createjs.Ticker.addEventListener("tick", onTick);
var tubuhTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTubuh"));var tanganKananTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganKanan"));
tubuhTokoh.x=50;tubuhTokoh.y=50;
MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML)
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);
MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML)
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>
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
tubuhTokoh.x=50;tubuhTokoh.y=50;tanganKananTokoh.x=160;tanganKananTokoh.y=240;tanganKananTokoh.regX=0;tanganKananTokoh.regY=0;
stage.addChild(tanganKananTokoh);stage.addChild(tubuhTokoh);
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
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);
stage.addChild(tanganKananTokoh);stage.addChild(tubuhTokoh);
SILAKAN DITES.HASILNYA ADALAH TANGAN KANAN DARI TOKOH YANG BERGERAK-GERAK.
MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML)
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;
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
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;
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
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
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
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"}]);
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
var tanganTongkatTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganTongkat"));var bola = new createjs.Bitmap(antrianLoad.getResult("gbrBola"));
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
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;
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
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);
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
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
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><script src="soundjs-0.5.0.min.js"></script>
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
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"}]);
MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML)
}
function onCompleteTweenTanganTongkat(){createjs.Sound.play("suaraPantul");
}
function onTick(event){stage.update();
}
SELESAI. TERIMAKASIH.RÈNGSÈ. HATUR NUHUN.
SAMPAI BERJUMPA DI KESEMPATAN BERIKUTNYA.
