Roaming from the Earth

브라우저를 새로고침하거나 새로 읽었을때, 다른 이미지를 볼 수 있습니다. (랍니다!)

출처 : http://www.computerhope.com/j18.htm

질문원본 URL :  http://cafe.naver.com/expressionstudio/2873

어떻게 사용하느냐에 따라 틀리겠지만,
사용하고 싶은 도형이 간단한 State를 가지면 아래와 같은 방법을 사용 할 수도 있습니다.

Control의 Template를 사용하여 사용할 Object를 Contents Presenter로 보여주고,
Control의 Template에서 사용할 State를 추가해서 사용하는 방법입니다.

아래는 간단한 예제입니다.
Button control에 새로운 State를 추가해서 사용해 보겠어요.


1. Silverlight Application을 먼저 생성합니다.


2. 간단하게 Button Control을 하나 추가해줍니다.


3. 버튼 컨트롤안에 바꿔 사용할 Object인 Rectangle을 넣어줍니다. 위 표시된 그림과 같이 Recactangle은 Button의 자식객체로 들어갑니다.


Button Template

4. Button > Edit Template > Create Empty 를 차례로 선택하여 Button Template 설정을 해보겠습니다.



5. Template Name은 간단히 지어주고,


6. 새로운 Template을 생성하면 위 그림과 같은 구조를 볼 수 있습니다.


7. 6의 표시된 영역에 ContentPresenter를 추가합니다.
순서와 같이
1) Toolbar에서 화살표를 클릭한 후
2) content라고 검색해주면
3) 쉽게 Content Presenter를 찾을 수 있습니다.

+ 위 ContentPresent의 Content는 Button의 자식객체와 자동으로 Binding 됩니다.


8. 위 그림과 같이 Grid의 자식 객체로 ContentPresenter를 추가합니다.



Add Visual State Group

9. 새로운 State Group을 추가합니다. 
1) States 패널을 선택후
2) Add State Group 버튼을 클릭해 새로운 State Group을 추가합니다.


10. 새로 추가한 State Group에서 Add state 버튼을 클릭해 설정할 State를 추가합니다.


11. 위 그림과 같이 간단하게 Scale200과 Scale100 State를 추가해 보았습니다.



12. Scale200 State에서 Content의 Scale이 두배로 커지게 설정 하고,
Scale100 State에서는 원래 크기를 가지는 State를 설정 할꺼에요.

1) Scale200 State를 선택하고,
2) grid를 선택한후
3) Transform 패널의 Scale 부분에서 X 와 Y를 각각 2로 설정해줍니다.

+ grid의 Scale을 설정해주었지만, Content 부분만 각스테이트별로 속성을 변경하려면 ContentPresenter의 Properties를 설정 해주시면 됩니다.

+ Content Presenter는 Content를 보여주는 컨트롤이므로 Content Presenter 자체의 Properties(크기, 회전 등)은 설정해줄수 있지만, Content 자체의 Properties에는 관여하지 않습니다.



13. Scale100은 원본크기이니 따로 설정할 필요가 없습니다.
그림의 Button 부분을 눌러 Template 수정에서 빠져나갑니다.



14. 편의를 위해 Button의 사이즈를 조절해주겠습니다.
위 그림과 같이 width, height를 Auto로 해두면 자식객체의 크기에 따라 자동으로 Size가 변경됩니다.



15. Button을 copy하여,



16. Layout Root에 붙입니다.
1) 위 방법말고도 버튼을 추가한뒤 방금 생성한 template을 적용해도 되고,
2) 아트보드에서 버튼을 copy n paste 하셔도 됩니다.



17. 새로 붙여넣은 버튼의 Rectangle에 Ellipse로 바꿔줍니다.

위와 같은 방법으로 Control Template에 새로운 Custom State를 추가해서 사용할수 있습니다.

+ Button Control은 하나의 자식객체만 가질 수 있으므로, 여러개의 Object를 Content로 사용하고 싶다면,
Grid를 자식객체로 쓰고 그 Grid안에 Object들을 추가하여 사용합니다.


State가 잘 작동하는지 보기 위해, 버튼과 GoToStateAction을 사용하여 State들을 확인해보도록 하겠습니다.



18. 위 그림은 두번째 Button의 Content를 Ellipse로 변경한 모습입니다.



GoToStateAction

19. 위 그림과 같이
1) 100, 200 이라는 Button을 추가해줍니다.
2) Asset panel을 선택하여
3) goto 라고 검색해주면,
4) 쉽게 GoToStateAction을 찾을 수 있습니다.
5) GoToStateAction을 100과 200 Button에 Drag n Drop 해서 각각 붙여줍니다.



20. 편의를 위해 버튼들의 이름을 바꿔주었습니다.
100, 200 Button과
Rectangle이 Content로 들어있는 Shape1과
Ellipse가 Content로 들어 있는 Shape2입니다.



21.
1) 100 Button에 붙여 놓은 GotoStateAction을 선택하고
2) TargetName의 2 버튼을 클릭하여,
3) Shape2를 대상으로 선택합니다.
4) State Name의 Select Box를 클릭하면 Shape2 가 가진 State들이 나옵니다.
5) 그중 Scale100 State를 선택해 줍니다.

+ GoToStateAction은
SourceName (_200)에 어떤 EventName(Click)이 발생했을때, TargetName(Shape2)의 State를 StateName(Scale200)으로 변경해주는 Behavior입니다.



22. 21번 방법과 마찬가지로 200 Button의 GoToStateAction의 Properties를 Shape2의 Scale200 State로 가게 변경 시켜 줍니다.

23. F5키를 눌러 Run Project 합니다.
아래와 같은 결과를 얻을 수 있습니다.




도움이 되었나요?? :D

MS에서 Windows Phone Application Design을 위한 UI 가이드를 제공하고 있습니다.
windows design system을 코드네임 metro라고 부르고 있는데,
크게 벗어나지 않고 템플릿으로 뚝딱 뚝딱 뭔가 만들어 낼 수 있는 여러가지들을 제공하고 있습니다.

아니! 이것은 몹시 생산성은 높지만, 디자이너 입장에서는 어려운 과제가 아닐 수 없군요 :-/
감히 말해보자면, 디자이너 없이도 windows design system을 따르는 application을 만들기가 가능하다는 것-
(아래 링크중 windows phone 7 design templates의 프로젝트 파일을 열어보면... )

한편으로는 디자이너의 역할이 줄어들수도 있겠지만, 한편으로는 디자이너의 역할이 매우 중요한 부분이 될 수도 있겠네요.
각설하고-

파란색 표시된 링크들은 개인적인 소견으로 필수 링크입니다.


참고 자료 :

UI Design and Interaction Guide for Windows Phone 7 (PDF)

http://bit.ly/d9Xiey

 

Windows Phone 7 Design Templates

http://wp7designtemplates.codeplex.com/

Guide를 따른 Design Templates for WP7 프로젝트 파일

 

Design Templates for Windows Phone 7 (87.6 MB)

http://go.microsoft.com/fwlink/?LinkId=196225

Guide PSD파일과 PDF문서, Font가 포함되어있다.

PDF파일은 Application에 쓰이는 Check Box, Radio Box, Button 등의 컨트롤 들의 Design Guide.

참고 사이트 :

MSDN - Design Resources for windows phone http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx

Windows Phone Design Day Recordings

http://blogs.msdn.com/b/jaimer/archive/2010/08/13/windows-phone-design-day-recordings.aspx

shazaml design, LLC - Windows Phone UI templates

http://www.shazaml.com/archives/windows-phone-7-ui-templates

루현의 Expression Blend - http://ruhyun.tistory.com/

Kirupa.com http://www.kirupa.com/windowsphone/index.htm

Innovative Singapore http://innovativesingapore.com/2010/08/experession_phone/

 

Microsoft Expression Forum http://social.expression.microsoft.com/Forums/en-US/blend/threads
Silverlight Expression Studio Cafe http://cafe.naver.com/expressionstudio

그리고 기타 참고 사이트들 입니다.

 

Windows Phone 7 Application 을 Expression Blend로 만들어 봅시다.
(based on Blend)

 

Windows Phone 7 Application을 만들어 보겠어! 라며 Blend를 켜서 샅샅히 뒤져보지만,

관련 프로젝트는 만들 수 없군요.

 

 

없어 - !

 

그래서 오늘은 준비!!

 

먼저, 개발 도구들이 필요합니다.

내 그냥 그냥 쉽게는 안되는 겁니다. :D

 

준비물 (개발을 위해 설치 할 것들) :

 

• Expression Blend 4.0
• Silverlight for windows phone toolkit - Feb 2011
  http://silverlight.codeplex.com/releases/view/60291
• Visual C# 2010 express
• Windows Phone Developer Tools
  http://create.msdn.com/en-us/home/getting_started

 

<codeplex - silverlight for windows phone toolkit - feb 2011>

<windows phone developer tools - 툴 종합세트! +ㅁ+>

준비물들을 모두 설치 한 후, Blend를 실행하면-

 

짜잔 -

 

이제 뭔가 할 수 있을 것 같은 기분입니다.

확인차 Build 하기 위해

 

TextBlock에  'Hello :D' 를 타이핑하고,

Build 합니다. (F5)

 

Windows Phone Developer Tools 종합 세트에 포함 되어있던,

Window Phone Emulator 가 실행 되면서 'Hello :D' 를 볼 수 있습니다.

 

준비 끝!

Silverlight의 Visual States와 Data State Behavior와 Data Binding으로 간단한 메뉴 네비게이션을 동작 시켜 볼께요.
Sample Data Source로 부터 DataBinding된 ListBox로 된 네비게이션을 클릭하면,
각 메뉴에 맞게 state가 변경되어 Contents가 바뀌는 실습입니다.

몹시 간단한 실습이지만, project 파일 첨부하겠어요 LOL

 

1. 먼저  Silverlight Application Project를 만들어 줍니다.

 
2. New Sample Data… 버튼을 클릭하여,Menu Item을 넣어 줄Sample Data를 생성해 줍니다.

 
3. Add Collection Property 를 클릭하여, MenuSample이라 이름 붙인 Sample Data Source에 Menu명이 들어갈 Collection을 추가 해줍니다.

 
4.  새로 만들어진 Collection에 Add simple property 버튼을 클릭해서 menu명이 될 string type property 를 추가 해줍니다.

 
5. Collection1의 Edit sample values 버튼을 클릭해서 Menu  명을 임의로 바꿔볼께요.

 

위 그림과 같이 간단하게 Menu1, Menu2, Menu3 으로 메뉴명을 설정해주고 Number of records  는 3으로 설정하여 메뉴가 3개가 나오게 만들어 줍시다.

 
6. Collection1 을 아트보드위에 drag n drop하여, Menu  네비게이션이 될 ListBox를 생성해 줍니다.

 
*.  예제가 약간 그럴싸하게 보이기 위해 Header, Lnb, Contents 영역이 들어간 전형적인 Layout 을 급히 만들어 주었습니다.

 
7. 각 메뉴별 Contents 를 다르게 표현하기 위해 Contents영역에 Rectangle을 넣어서 Contents별로 색이 바뀌게 해보겠습니다.
TextBlock이나 각 메뉴마다 다른 UserControl 이 보이도록 할 수도 있겠죠.

 

Objects 들이 위 그림과 같이 구성되었습니다.

 
8. 이제 각 메뉴별  States를 추가 해 보겠습니다.
States panel을 열어 Add State Group > Add State 버튼을 차례로 클릭해 줍니다.
State Group 의 이름을  MenuStates로 바꿔 줬어요.

 
State를 3개 추가해서 위 그림과 같이 State 이름을 넣어줍니다.
*. 이 실습에서는 Menu이름과  State이름을  Binding 시킬것이기 때문에 둘을 똑같이 이름붙여줘야합니다.

 
 
 

 
9. Base 부터 각각 State 를 클릭하여, Contents 영역에 추가해 두었던 Rectangle의 Fill 속성을 그림과 같이 각각 다르게 설정해 줍니다.

 

10. Contents변경 확인용의 TextBlock을 Grid와 함께  Contents 영역에 넣어줍니다.

 

11. 위 그림처럼 Rectangle중앙에 위치시켜놓은 10번의 TextBlock에 Detail Mode의 Data 의 메뉴이름을 설정 해둔 Property1을 Drag n Drop하여 Binding 시켜줍니다.

 
12. 지금 추가시킬 Grid는 Menu 네비게이션의 Selected Item의 Text값에따라 같은 이름의 State로 보내줄 역할을 하게 만들어 줄 부분입니다.
Grid를 아트보드 구석에 하나 추가 해줍니다. Layout에 시각적요소로 영향을 미칠 object가 아니니 안보여도 되겠죠.

 

13. 만든  Grid에 Detail Mode > Collection1 > Property1 을 Drag n Drop해서 Binding 시켜줍니다.
Create a [TextBlock] and bind its Text property to …  라는 메세지가 뜨는데, Property type에 맞게 Databinding 된 TextBlock이 자동으로 생성됩니다.

 

XAML소스코드를 살며보면  위와 같이  Text=”{Binding Property1}” 텍스트 부분에 Property1이 binding 된것을 볼 수 있고,
이TextBlock의 부모객체인Grid에도 DataContext에 Collection이 binding  되어있습니다.

 

14. Asset Library > Behavior를 열어 13에서 만들어진 TextBlock에 메뉴에 따라 State 로 보내줄 DataStateBehavior를 Drag n Drop하여 붙여 줍니다.
(사실  이 Behavior는 대상의 Data를 설정해줄것이기 때문에Object 의 아무곳에 붙어도 상관이 없습니다)

 

 

15. 14에서 붙인 DataStateBehavior 를 선택하고 Properties panel을 열어
1) Binding Property의 Artboard element picker버튼을 클릭하고
2) 아트보드위의 13에서 만들어진 TextBlock 을 클릭해줍니다.

 

16. Value Property의 작은 사각형 버튼인  Advanced option > Element Property Binding 을 차례로 선택하고, 아트보드 위의13번  TextBlock을 선택해 줍니다.

 

17. Property를 선택하는 창이뜨면 Text를 선택해 줍니다.
Value에 13번  TextBlock의 Text 가 binding시켜줬습니다.
18. True state Property에도 Value와 같이 Advanced option > Element Property Binding 을 선택하여 TextBlock의 Text와 Binding 시켜 줍니다.
Menu이름의 Text를 State 이름에 넣어줌으로, 메뉴이름과 같은 State로 보내지게 Binding 됩니다.

 
DataStateBehavior의 Properties가 위 그림과 같이 설정됩니다.

 

19. F5를 눌러 Run Project를 실행 합니다.

원하는 결과가 나왔나요?
위 실습과 같이 간단한 메뉴 네비게이션을 가진 레이아웃을 state를 사용하여 구성 할 수도 있으며,
DataStateBehavior의 TrueState와 FalseState를 사용하여 좀 더 다양한 기능의 네비게이션을 구현 할 수도 있습니다 :D

Data Panel의 List Mode와 Detail Mode를 살펴보면서 완전(!) 간단한 예제 하나 만들어 보겠습니다.

List mode와 Detail mode를 사용하면 간단하게 ListBox의 selected item의 data를 binding해 줄 수 있어요.

 

1. Silverlight Application 을 하나 만들어 줍니다.

 

2. ListBox 에 Binding할 Sample Data를 추가해서 준비를 해봅니다.

 

3. Collection 에서 Add simple property 버튼을 클릭해서 Property 하나 더 추가 해줍니다.

 

4. 새로 추가한 Property 의 Type을 Image로 바꿔 줍니다.

5. Layout Root , Grid를 Selection 툴을 사용해서 칸을 나눠 줍시다.
왼쪽에는 ListBox를 넣고 오른쪽에는 Select된 Item을 보여 줄 Layout panel을 넣을꺼에요.

 

6. Sample data source의 collection을 Grid왼쪽칸으로 Drag n drop하여 ListBox를 간단하게 추가 해줍니다.

 

Data 패널에 data binding이 활성화되어 노란테두리가 생깁니다.

 

 

7. 오른쪽 Selected Item을 보여줄 Layout panel로 StackPanel을 추가 해줍니다.

 

 

8. Stack Panel 안에 Asset Library 를 열어서 Selected Item중에 Image부분이 Binding 될 Image 컨트롤을 추가해 줍니다.

 

위 그림과 같이 layout을 적절히 조절해 줍니다.

 

 

9. Stack Panel안에 Selected Item 중에 Text 가 Binding 될 TextBlock을 추가해 줍니다.

 

 

TextBlock도 위 그림과 같이 Layout을 적절히 설정해 줍니다.

 

 

10. Data Panel을 두개의 탭을 살펴 볼께요

• List Mode : 항목목록 (일반적인 데이터 컬렉션)을 표시하는 마스터 보기.

  ListBox, DataGrid, TreeView 컨트롤로 항목을 끌 수 있고, 아트보드로 collection항목을 끌면 자동으로 ListBox가 만들어 집니다.

• Detail Mode : 목록의 선택된 항목에 대한 세부 정보를 표시하는 세부정보보기

  Grid, Canvas등 LayoutPanel에 항목을 끌 수 있고, 아트보드로 Collection항목을 끌면 Grid와 자식객체로 세부정보보기를 만들 수 있습니다.

    *. 이때 Expression Blend는 Grid 개체의 DataContext속성을 마스터 보기를 표시하는 개체의 SelectedItem 속성으로 설정하여 마스터 보기와 세부 정보보기의 관계를 자동으로 구성합니다.

 

쉽네요. 자동으로 된답니다.

그럼 Detail Mode에서 Item들에 Binding만 시켜주면 되겠어요.

 

11. Detail Mode 선택하면, Collection앞의 아이콘이 바뀌죠! Property 3(Image type)을 추가해둔 Image Control로 Drag n Drop해서 Binding 시켜 줍니다.

 

 

12. Property1(string type)은 TextBlock으로 Drag n Drop해서 Binding 시켜 줍니다.

 

13. F5 눌러서 Run Project해봅니다.

 

원하는 결과물이 나왔나요?

응용하기 위해선 XAML코드를 열어 Detail항목과 List항목이 Binding될때 코드들을 잘 살펴 보세요 :D

pm 12:45 HK 도착

드디어 홍콩이로구나!

 

호주도착해서 안 것인데, 사실 여기서 사진을 찍으면 안된다 하더군...
(잘못하면 호주 공항에서 끌려 갈뻔했다)
어쨋건 홍콩에선 아무도 나를 저지 하지 않았지.
왠지 좀 칙칙한 느낌이 물씬 풍기고 각양각색 사람들이 많았던 공항.

pm 2:05

 

이게 왠일... ?

의외로 내 손짓 발짓급 영어가 통했다! - 그래 그땐 그렇게 생각했지 뭐니-

처음엔 소심하게 굴었지만, 자신감 급상승!

그래- 이대로만 가면 된다는 거지!

그리하여 information 아가씨에게 무려 어디로 갔다가 언제 돌아오고,

어디로 가면 7시간 동안 구경하기 좋은지 문의도 했다고!

 

무사히 환전도 했다!!

도저히 물가 감이 안잡혀서 - 물론 사전에 단 한톨도 조사하지 않았었지! - 안 해온 이유도 있지만,

도착해서 분위기 봐서 하기로 한건 잘한 것 같다.

 

생각보다 공항에서의 시간이 오래걸려서,

침샤추이에는 정말 잠시 들리는 정도가 될 것 같아 딱 4만원만 환전했다.

 

2층 버스를 타고 1시간 거리...

어머, 2층 버스라니! 나 이런거 처음보는데!!!

흠흠 난 시크하니까 우와- 같은 것은 하지 않을 테야.

버스비 편도 $33

 

아직 제법 쌀쌀하고 전혀 봄이 올 것 같지 않은 기세인 한국에 비해

홍콩은 좀 후덥지근하고, 흐렸다 -

바로 화장실에 가서 세수를 하고 반팔로 갈아 입어 주었지!

 

홍콩공항의 화장실은!

도대체 이거 누구생각인거지?

 

완전 나쁜아이디어의 자동 물내리기 장치를 보았다.

남자화장실의 소변기 자동 물내리기 처럼 볼일을 다보고 일어서면 물이 쏴- 나오는데...

물도 엄청 튀고, 슥- 지나가는데 물이 뿜어져 나오고-

게다가 노란색이 남아있었어! ;ㅁ;

물내려가는 장면을 보고 있자니 불쾌지수가 마구 치솟는다.

 

난 또 여기서 사용자경험을 고려하지 않은 디자인에 대해 고민하고,

어떤게 더 나은 디자인일까 고민하고,

어떻게봐도 여자가 직접 디자인 하진 않았을꺼야- 하면서-

그만 그만, 쉬자쉬자.

 

2층 버스를 탔으니, 역시 2층에 올라가 주었는데-

차들의 색이 몹시 알록달록하고 우리와 도로의 차들이 반대 방향으로 다녀서 이상해!

꺄- 신기해- 하지만 신기해 하지 않을꺼야.

꺄- 신기해 하고 싶어…

 

pm 3:00

 

홍콩은 알록달록한 곳이었다.

외국인들이 엄청 많고, 버스 정류장도 엄청 많아-

엄청 높은 아파트들에 집밖으로 주렁주렁 매달린 빨래도 엄청 많아 인상적이다.

전체적으로 바랬지만, 알록달록하고 몹시 정신없고 바쁘고 왁자지껄한 분위기!

 

사전지식없이 와 주었던 지라.

적당한 길에 내려서 적당히 배회하다가 적당한 식당을 찾.... 지 못하는 것이다!

식탐조차 별로 없는 나는 어디로 가야할지 모르고 서성이고 있었다.

그리고 배가고파 지쳐가는거지...

결국 뭘 먹어야 할지 모르는 나는 이대로 맥도날드행인가.

말도 안되 ㅠㅠ

 

방황하며 이름 모를 광장에서 이름 모를 사람들 속에 섞여서 먼산을 보고 있던 와중에 
저~ 지척에서 해성처럼 나타난(?) 멋진 중년 비지니스맨 아저씨 두분이 한국말로 대화하며 걷고 있는 장면 발견!
배고픈 아이의 귀가 쫑긋 해지며- 손만 뻗으면 한국이있구나~

역시 음식은 무리하여 도전하지 않는게 좋다- 고 급히 정하고 달려가 두분에게 적당한 음식점을 여쭤봤더니,
흔쾌히 근처의 식당을 추천해주시더라-

저어기 노란간판 집인데... 나 이렇게 복잡한 한자는 모른다고!
 

분위기는 내가 상상한 홍콩의 식당느낌과 비슷- 나의 훌륭한 상상력이란...
혼자 식사중인 비지니스맨들과 우르르 여행객들 그리고 수십가지메뉴에
세월과 많은 손님을 거쳐 이래저래 이빠진 그릇과 낡은 테이블... 그리고 돼지기름 냄새!!

추천메뉴도 받아서 "미트 볼 누들"에 도전!

 

캬~ 국물맛 좋고!

면발은... 칼국수 1/3 두께의 팔랑하려고 하는 면인데 이게 쫄깃하진 않지만 꼬들하고 미끌허니 씹는 맛이 특이해-
 
아무튼 처음 먹어보는 홍콩스러운 맛일꺼야...

가격은 $32.

하지만 미트볼은 코를 막고 먹어야 했다!

도대체 뭘로 만든거냐 이것은!

어쨋건 살코기는 아니었어…

절대 남기지 않겠어- 의 일념으로 미트볼을 다 먹어주었더니,

속이 울렁울렁 한 것이-

입가심으로 길거리 과일쥬스도 도전!

 

의외로 먹히는 영어 덕분에

급 우쭐해져서 쥬스가게 아줌마에게 추천 메뉴까지 물었다!

 

싱타푸~라는 희안한 생김새의 과일 (종단면으로 자르면 불가사리 모양이 될 것 같았어) 과

그에 비해 너무 평범하게 생겨서 이름을 잊은 길쭉하고 초록하며 작은 배 같은 과일을 섞어 쥬스를 만들면!

>_<b 찡긋! 하며 아주머니가 엄지를 치켜세워 주었지.

이거이거 만국 공통 찡긋 우쭐 제스쳐인데~

 

그 맛은 오렌지 쥬스에 당도 조금과 신맛 거의를 빼고 물로 약간 희석한 것에

잔디 또는 샐러리나 애호박을 약간 첨가하여 갈아만들면 만들수 있을 것만 같은 맛이었다.

 

아줌마 라이어~~~~~~!!

다음부턴 나의 경험과 소신을 믿으리라...  

그렇게 먹거리들에 약간의 실패를 했지만, 배가 부르니까 :9

어딜가나 이놈의 가라오케란!!! 이 예쁜 아가씨들은 다 어디서 오는 것이냐 - 
신화랑 클럽 뉴 파리? 알 수 없는 조화지만, 
유혹의 도시로구나!

아니아니. 난 저렴하게만 느껴지는 마사지에 몹시 유혹을 느꼈었지...

알록달록하고 시끌시끌한 홍콩은 먹거리 실패의 우울함따위 금방 날아가는 곳이었다.

그리고 곳곳에서 쉽게 한국음악을 들을 수 있었어!
'노바리노바리노바리~'
멀리 와서 들으니, 이렇게나 즐겁고 흥겨울 수가 있나.

나의 시간은 길지 않았기 때문에
공항으로 돌아오는 버스표를 사기위해 영어 몹시 잘하게 생긴 아저씨에게 말을 걸었더니,

왠걸 나의 기대를 져버리곤 영어는 한톨도 못해서 손짓발짓하며 인도사람들 앞으로 나를 안내해주었다.
아저씨! 인도사람말고 버스표 사는곳 !! -_-

어쨋건 인도사람들 덕분에 무사해진 나는 몹시 기뻐 입으로는 "Thank you~" 라며,
몸은 나도 모르게 90도로 연거푸 배꼽 인사를...

때문인지, 한국사람이냐고 묻는 구나!
"Yes, I am! I'm a Korean!!"
이거! 내가 자신있게 할 수 있는 문장이잖아 :^) 엣헴!

얼떨결에 악수도 하고, 맞절도 하고,
아무튼 나, 좀 대견해진 기분이었어. 

결국 충동구매 조차 할 줄 모르는 소인배 (시간만 있었다면 마사지 유혹에 넘어갔을 지도 모르지만) 로밍은  $248 소심하게 바꿨는데도 불구하고 $130 이나 남겨서 공항으로 돌아간다.
'오호호 많이 남아버렸으니 어쩐다?' 라는 생각도 물론 했었다. (결국 다행이었지만)
 





안녕 침샤추이-
언젠가 기회가 되면 또 보자고!
그땐 별들이 소곤대는 홍콩의 밤거리도 만끽해주겠어.
라며, 그때까진 몹시 즐거웠었지...

am 9:05 출발

인천공항

am 9:45

비행기가 걸어가고 있다. 20km/s 으로...

이... 이거- 나는 거 맞지?

게다가 멈췄어!!!

 

벌써 도착한거냐? 응!?

출발하고 비행기까지 탔는데 실감이 안난다.
 

여긴 어디? 나는 누구?

왜? 갑자기!
 

몇년동안 줄기차게 말해오던 일이지만, 정작 행동은 스스로에게도 몹시 급작스러웠기에
 
마음먹고 이 자리에 있기 까지 도대체 무슨일들이 일어났는지 나도 잘 모르겠다.
 
그냥 그러기로 한 것 그렇게 된 것이다.

무모하다고? 응.

그런데 나는 왜 무모하면 안되는지 모르겠다.

어디론가 다른 나라로 떠나면 뭔가 다를줄 아느냐? 라는 말도 들었었다.

그건 좀 대답이 애매하다. 어디로 가건 가지 않건, 나는 고여 있지 않다.

아무것도 하지 않아도 시간은 가고 시간이 가는 만큼 모든건 변한다.

그리고 나는 집착하지 않으니까 -
 
도망치냐고? 응.

그리고 어떤 문제로 부터는 절대로 도망칠 수 없다는 것도 알고 있고,


지금부터 3시간 동안 홍콩으로 가는데...
 
아침에 공항에서 급히 검색해서 오탑오버 7시간 동안 홍콩의 "침사츄이"에 가보기로 했다.

나리타를 경유할 것을...

벌써부터 물밀듯이 몰려오는 후회라니-
 

급작스러웠던 만큼 이것 저것 고려하지 않고 모든 걸 다 무작정 결정했더니...

홍콩에 가게 되리라고는 상상도 못했는데~

홍콩에는 관심도 없었는데~

홍콩말은 단 한마디도 모르는데~

 

니하오마!

 

아차, 거긴 영어도 쓰던가!?

나의 훌륭한 표현력과 그 길이가 손가락 한마디도 안되는 영어단어 나열 능력으로

홍콩에서의 7시간을 무사히 버텨주마!
 

자- 나는 마음의 준비가 다 됐습니다! 이제 어서 출발해도되요-

아... 갑자기 배아픈것 같고...

머리도 아프고...

아. 허리도 아프고...

또- 목이랑 어깨도 아프고!

안갈래~~ 못가 안되 내려줘! ;ㅁ; 

아직까지는 아시아나 항공 디자인이 젤 예쁘다!
 

안녕~ 한국!

잘있어!

자연을 사랑하는 오지- 라고 했던가!

여긴, 어딜 가나 작고 큰 공원들이 많다.

집 근처에서 도보로 갈 수 있는 곳만해도 3군데- 지만,

그 중 제일 크고, 해질녘 홀로 시도 했다가 몹시 무서워서 실패한 파라마타 공원에 다시 도전하러 갔다.

오늘은 아직 훤-하고, 게다가 싸부님과 주인님도 있으니 하나도 무섭지 않아!

 

라는 이유로 가보고 싶었기도 했지만,

얼마전 마사장이 우리(우리지만 나는 빼고)를 위해 차를 사 주었지!

그래서 주인님의 퀘스트로 공원까지 주행하기를 넣었기에 …

어찌되었건!

 

날씨가 한쪽면은 무척좋았다.

다른 면은 구름-

어딘가 언뜻 보면 윈도우xp 의 기본 배경 같은 광경이 펼쳐지기도 했지만,

그 와 같은것을 마음껏 보고 싶다면 뉴질랜드에 가보란다-

그래 , 뉴질랜드는 조금 따뜻해지면 가보기로 하고!

 

공원이잖아?

공원안에 집도 있다.

풀밭에 양이나 말들이 뛰어 놀고 있..

으면 그럴싸하겠지만, 사실 그런것들은 없고,

한 낮에 바비큐 파티를 하던 여러 가족 무리들이 조금씩 철수 하는 듯한 광경은 여기저기 있었지.

 

 

그리고 놀이터!

말도 안되게 어린이용 놀이기구를 타다가 나무발판위에 양 정강이로 착지 해주었다.

너무 아파서 눈물흘리며 공원이 떠나가라 깔깔거렸지…

덕분에 약간의 시선끌기 성공! (시선 끌어서 어쩔껀데!!)

 

 

그리고 뭐, 공원답게 자연스럽게 강도 흐르고 있다.

이름 모를 새들과 오리 그리고 갈매기(?) 그리고… 비둘기 들이 포동포동하게… :9

 

 

그리고 우리나라처럼 아이들은 오리와 비둘기에게 과자를 나눠주고 있었지…

단지 새우x이 아니라- 감자칩따위라는 것이 다르지만-

어쨋건 새들에게 엑스트라 푸드를 먹이는 것은 자연을 사랑하는 것과 멀지 않은가?

새들에게 수동적인 자유를 주는 것이 진정 자연을 사랑하는 것이냔 말이다!

감자칩 공장이 망하면 비둘기까지 멸망하는 먹이사슬의 생태계가 제대로 된 것은 아니지 않느냐!

(그저 나는 비둘기가 좀 싫을 뿐이고)

그리고 어딜가나 요즘 꼬마들은 좀 건방지고 무섭다.

확실히… 무서워.

그리고 말도 나보다 훨씬 잘하잖아-

 

 

액션에 강한 싸부님과 주인님…

그리고 오지 필수품 thongs!

난 아직 made in korea가 또렷하게 박힌 삼디다스를 고집하고 있지만,

4계절 내도록 플립플롭 하나면 오케이라는데- 삼디다스도 물론 플립플롭 인 거지-

 

 

그리고 크리켓 경기중인 빨간 청년들…

 

 

주둥이가 뾰족한 새-

새나 고양이의 사진을 찍기 위해선 역시, 다가가지 않는척 딴청을 부리며 슬금슬금 다가가서 찍어야 하는거지!

제목은 모르겠지만, 강가에서 자주 볼 수있다.

물위를 날아서 고기를 낚아먹는 날렵한 놈!

 

 

그리고! 이건 바로 박쥐열매!

가슴에 붉은 털을 가진 박쥐가 열매처럼 주렁주렁-

고작 나무 하나의 끄트머리에 이정도 이건만,

이런 나무 수그루에 서식지삼아... 온통 주렁주렁-

이렇게 모여 있으니 깨어 있는 놈들도 제법있어서 역시 몹시 시끄럽다.

하지만, 표지판엔 박쥐들 근처에서 떠들지 말라고…

가까이 가서 보면 눈을 말똥말똥하게 뜨고 쳐다보는 놈도 있었다.

 

박쥐…

그 아이들- 내가 평소에 생각했던 것 보다 훨씬 귀엽게 생겼어.

 

산책보다는 옮겨다니며 앉아서 멍하게 먼 하늘 보다가 배가 고파옴에 따라,

공원나들이는 이쯤에서 끝.

 

집으로 돌아오며 급히 찍은 공원 (보행자용) 입구-

가을이 깊어지고, 기회가 되면 또 보자꾸나!

대략 한달 가량 놀다 보니- 온 몸이 근질 근질 한 참에,
문득 떠오른 생각이 마켓에다가 뭔갈 팔아 보는 것!

내가 잘 할 수 있는 것이 더 있으랴~
무늬 없는 티셔츠에 그림을 그려다 내다 팔기로 했다.
물론 재미로! 아냐, 이거 아마 세컨 잡! 아니 써드 잡?
아무튼...

하지만 이거이거 제법 남는 장사라 부담도 없겠다 싶어서-
조금 진지하게 보통 토요일 마다 열리는 paddington market으로

stallholder market 사전조사에 나섰다!

날씨도 기가 막히게 좋다!!!
호주에선 해마다 썬글라스 사라고 국가에서 돈도 준단다.
햇살이 무섭게 강렬하기 때문에 그럴만도 하겠다~

Roxy는 이래뵈도 우리동네 Pub이야-
낮에는 밥을 팔고 밤에는 술마시고 춤추며 광란의 밤을 보내는 곳이다.
클럽치곤 지나치게 단정하게 생겼다.

train을 타고 씨티에 있는 패딩턴 마켓에 가보기로 했다.


여긴 서울로 치면 센트럴 시티 같은 곳.
응, 그냥 고속버스터미널 같은 곳.
거지꼴을 하고 큰 베낭을 둘러멘 유럽애들이 바글한 곳이다. 
각양각색의 사람들을 볼 수 있어서 재밌지만...
한눈팔면 안되. 



씨티에는 많은 동양인들을 볼 수 있다지만...
그래, 어딜가나 한국인, 중국인, 인도인 들은 콸콸 넘친다.
이것 보라지- 나루토!
반갑다 나루토!!!


파란건 시티투어 트레인, 빨갛고 알록달록한건 시티투어 버스-
저거 타면 시티를 뱅글뱅글 돈다는데-
서울의 시티투어 버스를 떠올려 보면 ... 디자인이 참 유치발랄하다 싶다.
물론 난 서울의 시티투어 버스 조차 타보지 않았으니, 저건 절대 타지 않겠어! 



시티에서 버스를 타고 15분정도 가서 패딩턴 마켓에 도착!!



이 큰 파라솔이 stall!!



역시 알록달록한 현수막!
그리고 여기와서 매번 느끼는 거지만,
어떤사람은 헐벗고다니고 어떤사람은 털옷외투입고 다닌다 @_@
도대체 기후를 예측할 수 없으나, 낮에는 초 가을 아직 추위가 오기전 쯤 이랑 비슷 한 듯 하다.


저기 저- 너덜너덜 하게 널려있는 티셔츠들은 $40 인데!! (4만원돈)
자신감 급 고양 되면서,
나 티셔츠 팔다가 떼부자 되는건 아니겠지? ;ㅁ;



그리고 꼬맹이와 다큰여자개 치와와!



그리고 마켓안에 꼬꼬마들을 위한 놀이터 시설-


그리고 실은 사전조사 보단 구경하느라 더 정신 팔려 있던 주인님과 바나나는...
그리고 후기를 위한 사진을 꾸준히 찍기엔 주의력이 부족한 나는...

마켓에 풍부한 수공예 장신구와 장식품 , 그리고 모자!!! 에 정신이 팔려 이미 조사는 재빨리 하고 집어 치운지 오래-
과연 ... 몇장이나 팔 수 있을 런지-



그리고 다시 시티에 돌아와 귀여운 버스 발견!
네네, 명절(!?) ... 크리스마스나 안작데이 등에 밖을 배회하는 귀여운 초록 애벌레 버스(마음대로 이름 붙이고) 발견!



이 여행자 할아버지 내가 사진기 들이 대니 왠지 카메라를 의식해 주었어.
할아버지 찍는거 아닙니다! 저 그런 사람 아닙니다!



돌아오는 길에 해는 지고...
사전조사 끝!

이제 그림만 그려대면 되는건가...

 

파라마타 강의 산책로는 언제든 아름답지만, 특히 석양때가 좋다.
물론 여기 처음 오고 한동안 나는, 있지도 않은 소녀스러운 감성으로

해질녁만 되면 하늘을 보며 가슴 벅찬 감동을 느껴댔었다.

 

벌써 감흥이 떨어진 건 아니다.

하지만, 너무 빨리 적응 말라는 성숙씨의 말은 이해했다.

아마 감흥이 없어지면, 여행에 의미가 없어질테니- 너무 적응해버리진 마란 소리였던것 같다.

그 뜻이 정확하게 어떤것이었건 간에 나는 재빨리 적응하고 있지만,

감동적인것은 감동적인것이다.

 

해질녁 달려나가 벤치에 앉아서 차분히 해지는 것을 보고 있을 때의 그 평온함은...

항상 처음들은 그러하듯이 그리울 테지. 이 곳...

 

산책이 취미는 아니지만?

왜! 난 요즘 좀 한가한 사람이니까-

한번은 해지는 쪽으로 한번은 그 반대쪽으로 길게 걸어가봤는데 산책로가 잘 만들어져 있기도 하고-

중간중간 조형물과 상세한 지도가 또 인상적이었다. 그래, 친절해~

심심하지 말라는 거지?

 

사진찍은 곳에서는 시티까지 가는 페리를 탈 수도 있지!

그건 완전 멋졌어.

한시간 남짓 걸리는데 하버브릿지 아래를 지나서 오페라 하우스 바로 근처 까지 데려가 주는 훌륭한 노선이다.

그리고 파라마타강에서 출발해 바다로 데려가 주지-

 

두달후면 다른 동네로 주거지를 옮길 계획인데,

그렇게 되면 파라마타로 다시 올 일은 없겠지...

세상은 넓고, 호주도 넓으니까-

 

그 때 까지 나의 석양을 잘 부탁해.

이번엔 무사히 성공한 일본식 치킨카레!!

(라지만, 내마음대로 치킨카레)

 

타이청년 입에도 무사히 성공한!

세계적인 음식 카레 ~ 캬- >_<

 

가쓰오부시 육수를 내어 카레를 끓이고,

야채는 작게 썰고,

닭고기는 오븐에 양념하여 따로 구워주면 대략 :9

 

닭고기를 너무 구워서 바삭+ㅁ+ 했지만,

배고팠으니 맛있었어!

 

여기 닭고기의 닭가슴살은 무척 실한데-

-_- 여긴 남자들도 B컵이고 닭조차도 C컵이다.

 

어깨를 쭉 펴기 허전한 동네야.

마트에 다녀왔다!
처음 보는 것 들이 많아-
마트는 갈 때 마다 눈이 휘둥그레~

이곳에서 유명 마트중 하나인 woolworth에 다녀왔다.


처음보는 채소 많다! 넌 누구냐!!?
Button 어쩌고~ 라는 채소다.
약간의 피망다운 향이 나지만, 정체는 모르겠어.



싸부님과 마미♥ 버섯을 신중하게 고르고 있습니다-
마치 슈퍼마리오에 나오는 것 처럼 큰 양송이 버섯도 있어!
그리고 맛있지- :9


호주에 가면 많은 치즈가 있을테니, 치즈부터 먹어보라던 누구의 말 처럼.
맛있어보이는 치즈가 많다 @_@



하지만 @_@ 고를 수 없을 만큼 너무 많아 ㅠ_ㅠ
누군가의 추천아래 다음 기회에 다시 골라 보로록 하겠어... 라며 치즈들아 안녕 ~



이것이 그 유명한 캥거루 고기!!!
빨갛고 울퉁불퉁하게 만들어놔서 그런지... 좀 무서웠다.
여기와서 살아있는 뛰어다니는 멋진 캥거루씨 보다 고기가 되어 버린 캥거루를 먼저 만나다니 ㅜ_ㅜ 미안-
...언젠가 한번 먹는것을 시도 해보겠지-




그리고 여러가지 우유들!
2개에 $4.50의 여러맛 우유!
500ml 사이즈 가량되는 큰 놈들이다-
하지만... 한국돈으로 5000원 돈이라면 참아줍니다.

여긴 신기하게 우유도 콜라도 큰놈이나 작은놈이나 가격이 거의 비슷하다.
한번에 많이 살수록 유리하니...
지금은 가족이 여러명이니 괜찮아~

혼자살기는 그런 이유로 벌써 겁나기 시작했어.

수많은 버터와 아이스크림도 인상적이었지만,
정신빼놓고 구경하느라.
사진은 여기까지!

내일은 어딜 가볼까~~

 

지난해말과 올해초에 걸쳐 디자인 정글 아카데미에서 툴테크닉 워크샵을 8강과정과 3일 과정- 해서 총 4번 진행했었는데요~
실습부분자료요청도 있고 해서-
실습내용 몇가지를  강좌로 공유할께요.

먼저
1탄 : 눈물의 에드워드와 벨라!
나의 롸버트와 그의 여자의 사진을 향한 저의 마음을 표현해보는 실습을 통하여-
Blend와 친숙해지는 실습을 해보도록 하겠어요 ㅠㅠ

사용한 이미지를 첨부합니다.
롸버트와 그녀의 다정한 폴라로이드 사진위에 눈물이 떨어지고 사진이 번지는 ...
(어쩌다가 이런 예제를 생각해 냈는지?)
예제를 만들어 볼께요.

학습목표
1. Effect
2. Transform
3. Storyboard
4. Behavior
사용해보기.


1. Silverlight 3 Application + Website 프로젝트를 하나 만들어 줍니다.



2. Add Existing Item... 을 선택해 프로젝트에 사용할 이미지를 추가해 보겠습니다. 
(상단에 압축파일로 추가 해 두었어요!)



3. 압축파일안의 sample01~03.png를 아트보드위에 드래그 앤 드롭해서 꺼내 줍니다.
sample.png파일은 grid의 배경으로 쓸것이므로 잠시 내버려 두고!



4. 세 이미지의 이름을 적당히 정해 준다음에 세 이미지를 Group into > Grid로 잡아 넣어줍니다.
이제 이부분이 사진 부분이 될 거에요.

2010.04.07 Day3 강의 ppt파일 공유합니다.

2010.04.06 Day2 강의 ppt파일 공유합니다.

여긴 시드니의 파라마타.

산책!!
현상비 압박으로 폰카메라를 사용해주었다-

호주는 하늘이 몹시 파랗고 맑아서 멀리가는 비행기도 잘보이고 별도 잘보이고~
날씨가 화창해서 기분도 덩달아 화창해지는 산책이었어.

2010.04.05 Day1 강의 ppt파일 공유합니다.

마산에는 볼 것도 없네- 했는데,
조금만 벗어나도 몹시 시골이고 정취있는 곳 들이 많더라~

집 뒷문으로 나가면,
이제는 쓰지 않는 기찻길이 있고-
뒷산이 있고-

봄이 오면 뒷 산 산책로를 따라 벚꽃이 눈처럼 흩날린다.
벤치에 걸터앉아 하늘을 보면 벚꽃과 나뭇가지 사이사이로 봄햇살도 흘러내리지 -

곧 꽃이 피려나...

System Requirements

• Supported Operating Systems: Windows 7; Windows Vista; Windows XP Service Pack 3

Recommended system:

• 2 GHz or faster processor
  
• 1 GB RAM or more
  
• 10 MB of available hard-disk space
  
• 1024 x 768 or higher-resolution monitor running at 24-bit color depth or higher
  
• Microsoft Windows® XP with Service Pack (SP) 2 or later, or Windows Vista (all editions) or Windows 7 (all editions)
  

먼저, Expression Studio 4 beta trial 을 다운 받고,

Expression Studio 4 beta
http://www.microsoft.com/downloads/details.aspx?FamilyID=6f014e07-0053-4aca-84a7-cd82f9aa989f&displaylang=en

추가로 .net framework 4 와 silverlight 4 runtime 을 설치해주면 >_< b

.net framework 4.0.30128.0
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=a9ef9a95-58d2-4e51-a4b7-bea3cc6962cb
Silverlight 4 runtime (window)
http://go.microsoft.com/fwlink/?LinkID=167220


설치를 한번 해봅시다-

설치파일을 실행하면 -
제품키를 한번 물어봅니다-
To obtain a product key, pleas click here.
의 here 부분을 클릭해주면 trial용 key를 생성할 수 있는 페이지로 연결됩니다.

type the two words : 의 인풋박스에 그림으로 보이는 문자 두 단어를 써주면 끝!

계속 진행 하면- 몇가지 부가적인 것들과  blend 4 beta가 설치되는군요!!
+ㅁ+ 그럼 이제 신나는 blend 4 beta 탐구로 떠날 준비가 다되었습니다!

창경궁에 다녀왔다.

서울에 3년간 있으면서 가본 명소라곤 청계천, 덕수궁, 인사동 스쳐지나가기 정도-
서울을 뜬다고 생각하니 마음이 급해져서 이사일을 이틀 남겨두고 창경궁에 갔는데
무지한 서울시민으로 입장시간을 전혀 생각하지 못하여
첫날 5분차이로 실패-
둘째날은 뒤늦게 출발해놓고 배짱좋게 버스를 타서 10분 늦어 실패- 할 뻔! 했으나...
입구에서 직원아저씨들에게 떼도 쓰고, 어림도 없는 애교도 조금 부리고-
약간의 사기(?)도 치고! '아저씨, 저 이제 다시 한국 안올지도 몰라요- 들어가게 해주세요-'
창경궁에 입장했다!

마침 몹시 좋아하는 날씨로 안개가 자욱하고 비가 부슬부슬 오다말다 하니,
한산하다못해 스산하기까지 해서 어찌나 운치있던지-
왜 진작에 와 보지 않았을까...

세번째 롤이었는데,
감동하여 사진찍는것에는 집중도 못했거니와
도중에 셔터 밧데리가 나가며 동시에 조리개가 꼬여서 남은 사진은 OTL

만약 내가 다시 한국에 돌아오고,
서울에 살게 되며,
비가 부슬부슬 오는 날씨를 맞이 하게 된다면-
나는 두번 고민 않고 창경궁으로 달려갈것이라는 마음을 먹으며...

이어서 ScrollBar 에 디자인을 적용해 볼께요.

2까지는 ListBox Template안의 ScrollViewer의 Template을 Edit 하고있었죠-

ScrollBar Template
이 ScrollViewer의 Template에서 디자인을 적용할 VerticalScrollBar를 선택합니다.

1. VerticalScrollBar > Edit Template > Edit a Copy...



2. VerticalScrollBar의 Template에서 구조를 보면 그림과 같이 Vertical, Horizontal  Scroll모두 가지고 있는 모습을 볼 수 있습니다. 현재 디자인으로는 ScrollBar의 Small Decrease와 Small Increase만 필요하기때문에 나머지 엘리먼트들은 지워버려도 됩니다.



3. 이 Small ~ 부분은 우리가 어디서나 볼 수 있는 ScrollBar의 화살표가 있는 버튼 부분과 같은 기능을 하며, 이 부분 하나로 또 하나의 컨트롤을 구성하고 있기때문에 Template을 수정 할 수 있습니다.
VerticalSmallIncrease > Edit Template > Create Empty...
기본 컨트롤의 구조와는 전혀 다른 버튼을 만들어 보기 위해 Create Empty를 선택해 봅니다.



4. 위 그림과 같이 Control에 Grid하나만 달랑 들어 있는 구조로 Template 이 새로 만들어 졌습니다.
여기에 버튼의 바탕 부분이 될 Eclipse를 하나 그려줍니다.



5. Brushes 속성의
1) Fill 선택
2) Gradient Brush선택
3) Radial Gradient선택
해주고 컬러바에서 그림처럼 컬러를 지정 해 봅니다.



6. 버튼에 빛나는 부분을 만들어 주기 위해서  Eclipse를 하나 더 그려주고 Fill 속성의 컬러에 alpha값을 지정해줍니다.



7. Pen tool을 이용하여 화살표를 그려 줍니다.

이제 이 버튼의 State를 설정 해볼께요.


8. MouseOver State를 선택하고 Grid의 Scale x,y를 1.1 정도로 설정 해줍니다.

Tip. 위 상황과 같이 버튼의 현재크기와 상관없이 일정비율로 늘어나거나 줄어드는 Transform일 때는 Scale을 넣어주고,
Size가 특정크기로 커지거나 줄어들때는 Width, Height값을 조정 해줍니다.



9. Pressed State를 선택하고 Grid의 Scale을 0.9로 설정 해 줍니다.
이제, 버튼에 Rollover가 됐을때 버튼이 약간 커지고 Press를 선택했을때 눌러지는 효과처럼 약간 작아지게 되었습니다.



10. 좀 더 자연스러운 press 느낌을 주기 위해 화살표 부분 path의 컬러를 조금 진하게 만들어 줍니다.

EasingFunction
Silverlight에서만 사용 할 수 있는 이 Easing Function은 StoryBoard나 Visual State의 Transition에서 자연스러운 애니메이션을 쉽게 설정 할 수 있게 해줍니다.
미리 설정 되어있는 가속,감속 그래프들이 제공되며 그래프를 선택을 하면 적용됩니다.



11. Common States의 Transiton에서 각 State들이 쫀득(!) 하게 움직이게 해주기 위하여 EasingFunction을 설정해 주겠어요.
EasingFunction  버튼을 눌러 봅니다.



12. 위 그림과 같이 여러가지의 그래프가 미리 설정되어 있고 이 중 원하는 그래프를 선택해줍니다.
이 디자인에서는 탄성이 있는 버튼 처럼 보여지기 위해 Back의 Out그래프를 선택해줍니다.



13. 그리고 Transition 타임을 0.2s 정도 설정 해주고-



14. Object panel의 Return버튼을 눌러 Template 에서 빠져 나가 봅시다.

현재 decrease버튼과 increase버튼이 똑같이 생기고 화살표 방향만 틀리기 때문에 방금 만든 Template을 적용하고 화살표 Path의 모양만 바꿔줄꺼에요.



15. Tempate이 지정되지 않은 나머지 버튼을 선택하고 Edit Template > Apply Resource > RepeatButtonControlTemplate1(방금작업했던 Template)을 선택합니다.



16. 그리고 화살표를 수정할 버튼을 선택하고 > Edit Template > Edit a Copy...를 선택합니다.



17. 수정을 화살표 path 를 선택하고 Transform에서 Flip > Flip Y axis를 선택하여 path를 Y축으로 반전 시켜 줍니다.

버튼들의 Template 은 다 되었으니 Object panel의 Return 버튼을 눌러 ScrollBar Template 으로 돌아가서,
VerticalRoot Grid의 필요없는 Row 를 삭제하여 레이아웃을 바로 잡아 봅니다.



18. VerticalRoot 를 선택하고 Properties panel의 Layout 의 아래 화살표 버튼을 눌러 확장하여,
RowDefinitions(Collection) 의 오른쪽 버튼을 클릭합니다.



19. 위 그림과 같이 Grid의 Row를 한번에 관리 할 수 있는 창이 뜹니다. small~버튼들이 들어있는 0, 4 Row는 빼고 나머지는 다 Remove item 버튼을 클릭하여, 삭제 해줍니다. (다중선택 안됩니다.)



20. Small ~ 친구들의 사이즈를  60*60정도로 설정해주어 적당하게 레이아웃을 설정 해주면 끝.


History Scope에서 ListBox를 선택하여 Template 에서 빠져 나온다음,

Run Project로 실행 해 봅니다!
잘 돌아가고 있나요?


띄엄띄엄썼더니, 흐름이 원활한지 모르겠네요!
잘안되는부분있으면 질문주세요 +ㅁ+

'1. Grid의 Column과 DataBinding' 에 이어서 '2. State와 StoryBoard, Opacity Mask'를 살펴 볼께요.

Visual State
Visual State를 설정하는 State패널을 봅시다.

1. Base가 선택되어 있습니다.
Base 상태의 디자인 설정합니다.



2. Base 상태에선 보이지 않을 BigImage 를 선택하고 Visibility 프로퍼티를 Collapsed시켜둡니다.
 


3. 보여지고 있는 TextBlock과 SmallImage의 레이아웃을 설정해줍니다.



4. Silverlight 프로젝트의 VSM 에서는 각 State 간의 Transition을 손쉽게 설정 할 수있습니다.
Common States간의 Transition 값을 0.2초 가량 설정 해줍니다.



5. MouseOver State를 설정해 봅시다.
MouseOver가 되었을 때 TextBlock의 Foreground Color를 조금 진한 색으로 변경하여,
MouseOver시 글씨의 색이 진해지게 설정합니다.

Storyboard
State별로 애니메이션, 모션 등을 작성 할 수 있는  StoryBoard를 설정 해 봅니다.


6. Selected State를 설정해봅니다.
List의 Item이 Select 되었을 때의 플레이될 스토리보드를 만들어 주기 위해
Objects and Timeline panel에서 Selected 오른쪽의 Show Timeline 버튼을 눌러 줍니다.


7. TextBlock을 선택하고 타임라인의 0.2초 지점을 선택한 후 keyframe을 추가 해준 뒤
TextBlock의 font size 프로퍼티를 32px정도로 커지게 조정 해 줍니다.



8. SmallImage의 Opacity는 0%로 변경해줍니다.



9. BigImage는 0% 에서 서서히 보이기 위해 0초의 keyframe에는 opacity 를 0%, Visibility를 Visible로 -



10. 0.2초의 keyfram에서는 작아졌다가 커져 보이기 위해 BigImage의 Scale을 x,y 0.5초로 설정해줍니다.


11. 그리고 0.4초에 KeyFrame을 추가하고 Opacity를 100%, Scale을 1, 1로 설정해 줍니다.



12. 이제 아트보드위의 ListBox버튼을 클릭하여 Template을 빠져나갑니다.

ListBox자체의 디자인과 ScrollBar등의 디자인을 적용하기 위해 ListBox 의 Template를 설정해줍니다.


13. ListBox > Edit Template > Edit a Copy... 로 기본컨트롤로 부터 복사된 ListBox Template를 만듭니다.



14. FoodListBoxStyle이라고 이름을 지어주고 OK



15. Border안에 ScrollViewer가 들어있는 구조의 ListBox에서 Border 속성을 Reset시켜버리면 ListBox의 테두리가 없어집니다.


처음 디자인의 스크롤들이 스르륵 없어지는 모양을 만들어 주기위해 ScrollViewer의 Presenter 부분에 Opacity Mask를 줄거에요.
16. 그래서 ScrollViewer > Edit Template > Edit a Copy... 를 선택하여 ScrollViewer의 Template을 만듭니다.



17. FoodScrollViewerStyle이라고 이름을 지어 주었습니다.

Opacity Mask
색과는 상관없이 표시 Color의 Alpha값의 %에 따라 엘리먼트를 Mask해주는 기능을 설정해봅니다. 


18. ScrollViewer의 Template는 그림과 같은 구조를 가지고 있고
그 중 제목 그대로 ScrollContentPresenter라는 부분이 Scroll할 Content를 보여 주는 부분입니다. 

1) 이 ScrollContentPresenter를 선택하고
2) 오른쪽 Brushes에서 OpacityMask를 선택하고
3) Editor의 하늘색 표시된 컬러바 위를 클릭해주어 색을 추가 해줍니다.



19. 컬러의 양쪽 끝을 선택하여 각각 alpha값을 0%로 설정 해줍니다.



20. Gradient tool을 선택하면 아트보드위의 엘리먼트에서  Gradient의 영역, 방향을 조절 할 수 있습니다.
동그라미들을 선택하여 적당하게 Opacity Mask를 설정해줍니다.


이제 ,  ScrollBar에 디자인을 적용하고 약간의 설정을 해 주면 끝입니다.
3번에서 이어서!

------------------------------------------------------------------------------
1. Grid의 Column과 DataBinding
2. State와 StoryBoard, Opacity Mask
3. ScrollBar Template

첫롤을 데리고 나가,
필카임을 망각한채 이리저리 찍어댔던 의미없는 사진 모음집!

24장중에 제대로 찍힌 사진이 12장 뿐이었다는건 비밀...

3년 서울 생활에 적어도 3명이상의 친구를 사귀었고,

함께 즐거움도 나누었으니-

그정도로도 충분히 훌륭했다. 라는 생각을 하며...

 

-_- 공도오빠는 사진이 죄다 포커스가 나가서 결국 한장도 못건졌소 ㅠ