'실버라이트'에 해당되는 글 114건
- 2009/05/08 [DTEF2009] Dev&Tech 페스티벌 - 훈스닷넷 세미나 (실버라이트 & WPF) (2)
- 2009/04/10 [Expression Blend 기초강좌] Project & Item Creation - Silverlight in Blend 3 Preview (4)
- 2009/04/10 Silverlight 3 Beta Downloads
- 2009/03/12 [Expression Blend 활용강좌] 슬라이드 광고 효과내기 2 (16)
- 2009/03/12 [Expression Blend 활용강좌] 슬라이드 광고 효과내기 1 (1)
- 2009/01/07 익스프레션 블렌드 무료 특강 4차 (17)
- 2008/12/02 실버라이트 슬라이드 효과 시계 (6)
- 2008/11/19 [Expression Blend 활용강좌] 튕기는 글자 애니메이션 2 (10)
- 2008/11/19 [Expression Blend 활용강좌] 튕기는 글자 애니메이션 1 (6)
- 2008/11/18 [Expression Blend 활용강좌] 달리는 자동차
Project Type : Silverlight
Expression Blend 3 에서 추가할 수 있는 프로젝트와 아이템의 템플릿이 늘어났습니다. 갑자기 늘어난 템플릿에 당황스러운 분들도 계실것 같아서 간단하게 소개를 해 드릴까 합니다. 먼저 새 프로젝트를 생성하려고 하면 다음과 같은 창이 뜹니다.
Project Creation
1. Silverlight 3 Application + Website
 |
실버라이트 애플리케이션과 웹사이트가 같이 생성됩니다. html 페이지가 기본적으로 들어있는 폴더가 생깁니다.
 |
2. Silverlight 3 Application
 |
실버라이트 애플리케이션만을 생성할 경우에 선택합니다. 웹사이트가 들어있지 않은 프로젝트 정보가 보여질 것입니다.
 |
이번 업데이트가 이루어지면서 아이템 템플릿이 추가 되었습니다. 일단 위에 그림에서도 보여지듯이 실버라이트의 기본 컨트롤이 Page.xaml 에서 MainControl.xaml 로 바뀌었습니다. 새로운 아이템 템플릿을 어떠한 용도에 생성해야 하는지 알아보도록 하겠습니다.
Item Creation
1. UesrControl
객체화 하여 재사용 할 수 있는 단위의 컨트롤을 만들때 생성합니다. 예를 들어 웹사이트의 메인 페이지를 구성한다고 할 때, 상단 메뉴, 하단메뉴, 바로가기 메뉴 등을 유저컨트롤 단위로 나누어 만들 수 있습니다. 혹은 달력과 같은 애플리케이션을 만들 경우에는 반복되어 사용되는 날짜와 월과 같은 단위를 유저컨트롤로 나누게 됩니다. 유저컨트롤 안에는 다른 컨트롤이나 오브젝트들이 들어갈 수 있습니다.
 |
프로젝트를 살펴보면 UserControl1.xaml 이라는 유저컨트롤이 생성되었습니다.
 |
2. ChildWindow
이번에 추가된 템플릿입니다. 실버라이트 애플리케이션에서 팝업창으로 보여질 ChildWindow를 생성합니다.
 |
항목을 선택하면 아트보드에 창이 하나 생성되어 있는 것을 확인할 수 있습니다. OK와 Cancel 버튼이 기본으로 들어있습니다.
 |
3. Resource Dictionary
이것도 WPF에서만 있던 템플릿인데 이제 실버라이트에도 생겼네요 :) 스타일과 같은 리소스를 저장하여 갖다 쓸 수 있습니다. 기존에는 리소스를 해당 페이지 일일이 넣어주거나 app.xaml 에 몰아서 저장해야 했기 때문에, 스타일 관리가 쉽지 않았습니다. 그러나 Resource Dictionary를 쓰면 용도별로 리소스를 저장해서 참조하면 되기 때문에 편리하게 관리할 수 있습니다.
 |
다음과 같이 ResourceDictionary.xaml 파일이 생성된 것을 확인할 수 있습니다.
 |
그러나 ResourceDictionary 파일은 실제로 레이아웃을 구성하는 코드가 아니기 때문에 디자인 뷰어로 보거나 수정할 수 없습니다. 수정을 하려면 적용된 컨트롤의 Edit 모드로 들어가서 수정해야 합니다.
 |
4. Page
프레임에서 호출할 수 있는 컨텐츠의 단위 입니다. 예전에는 이 Page가 실버라이트의 기본 단위였고 블렌드에서 추가 생성할 수 없었는데 이제 추가 생성이 가능합니다. 웹사이트를 만든다면 서브페이지를 이러한 Page 단위로 만들면 됩니다. .
 |
Page.xaml을 생성하면 다음과 같이 파일이 생성됩니다. LayoutRoot 안에는 유저컨트롤과 마찬가지로 각종 컨트롤이나 오브젝트가 들어갈 수 있습니다.
 |
5. Class
클래스를 생성합니다.
 |
클래스를 생성하면 다음과 같이 Class.cs 라는 파일이 생성되고 C# 코드로 이루어진 파일이 보여집니다. 디자이너가 생성할 일은 거의 없겠죠? :)
 |
이렇게 생성할 수 있는 프로젝트와 아이템의 성격이 각각 다르기 때문에 용도에 알맞게 생성해야 합니다.
날씨가 갑자기 더워졌어요 ㅎㅎ 저는 사무실을 이사했는데 청계천과 가까워 점심먹고 산책을 다니고 있습니다.. 이것도 날이 더워져 얼마 못할듯 -_-;; 다들 춘곤증의 압박을 이겨내시기 바랍니다. 한 주 마무리 잘하시기 바랍니다.
http://go.microsoft.com/fwlink/?LinkID=143433
Silverlight™ 3 Tools Beta 1 for Visual Studio 2008 SP1
http://www.microsoft.com/downloads/details.aspx?FamilyId=11dc7151-dbd6-4e39-878f-5081863cbb5d&displaylang=en
Silverlight 3 Beta Runtime을 설치하면 또 지난 버전들은 보이지 않을까..Silverlight 3 해보려고 깔았다가 Silverlight 2 로 된 것들 다 못보게 될까봐 걱정했습니다. 더욱이 Silverlight 2 버전으로 작업해서 올렸던 것들도 다시 올려야 할까 참 걱정이 앞섰는데.. 세상에나~~!!! 제눈을 의심했습니다..Silverlight 3 beta Runtime를 설치해도 2 버전들이 잘 보이더군요..ㅎㅎ 사실 이번 3 버전 중에 제일 마음에 드는 부분인 것 같습니다.. :)
다음과 같이 개체가 순서대로 쌓이는 스택패널을 하나 생성해 줍니다. 개체의 정렬은 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안녕하세요. 벌써 봄 기운이 느껴지네요. 좀 있으면 날씨가 따뜻해져서 소풍가기 좋을 것 같아요 ^^;; 오늘은 오랜만에 강좌를 씁니다.
웹사이트를 돌아다니다 보면 슬라이드 효과를 내는 광고가 많이 있는데요. 오늘 실버라이트로 광고를 만들어보도록 하겠습니다. 작업도 눈이 즐거워야 하는법!! 저는 요즘 한창 잘나가는 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개를 만들어 해당 버튼에 오버했을 때 이미지가 바뀌는 기능도 넣어보겠습니다. 다음 페이지에서 진행할께요 ^^
안녕하세요. 새해가 밝았습니다. ^^ 신년을 맞이하여 무료특강을 다시 열게 되었습니다. 1월에 세미나와 명절 등 행사가 많은 관계로 17일 하루만 진행합니다. 2월에도 진행할 예정이구요. 많은 참여 부탁드립니다~ 아참,, 새해 복 많이 받으세요 ^0^
(현재 지난해 대기자가 10명정도 계신걸로 알고 있습니다. 이번에도 신청자가 다 차서 신청을 못하신 분들은 댓글 남겨주시면..인원 파악 후 다음 특강을 개설하도록 하겠습니다)
|
아이고..교육동의서 부분이 자꾸 에러나네용..
http://conso.co.kr/bbs/board.asp?mode=view&board_idx=794&GotoPage=1&b_code=dt&column=b_title&searchString=
링크 걸께여 -ㅅ-
제2회 훈스닷넷 실버라이트 컨퍼런스 기념입니다 후훗~~
제작 과정은 컨퍼런스를 위하여 남겨두죠 ^_^;
13. 다시 1.5초가 되는 시점에 플레이헤더를 놓고 오브젝트의 위치를 10번보다 조금 높게 이동시킵니다. 또는 Y 좌표값에 105을 입력합니다.
14.그리고 모든 오브젝트의 키프레임을 선택한 후(11번과 같이) 가속도를 줍니다. y2에 1을 입력.
15. 모든 오브젝트를 선택한 후 1.9초가 되는 시점에 플레이더를 놓고 아래로 이동시킵니다. Y 좌표값에 135를 입력합니다.
16. 1.9초 지점의 키프레임을 선택한 후 가속도를 줍니다. x2의 값에 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.
 |
4.
 |
5.
 |
6. 한 글자를 이루는 패스가 2개 이상 일 경우 하나의 그룹으로 묶어줍니다.
 |
 |
7.
 |
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도 입력합니다.
 |
 |
 |
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(); } } } |
예제는 다음 페이지에서 확인하세요.
