Project Type : Silverlight

Expression Blend 3 에서 추가할 수 있는 프로젝트와 아이템의 템플릿이 늘어났습니다. 갑자기 늘어난 템플릿에 당황스러운 분들도 계실것 같아서 간단하게 소개를 해 드릴까 합니다. 먼저 새 프로젝트를 생성하려고 하면 다음과 같은 창이 뜹니다.

Project Creation

1. Silverlight 3 Application + Website

 

실버라이트 애플리케이션과 웹사이트가 같이 생성됩니다. html 페이지가 기본적으로 들어있는 폴더가 생깁니다.




2. Silverlight 3 Application




실버라이트 애플리케이션만을 생성할 경우에 선택합니다. 웹사이트가 들어있지 않은 프로젝트 정보가 보여질 것입니다.




이번 업데이트가 이루어지면서 아이템 템플릿이 추가 되었습니다. 일단 위에 그림에서도 보여지듯이 실버라이트의 기본 컨트롤이 Page.xaml 에서 MainControl.xaml 로 바뀌었습니다.  새로운 아이템 템플릿을 어떠한 용도에 생성해야 하는지 알아보도록 하겠습니다.


Item Creation


1. UesrControl

객체화 하여 재사용 할 수 있는 단위의 컨트롤을 만들때 생성합니다. 예를 들어 웹사이트의 메인 페이지를 구성한다고 할 때, 상단 메뉴, 하단메뉴, 바로가기 메뉴 등을 유저컨트롤 단위로 나누어 만들 수 있습니다. 혹은 달력과 같은 애플리케이션을 만들 경우에는 반복되어 사용되는 날짜와 월과 같은 단위를 유저컨트롤로 나누게 됩니다. 유저컨트롤 안에는 다른 컨트롤이나 오브젝트들이 들어갈 수 있습니다.



프로젝트를 살펴보면 UserControl1.xaml 이라는 유저컨트롤이 생성되었습니다.




2. ChildWindow


이번에 추가된 템플릿입니다. 실버라이트 애플리케이션에서 팝업창으로 보여질 ChildWindow를 생성합니다.



항목을 선택하면 아트보드에 창이 하나 생성되어 있는 것을 확인할 수 있습니다. OK와 Cancel 버튼이 기본으로 들어있습니다.




3. Resource Dictionary

이것도 WPF에서만 있던 템플릿인데 이제 실버라이트에도 생겼네요 :) 스타일과 같은 리소스를 저장하여 갖다 쓸 수 있습니다. 기존에는 리소스를 해당 페이지 일일이 넣어주거나 app.xaml 에 몰아서 저장해야 했기 때문에, 스타일 관리가 쉽지 않았습니다. 그러나 Resource Dictionary를 쓰면 용도별로 리소스를 저장해서 참조하면 되기 때문에 편리하게 관리할 수 있습니다.



다음과 같이 ResourceDictionary.xaml 파일이 생성된 것을 확인할 수 있습니다.



그러나 ResourceDictionary 파일은 실제로 레이아웃을 구성하는 코드가 아니기 때문에 디자인 뷰어로 보거나 수정할 수 없습니다. 수정을 하려면 적용된 컨트롤의 Edit 모드로 들어가서 수정해야 합니다.




4. Page

프레임에서 호출할 수 있는 컨텐츠의 단위 입니다. 예전에는 이 Page가 실버라이트의 기본 단위였고 블렌드에서 추가 생성할 수 없었는데 이제 추가 생성이 가능합니다. 웹사이트를 만든다면 서브페이지를 이러한 Page 단위로 만들면 됩니다. .



Page.xaml을 생성하면 다음과 같이 파일이 생성됩니다. LayoutRoot 안에는 유저컨트롤과 마찬가지로 각종 컨트롤이나 오브젝트가 들어갈 수 있습니다.




5. Class

클래스를 생성합니다.



클래스를 생성하면 다음과 같이 Class.cs 라는 파일이 생성되고 C# 코드로 이루어진 파일이 보여집니다. 디자이너가 생성할 일은 거의 없겠죠? :)




이렇게 생성할 수 있는 프로젝트와 아이템의 성격이 각각 다르기 때문에 용도에 알맞게 생성해야 합니다.


날씨가 갑자기 더워졌어요 ㅎㅎ 저는 사무실을 이사했는데 청계천과 가까워 점심먹고 산책을 다니고 있습니다.. 이것도 날이 더워져 얼마 못할듯 -_-;; 다들 춘곤증의 압박을 이겨내시기 바랍니다. 한 주 마무리 잘하시기 바랍니다.

Posted by 짱묜

안녕하세요. 오늘은 눈이 안오고 비가 오네요. 내일부터 엄청 추워진다고 하니 걱정입니다..ㅠㅠ하핫;; 집에서 이불 돌돌말기 신공이 나날이 늘어가고 있더라는;;

객체의 투명도를 조절하는 경우에는 두 가지 방법이 있습니다. Opacity와 Alpha값을 사용해서 바꿀 수 있는데요. 사람들은 흔히 "오빠~서티" 혹은 "알파값" 을 이용하여 투명도를 조절하기 때문에 혼동될 수가 있지만, 블렌드에서는 약간의 차이가 있습니다.

블렌드를 살펴보면 다음과 같은 부분이 있습니다.


RGBA Red, Green, Blue, Alpha를 나타냅니다. 총 32비트(4바이트)로 구성되어 있으며 16진수를 이용하여 예) #FFE07810 이렇게 표현합니다. 그리고 이 8자리수의 구성은 다음과 같습니다.


16진수의 제일 앞의 두 자리는 Alpha 값을 나타냅니다. Alpha 값에서 수치를 바꾸어주면 16진수의 제일 앞 두자리가 바뀌게 됩니다. 그렇다고 16진수의 앞 두자리에 수를 직접 입력한다고 해서 Alpha% 값과 동일하게 바뀌는 것은 아닙니다. :) 이렇게 Alpha 값을 조절하여 객체의 색을 투명하게 만들어 줄 수 있습니다.

그렇다면 다른 한가지는 Opacity를 이용한 방법입니다.


Appearance 패널에 보면 Opacity 항목이 있습니다. 이 항목에서도 %를 조절하여 객체를 투명하게 만들어 줄 수 있습니다.

두가지 방법 다 객체를 투명하게 처리할 수 있어요. 하지만, AlphaFillStroke에 들어가는 고유의 색상에 개별적으로 영향을 미치기 때문에 SolidBrushGradientBrush포인트마다 다르게 투명도를 줄 수 있습니다. 이에 반해 Opacity객체 전체에 투명도를 조절하기 때문에 FillStroke를 분리하여 투명도를 줄 수 없습니다.

다음 그림을 통해서 차이를 알아봅시다.



앞의 사각형의 Fill 부분에 Alpha 값을 50%로 해주었을 때에는 Stroke 부분이 전혀 영향을 받지 않은것 을 볼 수 있습니다. 그렇지만 두번째 사각형에 Opacity50%로 주니 FillStroke가 분리되지 않고 둘 다 영향을 받은것 을 확인할 수 있습니다.

이제 아시겠죠? ^_^ 헤헤헤~~~ 그럼 다음 시간에는 다른 팁으로 찾아오겠습니다!!

Posted by 짱묜

오늘은 Stack 패널에 대해서 알아볼께요.

Stack패널은 자신만의 첨부 프로퍼티를 가지지 않고 자식 엘리먼트가 추가되는 순서대로 누적됩니다.
오직 Orientation 프로퍼티만을 가지고 있는데요. HorizontalVertical로 설정할 수 있고
기본값은 Vertical입니다. 예제에서 자주 볼 수 있는 편리한 패널이에요.



그림을 보면 사각형이 5개 나열되어 있습니다. 코드를 보면 아주 간단합니다.
Stack패널 안의 오브젝트들에는 어떠한 프로퍼티도 들어있지 않지만 자식개체가 생성되는 순서대로
자동 배치됩니다.



마진값으로 각 개체간에 공백을 줄 수 있습니다. 그러나 GridCanvas와 같은 패널과 달리
마진값을 주게 되면 다음 객체들의 위치가 밀리게 됩니다. 즉 GridCanvas에 들어있는 오브젝트는
다른 오브젝트의 마진값에 영향을 받지 않지만, Stack패널에 들어있는 오브젝트는 다른오브젝트의
마진값에 영향을 받게되는 것입니다.

^^ 어제 회식에서 무리를 좀 하는 바람에..오늘 종일 시체놀이 하다가 하루가 다 갔네요 ㅠ_ㅠ..ㅋㅋ
좋은 주말 되세요.

Posted by 짱묜
날씨가 점점 여름에 가까워지고 있네요..모기도 출몰하고 -.-;;
훈스 시삽들이 나오는 ReMix 행사에 다녀오고 싶었지만 못갔습니다 ㅠ_ㅠ 엉엉~ㅋㅋ

오늘은 Canvas패널에 대해서 알아보도록 하겠습니다.
짱묜이 아주..만만하게 봤다던 그 패널입지요...-.-ㅋㅋ

Canvas 패널은 가장 기본적인 패널이고 쉽게 사용할 수 있습니다.
지난 강좌에 말씀드렸듯이 익스프레션 블렌드비주얼 스튜디오에서는 기본 레이아웃이 Grid 패널이지만,
디자이너들이 주로 사용하는 익스프레션 디자인툴에서 XAML 로 코드를 내보낼 경우 기본 레이아웃은
Canvas 입니다.

Canvas패널은 명시적인 좌표값을 이용하여 엘리먼트의 위치를 결정합니다.
Left, Top, Right, Bottom 프로퍼티를 가지고 있는데요. 실버라이트에서는 LeftTop만 지원합니다.



XAML 코드는 아래와 같습니다.



Canvas.LeftCanvas.Top 속성을 이용하여 사각형을  Canvas 패널에 배치한것입니다.
간단하죠? ^^

다음시간에는 StackPanel 에 대해서 알아보도록 하겠습니다.
Posted by 짱묜
안녕하세요~ 여러분^^ (안녕이라고 하기엔 새벽1시잖냐!!;;)

지난시간까지 블렌드 튜토리얼 강좌를 마치고 활용강좌를 쓰려고 했으나,
단순한 설명만으로는 부족한 부분들이 많을것 같아서 실제로 작업에 쓰이는 경우에 꼭 필요한
내용을 더 쓰려고 합니다. 중간중간 활용강좌도 진행할께요 ^^
이것은 전적으로 제가 블렌드를 다루고 실무에서 무한삽질(?)을 하면서
겪은 부분을 쓴 것이기에 지극히 개인적일 수도 있지만, 도움이 되시리라 생각합니다.

블렌드에서는 레이아웃 패널을 이용하여 다양하게 오브젝트를 배치할 수 있습니다.
제가 처음 작업하였을 때는 무조건 Canvas만 썼습니다. 왜냐구요? 이유는 아주 단순하게도,
그냥 평범해보였기 때문입니다. -_-;; 하하;;
솔직히 다른 패널은 뭐하는 애들인지도 잘 모르겠고, 아무 모양도 없이 오브젝트들이 잘 들어가는
Canvas만 주구장창 썼드랬죠.. 그런데 알고보니 그에 맞는 용도가 다 있더군요.^^;
그러나 레이아웃 패널은 눈에 보이는 속성이 아니기 때문에 각 패널의 속성을 알지 못하고서는
쓰기가 어려웠습니다. 그래서 오늘부터 레이아웃 패널에 대해서 하나씩 알려드릴께요.

레이아웃 패널에는 Grid, Canvas, Stack, ScrollViewer, Border 이렇게 5가지 패널이
있고 WPF용에서는 몇 개의 패널이 더 있지만, 실버라이트를 기준으로 하여 설명합니다.

먼저 Grid 패널을 첫 주자로 파헤쳐봅시다 -_ -+

Grid 패널은 비주얼 스튜디오익스프레션 블렌드의 기본 레이아웃 패널입니다.
그렇기 때문에 제일 자주 쓰일수 있습니다. 이녀석의 큰 특징은 HTML의 테이블과 아주
비슷하다는 것입니다.

테이블처럼 행과 열을 가지고 있으며 divider를 이용하여 행과 열을 조절할 수도 있습니다.



위의 저 빨간 네모 친 부분이 디바이더이고, 드래그로 움직일 수 있습니다.

Grid 패널은 기본적으로는 행과 열의 값을 0으로 가지는 하나로 된 레이아웃이지만
RowDefinitionColumnDefinition 엘리먼트를 사용하여 행과 열을 추가할 수 있습니다.

먼저 코드를 살펴보겠습니다.



Main이라는 이름을 가진 Grid를 생성하고 가로가 200이고 높이가 100인 행과 열을 2개씩 생성 하였습니다.
그리고 그 안에는 사각형 4개와 텍스트박스 4개를 넣었는데요. 주목해야할 부분은 Grid.RowGrid.Column
입니다. 값이 "0,0" "0.1", "1,0", "1,1" 을 가지고 있죠?
기본적으로 행과 열은 기본값을 "0"으로 가지고 있습니다.

그리하여 코드대로 디자인된 패널을 살펴보면 다음과 같습니다.



물론 "Grid.Row="0" Grid.Column="0" 의 사각형이 행과 열을 변경하지 않고도
"Grid.Row="0" Grid.Column="1"의 위치에 놓이게 할 수는 있습니다.
그러나 정렬기준에 맞추어 Margin 값이 변경되게 됩니다.

Grid 패널이 좌측 정렬일 경우,
"Grid.Row="0" Grid.Column="0"의 사각형의 LeftMargin 값이 0인 상태에서
행과 열을 변경하지 않고 "Grid.Row="0" Grid.Column="1"의 위치에 놓인다면
LeftMargin 값이 200이 되겠죠? (Column 가로길이값 200을 더해서)

흠..^^ 이해가 잘 되셨는지 모르겠네요. 테이블의 개념을 생각하면 이해가 쉬울듯 싶습니다.

오늘은 이렇게 Grid 패널에 대해서 알아보았구요. 다음시간에는 Canvas 패널에 대해서 알아보겠습니다.

Posted by 짱묜
자~~ 마지막 패널강좌를 하겠습니다. 길고 긴 여정이었죠? ^^;

Results 패널에서 Output 탭을 보면 프로젝트를 빌드할 경우 실행 결과를 알려줍니다.



Errors 탭을 보면 에러가 생길경우 에러의 리스트를 보여줍니다. 몇째쭐에서 어떠한 오류가 났는지 알려주기
때문에 오류를 수정하기 좋습니다.



리소스를 쓸 수 없다고 나오죠? ^^


이렇게 블렌드의 모든 패널 설명을 마쳤습니다.
부족한 부분도 많겠지만 툴에 대하여 전반적인 구성을 알아보았네요.
다음 시간부터는 활용강좌를 위주로 쓰도록 하겠습니다.
XAML도 다룰 예정이구요..^^

연휴인데 일이 많아서 놀기는 글렀네요..T^T
그래도 오늘은 저녁에 잠깐 촛불집회에 다녀오려고 합니다..
머릿수라도 하나 보태야겠다는 심정으로..^^;

여러분도 좋은 날 되시기 바래요.^^
Posted by 짱묜

처음 펼쳐진 패널의 아래방향 화살표를 누르면 설정을 더 미세하게 할 수 있습니다.
항목이 너무 많기 때문에 주된 메뉴만 설명을 하도록 하겠습니다.



Width : 레이아웃의 가로길이를 설정합니다.

Height : 레이아웃의 세로길이를 설정합니다.

Row : 행을 지정합니다.

Column : 열을 지정합니다.  테이블과 비슷하게 생각하시면 됩니다.

HorizontalAlignment : 수평 정렬을 설정합니다.

VerticalAlignment : 수직 정렬을 설정합니다.

Margin : 여백을 설정합니다.

다음은 Common Properties 에 대해서 알아봅니다.

 

Cursor : 커서의 모양을 선택할 수 있습니다.

DataContext : 데이터베이스 연결을 하는것 같은데 잘 모르겠네요. ^_^;

Transform 패널에서는 오브젝트의 크기나, 각도, 기울기 등을 조절할 수 있습니다.



Miscellaneous 패널에서는 선택한 오브젝트의 특성에 맞는 항목들이 나타납니다.

버튼을 선택했을 경우 위와 같은 창이 뜨는데요. 몇가지만 설명하자면..

ClickMode로 클릭할경우의 모드를 설정할 수 있고, 폰트 사이즈스타일, 수정 여부를 설정할 수 있습니다.

ToolTip 을 적게되면 실행페이지에서 오브젝트에 대한 설명이 보여집니다.


이렇게 Propertise 패널로 오브젝트의 설정을 할 수 있어요. 속성이 많으니 이것저것 사용해 보시기 바래요.
몰라서 못쓰면 너무 억울하잖아요 ㅋㄷㅋㄷ (너나 잘해 묜..-.-)

그럼 다음 페이지에서는~ 마지막으로 Results 패널에 대해서 알아보도록 하겠습니다.

Posted by 짱묜

안녕하세요~~ ^^ 오랜만입니다. 요즘 프로젝트 일정도 그렇고,,
^_^ 서포터즈(?) 도 하고 해서 바빴네요..제 블로그도 잘 못들여다보고ㅠ_ㅠ..ㅋ
오늘 오랜만에 포스팅 함 갑니다 -ㅅ-!

Properties 패널에 대해서 알아볼께요. 이 패널은 너~무 길어서 중간중간 잘라서 설명하겠습니다.



Name : 오브젝트나 레이어의 이름을 지어줄 수 있습니다. XAML 코드에서는 x:Name 으로 표시되는
이름이 이부분입니다.

Type : Button, Rectangle, Grid 등 여러가지 타입이 표시됩니다.

1번 Properties :  현재 보여지는 Properties 창을 나타냅니다.

2번 Events : 오브젝트에 적용된 Events 가 나타납니다. 선택하면 다음과 같은 창이 뜨는데요.



버튼 컨트롤을 선택했을 경우, 적용할 수 있는 이벤트 속성들이 나타나며 입력란에 메소드의 이름을
쓰고 Enter 키를 누르면 비주얼스튜디오로 이동하게 됩니다. 그리고 CS(코드 비하인드) 파일에
입력한 이름으로 코드가 생성됩니다.



뭐, 자주 사용될지는 잘 모르겠습니다. ^^; 개발자가 아니라서.. 그렇지만 오브젝트가 가지고 있는 이벤트 속성을
보기에는 좋을것 같습니다.

Search : Properties 패널 안에 찾고 싶은 Properties 를 입력하면 바로 찾아지게 됩니다. Opacity
쳐보려고 했더니 이렇게 관련 프로퍼티가 나타나더라구요. 그러나 이역시도 자주 사용하게 되진 않네요.



다음은 Brushes 패널입니다.



BackGround : 오브젝트의 배경색을 칠해줍니다.

ForeGround : 오브젝트의 전경색을 칠해줍니다.

OpacityMask : 보이지 않는 마스크인데요. 색을 지정하여도 눈에 보이지 않습니다.

1번 No Brush : 아무런 색도 지정하지 않습니다.

2번 Solid Color Brush : 단색을 지정합니다.

3번 Gradient Brush : 그라데이션이 적용된 색을 지정합니다.

4번 Brush resources : 리소스로 정의된 브러시를 선택하여 지정할 수 있습니다.

Editor : 색을 지정합니다. 스포이드를 사용하여 지정할수도 있습니다. 5번  #FFF9CO23 은 색의 값을
나타내는 코드이며 직접 지정할 수도 있습니다. 숫자 옆의 아이콘을 눌러서 아래와 같이 Color Resources
로 저장하면 탭을 누르면 아래와 같이 저장된 색과 코드를 볼 수 있습니다.

 

6번 +Brush를 누르면 브러시로 저장됩니다.



Appearance를 살펴볼께요.



Opacity : 투명도를 설정할 수 있습니다.

Visibility : 오브젝트의 보임을 설정할 수 있습니다. 속성으로는 Visible, Hidden, Collapsed가 있습니다.
Hidden은 요소가 레이아웃 공간을 차지하지만 보이지 않게 하는것이고 , Collapsed는 프로퍼티가
레이아웃공간을 차지하지 않습니다.

다음장에 이어서 하도록 하겠습니다.

Posted by 짱묜
오늘은 Project 패널에 대해서 알아보도록 하겠습니다.

플래시 같은 경우는 보통 하나로 된 .fla 원본 작업파일이 생성되고, 한번 실행하고 난 이후에는
플러그인이 설치되면 볼 수 있는 .swf 파일이 생성되지요.

실버라이트는 어떨까요?
이 낯설은 파일 무더기(?)들~~ 자, 이제 우리는 이녀석들과 친해져야합니다 ^ㅡ^*



1. 프로젝트가 여러개 모여 구성된 솔루션 파일입니다.

2. 제가 "Analog Clock"라고 이름을 지어준 프로젝트 파일입니다. 프로젝트 파일이란 실행파일을 만들기
위한 구성 파일들의 집합입니다.

3. References 폴더 안에는 여러가지 역할을 하는 .dll 파일들이 참조되어 있습니다.

4. Properties 폴더 안에는 어셈블리 정보가 들어있어요.. 정확히는 잘 모르겠네요 ^^;

5. App.xaml 파일은 프로그램 전체에서 공통으로 사용하는 브러쉬와 스타일 오브젝트 같은 리소스 선언에
사용됩니다. 낯설지 않죠?

6. clock_bg.xaml 이 파일은 Add Existing Item 메뉴로 추가한 파일이구요, 사용자가 파일을 추가할 경우
이렇게 추가됩니다.

7. Page.xaml 파일은 기본적으로 프로그램이 실행될 때 로드되는 초기 UI 컨트롤 입니다. 우리가 실버라이트를
실행할때 이 페이지가 기본이 됩니다. 그리고 Page.xaml.cs 파일에서 이벤트를 제어할 수 있습니다.


8. 실버라이트 웹 프로젝트 파일입니다.

9. Bin 폴더 안에는 ASP.NET의 컴파일된 어셈블리들이 들어있습니다.

10. ClientBin 폴더 안에는 실버라이트어셈블리들이 들어있습니다.

11. .aspx 파일은 HTML을 만들어주는 ASP.NET서버측 페이지입니다. 닷넷으로 개발된 웹사이트의
페이지 확장자가 이렇죠.

12. 여러분도 잘 아시는 HTML 페이지! 드디어 눈에 익은 녀석이..T^T..이리 반가울때가 있네요..ㅋ

13. web.config 파일은 웹 응용프로그램의 설정 정보를 저장하고 있습니다.

이렇게 파일이 구성되지만, 우리는 주로 파란색 글씨의 파일들을 많이 다루게 될 것입니다.
어셈블리가 뭔지, dll이 뭔지 잘 이해가 안가도 괜찮아요. ^^ 이런 역할을 하는것이구나 하면 됩니다.

사실 저도 잘 모르는 부분도 많아서 아는 분들께 물어가며, 웹을 뒤져가며 썼는데요..
그 언젠가 묜이가 프로그램을 정복하는 날..이 오면..그땐..-_-멋드러지게 알려드리죠 ㅠㅠ;

이렇게 간단히라도 설명하고 넘어가고자 한 이유는.. 개발자 분들이야 익숙할테지만
디자이너였던 제가 처음에 실버라이트를 접하면서 이 낯설은 프로젝트 파일들에 대해서 매우
거부감이 들었기 때문입니다. 

행여, 내가 뭘 잘못건드려서 오류가 생기진 않을까 하는 걱정에 작업하면서 파일 하나하나 건드리기를
너무 소심(?)하게 했거든요. 

이제는 우리가 주로 만질 녀석들을 잘 파악했으니 쫄지말고 합시다!! ^^ 아자~!

Posted by 짱묜

오늘은 Interaction 패널을 전격 해부(?) 해보도록 하겠습니다.
Interaction 패널은 오브젝트의 비주얼 트리와 스토리보드의 타임라인을 보여주는 패널로써 우리가 아주
많이 다루게 될 패널입니다.



블렌드를 실행하면 위와 같은 인터렉션 패널에서 각각의 구성요소에 대해서 알아보죠.
작업이 된 프로젝트 파일에는 아래와 같이 비주얼 트리가 나타납니다.



1. 오브젝트의 스콥을 보여줍니다. 실버라이트의 Page.xaml 스콥은 UserControl로 되어있습니다.
2. 레이어를 보여주고 가릴 수 있고 잠글 수도 있습니다.
3. 해당 문서 안의 비주얼트리를 보여줍니다.



1. 생성한 스토리보드의 이름이 나타나는 부분입니다.
2. 스토리보드를 관리하는 곳입니다. 드랍다운 목록을 보면 아래와 같이 창이 나타나는데요.



- New : 스토리보드를 새로 생성합니다.
- Duplicate : 스토리보드를 복사합니다.
- Reverse : 스토리보드를 역방향으로 전환합니다.
- Delete : 스토리보드를 삭제합니다.
- Rename : 스토리보드의 이름을 변경합니다.
- Close : 스토리보드를 종료합니다.

"+" 부분을 클릭하면 다음과 같이 스토리보드를 생성하는 대화상자가 나타납니다.



스토리보드를 생성하면 다음과 같이 스토리보드 이름이 표시되고 타임라인이 나타납니다.



그럼 타임라인 부분을 좀 더 자세히 살펴보자구요~! F6 키를 누르면 애니메이션을 작업하기에 더 좋게끔
패널들이 배치됩니다.



1. 키 프레임을 삽입할 수 있습니다.
2. 프레임이 실행되는 시간이 나타납니다. 직접 입력할 수 있고, 입력하는 시간으로 타임라인이 이동합니다.
3. 왼쪽 부분은 타임라인의 스냅핑을 선택/해제 할수 있는 기능입니다. 타임라인의 스냅핑을 활성화 할 경우,
오브젝트가 스냅라인에 따라 붙는것과 같이 설정한 시간 단위로 플레이헤드가 움직입니다. 비활성화 할 경우,
스냅핑이 없이 미세하게 플레이헤드가 움직입니다. 오른쪽 아이콘을 누르면 다음과 같은 창이 뜨면서 스냅
단위를 설정할 수 있습니다.



4. 타임라인을 재생하거나 되돌리는 컨트롤입니다.
5. 타임라인을 확대/축소하여 볼 수 있습니다.
6. 애니메이션의 포인트를 가리키는 플레이헤드 입니다. 드래그로 조절할 수 있으며 키프레임을 삽입할 때
이 플레이헤드를 원하는 타임 포인트에 놓아야 합니다.


이해가 잘 되셨는지 모르겠네요. 오늘 강좌는 여기서 마치도록 하겠습니다.

Posted by 짱묜