2008/04/18 16:59 Expression Blend
3. Expression Blend_Motion Button 만들기
쫘쫜~~!! ww
아주 깜찍스러운것을 만들었습니다. 이름하야
"정말이예요, 옆에서 두눈뜨고 지켜보는데 아주 머리에 지대로 쏙쏙들어오는게 미치겠더라구요" 버튼입니다.ㅜ.ㅜ.ㅜ.ㅜ.ㅜ
사실 어제 저녁 세미나에서 이것저것 얻어듣고는 "아항, 그럼 이런거 한번 해볼까?" 해서 백만가지 구상을 하고서는 아침에 상콤한 맘으로 회사에 출근 했었더랬습니다.
"Hi~ Blend, 오늘은 아주 멋진걸 만들거야.
버튼을만들고 그 버튼을 누르면, 무비가 실행 되는거지w Flash는 뚝딱 만들겠지만 넌 어떠니? 무비심볼처럼 여러무비들을 모아서 그걸 또 심볼로 만들 수 있겠니? 그럼 그 무비심볼을 버튼으로 사용할 수 있겠니? 아님, 이벤트를 가질 수 있겠니?"
자, 결국은 했습니다........ 회사 팀장님께서 하셨습니다. ㅠ,ㅠ 작업물의 내용은 이렇습니다.
----------------------------------------------------------------------
1. 버튼에 MouseEnter를 합니다. 2. 나무가 자라서 잎이 나옵니다.
3. Press 버튼 합니다. 4. 나뭇잎이 움직거립니다.
4. MouseLeave를 합니다. 5. 나무가 사라집니다.
----------------------------------------------------------------------
자, 간단하죠? (ㅋㅋ 두고보라지..) 우선, Expression Design으로 나무를 그린다음 Blend로 가져 옵니다. 그런데 마우스가 올려질때 실행될 무비는 좀 특별한데요, 나무가 자라난 후 잎이나야 합니다. 따라서 나무와 잎들을 따로 가져오는데요, 후에 나뭇잎은 크기도 각기다르고 Click했을때,움직거리기도 하기때문입니다.
그럼 나무를 보죠, 나무는 2장의 백터이미지로 되어있습니다. 나무는 그냥 커지는 모습만 내면 됩니다. 별다른건 신경 안쓰구요, 다만 중심점을 아래중간으로 맞춰줘야 땅에서 자라나는듯 보이겠죠?
자, 오른쪽 Properties 탭에 보시면 Transform속성을 지정할 수 있는창이 보이는데요, X , Y를 지정해주면 RenderTrandsformOrigin에 자동으로 표시되어 집니다. 한가지, 수치를 표기하는 방법은0~1까지 입니다. 뭔가 '100'이라는 숫자로 작업을 해와서 그런지 전 약간 낯설었습니다.
자, 그럼 나무가 자라나는 Storyboard를 만듭니다. 또한, 마우스가 버튼에서 벗어났을때 생길 나무가 사라지는 Storyboard또한 일단 만들어 놓습니다. 이해되시죠? ^^ 전 이름을 각각아래와같이.
--------------------------------------
- sbTreeBorn -sbTreeDie
다음 나뭇잎을 보겠습니다. 나뭇잎도 2장의 백터이미지로 되어있습니다. 하지만 나뭇잎은 후에 각기 크기도 다를것이고 클릭했을땐 움직거리기까지 해야하기때문에 저번에 했듯이 그리드를 나누어 저장해 놔야합니다. 예, 그리고 이 나뭇잎은 나무에 한장만 걸리는 것이 아니기때문에 UserControl로 등록해놔야 합니다.
자, 오른쪽 Project 탭에 가서 오른클릭하신후,Add New Item... 으로 UserControl을 생성합니다. 중요한거 한가지 처음에 이름을 잘 지어놔야 합니다. 저에게는 수정작업이 참으로 번거로운일로 보였습니다.
저는 Leaf 라는 이름으로 만들었습니다.
왼쪽 툴바 아래에 화살표를 누르시고 Custom Controls탭에 보시면 UserControl들이 나오는것을 확인하실 수 있습니다. 자, 그리고 오른쪽 탭에서 Leaf.xaml를 찾아 가셔서 Storyborad를 만들어야 합니다. 왜냐! 나무가 다 자라고 나면 나뭇잎이 또 자라고 버튼을 누르면 나뭇잎이 움직일것이며, 나무가 없어질땐 나뭇잎도 같이 없어지기 때문입니다. ㅎㅎ 뭐래.. ㅋ 이해해주세요 위에 만들어논거 보시면서..
암튼 3가지 경우의 Storyboard를 만들어 놓습니다. 이름은 각각
----------------------------------------------------------------------------------------
-sbBorn -sbDie -sbMove
----------------------------------------------------------------------------------------
그러고 나면 page.xaml페이지에서 나무와 나뭇잎의 위치를 이쁘게 넣어주고 버튼과 장식을 넣어주고 이후에 개발자에게 파일을 넘겨주면서 "아, 버튼 클릭하면 이건 이렇게 저건 저렇게......" 흠... 이정도까지가 디자이너의 역할일까요? 갑자기 저도 궁금해 집니다... 그런의미에서 오늘은 여기까지 www
다음내용은 어떻게 풀어놔야 할지 어렵습니다. 사실 잘 모르겠습니다. 대충 아래의 내용들이있는데요,
버튼에 액션을 넣어줍니다. MouseEnter하면 나무가 자라나는 Storyboard를 불러오고, MouseLeave 가 되면 나무가 사라지는 Storyboard를 불러올것입니다. 또한 Click하면 나뭇잎이 움직이는 Storyboard를 불러옵니다.
자, 버튼에 MouseEnter하면 나무가 자라나는 Storyboard를 불러올것이며 나무가 다자라고나면 나뭇잎이 열리는 Storyboard를 불러옵니다. 글구 버튼에 MouseLeave 되면 나무가 사라지는 Storyboard를 불러올것이며 또한 나뭇잎이 사라지는 Storyboard까지 같이 불러줄 것입니다.
또! 한가지 Storyboard를 불러올때에 나뭇잎같은 경우 자연스러운 효과를 위해 클릭했을때의 움직이는 각도와 시간을 매번 랜덤으로 지정해 주어야 합니다. 최고값과 최저값을 지정해주고 이상하게 풀어 가는 과정이 있습니다. 그리고 더 복잡한 무언가가 있습니다. ㄷㄷㄷ...
"정말이예요, 옆에서 두눈뜨고 지켜보는데 아주 머리에 지대로 쏙쏙들어오는게 미치겠더라구요"
아주 깜찍스러운것을 만들었습니다. 이름하야
"정말이예요, 옆에서 두눈뜨고 지켜보는데 아주 머리에 지대로 쏙쏙들어오는게 미치겠더라구요" 버튼입니다.ㅜ.ㅜ.ㅜ.ㅜ.ㅜ
사실 어제 저녁 세미나에서 이것저것 얻어듣고는 "아항, 그럼 이런거 한번 해볼까?" 해서 백만가지 구상을 하고서는 아침에 상콤한 맘으로 회사에 출근 했었더랬습니다.
"Hi~ Blend, 오늘은 아주 멋진걸 만들거야.
버튼을만들고 그 버튼을 누르면, 무비가 실행 되는거지w Flash는 뚝딱 만들겠지만 넌 어떠니? 무비심볼처럼 여러무비들을 모아서 그걸 또 심볼로 만들 수 있겠니? 그럼 그 무비심볼을 버튼으로 사용할 수 있겠니? 아님, 이벤트를 가질 수 있겠니?"
자, 결국은 했습니다........ 회사 팀장님께서 하셨습니다. ㅠ,ㅠ 작업물의 내용은 이렇습니다.
----------------------------------------------------------------------
1. 버튼에 MouseEnter를 합니다. 2. 나무가 자라서 잎이 나옵니다.
3. Press 버튼 합니다. 4. 나뭇잎이 움직거립니다.
4. MouseLeave를 합니다. 5. 나무가 사라집니다.
----------------------------------------------------------------------
자, 간단하죠? (ㅋㅋ 두고보라지..) 우선, Expression Design으로 나무를 그린다음 Blend로 가져 옵니다. 그런데 마우스가 올려질때 실행될 무비는 좀 특별한데요, 나무가 자라난 후 잎이나야 합니다. 따라서 나무와 잎들을 따로 가져오는데요, 후에 나뭇잎은 크기도 각기다르고 Click했을때,움직거리기도 하기때문입니다.
그럼 나무를 보죠, 나무는 2장의 백터이미지로 되어있습니다. 나무는 그냥 커지는 모습만 내면 됩니다. 별다른건 신경 안쓰구요, 다만 중심점을 아래중간으로 맞춰줘야 땅에서 자라나는듯 보이겠죠?
자, 오른쪽 Properties 탭에 보시면 Transform속성을 지정할 수 있는창이 보이는데요, X , Y를 지정해주면 RenderTrandsformOrigin에 자동으로 표시되어 집니다. 한가지, 수치를 표기하는 방법은0~1까지 입니다. 뭔가 '100'이라는 숫자로 작업을 해와서 그런지 전 약간 낯설었습니다.
자, 그럼 나무가 자라나는 Storyboard를 만듭니다. 또한, 마우스가 버튼에서 벗어났을때 생길 나무가 사라지는 Storyboard또한 일단 만들어 놓습니다. 이해되시죠? ^^ 전 이름을 각각아래와같이.
--------------------------------------
- sbTreeBorn -sbTreeDie
다음 나뭇잎을 보겠습니다. 나뭇잎도 2장의 백터이미지로 되어있습니다. 하지만 나뭇잎은 후에 각기 크기도 다를것이고 클릭했을땐 움직거리기까지 해야하기때문에 저번에 했듯이 그리드를 나누어 저장해 놔야합니다. 예, 그리고 이 나뭇잎은 나무에 한장만 걸리는 것이 아니기때문에 UserControl로 등록해놔야 합니다.
자, 오른쪽 Project 탭에 가서 오른클릭하신후,Add New Item... 으로 UserControl을 생성합니다. 중요한거 한가지 처음에 이름을 잘 지어놔야 합니다. 저에게는 수정작업이 참으로 번거로운일로 보였습니다.
저는 Leaf 라는 이름으로 만들었습니다.
왼쪽 툴바 아래에 화살표를 누르시고 Custom Controls탭에 보시면 UserControl들이 나오는것을 확인하실 수 있습니다. 자, 그리고 오른쪽 탭에서 Leaf.xaml를 찾아 가셔서 Storyborad를 만들어야 합니다. 왜냐! 나무가 다 자라고 나면 나뭇잎이 또 자라고 버튼을 누르면 나뭇잎이 움직일것이며, 나무가 없어질땐 나뭇잎도 같이 없어지기 때문입니다. ㅎㅎ 뭐래.. ㅋ 이해해주세요 위에 만들어논거 보시면서..
암튼 3가지 경우의 Storyboard를 만들어 놓습니다. 이름은 각각
----------------------------------------------------------------------------------------
-sbBorn -sbDie -sbMove
----------------------------------------------------------------------------------------
그러고 나면 page.xaml페이지에서 나무와 나뭇잎의 위치를 이쁘게 넣어주고 버튼과 장식을 넣어주고 이후에 개발자에게 파일을 넘겨주면서 "아, 버튼 클릭하면 이건 이렇게 저건 저렇게......" 흠... 이정도까지가 디자이너의 역할일까요? 갑자기 저도 궁금해 집니다... 그런의미에서 오늘은 여기까지 www
다음내용은 어떻게 풀어놔야 할지 어렵습니다. 사실 잘 모르겠습니다. 대충 아래의 내용들이있는데요,
버튼에 액션을 넣어줍니다. MouseEnter하면 나무가 자라나는 Storyboard를 불러오고, MouseLeave 가 되면 나무가 사라지는 Storyboard를 불러올것입니다. 또한 Click하면 나뭇잎이 움직이는 Storyboard를 불러옵니다.
자, 버튼에 MouseEnter하면 나무가 자라나는 Storyboard를 불러올것이며 나무가 다자라고나면 나뭇잎이 열리는 Storyboard를 불러옵니다. 글구 버튼에 MouseLeave 되면 나무가 사라지는 Storyboard를 불러올것이며 또한 나뭇잎이 사라지는 Storyboard까지 같이 불러줄 것입니다.
또! 한가지 Storyboard를 불러올때에 나뭇잎같은 경우 자연스러운 효과를 위해 클릭했을때의 움직이는 각도와 시간을 매번 랜덤으로 지정해 주어야 합니다. 최고값과 최저값을 지정해주고 이상하게 풀어 가는 과정이 있습니다. 그리고 더 복잡한 무언가가 있습니다. ㄷㄷㄷ...
"정말이예요, 옆에서 두눈뜨고 지켜보는데 아주 머리에 지대로 쏙쏙들어오는게 미치겠더라구요"
