![Page 3: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/3.jpg)
0101
CreateJS
✤ EaselJS
✤ TweenJS
✤ SoundJS
✤ PreloadJS
![Page 4: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/4.jpg)
0101
Menyalin Library CreateJSSalin isi folder lib dari masing-masing plugin tersebut ke folder proyek Anda yang telah dibuat kemarin (Web Frame).
![Page 5: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/5.jpg)
0101
Membuat objek di Canvas✤ Circle✤ Text✤ Shadow Property
![Page 6: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/6.jpg)
Membuat canvas (index.html)
<body onload="init()"><table align="center" id="frameContent">
<tr height="120" class="headerTable"><th colspan=“3”>Selamat Datang</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>
![Page 7: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/7.jpg)
Membuat lingkaran di canvas (index.html)<head>
<meta charset="UTF-8"><title>Materi Fisika</title><link rel="stylesheet" href="style.css"/><script src="easeljs-0.7.0.min.js"></script><script>
var stage;
function init(){stage = new createjs.Stage("kanvas1");
var bulat1 = new createjs.Shape();bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);bulat1.x=370;bulat1.y=100;
stage.addChild(bulat1);stage.update();
}</script>
</head>
![Page 8: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/8.jpg)
![Page 9: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/9.jpg)
Membuat 2 lingkaran lagi di canvas (index.html)function init(){
stage = new createjs.Stage("kanvas1");
var bulat1 = new createjs.Shape();var bulat2 = new createjs.Shape();var bulat3 = new createjs.Shape();
bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);
bulat1.x=370;bulat1.y=100;
![Page 10: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/10.jpg)
Membuat 2 lingkaran lagi di canvas (index.html)
bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);bulat1.x=370;bulat1.y=100;bulat2.graphics.beginFill("#00FF00").drawCircle(0,0,20);bulat2.x=400;bulat2.y=100;bulat3.graphics.beginFill("#0000FF").drawCircle(0,0,20);bulat3.x=430;bulat3.y=100;
stage.addChild(bulat1);stage.addChild(bulat2);stage.addChild(bulat3);stage.update();
![Page 11: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/11.jpg)
![Page 12: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/12.jpg)
Merubah Z-index di canvas (index.html)
bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);bulat1.x=370;bulat1.y=100;bulat2.graphics.beginFill("#00FF00").drawCircle(0,0,20);bulat2.x=400;bulat2.y=100;bulat3.graphics.beginFill("#0000FF").drawCircle(0,0,20);bulat3.x=430;bulat3.y=100;
stage.addChild(bulat1);stage.addChild(bulat3);stage.addChild(bulat2);stage.update();
![Page 13: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/13.jpg)
![Page 14: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/14.jpg)
Menambahkan teks di canvas (index.html)
bulat3.x=430;bulat3.y=100;
var text = new createjs.Text("Selamat datang di Pembelajaran Fisika HTML5", "30px Arial", “#000000");
text.x = 100;text.y = 250;
stage.addChild(bulat1);stage.addChild(bulat3);
![Page 15: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/15.jpg)
Menambahkan teks di canvas (index.html)
stage.addChild(text);stage.addChild(bulat1);stage.addChild(bulat3);stage.addChild(bulat2);
![Page 16: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/16.jpg)
![Page 17: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/17.jpg)
Menambahkan bayangan pada teks di canvas (index.html)
text.x = 100;text.y = 250;text.shadow = new createjs.Shadow("#000000",
5, 5, 10);
![Page 18: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/18.jpg)
![Page 19: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/19.jpg)
Multimedia HTML5Tween
Audio
Preloader
Event
Ease
![Page 20: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/20.jpg)
Membuat Tween(index.html)
<head><meta charset="UTF-8"><title>Materi Fisika</title><link rel="stylesheet" href="style.css"/><script src="easeljs-0.7.0.min.js"></script><script src=“tweenjs-0.5.0.min.js"></script>
![Page 21: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/21.jpg)
Membuat Tween(index.html)
bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);bulat1.x=0;bulat1.y=100;
bulat2.graphics.beginFill("#00FF00").drawCircle(0,0,20);bulat2.x=400;bulat2.y=100;
bulat3.graphics.beginFill("#0000FF").drawCircle(0,0,20);bulat3.x=430;bulat3.y=100;
createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1000);createjs.Ticker.addEventListener("tick", onTick);
![Page 22: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/22.jpg)
Membuat Tween(index.html)
stage.addChild(text);stage.addChild(bulat1);stage.addChild(bulat3);stage.addChild(bulat2);//stage.update() di sini dipindahkan ke
onTick()}
function onTick(event){stage.update();
}
![Page 23: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/23.jpg)
Silakan dites.Mari lakukan juga hal yang sama untuk bulat2 dan bulat3
![Page 24: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/24.jpg)
Membuat Tween untuk bulat2 dan bulat3 juga (index.html)
bulat2.graphics.beginFill("#00FF00").drawCircle(0,0,20);bulat2.x=400;bulat2.y=0;
bulat3.graphics.beginFill("#0000FF").drawCircle(0,0,20);bulat3.x=800;bulat3.y=100;
createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1000);createjs.Tween.get(bulat2, {loop:false}).to({y:100}, 1000);createjs.Tween.get(bulat3, {loop:false}).to({x:430}, 1000);createjs.Ticker.addEventListener("tick", onTick);
![Page 25: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/25.jpg)
Audio + Preloader (index.html)
<script src="easeljs-0.7.0.min.js"></script><script src="tweenjs-0.5.0.min.js"></script><script src="soundjs-0.5.0.min.js"></script><script src="preloadjs-0.4.0.min.js"></script>
![Page 26: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/26.jpg)
Audio + Preloader (index.html)
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:"suara1", src:"computermagic.mp3"}]);
}
function handleComplete(event){var bulat1 = new createjs.Shape();//dan seterusnya…stage.addChild(bulat2);
createjs.Sound.play("suara1");}
![Page 27: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/27.jpg)
Event (index.html)
function onBulatClick(event){createjs.Sound.stop("suara1");createjs.Sound.play("suara1");
}
function onTick(event){stage.update();
}
![Page 28: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/28.jpg)
Event (index.html)
createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1000);createjs.Tween.get(bulat2, {loop:false}).to({y:100}, 1000);createjs.Tween.get(bulat3, {loop:false}).to({x:430}, 1000);
bulat1.addEventListener("click", onBulatClick);bulat2.addEventListener("click", onBulatClick);bulat3.addEventListener("click", onBulatClick);createjs.Ticker.addEventListener("tick", onTick);
![Page 29: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/29.jpg)
Timeline (index.html)
createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1000);createjs.Tween.get(bulat2, {loop:false}).wait(2000).to({y:100}, 1000);createjs.Tween.get(bulat3, {loop:false}).to({x:430}, 1000);
![Page 30: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/30.jpg)
Ease (index.html)
createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1500, createjs.Ease.bounceOut);createjs.Tween.get(bulat2, {loop:false}).wait(2000).to({y:100}, 1000, createjs.Ease.elasticInOut);createjs.Tween.get(bulat3, {loop:false}).to({x:430}, 1500, createjs.Ease.bounceOut);
![Page 31: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/31.jpg)
SCORMSharable Content Object Relational Model
![Page 32: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/32.jpg)
0101
Library Pipwerks SCORM
![Page 33: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/33.jpg)
SCORM (index.html)
<script src="easeljs-0.7.0.min.js"></script><script src="tweenjs-0.5.0.min.js"></script><script src="soundjs-0.5.0.min.js"></script><script src="preloadjs-0.4.0.min.js"></script><script src="SCORM_API_wrapper.js"></script>
![Page 34: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/34.jpg)
SCORM (index.html)
var stage;var antrianLoad;var scorm = pipwerks.SCORM;
![Page 35: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/35.jpg)
SCORM (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.version = "1.2";scorm.init();
}
![Page 36: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/36.jpg)
SCORM (index.html)
function onTick(event){stage.update();
}
function end(){scorm.set("cmi.core.lesson_status", "completed");scorm.quit();
}</script>
![Page 37: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.site/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/37.jpg)
SCORM (imsmanifest.xml)
<?xml version="1.0" encoding="UTF-8"?><manifest xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2" xmlns:imsmd="http://www.imsglobal.org/xsd/imsmd_rootv1p2p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2" identifier="pipwerksWrapperSCORM12" xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd http://www.imsglobal.org/xsd/imsmd_rootv1p2p1 imsmd_rootv1p2p1.xsd http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd"> <organizations default="pipwerks"> <organization identifier="pipwerks" structure="hierarchical"> <title>Materi Fisika</title> <item identifier="SCORM12_wrapper_test" isvisible="true" identifierref="pipfiles"> <title>Materi Fisika</title> </item> </organization> </organizations> <resources> <resource identifier="pipfiles" type="webcontent" adlcp:scormtype="sco" href="index.html"> <file href="index.html" /> <file href="SCORM_API_wrapper.js" /> </resource> </resources></manifest>