ZZANGMYON BLOG♡

[프로젝트 타입 : Silverlight 4]

안녕하세요. 짱묜입니다. :) 정말 오랜만이죠? 얼마만에 강좌를 쓰는지도 모르겠습니다;; 이제부터 미뤄왔던 온라인 강좌들을 다시 써보려고 해요. 궁금한 사항이나 다뤄주었으면 하는 부분들은 글을 남기시면 참고하도록 하겠습니다.

오늘은 Resource Dictionary(이하 리소스 딕셔너리)를 다른 프로젝트로 분리하여 관리하는 방법에 대해서 알아보려고 합니다. 우리가 자주 사용하는 스타일, 템플릿과 같은 리소스들은 해당 도큐먼트에 선언하여 사용하거나 App.xaml 에 선언하여 전역으로 사용하거나, 리소스 딕셔너리로 분리하여 사용합니다. 이러한 방법들은 모두 하나의 프로젝트 안에서 이루어지게 됩니다. 그런데 만약 규모가 커져서 여러개의 프로젝트가 합쳐진 솔루션을 개발해야 할 상황이 온다면 어떻게 해야할까요?

아마도 프로젝트 마다 다른 프로젝트 안에 들어있는 리소스 딕셔너리를 일일이 참조해야 할 것이고 만약 참조한 리소스 딕셔너리가 들어있는 프로젝트가 불필요하여 제거라도 해야 하는 날에는 모든 경로를 다시 다 바꾸어주어야겠죠.아~ 생각만해도 귀찮습니다. =_=;;

이러한 리소스 딕셔너리들을 또 다른 프로젝트로 분리하여 관리한다면 이런 불상사는 생기지 않겠죠. 또한 자주 쓰는 스타일들을 템플릿화 하여 관리한다면 어떠한 프로젝트에도 가져다 쓸 수 있는 큰 자산이 되리라 생각합니다.

※ 실제 프로젝트를 생성할 때에은 비주얼 스튜디오로 프로젝트를 생성하는 것을 권장합니다. sdk 등등 여러 문제가 있으니까요. 이번 강좌는 블렌드에서 생성하는 것을 예로 들겠습니다. 실제 프로젝트에 적용하실 경우에는 센스를 발휘해주세요~

1. Expression Blend를 열고 프로젝트를 하나 생성합니다. 메인이 되는 프로젝트로 이름은 "ResourceDictionaryTest"라고 주었습니다. 이 프로젝트에는 버튼이나 레이아웃 컨트롤 등 UI 작업이 이루어질 것입니다.



2. 프로젝트를 생성하면 기본적으로 솔루션이 하나 생성되고 그 안에 프로젝트가 생기게 되는데요. 여기서 "솔루션"이란 프로젝트의 집합을 나타냅니다. 우리는 리소스 딕셔너리를 관리할 프로젝트를 하나 더 생성해야 합니다. 솔루션에 마우스 오른쪽을 갖다대고 "Add New Project" 메뉴를 클릭합니다.

 

3. 대화창이 뜨게 되면 "MyStyle" 이라는 이름을 주어 프로젝트를 생성합니다. 이 프로젝트에서는 UI작업이 이루어지지 않으며 리소스 딕셔너리 만을 포함할 것입니다.



프로젝트를 생성하면 다음과 같이 하나의 솔루션 안에 두개의 프로젝트가 생성되어 있는 것을 확인할 수 있습니다.



4. "MyStyle" 프로젝트에 리소스 딕셔너리를 추가하기 위해 마우스 오른쪽을 갖다 대고 "Add New Item" 항목을 클릭합니다.



5. 대화창이 나타나면 파일 타입을 "Reosurce Dictionary"로 선택하고 이름을 "ButtonStyle"이라고 줍니다.



6. "MyStyle"의 프로젝트에 App.xaml 파일을 살펴보면 다음과 같은 코드를 확인할 수 있습니다.

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="ButtonStyle.xaml"/>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

ButtonStyle.xaml 이라는 리소스 딕셔너리가 App.xaml에 선언됨으로써 프로젝트 안의 어느 파일에서도 이 딕셔너리 안에 있는 스타일을 Key로 접근하여 쓸 수 있게 되는 것입니다. 그러나 우리는 다른 프로젝트에서 이 프로젝트의 스타일을 쓸 수 있도록 해야합니다.

7. "ResourceDictionaryTest" 프로젝트의 "References"에 마우스 오른쪽을 갖다댄 후 "Add Project Reference > MyStyle" 을 선택합니다. 참조 가능한 프로젝트인 MyStyle이 자동으로 나와요 :)



다음과 같이 프로젝트가 잘 참조 되었는지 확인하세요.



8. "ResourceDictionaryTest" 프로젝트의 App.xaml을 선택한 후 오른쪽 패널에서 "Resources" 탭을 선택합니다. (기본적으로는 Properties 탭이 선택되어 있어요.) 그리고 App.xaml에 마우스 오른쪽을 갖다 대어 "Link to Resource Dictionary > ButtonStyle.xaml" 을 선택합니다. MyStyle 프로젝트에 있는 리소스 딕셔너리에 링크를 거는 것입니다.



"ResourceDictionaryTest" 프로젝트의 App.xaml 코드를 확인해 보면 아까와 약간 다른데요. MyStyle 프로젝트에 있는 ButtonStyle.xaml 리소스 딕셔너리가 병합되어 있는 것을 확인할 수 있습니다. 

<ResourceDictionary>

  <ResourceDictionary.MergedDictionaries>

  <ResourceDictionary Source="/MyStyle;component/ButtonStyle.xaml"/>

  </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

9. UI를 표현할 "ResourceDictionaryTest" 프로젝트의 MainPage.xaml에서 버튼을 하나 생성한 후 스타일을 만들도록 합니다.



스타일의 이름을 주고 만들어지는 스타일을 어느 곳에 저장할지 선택합니다. 우리가 참조한 ButtonStyle.xaml 리소스 딕셔너리가 보이는군요!! 실컷 만들어두고 엄한 곳에 저장하시면 아니됩니다 -_-;

11. 버튼의 스타일을 만들어 봅시다. 저는 RedHeartButton 이라는 스타일 이름에 맞게 불타는 하트를...+_+



하..하트가 맞다고요 ㅠㅠ 하트를 하트라 부르지 못하고...흐엉.. 암튼! 스타일 만드는 법은 다들 아시리라 생각하고 패스~

<Grid x:Name="LayoutRoot" Background="White">

     <Button Content="Button" HorizontalAlignment="Left" Height="64" Margin="100,68,0,0" VerticalAlignment="Top" Width="92" Style="{StaticResource RedHeartButton}"/>

</Grid>

스타일이 적용된 버튼이 들어가 있는 것을 확인할 수 있습니다. 이런식으로 스타일과 리소스 딕셔너리를 만드시면 되는데요. 자 그럼 수정은 어떻게 해야 하느냐!! 우리가 평소에 스타일을 수정하듯이 컨트롤의 "Edit Current" 메뉴를 이용하면 됩니다.



클릭하는 순간 스타일이 들어있는 프로젝트의 리소스 딕셔너리로 연결되어 바로 수정하면 됩니다. 너무너무 쉽죠?



버튼이나 이미지 브러시 등 같은 속성을 가지고 있는 스타일들을 리소스 딕셔너리로 나누어 관리하게 되면 우리가 웹에서 사용하는 CSS처럼 편하게 관리할 수 있습니다. 또한 어떤 프로젝트에건 참조하는것 만으로 이렇게 정리된 스타일을 갖다 쓸 수 있겠죠? 단 스타일을 정의할 때에 쓰이는 Key 는 고유해야 하기 때문에 선언하여 사용되는 범위 내에서 이름이 중복되지 않도록 주의해야 합니다. 파일 첨부합니다.

이미지가 많아서 꽤 길어졌네요. 잘 이해하셨나 모르겠어요. 혹시나 이해가 안가는 부분들이 생긴다면 댓글이나 답글을 달아주세요. 무더운 여름 더위 안먹게 조심하세요~ ㅋㅋ 전 조만간 다시 등장~ 뿅!!

다음과 같이 개체가 순서대로 쌓이는 스택패널을 하나 생성해 줍니다. 개체의 정렬은 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개를 만들어 해당 버튼에 오버했을 때 이미지가 바뀌는 기능도 넣어보겠습니다. 다음 페이지에서 진행할께요 ^^

13. 다시 1.5초가 되는 시점에 플레이헤더를 놓고 오브젝트의 위치를 10번보다 조금 높게 이동시킵니다. 또는 Y 좌표값에 105을 입력합니다.

14.그리고 모든 오브젝트의 키프레임을 선택한 후(11번과 같이) 가속도를 줍니다. y2에 1을 입력.

15. 모든 오브젝트를 선택한 후 1.9초가 되는 시점에 플레이더를 놓고 아래로 이동시킵니다. Y 좌표값에 135를 입력합니다.

16. 1.9초 지점의 키프레임을 선택한 후 가속도를 줍니다. x2의 값에 1를 입력합니다.

17. 모든 오브젝트를 선택한 후 2.2초가 되는 시점에 플레이더를 놓고 아래로 이동시킵니다. Y 좌표값에 110을 입력합니다.

18. 그리고 모든 오브젝트의 키프레임을 선택한 후 가속도를 줍니다. y2에 1을 입력합니다.

19. 첫번째 오브젝트 에서 두번째부터 마지막까지의 키프레임을 모두 선택한 후(다중선태은 shift키 이용) 0.1초 앞으로 당깁니다.

20. 두번째 오브젝트부터는 1번째 키프레임을 제외한 모든 키프레임을 모두 선택하여 0.2초 씩 뒤로 시간차를 줍니다.

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

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

F5르 눌러 실행하도록 합니다. 생각했던데로 잘 튕겨지나요? ^_^

 

어제에 이어서~ 교육때 썼던 예제를 하나 더 올리도록 하겠습니다. 저번에 가속도를 이용한 공 튕기기를 했었죠? 이번에는 똑같은 효과를 적용하여, 글자들이 튕기는 애니메이션을 만들어보겠습니다. 역시 간단하게 작성하였으니 질문은 글로 써주시기바래요. ^_^

1. LayoutRoot 그리드의 배경색을 검은색으로 한 후 텍스트 블록을 생성합니다.

2.Text에 원하는 텍스트를 입력하고, 폰트와 사이즈를 입력합니다.

3. 텍스트블록을 선택하고 마우스 오른쪽을 눌러 텍스트를 Path로 변환합니다.

4. 변환된 패스를 낱개의 오브젝트로 분리시킵니다.

5. 글자의 공백 부분의 색을 바탕색과 같이 변경하고 레이어의 순서를 한 단계 앞으로 보냅니다.

6. 한 글자를 이루는 패스가 2개 이상 일 경우 하나의 그룹으로 묶어줍니다.

오브젝트마다 원하는 색을 넣어주어도 됩니다.

7. 모든 오브젝트의 위치를 그리드 밖으로 이동시킵니다.

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

9. 모든 오브젝트를 선택한 후 0, 0.1, 1, 1.5, 1.9, 2.2초가 되는 시점에서 키프레임을 각각 생성합니다.

10. 0초와 0.1초의 키프레임에서 Opacity의 값을 0으로 하여 투명하게 합니다.

11. 모든 오브젝트를 선택한 후 플레이헤더를 1초에 놓고 아래로 이동시킵니다. 방향키를 이용하거나,  y 좌표값을 135 로 입력합니다.

12. 그리고 키프레임을 선택한 후(shift 키 누른채로 선택) 가속도를 줍니다. x2의 값에 1를 입력합니다.

여기까지 완료가 되셨다면 다음장에 이어서 하도록 하겠습니다.

 

갑자기 날씨가 추워졌네요. 눈이 온 곳도 있다고 하네요..ㅋㅋ;
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로 해주세요 :)


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

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

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

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



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



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



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



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



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





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

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

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

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


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



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



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



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

안녕하세요. 짱묜입니다. ^-^

오늘은 가속도에 대해서 다뤄볼까 해요. 제가 이전에 튜토리얼 강좌를 진행하면서 빼먹은 부분이었던것 같네요. 굉장히 쉬운 내용입니다~ ㅎㅎ

블렌드에서 가속도를 줄 수 있는 부분은 2곳이 있습니다. 하나는 키프레임에서 마우스 오른쪽 메뉴를 눌러 Ease In(빠르게 시작)과 Ease Out(느리게 시작) 을 조절해 주면 객체가 이동할 경우 가속도가 더해지거나 덜해집니다. % 값이 클수록 크게 작용합니다.



예를 들어 키프레임의 앞부분에 Ease In 값을 주면 빠르게 시작합니다. Ease Out 에 값을 주면 역시 느리게 시작하겠죠?

Ease In/Ease Out 은 기본적인 수치가 정해져 편리하게 쓸 수 있습니다. 만약 좀 더 세밀하게 가속도를 조절하고 싶다면 Easing 패널에서 KeySpline을 이용하는 것입니다. 이 패널은 어떻게 찾느냐..네 저도 처음에 한참 찾았던 아픈 기억이 나네요 T^T;; 이녀석은 바로 보이지 않습니다. 오브젝트를 클릭하고 특정 키프레임을 콕~눌러주세요.



그러면 오른쪽에 나타날것입니다..하하 왜이렇게 숨어있는겨~!!



Common Properties 패널의 Value 값은 객체가 이동할 좌표값입니다. 저는 객체가 X축으로 450 이동하게끔 해놓았어요. 그리고 그 아래에 KeySpline 곡선이 나타나는데요..처음에 열면 반비례 모양의 직선으로 나타나있습니다. 아무값도 들어있지 않기 때문이죠. 그러나 저기 노란 핸들러를 드래그하여 이동해주면 KeySpline 곡선이 변형됩니다. 수치로 직접 입력할 수도 있구요.. 간단하게 말로 설명하자면 볼록한 부분은 느리게, 오목한 부분은 빠르게 움직입니다. 위의 그래프를 풀어보면 처음엔 느렸다가 갑자기 빨라지는 애니메이션이 연출되겠네요 ^_^;

아래의 예제는 똑같은 시간(1초)동안 다른 가속도로 움직이는 애니메이션 입니다. 오토바이를 클릭하여 차이를 느껴보세요~(음..느끼라니까 뉘앙스가 좀..- -;;) 원상태로 돌아가는 기능은 없습니다..-_-불편하더라도 지나간 녀석을 다시 눌러주세요.