Expression Blend 썸네일형 리스트형 [Expression Blend WPF강좌] 기본 - Path의 개념 및 사용법 이번 시간 에서는 다시 돌아가는 의미로 Path에 대한 기본적인 강좌를 하겠습니다. 디자이너들은 path에 대한 개념을 기본적으로 다 알지만, 개발자분이나 아예 모르시고 시작하시는 분들에게는 겉보기에 Retangle과 Path는 같아보이기 때문입니다. 옆에 보면 두 개의 사각형이 같아 보입니다. 하지만 하나는 패스로 변형되어 있는 사각형입니다. 가장 차이를 알려면 하얀 화살표 버튼 (Direct Selection)으로 꼭지점을 선택해 보면 확연히 느껴집니다. 그냥 정 사각형은 꼭지점을 눌러도 아무런 반응이 없는 반면 Path로 된 사각형은 꼭지점에 사각형이 생기면서 선택하고 움직이면 다른 모양 으로도 변형이 가능합니다. 대부분 기본도형이 아닌 모양들은 전부 Path라고 보시면 됩니다. 일러스트라던지 디자.. 더보기 [Expression Blend WPF강좌] 타일 브러쉬 리소스 만들기 안녕하세요! 오늘은 실버라이트에 없는 기능을 강의하려고 합니다. 바로 브러쉬 리소스 > Drawing Resource 입니다. 전에는 별로 실버라이트가 끌리지 않아서 잘 살펴보지 않았는데, 이번에 실버라이트를 보고 없는 걸 발견하게 되었네요ㅎ 드로잉 브러쉬 혹은 타일브러쉬는 어디서 보실 수 있냐면 바로 이 버튼입니다. 오늘 배우실 예제는 밑에 있는 그림입니다. 홈페이지에 백 그라운드로 배경화면을 깔거나 할 때 주로 쓰는 방법입니다. 배우시면 유용하게 쓰실 수 있을 듯 합니다. 1) 먼저 백 그라운드로 쓸 타일을 먼저 만들도록 하겠습니다. 저는 귀여운 아이 얼굴로 그려보도록 하겠습니다 :) 원 하나를 오른쪽 클릭 > 패스 > 패스로 변환 한 후 꼭지점을 눌러 얼굴 모양으로 만들어 주시고, 그 위에 눈 두개.. 더보기 [Expression Blend WPF강좌] 버튼에 애니메이션을 적용해보자 예전 강의 때 버튼도 만들어 보았고, 애니메이션도 만들어 봤을 겁니다 :) 이 두개를 오늘 활용하는 의미로, 버튼에 + 애니메이션을 주어 기존에 마우스오버/마우스클릭 시 좀 더 효과적으로 보이도록 적용해 보도록 하겠습니다. 1) 먼저 각자의 취향대로 버튼을 만들어봅시다! (다들 없으시다면 저번 강의를 도움 삼아 만들어주시고요~) 저는 이렇게 간단하게 사각형 하나에 블링한 효과 하나 넣었습니다. :) 도구>버튼만들기>버튼 이름 지정하여 확인 눌러줍니다. 2) 버튼을 클릭했을 때나 롤 오버 했을 때 애니메이션이 나와야 하기 때문에 버튼 우클릭 > 컨트롤 구성요소 편집 > 템플릿 편집하여 버튼 안으로 들어갑니다. 버튼 안으로 들어가면 아까 만들었던 버튼들의 요소가 보입니다. 저는 사각형 두개가 보이네요 :) .. 더보기 [Expression Blend WPF강좌] zindex의 기능에 대하여 알아보자. 이번 시간에는 zindex에 대해서 알아보도록 하겠습니다. zindex란 뭘까요? 실버라이트에도 있고 WPF에도 이 기능이 있습니다. 아래 화면을 보시면 속성 > 레이아웃에서 쉽게 보실 수 있습니다. zindex는 화면에 보여지는 요소들, 객체들이 z축의 순서를 정해주도록 설정하는 기능입니다. x축은 왼/오른쪽, y축은 위/아래, z축은 멀고/가까움 이라고 보시면 됩니다. 미술시간에 꼭지점을 한 가운데 찍고 X자로 선을 그은다음 그 선 사이에 나무를 그려서 가로수길을 만든 일 혹시 기억 나시나요? 그것도 z축을 이용해서 나무의 멀고 가까움을 그린 것과 마찬가지입니다. Blend에서는 이 zindex에 숫자를 높게 설정해 줄 수록 레이어상으로는 가장 맨 밑에 깔려 있는 요소라 할지라도 맨 위에 올려져 있게.. 더보기 [Expression Blend WPF강좌] 윈도우 창 디자인 하기 - 2 저번 강의에 이어서 진행하겠습니다. :) 각각의 버튼에 1) 타이틀을 잡고 움직이면 이동하는 코드 2) 클로즈 버튼을 눌렀을 때 윈도우가 닫히는 코드를 넣어보도록 하겠습니다 :) 코딩을 넣을 때는 비주얼 스튜디오라는 프로그램을 쓸 것 입니다- (플래쉬에서 만들고 드림위버에서 집어넣고 하는 경로처럼, 블랜드에서 만들고 비주얼스튜디오에서 코드를 넣어줍니다.) 그렇기 때문에 이 강좌를 하시려면 비주얼 스튜디오가 깔려 있다는 전제 하에 작업하셔야 합니다. ------------------------------------------------------------------------------------------------------------------------ 1) 먼저 클로즈 버튼에 프로그래밍을 해보도.. 더보기 [Expression Blend WPF강좌] 윈도우 창 디자인 하기 - 1 첫 강의 때 말씀 드린듯이 블랜드에서 1) WPF응용프로그램 (exe) - 윈도우에서 실행 2) 실버라이트 응용프로그램 - 웹에서 실행 을 두가지로 나뉘는데요. 제가 여태까지 한 것은 WPF응용프로그램이라는 걸 아시죠? :) 기존의 윈도우 창은 이렇게 생겼는데요, 이번강좌에서는 윈도우 창을 자신이 원하는 모양대로 바꿔보도록 하겠습니다. :) 1) 파일 > 새 프로젝트 > WPF응용프로그램 선택 후 확인하여 새 윈도우 창을 만듭니다. 새 창에는 여태까지 자세하게 신경은 안썼지만, 윈도우로 열리는 창이기 때문에 오른쪽 상단에 자세히 보시면 밑의 그림과 같이 윈도우의 모양이 보입니다. 보이시나요? 먼저 윈도우를 디자인 하기 전에 이걸 없애야 하겠죠? :) 2) 레이어에서 제일 상위 레이어인 윈도우를 선택합니다.. 더보기 [Expression Blend WPF강좌] 주위를 뱅뱅도는 생쥐 애니메이션 만들기 :) 안녕하세요, 저번에 공 튀기는 예제로 키 프레임을 클릭하여 애니메이션을 주는 방법을 배웠습니다. 이번에는 사방으로 돌아다니는 쥐 애니메이션으로 패스(Path)를 따라서 움직이는 방법을 배우도록 하겠습니다. 1) 파일 > 새 프로젝트 > WPF(.exe)파일로 엽니다. 원을 하나 그려줍니다. 그리고 펜툴로 쥐의 꼬랑지를 쬐그맣게 그려줍니다. 원의 색을 바꿔주려면 오른쪽의 [속성]창에서 바꿔 주시는 건 아시죠? :) 그리고 원을 두개 그려서 쥐의 양쪽 눈을 만들어 줍니다. 2) 쥐의 귀는 사각형과 원을 포갠 뒤에 오른쪽클릭 > Combine > Subtract 를 누르면 남게 됩니다. 이때 두개를 동시선택하더라도 반드시 원을 클릭한 상태에서 실행하셔야 합니다. 그렇지 않으면 위의 그림과 같이 남는 경우가 되.. 더보기 [Expression Blend WPF강좌] 간단한 애니메이션 만들기- (2 스마일 공 튀기기) 이어서 애니메이션 진행하겠습니다. 저번 강좌에서 공이 어떻게 움직이는 지에 대한 애니메이션 강좌를 했는데요. 그것을 참고로 하여 공을 좀 더 수정해보겠습니다. 1) 애니메이션이 녹화되어 있는 상태에서 반드시 시작한다는 것을 잊지 마세요 :) 타임라인에 찍혀 있는 하얀 키를 클릭하면 옆의 속성 창이 바뀌는 것을 보실 수 있습니다. 옆의 창은 속성 및 가속/감속 같은 그래프가 있는데요. 바로 이 그래프를 이용해서 가/감속을 하게 됩니다. 공이 튀겨서 올라가는 1초/3초/5초의 키를 수정하게 될 건데요. 먼저 1초 키를 누른 상태에서, 그래프 오른쪽 맨 위에 있는 포인트를 다음그림과 같이 휘어줍니다. 공이 처음에 튀겨 올라갈 때는 속도가 빠르다가, 점점 올라가면서 속도가 느려지기 때문에 이런 그래프가 나오게 .. 더보기 [Expression Blend WPF강좌] 간단한 애니메이션 만들기- (1 스마일 공 튀기기) 전 강좌에서는 무비클립과 비슷한 역할을 하는 UserControl을 해보았고, 편리한 바인딩 기능이 있는 버튼까지 만들어 보았습니다 :-0 이번 강좌에서는 애니메이션에 대해서 다루어봅니다. 일단 전 강좌에서 유저컨트롤로 만들었던 스마일을 가져와서 스마일에 애니메이션을 넣어보겠습니다. (유저컨트롤로 만드는 방법은 이미 강좌로 올라와 있으니 확인하세요) 1) 자산라이브러리 > 사용자 지정 컨트롤 에서 자신이 만든 유저컨트롤을 화면으로 가져 옵니다. 그리고 사각형으로 바닥을 하나 그려서 레이어를 맨 위로 올려줍니다. (배경을 그리기 위한 작업) 그리고 스마일을 바닥위에 얹어줍니다. 2) 인터렉션 창에서 + 버튼을 클릭하면 [스토리보드 만들기] 라는 창이 뜹니다. 자신이 원하는 애니메이션의 이름을 쓰고 확인 버.. 더보기 [Expression Blend WPF강좌] 하나의 버튼 모양으로 여러색의 버튼 만들기 (버튼 바인딩) 이번에는 하나의 버튼을 가지고 여러색으로 활용할 수 있는 바인딩을 강좌하겠습니다 - :) 저번 강좌에서 보여줬던 버튼을 다시 활용해 보도록 하겠습니다- 블랜드에서 플래쉬의보다 더 좋은 기능을 소개할 텐데요. 장점중의 하나가 바로 바인딩 기능입니다. (두둥) 위의 그림처럼 플래쉬에서 버튼을 만들었을 경우, 똑같은 모양을 하고 있지만, 다른 속성이 하나라도 있을 경우 각각 버튼을 만들었었는데요. (총4개) 블랜드에서는 모양이 같은 버튼을 하나만 만들면, 그것만 가지고 다르게 속성을 줘서 응용할 수 있다는 점입니다. (총1개) 그럼 한번 직접 만들어 보도록 하겠습니다. 1) 버튼을 우클릭하고, 컨트롤 구성요소> 템플릿 편집을 클릭하여 버튼 속성 안으로 들어갑니다 - 2) 파란색 사각형의 레이어를 클릭하면 오른.. 더보기 이전 1 2 3 4 5 다음
