Your SlideShare is downloading. ×
  • Like
Praktik Pengembangan Konten HTML5 untuk E-Learning (Extended)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Praktik Pengembangan Konten HTML5 untuk E-Learning (Extended)

  • 541 views
Published

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
541
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
18
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. PRAKTIK PENGEMBANGAN KONTEN HTML5 UNTUK E-LEARNING (EXTENDED) E-LEARNING (EXTENDED) MUHAMMAD YUSUF MUHAMMAD.YUSUF@COMLABS.ITB.AC.ID
  • 2. EXTENDED-1 MENGESET FPS UNTUK TICKER CANVAS
  • 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>
  • 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. 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. 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. EXTENDED-3 MENGANIMASIKAN BITMAP DI CANVAS
  • 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. 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. 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. SILAKAN DITES. HASILNYA ADALAH TANGAN KANAN DARI TOKOH YANG BERGERAK-GERAK.
  • 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. 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. 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. SILAKAN DITES. HASILNYA ADALAH TANGAN KANAN DARI TOKOH YANG BERGERAK-GERAK.
  • 23. SALIN BERKAS BASKETBALL.PNG
  • 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. MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML) var tanganTongkatTokoh = new createjs.Bitmap(antrianLoad.getResult("gbrTanganTongkat")); var bola = new createjs.Bitmap(antrianLoad.getResult("gbrBola"));
  • 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. 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. MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML) stage.addChild(tanganKananTokoh); stage.addChild(tanganTongkatTokoh); stage.addChild(tubuhTokoh); stage.addChild(bola);
  • 29. SILAKAN DITES. HASILNYA ADALAH TERDAPAT BOLA YANG AKAN JATUH MEMANTUL.
  • 30. EXTENDED-4 MENAMBAHKAN DAN MENSINKRONISASI EFEK SUARA MENGGUNAKAN TIMELINE
  • 31. SALIN BERKAS PANTUL.MP3
  • 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. 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. MENGANIMASIKAN BITMAP DI CANVAS (INDEX2.HTML) } function onCompleteTweenTanganTongkat(){ createjs.Sound.play("suaraPantul"); } function onTick(event){ stage.update(); }
  • 35. SELESAI. TERIMAKASIH. RÈNGSÈ. HATUR NUHUN. RÈNGSÈ. HATUR NUHUN. SAMPAI BERJUMPA DI KESEMPATAN BERIKUTNYA.