ZZANGMYON BLOG♡

다음과 같이 개체가 순서대로 쌓이는 스택패널을 하나 생성해 줍니다. 개체의 정렬은 Horizontal(가로)로 해주세요.

그리고 버튼 4개를 생성하여 넣도록 하겠습니다. 여기서부터는 고속으로 진행하겠습니다. ^^; 다음과 같이 버튼의 가로,세로 사이즈를 20,20으로 하고 마진값을 오른쪽에 5를 주십시오.

그러면 다음과 같이 아기자기한 버튼들 4개가 나란히 놓여지게 됩니다. 버튼의 이름을 주는것도 잊지 마세요. ^^

이렇게 생성된 버튼에 스타일을 입히도록 합니다. 스타일 입히는 것은 이전 강좌에서 너~~무 많이 나온 이유로 생략하도록 할께요 ^^ Over 효과만 주시면 됩니다

. 자, 저는 이렇게 스타일을 입혀 완성하였습니다!

이제 각각 버튼에 코딩을 하도록 하겠습니다.

첫번째 버튼을 선택하여 프로퍼티 창에서 이벤트 패널을 누릅니다. 그리고 MouseEnter 칸에 더블클릭을 하면 자동으로 함수가 생성됩니다.

그리고 나서 코드창에 가서 다음과 같이 입력합니다. "버튼 1을 눌렀을때 전체 애니메이션(Storyboard5)는 멈추고 Storyboard1을 실행하라"

 

2,3,4번의 버튼도 마찬가지로 적용시키면 됩니다. MouseEnter 이벤트를 생성한 후에 StoryBoard5.Stop(); 는 공통으로 넣어주시고 Begin 하는 스토리보드의 이름을 버튼에 맞도록 2, 3, 4로 바꾸어주세요

.

그리고 버튼을 담고 있는 스택패널을 선택한 후에 다음과 같이 이벤트를 받게 하기 위하여 Background 영역을 채워줍니다. Background 영역이 Null 처리 되어 있으면 마우스 이벤트를 받을 수 없어요. 그러나 미관상 이벤트를 받는 영역이 눈에는 보이지 않게 하기 위하여 알파값을 0으로 줍니다.

그리고 다시 이벤트 프로퍼티창으로 가서 MouseLeave에 더블클릭하여 함수를 생성합니다. MouseEnter가 아니라 Leave 입니다. 영역에서 벗어났을 경우니까요.



마지막으로 아래와 같이 "4개의 스토리보드를 멈추고 다시 5번 스토리보드가 실행되게 하라"는 코드를 삽입합니다.

실행하면 각각 버튼에 마우스가 오버되었을때 해당 이미지가 나타나게 됩니다. 특정 영역을 벗어나게 되면 순서대로 지나가게 되구요. ^^ 잘 이해되셨나요~~

파일 첨부하도록 하겠습니다.

SlideAD.zip

안녕하세요. 벌써 봄 기운이 느껴지네요. 좀 있으면 날씨가 따뜻해져서 소풍가기 좋을 것 같아요 ^^;; 오늘은 오랜만에 강좌를 씁니다.

 

프로젝트 타입 : Silverlight

웹사이트를 돌아다니다 보면 슬라이드 효과를 내는 광고가 많이 있는데요. 오늘 실버라이트로 광고를 만들어보도록 하겠습니다. 작업도 눈이 즐거워야 하는법!! 저는 요즘 한창 잘나가는 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개를 만들어 해당 버튼에 오버했을 때 이미지가 바뀌는 기능도 넣어보겠습니다. 다음 페이지에서 진행할께요 ^^

갑자기 날씨가 추워졌네요. 눈이 온 곳도 있다고 하네요..ㅋㅋ;
11월 첫주에는 실버라이트 교육이, 지난주 토요일에 폴리텍1대학에서 블렌드 교육이 있었습니다. 실버라이트 교육에서 했던 실습예제를 강좌로 옮기려고 합니다. 간단하게 생략하여 쓴 것이라 이해가 안가는 부분은 글을 남겨주시면 알려드리겠습니다.^^

 1. 자동차를 디자인하고 차의 몸체(Body)와, 바퀴 2개(wheel1, wheel2)의 레이어를 분리합니다.

2. 스토리보드를 생성합니다.

3. 자동차 바퀴(wheel1, whee2)를 선택하고 3초가 되는 시점에서 키프레임을 만들어줍니다.

4. 키프레임을 생성한 후 회전 각도를 360도 입력합니다.


5. 바퀴가 회전하는 애니메이션의 반복 횟수를 10x로 입력합니다.

6. 2번째 스토리보드를 생성합니다.


7. 3초가 되는 시점에서 키프레임을 생성합니다.

8. Car의 x, y 스케일을 2로 입력합니다.


9. 캔버스를 드래그하여 위치를 이동시킵니다.

10. 3초 시점의 키프레임을 선택한 다음 KeySpline 곡선을 이용하여 가속도를 줍니다.

 

11. CS 파일을 열어 페이지가 로드될 때 스토리보드를 호출하는 코드를 삽입합니다.

namespace Sample1 {         public partial class Page : UserControl         {                public Page()                {                        // Required to initialize variables                        InitializeComponent();               this.sb_CarMove.Begin();             this.sb_WheelMove.Begin();                }         } }

 
자동차 디자인은 여러분의 환상적인 감각에 맡기도록 할께요~ ^^

예제는 다음 페이지에서 확인하세요.

http://www.hoons.kr/Board.aspx?Name=mysilverlight&Mode=2&BoardIdx=17098&Key=&Value=

안녕하세요. ^_^ 블렌드 포스팅은 정말 오랜만이네요..흐흐.. 오늘은 가속도를 이용하여 통통 튕기는 공을 만들어 보겠습니다.

1. 먼저 도형툴을 이용하여 공을 그려주세요.

2. 그리고 그림자가 될 부분도 그려줍니다.


3. 공과 그림자를 다 만들었다면 스토리보드를 하나 생성합니다.


4. 0초, 1초, 2초, 3초, 4초가 되는 시점에 키프레임을 각각 생성합니다.


5. 1초 지점에 플레이헤드를 놓고 공을 아래로 이동시킵니다.


6. 공의 바닥에 닿으면서 살짝 찌그러지는 효과를 주기 위해서 Y스케일을 0.9로 해줍니다.


7. 떨어지면서 공의 가속도가 붙도록 해야겠죠? 키프레임을 선택하고 KeySpline 곡선을 이용하여 가속도를 줍니다.


8. 2초가 되는 시점에 플레이헤드를 놓고 공의 위치를 원래의 위치로 이동시킵니다.


9. 이번에는 공이 위로 튀어오르면서 가속도가 떨어지게 됩니다. 키프레임을 선택한 후 KeySpline 곡선을 다음과 같이 조절합니다.


10. 역시 찌그러졌던 공의 모양도 원래대로 돌아와야 하니 Y스케일을 다시 1로 만들어줍니다.

11. 3초, 4초, 5초가 되는 시점에 위와 같은 작업을 반복합니다.

12. 공에 대한 애니메이션을 다 만들었다면, 이번에는 그림자에 대한 애니메이션을 만들어야합니다. 공이 내려왔다가 튕겨 올라갈때의 느낌을 살리기 위해서요 ^_^ 0초에 플레이헤드를 놓고 X, Y의 스케일을 0.5, 0.5로 만들어줍니다. 공이 공중에 있을때는 그림자가 작게 나타나고 공이 지표면에 가까워질수록 그림자는 크게 나타나겠죠?

13. 1초가 되는 시점에 그림자의 X, Y 스케일을 다시 1,1로 해줍니다. 2초, 3초, 4초에도 마찬가지로 스케일 변경을 해 주고, 가속도효과는 공과 같이 해줍니다.


14. 스토리보드 작업을 완료하고 스토리보드를 실행하는 코드를 추가하도록 합니다.

namespace Ball {         public partial class Page : UserControl         {                public Page()                {                        // Required to initialize variables                        InitializeComponent();                        sb_Animation.Begin();                }         } }

15. 저의 예제처럼 끊임없는 애니메이션을 넣고 싶다면 스토리보드를 선택 후 반복 횟수를 Forever로 해주세요 :)


자~ 이렇게 공이 통통 튕겨집니다. ^_^

파워포인트 효과중 나타내기의 4종입니다.  모델은 제가 키우던 고슴도치 산타에여 ^_^~ 산타 이쁘져 ㅎㅎ

안녕하세요. 짱묜입니다.
작업을 하다보니 클리핑을 사용하면 무궁무진한 효과를 낼 수 있더군요..^^

오늘은 파워포인트의 닦아내기 효과를 내어보도록 하겠습니다.

먼저 cvShow 라는 이름의 캔버스를 만들어줍니다. 지금 그림에 나타나는 회색영역이 캔버스의 영역이예요.



그리고 캔버스와 같은 크기의 사각형을 만들어줍니다.



그리고 두 레이어를 선택하여 아래의 그림과 같이 Clipping 을 합니다.



그럼 다음과 같이 레이어가 클리핑된 하나의 레이어(cvShow)만 보여지게 됩니다. 자세히 살펴보면 클리핑 된 오브젝트는 패스의 선이 보라색으로 보여집니다.



다음은 왼쪽에서 오른쪽으로 닦아내며 나타나는 듯한 효과를 위해서 스토리보드를 만들도록 하겠습니다. 클리핑되어 보여주는 영역이 왼쪽에서 오른쪽으로 늘어나야겠죠? 스토리보드에서 첫 키프레임과 끝 키프레임을 생성하고 첫 키프레임에서 오른쪽 두개의 앵커포인트를 선택하여 이동시켜야 합니다. 앵커 포인트를 개별적으로 선택하기 위해서는 Directe Seletion 툴을 이용해야 합니다.



툴을 이용하여 앵커포인트를 선택하면 선택된 앵커포인트의 색이 바뀌게 됩니다. 다중선택을 하려면 Shift 키를 누르시면 돼요. 이렇게 두 개의 앵커포인트를 선택하여 왼쪽 끝으로 이동시킵니다.





이렇게 해서 스토리보드를 실행해 보면 캔버스가 왼쪽에서 오른쪽방향으로 영역이 확대되며 나타나게 됩니다.

여기서 중요한것은 우리는 하나의 객체가 아니라 캔버스의 영역을 클리핑 한 것이기 때문에 캔버스에 어떠한 자식 객체가 들어가던지 클리핑 된 캔버스 영역은 같은 효과가 적용되게 됩니다.

휴~ 뭐 이방법 저방법 다 써보았는데.. 타일브러쉬를 지원하지 않아서 이미지를 패스나 사각형 컨트롤 안에 맵핑하듯이 이미지로 채워주는 방법은 할 수가 없네요..
결국 Clipping을 통한 눈속임..ㅠㅠ 실제로 이미지가 각의 기울기에 따라서 변형되진 않고..테두리만 그렇게 보이는 방법을 썼어요. 기울기를 너무 낮추면 이미지가 잘리는게 너무 티가 나니 -_-;; 살짝만 해야될듯 합니다. 이미지를 조각내어 변형하는.....ㅡㅡ;; 코드를 쓴 방법은 ㅋㅋ 응용을 도저히 못하겠어서 포기~~!!;; 그래도 아래것과 비교하면..그나마 낫군요.

한 회원분의 질문으로.....삽질을 해보았는데..3D 효과를 내기 위한.. -_-;;
이미지를 회전시킬경우, Flip을 이용하여 뒤집기는 성공하였으나(물론 스토리보드로 한거구요) 원근감을 주기 위해서는 이미지가 회전할때 안으로 들어가는 바깥 변의 길이가 줄어서 사다리꼴의 모양이 되어야 합니다. 그런데 -_-줄일수가 없더군요..흐..제가 방법을 못찾는건지 ~ ㅠ_ㅠ 어떻게 해야할까요? 함께 고민해주세용~ㅋㅋㅋ
참고로 사진은 같이 일하시는 과장님네 아들래미입니다 ㅋㄷㅋㄷ



현중군의 도움으로.... 이미지를 자연스럽게 원근감을 주면서 뒤집을수 있는 소스를 찾았습니다. 캔버스를 이용한 것인데.. 안타깝게 스토리보드가 아니라  C#으로 제어하는거라 흑...!! 더 연구하고 올릴께여~

흐흣~ 월E 너무 귀여워요 T^T 근래에 본 영화중에 제일 -_-가슴뭉클하고 감동적인 영화였더라는...-ㅁ-)/ 짱짱!!!

간단하게 사진들로 이미지뷰어를 만들어 봤어요.ㅎㅎ 그래봐야 5장뿐이라 -_-..ㅋㅋ 클리핑을 이용했는데요. 이미지는 프로젝트 파일 안에 들어있어요(실제 작업시에는 따로 관리하세요). 스토리보드가 타겟네임만 다를뿐 모두 같은 효과라서 프로그래밍으로 할때는 이미지 소스 이름만 바꿔서 똑같이 적용시켜주면 될 것 같네요^^

안녕하세요~ 짱묜입니다. -ㅁ- 점심을 먹고왔더니 졸음이 쏟아지네요..ㅠㅠ;;

이번 강좌에서는 블렌드에 동영상을 클리핑하여 넣는 것을 해보도록 하겠습니다. 일단 동영상을 보여줄 TV 이미지를 하나 급구 했어요..-ㅁ- 짠~ 이미지를 프로젝트 파일에 넣는법은 다 아시겠죠?


먼저, 동영상을 프로젝트에 첨부해야 합니다. 우리가 첨부할 동영상은 MediaElement 라는 타입으로 프로젝트에 들어가게 되는데요. 첨부하는 방법은 이미지를 넣듯이 Add Existing Item으로 로컬에 있는 동영상을 선택해 주기만 하면 됩니다. 그러면 다음과 같이 프로젝트 파일에 이미지와 동영상이 들어가있는 것을 볼 수 있습니다. 실버라이트의 장점으로 부각되는 것중의 하나죠. WMV포맷이 지원된다는거~ ^^ 저는 윈도우에 들어있는 기본 동영상을 넣어주었어요~



첨부가 잘 되었다면, TV 이미지와 동영상을 각각 더블클릭하여 LayoutRoot에 넣어줍니다. 동영상의 레이어가 이미지보다 위에 위치해야 합니다. 사이즈는 적당히 조절해주면 되겠죠?



자~ 얼추!! 이렇게 배치가 되었나요? 그렇다면! 이제 동영상을 TV 화면 사이즈만큼 나오도록 해주어야 합니다 TV 화면만한 사각형을 하나 그리고 사각형과 동영상의 레이어를 선택한 다음 Object > Make Clipping Path 항목을 선택하면 아래와 같이 그려준 사각형의 크기만하게 동영상이 나타납니다.



제법 TV 같습니다 ^_^; 여기서 응용 하나 더 하자면 텍스트를 하나 그려서 패스로 변환한 후, 위의 작업과 마찬가지로 클리핑 해보세요. 그럼 예제와 같이 만들 수 있습니다. 홍홍홍홍~~~~~~~  오늘도 즐거운 실버라이트였습니다 -ㅁ-)v