블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



http://befunky.com
사진을 만화처럼 변환해 주는 사이트~!^^ 신기하다..ㅋㅋ

첫번째, 변환을 시도한 사진이다~!^^

사용자 삽입 이미지


사용자 삽입 이미지

이렇게 변환 되다니...ㅋㅋ아래 두개의 사진도 변환해 봤다.ㅋㅋ신기신기...ㅋㅋ

사용자 삽입 이미지

사용자 삽입 이미지


사용자 삽입 이미지

사용자 삽입 이미지

Posted by happydong
, |



Silverlight게임 만들기 빨리 진행을 해서 끝내야 하는데제가 회사일 때문에 조금 바빠서리자꾸 늦어 지네요~^^;;아주 혹시나 제 글을 관심 있게 봐주시는 분들에게 죄송하다는 말을 드리고 싶네요~^^;;

그럼 지난 강좌를 이어가도록 하겠습니다. 지난번 시간에는 랜덤함수를 이용해서 이미지들을 생성해서 보여주는 것까지 코드를 짜보았습니다. 이번 시간에는 간단하게 Blend를 이용해서 여러 가지 Storyboard만들어 볼 것이며, 같은 그림을 클릭했을 때 이미지가 지워지도록 만들어 볼 것입니다. ~ 그럼 지난 시간까지 무리 없이 잘 따라오셨다면 Blend를 실행시키시고 해당 프로젝트를 열어주세요. 프로젝트가 다 열리셨다면 Photo.xaml파일을 클릭해서 열어 주세요~

사용자 삽입 이미지


위 그림과 같이 열리셨다면 Rectangle객체를 선택을 해서 전에 만들었던 Image객체 위 크기와 높이를 똑같이 합니다. (Left Top 0 이며, Rectangle객체는 img_back(Canvas객체)의 하위에 생성하지 않습니다.) 속성설정은 아래 그림과 같으며 혹시나 해서 코드소스를 같이 붙어 드립니다^^ 그리고 혹시 객체 색을 어떻게 지정하는지 궁금하신 분들은 [무한도전]Silverlight 메뉴바 만들기(3)를 참고 하세요~!

사용자 삽입 이미지

Photo.xaml 페이지

<Rectangle Width="96" Height="96" Stroke="#FF000000" x:Name="imghide" Opacity="1" RenderTransformOrigin="0.5,0.5" Cursor="Hand">

<Rectangle.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleX="1" ScaleY="1"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</Rectangle.RenderTransform>

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.505,0" StartPoint="0.5,0.979">

<GradientStop Color="#FF2A2A2A" Offset="0.019"/>

<GradientStop Color="#FF474646" Offset="0.538"/>

<GradientStop Color="#FF414141" Offset="0.486"/>

<GradientStop Color="#FF999999" Offset="0.923"/>

<GradientStop Color="#FF333333" Offset="0.269"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>


위 코드는 img_back(Canvas객체) 바로 아래에 넣으시면 되고,그렇게 생성이 될 것 입니다^^

 

이제는 몇가지 Storyboard를 만들어 보도록 하겠습니다. 이 부분은 그림으로 하나하나 캡쳐뜨는 것이 너무 많을 것 같아서 동영상으로 찍어 보았습니다. ^^;;처음 찍어보는 거라 좀 쓱쓰럽네요~^^그래도 혹시 Blend에 익숙하지 않은 분들에게 도움이 되셨으면 좋겠습니다~

참고로 마이크가 없는 관계로 말로 설명을 하지 못했습니다. 다소 보는데 불편하시더라고 이해해주세요~!^^;;;

 



두개의 StoryBoard를 말들었습니다. 하나는 Photobig이고, 하나는 Photosmall입니다.

각각의 행위는 아래와 같습니다.

  Photobig : 사용자가 클릭을 했을 때 객체가 커지면서 이미지가 보여지는 StoryBoard.

Photosmall : 같은 그림이 아닐경우 객체가 작아지면서 이미지가 보이지 않는 StoryBoard.

 

생성된 코드는 아래와 같습니다.

Photo.xaml 페이지

<Canvas.Resources>

<Storyboard x:Name="Photobig">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img_back" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.25"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img_back" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.25"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.25"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.25"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<Storyboard x:Name="Photosmall">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img_back" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/>

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/>

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img_back" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/>

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/>

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<!-- 전에 있던 코드에서 코드가 조금 추가 되었습니다. 유의하세요~! -->

<Canvas Width="96" Height="96" Canvas.Left="0" Canvas.Top="0" x:Name="img_back" RenderTransformOrigin="0.5,0.5">

<Canvas.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleX="1" ScaleY="1"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</Canvas.RenderTransform>

<Image Width="96" Height="96" Stretch="Fill" x:Name="image1">

</Image>

</Canvas>


이제 StoryBoard가 만들어 졌으니깐 같은 그림일 때 지워지고 같은 그림이 아니라면 다시 원래되로 돌아가는 소스코드를 짜보도록 하겠습니다. 먼저 Photo페이지의 cs코드부분 열어주시고, 아래 코드들를 입력 합니다.

(참고로 아래 코드들은 전에 작성했던 코드에 추가적으로 들어가는 코드이니 혼동없으시길 바랍니다)

 

Photo.xaml.cs 페이지 (전역변수 선언)

기존 코드 생략

// 클릭을 했는지 여부를 확인 하기위한

bool _Mousedown = false;

 

Photo.xaml.cs 페이지 (Property)

/// <summary>

/// 객체가 클릭 여부를 지정하거나 반환

/// </summary>

public bool MouseDown

{

            get { return _Mousedown; }

            set { _Mousedown = value; }

}

 

위 변수는 사용자가 한객체를 여러 번 클릭하는 행위를 방지하기 위해서 선언한 것 이며,

Property를 통해서 Page클래스에서 확인할수 있습니다.

 

Photo.xaml.cs 페이지

public Photo(Page page,Downloader down ,String URL)

{

    기존 코드 생략

    // 객체 클릭 이벤트 생성

this.MouseLeftButtonDown += new MouseEventHandler(Photo_MouseLeftButtonDown);

}

void Photo_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

 // Page클래스의 SetPoint에 접근

_Page.SetPoint(this, _root);

}

 

SetPoint를 아래코드에서도 알수 있겠지만 접근제한자가 internal이여서 접근이 가능하며, 인자값으로 자신(Photo) _root(FrameworkElement)를 받고 있습니다. Page클래스 단에서 쉽게 Photo클래스를 컨트롤 하기 위해서 입니다.

 

Photo.xaml.cs 페이지 (Property)

/// <summary>

/// 객체의 이미지 URL값을 반환

/// </summary>

public string getUrl

{

get { return _URL; }

}


Property Page클래스에서 같은 그림인지 아닌지 확인 하기위해서 만든 것입니다. , 같은 그림인지 여부는 URL값으로 확인 할수 있습니다. 이제 대충 어떻게 해야하는지 감을 잡으신 분들분 계실 것 같군요~!^^이제 Page.xaml.cs페이지에서 코드를 짜보도록 하겠습니다. 먼전 변수 선선언부부터 하도록 하겠습니다 .

 

Page.xaml.cs 페이지 (전역변수 선언)

기존 코드 생략

 

// 사용자의 두번 클릭을 위한 전역 변수

int number = 0;

// 선택한 두개의 이미지 확인을 위한 Photo 배열

private Photo[] _ImgArray = new Photo[2];

// Photo FramworkElement 생성 각각의 StoryBoard 두개를 실행하기 위함.

private FrameworkElement[] _ROOT = new FrameworkElement[2];

 

보시기 편하게 주석으로 각각의 변수가 어떻게 쓰여질지 작성해 봤습니다.다음은 SetPoint부분의 코드를 작성해 보겠습니다.

 

Page.xaml.cs 페이지

internal void SetPoint(Photo photo, FrameworkElement root)

{

// 사용자가 막 클릭하는 걸 방지..딱 두번만 클릭관련 조건~!

if (number < 2)

{

// 스크린 Canvas에서 이미지 삭제

screen.Children.Remove(photo);

// 스크린 Canvas에 이미지 다시 추가

screen.Children.Add(photo);

 

//같은 그림들 두번 클릭하면 안됨. 그래서 해당 Photo에 마우스클릭을 했었는지 확인함.

if (!photo.MouseDown)

{

photo.MouseDown = true;

// Photo에 있는 StoryBoard를 생성하기.

Storyboard Photobig = root.FindName("Photobig") as Storyboard;

Photobig.Begin();

 

_ImgArray[number] = photo;

_ROOT[number] = root;

number++;

if (_ImgArray[1] != null)

{

// 두번째로 찍은 이미지이면 스토리보드 실행후 이벤트 발생함

Photobig.Completed += new EventHandler(Photobig_Completed);

}

}

}

}


위 코드는 주석을 통해서도 대충 이해하실수 있을 것이라고 생각이 됩니다. 조금 이상하게 보일 부분이 이미지를 삭제하고 추가하는 부분일텐데요. 이 부분은 왜 이렇게 했냐면
사용자 정의 컨트롤이 for문을 돌면서 동적으로 생성이 되다 보니깐 먼저 생성된 것들은 제일 마지막에 생성된 객체의 밑에 있게됩니다. 만약 사용자가 제일 밑에 있는 객체을 클릭했다고 했을 때 그 객체의 StoryBoard는 어떻게 되겠습니까? 상상이 가시나요~^^ 제일 위에 있는 객체에 겹치게 되어서 제일 위에 있는 객체 위로 못올라 오게 됩니다. 그럼 클릭한 객체의 zindex값을 조정해 주면 되지 않을까 생각하시는 분이 있을까 생각이 됩니다. 저 또한 그렇게 생각을 했으니깐요.그래서  사용자 정의 컨트롤의 최상위 Canvas zindex값을 조정해 봤는데 안되더군요~^^;; 나름 고민과 좌절을 겪고 있던중 문득 생각이 난 것이 새로 추가하면 위로 가지 않을까 싶어서 삭제후 다시 추가를 했던 것 입니다~^^;;그러니 내가 원하던데로 움직이니정말 좋았습니다.ㅋㅋ 음..다음 조건들은 주석에서도 설명하고 있듯이 사용자가 객체 클릭횟수를 조절하기 위함이고요, 그 다음은 한 객체를 두번 클릭을 방지하기 위한 조건입니다. 한 객체를 두번 클릭하면 StoryBoard가 두번 일어나겠지요~!그럼 안되잖아요~! 클릭하면 _ImgArray배열 변수에 값을 지정하게 되고 두번째 값까지 들어가게 되면 생성한 StoryBoard의 이벤트(Completed:StoryBoard가 끝나면 일어나는 이벤트)를 생성합니다~! 이벤트 내용 코드는 아래와 같습니다~

 

Page.xaml.cs 페이지

void Photobig_Completed(object sender, EventArgs e)

{

//이미지 URL이 같다면 지워버리게 함.

if (_ImgArray[0].getUrl == _ImgArray[1].getUrl)

{

for (int i = 0; i < 2; i++)

{

//스크린 Canvas에서 제거

screen.Children.Remove(_ImgArray[i]);

number = 0;

}

}

else

{

for (int i = 0; i < 2; i++)

{

// Photo에 있는 StoryBoard를 생성하기.

Storyboard Photosmall = _ROOT[i].FindName("Photosmall") as Storyboard;

Photosmall.Begin();

// 그림이 같이 않을 경우 StoryBoard가 실행이 다 끝난 다음에 클릭할수 있도록 하기 //위한 이벤트처리.

Photosmall.Completed += new EventHandler(Photosmall_Completed);

//마우스 관련 다시 false로 돌림

_ImgArray[i].MouseDown = false;

}

}

//배열은 null 값으로 재지정함.

for (int k = 0; k < 2; k++)

{

_ImgArray[k] = null;

_ROOT[k] = null;

}

}

// Photosmall StoryBoard 이벤트부분

void Photosmall_Completed(object sender, EventArgs e) { number = 0; }

 

위 코드가 바로 같은 그림인 경우 객체를 삭제하는 코드 부분입니다.URL값으로 확인을 해서 같은 그림이라면 삭제가 이루어 지고요, 같은 그림이 아니라면 Photosmall StoryBoard를 생성해서 실행하게 됩니다.StoryBoard가 실행이 끝나면 다시 클릭할수 있도록 number변수를 초기화 해줍니다.

그리고 _ImgArray배열과 _ROOT배열의 값을 null로 초기화 해줍니다~ 이렇게 해야 다음에 다시 확인할수 있을 테니깐요~^^ 아래 동영상은 잘 작동이 되는 모습을 찍어본 것 입니다.



 

~이제 어느정도 게임 처럼 작동하고 있군요~^^ 이제부터는 간단한 조건과 스토리보드만 추가하면 게임이 완성이 됩니다~^^ 한번 잘 생각해 보시고 직접 미리만들어 보는 것도 괜찮을 것 같네요~ 여기까지 따라오느라 수고 많으셨습니다~^^ 혹시 제 내용중에 부족한 부분이 있거나 궁금하신 부분이 있다면 언제든지 말씀해 주세요~^^
 
Posted by happydong
, |



ASP.NET의 창시자로 유명한 마이크로소프트 스콧 구슬리 전무가 17일 한국을 방문했다. ASP.NET, WPF, IIS 등 MS 개발 관련 최신 기술들의 아버지로 불리며, 실버라이트 전략 중심에 있기도 한 그는 국내에서도 인기가 상당하다.

방한 전부터 국내 관련 블로그에 환영의 글이 올라왔을 정도. 그의 인기 블로그(http://weblogs.asp.net/scottgu/)에는 매 글마다 수 십개의 코멘트가 달리고 있다.

다음은 ‘개발자 개인’을 주제로 한 그와의 인터뷰 내용이다. 믿기 어려울지 모르지만 구슬리 전무는 4살 때부터 아버지를 따라 펀치카드를 다루며, 컴퓨터 공학의 꿈을 키웠다고 한다. MS 전무자리에 올라선 그의 나이는 이제 30대 중반이다.

ASP.NET의 창시자로 유명하다.
처음에는 대단위 프로젝트가 아닌 ASP의 보완을 위해 시작했던 작업이었다. 이 과정에서 문제 해결을 위해 여러 시도를 해 본 결과 CLR을 지원하게 됐다. 초창기에는 아주 작은 팀이어서 여러 가지를 실험해 볼 수 있었다.

당시 평개발자로서 새로운 시도가 어렵지 않았는가?
마이크로소프트에서는 ‘Code wins’라는 말이 있다. 개발자라면 직급이 아니라 코드를 통해 해결책을 내놓는 것으로 인정받는다는 것이다.

ASP.NET도 처음에 혼자 프로토타입을 개발하고 난 이후 그 3-4명의 작은 팀이 생겼다. 서버를 통해 코드를 관리하는 것이 효율적이란 사실을 스스로 믿고 강하게 주변 사람들을 설득했다.

전무자리에 오른 지금도 코딩을 하고 있다니 흥미롭다.
매일 적어도 3~4시간은 코딩을 한다. 이미 제품화 된 것 보다는 대부분 새로운 아이디어를 시도하는 프로토타입으로 그치는 경우가 많지만, 끊임없이 새로운 시도를 추구하고 있다.

현재 우리 팀에서 620명의 닷넷 및 비주얼 스튜디오 개발자가 일하고 있고, 그동안 개발한 코드가 2,200만 라인에 이른다. 되도록 팀을 작게 운영, 신속하고 민첩하게 일하려 한다.

아키텍트도 보유하고 있는가? 훌륭한 아키텍트가 되려면?
몇 명의 시니어 개발자들이 아키텍트로 활동하고 있다. 프로그램의 방향과 비전을 설정하고 개발을 지휘한다. 훌륭한 아키텍트는 코딩을 놓지 않는 것이라고 생각한다. 항상 코딩만 얘기할 순 없지만 꾸준함은 유지해야 한다.

관리자 입장에서는 무엇을 강조하는가?
모든 매니저가 그렇지만 팀원들이 성장하게 돕는 것이 가장 중요한 역할이라고 생각한다. 또한 고객 중심적인 마인드를 개발자들이 갖게 하려고 노력한다. 큰 글로벌 기업의 개발자들이 잊기 쉬운 점이 바로 고객의 입장에서 생각하고 고객들과 소통하는 것이다.

아울러 목표한 바는 결과로 반드시 만들어 내는 것도 중요하다고 본다. 개발자들을 코드로 보상을 받는 것이라고 생각한다. '개발 작업'을 하는 것이 아닌 '좋은 제품'을 만들어 내야 한다.

블로그가 상당히 인기있다. 어떻게 관리하는가?
블로깅은 4년여 전에 시작했는데, 심층적 기술문서들을 올리면서 많은 개발자들이 조회하고 참고하는 정보소스가 되었다. 1달에 보통 10-15회 문서를 올린다. 이 과정을 통해 우리 기술팀이 개발한 기능들을 더 잘 이해하게 되기도 한다.

보통 밤 10시쯤 블로깅을 하는데, 새벽 2시에 끝나기도 하고, 어떤 기술문서들의 경우 더 늦게까지 작업하기도 한다.

.NET의 미래를 전망한다면?
현재 주요 인터넷 환경 서버의 44%가 닷넷을 사용하고 있다. 해외 유명 증권, 은행, 델 온라인 사이트, 마이스페이스, 한국의 엠넷, SBSi 등 많은 기업에서 훌륭한 닷넷 활용 사례를 찾아볼 수 있다.

이런 움직임은 올해 ‘비주얼 스튜디오 2008’과 ‘닷넷 프레임워크 3.5’, 그리고 ‘실버라이트2.0’까지 출시되며 더욱 거세질 것이다. 어떤 프로그래밍 언어를 사용하던지, .NET은 개발자들이 기존에 가졌던 경험과 기술지식, 그간의 결과물을 재활용할 수 있는 토대를 제공할 것이다.

항상 클라이언트와 웹 애플리케이션을 아우르면서, 개발자의 생산성과 사용자의 풍부한 경험을 개선하는 것에 심혈을 기울이고 있다. @
Posted by happydong
, |