'실버라이트강의'에 해당되는 글 4건

  1. 2010.12.26 영화 '매트릭스' 효과 따라하기 (2)
  2. 2010.12.12 처음으로 찍어본 웹케스트 동영상 강의 입니다. (1)
  3. 2010.11.02 무한으로 걸어가는 사람 (1)
  4. 2010.06.28 End of Days (1)






1999년에 개봉해서 큰 파장을 일으켰던 영화 '매트릭스' 다들 아시죠?

초록색 언어들이 비처럼 떨어지면서 영화타이틀이 나오는 시퀀스 장면을 보고 영감을 얻었는데요.

라인들이 그려지면서 배경이 나타나는 간단한 애니메이션입니다.

우선 쓰였던 재료부터 살펴 볼게요.



라인이 그려질 배경화면이구요.

일러스트에서 다 그렸네요ㅋㅋ

건물 한개씩 순차적으로 생겨지는 영상이 아니고, 동시다발적으로 건물이 그려지는 거라서



이처럼 건물하나에 필요한 StoryBoard하나에 Grid로 묶여있는 수천개의 패스들이 있습니다.

이제 Object and Timeline을 자세히 살펴 보면요.



위 그림처럼 Path가 0초일때는 건물의 외각선따라 그려지는 라인한개를 초록색으로 그렸습니다.

그런다음 Path의 0초 이후에 Keyframe를 찍지 않았기 때문에 초록색 선은 계속 남아있겠죠?ㅋ



네. 다음은 0.1초일때의 Path1에 관련된 내용인데요. Path1의 0초일때 검은라인에서 0.1초에 초록라인으로 바

뀌는 스토리 보드이구요. 처음에 배경의 검은색인데. 0.1초의 짧은 순간이지만 그 서서히 바뀌는 애니메이션 때

문에 전체적으로 봤을때 조금더 부드럽게 라인이 그려진걸 볼 수가 있을꺼예요^^.



이처럼 0.1초간에 라인을 하나하나 그리면 되요. 노가다...

저는 타블렛을 이용해서 라인을 그렸는데. 완전 딱딱 끊어지게 그리는것보다 왼손으로 그린 그림이 더 저는 애

착이 가네요.(제생각^^)



건물 하나에 들어가는 패스와 0.1초간에 검은색에서 초록색으로 이루어 지는 스토리 보드들 입니다.

이제 다른 건물들도 스토리보드를 생성해서 Keyframe을 위 처럼 찍어주면 되고요.

저는 건물을 13개로 나눠서 스토리보드를 13개를 만들었구요. 


네. 이제 애니메이션할 준비는 다 했구요.

이제 이 프로젝트를 Load했을때 실행이 되게끔 Behaviors를 이용해야되는데요.

Assets에 있는 ControlStoryboardAction을 이용합니다.



ControlStoryboardAction를 끌어다가 LayoutRoot에 놓으면


Properties창에 새로운 Trigger 패널에서 EventName은 프로젝트가 Loaded가 되었을때로 설정을 하고.

Storyboard는 해당하는 Storyboard를 선택해주면 됩니다.

Storyboard가 13개가 만들어 졌으니 ControlStoryboardAction를 13개 만들어 줍니다.

이제 Run Project를 해서 잘 실행되는지 보면 됩니다.
Posted by 개백장군

지난 10월달에 이걸 찍는다고 고생했었죠.

처음이 중요한거라고..

카메라 앞에 서는 자체도 처음이라 많이 긴장하고 떨렸던 기억이 나네요.

그래도 편집을 잘해주셔서 몇번 봐도 어색하지 않게 해주셨네요^^

윈도우폰이 국내엔 아직 출시 되지 않았지만, 우리 회사는 여러가지 어플들을 많이 개발을 했는데요.

http://blog.hugeflow.com/121

요게 가시면 어떤 어플을 만들었는지 볼 수가 있고요.


http://msdn.microsoft.com/ko-kr/gg501747

여기에 가시면 우리회사가  '기획'에서 '개발' 그리고 '디자인'까지 어플이 만들어지는  과정을 담은 영상이 있

으니 참고 하시면 되요^^

(이번주는 퉁쳤네여..)
Posted by 개백장군



이번에도 간만에 노가다로 애니메이션을 만들어봤어요.


흔히 스톱모션 애니메이션이라고 하는데요~
이미지 한장을 한 프레임에 넣어서 마치 움직이는것 처럼 되는효과입니다^^

우선 여기에 쓰였던 이미지를 한번 살펴볼께요.

캐릭터 하나씩 일러스트로 작업을 했구요. 왼쪽 위에서 부터. 총 47장을 만들었네요.
실제로 면 0.1초당 한장씩움직이니깐 걸어가는 느낌만 살리도록 해봤어요.

우선 펼쳐져 있는 사람이미지들을 다시 포토샾으로 불러와서 레이어를 다 나눴구요.


네. 위 이미지 처럼 47장의 레이어가 다 겹쳐서 넣은 PSD파일이구요. 이걸 다시.
블렌드로 넘겨 오면 됩니다.

File 메뉴에서 Import Adobe Photoshop File을 누르면

이처럼 PSD파일의 레이어 그대로 불러올수있게 되죠.
불러온 각각의 레이어들은 블렌드에서 이제 스토리보드를 이용해서 모션을 주면 됩니다.


그전 1프레임. 즉 제일 먼저 사용되어야 하는 레이어를 제외한. 나머지레이어들은 Appearance패널에서 Visibility메뉴에서 Collapsed를 눌러서 레이어를 감춤니다.



그런다음 Object and Timeline 패널에서 +를 눌러서 새로운 스토리 보드를 생성합니다.

적당한 이름을 입력 하면 다음과 같은 스토리 보드 타임라인이 생긴걸 볼 수가 있는데요.




Object and Timeline 에서 반드시 Layer_1을 선택을 한 후에. 타임라인에 있는 Record Keyframe을 누르면
0초에 키프레임이 생성이 되는데요.



Layer_1의 0초에서의 Visible값은 Visible로 0.1초일때는 Collapsed로 설정을 합니다.
그럼 밑의 이미지처럼 되겟죠?

Layer하나당의 이미지는 0.1초만에 보여줬다가 사라져야 하므로 위와 같은 방법을 밑에 있는 레이어도 같이 반복을 시키면 됩니다. (노가다)



네. 이같은 이미지처럼 Layer_1의 Collapsed가 끝나는 동시에 Layer_2의 Visible이 시작되고.
총 47개의 레이어를 아무 생각없이 키프레임을 넣어주면 되는데요.


0.1초간의 이루어지는 스토리보드이므로 비교적 짧은 애니메이션이 되었는데요.
간단 하죠?

아무래도 이런 기능적인 부분 보다는 실제로 씌였던 사람이미지가 47장의 프레임에 넣었을때 어색하지않고
실제로 걷는 모션이라면 성공했다고 할 수 있네요.

그런다음 무한 반복재생이 되도록

Object and Timeline패널에서 자신이 만든 Storyboard를 선택하면 Properties에서 RepeatBehavior에서 Forever로 하면 무한 반복이 됩니당.

그리고 프로젝트를 실행시켜서 볼수 있게 Behavior를 넣어줘야되는데요.

1번의 Asset부분에서 Behaviors 메뉴로 들어가면 ControlStoryboradAction이 있습니다.
이걸 끌어다가 Object and Timeline패널에 놓으면

위 화면과 같이 Properties에서 새로운 메뉴가 생기는데요.
1= EventName은 내가 작업했던 프로젝트를 언제 실행할꺼냐. Loaded(로드되었을때)
2= Storyboard는 어떤 스토리 보드를 실행할꺼냐. 내가만든 Storyboard(내가 지어준 이름)을 설정해주면

잘 실행 됩니다.
그럼 뿅~

Posted by 개백장군


블랜드4로 간단한 애니메이션을 만들어봤어요.




꾸물꾸물한 동네에서 번개가 떨어져 멸망하는 컷인데요.

1초도 되지 않는 짧은 스토리보드이구요.
우선 쓰였던 스토리보드의 오브젝트들입니다.
애니메이션 강좌라서 그런지 따라할사람이 없을 듯 합니다.



우선 모든작업은 일러(Ai)로 만들고 Microsoft Expression Design4로 불러와서 혹은
포토샵에서 이미지 파일로 만들어서 Microsoft Expression Blend4로 불러와서 모든작업을 했습니다.

 

Ai 작업파일.

위에서 보셨듯 레이어가 많이 겹쳐져 있어서 층층 구분을 해보았습니다.



이제 일러스트(Ai)파일이나 포토샵(Psd)파일을 Blend4로 불러올껀데요.

'파일 -> Import Adobe ..' 를 누르면 다음처럼 레이어가 딱 구분되어서 불러올 수 있는 레이어만 따로 불러올
수 있습니다.


지금은 배경이 필요해서 배경만 체크 하고 블렌드로 배경을 불러오고.
이제 스토리보드를 만든 후.

하늘에서 떨어지는 번개를 위와 같이 '파일 -> Import Adobe ..' 반복해서 불러와서


1번에서 번개의 위치를 적절히 배치 시키고 2번에서 계란을 눌러 키프레임을 입력합니다.
그런다음 3번 노란색 바를 0:00.3초에 이동시켜서 4번처럼 계란을 누릅니다.
1번에서 5번으로 이동을 할꺼기 때문에. 5번 언덕쪽에 위치를 시키고 크기를 조금 줄였습니다.
그런 다음 번개는 사라져야되니깐 6번 키프레임을 누르고 Appearance에서 Opacity를 0%으로 합니다.

이제 먼지를 할텐데요. 번개가 언덕을 때렸을 때, 언덕에서 나는 먼지 효과입니다.

먼지의 패스를 불러왔습니다.
먼지는 처음부터 생기지 않으니 Opacity를 0%으로 설정을 하고 Transform에서 X,Y크기를 0.5 씩 줄였습니다.
그리구 2번에선 Opacity를 100%, Transform을 X,Y크기를 1 로 합니다.
물론 스토리 보드에서 계란을 찍어야됩니다.
다음 3번에서 1번과 마찬가지로 설정을 합니다.
먼지1. 먼지2. 먼지3 과 동일한 방법으로 스토리 보드를 설정하고.
먼지가 발생했을때의 위치를 달리해서 효과를 줍니다.

전기의 레이어도 동일합니다.

그리구 번개가 때릴때의 전체화면에서 색변화를 줬는데요.


애니메이션의 크기와 동일하게 Ractangle를 만들고.

다음과 같이 시간에 따른 색의 변화와 Opacity 값을 조정합니다.

필요에따른 여러가지 효과들도 위의 방법과 같이 만들면 아마 더 완성도있는 디테일한 효과를 볼 수 있습니다.
여러가지 효과들을 추가했으면 이제 마무리를 지을때가 왔어요.

Ellipse로

1번(0:00.5)일때 언덕위의 작은 원에서 2번(0:00.1)일때 화면보다 더 가득찬 원으로 크기를 늘려주시면 빛이 다가오는듯한 효과를 줄 수 있습니다.

이제 마지막 부셔지는 바위를 표현 하면 되는데요.

일러(Ai)에서 Knife Tool로 다 자른걸 '파일 -> Import Adobe illustator File...'로 불러와서 바위의 한덩어리씩
Canvas로 그룹을 지었습니다.
실제로는 위 그림처럼 바위 사이 갈라진 흰색 라인이 보이는것이아니라 하나의 덩어리로 되어있습니다.


바위1에 대한 Path를 0:00.7초에 그대로 위치시키다가 0:01.2초에 패스를 하나하나 선택해서 크기를 조정하고
Opacity값을 0%으로 조절하면 바위가 조각마다 부셔져서 없어지는듯한 느낌을 줄 수 있습니다.

나머지 바위 2.3.4.5번도 위와 같은 방법으로 작업을 하고 그룹지었던 Canvas의 스토리보드상의 시간타이밍을
조금씩 달리하면 멋진 효과를 볼 수 있답니다.

이미지가 많타보니 길어졌는데요 아마 그냥 보시다가 따라 하는 사람이 없을듯.ㅠㅠ
블렌드로 이런 애니메이션의 효과를 줄 수 있다는것에 중점을 두고 작업을 했구요. 혹시나 비슷한 애니메이션의 효과를 쓸 때가 있다면 이걸 보시면 감사하겠습니당.
Posted by 개백장군