Praktik Pengembangan Konten HTML5 untuk E-Learning (Extended)
•Descargar como PPT, PDF•
0 recomendaciones•1,358 vistas
Praktik lebih lanjut mengenai pengembangan konten E-Learning yang menggunakan HTML5 sebagai dasar pengembangannya. Library yang digunakan adalah CreateJS.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (11)
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.