안녕하세요. 야심한밤 짱묜입니다 -ㅁ- namespace BlurEffect { public partial class Page : UserControl { bool isFirst = true; public Page() { // Required to initialize variables InitializeComponent(); this.MouseLeftButtonDown += new MouseButtonEventHandler(cvButton_Click); } void cvButton_Click(object sender, EventArgs e) { if (isFirst) { isFirst = false; this.sbBlutMotion.Begin(); } } } }
오늘은 블러효과를 이용한 애니메이션을 만들어볼께요. 뭐, 괜히 거창한것 같지만 실은 별거없어요. 간단하게 익스프레션 디자인으로 이미지에 블러 효과를 줘보고 그것을 이용하여 뿌~연 이미지를 클릭하면 선명하게 나타나는 이미지 효과를 만들꺼에요. 오늘 강좌는 너무 쉬워서 눈 감고 따라할 수 있을지도 몰라요 >_<
1. 먼저 정우성 사진을 준비합니다.(헙..ㅋ농담이구요.. 맘에 드는 사진을 골라주세요..참고로 눈이 즐거워야 작업이 잘 되는 1人 입니다;) "놈놈놈"에 꽂혀 버린 짱묜..ㅠㅠ; 그치만 정우성은 정말로 킹왕짱이었는걸요 -_-)b
파일명은 woosung1.png 입니다.
2. Expression Design 에서 정우성 사진을 불러 들인 후 라이브 효과를 적용하도록 하겠습니다. 라이브효과는 Design 툴의 오른쪽 Effects 패널에서 적용할 수 있어요. 예전 강좌에서도 말했었지만 Blur,Drop Shadow,Dry Brush 등의 라이브 효과는 우리가 뽀샵이라고 부르는 포토샵의 필터효과와 비슷합니다.
아이콘을 클릭하여 Effects > Gaussian Blur 효과를 선택하고 Radius의 값에 2를 넣어줍니다. Radius의 값이 커질수록 뿌옇게 보여집니다.
3. 다음과 같이 적용되었다면 Export 메뉴를 이용하여 png 파일로 내보냅니다.
4. Expression Blend를 킨 후, Add Existing Item으로 두 이미지를 불러들이고 더블클릭하여 Gird 안에 넣습니다. 비주얼 트리의 눈모양(깜빡이)을 이용하여 이미지를 보였다 안보였다 하면서 잘 포개넣으세요.. 라이브효과가 적용된 정우성 이미지는 원본 정우성 이미지보다 살짝 크거든요..ㅡㅡㅋ 두 이미지의 위치가 잘 겹치도록 해주어야합니다!! 비주얼 트리는 아마도 다음과 같을거에요.
여기서 myon은 묜의 로고이니 신경쓰지 말아주세요 ^^; 그 아래 cvButton은 뭐냐고요? 그것은 잠시후에 설명하도록 하겠습니다. 일단 잘 포개어진 이미지 2장으로 스토리보드를 만들거에요. 이것 역시 매우 간단합니다.
5. 스토리보드를 생성하여 타임라인에서 1초가 되는 지점에서 키프레임을 만들고 블러가 적용된 이미지의 Opacity를 "0"으로 만들어줍니다.
자, 참고로 묜은 블러가 적용된 이미지의 시작 키프레임을 0.3초 부분에서 시작했어요. 왜냐하면 클릭 이벤트를 받아 블러 효과가 사라지게 하려는데 0초부분에서 시작하면 너무 순식간에 사라지거든요..ㅋㅋ 엿장수 마음입니다!! 이렇게 만든 스토리보드를 실행하면 사진이 선명하게 나타나는것을 확인할 수 있습니다.
6. 사진을 클릭하면 선명하게 나와야겠죠..저 위에 cvButton를 기억하시는지..--ㅋ 저녀석은 이미지만한 크기의 투명한 Canvas입니다. 물론 버튼으로 이벤트를 주어도 되지만 Canvas로도 간단하게 줄 수 있어요. 단, 중요한것은..Canvas의 BackGround 값이 "Null"이어서는 안됩니다. 아무색이나 지정해주고 코드의 제일 앞자리 부분을 "00"으로 처리하여 투명하게 해주세요.(예:#00000000) 사실 Canvas를 버튼타입으로 쓰느냐, 아니면 버튼 컨트롤을 쓰느냐는 상황에 따라 다르지만 전 그냥 Canvas로 했어요(개발자가 아니니 봐주세요 ^_^;)
7. C# 으로 가서 다음과 같은 코드를 넣어줍니다.
이미지를 클릭하면 스토리보드를 실행하라 뭐 대충 이런소리입니다..ㅎㅎ..실행하면 다음과 같이 나타납니다.
BlurEffect.zip아직은 이렇게 이미지를 이용해 처리하지만, 나중에 블렌드에서 비트맵 효과를 지원하는 날에는~~ 더더욱 편하게 작업할 수 있겠죠? ^_^
