12
This presentation is the property of its rightful owner.
Sponsored Links
1 / 23

12 주 실습강의 PowerPoint PPT Presentation


  • 136 Views
  • Uploaded on
  • Presentation posted in: General

12 주 실습강의. 2010. 1 학기 , 소프트웨어 설계 및 실험 (Ⅰ) Silverlight (2) – Deep Zoom & Expression Blend. Preview. Deep Zoom 개요 Example Demo Deep Zoom Composer 설치 간단한 실습 Expression Blend 3 개요 10 가지 주요 기능 SketchFlow 설치 실습 과제 주의사항. Deep Zoom – 개요. Silverlight 2 부터 추가된 기능

Download Presentation

12 주 실습강의

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


12

12주 실습강의

2010. 1학기, 소프트웨어 설계 및 실험(Ⅰ)

Silverlight (2) – Deep Zoom & Expression Blend


Preview

Preview

  • Deep Zoom

    • 개요

    • Example Demo

    • Deep Zoom Composer 설치

    • 간단한 실습

  • Expression Blend 3

    • 개요

    • 10가지 주요 기능

    • SketchFlow

    • 설치

  • 실습 과제

  • 주의사항


Deep zoom

Deep Zoom – 개요

  • Silverlight 2 부터 추가된 기능

  • 고해상도의 사진을 응용 프로그램의 성능에 영향을 거의 주지 않으며 빠르게 확대 및 축소 가능

  • 가능한 예제 시나리오

    • 매우 크거나 해상도가 높은 이미지 탐색: 커다란 지도의 일부를 확대하여 다양한 수준의 세부 정보를 보고 마우스를 사용하여 지도 표면에서 뷰를 이동

    • 3-D 사진: 방을 360도로 보여 주는 여러 장의 연속적인 사진을 찍은 뒤 사용자는 서로 연결된 사진으로 방 전체를 돌아볼 수 있습니다.

    • 광고: 광고의 전체적인 테마를 나타내는 해상도가 상대적으로 낮은 이미지를 만든 다음 제품에 대한 인상과 데이터가 추가된 고해상도 이미지로 점진적으로 진행. 광고가 포함된 페이지를 처음 로드한 후 점차적으로 해상도가 높은 이미지를 로드하면 광고가 점차 또렷해지면서 독자의 주의를 끌 수 있습니다.


Deep zoom demo

Deep Zoom – Demo

  • http://memorabilia.hardrock.com/


Deep zoom deep zoom composer

Deep Zoom – Deep Zoom Composer 설치

  • http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en


Deep zoom 1

Deep Zoom – 간단한 실습 (1)


Deep zoom 2

Deep Zoom – 간단한 실습 (2)


Deep zoom 3

Deep Zoom – 간단한 실습 (3)


Deep zoom1

Deep Zoom – 간단한 실습 결과

마우스 휠 조작


Expression blend 3

Expression Blend 3 – 개요

  • Silverlight과 .NET을 위한 디자인 도구

  • XAML, C# 및 VB IntelliSense의 강력한 코드 편집 기능과 향상된 작업 영역 및 디자인 화면 제공

  • Silverlight, WPF, XAML, C#, VB 같은 산업 표준 .NET 기술을 사용하여 안정성을 보장하며 손쉽게 확장 및 액세스

  • 신뢰성과 보안이 강화된 응용 프로그램을 개발 가능

  • 주로 디자이너를 위한 도구

  • 아이디어를 구체화시키는 도구로도 활용 가능(SketchFlow)


Expression blend 3 10

Expression Blend 3 – 10가지 주요 기능

  • SketchFlow

  • 코드 작성 없이 가능한 대화형 작업

  • 디자인 타임 데이터를 사용하여 효율적인 UI를 더 빠르게 디자인

  • 디자인 자산 활용 - Adobe Photoshop 및 Adobe Illustrator 가져오기

  • IntelliSense를 사용한 코드 편집

  • 스타일 및 사용자 지정

  • Silverlight 및 WPF 지원

  • 개선된 UI

  • Team Foundation Server와 통합

  • 워크플로


Expression blend 3 sketchflow

Expression Blend 3 – SketchFlow

  • SketchFlow


Expression blend 31

Expression Blend 3 – 평가판 설치

  • http://www.microsoft.com/downloads/details.aspx?displaylang=ko&FamilyID=e82db5e2-7106-419e-80b0-65cce89f06bb


12

실습 과제(사진 갤러리 만들기)


12

주의사항

  • 컨트롤을 배치 후, 반드시 ID로 사용할 이름을 작성해주세요. Blend에서는 컨트롤의 ID 기본값이 설정되어 있지 않습니다.

  • XXX.xaml 파일을 수정한 후에 반드시 저장을 하세요. 그렇지 않으면 .xaml.cs 파일에서 각 컴포넌트의 ID에 접근할 수 없습니다.

  • 실행 전에 프로젝트 탭의 ‘프로젝트 다시 빌드’를 한 후 실행하여야 합니다.


Silverlight with blend 1

Silverlight with Blend (1)


Silverlight with blend 2

Silverlight with Blend (2)

  • Mainpage.aspx가 있는 프로젝트에 Image를 추가할 폴더를 생성 후, 이미지 파일 추가

  • [자산] 탭을 선택하고 [컨트롤]-[Button]을 이용하여 사용할 버튼 컨트롤을 배치


Silverlight with blend 3

Silverlight with Blend (3)

  • 이미지 파일을 디자인 페이지로 드래그하여 배치

  • 이미지의 사이즈를 고정 값으로 수정(직접 타이핑할 것)ex> (자동)384 -> 384

  • 이미지들을 StackPanel로 그룹화

  • StackPanel의 Orientation 속성값을Horizontal로 변경


Silverlight with blend 4

Silverlight with Blend (4)

  • [상태] 탭 선택하여 상태 그룹 추가

  • State 지속 시간을 1초로 설정

  • 상태 추가 선택하여 사진 개수 만큼 상태를 만들고 적절한 이름으로 변경해준다.


Silverlight with blend 5

Silverlight with Blend (5)

  • 상태를 하나 선택하여 상태 기록 설정 후,이미지들을 전부 선택하여 Width 값을 0으로 설정


Silverlight with blend 6

Silverlight with Blend (6)

  • 해당 상태에서 화면에 출력될 사진을 다시 선택하여 Width 값을 원래의 값으로 재설정 (예제의 경우 Photo1 상태에서는첫 번째 이미지가 화면에 표시)

  • 나머지 상태에 대해서도 같은 작업을 수행


Silverlight with blend 7

Silverlight with Blend (7)

  • 버튼 선택 후, 이벤트 속성 클릭

  • Click 이벤트 함수 입력란을 더블 클릭하면 이벤트 처리 함수가 자동 생성되며 .xaml.cs 파일로 이동

  • 버튼을 클릭했을 때 보여줄 상태 값에 따라 아래의 함수 작성

  • 나머지 버튼에 대해서도 적절하게 작성


12

참고 사이트

  • http://www.microsoft.com/korea/Expression/products/Blend_Overview.aspx (Blend Overview)

  • http://www.microsoft.com/korea/Expression/products/Sketchflow_Overview.aspx (SketchFlow Overview)

  • http://msdn.microsoft.com/ko-kr/library/cc645050(VS.95).aspx (Deep Zoom)

  • http://blogs.msdn.com/popcon/archive/2009/07/17/s-4-blend.aspx (공도의 실버라이트하기 좋은 날)

  • http://blog.jinhee.net/86 (진희쩜넷 예제)


  • Login