Post on 02-Jul-2015
description
31 Oktober 2013
Praktik Konten E-Learning HTML5 SederhanaMuhammad Yusuf - muhammad.yusuf@comlabs.itb.ac.id
0101
CreateJS
✤ EaselJS
✤ TweenJS
✤ SoundJS
✤ PreloadJS
0101
Menyalin Library CreateJSSalin isi folder lib dari masing-masing plugin tersebut ke folder proyek Anda yang telah dibuat kemarin (Web Frame).
0101
Membuat objek di Canvas✤ Circle✤ Text✤ Shadow Property
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>
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>
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;
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();
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();
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);
Menambahkan teks di canvas (index.html)
stage.addChild(text);stage.addChild(bulat1);stage.addChild(bulat3);stage.addChild(bulat2);
Menambahkan bayangan pada teks di canvas (index.html)
text.x = 100;text.y = 250;text.shadow = new createjs.Shadow("#000000",
5, 5, 10);
Multimedia HTML5Tween
Audio
Preloader
Event
Ease
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>
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);
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();
}
Silakan dites.Mari lakukan juga hal yang sama untuk bulat2 dan bulat3
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);
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>
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");}
Event (index.html)
function onBulatClick(event){createjs.Sound.stop("suara1");createjs.Sound.play("suara1");
}
function onTick(event){stage.update();
}
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);
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);
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);
SCORMSharable Content Object Relational Model
0101
Library Pipwerks SCORM
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>
SCORM (index.html)
var stage;var antrianLoad;var scorm = pipwerks.SCORM;
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();
}
SCORM (index.html)
function onTick(event){stage.update();
}
function end(){scorm.set("cmi.core.lesson_status", "completed");scorm.quit();
}</script>
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>
Sekian.
muhammad.yusuf@live.com