Halaman

Menjalankan animasi png sequence dengan html5

Menjalankan animasi png sequence dengan html5
Png sequence adalah urutan file png dengan index, yang sudah dipersiapkan sebelumnya.

Ini dia programnya :

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="800"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var iframe = 1;
var maxframe = 10;
var ArrImage = new Array();
for(var i=1;i<=10;i++){
if(i<10) ArrImage[i] = 'images/images000'+i+'.png';
else if(i<100) ArrImage[i] = 'images/images00'+i+'.png';
}

var imageObj = new Image();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

 function animate() {


// update

 // clear
//context.clearRect(0, 0, canvas.width, canvas.height);

 // draw stuff
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = ArrImage[Math.floor(iframe)];

if(iframe<maxframe) iframe+=0.1;
else iframe=maxframe;

 // request new frame
requestAnimFrame(function() {
 animate();
});
}

animate();

 </script>
</body>
</html>



mohon koreksi jika ada kekeliruan di program saya
maklum, masih belajar :)

semoga bermanfaat

sumber:
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

get timer di javascript

t0 = new Date().getTime();
ts = new Date().getTime() - t0;

ts adalah renggang waktu;

sumber:
http://www.w3schools.com/jsref/jsref_gettime.asp

Animasi dengan HTML dan Flash

Cara animasi dengan HTML5 dan Flash


1. Animasikan dengan menggunakan program Flash

2. Kemudian export menjadi png sequence 
    File > Export > Export Movie > Save as Type PNG Sequence
    shortcut : Ctrl + Alt + Shift + S

3. Save menjadi "namafile".png
   Hasilnya : 
       namafile0001.png
       namafile0002.png
       namafile0003.png
       ....
       namafile0258.png (sesuai dengan jumlah frame)

4. Masukkan di JS
var ArrImages = new Array();

var url = "image"; // folder untuk menyimpan file picture.png
var JumImg = 258
var CountImg = JumImg;
for(var i=0;i<=JumImg;i++){
ArrImages[i] = new Image();
ArrImages[i].addEventListener("load", LoadImageCheck, false);
if(i==0) ArrImages[i].src = url+"namafile0001.png";
else if(i<10) ArrImages[i].src = url+"namafile000"+i+".png";
else if(i<100) ArrImages[i].src = url+"namafile00"+i+".png";
else if(i<1000) ArrImages[i].src = url+"namafile0"+i+".png";
}


Labels:
Langganan: Komentar (Atom)