ZZANGMYON BLOG♡ ::

'익스프레션블렌드'에 해당되는 글 7건

2009/03/12 [Expression Blend 활용강좌] 슬라이드 광고 효과내기 2 (16)
2009/03/12 [Expression Blend 활용강좌] 슬라이드 광고 효과내기 1 (1)
2009/02/04 [Expression Blend 활용강좌] 텍스트를 따라 반짝이는 빛 2
2009/02/04 [Expression Blend 활용강좌] 텍스트를 따라 반짝이는 빛 1
2008/11/19 [Expression Blend 활용강좌] 튕기는 글자 애니메이션 2 (10)
2008/11/18 [Expression Blend 활용강좌] 달리는 자동차
2008/09/19 파워포인트 효과내기 4종 (2)

[Expression Blend 활용강좌] 슬라이드 광고 효과내기 2

다음과 같이 개체가 순서대로 쌓이는 스택패널을 하나 생성해 줍니다. 개체의 정렬은 Horizontal(가로)로 해주세요.

그리고 버튼 4개를 생성하여 넣도록 하겠습니다. 여기서부터는 고속으로 진행하겠습니다. ^^; 다음과 같이 버튼의 가로,세로 사이즈를 20,20으로 하고 마진값을 오른쪽에 5를 주십시오.

그러면 다음과 같이 아기자기한 버튼들 4개가 나란히 놓여지게 됩니다. 버튼의 이름을 주는것도 잊지 마세요. ^^

이렇게 생성된 버튼에 스타일을 입히도록 합니다. 스타일 입히는 것은 이전 강좌에서 너~~무 많이 나온 이유로 생략하도록 할께요 ^^ Over 효과만 주시면 됩니다

. 자, 저는 이렇게 스타일을 입혀 완성하였습니다!

이제 각각 버튼에 코딩을 하도록 하겠습니다.

첫번째 버튼을 선택하여 프로퍼티 창에서 이벤트 패널을 누릅니다. 그리고 MouseEnter 칸에 더블클릭을 하면 자동으로 함수가 생성됩니다.

그리고 나서 코드창에 가서 다음과 같이 입력합니다. "버튼 1을 눌렀을때 전체 애니메이션(Storyboard5)는 멈추고 Storyboard1을 실행하라"

2,3,4번의 버튼도 마찬가지로 적용시키면 됩니다. MouseEnter 이벤트를 생성한 후에 StoryBoard5.Stop(); 는 공통으로 넣어주시고 Begin 하는 스토리보드의 이름을 버튼에 맞도록 2, 3, 4로 바꾸어주세요

.

그리고 버튼을 담고 있는 스택패널을 선택한 후에 다음과 같이 이벤트를 받게 하기 위하여 Background 영역을 채워줍니다. Background 영역이 Null 처리 되어 있으면 마우스 이벤트를 받을 수 없어요. 그러나 미관상 이벤트를 받는 영역이 눈에는 보이지 않게 하기 위하여 알파값을 0으로 줍니다.

그리고 다시 이벤트 프로퍼티창으로 가서 MouseLeave에 더블클릭하여 함수를 생성합니다. MouseEnter가 아니라 Leave 입니다. 영역에서 벗어났을 경우니까요.

마지막으로 아래와 같이 "4개의 스토리보드를 멈추고 다시 5번 스토리보드가 실행되게 하라"는 코드를 삽입합니다.

실행하면 각각 버튼에 마우스가 오버되었을때 해당 이미지가 나타나게 됩니다. 특정 영역을 벗어나게 되면 순서대로 지나가게 되구요. ^^ 잘 이해되셨나요~~

파일 첨부하도록 하겠습니다.

SlideAD.zip

Posted by 짱묜

TAG Expression Blend, 슬라이드광고, 실버라이트, 익스프레션블렌드

Trackback 0 Comment 16

[Expression Blend 활용강좌] 슬라이드 광고 효과내기 1

안녕하세요. 벌써 봄 기운이 느껴지네요. 좀 있으면 날씨가 따뜻해져서 소풍가기 좋을 것 같아요 ^^;; 오늘은 오랜만에 강좌를 씁니다.

프로젝트 타입 : Silverlight

웹사이트를 돌아다니다 보면 슬라이드 효과를 내는 광고가 많이 있는데요. 오늘 실버라이트로 광고를 만들어보도록 하겠습니다. 작업도 눈이 즐거워야 하는법!! 저는 요즘 한창 잘나가는 F4의 꽃미남들의 사진을 가지고 했습니다..흐흐흐.. 이것은 꼼수인데요 4장의 이미지에 일일이 애니메이션을 주지 않고, 통짜리 하나의 이미지를 가지고 작업을 하도록 하겠습니다. 다음과 같이 사용될 4 컷의 이미지를 연결시켜 주세요. 여기서 중요한것은!! 이미지를 96dpi로 해주셔야 합니다. 우리가 일반적으로 작업하는 이미지의 dpi는 72이기 때문에 블렌드에서 불러들였을때 사이즈가 뿌옇게 확대 되어 보이기 때문입니다.

이렇게 만들어진 이미지를 프로젝트 파일을 생성한 후에 불러들입니다.

그리고 광고 배너의 테두리 부분을 디자인을 합니다. 저는 다음과 같이 바탕이 될 부분을 디자인하였습니다.

다 되었다면 이미지와 같은 크기의 캔버스를 하나 생성한 다음 이미지를 더블 클릭하여 넣어주고 캔버스를 이동하여 다음과 같이 첫번째 사진 부분이 배경 레이아웃의 가운데 쯤에 위치하게 합니다.

그런 다음 이미지가 한 컷만 보여질 수 있도록 하기 위해서 클리핑을 해야합니다. 보여질 영역을 나타내는 사각형을 하나 그려주고 Radius X와 Y에 5의 값을 주어 라운딩을 줍니다.

그리고 캔버스와 사각형을 같이 선택하여 마우스 오른쪽 메뉴를 눌러 클리핑 하도록 합니다.

자~ 이렇게 잘 나오나요? ㄲ ㅑ~~~~~~~~~ 준표닷!!!!!!!!!! -_-;;;;;;(자꾸 흑심이;;)

이제는 스토리보드를 만들도록 하겠습니다. 4컷의 이미지를 보여주기 위해서 4개의 스토리보드를 만들어야 합니다.

첫번째 스토리보드를 생성하고, 0.5초가 되는 지점에 키프레임을 생성합니다. 그리고 X와 Y의 좌표값에 각각 1,1 을 입력하였다가 0,0으로 수정해줍니다. 왜 1,1로 했다가 다시 0,0으로 바꾸느냐..!! 스토리보드에서 키프레임을 생성한다고 해서 좌표의 속성값에 0,0이 들어가지 않습니다. 비어있을 뿐이죠. 그렇기 때문에 1을 입력하였다가 0을 입력하면 각각의 좌표값에 0 의 속성값이 들어가기 때문에 다른 좌표의 값으로 이동하였다고 하더라도 0,0의 속성값으로 찾아올 수가 있는 것입니다. 이것두 꼼수에요 ^^; (꼼수 많다~;)

그리고 키프레임을 선택하여 y2에 1을 입력하여 다음과 같이 가속도를 감소시켜 줍니다.

이제 두번째 스토리보드를 만들도록 하겠습니다. 두번째 이미지가 보여지는 애니메이션인데요. 다음과 같이 1번 스토리보드와 마찬가지로 0.5초가 되는 지점에서 키프레임을 삽입한 후에, 이미지를 드래그하거나 좌표값을 직접 입력하여( -이미지 가로사이즈) 2번 이미지가 나타나도록 합니다.

그리고 1번에서처럼 키프레임을 선택하고 가속도를 똑같이 감소하여 줍니다.

세번째 네번째 스토리보드도 마찬가지입니다. 0.5초가 되는 지점에서 키프레임을 삽입한 후에 각각의 이미지가 보여지도록 드래그하여 이동을 하거나 -150(이미지 가로사이즈)만큼을 입력하여 이동시키고 가속도를 감소하여 줍니다.

자, 각각 이미지에 대한 스토리보드 4개를 다 만드셨나요? 그렇다면 마지막으로, 이미지가 순서대로 움직이는 전체 애니메이션을 만들도록 하겠습니다.

다섯번째 스토리보드를 생성한 후에 다음과 같이 0. 1.5, 2, 3.5, 4, 5.5, 6, 7.5, 8이 되는 지점에 키프레임을 생성합니다. 이미지가 유지되는 시간을 1.5초로 잡고, 이동시간을 0.5초로 잡았습니다. 다음 그림으로 이해가 가실지 모르겠는데요, 다음과 같이 빨간 사각형이 쳐진 지점의 키프레임에서 이동을 하게 됩니다. 이동이 될때에는 좌표가 이미지의 가로사이즈(저는 150)만큼 이동이 되겠고, 위에서와 마찬가지로 가속도를 감소시켜 주세요.

마지막으로 스토리보드를 선택하여 무제한 반복하도록 합니다.

이제 코드를 넣어주어야 실행이 되겠죠? ^^ C#코드에서 마지막에 만들었던 스토리보드 5를 실행하라는 코드를 넣어주도록 할께요.

자 이렇게 완성된 프로젝트를 실행하면 슬라이드처럼 지나가는 광고효과를 만들 수 있습니다.

여기서~~~~~~~ 끝낸다면!! 너무 아쉽겠죠!! 끝이 아니랍니다 하하하~~! 버튼 4개를 만들어 해당 버튼에 오버했을 때 이미지가 바뀌는 기능도 넣어보겠습니다. 다음 페이지에서 진행할께요 ^^

Posted by 짱묜

TAG Expression Blend, 슬라이드광고, 실버라이트, 익스프레션블렌드

Trackback 0 Comment 1

[Expression Blend 활용강좌] 텍스트를 따라 반짝이는 빛 2

앞의 강좌에서 배경과 모션패스 부분은 다 만들었으니, 이제 반짝이는 빛을 만들어보도록 하겠습니다.
유저컨트롤을 하나 생성합니다.

아마 사이즈가 굉장히 크게 생성이 되었을텐데요, 다음과 같이 유저컨트롤 레이어를 클릭하여 Height와 Width값을 35, 35 정도로 맞추어줍니다.

그런다음, 익스프레션 디자인 툴을 이용하여 빛을 그리도록 하겠습니다. 물론 디자인툴이 없는 분들은 블렌드로 그리셔도 무방합니다. (다만 ㅜㅜ 디테일하게 그리기가 쉽지않지요 ^^;;) 디자인툴을 열어 다각형을 그려주도록 합니다.

꼭지점이 7개이고, 내부로 깊이가 70% 파이게 만들어 주세요. :) 뭐! 원하시는대로 만드셔도 됩니다.

위와같이 2개의 별을 만들어 준 다음에 포갠 후, 작은 별을 살짝 회전해줍니다.

이렇게 만들어진 두개의 객체를 선택하여 복사한 후 블렌드에 가서 그리드 안에 붙여넣습니다. Export메뉴로 내보내도 되지만 Ctrl+C, Ctrl+V만으로도 붙여집니다. 단 좌표값을 잘 확인하세요 ^0^ 그리고 사이즈는 적절하게 맞추어줍니다.

이제 별이 빛나게 보이게 하기 위하여 스토리보드를 하나 만들어주도록 하겠습니다.

그리고 큰별과 작은별의 1.2초 되는 지점에서 키프레임을 생성하여 각각 360도, -360도 회전해 줍니다.

마지막으로 스토리보드를 계속 반복시켜 주도록 합니다~

이러게 완성되어진 유저컨트롤은 프로젝트 파일을 선택하여 빌드를 해주어야 메인 Window에 추가할 수 있습니다.

그리고 AssetLibrary에서 Custom Controls 탭을 선택하면 만들어진 유저컨트롤을 확인할 수 있을거에요.

자 이렇게 만들어진 유저컨트롤을 더블클릭하여 아까 만들어 둔 텍스트라인 패스 위에 놓은 다음 유저컨트롤과 패스를 동시에 선택하여 모션패스를 생성하여 줍니다.

이제 F5를 눌러 실행해 보면 다음과 같이 텍스트를 따라 빛나는 애니메이션을 확인할 수 있습니다.

소스 첨부할께요. ^^ 잘 안되는 부분은 글을 남겨주시기 바랍니다.

MotionPath2.zip

Posted by 짱묜

TAG ExpressionBlend, WPF, 모션패스, 애니메이션, 익스프레션블렌드

Trackback 0 Comment 0

[Expression Blend 활용강좌] 텍스트를 따라 반짝이는 빛 1

안녕하세요~ 부쩍 날씨가 따뜻해졌네요.. 워낙에 추운것을 싫어라하는 묜이지만, 따뜻해진 겨울에..지구온난화의 기상이변이 마구 다가오는것 같아서..이러다가 지구가 멸망하지는 않을까 걱정됩니다..ㅠㅠ;;

프로젝트 타입 : WPF

오늘은 텍스트를 따라 빛이 움직이는 애니메이션을 만들어 보도록 하겠습니다. 어제의 모션패스를 한단계 더 응용한 애니메이션인데요. 먼저, WPF 프로젝트를 생성합니다. 프로젝트 만드는 이미지는 생략할께요.^^

그리고 텍스트블럭(or 텍스트박스)에 원하는 텍스트를 써준 후 마우스 오른쪽을 클릭하여 텍스트를 패스로 변환해 줍니다.

위와 같이 텍스트가 패스로 전환 되었다면, Fill 부분은 없애주고 Stroke만 남겨서 글자의 테두리만 보여지도록 하겠습니다.

이제, 테두리만 남은 텍스트의 패스를 하나 더 복사해서 아래에 놓아줍니다.

그리고 Filp을 이용하여 Y축으로 텍스트의 방향을 뒤집습니다.

패스를 하나 더 복사한 것은 반사효과를 내기 위함이었거든요~ ^^ OpacityMask를 이용하여 효과를 내어보겠습니다. 아래에 놓인 복사된 패스를 선택하고 다음과 같이 OpacityMask에 그라데이션을 넣어줍니다. OpacityMask의 그라데이션에 들어가는 값은 어떤 색이던 상관없이 알파값의 영향을 받게 됩니다. 따라서 반사되어 비치는 효과를 위해서 제일 마지막 지점의 알파값만 70%로 맞추어주고 나머지 부분은 0%로 처리해줍니다.

자~ 텍스트의 라인과 반사효과가 잘 만들어졌나요? 다 되었다면 다음강좌에 이어서 하도록 하겠습니다.

Posted by 짱묜

TAG ExpressionBlend, WPF, 모션패스, 애니메이션, 익스프레션블렌드

Trackback 0 Comment 0

[Expression Blend 활용강좌] 튕기는 글자 애니메이션 2

13. 다시 1.5초가 되는 시점에 플레이헤더를 놓고 오브젝트의 위치를 10번보다 조금 높게 이동시킵니다. 또는 Y 좌표값에 105을 입력합니다.

14.그리고 모든 오브젝트의 키프레임을 선택한 후(11번과 같이) 가속도를 줍니다. y2에 1을 입력.

15. 모든 오브젝트를 선택한 후 1.9초가 되는 시점에 플레이더를 놓고 아래로 이동시킵니다. Y 좌표값에 135를 입력합니다.

16. 1.9초 지점의 키프레임을 선택한 후 가속도를 줍니다. x2의 값에 1를 입력합니다.

17. 모든 오브젝트를 선택한 후 2.2초가 되는 시점에 플레이더를 놓고 아래로 이동시킵니다. Y 좌표값에 110을 입력합니다.

18. 그리고 모든 오브젝트의 키프레임을 선택한 후 가속도를 줍니다. y2에 1을 입력합니다.

19. 첫번째 오브젝트 에서 두번째부터 마지막까지의 키프레임을 모두 선택한 후(다중선태은 shift키 이용) 0.1초 앞으로 당깁니다.

20. 두번째 오브젝트부터는 1번째 키프레임을 제외한 모든 키프레임을 모두 선택하여 0.2초 씩 뒤로 시간차를 줍니다.

21. CS 파일을 열어 페이지가 로드될 때 스토리보드를 호출하는 코드를 삽입합니다.

namespace Sample2

{

public partial class Page : UserControl

{

public Page()

{

// Required to initialize variables

InitializeComponent();

this.sb_TextAni.Begin();

}

F5르 눌러 실행하도록 합니다. 생각했던데로 잘 튕겨지나요? ^_^

TextAni2.zip

Posted by 짱묜

TAG 블레드, 실버라이트, 익스프레션블렌드, 텍스트애니메이션

Trackback 0 Comment 10

[Expression Blend 활용강좌] 달리는 자동차

갑자기 날씨가 추워졌네요. 눈이 온 곳도 있다고 하네요..ㅋㅋ;
11월 첫주에는 실버라이트 교육이, 지난주 토요일에 폴리텍1대학에서 블렌드 교육이 있었습니다. 실버라이트 교육에서 했던 실습예제를 강좌로 옮기려고 합니다. 간단하게 생략하여 쓴 것이라 이해가 안가는 부분은 글을 남겨주시면 알려드리겠습니다.^^

1. 자동차를 디자인하고 차의 몸체(Body)와, 바퀴 2개(wheel1, wheel2)의 레이어를 분리합니다.