slide1
Download
Skip this Video
Download Presentation
12 주 실습강의

Loading in 2 Seconds...

play fullscreen
1 / 23

12 주 실습강의 - PowerPoint PPT Presentation


  • 224 Views
  • Uploaded on

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 부터 추가된 기능

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 12 주 실습강의' - hieu


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
slide1

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
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 31
Expression Blend 3 – 평가판 설치
  • http://www.microsoft.com/downloads/details.aspx?displaylang=ko&FamilyID=e82db5e2-7106-419e-80b0-65cce89f06bb
slide15
주의사항
  • 컨트롤을 배치 후, 반드시 ID로 사용할 이름을 작성해주세요. Blend에서는 컨트롤의 ID 기본값이 설정되어 있지 않습니다.
  • XXX.xaml 파일을 수정한 후에 반드시 저장을 하세요. 그렇지 않으면 .xaml.cs 파일에서 각 컴포넌트의 ID에 접근할 수 없습니다.
  • 실행 전에 프로젝트 탭의 ‘프로젝트 다시 빌드’를 한 후 실행하여야 합니다.
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 파일로 이동
  • 버튼을 클릭했을 때 보여줄 상태 값에 따라 아래의 함수 작성
  • 나머지 버튼에 대해서도 적절하게 작성
slide23
참고 사이트
  • 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 (진희쩜넷 예제)
ad