ZZANGMYON BLOG♡

툴 박스의 마지막 도구인 에셋 라이브러리에 대해서 알아보도록 하겠습니다.

◎ Assets
에셋 라이브러리에는 현재 자신이 보유하고 있는 리소스와 컨트롤, 비헤이비어와 액션 등이 들어있는 자산 목록이라고 생각하면 됩니다. 닷넷 프레임워크 툴킷, 실버라이트 툴킷 등 어떤 툴킷을 설치하였는지, 또 어떤 컨트롤과 비헤이비어를 개발하여 직접 보유하고 있는지에 따라 그 목록은 개인마다 다르게 나타날 수 있습니다. 에셋 라이브러리는 툴 박스에 있는 아이콘을 이용하여 펼칠 수 있고 상단의 [Assets] 패널을 클릭하여 펼칠 수도 있습니다. 카테고리를 선택하면 해당 카테고리에 관련된 컨트롤과 비헤이비어 등의 목록이 나타납니다. 다음의 이미지를 보면 [Assets]패널과 툴박스에서 아이콘을 선택한 [Assets]에 동일한 컨텐츠가 들어있음을 알 수 있습니다.

1.Project : 현재 프로젝트에 정의된 에셋이 나타납니다. 사용자가 정의하여 만든 유저컨트롤 등이 들어있습니다. 프로젝트를 다시 빌드할 때까지 보이지 않는 타입도 있습니다.
2.Controls : 모든 컨트롤 목록이 나타납니다. 데이터, 패널 등 카테고리가 한 단계 더 나누어져 있습니다.
3.Styles : 보유하고 있는 모든 스타일 목록이 나타납니다. 
4.Behaviors : 비헤이비어&액션 목록이 나타납니다.
5.Shapes : 다양한 도형 타입의 컨트롤 목록이 나타납니다.
6.Effects : 효과 목록이 나타납니다.
7.Media : 프로젝트에 불러온 이미지, 비디오, 오디오 혹은 3D 개체와 같은 파일들의 목록이 나타납니다.
8.Categories : 컨트롤 개발자들에 의해 생성된 하위 카테고리 안의 컨트롤들이며 [Controls]의 컨트롤과 일부 중복됩니다.
9.Locations : 참조되어 있는 DLL별로 나누어 에셋 목록을 볼 수 있습니다.

[Assets] 툴을 선택하여 파일 목록을 펼친 다음 생성할 컨트롤을 더블 클릭하게 되면 [Assets] 툴 아래에 선택한 컨트롤의 아이콘이 나타납니다. 이것을 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 파일 목록에서 아트보드에 드래그앤 드랍하여 컨트롤을 바로 생성할 수도 있습니다.

가장 최근 선택한 컨트롤이 최대 10개까지 목록에 나타나기 때문에 자주 이용할 수 있습니다.

현재 열려있는 프로젝트에 기존에 있던 프로젝트나 항목 추가, 참조 추가 등을 할 수 있습니다. 프로젝트를 빌드하거나, 클린 하는 프로젝트 실행에 관련된 메뉴들이 들어있습니다.

◈ Project 메뉴

1.Add New Folder : 프로젝트에 새 폴더를 추가합니다.
2.Add New Project : 프로젝트에 새 프로젝트를 추가합니다.
3.Add Existing Project : 프로젝트에 기존에 있던 프로젝트를 추가합니다.
4.Add Existing Website : 프로젝트에 기존에 있던 웹사이트 프로젝트를 추가합니다.
5.Add New Item : 프로젝트에 새 항목을 추가합니다. http://zzangmyon.com/193 새 항목 추가에 관한 글입니다.
6.Add Existing Item : 프로젝트에 기존에 있던 항목을 추가합니다. 프로젝트 폴더에 복사본이 생기게 됩니다. 이때 추가될 수 있는 항목은 새 항목 추가에 있는 항목들 뿐만 아니라 이미지나 영상과 같은 다양한 파일이 있습니다.
7.Link to Existing Item : 프로젝트에 기존에 있던 항목을 연결합니다. 프로젝트 폴더에 항목에 대한 참조가 추가되고 원본 파일을 삭제할 경우 연결이 끊어지게 됩니다.
8.Add Reference : 프로젝트에 참조를 추가합니다.
9.Add Project Reference : 프로젝트에 프로젝트 참조를 추가합니다. 솔루션에 다른 프로젝트를 추가하면 프로젝트 참조가 가능한 목록이 뜨게 됩니다. 다른 프로젝트를 추가하지 않으면 이 메뉴는 활성화되지 않습니다.

10.Silverlight Project Settings : 실버라이트 프로젝트를 세팅합니다.

 - Use Application Library Cashing : 애플리케이션 라이브러리 캐시를 사용합니다. 애플리케이션을 브라우저에서 실행해야만 합니다.
- Enable Application Outside Browser : 애플리케이션을 브라우저 밖에서 실행할 수 있게 합니다.
- Application Requires Elevated Permission : 애플리케이션에서 권한 상승을 요청합니다.
- Preview Application Outside Browser : 애플리케이션을 브라우저 밖에서 실행하여 미리 볼 수 있습니다.
11.Build Project : 프로젝트를 빌드합니다. 한번 이상 빌드한 후에 다시 빌드를 할 경우에는 이미 컴파일된 소스 파일 중에서 변경된 사항이 없는 소스 파일은 컴파일을 다시 하지 않고 이전에 컴파일된 데이터를 사용하게 됩니다.
12.Rebuild Project : 프로젝트를 리빌드 합니다. 변경 사항이 있는지 없는지 여부에 관계 없이 최초 빌드할 때와 마찬가지로 모두 컴파일 합니다.
13.Clean Project : 프로젝트를 클린합니다. 빌드 중에 만들어진 임시 파일들을 모두 삭제합니다.
14.Run Project : 프로젝트를 실행합니다.

블렌드에서 처음 프로젝트를 생성할 때에는 어떠한 타입의 프로젝트를 생성할 것인지 결정해야 합니다. 앞에서 설명드렸듯이 블렌드에서는 WPF나 실버라이트, 스케치플로우, 윈폰7 등 다양한 프로젝트 타입을 생성할 수 있습니다. (윈폰7 프로젝트의 경우에는 윈폰7 개발 전용으로 블렌드를 따로 설치하여야 합니다.) 이번 스텝에서는 블렌드를 실행하여 프로젝트를 생성하는 방법을 알아보도록 하겠습니다.

◈ 블렌드 시작 창
익스프레션 블렌드를 실행하면 다음과 같은 시작 창이 나타납니다. 메뉴를 거치지 않고도 시작 창의 버튼을 클릭하여 프로젝트를 생성하거나 열 수 있습니다.

1.Projects : 새로운 프로젝트를 생성하거나 기존에 만들었던 프로젝트를 열 수 있습니다. 가장 최근에 작업했던 파일들의 목록이 보여집니다.
2.Help : 사용자가이드, 튜토리얼과 같은 프로그램을 다루는데 도움이 되는 정보들이 링크되어 있습니다.
3.Samples : 블렌드에 기본적으로 들어있는 샘플들을 열어볼 수 있습니다.
4.New Project : 클릭하여 새로운 프로젝트를 생성할 수 있습니다.
5.Open Project : 기존에 작업했던 프로젝트를 열 수 있습니다.

◈ New Project 창
블렌드 시작 창에서 [New Project] 버튼을 클릭하거나 [File]-[New] 메뉴를 클릭하면 [New Project] 창이 열립니다. [New Project] 창에서는 새로 만들 프로젝트의 타입과 이름 등을 설정합니다.

1.Project Types : 생성할 수 있는 프로젝트 타입을 보여줍니다. 블렌드에서는 실버라이트와 WPF 프로젝트를 생성할 수 있습니다. (윈폰7 프로젝트 제외)
2.Project List : 결정된 프로젝트 타입에서 조금 더 세분화된 프로젝트를 생성할 수 있습니다.

- Silverlight Application + Website : 실버라이트 프로젝트와 웹 프로젝트를 동시에 생성합니다.
- Silverlight Application : 실버라이트 프로젝트만 생성합니다.
- Silverlight Databound Application : MVVM 패턴을 기반으로 하는 데이터바인딩에 특화된 프로젝트를 생성합니다.
- Silverlight Control Library : 실버라이트의 컨트롤 라이브러리를 생성합니다.
- Silverlight SketchFlow Application : 프로토타입 제작을 위한 스케치플로우 프로젝트를 생성합니다.
3.Name : 프로젝트의 이름을 지정합니다.
4.Location : 프로젝트가 생성될 폴더의 경로를 지정합니다. [Browse] 버튼을 눌러 폴더를 검색하여 지정할 수 있습니다.
5.Language : 프로젝트에서 사용될 프로그래밍 언어를 선택합니다. 외국에선 Visual Basic을 사용하기도 하지만 국내에서는 대부분 Visual C#을 사용합니다. 그러나 이것은 개발자들이 사용하는 언어이며 디자이너들은 주로 XAML 이라는 마크업언어로 대부분의 UI를 표현하게 됩니다.
6.Version : 닷넷프레임워크의 버전을 선택할 수 있습니다.

블렌드스터디 & 강좌용 샘플로 룰렛을 한번 만들어 보았어요. 일정시간 눌렀다 떼면 랜덤하게 멈추게 되어있습니다.
 

[프로젝트 타입 : Silverlight 4]

안녕하세요. 짱묜입니다. 오늘은 텍스트에 이미지 배경을 넣어보도록 하겠습니다.

텍스트에 이미지 배경을 넣는 방법은 2가지가 있어요. 첫번째는 텍스트의 배경색을 이미지로 채워주는 방법이고, 두번째는 이미지를 텍스트의 Path로 Clipping 하는 방법입니다. 두번째 방법은 텍스트 내용을 고치기가 번거로우므로 첫번째 방법을 알려드리도록 할께요.

1. 프로젝트를 생성합니다.



2. 프로젝트가 생성되었다면 텍스트블럭을 하나 넣도록 합니다. 폰트의 사이즈 및 타입은 마음대로 하셔도 됩니다. 저는 "Arial Black" "40pt" 로 지정하였습니다.

       

3. 이미지를 준비합니다. 저는 여름이니 시원한 바닷물로..ㅎㅎ 다음과 같은 이미지를 준비하였습니다.


4. 텍스트블럭을 선택하고 Properties 패널 중 Brushes 패널이 있는데 4번째 "Tile Brush" 탭을 선택합니다.



5. 그리고 아래에 ImagesSource 부분의 버튼을 눌러 검색창에서 이미지를 선택합니다.



6. 이미지를 선택하고  OK 버튼을 눌러주세요.



다음과 같이 텍스트블럭의 Foreground에 바다 이미지의 타일 브러시가 채워졌나요?



7. 텍스트블럭을 보면 이렇게 글자에 이미지가 들어가게 됩니다.



8. 텍스트를 변경하여도 잘 적용이 됩니다.



간단하죠? ^^ 파일 첨부합니다. 모두 좋은하루 되세요!!

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

앞의 강좌에서 배경과 모션패스 부분은 다 만들었으니, 이제 반짝이는 빛을 만들어보도록 하겠습니다. 
유저컨트롤을 하나 생성합니다.

아마 사이즈가 굉장히 크게 생성이 되었을텐데요, 다음과 같이 유저컨트롤 레이어를 클릭하여 Height와 Width값을 35, 35 정도로 맞추어줍니다.



그런다음, 익스프레션 디자인 툴을 이용하여 빛을 그리도록 하겠습니다. 물론 디자인툴이 없는 분들은 블렌드로 그리셔도 무방합니다. (다만 ㅜㅜ 디테일하게 그리기가 쉽지않지요 ^^;;) 디자인툴을 열어 다각형을 그려주도록 합니다.

 

꼭지점이 7개이고, 내부로 깊이가 70% 파이게 만들어 주세요. :) 뭐! 원하시는대로 만드셔도 됩니다.

위와같이 2개의 별을 만들어 준 다음에 포갠 후, 작은 별을 살짝 회전해줍니다.

이렇게 만들어진 두개의 객체를 선택하여 복사한 후 블렌드에 가서 그리드 안에 붙여넣습니다. Export메뉴로 내보내도 되지만 Ctrl+C, Ctrl+V만으로도 붙여집니다. 단 좌표값을 잘 확인하세요 ^0^ 그리고 사이즈는 적절하게 맞추어줍니다.

이제 별이 빛나게 보이게 하기 위하여 스토리보드를 하나 만들어주도록 하겠습니다.



그리고 큰별과 작은별의 1.2초 되는 지점에서 키프레임을 생성하여 각각 360도, -360도 회전해 줍니다.



마지막으로 스토리보드를 계속 반복시켜 주도록 합니다~



이러게 완성되어진 유저컨트롤은 프로젝트 파일을 선택하여 빌드를 해주어야 메인 Window에 추가할 수 있습니다.



그리고 AssetLibrary에서 Custom Controls 탭을 선택하면 만들어진 유저컨트롤을 확인할 수 있을거에요.



자 이렇게 만들어진 유저컨트롤을 더블클릭하여 아까 만들어 둔 텍스트라인 패스 위에 놓은 다음 유저컨트롤과 패스를 동시에 선택하여 모션패스를 생성하여 줍니다.



이제 F5를 눌러 실행해 보면 다음과 같이 텍스트를 따라 빛나는 애니메이션을 확인할 수 있습니다. 

소스 첨부할께요. ^^ 잘 안되는 부분은 글을 남겨주시기 바랍니다. 

 

안녕하세요~ 부쩍 날씨가 따뜻해졌네요.. 워낙에 추운것을 싫어라하는 묜이지만, 따뜻해진 겨울에..지구온난화의 기상이변이 마구 다가오는것 같아서..이러다가 지구가 멸망하지는 않을까 걱정됩니다..ㅠㅠ;;

프로젝트 타입 : WPF

오늘은 텍스트를 따라 빛이 움직이는 애니메이션을 만들어 보도록 하겠습니다. 어제의 모션패스를 한단계 더 응용한 애니메이션인데요. 먼저, WPF 프로젝트를 생성합니다. 프로젝트 만드는 이미지는 생략할께요.^^

그리고 텍스트블럭(or 텍스트박스)에 원하는 텍스트를 써준 후 마우스 오른쪽을 클릭하여 텍스트를 패스로 변환해 줍니다.

위와 같이 텍스트가 패스로 전환 되었다면, Fill 부분은 없애주고 Stroke만 남겨서 글자의 테두리만 보여지도록 하겠습니다.



이제, 테두리만 남은 텍스트의 패스를 하나 더 복사해서 아래에 놓아줍니다.



그리고 Filp을 이용하여 Y축으로 텍스트의 방향을 뒤집습니다.

패스를 하나 더 복사한 것은 반사효과를 내기 위함이었거든요~ ^^  OpacityMask를 이용하여 효과를 내어보겠습니다. 아래에 놓인 복사된 패스를 선택하고 다음과 같이 OpacityMask에 그라데이션을 넣어줍니다. OpacityMask의 그라데이션에 들어가는 값은 어떤 색이던 상관없이 알파값의 영향을 받게 됩니다. 따라서 반사되어 비치는 효과를 위해서 제일 마지막 지점의 알파값만 70%로 맞추어주고 나머지 부분은 0%로 처리해줍니다.

자~ 텍스트의 라인과 반사효과가 잘 만들어졌나요? 다 되었다면 다음강좌에 이어서 하도록 하겠습니다.

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르 눌러 실행하도록 합니다. 생각했던데로 잘 튕겨지나요? ^_^