[Expression Blend] Exploring_the_Objects_Timeline_Panel

 

이번 포스트에서 다룰 내용은 블랜드를 켰을때 가장 좌측에 있는 Object and Timeline의 기능에 대해서 알아보고자 합니다. 지난 시간에 한 내용과 조금 다르니 첨부파일을 여신 후 프로젝트를 실행시키면 되겠습니다.

 

SL02SP1EN010_Exploring_the_Objects_Timeline_Panel (2).zip

 

계속 봐오던 것이지만 User Control이라고 하는 것은 페이지 상에 나타나있는 개체들 전부가 포함된 것을 의미합니다. 그리고 그걸 선택하면 그냥 전체 네모 하나만 선택되는데 이는 지금까지 만든 개체가 하나의 유저컨트롤로 사용될 수 있다는 겁니다. 그래서 다른 웹페이지에서 이런 개체를 불러다가 또 하나의 요소를 쓸 수 있다는 것이지요.

 

 

그다음으로 나오는 것이 바로 LayoutRoot인데 이건 하나의 Grid입니다. 그런데 User Control을 둘러싸는 grid라는 점에서 여타의 grid랑은 차이가 있지요. 지금 상태는 이 LayoutRoot가 부모로 설정되어 있기 때문에 이 위에서 생성되는 개체들은 모두 이 LayoutRoot에 포함됩니다.

 

 

 

보시면 알겠지만 지금의 LayoutRoot 아래에는 두개의 Rectangle과 한개의 Logo가 들어 있습니다. 이걸로써 하나의 User Control이라는 xaml이 정의됩니다. 그런데 재미있는 것은 Logo라는 것도 하나의 집합체라는 겁니다. 기존에 이 이미지를 Expression Design에서 불러왔었지요? 이 이미지는 코드로 된 벡터이미지 이기 때문에 글자 하나하나가 도형으로 되어 있습니다. 그래서 object and Timeline상에서도 Logo를 펼치면 많은 개체들이 거기에 포함되어 있는 것을 볼 수 있습니다.  

 

 

위에서 소개해드린 것처럼 이 Object and timeline에서는 개체의 상속성을 파악할 수 있습니다.

 각 개체 옆에 눈 모양이 있는 것이 보이시죠? 이건 디자인뷰상에서 보이게 할 것인지를 보여주는 창입니다.  시험삼아서 배경의 눈을 눌러서 숨기면 다음과 같이 됩니다.

 

 

해당 배경만 딱 없어지는 것이지요. 역시 이 속성 역시 상속성을 지닙니다. 즉 부모 개체의 눈이 감기면 하위 개체의 눈도 같이 감긴다는 것입니다.

 그 눈 옆에 있는 칸은 원래는 자물쇠가 있는 위치입니다. 자물쇠가 걸려있으면 해당 개체에 대한 수정이나 이동이 안됩니다. 그래서 보통은 시안 중 수정하지 말아야 될것에 대해서 이런 자물쇠를 걸어 놓기도 합니다.

 

 

자 이 화면만 있는게 너무 단조로우니까 첨부된 파일의 이미지를 첨부해 보도록 하겠습니다. 좌측 상단에 있는 Projects 패널상에서 첨부된 이미지를 프로젝트상에 포함시키도록 합니다. 아마 프로젝트 상에 image15.png란 파일이 사전에 포함되어 있을겁니다. 그걸 그냥 디자인뷰상에 끌어가지고 오면 그림이 하나 추가됩니다.

 

 

 

그런데 이렇게 하는 것보다는 지난 시간에 배웠던 Container를 사용해서 관리하는 것이 더 효율적입니다. 그래서 그 방법을 택해보겠습니다. 일단 이미지를 지웁니다. 그러고나서 LayoutRoot를 클릭한 후 원하는 곳에 Canvas를 그립니다.

 

 

이렇게 하면 삽입된 Canvas가 LayoutRoot 하위 개념으로 삽입되게 됩니다.

 그 다음 삽입된 canvas위로 아까 그 이미지를 넣습니다. 이걸로써 canvas안에 image가 추가됩니다.

 

 

이제 이 이미지는 Canvas에 삽입되었기 때문에 위치가 Canvas 의 위치를 따라갑니다. 그런데 object and timeline을 보시면 알겠지만 이름이 같은게 많습니다. 이 이름을 수정하려면 마우스로 해당 개체를 선택한 후 이름을 바로 수정할 수 있고 아니면 Propertise 상에서 No name이라고 되어 있는 부분을 수정하셔도 좋습니다. 저는 일단 Image로 수정하겠습니다.

 

 

지금 이렇게까지 한게 모두 xaml로 표현된겁니다. 디자인뷰에서 코드뷰로 전환시켜보면 이 모든 게 다 코드로 구성되었고 이를 이 블랜드라는 툴이 생성해줍니다.

 

 

그런데 조금 궁금하실 분도 있을겁니다. 다른 내용에서 본 내용이라면 xaml상에서는 모든 개체가 stack의 형식을 띄기 때문에 배열된 위치에 따라서 보이는 이미지가 있을거고 안보이는 이미지가 있을거라고 말입니다.

 정답을 말씀드리자면 지금 object and timeline상의 개체들은 stack의 형태대로 쌓여 있는 것이 아닙니다. 그냥 넣는 순서대로 위로 올라갈뿐 보이는 위치는 stack의 형태가 아닙니다. 이걸 확인할려면 이 timeline 밑의 버튼하나를 딱 눌러주면 됩니다.

 

 

이걸 누르면 개체의 배치가 stack의 형태를 띄게 됩니다. 위의 개체배열과 비교해보세요.

 

 

당연히 맨 위에 있는것이 가장 위에 올라와 있는 겁니다.

 

 이 object and timeline의 가장 핵심적인 기능은 바로 Animation 삽입기능인데 이전에 workspace를 기존의 Design에서 animation으로 바꿔봅니다.

 

 

그러면 창 배치가 싹 바뀝니다. 여기서 애니메이션을 삽입하려면 + 버튼을 누르고 Storyboard를 하나 생성하면 됩니다.

 

 

 

 

 

자 이것으로 storyboard도 하나 생성되었습니다. 애니메이션을 넣는 건 어떻게 하느냐.. 간단합니다. 그냥 원하는 시간을 찍어준 뒤에 그때의 원하는 모양이나 위치를 지정해주면 알아서 블랜드가 애니메이션처리를 해줍니다. 하나씩 봅시다. 위에 숫자들이 적혀있는 곳이 있는데 그 부분을 누르면 노란색 바가 그 위치로 이동하게 됩니다.

 우선은 아까 삽입한 이미지가 2초뒤에 나타나는 걸 해보겠습니다. 그럼 0초에서는 이미지의 투명도가 0이면 없겠지요. 수정해줍니다.

 

 

그러면 0초일때의 상태가 기록됩니다. timeline상에서는 하나의 키프레임으로 기록됩니다.

 

 

그런 후에 키 프레임을 2초로 옮깁니다. 앞에서 말씀드린것처럼 2에 마우스를 클릭하면 노란색 바가 2초로 이동합니다. 2초때는 이미지가 다시 나타나야 하겠지요. 다시 opacity를 100으로 바꿉니다.

 

 

이렇게 애니메이션이 생성되었습니다. 한번 결과를 보시려면 timeline상의 재생 버튼을 눌러보면 됩니다. 결과를 한번 보시죠.

 

 

이런식으로 애니메이션이 생성되었습니다.

참고로 이런 애니메이션도 역시 xaml로 처리가 되며 당연히 여러개 만들 수 있습니다. 지금 프로젝트 상에는 두개의 애니메이션이 포함되어 있으며 그건 이렇게 확인할 수 있습니다.

 

 

여기까지가 object and Timeline의 기능이었습니다.