안녕하세요? 정진희 입니다.
이번 시간에는 정~말 오랫만에 실버라이트로 제작을 할까 하는데요.
Visual StateGroup의 기능으로 실버라이트 사진슬라이드 갤러리를 만드는 시간을 가져보도록 하겠습니다.
먼저 예제를 보시고 시작하시길 바랍니다.
1. 포토샵에서 Psd 파일을 만듭니다.
저는 다음과 같이 사진갤러리에 쓸 4장의 사진을 layer에 추가하였습니다. (사이즈는 640x300정도)
그리고 이름을 각각 page1,2,3,4로 지정하고 page라는 이름으로 save하였습니다.
2. Expression 블랜드에서 다음과 같이 실버라이트로 프로젝트를 생성합니다. 이름을 그림과 같이 설정하여 줍니다.
그리고 Usercontrol 을 선택하면 기본적으로 640x480으로 사이즈가 설정되어있는 것을 높이 값을 350으로 설정해줍니다. 사진 갤러리의 사이즈를 지정해주는 작업입니다.
3. File > insert photoshop 파일을 클릭하여 방금 전 자신이 만들었던 파일을 가지고 오면 다음과 같은 팝업이
뜨게 됩니다. 포토샵 파일에서 레이어를 어떻게 가져올 것인지에 대해 묻는 것입니다.
저는 모든 레이어를 가져오도록 선택을 클릭하고 확인버튼을 클릭합니다.
4. 그러면 다음과 같이 화면에 들어온 것을 확인할 수 있습니다. 캔버스 Page에 묶여서 들어왔는데요.
① 처럼 그룹해제를 하시고 ②가 가르키는 Background1을 삭제해주세요.
5. 그룹 해제한 이미지 4장을 선택하시고 Stack Panel로 묶어줍니다.
그리고 Stack panel의 Orientation을 Horizontal로 변경해주세요.
6. 실버라이트로 inport하면서 가로 사이즈가 Auto로 변해 있을 텐데요.
Stack Panel 안에 이미지들을 전부 선택하신다음 , width값을 Auto에서 실제 이미지의 사이즈를 확실히 정해줍니다.
이 작업은 나중에 상태를 바꿔줄 때 쓸 애니메이션을 위한 것입니다.
7. 하단에는 클릭하였을때 각각 해당하는 이미지들이 보여지도록 하는 버튼을 구성합니다.
이미지 갯수에 따라 총 4개로 만들었습니다. 그리고 버튼의 네임을 btn1/btn2/btn3/btn4로 하였습니다.
자, 이제 사진 갤러리를 만들기 위한 요소들은 다 만들어 진 것 같습니다.
이제부터는 버튼을 클릭할때마다 상태가 변하도록 애니메이션을 주도록 하겠습니다.
8. State(상태) 패널에서 VisualStateGroup을 만들도록 하겠습니다.
①을 클릭하여 그룹을 먼저 만듭니다.
그 그룹의 이름을 ②에서 임의대로 지정합니다.
③은 애니메이션의 가/감속을 위한 Easing function을 Circle inout으로 설정을 합니다.
그리고 ④에는 visual StateGroup의 state가 지속되는 시간을 가르킵니다. 저는 여기서 1초를 설정하도록 하겠습니다.
9. 다음으로는 그룹안에 상태를 추가하도록 하겠습니다. ①을 클릭하여 상태를 추가하고, ②에는 상태의 이름을 적어줍니다. 이 이름으로 나중에 코드가 이 상태를 찾아가도록 할 것이기 때문에 기억하시고요~
저희는 상태가 이미지가 클릭 될때마다 바뀌어야 되기 때문에 총 4개의 상태를 만들도록 합니다.
저는 gotoPage1 / gotoPage2 / gotoPage3 / gotoPage4 이름으로 상태를 만들었습니다.
다음강좌에 이어 진행하도록 하겠습니다.
