본문 바로가기

실버라이트

[Expression Blend 3] Resource Dictionary 사용하는 방법에 대하여 알아보자. -1 안녕하세요, 정진희입니다. 이번 강좌는 리소스 사전 (Resource Dictionary) 를 사용하는 방법에 대하여 알아보도록 하겠습니다. Expression Blend에서 만들 수 있는 WPF와 실버라이트 프로젝트 둘 다 해당되는 내용입니다 지난 버전에는 실버라이트가 리소스 사전이 없었는데 이번에 생겼네요. 들어가기 전에 리소스 사전이란 무엇일까요? 디자이너는 Blend 프로그램을 가지고 컨트롤, 모양, 색상 등을 성심성의껏 만듭니다. 그런데 이렇게 어렵게 만든 컨트롤들을 다른 곳에서도, 혹은 저장을 따로 해놔서 일러스트 파일이나 포토샵 파일처럼 저장해서 갖다 쓰고 싶은 경우가 있을텐데요. 이럴때 쓰는 것이 바로 리소스 사전입니다. 1) 이번 강좌는 WPF이든 Silverlight이든 둘 다 상관은 .. 더보기
[Silverlight 3] Projection 값을 이용하여 원근감있는 메뉴를 만들어보자 - 2 이어서 진행하도록 하겠습니다. 저번 강좌까지 했던 작업은 메뉴버튼 클릭 시 접혀있던 서브메뉴가 나오도록 하기 위한 형태를 만들었고요. 이번시간에는 State 설정에 Projection 애니메이션을 추가하여 메뉴가 움직이도록 진행해 보겠습니다. 1) 저번시간까지 준비한 작업을 가지고 옵니다. ① 상태에서 그룹 State를 클릭하여 그룹을 만들고 ② 다시 폴더 모양을 클릭하여 그룹안에 State를 두개를 추가합니다 ③ 두가지의 상태를 만들어줍니다. 하나는 Menu로 돌아오기 위한 애니메이션과 SubMenu로 가기 위한 애니메이션입니다. 그룹이름은 자신이 임의로 지정해주어도 됩니다. 저는 MenuGroup으로 했습니다. 2) ① SubMenu State을 클릭하고 ② 움직일 대상 Stack Panel을 선택한.. 더보기
[Silverlight 3] Projection 값을 이용하여 원근감있는 메뉴를 만들어보자 - 1 안녕하세요, 정진희입니다. 요새는 계속 실버라이트에 대한 강좌를 쓰고있는데요. 같은 익스프레션 블랜드로 작성하지만 WPF랑 실버라이트가 보이는 메뉴얼이 좀 다르다보니 왔다갔다 하니 헷갈리기도 하네요, ㅎㅎ 오늘은 실버라이트에서만 작업할 수 있는 3D 원근감처럼 보이기 위한 속성, Projection 속성을 가지고 원근감 있는 실버라이트 메뉴를 만들어보도록 하겠습니다. at First, What's mean perspective 3D? 중학교 시절 미술시간에 이런 것 많이 그려봤을 텐데요. 원근감 있는 사각형, 혹은 물체를 그리기 위해 1점 투시, 2점투시, 3점 투시로 하여 밑의 그림처럼 그립니다. 전 이런 거 디자인 제도 할 때 했었는데요, 제품을 입체적으로 보이기 위해서 이렇게 그리곤 했었습니다. (.. 더보기
[Silverlight 3] Visual State Group으로 사진 갤러리 만들기 - 2 이어서 진행하도록 하겠습니다. 1. State를 4개 추가한 상태에서 ① 첫번째 상태를 클릭하여 녹화상태로 합니다. 이미지를 ②처럼 전체 선택 하신다음 Width ③ 값을 0으로 줍니다. 2. 이렇게 이미지 4장 모두 width값을 0을 주었는데요. gotopage1을 클릭할 때 나타나는 이미지는 다시 원래 사이즈로 640 을 입력해 줍니다. 3. 나머지 state에도 같은 방법으로 적용시켜줍니다. gotoPage2 선택-> 전체 이미지 width사이즈 0 -> 해당 이미지 사이즈(Page2) 다시 640으로 설정 gotoPage3 선택-> 전체 이미지 width사이즈 0 -> 해당 이미지 사이즈(Page3) 다시 640으로 설정 gotoPage4 선택-> 전체 이미지 width사이즈 0 -> 해당 이미.. 더보기
[Silverlight 3] Visual State Group으로 사진 갤러리 만들기 - 1 안녕하세요? 정진희 입니다. 이번 시간에는 정~말 오랫만에 실버라이트로 제작을 할까 하는데요. Visual StateGroup의 기능으로 실버라이트 사진슬라이드 갤러리를 만드는 시간을 가져보도록 하겠습니다. 먼저 예제를 보시고 시작하시길 바랍니다. 1. 포토샵에서 Psd 파일을 만듭니다. 저는 다음과 같이 사진갤러리에 쓸 4장의 사진을 layer에 추가하였습니다. (사이즈는 640x300정도) 그리고 이름을 각각 page1,2,3,4로 지정하고 page라는 이름으로 save하였습니다. 2. Expression 블랜드에서 다음과 같이 실버라이트로 프로젝트를 생성합니다. 이름을 그림과 같이 설정하여 줍니다. 그리고 Usercontrol 을 선택하면 기본적으로 640x480으로 사이즈가 설정되어있는 것을 높이.. 더보기
실버라이트로 만든 회사 홈페이지 www.opensg.net 처음으로 실버라이트로 홈페이지를 만들어보았습니다. 스토리보드 및 여러개를 개발자에게 요청 및 수정을 부탁하여 만든 것입니다. 회사의 특성상 눈에 보이는 포트폴리오 및 이미지 등이 없어서 어떻게 컨셉을 만들까에 많은 시간이 들어갔네요. 역시 액션스크립트에 대한 신경을 안써서 너무 편했네요 더보기
[Expression Blend3 강좌] 실버라이트로 버튼 스타일링 따라하기 안녕하세요, 정진희 입니다. 오랫만에 글을 올립니다. 오늘은 유명한 웹 사이트의 버튼 스타일을 따라해 보는 시간을 가져보도록 하겠습니다. 바로 위에 보이시는 버튼 처럼 만들어 보도록 할 텐데요. 웹사이트 : http://www.hlfragrance.com 에서 보시면 버튼의 롤오버와 롤아웃의 움직임을 보실 수 있습니다. 그럼 새로 런칭한 Expression Blend3 > 실버라이트 3에서 만들어 보도록 하겠습니다. 1) New Project를 열어 실버라이트 파일을 하나 생성합니다. 저는 프로젝트 명을 다음과 같이 지정하였습니다. 그리고 OK를 눌러줍니다. 2) 새 파일에서 Rectangle을 하나 그려줍니다. 그리고 그라데이션으로 설정해 줍니다. 3) 버튼 꼭지점을 둥글려주기 위해서 RadiusX와 .. 더보기
7월7일 2주 [디자이너가 만드는 WPF 프로젝트 스터디] 자료 및 후기 2주 차 [WPF와 실버라이트 개념잡기] 라는 제목으로 비교적 기본적인 내용을 진행하였는데도 불구하고 많은 분들이 오셔서 감사할 따름입니다 ^^ 그래서 스터디 내내 흥분하며 진행을 해서 정보전달에 있어 자료 첨부와 더불어 약간의 글을 더 써보도록 합니다. 1. WPF와 실버라이트는 익스프레션 블랜드 라는 같은 프로그램을 사용하고 있음에도 불구하고 전혀 다른 작업방식과 아웃풋이 나옵니다. 그래서 처음 작업하실 때 내가 웹으로 구현할 것인지 윈도우상에서 구현할 것인지에 대해 먼저 생각해야 합니다. 프로젝트가 경량을 원하고 배포가 중요하면 실버라이트로 웹에서 구현하여 접근성이 쉽도록 만듭니다. 아니면 제한된 사용자가 정보를 다양하게, 많이 보여준다면 WPF로 exe파일을 설치하여 안정성있게 만들도록 합니다. .. 더보기