WPF 애니메이션 썸네일형 리스트형 [Expression Blend WPF강좌] Stack 패널을 이용하여 메뉴바 만들기 - 1 이번강좌는 Stack Panel을 이용하여 옆에서 슬라이드 되어 나오는 가로 메뉴를 만드는 것이다. 예전 강좌 때 [Grid]패널과 [Canvas]패널 강좌를 올렸었는데, 그때는 그것만 주구장창 썼기 때문에 다른 것은 Skip하고 지나갔었다. Stack 패널은 이런 아이콘을 가진 레이아웃 패널이다 이 패널의 특징은 이 패널(그룹)안으로 들어오는 모든 객체들은 전부 일렬로 정렬된다. 그래서 이 Stack Panel을 선택하고 속성창에서 Orientation 을 Vertical :세로 로 할지 Horizontal: 가로 로 할지 설정을 하면 객체들이 세로로 혹은 가로로 무조건 한줄로 정렬된다. 레이아웃 패널의 대략의 개념을 알고 싶으면 [Grid] 패널 강좌 때 설명을 간략히 했는데, 아직 레이아웃 패널의 .. 더보기 [Expression Blend WPF강좌] 버튼에 애니메이션을 적용해보자 예전 강의 때 버튼도 만들어 보았고, 애니메이션도 만들어 봤을 겁니다 :) 이 두개를 오늘 활용하는 의미로, 버튼에 + 애니메이션을 주어 기존에 마우스오버/마우스클릭 시 좀 더 효과적으로 보이도록 적용해 보도록 하겠습니다. 1) 먼저 각자의 취향대로 버튼을 만들어봅시다! (다들 없으시다면 저번 강의를 도움 삼아 만들어주시고요~) 저는 이렇게 간단하게 사각형 하나에 블링한 효과 하나 넣었습니다. :) 도구>버튼만들기>버튼 이름 지정하여 확인 눌러줍니다. 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) 인터렉션 창에서 + 버튼을 클릭하면 [스토리보드 만들기] 라는 창이 뜹니다. 자신이 원하는 애니메이션의 이름을 쓰고 확인 버.. 더보기 이전 1 다음
