Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Praktik Konten E-Learning HTML5 Sederhana
Muhammad Yusuf - muhammad.yusuf@comlabs.itb.ac.id
31 Oktober 2013

Silakan unduh
library createJS
http://www.createjs.com

01

CreateJS

✤

EaselJS

✤

TweenJS

✤

SoundJS

✤

PreloadJS

01

Menyalin
Library
CreateJS
Salin isi folder lib dari masing-masing
plugin tersebut ke folder proyek Anda
yang telah dibuat kemarin (Web Frame).

01

Membuat objek
di Canvas
✤

Circle

✤

Text

✤

Shadow Property

01

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(){
bulat1.graphics.beginFill("#FF0000").drawCircle(0,
0,20);
bulat1.x=370;
bulat1.y=100;

Membuat 2 lingkaran lagi di canvas
(index.html)
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.update();

Merubah Z-index di canvas
(index.html)
bulat1.x=370;
bulat1.y=100;
bulat2.x=400;
bulat2.y=100;
bulat3.x=430;
bulat3.y=100;
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;

Menambahkan teks di canvas
(index.html)

stage.addChild(text);

Menambahkan bayangan pada
teks di canvas (index.html)

text.x = 100;
text.y = 250;
text.shadow = new createjs.Shadow("#000000",
5, 5, 10);

Multimedia HTML5
Tween
Audio
Preloader
Event
Ease

Membuat Tween(index.html)

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"/>
<script src="easeljs-0.7.0.min.js"></script>
<script src=“tweenjs-0.5.0.min.js"></script>

bulat1.x=0;
bulat1.y=100;
bulat2.x=400;
bulat2.y=100;
bulat3.x=430;
bulat3.y=100;
createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1000);
createjs.Ticker.addEventListener("tick", onTick);

stage.addChild(text);
//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.x=400;
bulat2.y=0;
bulat3.x=800;
bulat3.y=100;
createjs.Tween.get(bulat2, {loop:false}).to({y:100}, 1000);

Audio + Preloader (index.html)

<script
<script
<script
<script

src="easeljs-0.7.0.min.js"></script>
src="tweenjs-0.5.0.min.js"></script>
src="soundjs-0.5.0.min.js"></script>
src="preloadjs-0.4.0.min.js"></script>

Audio + Preloader (index.html)
var stage;
var antrianLoad;
function init(){
antrianLoad = new createjs.LoadQueue(false);
antrianLoad.installPlugin(createjs.Sound);
antrianLoad.addEventListener("complete", handleComplete);
antrianLoad.loadManifest([{id:"suara1", src:"computermagic.mp3"}]);
}
function handleComplete(event){
//dan seterusnya…
createjs.Sound.play("suara1");
}

Event (index.html)

function onBulatClick(event){
createjs.Sound.stop("suara1");
createjs.Sound.play("suara1");
}
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);
1000);
bulat1.addEventListener("click", onBulatClick);

Timeline (index.html)

1000);
createjs.Tween.get(bulat2,
{loop:false}).wait(2000).to({y:100}, 1000);
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);

SCORM
Sharable Content Object Relational Model

SCORM (index.html)

<script
<script
<script
<script
<script

src="easeljs-0.7.0.min.js"></script>
src="tweenjs-0.5.0.min.js"></script>
src="soundjs-0.5.0.min.js"></script>
src="preloadjs-0.4.0.min.js"></script>
src="SCORM_API_wrapper.js"></script>

SCORM (index.html)

var stage;
var antrianLoad;
var scorm = pipwerks.SCORM;

SCORM (index.html)
function init(){
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)

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">
<item identifier="SCORM12_wrapper_test" isvisible="true" identifierref="pipfiles">
</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

Praktik Pengembangan Konten E-Learning HTML5 Sederhana

More Related Content

What's hot

More from Muhammad Yusuf

Recently uploaded

Praktik Pengembangan Konten E-Learning HTML5 Sederhana