회사 내부에서 10분 세미나로 간단하게 발표를 하게 되어 동영상을 만들어 보았습니다.
심플하게 레이아웃을 만들고 애니메이션 효과를 주는 영상입니다.
소리가 없어요 ; _ ; 일단 동영상 올리고..목소리 첨부-_-하여 업데이트 하겠습니다.
헉~ 올리고 보니 사이즈가 ㅜㅜ 장난 없네여 흑흑 -.-;; 제대로 된 놈으로 올릴때까지...
아쉬운데로 이것이라도.....떱떱;;
'익스프레션 블렌드'에 해당되는 글 45건
- 2009/09/15 스케치플로우 사용하기 (4)
- 2009/09/11 REMIX09/Web 컨퍼런스
- 2009/01/07 익스프레션 블렌드 무료 특강 4차 (17)
- 2008/11/19 [Expression Blend 활용강좌] 튕기는 글자 애니메이션 1 (6)
- 2008/11/04 익스프레션 블렌드 무료 특강(모두 마감됨) (8)
- 2008/09/12 [Expressing Blend 활용강좌] 파워포인트의 닦아내기 효과 (2)
- 2008/09/12 이미지 회전 연구 결과..ㅠㅠ (2)
- 2008/09/04 실버라이트 이미지 뷰어(?) (4)
- 2008/09/03 [Expression Blend 활용강좌] 동영상 클리핑하기
- 2008/09/03 [Expression Blend 활용강좌] 가속도 애니메이션
Blend ː SketchFlow2009/09/15 22:02
회사 내부에서 10분 세미나로 간단하게 발표를 하게 되어 동영상을 만들어 보았습니다.
심플하게 레이아웃을 만들고 애니메이션 효과를 주는 영상입니다.
소리가 없어요 ; _ ; 일단 동영상 올리고..목소리 첨부-_-하여 업데이트 하겠습니다.
헉~ 올리고 보니 사이즈가 ㅜㅜ 장난 없네여 흑흑 -.-;; 제대로 된 놈으로 올릴때까지...
아쉬운데로 이것이라도.....떱떱;;
Info & Seminar2009/09/11 16:27
Info & Seminar2009/01/07 14:09
안녕하세요. 새해가 밝았습니다. ^^ 신년을 맞이하여 무료특강을 다시 열게 되었습니다. 1월에 세미나와 명절 등 행사가 많은 관계로 17일 하루만 진행합니다. 2월에도 진행할 예정이구요. 많은 참여 부탁드립니다~ 아참,, 새해 복 많이 받으세요 ^0^
(현재 지난해 대기자가 10명정도 계신걸로 알고 있습니다. 이번에도 신청자가 다 차서 신청을 못하신 분들은 댓글 남겨주시면..인원 파악 후 다음 특강을 개설하도록 하겠습니다)
|
아이고..교육동의서 부분이 자꾸 에러나네용..
http://conso.co.kr/bbs/board.asp?mode=view&board_idx=794&GotoPage=1&b_code=dt&column=b_title&searchString=
링크 걸께여 -ㅅ-
Blend ː Silverlight/활용강좌2008/11/19 19:34
어제에 이어서~ 교육때 썼던 예제를 하나 더 올리도록 하겠습니다. 저번에 가속도를 이용한 공 튕기기를 했었죠? 이번에는 똑같은 효과를 적용하여, 글자들이 튕기는 애니메이션을 만들어보겠습니다. 역시 간단하게 작성하였으니 질문은 글로 써주시기바래요. ^_^
1. LayoutRoot 그리드의 배경색을 검은색으로 한 후 텍스트 블록을 생성합니다.
2.Text에 원하는 텍스트를 입력하고, 폰트와 사이즈를 입력합니다.
6. 한 글자를 이루는 패스가 2개 이상 일 경우 하나의 그룹으로 묶어줍니다.
오브젝트마다 원하는 색을 넣어주어도 됩니다.
1. LayoutRoot 그리드의 배경색을 검은색으로 한 후 텍스트 블록을 생성합니다.
 |
2.Text에 원하는 텍스트를 입력하고, 폰트와 사이즈를 입력합니다.
 |
3.
 |
4.
 |
5.
 |
6. 한 글자를 이루는 패스가 2개 이상 일 경우 하나의 그룹으로 묶어줍니다.
 |
 |
7.
 |
9. 모든 오브젝트를 선택한 후 0, 0.1, 1, 1.5, 1.9, 2.2초가 되는 시점에서 키프레임을 각각 생성합니다.
10. 0초와 0.1초의 키프레임에서 Opacity의 값을 0으로 하여 투명하게 합니다.
11. 모든 오브젝트를 선택한 후 플레이헤더를 1초에 놓고 아래로 이동시킵니다. 방향키를 이용하거나, y 좌표값을 135 로 입력합니다.
12. 그리고 키프레임을 선택한 후(shift 키 누른채로 선택) 가속도를 줍니다. x2의 값에 1를 입력합니다.
여기까지 완료가 되셨다면 다음장에 이어서 하도록 하겠습니다.
Info & Seminar2008/11/04 14:07
인원이 모두 마감되었습니다... 당일날 교육장에서 뵙겠습니다..^_^
|
Blend ː Silverlight/활용강좌2008/09/12 15:05
안녕하세요. 짱묜입니다.
작업을 하다보니 클리핑을 사용하면 무궁무진한 효과를 낼 수 있더군요..^^
오늘은 파워포인트의 닦아내기 효과를 내어보도록 하겠습니다.
먼저 cvShow 라는 이름의 캔버스를 만들어줍니다. 지금 그림에 나타나는 회색영역이 캔버스의 영역이예요.
그리고 캔버스와 같은 크기의 사각형을 만들어줍니다.
그리고 두 레이어를 선택하여 아래의 그림과 같이 Clipping 을 합니다.
그럼 다음과 같이 레이어가 클리핑된 하나의 레이어(cvShow)만 보여지게 됩니다. 자세히 살펴보면 클리핑 된 오브젝트는 패스의 선이 보라색으로 보여집니다.
다음은 왼쪽에서 오른쪽으로 닦아내며 나타나는 듯한 효과를 위해서 스토리보드를 만들도록 하겠습니다. 클리핑되어 보여주는 영역이 왼쪽에서 오른쪽으로 늘어나야겠죠? 스토리보드에서 첫 키프레임과 끝 키프레임을 생성하고 첫 키프레임에서 오른쪽 두개의 앵커포인트를 선택하여 이동시켜야 합니다. 앵커 포인트를 개별적으로 선택하기 위해서는 Directe Seletion 툴을 이용해야 합니다.
툴을 이용하여 앵커포인트를 선택하면 선택된 앵커포인트의 색이 바뀌게 됩니다. 다중선택을 하려면 Shift 키를 누르시면 돼요. 이렇게 두 개의 앵커포인트를 선택하여 왼쪽 끝으로 이동시킵니다.
이렇게 해서 스토리보드를 실행해 보면 캔버스가 왼쪽에서 오른쪽방향으로 영역이 확대되며 나타나게 됩니다.
여기서 중요한것은 우리는 하나의 객체가 아니라 캔버스의 영역을 클리핑 한 것이기 때문에 캔버스에 어떠한 자식 객체가 들어가던지 클리핑 된 캔버스 영역은 같은 효과가 적용되게 됩니다.
작업을 하다보니 클리핑을 사용하면 무궁무진한 효과를 낼 수 있더군요..^^
오늘은 파워포인트의 닦아내기 효과를 내어보도록 하겠습니다.
먼저 cvShow 라는 이름의 캔버스를 만들어줍니다. 지금 그림에 나타나는 회색영역이 캔버스의 영역이예요.
그리고 캔버스와 같은 크기의 사각형을 만들어줍니다.
그리고 두 레이어를 선택하여 아래의 그림과 같이 Clipping 을 합니다.
그럼 다음과 같이 레이어가 클리핑된 하나의 레이어(cvShow)만 보여지게 됩니다. 자세히 살펴보면 클리핑 된 오브젝트는 패스의 선이 보라색으로 보여집니다.
다음은 왼쪽에서 오른쪽으로 닦아내며 나타나는 듯한 효과를 위해서 스토리보드를 만들도록 하겠습니다. 클리핑되어 보여주는 영역이 왼쪽에서 오른쪽으로 늘어나야겠죠? 스토리보드에서 첫 키프레임과 끝 키프레임을 생성하고 첫 키프레임에서 오른쪽 두개의 앵커포인트를 선택하여 이동시켜야 합니다. 앵커 포인트를 개별적으로 선택하기 위해서는 Directe Seletion 툴을 이용해야 합니다.
툴을 이용하여 앵커포인트를 선택하면 선택된 앵커포인트의 색이 바뀌게 됩니다. 다중선택을 하려면 Shift 키를 누르시면 돼요. 이렇게 두 개의 앵커포인트를 선택하여 왼쪽 끝으로 이동시킵니다.
이렇게 해서 스토리보드를 실행해 보면 캔버스가 왼쪽에서 오른쪽방향으로 영역이 확대되며 나타나게 됩니다.
여기서 중요한것은 우리는 하나의 객체가 아니라 캔버스의 영역을 클리핑 한 것이기 때문에 캔버스에 어떠한 자식 객체가 들어가던지 클리핑 된 캔버스 영역은 같은 효과가 적용되게 됩니다.
CanvasClipping.zipMy Work/Silverlight2008/09/12 13:03
휴~ 뭐 이방법 저방법 다 써보았는데.. 타일브러쉬를 지원하지 않아서 이미지를 패스나 사각형 컨트롤 안에 맵핑하듯이 이미지로 채워주는 방법은 할 수가 없네요..
결국 Clipping을 통한 눈속임..ㅠㅠ 실제로 이미지가 각의 기울기에 따라서 변형되진 않고..테두리만 그렇게 보이는 방법을 썼어요. 기울기를 너무 낮추면 이미지가 잘리는게 너무 티가 나니 -_-;; 살짝만 해야될듯 합니다. 이미지를 조각내어 변형하는.....ㅡㅡ;; 코드를 쓴 방법은 ㅋㅋ 응용을 도저히 못하겠어서 포기~~!!;; 그래도 아래것과 비교하면..그나마 낫군요.
결국 Clipping을 통한 눈속임..ㅠㅠ 실제로 이미지가 각의 기울기에 따라서 변형되진 않고..테두리만 그렇게 보이는 방법을 썼어요. 기울기를 너무 낮추면 이미지가 잘리는게 너무 티가 나니 -_-;; 살짝만 해야될듯 합니다. 이미지를 조각내어 변형하는.....ㅡㅡ;; 코드를 쓴 방법은 ㅋㅋ 응용을 도저히 못하겠어서 포기~~!!;; 그래도 아래것과 비교하면..그나마 낫군요.
My Work/Silverlight2008/09/04 23:49
흐흣~ 월E 너무 귀여워요 T^T 근래에 본 영화중에 제일 -_-가슴뭉클하고 감동적인 영화였더라는...-ㅁ-)/ 짱짱!!!
간단하게 사진들로 이미지뷰어를 만들어 봤어요.ㅎㅎ 그래봐야 5장뿐이라 -_-..ㅋㅋ 클리핑을 이용했는데요. 이미지는 프로젝트 파일 안에 들어있어요(실제 작업시에는 따로 관리하세요). 스토리보드가 타겟네임만 다를뿐 모두 같은 효과라서 프로그래밍으로 할때는 이미지 소스 이름만 바꿔서 똑같이 적용시켜주면 될 것 같네요^^
간단하게 사진들로 이미지뷰어를 만들어 봤어요.ㅎㅎ 그래봐야 5장뿐이라 -_-..ㅋㅋ 클리핑을 이용했는데요. 이미지는 프로젝트 파일 안에 들어있어요(실제 작업시에는 따로 관리하세요). 스토리보드가 타겟네임만 다를뿐 모두 같은 효과라서 프로그래밍으로 할때는 이미지 소스 이름만 바꿔서 똑같이 적용시켜주면 될 것 같네요^^
Blend ː Silverlight/활용강좌2008/09/03 14:04
안녕하세요~ 짱묜입니다. -ㅁ- 점심을 먹고왔더니 졸음이 쏟아지네요..ㅠㅠ;;
이번 강좌에서는 블렌드에 동영상을 클리핑하여 넣는 것을 해보도록 하겠습니다. 일단 동영상을 보여줄 TV 이미지를 하나 급구 했어요..-ㅁ- 짠~ 이미지를 프로젝트 파일에 넣는법은 다 아시겠죠?
먼저, 동영상을 프로젝트에 첨부해야 합니다. 우리가 첨부할 동영상은 MediaElement 라는 타입으로 프로젝트에 들어가게 되는데요. 첨부하는 방법은 이미지를 넣듯이 Add Existing Item으로 로컬에 있는 동영상을 선택해 주기만 하면 됩니다. 그러면 다음과 같이 프로젝트 파일에 이미지와 동영상이 들어가있는 것을 볼 수 있습니다. 실버라이트의 장점으로 부각되는 것중의 하나죠. WMV포맷이 지원된다는거~ ^^ 저는 윈도우에 들어있는 기본 동영상을 넣어주었어요~
첨부가 잘 되었다면, TV 이미지와 동영상을 각각 더블클릭하여 LayoutRoot에 넣어줍니다. 동영상의 레이어가 이미지보다 위에 위치해야 합니다. 사이즈는 적당히 조절해주면 되겠죠?
자~ 얼추!! 이렇게 배치가 되었나요? 그렇다면! 이제 동영상을 TV 화면 사이즈만큼 나오도록 해주어야 합니다 TV 화면만한 사각형을 하나 그리고 사각형과 동영상의 레이어를 선택한 다음 Object > Make Clipping Path 항목을 선택하면 아래와 같이 그려준 사각형의 크기만하게 동영상이 나타납니다.
제법 TV 같습니다 ^_^; 여기서 응용 하나 더 하자면 텍스트를 하나 그려서 패스로 변환한 후, 위의 작업과 마찬가지로 클리핑 해보세요. 그럼 예제와 같이 만들 수 있습니다. 홍홍홍홍~~~~~~~ 오늘도 즐거운 실버라이트였습니다 -ㅁ-)v
Blend ː Silverlight/활용강좌2008/09/03 00:09
안녕하세요. 짱묜입니다. ^-^
오늘은 가속도에 대해서 다뤄볼까 해요. 제가 이전에 튜토리얼 강좌를 진행하면서 빼먹은 부분이었던것 같네요. 굉장히 쉬운 내용입니다~ ㅎㅎ
블렌드에서 가속도를 줄 수 있는 부분은 2곳이 있습니다. 하나는 키프레임에서 마우스 오른쪽 메뉴를 눌러 Ease In(빠르게 시작)과 Ease Out(느리게 시작) 을 조절해 주면 객체가 이동할 경우 가속도가 더해지거나 덜해집니다. % 값이 클수록 크게 작용합니다.
예를 들어 키프레임의 앞부분에 Ease In 값을 주면 빠르게 시작합니다. Ease Out 에 값을 주면 역시 느리게 시작하겠죠?
Ease In/Ease Out 은 기본적인 수치가 정해져 편리하게 쓸 수 있습니다. 만약 좀 더 세밀하게 가속도를 조절하고 싶다면 Easing 패널에서 KeySpline을 이용하는 것입니다. 이 패널은 어떻게 찾느냐..네 저도 처음에 한참 찾았던 아픈 기억이 나네요 T^T;; 이녀석은 바로 보이지 않습니다. 오브젝트를 클릭하고 특정 키프레임을 콕~눌러주세요.
그러면 오른쪽에 나타날것입니다..하하 왜이렇게 숨어있는겨~!!
Common Properties 패널의 Value 값은 객체가 이동할 좌표값입니다. 저는 객체가 X축으로 450 이동하게끔 해놓았어요. 그리고 그 아래에 KeySpline 곡선이 나타나는데요..처음에 열면 반비례 모양의 직선으로 나타나있습니다. 아무값도 들어있지 않기 때문이죠. 그러나 저기 노란 핸들러를 드래그하여 이동해주면 KeySpline 곡선이 변형됩니다. 수치로 직접 입력할 수도 있구요.. 간단하게 말로 설명하자면 볼록한 부분은 느리게, 오목한 부분은 빠르게 움직입니다. 위의 그래프를 풀어보면 처음엔 느렸다가 갑자기 빨라지는 애니메이션이 연출되겠네요 ^_^;
아래의 예제는 똑같은 시간(1초)동안 다른 가속도로 움직이는 애니메이션 입니다. 오토바이를 클릭하여 차이를 느껴보세요~(음..느끼라니까 뉘앙스가 좀..- -;;) 원상태로 돌아가는 기능은 없습니다..-_-불편하더라도 지나간 녀석을 다시 눌러주세요.
오늘은 가속도에 대해서 다뤄볼까 해요. 제가 이전에 튜토리얼 강좌를 진행하면서 빼먹은 부분이었던것 같네요. 굉장히 쉬운 내용입니다~ ㅎㅎ
블렌드에서 가속도를 줄 수 있는 부분은 2곳이 있습니다. 하나는 키프레임에서 마우스 오른쪽 메뉴를 눌러 Ease In(빠르게 시작)과 Ease Out(느리게 시작) 을 조절해 주면 객체가 이동할 경우 가속도가 더해지거나 덜해집니다. % 값이 클수록 크게 작용합니다.
예를 들어 키프레임의 앞부분에 Ease In 값을 주면 빠르게 시작합니다. Ease Out 에 값을 주면 역시 느리게 시작하겠죠?
Ease In/Ease Out 은 기본적인 수치가 정해져 편리하게 쓸 수 있습니다. 만약 좀 더 세밀하게 가속도를 조절하고 싶다면 Easing 패널에서 KeySpline을 이용하는 것입니다. 이 패널은 어떻게 찾느냐..네 저도 처음에 한참 찾았던 아픈 기억이 나네요 T^T;; 이녀석은 바로 보이지 않습니다. 오브젝트를 클릭하고 특정 키프레임을 콕~눌러주세요.
그러면 오른쪽에 나타날것입니다..하하 왜이렇게 숨어있는겨~!!
Common Properties 패널의 Value 값은 객체가 이동할 좌표값입니다. 저는 객체가 X축으로 450 이동하게끔 해놓았어요. 그리고 그 아래에 KeySpline 곡선이 나타나는데요..처음에 열면 반비례 모양의 직선으로 나타나있습니다. 아무값도 들어있지 않기 때문이죠. 그러나 저기 노란 핸들러를 드래그하여 이동해주면 KeySpline 곡선이 변형됩니다. 수치로 직접 입력할 수도 있구요.. 간단하게 말로 설명하자면 볼록한 부분은 느리게, 오목한 부분은 빠르게 움직입니다. 위의 그래프를 풀어보면 처음엔 느렸다가 갑자기 빨라지는 애니메이션이 연출되겠네요 ^_^;
아래의 예제는 똑같은 시간(1초)동안 다른 가속도로 움직이는 애니메이션 입니다. 오토바이를 클릭하여 차이를 느껴보세요~(음..느끼라니까 뉘앙스가 좀..- -;;) 원상태로 돌아가는 기능은 없습니다..-_-불편하더라도 지나간 녀석을 다시 눌러주세요.
