Praktik Pengembangan Konten HTML5 untuk E-Learning (Extended)

850
-1

Published on

Praktik lebih lanjut mengenai pengembangan konten E-Learning yang menggunakan HTML5 sebagai dasar pengembangannya. Library yang digunakan adalah CreateJS.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
850
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Praktik Pengembangan Konten HTML5 untuk E-Learning (Extended)

  1. 1. PRAKTIK PENGEMBANGAN KONTEN HTML5 UNTUK E-LEARNING (EXTENDED) E-LEARNING (EXTENDED) MUHAMMAD YUSUF MUHAMMAD.YUSUF@COMLABS.ITB.AC.ID
  2. 2. EXTENDED-1 MENGESET FPS UNTUK TICKER CANVAS
  3. 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. 4. EXTENDED-2 MENAMBAHKAN OBJEK BITMAP KE CANVAS
  5. 5. SALIN FOLDER TOKOH YANG BERISI GAMBAR YANG AKAN DIGUNAKAN
  6. 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. 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. 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. 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. 10. MENAMBAHKAN OBJEK BITMAP KE CANVAS (INDEX2.HTML) stage.addChild(tubuhTokoh); } function onTick(event){ stage.update(); } </script>
  11. 11. 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;
  12. 12. 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);
  13. 13. 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); }
  14. 14. EXTENDED-3 MENGANIMASIKAN BITMAP DI CANVAS
  15. 15. 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>
  16. 16. 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);
  17. 17. 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);
  18. 18. SILAKAN DITES. HASILNYA ADALAH TANGAN KANAN DARI TOKOH YANG BERGERAK-GERAK.
  19. 19. 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;
  20. 20. 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;
  21. 21. 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);
  22. 22. SILAKAN DITES. HASILNYA ADALAH TANGAN KANAN DARI TOKOH YANG BERGERAK-GERAK.
  23. 23. SALIN BERKAS BASKETBALL.PNG
  24. 24. 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"}]);
  25. 25. MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML) var tanganTongkatTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganTongkat")); var bola = new createjs.Bitmap(antrianLoad.getResult("gbrBola"));
  26. 26. 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;
  27. 27. 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);
  28. 28. MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML) stage.addChild(tanganKananTokoh); stage.addChild(tanganTongkatTokoh); stage.addChild(tubuhTokoh); stage.addChild(bola);
  29. 29. SILAKAN DITES. HASILNYA ADALAH TERDAPAT BOLA YANG AKAN JATUH MEMANTUL.
  30. 30. EXTENDED-4 MENAMBAHKAN DAN MENSINKRONISASI EFEK SUARA MENGGUNAKAN TIMELINE
  31. 31. SALIN BERKAS PANTUL.MP3
  32. 32. 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>
  33. 33. 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"}]);
  34. 34. MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML) } function onCompleteTweenTanganTongkat(){ createjs.Sound.play("suaraPantul"); } function onTick(event){ stage.update(); }
  35. 35. SELESAI. TERIMAKASIH. RÈNGSÈ. HATUR NUHUN. RÈNGSÈ. HATUR NUHUN. SAMPAI BERJUMPA DI KESEMPATAN BERIKUTNYA.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×