안녕하세요. 벌써 봄 기운이 느껴지네요. 좀 있으면 날씨가 따뜻해져서 소풍가기 좋을 것 같아요 ^^;; 오늘은 오랜만에 강좌를 씁니다.
웹사이트를 돌아다니다 보면 슬라이드 효과를 내는 광고가 많이 있는데요. 오늘 실버라이트로 광고를 만들어보도록 하겠습니다. 작업도 눈이 즐거워야 하는법!! 저는 요즘 한창 잘나가는 F4의 꽃미남들의 사진을 가지고 했습니다..흐흐흐.. 이것은 꼼수인데요 4장의 이미지에 일일이 애니메이션을 주지 않고, 통짜리 하나의 이미지를 가지고 작업을 하도록 하겠습니다. 다음과 같이 사용될 4 컷의 이미지를 연결시켜 주세요. 여기서 중요한것은!! 이미지를 96dpi로 해주셔야 합니다. 우리가 일반적으로 작업하는 이미지의 dpi는 72이기 때문에 블렌드에서 불러들였을때 사이즈가 뿌옇게 확대 되어 보이기 때문입니다.
 |
이렇게 만들어진 이미지를 프로젝트 파일을 생성한 후에 불러들입니다.
 |
그리고 광고 배너의 테두리 부분을 디자인을 합니다. 저는 다음과 같이 바탕이 될 부분을 디자인하였습니다.
 |
다 되었다면 이미지와 같은 크기의 캔버스를 하나 생성한 다음 이미지를 더블 클릭하여 넣어주고 캔버스를 이동하여 다음과 같이 첫번째 사진 부분이 배경 레이아웃의 가운데 쯤에 위치하게 합니다.
 |
그런 다음 이미지가 한 컷만 보여질 수 있도록 하기 위해서 클리핑을 해야합니다. 보여질 영역을 나타내는 사각형을 하나 그려주고 Radius X와 Y에 5의 값을 주어 라운딩을 줍니다.
 |
그리고 캔버스와 사각형을 같이 선택하여 마우스 오른쪽 메뉴를 눌러 클리핑 하도록 합니다.
 |
자~ 이렇게 잘 나오나요? ㄲ ㅑ~~~~~~~~~ 준표닷!!!!!!!!!! -_-;;;;;;(자꾸 흑심이;;)
 |
이제는 스토리보드를 만들도록 하겠습니다. 4컷의 이미지를 보여주기 위해서 4개의 스토리보드를 만들어야 합니다.
 |
첫번째 스토리보드를 생성하고, 0.5초가 되는 지점에 키프레임을 생성합니다. 그리고 X와 Y의 좌표값에 각각 1,1 을 입력하였다가 0,0으로 수정해줍니다. 왜 1,1로 했다가 다시 0,0으로 바꾸느냐..!! 스토리보드에서 키프레임을 생성한다고 해서 좌표의 속성값에 0,0이 들어가지 않습니다. 비어있을 뿐이죠. 그렇기 때문에 1을 입력하였다가 0을 입력하면 각각의 좌표값에 0 의 속성값이 들어가기 때문에 다른 좌표의 값으로 이동하였다고 하더라도 0,0의 속성값으로 찾아올 수가 있는 것입니다. 이것두 꼼수에요 ^^; (꼼수 많다~;)
 |
그리고 키프레임을 선택하여 y2에 1을 입력하여 다음과 같이 가속도를 감소시켜 줍니다.
 |
이제 두번째 스토리보드를 만들도록 하겠습니다. 두번째 이미지가 보여지는 애니메이션인데요. 다음과 같이 1번 스토리보드와 마찬가지로 0.5초가 되는 지점에서 키프레임을 삽입한 후에, 이미지를 드래그하거나 좌표값을 직접 입력하여( -이미지 가로사이즈) 2번 이미지가 나타나도록 합니다.
 |
 |
그리고 1번에서처럼 키프레임을 선택하고 가속도를 똑같이 감소하여 줍니다.
세번째 네번째 스토리보드도 마찬가지입니다. 0.5초가 되는 지점에서 키프레임을 삽입한 후에 각각의 이미지가 보여지도록 드래그하여 이동을 하거나 -150(이미지 가로사이즈)만큼을 입력하여 이동시키고 가속도를 감소하여 줍니다.
자, 각각 이미지에 대한 스토리보드 4개를 다 만드셨나요? 그렇다면 마지막으로, 이미지가 순서대로 움직이는 전체 애니메이션을 만들도록 하겠습니다.
다섯번째 스토리보드를 생성한 후에 다음과 같이 0. 1.5, 2, 3.5, 4, 5.5, 6, 7.5, 8이 되는 지점에 키프레임을 생성합니다. 이미지가 유지되는 시간을 1.5초로 잡고, 이동시간을 0.5초로 잡았습니다. 다음 그림으로 이해가 가실지 모르겠는데요, 다음과 같이 빨간 사각형이 쳐진 지점의 키프레임에서 이동을 하게 됩니다. 이동이 될때에는 좌표가 이미지의 가로사이즈(저는 150)만큼 이동이 되겠고, 위에서와 마찬가지로 가속도를 감소시켜 주세요.
마지막으로 스토리보드를 선택하여 무제한 반복하도록 합니다.
 |
이제 코드를 넣어주어야 실행이 되겠죠? ^^ C#코드에서 마지막에 만들었던 스토리보드 5를 실행하라는 코드를 넣어주도록 할께요.
 |
자 이렇게 완성된 프로젝트를 실행하면 슬라이드처럼 지나가는 광고효과를 만들 수 있습니다.
여기서~~~~~~~ 끝낸다면!! 너무 아쉽겠죠!! 끝이 아니랍니다 하하하~~! 버튼 4개를 만들어 해당 버튼에 오버했을 때 이미지가 바뀌는 기능도 넣어보겠습니다. 다음 페이지에서 진행할께요 ^^
