IT 기술 따라잡기

HTML 5로 이미지를 다루는 법을 배워보겠습니다.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
   
    var pic = new Image();
    pic.src="nytimes.jpg";
   
    canvas.drawImage(pic, 0, 0);
 }
 window.addEventListener("load",doFirst,false);

곧바로 자바스크립트부터 들어가죠.
처음에 Image를 다룰 변수를 만들어 줍니다. 여기서는 pic이라는 지역변수(var)를 만들었습니다.
그 다음엔 이 변수에 원하는 이미지를 담습니다. 저는 nytimes.jpg라는 이미지를 사용할겁니다. (이 글 쓰면서 뉴욕타임즈 들어가 보니까 이 이미지가 있더라구요.)
이제 캔바스에다 그리면 됩니다. drawImage를 사용해서 pic을 x=0,y=0의 위치에 그립니다.

이렇게 하면 HTML5로 canvas에 image 를 넣을 수 있습니다.

그러면 아래 세 줄을 추가해 보세요.
    canvas.drawImage(pic, 100, 50,150,80);
    canvas.drawImage(pic, 400, 30, 69, 97, 300, 100, 103, 145);
    canvas.clearRect(500, 100, 10, 40);

좀 어지러워 졌죠?
첫 번째 줄은 이미지를 100,,50인 위치에 너비 150 높이 80으로 그리라는 의미입니다.
그리고 두번째는 400,30인 위치에서 너비 69 높이 97 만큼 복사해서 300,100 위치에 너비 103 높이 145 만큼 그리라는 겁니다.
그리니까 이미지 일 부분을 Copy and Paste 까지 할 수 있네요.
마지막은 우리가 전에 배웠던 clearRect 입니다. 해당 부분 만큼을 지워버리는 거죠.

제대로 설명 된 걸 한번 볼께요.

이제 좀 다이나믹한 걸 함 보겠습니다.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');

     window.addEventListener("mousemove",dougy,false);
 }
 
 function dougy(e) {
    canvas.clearRect(0,0,600,400);
    var xPos = e.clientX;
    var yPos = e.clientY;
    canvas.fillRect(xPos,yPos,50,50);
 }
 
 window.addEventListener("load",doFirst,false);

doFirst 안에 리스너를 하나 달았습니다. 지금까지 맨 밑에 있는 리스너만 썼었는데요. 이건 load 할 때 시행 되는 겁니다. doFirst 안에 있는 것은 마우스가 움직일 때 계속 불려 지는 겁니다.
마우스가 움직이는 동안 계속 dougy라는 함수를 호출 합니다.
dougy 함수를 보면 e를 인수로 받습니다. 이 e는 리스너로부터 전달되는 정보들 입니다.
처음에는 canvas를 싹 지웁니다.
다음에 보면 e.clientX 라는게 있는데 이건 마우스를 클릭했을 때 그 x 위치 입니다.
그러니까 e.clientY는 마우스의 y 위치 이겠죠. 이 정보들이 바로 아까 본 e 에 다 들어 있는 겁니다.
이 마우스 위치인 x,y 를 각각 xPos, yPos 변수에 대입 시킵니다.
그리고 사각형을 그리는데요. 그 그리는 위치가 바로 마우스의 위치인 xPos,yPos 입니다.
그러니까 마우스가 움직이는 동안 캔버스를 지우고 마우스 위치에 사각형을 그리는 작업을 계속 하는 겁니다.
1초에 몇백번 하는지 몇천번 하는지 모르겠지만 하여간 계속 그 작업을 합니다.
그러면 사각형이 마우스를 움직는대로 따라 움직이게 됩니다.

제법 그럴듯한 애니메이션 효과가 납니다.
이 사각형을 우주선 이미지로 바꾸면 마우스가 움직이는 대로 우주선이 움직일 수도 있습니다.
이제 HTML5로 게임 제작하기에 한발짝 더 다가선 것 같습니다.
자 한가지 여기서 dougy 함수 안에 canvas를 지우는 부분을 없애 보세요. // 로 주석을 다셔도 됩니다.

그리고 나서 마우스를 움직이면 캔버스를 지우지 않기 때문에 이전에 그린 사각형이 그대로 남겠죠? 그러면 위에 보시는 바와 같이 선을 그을 수가 있습니다.
포토샵의 브러시 툴 갖지 않나요?

지금까지 HTML5의 Canvas에 대해 알아봤습니다.
다음엔 HTML5의 새로운 Concept 에 대해 공부하겠습니다.

HTML5 canvas에 대해서 계속 공부하고 있습니다.

오늘은 일단 아래 코드를 공부할께요.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
   
    canvas.font="bold 22px Tahoma";
    canvas.textAlign="start;
    canvas.fillText("start",10,30);
   
    canvas.translate(100,150);
    canvas.fillText("after translate",0,0);
   
    canvas.rotate(1);
    canvas.fillText("after rotate",0,0);
   
    canvas.scale(1.5,4);
    canvas.fillText("after rotate",0,20);
 }
 window.addEventListener("load",doFirst,false);

처음에 font를 정해주고 정렬방식을 start 로 해 줍니다.
(보통 left,center,right 인데 여긴 start, middle, end 인가 봅니다. 왜 그런진 모르겠어요. 만든사람 마음이니까......)
그리고 start라는 글자를 쓰게 되요.
다음줄은 보니까 translate 이 있네요. 이건 x 좌표로 100포인트 y좌표로 150포인트 옮기라는 겁니다.
다음에 after translate 이라는 글자를 쓰는데 x,y는 0,0 입니다. 이 0,0은 canvas의 0,0이 아니라 translate 했던 100,150 을 기준으로 한 0,0 입니다.
그러니까 translate 하지 않고 100,150 한것이랑 똑같죠.
그래서 이 after translate 는 100,150 지점에 쓰여질 겁니다.
이 translate 명령어는 start 글자에는 적용되지 않습니다. translate 명령이 내려진 이후의 애들한테만 적용됩니다.

다음엔 뭐가 있죠? rotate 이 있네요.
이건 회전 시키라는 명령어인데요. 괄호 안에 있는 1은 Radian 단위 입니다. 반지름과 같은 길이의 호를  연결한 원의 중심 각도인데요. 나중에 게임 만들 때 아주 많이 쓰이게 되는 개념입니다. 모르시면 따로 공부해 두시는게 좋을거예요.
하여간 1Radian 만큼 회전시키라고 한 다음에 있는 것이 after rotate 이라는 글자입니다.
이 글자는 일단 translate 명령이 내려진 다음에 있으니까 좌표가 0,0으로 돼 있지만 실제 출력되는 위치는 100,150 지점이 됩니다.
그리고 rotate 하라고 했으니까 1Ratian 만큼 회전할 테구요.
다음은 scale 입니다. 좌우로 1.5배 위아래로 4배 키우라는 겁니다.
그리고 after Scale이라는 글자가 찍힐 텐데..
당연히 이 글자는 translate, rotate, scale 영향을 다 받게 됩니다.

이제 앞으로 캔바스에 그려지는 모든 것들은 다 이렇게 translate,rotate,scale 이 적용될 텐데요.
만약 이게 다 적용되지 않도록 하고 싶으면 어떻게 할까요?
save와 restore를 이용하면 됩니다.
자바스크립트를 아래와 같이 바꿔보세요.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
   
    canvas.font="bold 22px Tahoma";
    canvas.textAlign="start";
    canvas.fillText("start",10,30);
   
    canvas.save();
   
    canvas.translate(100,150);
    canvas.fillText("after translate",0,0);
   
    canvas.rotate(1);
    canvas.fillText("after rotate",0,0);
   
    canvas.scale(1.5,4);
    canvas.fillText("after Scale",0,20);
   
    canvas.restore();
   
    canvas.fillText("after restoring", 110,30);
 }
 window.addEventListener("load",doFirst,false);

보시면 처음 폰트와 정렬이 선언된 다음에 save() 를 해 놓습니다.
그리고 그 이후에 translate,rotate,scale 이런 기능들을 적용하구요.
다시 이 기능들을 적용하지 않기 위해 restore()를 해 줬습니다.
after restoring 은 제대로 110,30 위치에 쓰여질 겁니다.

오늘은 간단한 몇가지 기능들에 대해 공부했습니다.

HTML5의 canvas 를 이용해서 브라우저에 무엇인가 그리는 법을 배우고 있습니다.
지난시간에는 첫시간으로 사각형 그리기에 대해 알아봤습니다.

일단 그리기는 처음에 선 그리기부터 배우는게 맞지 않나 싶네요. 어린 애들도 처음에 선따라 그리기 하잖아요?

선을 그려 보겠습니다.
javascript 내용을 아래와 같이 바꿔 보세요.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
   
    canvas.beginPath();
    canvas.moveTo(50,50);
    canvas.lineTo(70,250);
    canvas.lineTo(300,200);
    canvas.closePath();
    canvas.stroke();
 }
 window.addEventListener("load",doFirst,false);

처음에 선을 그리겠다고 의사표현을 합니다. 그것이 beginPath(); 이고 나중에 선 그리는게 끝났다고 얘기해 줍니다. 그게 closePath() 입니다.
그 안에서 선을 그리면 되는데요.
처음에 시작할 부분은 moveTo()에서 정해 줍니다. 그 다음에 lineTo로 첫지점에서 다음지점까지 (여기서 지점은 좌표를 말합니다.) 선을 그어줍니다. 이 lineTo가 계속 되면 좀 더 많은 선이 그어 지겠죠.
이렇게 선을 그었으면 이걸 canvas에 표시하라고 얘기해 줘야 합니다. 이것이 stroke() 입니다. 컴퓨터는 이렇게 하나하나 일일이 얘기를 해줘야 알아듣습니다. 애기보다 더 해요. 점 하나만 틀려도 못알아듣고 스펠 하나만 잘못되도 시키는대로 안하고..

자 이렇게 선을 그었습니다.
한가지 더 팁을 드리면 canvas.strokeStyle = "red"; 를 추가하면 선 색을 빨간색으로 할 수 있습니다.
영어 공부도 할 겸 영어로 정리해 볼까요?
moveTo(x,y)     move to starting point with coordinate x and y.
lineTo(x,y)     Draw a line to this point from starting point. Again x and y being the coordinate.
strokeStyle     CSS color of the line
stroke     A method to actually make javascript draw a line
beginPath     Before you start drawing a new line with different color, you will have to call "beginPath".

HTML5에는 글자도 타입할 수 있습니다.
그리고 그 글자에 그림자 효과 같은걸 줄 수도 있구요.
배워보겠습니다.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
     
     canvas.shadowOffsetX=4;
     canvas.shadowOffsetY=4;
     canvas.shadowBlur=6;
     canvas.shadowColor='rgba(0,0,255,.5)';

     canvas.font="bold 36px Tahoma";
     canvas.textAlign="end";
     canvas.fillText("Douglas's HTML5 Study",450,100);
 }
 window.addEventListener("load",doFirst,false);

우선 그림자 효과부터 만들어야 합니다. (나중에 만들어도 되지만 하옇든간 글자 뿌려주는 부분보다는 위에 있어야 합니다.)
그림자 효과를 오른쪽으로 4픽셀 아래로 4픽셀인 곳에 주고 번지는 효과는 6 정도로 줍니다. 그리고 색은 rgb(red,green,blue) 중 모두 0으로 하고 blue만 255로 했으니까 파란색이 되구요 그리고 마지막  a(alpha, 투명도)는 .5 로 50% 줍니다.

그 다음은 글자(Text와 관련된 건데요.) 볼드로 36픽셀크기인 글자고 폰트는 Tahoma 폰트 입니다. 그리고 정렬은 end에다 하고 테두리선이 있는 글자가 아니라 안에 색이 채워진 글자로 괄호 안에 있는 글자를 뿌립니다. 그리고 그 다음 숫자들은 글자 위치인 x,y 좌표구요.

Text 와 관련된 요소들부터 정리할 께요.
fillText(text,x,y) : Print the text with solid color within. Text color is determined by fillStyle().
strokeText(text,x,y)     Print the text with only color the outline of the text. Text color is set by strokeStyle().
strokeStyle     CSS color for text that call strokeText
fillStyle     CSS color for text that call fillText
font     CSS font style such as "bold, 10px, san-serif"
textBaseline     This is a little bit tricky to explain. We will need another demo. The value for this propery can be "top", "hanging", "middle", "alphabetic", "ideographic" and "bottom". Default value is "alphabetic".

아래와 같이 코드를 작성해 보세요.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
     
     canvas.shadowOffsetX=4;
     canvas.shadowOffsetY=4;
     canvas.shadowBlur=6;
     canvas.shadowColor='rgba(0,0,255,.5)';

     canvas.font="bold 36px Tahoma";
     canvas.textAlign="start";
     canvas.fillText("Douglas's HTML5 Study",10,100);
     
     canvas.textBaseline = "top";
     canvas.fillText('Top', 10, 200);
     
     canvas.textBaseline = "bottom";
     canvas.fillText('Bottom', 90, 200);
     
     canvas.textBaseline = "middle";
     canvas.fillText('Middle', 200, 200);
     
     canvas.textBaseline = "alphabetic";
     canvas.fillText('Alphabetic', 300, 200);
     
     canvas.textBaseline = "hanging";
     canvas.fillText('Hanging', 400, 200);
 }
 window.addEventListener("load",doFirst,false);

baseLine과 관련된 샘플입니다.

아래는 shadow와 관련된 내용 정리한 겁니다.
shadowOffsetX : Horizontal distance (x-axis) between the shadow and the shape in pixel.
shadowOffsetY : Vertical distance (y-axis) between the shadow and the shape in pixel.
shadowBlur : How blur you want your shadow to be.
shadowColor : Obviously, this is to set the color of your shadow

위 4개 속성은 이미 예제에서 다 사용했습니다.

다음글에도 이어서 계속 canvas에 대해 다루겠습니다.

HTML5 에서는 브라우저에 도형을 그리거나 이것을 움직이거나 하는 일들을 할 수 있습니다.
제가 느끼기엔 자바에 있는 Swing 이랑 비슷한 개념인것 같습니다.
이름에서 알수 있듯이 그림 그릴때 사용하는 캔버스처럼 브라우저에 캔버스를 놓고 그 캔버스 위에 그림을 그리는 겁니다.
HTML5에서는 이 Canvas라는 판만 깔아 놓고 실제 그림 그리는 작업은 JavaScript 에서 합니다.
이제 HTML5의 Canvas를 이용해 보겠습니다.
먼저 HTML 파일을 만들어 주세요. (저는 canvas01.html로 했습니다.)
 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 HTML5 Canvas</title>
    <meta charset="utf-8"/>
    <script src="canvasdoug01.js"></script>
</head>
<body>
    <section id="main">
        <canvas id="canvas" width="600" height="400" style="border:solid 1px #000000">
            If you can see this. No good. get google chrome browser to see html5 canvas.
        </canvas>
    </section>
</body>
</html>
이 코드가 HTML5로 브라우저에 판을 깔아 놓은 예제 입니다.
canvas 태그 사이에 있는 문장은 브라우저가 HTML5를 지원하지 않는 경우 나오게 됩니다. 만약에 지원하게 된다면 나오지 않습니다.
canvas 는 <canvas></canvas> 로 선언되고 width와 height를 지정할 수 있습니다.
그리고 위 코드에서는 id를 canvas로 주었습니다.
style은 태그내에서 CSS 효과를 주는 건데요. 브라우저로 볼 때 테두리를 만들어서 볼 캔버스 크기를 알아볼 수 있도록 하기 위해서 그냥 넣었어요.
안 그러면 그냥 하얗게만 보이거든요.

브라우저에 캔버스가 저만큼 만들어 졌어요.
이제 저 캔버스 안에 자바스크립트를 가지고 그림을 그리거나 간단한 애니메이션을 만들거나 할 건데요.
자바스크립트 이름은 canvasdoug01.js 로 했습니다.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
    canvas.strokeRect(10,10,100,200);
    canvas.fillRect(150,50,100,200);
 }
 window.addEventListener("load",doFirst,false);

함수 doFirst()를 만들었구요. 그 안에 그림 그리라는 명령들을 넣었습니다.
이 doFirst()는 load 될 때 불려지도록 했구요. 맨 아래 리스너에 대한 설명은 이전 글에서 했기 때문에 생략할께요.
우선 x 라는 지역변수를 만들고 거기에 html 안에 id가 canvas 인 태그를 대입했습니다. 이제 이 x 가지고 html 안에 있는 id가 canvas 인 태그를 맘대로 요리할 수 있게 됐습니다.
다음은 canvas 라는 global 변수를 만들고 그 안에 x에 담을 내용은 2d 라고 알려 줬습니다.
아직 2d 밖에 지원이 안 되는데 나중에 기술이 발달되면 3d,4d 도 사용할 수 있게 되겠네요.
자바스크립트에서는 지역변수를 선언할 때 var를 사용합니다. 이 지역변수 전역변수(global variable)에 대한거는 CoronaSDK 관련 글에서 자세히 그것도 반복하면서 언급했던걸로 기억하는데요.
일단 지역변수는 그 함수 안에서 밖에 사용못합니다. 하지만 전역변수는 함수 밖에서도 사용할 수 있지요.
프로그램을 많이 만들다보면 지역변수,전역변수를 어떻게 유용하게 사용할 지 몸으로 익히시게 될 겁니다.
그 다음에 있는 코드들이 캔버스에 그림을 그리는 코드들입니다.
처음엔 외곽선이 있는 사각형이구요. 괄호 안에 있는 내용들은 x,y 좌표와 width와 height 입니다.
두번째는 색이 안에 채워진 사각형입니다.

이런식으로 HTML5에서는 html 파일에서 canvas를 만들어 놓고 javascript에서 그 canvas 안에 그림을 그리게 됩니다.
다음은 지우는 방법에 대해 공부합니다.
doFirst 함수 안에 아래 두 줄을 넣어 주세요.
    canvas.clearRect(70,30,130,50);
    canvas.clearRect(160,100,30,60);
clearRect 는 지우라는 명령입니다. canvas에 뭐가 그려져 있던 이 사각형안에 내용은 모두 지우라는 겁니다.

이제 색을 좀 넣어볼까요?
doFirst를 아래와 같이 수정해 보세요.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
    canvas.fillStyle="blue";
    canvas.strokeStyle="red";
    canvas.strokeRect(10,10,100,200);
    canvas.fillRect(150,50,100,200);
    canvas.clearRect(70,30,130,50);
    canvas.clearRect(160,100,30,60);
 }
fillStyle 하고 strokeStyle 에 색을 주었습니다. 그러면 fillRect에는 파란색이 그리고 strokeRect에는 빨간 테두리선이 적용될 겁니다.

색을 주었으니 이제 그라데이션 효과 주는 법도 배워볼까요?
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
    var g = canvas.createLinearGradient(0,0,100,200);
    g.addColorStop(.0,"blue");
    g.addColorStop(1,"red");
    canvas.fillStyle=g;
    canvas.fillRect(0,0,100,200);
    canvas.strokeStyle="red";
    canvas.strokeRect(10,10,100,200);
    canvas.fillRect(150,50,100,200);
    canvas.clearRect(70,30,130,50);
    canvas.clearRect(160,100,30,60);

지역변수 g에 그라데이션을 대입했습니다.
그리고 파란색에서 시작해서 빨간색으로 끝나구요.
이 g를 fillStyle에 적용했습니다. 이렇게 되면 모든 fill 스타일엔 다 적용될 겁니다.

보시면 새로만든 사각형에 그라데이션 효과가 잘 적용 됐죠? 뿐만아니라 아까 만들었던 fillRect 에도 살짝 적용된걸 보실 수 있습니다.

오늘은 여기까지 하고 다음에 계속해서 HTML5의 canvas에 대해서 알아보겠습니다.

지난 글에서 HTML5 Video 태그를 이용해 브라우저에서 동영상을 상영하는 것을 공부해 봤습니다.
그리고 CSS로 꾸미는 방법하고 내가 원하는 스킨 만드는 법하고요.
자바스크립트를 이용해서 play/pause 하는 법까지 진행했습니다.
여기까지 하면 브라우저를 통해서 동영상을 보고 멈추고 하는 기본적인 기능은 다 됐습니다.
이제 동영상이 진행됨에 따라 Progress Bar 가 그 진행상태를 나타내주고 또 마우스로 진행바를 클릭하면 그 위치로 동영상이 옮겨져서 플레이 하도록 하는 기능을 배우겠습니다.
 function playOrPause() {
    if(!myMovie.paused && !myMovie.ended){
        myMovie.pause();
        playButton.innerHTML='Play';
        window.clearInterval(updateBar);
    }else{
        myMovie.play();
        playButton.innerHTML='Pause';
        updateBar=setInterval(update,500);
    }
 }
지난 시간에 만든 playOrPause 함수인데요 if 안에 window.clearInterval(updateBar) 가 추가 됐고 else 문 안에 updateBar=setInterval(update,500) 이 들어 있습니다.
먼저 else문에 있는 내용을 보면요.
updateBar 변수에 setInterval을 해 줍니다. 그 내용은 0.5초마다 update 함수를 실행하라는 내용입니다.
그리고 if 문에서는 (만약에 동영상이 play 중이면) 이 0.5초마다 update 함수를 call 하는 것을 중지하도록 하고 있습니다.

그럼 이제 update()함수를 만들어 볼까요?
이 update 함수에서는 동영상이 플레이 중이면 그 진행상황을 progress bar에 표시해 줄 겁니다. 그리고 동영상이 끝나면 진행바가 다시 처음으로 세팅되도록 하고 Button 글씨를 play로 바꿔 줄 거구요. 그리고 동영상이 끝나면 더이상 진행바를 업데이트 할 필요가 없으니까 setInterval 한 것도 clear 시킬겁니다.

이것을 자바스크립트가 알아듣는 언어로 번역하면 아래와 같습니다.
 function update(){
    if(!myMovie.ended){
        var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);
        progressBar.style.width=size+'px'
    }else{
        progressBar.style.width='0px'
        playButton.innerHTML='Play';
        window.clearInterval(updateBar);
    }
 }
if 문은 myMovie가 ended가 아니면.. 즉 플레이 중이면(pause 중이어도 해당 됩니다.) 실행하라는 겁니다.
그 내용은 지역변수(var) size에 myMovie 의 전체 길이 중 지금 현재 위치를 구해서 barSize(600) 에 맞게 그 비율 대로 표시 할 수 있는 숫자를 구합니다.
(동영상의 전체 시간-길이- 는 브라우저가 이미 가지고 있습니다.)
지난번에 css파일 안에서 progressBar 의 width를 1px로 해 놨는데요.(사실은 이걸 이제 0px)으로 해야 합니다. 이 길이를 size 만큼으로 변경 시킬 겁니다.
자바스크립트에서 css 내의 값을 바꾸는 방법은 변수.style을 사용하면 됩니다.
위에서와 같이 progressBar.style의 width= size로 하는 겁니다. 그리고 css에서는 px라는 단위를 사용해야 되기 때문에 +'px'을 해 줍니다.
이제 0.5초마다 이 update 함수가 불려지면서 progressBar의 길이를 점점 바꿀 겁니다.

이제 동영상이 진행되는것에 맞춰 progress bar 가 진행 되고 Pause를 누르면 동영상과 함께 진행바도 멈춤니다.
그런데 아직 노란선을 누르면 동영상이 그 위치로 가서 플레이 되고 진행바도 그 위치에서 이어서 진행되도록 하는 기능은 없습니다.
이것은 clickedBar라는 함수에서 구현 할 겁니다. 잊으셨는지 모르겠는데 doFirst() 함수에서 이미 bar.addEventListener('click',clickedBar,false); 를 선언해 뒀습니다.
bar(id가 defaultBar) 즉 노란선을 클릭하면 clickedBar 함수를 call 하는 리스너 입니다.
그러니 이젠 이 함수를 구현하기만하면 됩니다
이 함수에서는 마우스로 클릭된 지점을 구해서 그만큼 barSize를 정하고 동영상을 그 지점부터 시작하도록 해야 합니다.
 function clickedBar(e) {
    if(!myMovie.paused && !myMovie.ended){
        var mouseX = e.pageX-bar.offsetLeft;
        var newtime = mouseX*myMovie.duration/barSize;
        myMovie.currentTime = newtime;
        progressBar.style.width=mouseX+'px'
    }
 }
여기서 e 는 해당 이벤트 입니다. 리스너를 click에 걸었으니까 e 는 그 click에 대한 정보를 담고 있습니다.
클릭한 지점은 x,y 좌표로 표현할 수 있습니다.
e.pageX는 클릭한 지점의 X좌표 입니다.
그 다음 offSetLeft 는 객체의 위치 중 width와 관련된 property 입니다.
자세한 사항은 여기를 참조하세요.
이 x 값을 지역변수 mouseX에 담습니다.
다음 지역변수 newtime에 동영상 전체 길이에 비례한 barSize내의 값을 담습니다.
그리고 다음 줄에서는 동영상의 현재 위치를 newtime으로 바꾸고요.
마지막 줄에서는 progressBar의 길이를 mouseX 필셀로 업데이트 합니다.

이제 progressBar 에 대한 기능 구현까지 모두 완료 했습니다.
html과 css 파일은 지난 글에 업로드한 파일 그대로구요.
자바스크립트 파일만 업로드 할께요.

여러분은 html 파일 안에 있는 동영상 이름만 여러분이 가지고 있는 것으로 바꾸시면 됩니다.

HTML5 로 나만의 동영상 플레이어 스킨 만들기는 completed 됐구요.
다음엔 아마 HTML5 의 Canvas 에 대해 공부할 겁니다.

지난 글에서 나만의 동영상 플레이어 스킨을 만드릭 위해 처음에 HTML5로 틀을 잡고 CSS로 그 틀을 꾸몄습니다.
오늘 할 일은 버튼을 누르면 어떤 동작이 일어나는 것 같은 기능이나 동적인 효과를 주기 위해 자바스크립트를 만들겠습니다.

소스는 어제 사용했던 소스를 그대로 사용하시면 됩니다.

이제 doug01.js 파일을 만들겠습니다.
우선 아래 내용을 코딩해 넣으세요.
 function doFirst(){
    barSize=600;
    myMovie=document.getElementById('myMovie');
    playButton=document.getElementById('playButton');
    bar=document.getElementById('defaultBar');
    progressBar=document.getElementById('progressBar');
   
    playButton.addEventListener('click',playOrPause,false);
    bar.addEventListener('click',clickedBar,false);
 }

우선 함수를 하나 만듭니다. 이름은 마음대로 하면 되는데 여기서는 doFirst()로 했습니다.
이 함수 안에는 우리가 control 할 여러 요소들을 객체로 만드는 일 부터 합니다.
우선 barSize라는 변수를 만들었는데요. 이것은 동영상이 진행될 때 얼마나 진행됐는지를 알려줄 progress bar 입니다. 처음 값을 600으로 주었습니다.
이것은 600픽셀이라는 의미입니다.
자바스크립트에서는 px라는 것을 사용하지 않습니다.
웹 작업을 하다보면 HTML, CSS, Javascript 이렇게 최소한 세가지 language를 사용해야 하는데. 이 세 가지 언어 규칙이 같지 않아서 많이 헛갈릴 수 있습니다.
계속 경험을 쌓고 반복 하면서 익숙해 질 수 밖에 없습니다.
어쨌든 자바스크립트에서는 px를 사용하지 않습니다.

두번째 변수는 myMovie 입니다. 이것은 HTMl 내에서 id가 myMovie로 돼 있는 부분입니다. video 태그에 있었죠?
이 변수를 가지고 video 태그에서 사용할 수 있는 여러 속성들을 사용할 겁니다.
문법은 HTML 문서를 가르키는 document 를 사용하고 . 으로 연결한 다음 getElementById 라는 메소드를 사용합니다. id를 가지고 html 문서내에 id 가 Movie인 부분을 앞으로 사용하겠다는 의미입니다.

다음 변수는 playButton 입니다. 위에 설명한 내용과 동일합니다.
그리고 bar, 와 progressBar 도 변수로 받아 놨습니다. 이제 이 변수들을 사용해서 동적으로 control 할 수 있습니다.

그 다음엔 위 playButton 에 리스너를 달았는데요. 클릭을 할 경우 playOrPause 라는 함수(메소드)를 실행하라는 메소드 입니다.

마지막에 false는 아래 설명을 참조하세요.
Required. Boolean that specifies whether the event needs to be captured or not.

false		Register the event handler for the bubbling phase.
true		Register the event handler for the capturing phase.

여기서 click 이외에 리스너로 사용할 수 있는 이벤트 들이 아주 많습니다.
그 정보는 여기 에서 확인하세요.
그 다음엔 bar에도 똑 같이 클릭 리스너를 달았습니다. bar를 클릭할 경우 clickedBar라는 함수가 불려질 겁니다.
이 playOrPause와 clickedBar  함수는 우리가 만들어야 합니다.

이 함수들을 만들기 전에 우리가 만들어 놓은 doFirst() 함수를 어디선가 call 해야 이 함수가 실행 됩니다.
그리고 이 함수는 처음 브라우저가 켜질 때 불려져야 합니다.
그러니 일단 아래와 같이 하세요.
 window.addEventListener('load',doFirst,false);
이 의미는 어떤 객체에 리스너를 다는 것이 아니라 window 즉 화면이 뜰 때 리스너를 달겠다는 것이구요. 인수 중 첫번째 load 는 HTML이 화면에 로딩 될 때 실행하라는 것이고 실행할 함수는 doFirst 라는 것 입니다.

여기까지 하고 실행하면 아직 아무런 동작도 하지 않습니다.
왜냐하면 지금까지는 우리들이 사용할 객체들만 만들어 놨지 이 객체들에 대해서 어떻게 작동하라고 하는 명령은 하지 않았으니까요.
우선 playButton을 누르면 실행하라고 한 playOrPause 함수를 만들겠습니다.
우리가 할 일은
처음에 플레이 버튼을 누르면 동영상이 실행이 됩니다.
그리고 버튼의 Play라는 글이 Pause라는 글자로 바뀌고 플레이 되는 동안 progress Bar 가 동영상 상영됨에 따라 진행이 되도록 해야 합니다.
그런데 이 동작은 동영상이 stop 되 있을 때 진행될 시나리오이고 동영상이 플레이 되고 있을 때는 다르게 동작을 해야 합니다.
이 때는 버튼에 글자가 Pause로 돼 있을 겁니다. 이 버튼을 누르면 동영상을 멈추고 버튼의 글자를 Pause로 바꿔야 합니다.

 function playOrPause() {
    if(!myMovie.paused && !myMovie.ended){
        myMovie.pause();
        playButton.innerHTML='Play';
    }else{
        myMovie.play();
        playButton.innerHTML='Pause';
    }
 }

myMovie.paused 는 id가 myMovie(Video 태그) 가 paused 됐다는 것을 말하고 myMovie.ended 는 동영상이 끝났다는 것을 말합니다. 그리고  그 앞에 !는 not이라는 의미 입니다.
그러니까 if 안에 있는 코드는 동영상이 paused 상태가 아니고 또 동영상이 ended 상태가 아니면.. 즉 동영상이 play 되고 있으면 이런 동작을 하라는 의미입니다.
if문 안을 보면 처음에 myMovie.play()가 나옵니다. 이것은 동영상을 플레이하라는 겁니다.
여기서 paused,ended,play() 등은 브라우저에 이미 들어가 있는 기능들 입니다. 그러므로 개발자가 따로 이런 함수를 만들 필요는 없습니다.
그 다음엔 playButton이라는 변수의 html을 바꾸라는 것입니다. 즉 text를 Play로 바꾸게 됩니다.
그 다음 else는 그렇지 않으면 이라는 뜻입니다. 그러니까 이에 if 문이 동영상이 재생되고 있으면 이라는 뜻이니까 else는 동영상이 재생되고 있지 않으면 이라는 의미입니다.
그러면 myMovie를 재생하고 playButton 의 텍스트를 Pause 입니다.

여기까지 하셨으면 저장하고 브라우저를 다시 재실행 해 보세요.

이제 Play 버튼을 누르면 동영상이 재생이 되면서 버튼에 Pause라는 글자가 들어갑니다.
그리고 이 Pause를 누르면 동영상이 멈추고 버튼 글자는 Play로 되구요.

이제 동영상이 진행 되면서 progress bar 가 점점 진행되고 또 진행바 중간을 마우스로 클릭하면 동영상이 그 위치로 옮겨지고 하는 부분을 구현하면 됩니다.

오늘은 여기까지 다루고 progress bar 관련해서는 다음 글에서 배우겠습니다.

지난 시간에는 HTML5 의 video Tag를 이용해서 브라우저에서 동영상을 보여주는 법에 대해 공부했습니다.
비디오 태그에 controls 라는 속성만 주면 기본적으로 제공하는 기능을 이용할 수 있었습니다. (재생,진행 바, 볼륨조절 등)
이번 시간엔 이런 디폴트 말고 나만의 비디오 스킨 만들기를 배워보도록 하겠습니다.
그러면서 HTML5와 CSS3 그리고 자바스크립트를 모두 사용해서 웹 화면을 꾸며 보겠습니다.

우선 아래와 같이 HTML 파일을 만드세요.
 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="main07.css">
    <script src="dougy01.js"></script>
</head>
<body style="background-color:#8EE5EE;">
    <section id="skin">
         <video id="myMovie" width="640" height="360" >
            <source src="song.mp4">   
         </video>
        <nav>
            <div id="buttons">
                <button type="button" id="playButton"> Play </button>
            </div>
            <div id="defaultBar">
                <div id="progressBar"> </div>
            </div>
            <div style="clear:both"></div>           
        </nav>
    </section>
</body>
</html>
우선 HTML에서는 기본적인 틀을 잡았습니다.
우선 css는 main07.css를 사용할 것이고 자바스크립트는 dougy01.js 를 사용할 겁니다.
Body 안에 skin 이라는 section으로 감쌌습니다. 이 부분이 비디오 스킨이 될 거기 때문에 ID를 skin이라고 주었습니다.
그 다음에 video 태그를 써서 비디오를 불러 올 것입니다.
이 부분도 id를 주었구요. 너비와 높이를 주었습니다. (참고로 이 너비와 높이는 유튜브 디폴트 사이즈입니다.)
지난 시간에 배운거랑 조금 다른 부분이 있습니다.
지난 시간에는 video tag 안에 모든 속성을 넣었는데요. 위 코드처럼 비디오 태그 사이에 속성을 넣을 수도 있습니다.
이 파일에서는 두번째 방법을 source를 지정했습니다. (동영상 파일은 각자 가지고 있는 것을 사용하세요.)

이제 스킨을 만드려면 우선 기본 기능인 플레이버튼하고 progress bar 이런걸 만들어야 겠죠?

이런건 <nav></nav> 태그 안에 집어 넣겠습니다.
<NAV>태그는 네비게이션을 위한 부분을 표시하기 위한 태그 입니다. HTML5는 기본적으로 외부 장치나 앱에서 잘 활용되기 위한 목적이 강함니다. 때문에 이 부분이 메뉴이고 이동을 위해서 정의 되었다는 것을 알려주는 것이 필요 합니다.

보시면 아시겠지만 nav 안에는 play button, progress Bar 등을 만들 수 있도록 틀을 잡았습니다.
맨 마지막 div 안에 있는 clear:both 는 뭘까요?
이건 css를 하면서 알아 보도록 하겠습니다.

지금까지의 모습은 이렇습니다.
아직 동영상 상영은 안되구요. play 버튼도 동작을 하지는 않습니다.

이제 css를 만드세요.
body{
    text-align:center;
}
header,section,footer,aside,nav,article,hgroup{
    display:block;
}
#skin{
    width:700px;
    margin:10px auto;
    padding:5px;
    background:red;
    border:4px solid black;
    border-radius:10px;
}
nav{
    margin:5px 0px;
}
#buttons{
    float:left;
    width:70px;
    height:22px;
}
화면을 보기전에 화면이 어떻게 나올지 예상을 해 볼까요?
일단 body는 text-align을 center로 줬습니다.
그 다음 부분은 header,section,footer 등등을 하나의 블럭 단위로 관리하겠다는 겁니다.
우리가 만든 html에 있는 것도 있고 없는 것도 있습니다. 나중에 나올겁니다.
그 다음엔 id가 skin 인 것을 꾸몄네요.
스킨의 너비는 비디오 너비보다 더 클테고 마진은 위쪽에 10픽셀 있을 겁니다.
안쪽으로는 5픽셀의 공간이 있을거고 배경색은 빨간색입니다.
경계선은 4픽셀로 두껍고 검정색입니다. 그리고 테두리는 살짝 라운딩 처리가 될 겁니다.

그 다음엔 nav 태그를 꾸미는데요.
간단하네요. 마진이 위로 5픽셀 아래로 0픽셀 있을 겁니다.

다음은 id가 buttons 인 부분을 꾸밉니다. 아까 만든 play 버튼이 되겠죠?
float로 정해 졌으니까 이 다음에 나올 objects 들은 상하가 아니라 좌우로 정렬 될 겁니다. 그리고 너비는 70픽셀이고 높이는 22픽셀 입니다.

그럼 실제 화면을 볼까요?

예상대로 나왔나요?

css 파일에 아래 내용을 추가해 보세요.
#defaultBar{
    position:relative;
    float:left;
    width:600px;
    height:16px;
    padding:4px;
    border:2px solid black;
    background:yellow;
}
#progressBar{
    position:absolute;
    width:1px;
    height:16px;
    background:blue;
}
id가 defaultBar 인것과 id가 progressBar 인 것을 꾸미고 있습니다.
여기에 position이 하나는 relative이고 하나는 absolute으로 지정됐습니다.
position은 객체의 위치를 화면에 설정하는 것으로 아래와 같은 속성들이 있습니다.

* Position
static : 기본값, 기본적으로 설정 되는 값입니다. (top / left 적용 되지 않습니다.)
absolute(절대적) : 브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에 있다면 그 곳을 기준으로 합니다.
relative(상대적) : 객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를 기준으로 상대값을 정해 줍니다.
fixed : relative의 하위 범주에 속하며, 다른 점은 화면이 스크롤 되어도 움직이지 않습니다.

defaultBar는 float left로 설정 돼 있으니까 다음에 오는 객체는 오른쪽에 위치하게 됩니다. 그리고 너비와 높이, 안쪽 여백, 검은 테두리선, 노란 배경색이 지정 됐습니다.

id가 progressBar인 부분은 absolute 포지션이니까 parent 요소인 defaultBar를 기준으로 위치가 적용됩니다. 그리고 너비, 높이와 파란색 배경색이 지정됐네요.

지금까지의 화면은 이렇습니다.
progress bar가 살짝 1픽셀만 파란색으로 나왔는데요. 이건 원래 0픽셀로 지정해 놓고 나중에 자바스크립트에서 처리할 겁니다.

다음 글에서는 비디오 플레이어 스킨 만들기 중 자바스크립트 부분을 배우겠습니다.

그동안 주로 CSS3 (Webkit 중심으로) 를 다뤘구요. 지난 글에서 자바스크립트를 잠깐 다뤘었습니다.
지금까지 주요한 부분은 바로 Webkit입니다. 지금 진행중인 글 어느정도 마무리 되면 Webkit은 따로 다룰 필요가 있는 주제 같습니다.
그리고 오늘부터 다룰 부분은 본격적인 HTML5 입니다.

오늘은 브라우저에서 HTML5로 비디오를 어떻게 실행하는지 또 비디오 플레이어는 어떻게 구성하는지에 대해 시작하겠습니다.

먼저 사용할 동영상 파일은 각자 준비해 주세요. 파일 형식은 mp4 입니다.
저는 유튜브에서 뮤직비디오 하나 다운 받아서 사용할 겁니다.

아래와 같이 html 파일을 만드세요.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
</head>
<body style="background-color:#8EE5EE;">
    <div id="big_wrapper">
        <video src="song.mp4"> </video>
    </div>
</body>
</html>

제 동영상 파일은 이름이 song.mp4 입니다.

크롬 브라우저에서 실행하면 위와 같이 나옵니다.
동영상이 play되지도 않고 어디 play버튼이나 stop 버튼 뭐 이런게 하나도 없습니다.
video 태그를 아래와 같이 고쳐 보세요.
<video src="song.mp4" controls > </video>

그냥 video 태그에 controls만 넣었는데 플레이버튼, 정지버튼,진행상황 bar 그리고 볼륨조절까지 다 나오네요.

video tag 안에 width와 height도 넣을 수 있습니다. 그러면 동영상 사이즈가 변할 겁니다.
이 video tag 안에 넣을 수 있는 속성들은 아래와 같은 것들이 있습니다.

다 보시면 아실 겁니다.
아래와 같이 video 태그를 바꿔보세요.
<video src="song.mp4" controls width="640" height="360" loop poster="video05.png"> </video>
너비, 높이를 지정했고 루프를 선언했고 poster에 한 이미지를 지정했습니다.
(저는 HTML5 로고를 사용했습니다.)

그러면 처음 실행될 때 poster에서 지정된 이미지가 나타나고 재생 버튼을 누르면 동영상이 시작됩니다.
여기에 autoplay를 추가하면 자동으로 동영상이 시작되겠죠?
여러분들이 필요한 속성을 사용하시면 됩니다.

Sencha Touch 를 설치하고 간단한 예제를 한번 실행해 보겠습니다.

일단 센차터치를 설치하기 위해서는 아래 3가지를 준비하셔야 합니다.
1. Sencha Touch SDK
    아래 페이지를 가시면 1.1.1과 2.0 developer preview 버전을 다운 받으 실 수 있습니다.
http://www.sencha.com/products/touch/download/
2. 웹서버
    저는 APM Setup 을 이용해서 아파치 웹 서버를 설치 했습니다.
    APM Setup download
3. 최신 웹 브라우저, 크롬, 사파리 추천

세가지 모두 준비 되셨으면 먼저 웹 서버부터 설치합니다.
그냥 클릭만 하면 됩니다.
다 설치 하신 후 크롬 브라우저를 여셔서 주소창에 localhost 를 칩니다.

이 화면이 나오면 웹서버 설치는 완료 된 것입니다.
잘 안되시면 아까 다운 받았던 홈페이지를 참조하세요.

그 다음엔 다운받았던 센차터치 SDK 압축을 풉니다.
그리고 그 폴더를 웹서버의 htdocs 폴더에 복사해 넣습니다.
C:\APM_Setup\htdocs (디폴트로 깔면 경로가 이렇습니다.)

복사가 완료 되면 크롬 브라우저를 열어서 주소창에 http://localhost/sencha-touch-2-pr2 를 입력하고 엽니다.

이렇게 화면이 나오면 설치가 완료 된 겁니다.

이제 예제를 한번 실행해 볼까요?

먼저 아무곳에나 폴더 하나를 만드시고 아래와 같이 index.html을 만드세요.
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started</title>
    <link rel="stylesheet" href="sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

그리고 센차터치가 깔려 있는 폴더의 아래 파일을 복사해서 index.html이 있는 폴더에 넣습니다.
resources/css/sencha-touch.css
그리고 센차터치폴더에 있는 sencha-touch-all.js 파일도 복사해 넣습니다.

이러면 센차터치를 이용할 준비가 끝난겁니다.

이제 한번 이용해 볼까요?
아래와 같이 app.js를 index.html 이 있는 폴더에 만듭니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        alert('launched');
    }
});
그리고 크롬에서 이 index.html을 불러옵니다.

이렇게 나오면 센차터치로 첫번째 프로그램을 만든 겁니다.
그럼 이제 크롬에서 다시 http://localhost/sencha-touch-2-pr2 로 가 보겠습니다.

여기서 Get Started with 2.0 에 있는 Read the guide를 클릭해 보세요.

스크롤을 내리다 보면 위 화면이 보일겁니다. 여기서 Live Preview 를 클릭해 보세요.

그러면 이렇게 크롬 브라우저에서 시뮬레이터가 뜨면서 결과가 출력 됩니다.

그 아래 예제 하나만 더 해 볼까요?
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});

위 코드를 아까 만들었던 app.js 파일에 덮어 쓰고 저장하세요.

크롬에서 실행하면 이런 화면이 나옵니다.
그럼 아까 웹서버로 불러왔던 getting started 화면에서 Live Preview를 클릭해 보겠습니다.

같은 화면이 시뮬레이터에서 나오죠?

그 아래에 있는 예제들도 해 보세요.

오늘은 센차터치 설치하고 예제를 웹서버를 통해 시뮬레이터로 보는 방법과 웹서버가 아닌 그냥 브라우저로 보는 방법을 배웠습니다.

다음엔 본격적인 센차터치 공부를 할 텐데요. 오늘 getting started 에 나와있는 예제를 잘 보시면 대충 문법은 이해가 가실겁니다.

다음시간부터 자세히 다뤄 볼께요.

자바 스크립트를 좀 알아보겠습니다.
HTML  파일은 아래와 같이 준비해 주세요.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <script src="dougy.js"></script>
    <title> Dougy's HTML5 </title>
</head>
<body>
    <div id="big_wrapper">
        <p id="tuna"> first </p>
        <p id="bacon"> second </p>
        <p id="tuna"> third </p>
    </div>
</body>
</html>

처음 doctype은 HTML5를 사용하겠다는 의미입니다.
브라우저는 이 코드가 있을 경우 HTML5를 사용 가능하도록 만듭니다.
물론 HTML5가 지원되는 브라우저라야 되겠죠.
그리고 오늘은 자바스크립트를 할 거니까 별로 관계는 없습니다.
그래도 지금 HTML5를 배우고 있으니까 이 코드를 넣는게 낫겠죠.

그리고 script 태그를 보시면 dougy.js 를 사용할 거라고 선언했습니다.

그럼 dougy.js를 볼까요?
function getStuff() {
    document.querySelector('#tuna').onclick=talk;
}
function talk() {
    alert('Alert box!');
}
window.onload=getStuff;
이 코드를 복사해 넣으세요.
getStuff() 내용은 #tuna 라는 id를 가진 태그를 클릭하면 talk 함수를 실행하라는 의미입니다.
talk 함수는 alert box를 띄우는 함수구요.
맨 마작은 웹페이지가 처음 열릴 때 getStuff 함수를 사용하라는 의미입니다.

이러면 tuna라는 id를 가진 first 를 클릭하면 이렇게 alert 창이 뜹니다.

그런데 이렇게 하면 third도 id가 tuna 인데 alert창이 뜨지 않습니다.
제일 첫번째 id에만 적용 됩니다.
이렇게 여러 id에도 적용이 되야 할 경우에는 Array(배열)을 이용해야 됩니다.
그리고 querySelectorAll 을 사용하구요.
dougy.js를 아래와 같이 고칩니다.
function getStuff() {
    var list = document.querySelectorAll('#tuna');
    list[0].onclick=talk;
    list[1].onclick=talk1;
}
function talk() {
    alert('Alert box!');
}
function talk1() {
    alert('Hi Alert box2!');
}
window.onload=getStuff;

참고로 아래 코드도 보세요.
function getStuff() {
    var list = document.querySelectorAll('#tuna');
    for(var i=0; i<list.length;i++) {
        list[i].onclick = talk;
    }
}
function talk() {
    alert('Alert box!');
}
window.onload=getStuff;

보시면 for 문을 이용해서 id가 tuna인 모든 태그를 클릭했을 때 talk 함수를 실행하는 방법입니다.
팁으로 알려드립니다.

다음 글에서는 HTML5의 video Tag에 대해 공부하겠습니다.