Интерактивность

Использование JavaScript в XAML – достаточно увлекательное занятие. Для тех, кто знаком с JavaScript, здесь открывается новое поле деятельности. К сожалению, многие возможности еще не до конца реализованы в Silverlight (на момент написания курса), поэтому нельзя сказать, что старые подходы и концепции можно вообще без всяких изменений переносить в новые приложения.

Silverlight и C#

Применение языка C# в Silverlight-приложениях – самое ожидаемое действие для .NET программистов. Фактически, это одно из важнейших преимущество технологии – разрабатывать мультимедийные сайты теперь можно без необходимости менять технологии и среду разработки. Создадим простое приложение, в котором анимация XAML будет изменяться с помощью C#. Запускаем Visual Studio 2008, создаем новый проект "SilverlightCSahrp" типа "Silverlight Application" (рис. 8.3):

Появившейся XAML-код изменим следующим образом:

<UserControl x:Class="SilverlightCSharp.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       Width="800" Height="600">
    <Canvas x:Name="LayoutRoot" Background="White">

        </Canvas>
</UserControl>

Вместо элемента Grid будем использовать привычный Canvas. Добавим XAML-код кнопки, которая носит привычное название Button:

<Button Width="150" Height="50" Canvas.Left="50" 
Canvas.Top="250" Content="Изменить текст" 
x:Name="myButton" ></Button>

В принципе, добавлять элементы можно и перетаскиванием их из панели Toolbox. В любом случае, появляется кнопка, встроенное оформление которой вполне придает ей "трехмерный" вид. Для создания обработчика события Click достаточно ввести первые буквы – IntelliSense предложит вставить подходящее значение (рис. 8.4):

Сразу после вставки среда предлагает создать новый обработчик события (Event Handler) (рис. 8.5):

Нажав клавишу Enter, получаем шаблон на C# для метода myButton_Click – точь-в-точь, как в Windows или ASP.NET приложениях. Для перехода к созданному методу можно открыть файл Page.xaml.cs в окне Solution Explorer. Впрочем, среда предлагает более быстрый способ – щелкнуть правой кнопкой мыши на названии метода и выбрать пункт контекстного меню "Navigate to Event Handler" (рис. 8.6):

Файл Page.xaml.cs содержит класс Page, в котором размещается метод (рис. 8.7):

Разделение дизайна и кода – знакомый подход, который нам уже известен. Вернемся к коду XAML проекта – добавим анимацию:

<UserControl x:Class="SilverlightCSharp.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       Width="800" Height="600">
    <Canvas x:Name="LayoutRoot" Background="White">
<TextBlock
x:Name="myText"
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold"
  Foreground="Red">
  XAML-графика
  
              <TextBlock.Triggers>
     <EventTrigger RoutedEvent="Rectangle.Loaded"> 
      <BeginStoryboard> 
        <Storyboard>
              <DoubleAnimation RepeatBehavior="Forever"
                Storyboard.TargetName="myText"
                Storyboard.TargetProperty="FontSize" 
         To="50"  Duration="0:0:5" AutoReverse="True"  /> 
            </Storyboard>
      </BeginStoryboard> 
    </EventTrigger> 
     </TextBlock.Triggers>
</TextBlock>
        <Button Width="150" Height="50" Canvas.Left="50" 
Canvas.Top="250" Content="Изменить текст" 
x:Name="myButton" Click="myButton_Click" ></Button>

    </Canvas>
</UserControl>

Здесь мы использовали пример из предыдущей лекции, в который добавили для атрибута "x:Name" элемента TextBlock значение "myText". В обработчике события myButton_Click создадим трехкратное изменение текста:

private void myButton_Click(object sender, RoutedEventArgs e)
   {
       if (myText.Text == "XAML-графика")
       {
           myText.Text = "Привет, Silverligth C#!";
       }
       else if (myText.Text == "Привет, Silverligth C#!")
       {
           myText.Text = "Анимированный текст";
       }
       else
       {
           myText.Text = "XAML-графика";
       }
   }
 }
}

Мы обращаемся к элементу TextBlock по его имени "myText" так, словно это обычный Windows-элемент. Запускаем приложение – нажатие на кнопку меняет анимированный текст циклическим образом:

Заметим, что в качестве кнопки вовсе не обязательно использовать элемент Button. Любая фигура или даже текст могут служить элементом, который будет реагировать на события.

WPF и C#

Взаимодействие WPF-приложений и C# осуществляется еще более простым образом. Новое поколение Windows-приложений предоставляет еще большие возможности, сохраняя старые подходы и концепции. Панель инструментов Toolbox позволяет перетаскивать на форму элементы, а в окне Solution Explorer можно видеть связанные файлы XAML и C# (рис. 8.9):

В данном случае обработчик события создается двойным щелчком по кнопке. Напишем в нем знакомое выражение для вызова диалогового окна:

namespace WPFInteractive
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Привет, WPF!");
        }

       
    }
}

Запускаем проект, нажимаем на кнопку Button (рис. 8.10):

Среда сгенерировала для кнопки XAML-код, причем событие Click точно такое же, как и в случае Silverlight-приложений:

<Window x:Class="WPFInteractive.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    
    <Grid>
        <Button Margin="102,125,101,114" Name="button1" 
Click="button1_Click">Button</Button>
    </Grid>
</Window>

Поддержка видео

Потоковое видео или возможность смотреть онлайн-ролики – одно из самых перспективных направлений развития сети. На протяжении всей Пекинской Олимпиады 2008 года посетители официального сайта http://www.nbcolympics.com, созданного с использованием технологии Silverlight, могли видеть прямые трансляции соревнований (рис. 8.11):

За все 17 дней соревнований сайты выдержал более 50 млн. уникальных пользователей. Это означает, что поддержка видео в Silverlight по своей производительности вполне может конкурировать с признанным лидером – технологией Flash.

Рассмотрим добавление видеоролика на Silverlight-сайт. Сразу после создания нового проекта щелкаем правой кнопкой на его заголовке, в появившемся контекстном меню выбираем пункт "Add Existing Item…". В появившемся диалоговом окне выбираем видео-файл, который нужно добавить. Из аудио и видео поддерживаются следующие форматы: *.mp3, *.asf, *.asx, *.wma, *.wmv. После добавления файл отображается в списке содержимого проекта. Перетаскиваем его в режиме дизайна на холст (рис. 8.12):

Компилируем проект – ролик начинает сразу же воспроизводиться на веб-странице (рис. 8.13):

Редактор Microsoft Expression Blend сформировал исключительно простой код для поддержки видео:

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="640" Height="480"
  Background="White"
  x:Name="Page">
  <MediaElement x:Name="quasol_rus_wmv" Width="424" 
Height="240" Canvas.Left="113" Canvas.Top="112" 
Source="quasol_rus.wmv" Stretch="Fill"/>
</Canvas>

Мы видим, что элемент MediaElement, отвечает за поддержку медиа-содержимого. Свойство Source может содержать и абсолютную ссылку на подходящий файл. Отметим, что для элемента MediaElement было сформировано значение "quasol_rus_wmv" для атрибута x:Name. Атрибут Stretch определяет расположение видеоролика относительно размеров элемента MediaElement. Дело в том, что каждое видео содержит свой собственный размер, например, 640х480 пикселей. Геометрические размеры MediaElement могут быть установлены произвольным образом. При значении "None" атрибута Stretch размеры видео не будут зависеть от размеров MediaElement. В нашем случае, при значении "Fill" видео заполняет всю область MediaElement. Если мы будем непропорционально изменять MediaElement, то видео будет искажаться. При значении "Uniform" видео будет подгоняться по ширине, сохраняя свои исходные пропорции. Наконец, при значении "UniformToFill" видео будет подгоняться до тех пор, пока его размеры меньше ра змеров элемента MediaElement. Если же они станут больше, то непопадающая часть отображаемого ролика будет обрезаться.

При попытке добавить неподдерживаемый формат видео, редактор отображает курсор соответствующим образом:

Поддержка небольшого перечня формата файлов – для видео, по сути, только *.wma и *.wmv, могло бы существенным образом усложнить работу. В самом деле, необходимость использовать сторонние редакторы для кодирования видео означает необходимость затрат на их приобретение. Кроме того, большинство разработчиков вряд ли захотят осваивать, к примеру, Adobe Premier. Но пакет Microsoft Expression Studio специально для этих задач содержит утилиту Microsoft Expression Encoder (рис. 8.15):

Подобно другим видео-редакторам, Microsoft Expression Encoder содержит изрядное количество возможностей и настроек. Но нас интересует просто преобразование в формат, поддерживаемый Silverlight-проектами. Поэтому загружаем сразу все ролики, которые нужно перекодировать, выделям их и нажимаем кнопку "Encode". Время преобразования зависит от процессора, объема оперативной памят и исходного видео. К примеру, стандартный DVDRip, размером около 1,4 Гб, на компьютере с процессором Core 2 Duo 2.13 ГГц и 2 Гб оперативной памяти обрабатывается чуть меньше двух часов. Клипы и трейлеры к фильмам преобразуются за считанные минуты (рис. 8.16):

Созданные файлы – уже в формате *.wmv, добавляем в проект и перетаскиваем их на поверхность холста. Самое интересное, что размеры медиа-элементов можно изменять точно также, как и обычных фигур (рис. 8.17):

Запускаем приложение – все добавленные видео-файлы запускаются одновременно (рис. 8.18):

Код, сформированный средой, содержит четыре элемента MediaElement – по одному на каждый видео-файл:

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="1024" Height="600"
  Background="White"
  x:Name="Page">
  <MediaElement x:Name="admiral_trl2_wmv" Width="447.852" 
Height="188.938" Canvas.Left="453.778" 
Canvas.Top="202.5" Source="admiral_trl2.wmv" Stretch="Fill"/>
  <MediaElement x:Name="maxpain_trlrb_wmv" Width="445.63" 
Height="188" Canvas.Left="456" Canvas.Top="10.5" 
Source="maxpain_trlrb.wmv" Stretch="Fill"/>
  <MediaElement x:Name="priklyucheniya_alyonushki_i_eryomy_wmv" 
Width="441.778" Height="331.334" Canvas.Left="12" 
Canvas.Top="262" Source="priklyucheniya-alyonushki-i-eryomy.wmv" Stretch="Fill"/>
  <MediaElement x:Name="quasol_rus_wmv" Width="440" 
Height="247.5" Canvas.Left="12" Canvas.Top="10.5" 
Source="quasol_rus.wmv" Stretch="Fill"/>
</Canvas>

Прямоугольные экраны, фиксированные размеры – это все уже давно известно. Воспользуемся действительно эффектными возможностями Silverlight. Применим трансформации к медиа-элементам:

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="1024" Height="600"
  Background="#FF05052C"
  x:Name="Page">
  <MediaElement x:Name="admiral_trl2_wmv" Width="447.852" 
  Height="188.938" Canvas.Left="447.778" 
Canvas.Top="223.5" Source="admiral_trl2.wmv" Stretch="Fill">
  
      <MediaElement.RenderTransform>  
    <TransformGroup>  
      <SkewTransform AngleX="15" />  
      <RotateTransform Angle="10"/>  
    </TransformGroup>  
    </MediaElement.RenderTransform>
  </MediaElement>

  
  <MediaElement x:Name="priklyucheniya_alyonushki_i_eryomy_wmv" 
Width="441.778" Height="331.334" 
  Canvas.Left="78" Canvas.Top="166" 
Source="priklyucheniya-alyonushki-i-eryomy.wmv" Stretch="Fill">
    <MediaElement.RenderTransform>  
    <TransformGroup>  
      <SkewTransform AngleX="15" />  
      <RotateTransform Angle="10"/>  
    </TransformGroup>  
    </MediaElement.RenderTransform>
  </MediaElement>
  
  
  <MediaElement x:Name="quasol_rus_wmv" Width="440" 
Height="247.5" Canvas.Left="12" 
  Canvas.Top="10.5" Source="quasol_rus.wmv" 
Stretch="Fill">
      <MediaElement.RenderTransform>  
    <TransformGroup>  
      <SkewTransform AngleX="15" />  
      <RotateTransform Angle="10"/>  
    </TransformGroup>  
    </MediaElement.RenderTransform>
  </MediaElement>
  
    <MediaElement x:Name="maxpain_trlrb_wmv" Width="445.63" 
Height="188" 
  Canvas.Left="390" Canvas.Top="22.5" 
Source="maxpain_trlrb.wmv" Stretch="Fill">
  <MediaElement.RenderTransform>  
    <TransformGroup>  
      <SkewTransform AngleX="15" />  
      <RotateTransform Angle="10"/>  
    </TransformGroup>  
    </MediaElement.RenderTransform>
  </MediaElement>
  
</Canvas>

Здесь мы исказили фигуры по горизонтали с одновременным поворотом. Код написан вручную, т.е. без использования визуальных инструментов Expression Blend для более ясного и лаконичного оформления. Запускаем приложение – видео, как ни в чем не бывало, продолжает воспроизводиться (рис. 8.19)

Добавим еще и маску прозрачности, сформированную радиальным градиентом:

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="1024" Height="600"
  Background="#FF05052C"
  x:Name="Page">
  <MediaElement x:Name="admiral_trl2_wmv" Width="447.852" 
  Height="188.938" Canvas.Left="447.778" 
Canvas.Top="223.5" Source="admiral_trl2.wmv" Stretch="Fill">
  
      <MediaElement.RenderTransform>  
    <TransformGroup>  
      <SkewTransform AngleX="15" />  
      <RotateTransform Angle="10"/>  
    </TransformGroup>  
    </MediaElement.RenderTransform>
    
     <MediaElement.OpacityMask>
  
                <RadialGradientBrush >
              <GradientStop Color="Blue" Offset="0.8" />
               <GradientStop Color="Transparent" Offset="1" />  
            </RadialGradientBrush>
       
    </MediaElement.OpacityMask>    
    
  </MediaElement>

  
  <MediaElement x:Name="priklyucheniya_alyonushki_i_eryomy_wmv" 
Width="441.778" Height="331.334" 
  Canvas.Left="78" Canvas.Top="166" 
Source="priklyucheniya-alyonushki-i-eryomy.wmv" Stretch="Fill">
    <MediaElement.RenderTransform>  
    <TransformGroup>  
      <SkewTransform AngleX="15" />  
      <RotateTransform Angle="10"/>  
    </TransformGroup>  
    </MediaElement.RenderTransform>
    
         <MediaElement.OpacityMask>
  
                <RadialGradientBrush >
              <GradientStop Color="Blue" Offset="0.8" />
               <GradientStop Color="Transparent" Offset="1" />  
            </RadialGradientBrush>
       
    </MediaElement.OpacityMask>  
  </MediaElement>
  
  
  <MediaElement x:Name="quasol_rus_wmv" Width="440" 
Height="247.5" Canvas.Left="12" 
  Canvas.Top="10.5" Source="quasol_rus.wmv" Stretch="Fill">
      <MediaElement.RenderTransform>  
    <TransformGroup>  
      <SkewTransform AngleX="15" />  
      <RotateTransform Angle="10"/>  
    </TransformGroup>  
    </MediaElement.RenderTransform>
    
         <MediaElement.OpacityMask>
  
                <RadialGradientBrush >
              <GradientStop Color="Blue" Offset="0.8" />
               <GradientStop Color="Transparent" Offset="1" />  
            </RadialGradientBrush>
       
    </MediaElement.OpacityMask>  
  </MediaElement>
  
    <MediaElement x:Name="maxpain_trlrb_wmv" Width="445.63" 
Height="188" 
  Canvas.Left="390" Canvas.Top="22.5" Source="
maxpain_trlrb.wmv" Stretch="Fill">
  <MediaElement.RenderTransform>  
    <TransformGroup>  
      <SkewTransform AngleX="15" />  
      <RotateTransform Angle="10"/>  
    </TransformGroup>  
    </MediaElement.RenderTransform>
    
         <MediaElement.OpacityMask>
  
                <RadialGradientBrush >
              <GradientStop Color="Blue" Offset="0.8" />
               <GradientStop Color="Transparent" Offset="1" />  
            </RadialGradientBrush>
       
    </MediaElement.OpacityMask>  
  </MediaElement>
  
</Canvas>

Изменения, отображаемые в режиме дизайна, позволяет представить себе, как будет выглядеть видео (рис. 8.20):

Запускаем проект – теперь наше видео выглядит весьма необычно (рис. 8.21):

Конечно, на практике, для обычных хостингов видео-файлов, может быть столь экстравагантное оформление может быть и ни к чему. Но сами возможности Silverligt позволяют создавать легко и быстро оригинальное оформление для любого видео-содержимого.

Управление воспроизведением видеоролика

Первое, что хочется сделать при просмотре видеоролика на странице – "нащупать" знакомые кнопки управления воспроизведением – остановки, паузы, проигрывания.. Но по умолчанию их нет в Silverlight-проектах. Дополним эту функциональность при помощи простейшего кода на JavaScript. Создадим еще один проект, в который добавим всего один видеофайл. В качестве "кнопок" будем использовать обычные текстовые элементы TextBlock. Код XAML будет выглядеть так:

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="640" Height="480"
  Background="White"
  x:Name="Page">
  <MediaElement x:Name="priklyucheniya_alyonushki_i_eryomy_wmv" 
  Width="512" Height="384" Source="priklyucheniya-alyonushki-i-eryomy.wmv" 
  Stretch="Fill" Canvas.Left="68" Canvas.Top="26"
  AutoPlay="False"
  />
  
  <TextBlock x:Name="txtPlay" Width="72" Height="24" 
      Canvas.Left="86" 
      Canvas.Top="430" Text="Play" TextWrapping="Wrap"  
      MouseLeftButtonDown="DoPlay"/>
 
<TextBlock x:Name="txtStop" Width="80" Height="24" 
Canvas.Left="238" 
      Canvas.Top="430" Text="Stop" TextWrapping="Wrap" 
      MouseLeftButtonDown="DoStop"/>
    
    <TextBlock x:Name="txtPause" Width="80" Height="24" 
Canvas.Left="158" 
      Canvas.Top="430" Text="Pause" TextWrapping="Wrap" 
      MouseLeftButtonDown="DoPause"/>
</Canvas>

В описании MediaElement был добавлен атрибут AutoPlay="False". Это означает, что теперь ролик не будет начинать проигрываться сразу после загрузки. Для трех элементов TextBlock добавлен обработчик события MouseLeftButtonDown. Открываем файл Page.xaml.js (рис. 8.22):

Добавляем код трех функций, который будет выглядеть так:

function DoPlay(sender, args) {
    sender.findName("priklyucheniya_alyonushki_i_eryomy_wmv").play(); 
}
function DoPause(sender, args) {
    sender.findName("priklyucheniya_alyonushki_i_eryomy_wmv").pause();
}
function DoStop(sender, args) {
    sender.findName("priklyucheniya_alyonushki_i_eryomy_wmv").stop();
}

Впрочем, можно и немного в другой форме:

function DoPlay(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("priklyucheniya_alyonushki_i_eryomy_wmv");
   theMedia.Play();
}
function DoPause(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("priklyucheniya_alyonushki_i_eryomy_wmv");
   theMedia.Pause();
}
 
function DoStop(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("priklyucheniya_alyonushki_i_eryomy_wmv");
   theMedia.Stop();
}

В любом случае, мы обращаемся к элементу MediaElement по значению атрибута x:Name (здесь – "priklyucheniya_alyonushki_i_eryomy_wmv") и вызываем его встроенные методы Play, Pause, Stop. Запускаем проект – теперь мы можем управлять воспроизведением (рис. 8.23):

Медиа-элемент содержит и другие встроенные свойства и методы, позволяющие без труда добавить привычные возможности, например, такие как отображение отношения текущего времени воспроизведения к общему. Описание этих свойств можно найти в разделе "MediaElement" библиотеки MSDN: http://msdn.microsoft.com/en-us/library/bb980132(VS.95).aspx. Впрочем, набор примеров пакета Microsoft Expression Blend содержит готовый сайт, содержащий все основные элементы управления (рис. 8.24):

Оформление этого плеера достаточно красочное. При необходимости, можно удалить лишние элементы и разобраться в функциональности ключевых объектов.

Deep Zoom Composer

Появление и широкое распространение цифровых фотоаппаратов сделало мир панорамных фотографий доступным практически для всех. Несмотря на то, что создание хороших панорамных изображений по-прежнему требует определенных навыков и мастерства, любой, даже начинающий фотограф может сделать серию перекрывающихся снимков и затем скомпоновать их, например, в программе PTGui (http://www.photo-sturm.ru/useful/article/PTGui/). Однако есть проекты в сети, которые не могут не восхищать, а создание их совершенно невозможно с помощью обычных фотоаппаратов. На сайте GERARDMAYNARD.COM (http://gerardmaynard.com/) приводится всего пять фотографий, среди которых есть и пейзажные (рис8.25):

Но какие это фотографии! Фотография "Death Valley" состоит из 112 157х 18376 пикселей (2,157 гигапикселей). Чтобы представить, насколько велико это изображение, вспомним, что стандартным разрешением 19-дюймового монитора является 1280*1024 пикселей. Чтобы отобразить эту фотографию, в качестве обоев на рабочих столах в масштабе 1:1, понадобится 1572 монитора.

Понятно, что отобразить эту фотографию всю целиком за приемлемое время невозможно даже на самом высокоскоростном канале связи. Поэтому на сайте отображается миниатюра изображения. Увеличивая масштаб и используя навигационную панель, можно перемещаться по всему полотну. Догрузка фрагментов изображения осуществляется постепенно, плавно прорисовывая все новые детали (рис. 8.26):

Смотрим на долину издалека – поворачиваем колесико мыши и словно в прицеле снайперской винтовки получаем детальное приближение. На пределе увеличения видим отдельные цветы и стебли. Навигационная рамка при этом сжимается в точку (рис. 8.27):

В других примерах этого сайта предлагается окинуть взором и моментально приблизить огромное полотно городского пейзажа. Пожалуй, такие проекты наилучшим, нагляднейшим образом иллюстрируют развитие фотографии как отрасли в целом.

На сайте http://gigapxl.org тоже размещены примеры подобных фотографий. Статья о том, как создаются такие уникальный фотографии, размещена в журнале Компьютерра-онлайн, которая так и называется "Гигапиксель" (http://www.computerra.ru/hitech/38859/).

Какое это отношение имеет к XAML? Дело в том, что в рамках технологии Silverlight компания Microsoft разработала еще одно направление Deep Zoom (глубокое увеличение). С помощью специальной программы Deep Zoom Composer пользователи получили возможность подготавливать панорамные фотографии и размещать их в специальных фотоальбомах, делая результат доступным в Интернете. При этом не требуется никаких специальных навыков – ни XAML, ни программирования на C#. Но создаваемый проект будет основан на Silverlight. А это означает, что, все-таки обладая навыками работы с технологией, можно изменять создаваемые фотоальбомы или даже интегрировать их в рамках своих решений.

В качестве фотографий, которые легко доступны для получения, будем использовать фрагменты космических снимков из программы Virtual Earth 3D (рис. 8.28):

Далее мы делаем серию перекрывающихся снимков и сохраняем их в отдельную папку. Количество ничем не ограничено – при наличии большого количества свободного времени допускается сделать аналог изображения, скажем, для "Гигапикселя". После завершения подготовки изображения, скачиваем и устанавливаем Deep Zoom Composer, а затем открываем в нем подготовленные рисунки. Перетащив их на рабочий холст выделяем все, щелкаем правой кнопкой мыши и в появившемся контекстном меню выбираем пункт "Create panoramic photo" (рис. 8.29):

Спустя некоторое время, зависящее от числа фрагментов и мощности процессора, появляется готовое полотно в специальном диалоговом окне "Stitching Preview". Здесь изображение можно кадрировать (обрезать) для придания ему прямоугольной формы (рис. 8.30):

Я специально оставил полотно в виде кусочной структуры, для того чтобы подчеркнуть фрагментарный характер панорамы. На практике, конечно, готовые изображения должны быть прямоугольными. Для публикации изображений предлагается два способа. Первый, самый просто и подходящий для всех– отправка панорамы на специальный сайтhttp://photozoom.mslivelabs.com. Для аутентификации используется Windows Live ID, который можно получить на сайте http://www.microsoft.com/rus/liveid. Интерфейс программы позволяет заняться размещение изображения не покидая Deep Zoom Composer, т.е. не запуская браузер (рис. 8.31):

После успешной аутентификации приступаем к созданию альбома. Вводим его название, указываемый формат загружаемого изображения (например, PNG) и нажимаем кнопку "Upload" (рис. 8.32):

Спустя некоторое время мы получаем обычную гиперссылку на созданный фотоальбом. Для его просмотра не нужен Deep Zoom Composer, главное, чтобы на компьютере был установлен Silverlight. Инструменты масштабирования изображения создаются автоматически (рис. 8.33):

Изображение в фотоальбоме при просмотре загружается точно так же, как и на рассматриваемом в начале этого раздела сайте GERARDMAYNARD.COM. Сначала появляется миниатюра, затем, по мере увеличения масштаба и перемещения по полотну, догружаются нужные фрагменты.

Если же мы собираемся дорабатывать и изменять структуры создаваемого Silverlight-сайта, то сохраним вначале проект на жестком диске своего компьютера. Для этого следует перейти на вкладку "Silverlight Export" и указать директорию для сохранения (рис. 8.34):

Самое замечательно, что перейдя в к сохраненному проекту, мы обнаружим решение (Solution) содержащее все необходимые файлы. Остается только открыть его в Visual Studio .NET 2008 и начать добавлять собственные функциональные возможности (рис. 8.35):

В библиотеке MSDN, в статье "Deep Zoom": http://msdn.microsoft.com/en-us/library/cc645050(VS.95).aspx приводится хорошее описание этой технологии. А в статье "A DeepZoom primer (explained and coded)" http://blogs.msdn.com/jaimer/archive/2008/03/31/a-deepzoom-primer-explained-and-coded.aspx Джейма Родригеса (Jaime Rodriguez) – объяснение и код аналогичного примера.

Технология DeepZoom – это не только панорамные фотографии. Создаваемый проект предоставляет большие возможности по разработке дополнительных сервисов. Если для вашего города нет карты Яндекс, если вам хочется создать гео-сервис, то технология Silverlight вполне подходит в качестве платформы разработки.

Фотосинты

Хостинги изображений, онлайн-фотоальбомы, множество фотографий в новостных лентах – современного пользователя Сети трудно удивить картинками в сети. Но направление ), разрабатываемое корпорацией Microsoft – это трехмерные изображения, взятые словно из будущего, не оставят равнодушным никого.

Представьте себе, что вы бродите с фотоаппаратом возле египетских пирамид. Хочется запечатлеть множество снимков возле древнего Сфинкса, чтобы потом их показывать знакомым и друзьям. Однако может ли фото или даже видео передать всю ту трехмерную полноту ощущений, возникающих при реальном присутствии? Фотографии останутся плоскими и двумерными, видео выхватывает небольшой кусочек обзора (а длинный фильм вряд ли кто захочет смотреть), словом, изобразительные возможности остаются весьма ограниченными. Но можно поступить немного иначе. Для этого нужно немного времени и терпения, но результат превзойдет все ожидания. Итак, общий план действий примерно такой:

В результате, созданный объект представляет собой совокупность всех фотографий, пространственные пересечения которых формируют общую трехмерную форму фигуры (рис. 8.36):

Встроенные средства просмотра позволяют вращать фигуру прямо в окне браузера изменять масштаб, просматривать отдельные снимки. В целом, просмотр напоминает обзор в трехмерной игре, с той лишь разницей, что виртуальная реальность формируется вами при помощи фотоаппарата.

Прежде чем приступать к созданию своих ландшафтов, полезно ознакомиться с лучшим галереями http://photosynth.net/explore.aspx Интересные примеры, например, фотосинты Екатеринбурга, объяснения и демонстрации расположены в блоге Константина Кичинского.

Плагин для просмотра фотосинтов – это не Silverlight. Но это родственная технология может быть интегрирована в рамках одного сайта, сделанного с включением Silverlight, обеспечивая тем самым дополнительные мультимедийные возможности.