Praktik Pengembangan Konten HTML5 untuk E-Learning (Extended)
Download as PPT, PDF0 likes1,362 views
Praktik lebih lanjut mengenai pengembangan konten E-Learning yang menggunakan HTML5 sebagai dasar pengembangannya. Library yang digunakan adalah CreateJS.
![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);
}](https://image.slidesharecdn.com/praktikhtml5e-learningextended-131101040425-phpapp02/85/Praktik-Pengembangan-Konten-HTML5-untuk-E-Learning-Extended-3-320.jpg)
![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>](https://image.slidesharecdn.com/praktikhtml5e-learningextended-131101040425-phpapp02/85/Praktik-Pengembangan-Konten-HTML5-untuk-E-Learning-Extended-8-320.jpg)
![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"}]);](https://image.slidesharecdn.com/praktikhtml5e-learningextended-131101040425-phpapp02/85/Praktik-Pengembangan-Konten-HTML5-untuk-E-Learning-Extended-26-320.jpg)
![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"}]);](https://image.slidesharecdn.com/praktikhtml5e-learningextended-131101040425-phpapp02/85/Praktik-Pengembangan-Konten-HTML5-untuk-E-Learning-Extended-35-320.jpg)
Praktik Pengembangan Konten HTML5 untuk E-Learning (Extended)
- 1. PRAKTIK PENGEMBANGAN KONTEN HTML5 UNTUK E-LEARNING (EXTENDED) E-LEARNING (EXTENDED) MUHAMMAD YUSUF MUHAMMAD.YUSUF@COMLABS.ITB.AC.ID
- 3. 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); }
- 4. EXTENDED-2 MENAMBAHKAN OBJEK BITMAP KE CANVAS
- 5. SALIN FOLDER TOKOH YANG BERISI GAMBAR YANG AKAN DIGUNAKAN
- 6. 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>
- 7. 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>
- 8. 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>
- 9. 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); }
- 10. MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML) stage.addChild(tubuhTokoh); } function onTick(event){ stage.update(); } </script>
- 12. 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("gbrTanganK anan")); tubuhTokoh.x=50; tubuhTokoh.y=50;
- 13. MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML) var tubuhTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTubuh") ); var tanganKananTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganK anan")); tubuhTokoh.x=50; tubuhTokoh.y=50; tanganKananTokoh.x=160; tanganKananTokoh.y=240; stage.addChild(tubuhTokoh);
- 14. 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); }
- 17. 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>
- 18. 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);
- 19. 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);
- 20. SILAKAN DITES. HASILNYA ADALAH TANGAN KANAN DARI TOKOH YANG BERGERAK-GERAK.
- 21. 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(“gbrTanganKana n")); var tanganTongkatTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganTogk at")); tubuhTokoh.x=50; tubuhTokoh.y=50;
- 22. 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;
- 23. 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);
- 24. SILAKAN DITES. HASILNYA ADALAH TANGAN KANAN DARI TOKOH YANG BERGERAK-GERAK.
- 26. 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"}]);
- 27. MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML) var tanganTongkatTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganTongkat")); var bola = new createjs.Bitmap(antrianLoad.getResult("gbrBola"));
- 28. 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;
- 29. 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);
- 30. MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML) stage.addChild(tanganKananTokoh); stage.addChild(tanganTongkatTokoh); stage.addChild(tubuhTokoh); stage.addChild(bola);
- 31. SILAKAN DITES. HASILNYA ADALAH TERDAPAT BOLA YANG AKAN JATUH MEMANTUL.
- 32. EXTENDED-4 MENAMBAHKAN DAN MENSINKRONISASI EFEK SUARA MENGGUNAKAN TIMELINE
- 34. MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML) <script <script <script <script src="easeljs-0.7.0.min.js"></script> src="preloadjs-0.4.0.min.js"></script> src="tweenjs-0.5.0.min.js"></script> src="soundjs-0.5.0.min.js"></script>
- 35. 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"}]);
- 36. MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML) } function onCompleteTweenTanganTongkat(){ createjs.Sound.play("suaraPantul"); } function onTick(event){ stage.update(); }
- 38. SELESAI. TERIMAKASIH. RÈNGSÈ. HATUR NUHUN. RÈNGSÈ. HATUR NUHUN. SAMPAI BERJUMPA DI KESEMPATAN BERIKUTNYA.