Download - Praktik Pengembangan Konten E-Learning HTML5 Sederhana

31 Oktober 2013

Praktik Konten E-Learning HTML5 SederhanaMuhammad Yusuf - [email protected]

mailto:[email protected]

0101

Silakan unduh library createJShttp://www.createjs.com

http://www.createjs.com/

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>


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);


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;


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");

}


}

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)


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 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.

[email protected]