본문 바로가기

Expression Blend 3

[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] 음악 플레이어를 만들어보자 ! 안녕하세요? 정진희 입니다. 홈페이지를 만들다보면 배경음악 깔고 싶을때가 있는데요. html에서는 embed를 이용해서 간단하게 했었는데, 실버라이트에서는 어떻게 해야할까요? 디자이너분들은 많이 궁금해 하실 것 같은데요. (저만그런가요?-_-a) 이번시간에는 버튼 on/off를 이용하여 on버튼이 클릭이 되었을 때 실행되고 off를 클릭했을 때 실행이 멈추도록 만들어보겠습니다. 1) 익스프레션 블랜드에서 실버라이트 프로젝트로 파일을 하나 만듭니다. 이름은 임의로 정해줍니다. 2. 프로젝트가 생성이 되었습니다. Usercontrol의 사이즈를 좀 작게 줄여보도록 하겠습니다. 저는 300x200으로 하겠습니다. 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으로 사이즈가 설정되어있는 것을 높이.. 더보기
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 5 안녕하세요. 정진희 입니다. 저번시간에는 스케치 플로우에 애니메이션을 추가하는 방법에 대해서 알아보았습니다. 이번시간에는 만들어진 스케치 플로우에 어떻게 피드백 하는지에 대해서 알아보도록 하겠습니다. 저번시간에 만든 프로토 타입을 가져와보도록 하겠습니다. 1) F5를 클릭하여 프로젝트를 실행하면 다음과 같이 화면이 뜨게 됩니다. 실버라이트로 스케치플로우를 만들었을 경우에는 웹으로 뜨게 되지만, 저는 WPF 스케치 플로우를 만들었기 때문에 다음과 같이 윈도우 화면으로 오픈되었습니다. 1) 현재 오픈되어 있는 화면에서 연결된 링크나 스토리보드 등을 탐색하고 클릭할 수 있도록 보여지게 됩니다. 2) 사용자의견, 현재 페이지에 피드백을 남길 수 있도록 하는 패널입니다. 의견을 타이핑할 수도 있고, 펜으로 직접 .. 더보기
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 4 안녕하세요, 정진희입니다. 저번시간에는 맵을 Link 하는 기능을 배워보았습니다. 이번시간에는 프로토타입에 좀 더 직관적으로 보이게 하기 위하여 스케치 플로우에 애니메이션을 추가하는 방법에 대하여 알아보도록 하겠습니다. 먼저 저번강좌까지 만든 프로젝트를 블랜드에서 열고, 애니메이션을 줄 페이지를 선정해보도록 하겠습니다. 저는 메인페이지에 애니메이션을 넣어 효과적으로 보이도록 해볼텐데요. 다음 그림과 같이 메인 페이지가 로드 되었을 때 순서대로 화면에 나타나도록 하겠습니다. 1) Map Panel에서 Main을 더블클릭하여 아트보드에 나타나도록 합니다. 스토리보드를 생성하시려면 상단에 나타나는 스케치 플로우 애니메이션의 +버튼을 클릭하면 스토리보드가 작성됩니다. +버튼을 클릭하면 애니메이션 녹화가 시작되었.. 더보기
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 3 안녕하세요. 정진희입니다. 저번 시간에는 스케치 플로우에서 Map Panel을 이용하여 프로토 타입의 플로우 페이지를 만들어 보았고, 각각의 페이지를 SketchFlow가 제공하는 Control을 이용하여 화면을 구성해 보았습니다. 이번 시간에는 각각의 페이지를 잇는 작업을 해보도록 하겠습니다. 플로우 링크의 방식은 다음과 같습니다. 로그인 - 메인 - 서브 - 서브4에서 로그인으로 돌아가는 방식으로 연결해 주도록 하겠습니다. 저번시간에 작업한 프로젝트를 가져와서 사용하겠습니다. 1) Map Panel에 Login Map을 더블클릭하면 더블클릭이 나타납니다. 여기서 OK를 클릭하면 Main이 나타나도록 링크시키겠습니다. 2) OK 버튼 우클릭 - 탐색 (영어로는 Navigate to) - 링크 걸어야 할.. 더보기
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 2 안녕하세요, 정진희입니다. 저번에 이어 진행하도록 하겠습니다. 저번시간은 스케치플로우에 하단에 위치하고 있는 Map으로 페이지 및 전체 어플리케이션의 플로우를 만들어보았습니다. 이번 시간에는 사전에 만든 플로우 스케치를 가지고 아트보드에서 각 페이지 구성을 해보도록 하겠습니다. 임의로 어플리케이션의 플로우 및 구조를 생각해보고 시작해볼텐데요. 자신이 만들 어플리케이션이 어떤 순서로 진행될 것인지 아이디어를 직접 스케치를 합니다. 러프하게 그린 스케치를 보시면 로그인 화면에서 시작 -> Main -> Sub 1/2/3/4가 있고 Sub4를 클릭하면 로그인 페이지로 다시 돌아가는 맵입니다. 이것을 바탕으로 스케치 플로우를 제작해 보겠는데요. 저번시간에 이미 맵 패널에서 만들어 보았기 때문에 맵은 다 그리실 .. 더보기
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 1 안녕하세요. 정진희 입니다. 이번강좌는 블랜드 3에서 set로 같이 포함된 +SketchFlow 에 대해서 알아보도록 하겠습니다. 스케치 플로우는 프로젝트를 수행하기 전에 기획하는 단계의 스케치를 좀 더 쉽고, 소통이 가능하도록 프로토 타입을 만드는 것을 도와주는 프로그램입니다. 프로그램을 제작할 경우 어떤 단계로 프로세스를 진행하는지 버튼을 눌렀을 때 어떤 경로로 가게 되는지 등을 기획자 및 개발자도 스케치 플로우를 사용하여 쉽게 그릴 수 있습니다. 프로토타입 작업에 들어갈 시에는 대부분 손으로 스케치 하면서 회의를 했었고, 그것에 대한 공유를 다시 컴퓨터로 글로 적어서 (아니면 스캔을 해서) 한 것을, 이 프로그램으로 이용하면 피드백과 문서 작업을 편리하게 할 수 있습니다. 한번 파일을 열어보도록 하.. 더보기

티스토리툴바